/**
 * admin_design.css
 * SUN Admin Design System
 * 落ち着いた業務画面のための白ベース + SUNブランド配色
 * 命名規則: FLOCSS (l- Layout / c- Component / u- Utility / t- Theme)
 */

/* ===================================
   1. Design Tokens (CSS Variables)
   =================================== */
:root {
  /* Main Area */
  --color-bg-base: #f5f6f7;
  --color-bg-card: #FFFFFF;
  --color-bg-card-hover: #FFFCF8;
  --color-primary: #E67E22;
  --color-primary-light: #F97316;
  --color-primary-dark: #C2410C;
  --color-primary-bg: rgba(230, 126, 34, 0.08);
  --color-accent: #10B981;
  --color-accent-light: #34D399;
  --color-border: #E5E7EB;
  --color-border-light: #F3F4F6;
  --color-text: #2D3436;
  --color-text-muted: #636E72;
  --color-text-light: #6B7280;

  /* Sidebar — WPP（純白 + チャコール active） */
  --sidebar-bg: #FFFFFF;
  --sidebar-bg-hover: #f0f0f0;
  --sidebar-bg-active: #454850;
  --sidebar-text: #5F6368;
  --sidebar-text-active: #202124;
  --sidebar-text-active-on-dark: #FFFFFF;
  --sidebar-text-muted: #9AA0A6;
  --sidebar-border: transparent;
  --sidebar-accent: #454850;
  --sidebar-width: 260px;
  --sidebar-item-height: 44px;

  /* Status Colors */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  --color-info: #475569;

  /* Layout - 8px Grid System */
  --spacing-unit: 8px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* Card System — 角丸8px統一 */
  --card-radius: 8px;
  --card-radius-sm: 8px;
  --card-radius-xs: 8px;
  --btn-radius: 8px;
  --gutter: 16px;
  --card-shadow: none;
  --card-shadow-hover: none;

  /* Typography */
  --font-family: 'IBM Plex Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-service: 'Shippori Antique', serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 0.9375rem;
  --font-size-lg: 1.0625rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --line-height: 1.7;
  --line-height-tight: 1.4;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* SUN flash popup and submit loading overlay */
.sun-flash-stack {
  position: fixed;
  top: 22px;
  right: 24px;
  z-index: 10000;
  display: grid;
  gap: 10px;
  width: min(420px, calc(100vw - 48px));
  pointer-events: none;
}

.sun-flash {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: #fff;
  color: #1F2937;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
  font-size: 13px;
  line-height: 1.7;
  pointer-events: auto;
}

.sun-flash i {
  margin-top: 3px;
  font-size: 15px;
}

.sun-flash__body {
  min-width: 0;
  font-weight: 700;
}

.sun-flash__close {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #6B7280;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.sun-flash__close:hover,
.sun-flash__close:focus-visible {
  background: #F3F4F6;
  color: #111827;
  outline: none;
}

.sun-flash--success {
  border-color: #BBF7D0;
  background: #F0FDF4;
}

.sun-flash--success i {
  color: #16A34A;
}

.sun-flash--error {
  border-color: #FECACA;
  background: #FEF2F2;
}

.sun-flash--error i {
  color: #DC2626;
}

.sun-flash--warning {
  border-color: #FDE68A;
  background: #FFFBEB;
}

.sun-flash--warning i {
  color: #D97706;
}

.sun-flash--info {
  border-color: #FDBA74;
  background: #FFF7ED;
}

.sun-flash--info i {
  color: #E67E22;
}

.sun-flash.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}

.sun-submit-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(248, 250, 252, 0.72);
  backdrop-filter: blur(2px);
}

.sun-submit-overlay.is-visible {
  display: flex;
}

.sun-submit-dialog {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  min-width: 520px;
  max-width: calc(100vw - 48px);
  padding: 20px 22px;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  background: #fff;
  color: #1F2937;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.sun-submit-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid #FED7AA;
  border-top-color: var(--sun-primary, #E67E22);
  border-radius: 999px;
  animation: sun-submit-spin .75s linear infinite;
}

.sun-submit-title {
  margin: 0;
  color: #111827;
  font-size: 14px;
  font-weight: 700;
}

.sun-submit-text {
  margin: 2px 0 0;
  color: #6B7280;
  font-size: 12px;
  line-height: 1.6;
}

.sun-submit-progress-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}

.sun-submit-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #F3F4F6;
}

.sun-submit-progress__bar {
  width: 8%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #FDBA74 0%, var(--sun-primary, #E67E22) 100%);
  transition: width .28s ease;
}

.sun-submit-percent {
  min-width: 44px;
  color: #374151;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

@keyframes sun-submit-spin {
  to {
    transform: rotate(360deg);
  }
}

.sun-leave-overlay {
  position: fixed;
  inset: 0;
  z-index: 9985;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.36);
  backdrop-filter: blur(2px);
}

.sun-leave-overlay.is-visible {
  display: flex;
}

.sun-leave-dialog {
  width: min(460px, 100%);
  padding: 24px;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  background: #fff;
  color: #1F2937;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

.sun-leave-dialog__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: #FFF7ED;
  color: var(--sun-primary, #E67E22);
  font-size: 17px;
}

.sun-leave-dialog__title {
  margin: 0;
  color: #111827;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
}

.sun-leave-dialog__text {
  margin: 8px 0 0;
  color: #6B7280;
  font-size: 13px;
  line-height: 1.8;
}

.sun-leave-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.sun-leave-dialog__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.sun-leave-dialog__button:hover,
.sun-leave-dialog__button:focus-visible {
  border-color: #9CA3AF;
  background: #F9FAFB;
  outline: none;
}

.sun-leave-dialog__button--primary {
  border-color: transparent;
  background: var(--sun-primary, #E67E22);
  color: #fff;
}

.sun-leave-dialog__button--primary:hover,
.sun-leave-dialog__button--primary:focus-visible {
  background: #D94F13;
  color: #fff;
}

/* ===================================
   2. Base Styles
   =================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.t-admin {
  font-family: var(--font-family);
  color: var(--color-text);
  background-color: var(--color-bg-base);
  line-height: var(--line-height);
  min-height: 100vh;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-light);
}

/* ===================================
   3. Layout - Grid System
   =================================== */
.l-wrapper {
  display: flex;
  min-height: 100vh;
}

.l-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.l-sidebar::-webkit-scrollbar {
  width: 4px;
}

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

.l-sidebar::-webkit-scrollbar-thumb {
  background: var(--sidebar-border);
  border-radius: 4px;
}

.l-main {
  flex: 1;
  /* flex子はmin-width:autoのため、幅広テーブル等のmin-contentでページ全体が横に伸びる。
     0にして内側のoverflow-x:autoに横スクロールを閉じ込める。 */
  min-width: 0;
  margin-left: var(--sidebar-width);
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-2xl);
  min-height: 100vh;
  background: var(--color-bg-base);
}

.l-container {
  max-width: 1400px;
  margin: 0 auto;
}

.l-container:has(.hearings-flow),
.l-container:has(.hearings-source),
.l-container:has(.hearings-site-url),
.l-container:has(.hearings-audio) {
  max-width: none;
}

/* Grid Layout */
.l-grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(12, 1fr);
}

.l-grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Grid Spans */
.l-col-1 {
  grid-column: span 1;
}

.l-col-2 {
  grid-column: span 2;
}

.l-col-3 {
  grid-column: span 3;
}

.l-col-4 {
  grid-column: span 4;
}

.l-col-6 {
  grid-column: span 6;
}

.l-col-8 {
  grid-column: span 8;
}

.l-col-12 {
  grid-column: span 12;
}

/* ===================================
   4. Card Component
   =================================== */
.c-card {
  background: var(--color-bg-card);
  border-radius: var(--card-radius);
  border: none;
  padding: var(--spacing-lg);
  box-shadow: none;
  transition: none;
}

.c-card:hover {
  box-shadow: none;
}

.c-card--flat {
  border: none;
  box-shadow: none;
}

.c-card--interactive {
  cursor: pointer;
}

.c-card--static:hover {
  box-shadow: none;
}

.c-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}

.c-card__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.c-card__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
}

/* ===================================
   5. Dark Sidebar Navigation
   =================================== */

/* --- Logo --- */
.c-sidebar-logo {
  padding: 20px var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  flex-shrink: 0;
}

.c-sidebar-logo__icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--sidebar-accent) 0%, var(--color-primary-light) 100%);
  border-radius: var(--card-radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
}

.c-sidebar-logo__text {
  font-size: 18px;
  font-weight: 700;
  color: var(--sidebar-text-active);
  letter-spacing: 1px;
}

/* --- Nav Container --- */
.c-nav {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* --- Single Nav Item (no children) --- */
.c-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--sidebar-item-height);
  padding: 0 var(--spacing-md);
  border-radius: var(--card-radius-xs);
  color: var(--sidebar-text);
  font-weight: 500;
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.c-nav__item:hover {
  background: var(--sidebar-bg-hover);
  color: var(--sidebar-text-active);
}

.c-nav__item.active {
  background: var(--sidebar-bg-active);
  color: var(--sidebar-text-active-on-dark, #FFFFFF);
  border-radius: var(--card-radius-xs);
}

.c-nav__item i {
  width: 20px;
  text-align: center;
  font-size: 15px;
  flex-shrink: 0;
}

/* --- Accordion Group (WP型アコーディオン) --- */
.c-nav__group {
  position: relative;
  margin-bottom: 2px;
}

.c-nav__group-row {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--sidebar-item-height);
  border-radius: var(--card-radius-xs);
  transition: all var(--transition-fast);
}

.c-nav__group-row:hover {
  background: var(--sidebar-bg-hover);
}

.c-nav__group-link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 8px 0 var(--spacing-md);
  color: var(--sidebar-text);
  font-weight: 500;
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.c-nav__group-link span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-nav__group-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  margin-right: 3px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--sidebar-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.c-nav__group-row:hover .c-nav__group-link,
.c-nav__group-link:hover {
  color: var(--sidebar-text-active);
}

.c-nav__group-row:hover .c-nav__group-toggle,
.c-nav__group-toggle:hover,
.c-nav__group-toggle:focus-visible {
  background: #EDEFF2;
  color: var(--sidebar-text-active);
}

.c-nav__group-row.has-active-child .c-nav__group-toggle {
  background: rgba(230, 126, 34, 0.12);
  color: var(--sidebar-text-active);
}

.c-nav__group-toggle:focus-visible,
.c-nav__group-link:focus-visible,
.c-nav__child:focus-visible,
.c-nav__item:focus-visible {
  outline: 3px solid rgba(230, 126, 34, 0.22);
  outline-offset: 2px;
}

/* 親メニューは強調しない。アクティブ状態はサブメニューのみ */
.c-nav__group-row.has-active-child {
  background: rgba(230, 126, 34, 0.08);
}

.c-nav__group-row.has-active-child .c-nav__group-link {
  color: var(--sidebar-text-active);
  font-weight: 600;
}

.c-nav__group-link i.toggle-icon {
  width: 20px;
  text-align: center;
  font-size: 15px;
  flex-shrink: 0;
}

.c-nav__group-toggle .chevron {
  font-size: 12px;
  transition: transform var(--transition-base);
}

/* --- Accordion Children (親の直下にインライン表示) --- */
.c-nav__children {
  display: none;
  margin: 3px 0 6px 0;
  padding: 4px 0 4px 12px;
}

/* is-open 時にサブメニューを表示 */
.c-nav__group.is-open>.c-nav__children {
  display: block;
}

.c-nav__group.is-open>.c-nav__group-row .chevron {
  transform: rotate(180deg);
  color: var(--sidebar-text-active);
}

/* 以前の右フライアウトはクリックしにくいため廃止。閉じている時は完全に隠す。 */
.c-nav__group:not(.is-open)>.c-nav__children {
  display: none;
  opacity: 0;
  visibility: hidden;
}

.c-nav__child {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: var(--card-radius-xs);
  color: var(--sidebar-flyout-text, #374151);
  font-size: var(--font-size-sm);
  font-weight: 400;
  text-decoration: none;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.c-nav__child:hover {
  background: var(--sidebar-flyout-hover, #F3F4F6);
  color: var(--sidebar-flyout-text-active, #111827);
}

.c-nav__child.active {
  background: var(--sidebar-bg-active);
  color: var(--sidebar-text-active-on-dark, #FFFFFF);
  font-weight: 600;
}

.c-nav__child i {
  width: 16px;
  text-align: center;
  font-size: 13px;
  flex-shrink: 0;
}

/* --- Nav Divider --- */
.c-nav__divider {
  height: 1px;
  background: #e0e0e0;
  margin: var(--spacing-sm) var(--spacing-md);
}

/* --- Nav Section Label --- */
.c-nav__label {
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-xs);
  font-size: 10px;
  font-weight: 700;
  color: var(--sidebar-text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* --- Sidebar Footer --- */
.c-sidebar-footer {
  padding: var(--spacing-md);
  border-top: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

/* ===================================
   6. Typography
   =================================== */
.c-heading-1 {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--color-text);
  margin-bottom: var(--spacing-lg);
}

.c-heading-2 {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
}

.c-heading-3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

.u-text {
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--color-text);
}

.u-text--muted {
  color: var(--color-text-muted);
}

.u-text--small {
  font-size: var(--font-size-sm);
}

/* ===================================
   7. Buttons
   =================================== */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: 600;
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
}

.c-btn--primary {
  background: var(--color-primary);
  color: white;
}

.c-btn--primary:hover {
  background: var(--color-primary-light);
  color: white;
  transform: translateY(-1px);
  box-shadow: none;
}

.c-btn--accent {
  background: var(--color-accent);
  color: white;
}

.c-btn--accent:hover {
  background: var(--color-accent-light);
  color: white;
  transform: translateY(-1px);
  box-shadow: none;
}

.c-btn--outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}

.c-btn--outline:hover {
  background: var(--color-bg-base);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.c-btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
}

.c-btn--ghost:hover {
  background: var(--color-bg-base);
  color: var(--color-primary);
}

.c-btn--sm {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
}

.c-btn--lg {
  padding: var(--spacing-lg) var(--spacing-xl);
  font-size: var(--font-size-lg);
}

.c-btn--block {
  width: 100%;
}

/* ===================================
   7.5 Pagination
   =================================== */
.pagination {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pagination li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pagination li a,
.pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  background: #fff;
  color: #4B5563;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.pagination li a:hover {
  border-color: #FDBA74;
  background: #FFF7ED;
  color: #C2410C;
  transform: translateY(-1px);
}

.pagination li a:focus-visible {
  outline: 3px solid rgba(230, 126, 34, 0.28);
  outline-offset: 2px;
}

.pagination li.active a,
.pagination li.active span,
.pagination li.current a,
.pagination li.current span {
  border-color: transparent;
  background: #EA580C;
  color: #fff;
  box-shadow: 0 8px 18px rgba(234, 88, 12, 0.18);
  cursor: default;
}

.pagination li.disabled a,
.pagination li.disabled span {
  border-color: #E5E7EB;
  background: #F9FAFB;
  color: #CBD5E1;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.pagination li.first a,
.pagination li.prev a,
.pagination li.next a,
.pagination li.last a,
.pagination li.first span,
.pagination li.prev span,
.pagination li.next span,
.pagination li.last span {
  min-width: 42px;
  padding-right: 10px;
  padding-left: 10px;
}

/* ===================================
   8. Form Elements
   =================================== */
.c-form-group {
  margin-bottom: var(--spacing-lg);
}

.c-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

.c-input {
  width: 100%;
  padding: var(--spacing-md);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-bg-card);
  border: 1px solid #e0e0e0;
  border-radius: var(--card-radius);
  transition: border-color var(--transition-fast);
}

.c-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: none;
}

.c-input::placeholder {
  color: var(--color-text-light);
}

.c-input--error {
  border-color: var(--color-danger);
}

.c-select {
  appearance: none;
  background-image: 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='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* ===================================
   9. Tables
   =================================== */
.c-table-wrapper {
  overflow-x: auto;
  border-radius: var(--card-radius);
  border: none;
  background: var(--color-bg-card);
}

.c-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.c-table th,
.c-table td {
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
}

.c-table th {
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-bg-base);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.c-table tbody tr:hover {
  background: var(--color-bg-base);
}

.c-table tbody tr:last-child td {
  border-bottom: none;
}

/* ===================================
   10. Badges & Tags
   =================================== */
.c-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: 100px;
  background: var(--color-bg-base);
  color: var(--color-text-muted);
}

.c-badge--primary {
  background: rgba(230, 126, 34, 0.12);
  color: var(--color-primary);
}

.c-badge--success {
  background: rgba(16, 185, 129, 0.1);
  color: #166534;
}

.c-badge--warning {
  background: rgba(245, 158, 11, 0.1);
  color: #92400E;
}

.c-badge--danger {
  background: rgba(239, 68, 68, 0.1);
  color: #991B1B;
}

/* ===================================
   11. Stats Card
   =================================== */
.c-stat {
  text-align: center;
  padding: var(--spacing-xl);
}

.c-stat__value {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--spacing-sm);
}

.c-stat__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===================================
   12. Page Header
   =================================== */
.c-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  padding-bottom: 0;
  border-bottom: none;
}

.c-page-header__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.c-page-header__actions {
  display: flex;
  gap: var(--spacing-sm);
}

/* ===================================
   13. Auth Layout
   =================================== */
.l-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FFE4B5 0%, #FED7AA 30%, #FCD9B6 55%, #FFE4B5 80%, #FFF7E0 100%);
  padding: var(--spacing-lg);
}

.c-auth-card {
  width: 100%;
  max-width: 440px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  border: none;
  padding: 48px 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.c-auth-logo {
  text-align: center;
  margin-bottom: 32px;
}

.c-auth-logo__icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #F59E0B 0%, #F97316 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 28px;
  color: white;
}

.c-auth-logo__text {
  font-size: 22px;
  font-weight: 700;
  color: #2D3436;
  letter-spacing: 3px;
}

.c-auth-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  text-align: center;
  color: var(--color-text);
  margin-bottom: var(--spacing-xl);
}

.c-auth-form .c-input {
  background: #f5f6f7;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.c-auth-form .c-input:focus {
  border-color: var(--color-primary, #E67E22);
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.16);
  background: #fff;
}

.c-auth-form .c-form-group {
  margin-bottom: 16px;
}

.c-auth-forgot {
  text-align: center;
  margin: 12px 0 24px;
}

.c-auth-forgot a {
  font-size: 13px;
  color: #636E72;
  text-decoration: none;
  transition: color 0.2s;
}

.c-auth-forgot a:hover {
  color: var(--color-primary, #E67E22);
}

.c-auth-forgot a i {
  margin-right: 4px;
  font-size: 10px;
}

.c-btn--auth {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #F59E0B 0%, #F97316 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.c-btn--auth:hover {
  background: linear-gradient(135deg, #D97706 0%, #EA580C 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.4);
}

.c-btn--auth:active {
  transform: translateY(0);
}

/* ===================================
   14. Responsive
   =================================== */
@media screen and (max-width: 1024px) {
  .l-col-6 {
    grid-column: span 12;
  }

  .l-col-4 {
    grid-column: span 6;
  }

  .l-col-3 {
    grid-column: span 6;
  }
}

@media screen and (max-width: 768px) {
  .l-wrapper {
    display: block;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .l-sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition-base);
  }

  .l-sidebar.open {
    transform: translateX(0);
  }

  .l-main {
    margin-left: 0;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    padding: var(--spacing-md);
  }

  .l-container {
    min-width: 0;
    max-width: 100%;
  }

  .l-col-4,
  .l-col-3 {
    grid-column: span 12;
  }

  .c-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }
}

/* ===================================
   15. Utilities
   =================================== */
.u-mt-sm {
  margin-top: var(--spacing-sm);
}

.u-mt-md {
  margin-top: var(--spacing-md);
}

.u-mt-lg {
  margin-top: var(--spacing-lg);
}

.u-mt-xl {
  margin-top: var(--spacing-xl);
}

.u-mb-sm {
  margin-bottom: var(--spacing-sm);
}

.u-mb-md {
  margin-bottom: var(--spacing-md);
}

.u-mb-lg {
  margin-bottom: var(--spacing-lg);
}

.u-mb-xl {
  margin-bottom: var(--spacing-xl);
}

.u-p-md {
  padding: var(--spacing-md);
}

.u-p-lg {
  padding: var(--spacing-lg);
}

.u-p-xl {
  padding: var(--spacing-xl);
}

.u-text-center {
  text-align: center;
}

.u-text-right {
  text-align: right;
}

.u-flex {
  display: flex;
}

.u-flex-center {
  align-items: center;
  justify-content: center;
}

.u-flex-between {
  justify-content: space-between;
}

.u-flex-gap {
  gap: var(--spacing-md);
}

.u-hidden {
  display: none;
}

/* ===================================
   Print Styles
   =================================== */
@media print {

  /* Hide sidebar and navigation */
  .l-sidebar {
    display: none !important;
  }

  /* Make main content full width */
  .l-wrapper {
    display: block !important;
  }

  .l-main {
    margin-left: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .l-container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Hide any no-print elements */
  .no-print,
  .c-page-header__actions {
    display: none !important;
  }

  /* Page settings for A4 */
  @page {
    size: A4;
    margin: 0;
  }

  body {
    margin: 0;
    padding: 0;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* ========================================
   SUN DESIGN SYSTEM (Generator)
   暖色テーマ — オレンジ＋ゴールド基調
   ======================================== */

.sun-theme {
  /* Color Tokens — 太陽の暖色 */
  --color-primary: #E67E22;
  --color-primary-light: #F59E0B;
  --color-primary-dark: #D35400;
  --color-accent: #E8976B;
  --color-accent-light: #F0B08A;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;

  /* Background Colors - White Base */
  --bg-base: #f5f6f7;
  --bg-card: #FFFFFF;
  --bg-sidebar: #FFFFFF;
  --bg-hover: #FFF8F0;
  --bg-subtle: #FEF3E2;

  /* Text Colors */
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --text-inverse: #FFFFFF;

  /* Border Colors */
  --border-light: #E0E0E0;
  --border-medium: #CBD5E1;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* Border Radius — 統一6px */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08);

  /* Ring */
  --ring-1: 0 0 0 1px var(--border-light);
  --ring-focus: 0 0 0 3px rgba(230, 126, 34, 0.15);

  /* Animation */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* SUN Sidebar — クリーン配色（純白 + 深みオレンジ active） */
  --sidebar-bg: #FFFFFF;
  --sidebar-bg-hover: #FFF3E0;
  --sidebar-bg-active: #D35400;
  --sidebar-text: #5F6368;
  --sidebar-text-active: #37474F;
  --sidebar-text-active-on-dark: #FFFFFF;
  --sidebar-text-muted: #9AA0A6;
  --sidebar-border: transparent;
  --sidebar-accent: #E67E22;
  --sidebar-width: 260px;

  /* SUN Flyout Colors */
  --sidebar-flyout-bg: #FFFFFF;
  --sidebar-flyout-border: #E0E0E0;
  --sidebar-flyout-text: #374151;
  --sidebar-flyout-text-active: #111827;
  --sidebar-flyout-hover: #FFF3E0;
}

/* ========================================
   LAYOUT - SUN WRAPPER
   ======================================== */

.sun-wrapper {
  display: flex;
  min-height: 100vh;
}

.sun-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.sun-main {
  margin-left: var(--sidebar-width);
  flex: 1;
  padding: var(--spacing-2xl);
  min-height: 100vh;
}

/* Client view - no sidebar */
.client-view .sun-sidebar {
  display: none;
}

.client-view .sun-main {
  margin-left: 0;
}

/* ========================================
   SIDEBAR COMPONENTS
   ======================================== */

.sun-sidebar__header {
  padding: var(--spacing-lg);
}

.sun-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.sun-logo__icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
}

.sun-logo__text {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.sun-nav {
  flex: 1;
  padding: var(--spacing-lg);
  overflow: visible;
}

.sun-nav__section {
  margin-bottom: var(--spacing-lg);
}

.sun-nav__group {
  margin-bottom: var(--spacing-sm);
}

.sun-nav__link {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-md);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  font-size: 14px;
  font-weight: 500;
}

.sun-nav__link i {
  width: 18px;
  text-align: center;
  font-size: 14px;
}

.sun-nav__link:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.sun-nav__link--parent {
  font-weight: 600;
  color: var(--text-primary);
}

.sun-nav__submenu {
  list-style: none;
  margin-left: var(--spacing-xl);
  margin-top: var(--spacing-xs);
}

.sun-nav__link--child {
  font-size: 13px;
  padding: var(--spacing-sm) var(--spacing-md);
}

.sun-nav__link--child.is-active {
  background: rgba(230, 126, 34, 0.08);
  color: var(--color-primary);
}

.sun-nav__link--child.is-active i {
  color: var(--color-primary);
}

.sun-sidebar__footer {
  padding: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
}

.sun-sidebar__version {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 12px;
  color: var(--text-muted);
}

.sun-sidebar__dot {
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
}

/* ========================================
   WIZARD STEP BAR
   ======================================== */

/* Step navigation bar: wizard left, action buttons right */
.sun-step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding: 10px 25px;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
}

.sun-step-nav .sun-btn {
  padding: 8px 24px;
}

/* SUN wizard pages: reduce l-main top padding */
.l-main:has(.sun-step-nav) {
  padding-top: 1.25rem;
}

.sun-step-nav .sun-wizard {
  margin-bottom: 0;
}

.sun-step-nav .sun-wizard__bar {
  gap: 0;
  padding: 0;
  justify-content: flex-start;
}

.sun-step-nav .sun-wizard__step {
  gap: 6px;
  padding: 4px 0;
  font-size: 13px;
}

.sun-step-nav .sun-wizard__step-number {
  width: 22px;
  height: 22px;
  font-size: 11px;
}

.sun-step-nav .sun-wizard__connector {
  width: 28px;
  height: 1px;
  margin: 0 6px;
}

.sun-step-nav .sun-wizard__step-label {
  white-space: nowrap;
  font-size: 13px;
}

.sun-wizard {
  margin-bottom: var(--spacing-2xl);
}

.sun-wizard__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: var(--spacing-lg) 0;
}

.sun-wizard__step {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  position: relative;
}

.sun-wizard__step-number {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  transition: var(--transition-normal);
}

.sun-wizard__step-label {
  transition: var(--transition-fast);
}

.sun-wizard__step--active {
  color: var(--color-primary);
}

.sun-wizard__step--active .sun-wizard__step-number {
  background: var(--color-primary);
  color: white;
  box-shadow: none;
}

.sun-wizard__step--completed {
  color: var(--color-accent);
}

.sun-wizard__step--completed .sun-wizard__step-number {
  background: var(--color-accent);
  color: white;
}

.sun-wizard__connector {
  width: 48px;
  height: 2px;
  background: var(--border-light);
  margin: 0 var(--spacing-sm);
  transition: var(--transition-normal);
}

.sun-wizard__connector--completed {
  background: var(--color-accent);
}

/* 「今どこ・あと何ステップ」ヒント（ステッパー上の控えめな案内）。
   ステッパー（左寄せ）と起点を合わせるため左寄せにし、余分な左余白を作らない。 */
.sun-wizard__hint {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.sun-wizard__hint-pos {
  font-weight: 600;
  color: var(--color-primary);
}

.sun-wizard__hint-sep {
  opacity: 0.5;
}

/* ========================================
   PAGE HEADER
   ======================================== */

.sun-page-header {
  margin-bottom: var(--spacing-xl);
}

.sun-page-header__title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  letter-spacing: -0.5px;
}

.sun-page-header__description {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ========================================
   CARDS - Modern & Minimal
   ======================================== */

.sun-card {
  background: #FFFFFF;
  border-radius: var(--radius-md);
  border: none;
  padding: var(--spacing-xl);
  box-shadow: none;
  transition: var(--transition-normal);
}

.sun-card:hover {
  box-shadow: none;
}

.sun-card--elevated {
  border: none;
  box-shadow: none;
}

.sun-card--elevated:hover {
  box-shadow: none;
}

.sun-card--interactive {
  cursor: pointer;
}

.sun-card--interactive:hover {
  border-color: var(--color-primary-light);
  transform: translateY(-2px);
}

.sun-card--selected {
  border-color: var(--color-primary);
  box-shadow: none;
}

.sun-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}

.sun-card__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.sun-card__subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
}

/* ========================================
   BUTTONS
   ======================================== */

.sun-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.sun-btn--primary {
  background: var(--color-primary);
  color: var(--text-inverse);
}

.sun-btn--primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.sun-btn--accent {
  background: var(--color-accent);
  color: var(--text-inverse);
}

.sun-btn--accent:hover {
  background: #D4845E;
  transform: translateY(-1px);
}

.sun-btn--outline {
  background: transparent;
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
}

.sun-btn--outline:hover {
  background: var(--bg-hover);
  border-color: var(--text-secondary);
}

.sun-btn--ghost {
  background: transparent;
  color: var(--text-secondary);
}

.sun-btn--ghost:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.sun-btn--lg {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 15px;
  border-radius: var(--radius-md);
}

.sun-btn--sm {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 13px;
}

.sun-btn--block {
  width: 100%;
}

.sun-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* ========================================
   FORMS
   ======================================== */

.sun-form-group {
  margin-bottom: var(--spacing-lg);
}

.sun-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.sun-input {
  width: 100%;
  padding: var(--spacing-md);
  font-size: 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  transition: var(--transition-fast);
}

.sun-input:hover {
  border-color: var(--border-medium);
}

.sun-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: none;
}

.sun-input::placeholder {
  color: var(--text-muted);
}

.sun-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}

.sun-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394A3B8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-md) center;
  background-size: 18px;
  padding-right: var(--spacing-2xl);
}

/* ========================================
   ACCORDION - Refined Animation
   ======================================== */

.sun-accordion {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: none;
}

.sun-accordion__item {
  border-bottom: 1px solid var(--border-light);
}

.sun-accordion__item:last-child {
  border-bottom: none;
}

.sun-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-xl);
  cursor: pointer;
  background: var(--bg-card);
  transition: var(--transition-fast);
  user-select: none;
}

.sun-accordion__header:hover {
  background: var(--bg-hover);
}

.sun-accordion__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.sun-accordion__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  color: white;
  font-size: 14px;
  transition: var(--transition-normal);
}

.sun-accordion__icon--accent {
  background: var(--color-primary);
}

.sun-accordion__icon--pink {
  background: linear-gradient(135deg, #EC4899 0%, #BE185D 100%);
}

.sun-accordion__icon--amber {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
}

.sun-accordion__arrow {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: var(--transition-bounce);
  font-size: 12px;
}

.sun-accordion__item.is-open .sun-accordion__arrow {
  transform: rotate(180deg);
}

.sun-accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.sun-accordion__item.is-open .sun-accordion__content {
  max-height: 1000px;
}

.sun-accordion__body {
  padding: 0 var(--spacing-xl) var(--spacing-xl);
}

/* ========================================
   DESIGN CARDS (Step 2)
   ======================================== */

.design-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
}

.design-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: none;
  transition: var(--transition-normal);
  cursor: pointer;
}

.design-card:hover {
  transform: translateY(-4px);
  box-shadow: none;
}

.design-card.is-selected {
  border-color: var(--color-primary);
  box-shadow: none;
}

.design-card__preview {
  height: 180px;
  position: relative;
  overflow: hidden;
}

.design-card__preview-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.design-card__preview-header {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-md);
}

.design-card__preview-nav {
  display: flex;
  gap: var(--spacing-xs);
}

.design-card__preview-nav span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}

.design-card__preview-body {
  flex: 1;
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.design-card__preview-title {
  height: 20px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm);
  width: 60%;
}

.design-card__preview-text {
  height: 10px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
}

.design-card__info {
  padding: var(--spacing-lg);
}

.design-card__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.design-card__description {
  font-size: 13px;
  color: var(--text-secondary);
}

.design-card__check {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  width: 28px;
  height: 28px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  opacity: 0;
  transform: scale(0.8);
  transition: var(--transition-fast);
}

.design-card.is-selected .design-card__check {
  opacity: 1;
  transform: scale(1);
}

/* ========================================
   PROGRESS METER (Step 2)
   ======================================== */

.progress-meter {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg) var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.progress-meter__bar {
  width: 100%;
  height: 4px;
  background: var(--bg-subtle);
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-md);
  overflow: hidden;
}

.progress-meter__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}

.progress-meter__steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.progress-meter__step {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  background: none;
  border: none;
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: default;
  opacity: 0.4;
  transition: var(--transition-fast);
}

.progress-meter__step.is-active,
.progress-meter__step.is-completed {
  opacity: 1;
  cursor: pointer;
}

.progress-meter__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-medium);
  transition: var(--transition-fast);
}

.progress-meter__step.is-active .progress-meter__dot {
  background: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

.progress-meter__step.is-completed .progress-meter__dot {
  background: var(--color-accent);
}

.progress-meter__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.progress-meter__step.is-active .progress-meter__label {
  color: var(--color-primary);
  font-weight: 600;
}

.progress-meter__step.is-completed .progress-meter__label {
  color: var(--text-secondary);
}

/* ========================================
   SUBSTEP PANELS
   ======================================== */

.substep-panel {
  display: none;
  animation: substepSlideIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.substep-panel.is-visible {
  display: block;
}

@keyframes substepSlideIn {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.substep-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--spacing-xl);
  margin-top: var(--spacing-xl);
  border-top: 1px solid var(--border-light);
}

/* Sticky フッター（各サブステップ下部に固定） */
.substep-sticky-footer {
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border-light);
  padding: var(--spacing-md) var(--spacing-xl);
  margin: var(--spacing-xl) calc(-1 * var(--spacing-xl)) 0;
  animation: substepFadeIn 0.2s ease;
}

.substep-sticky-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
}

/* レイアウトセクション見出し */
.layout-section {
  margin-bottom: var(--spacing-xl);
}

.layout-section__heading {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.layout-section__heading i {
  color: var(--color-accent);
}

/* おすすめ3列 */
.layout-grid--recommended {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

/* その他レイアウト4列 */
.layout-grid--others {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
}

/* アコーディオントグル */
.layout-accordion__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.layout-accordion__toggle:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

.layout-accordion__toggle i {
  transition: transform 0.2s ease;
}

.layout-accordion__toggle.is-open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.layout-accordion__content {
  padding: var(--spacing-lg);
  border: 1px solid var(--border-light);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  animation: substepFadeIn 0.2s ease;
}

/* 確認ポップアップ - ビジュアルカード */
.confirm-dialog__cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.confirm-card {
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
}

.confirm-card__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--spacing-sm);
}

.confirm-card__body {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.confirm-card__body--list {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs);
}

.confirm-card__palette {
  display: flex;
  gap: 2px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.confirm-card__color {
  width: 24px;
  height: 24px;
}

.confirm-card__value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.confirm-card__copy {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.confirm-card__layout {
  font-size: 14px;
  color: var(--text-secondary);
  padding-left: var(--spacing-sm);
  border-left: 3px solid var(--color-primary);
}

/* ========================================
   TASTE CARDS (Step 2-1)
   ======================================== */

.taste-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
}

/* 7テイスト・ギャラリー: 横幅に応じてカードが折り返す一覧表示 */
.taste-grid--gallery {
  grid-template-columns: repeat(3, 1fr);
}

/* ===== サイトカラー選択ブロック（テンプレ選択時） ===== */
/* 白パネル（添付のセクション枠）— カラー/デザイン選択などを内包 */
.sun-panel {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-light, #E0E0E0);
  border-radius: 12px;
  padding: 20px 24px;
}

.site-color-block {
  margin: 0 0 20px;
}

.site-design-block {
  margin: 0 0 20px;
}

.site-color-block__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 6px;
  padding-bottom: 0;
  border-bottom: none;
}

.site-color-block__heading::before {
  content: '';
  flex: none;
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--color-primary, #e67e22);
}

.site-color-block__heading--design {
  margin-top: 0;
}

.site-color-block__desc {
  font-size: 13px;
  color: var(--text-muted, #94A3B8);
  line-height: 1.6;
  margin: 0 0 16px;
}

.site-color-block__pickers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ===== サイトカラーカード（添付の説明付き3カラー選択） ===== */
.site-color-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.site-color-card__label {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary, #2c3e50);
}

.site-color-card__desc {
  font-size: 12px;
  color: var(--text-muted, #94A3B8);
  line-height: 1.55;
  margin: 0;
}

.site-color-card__control {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

/* クリックできる色見本。未選択時は斜線パターン＋「自動」表示で、
   「これは固定色ではなく自動」だと一目で分かるようにする。 */
.site-color-card__swatch {
  position: relative;
  flex: none;
  width: 52px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--border-light, #ddd);
  overflow: hidden;
  cursor: pointer;
  background: var(--swatch-color, #fff);
  transition: border-color 0.15s ease;
}

.site-color-card__swatch:hover {
  border-color: var(--color-primary, #E67E22);
}

.site-color-card__swatch input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.site-color-card__swatch.is-auto {
  background-color: #fff;
  background-image: repeating-linear-gradient(45deg, #ECECEC 0, #ECECEC 5px, #fff 5px, #fff 10px);
}

.site-color-card__swatch-auto {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted, #94A3B8);
  pointer-events: none;
}

.site-color-card__swatch:not(.is-auto) .site-color-card__swatch-auto {
  display: none;
}

.site-color-card__state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.site-color-card__value {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-success, #10B981);
}

.site-color-card__value.is-set {
  color: var(--text-primary, #333);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.site-color-card__reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary, #E67E22);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-color-card__reset:hover {
  opacity: 0.75;
}

@media (max-width: 720px) {
  .site-color-block__pickers {
    grid-template-columns: 1fr;
  }
}

.taste-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  border: 2px solid var(--border-light, #E0E0E0);
  transition: var(--transition-normal);
  cursor: pointer;
}

.taste-card:hover {
  border-color: var(--color-primary-light, #F0B08A);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.taste-card.is-selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.15);
  transform: none;
}

.taste-card__preview {
  position: relative;
  flex: none;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--bg-subtle, #FEF3E2);
  container-type: inline-size;
}

.taste-card__preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.65) 48%, rgba(255,255,255,0) 100%),
    linear-gradient(135deg, #F8FAFC 0%, #EEF2F7 52%, #FFF7ED 100%);
  background-size: 220% 100%, 100% 100%;
  animation: tastePreviewShimmer 1.25s ease-in-out infinite;
  opacity: 1;
  transition: opacity .22s ease;
}

.taste-card__preview.is-loaded::before {
  opacity: 0;
  animation: none;
}

@keyframes tastePreviewShimmer {
  0% { background-position: 160% 0, 0 0; }
  100% { background-position: -60% 0, 0 0; }
}

/* デモサイトを別タブで開くリンク（プレビュー右下） */
.taste-card__demo {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: rgba(15, 23, 42, 0.7);
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.taste-card__demo:hover {
  background: var(--color-primary, #E67E22);
  color: #fff;
}

/* 実テンプレート（engine.php）を 1280px 幅でレンダリングし、カード幅へ縮小表示 */
.taste-card__frame {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 1280px;
  height: 1280px;
  border: 0;
  transform-origin: top left;
  transform: scale(calc(100cqw / 1280px));
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  transition: opacity .22s ease;
}

.taste-card__frame.is-loaded {
  opacity: 1;
  visibility: visible;
}

.taste-card__info {
  flex: 1 1 auto;
  padding: var(--spacing-lg);
}

.taste-card__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.taste-card__description {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--spacing-md);
}

.taste-card__keywords {
  display: flex;
  gap: var(--spacing-xs);
}

.taste-card__keyword {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
}

/* ターゲットタグ（〇〇向け）。1枚だけ・オレンジ系背景で「どの業種向けか」を一目で示す。 */
.taste-card__keyword--target {
  background: rgba(230, 126, 34, 0.10);
  color: var(--color-primary, #E67E22);
  font-weight: 600;
}

/* 下部の「このデザインを選択(中)」明示バー（ラジオ＋ラベル）。
   カードの高さが揃うよう常に最下部へ固定する。 */
.taste-card__select {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px var(--spacing-lg);
  border-top: 1px solid var(--border-light, #E0E0E0);
  background: var(--bg-card, #fff);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted, #94A3B8);
  transition: var(--transition-fast);
}

.taste-card__select-radio {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-light, #CBD5E1);
  background: #fff;
  position: relative;
  transition: var(--transition-fast);
}

.taste-card__select-label::after {
  content: 'このデザインを選択';
}

.taste-card.is-selected .taste-card__select {
  background: var(--bg-subtle, #FEF3E2);
  color: var(--color-primary, #E67E22);
}

.taste-card.is-selected .taste-card__select-radio {
  border-color: var(--color-primary, #E67E22);
  background: var(--color-primary, #E67E22);
}

.taste-card.is-selected .taste-card__select-radio::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.taste-card.is-selected .taste-card__select-label::after {
  content: 'このデザインを選択中';
}

/* ========================================
   CATCHCOPY LIST (Step 2-2)
   ======================================== */

.catchcopy-counter {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-subtle);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: var(--transition-fast);
}

.catchcopy-counter.is-complete {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.catchcopy-counter.is-over {
  background: rgba(239, 68, 68, 0.1);
  color: #DC2626;
}

.catchcopy-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.catchcopy-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
  user-select: none;
}

.catchcopy-item:hover {
  border-color: var(--color-primary-light);
  background: var(--bg-hover);
}

.catchcopy-item.is-selected {
  border-color: var(--color-primary, #E67E22);
  background: rgba(230, 126, 34, 0.05);
}

.catchcopy-item.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.catchcopy-item.is-disabled:hover {
  border-color: var(--border-light);
  background: var(--bg-card);
}

.catchcopy-checkbox {
  display: none;
}

.catchcopy-item__check {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: transparent;
  transition: var(--transition-fast);
}

.catchcopy-item.is-selected .catchcopy-item__check {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.catchcopy-item__number {
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.catchcopy-item__text {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.5;
}

/* 補足文の印象・理由 */
.catchcopy-item__reason {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted, #6B7280);
  line-height: 1.5;
}

.catchcopy-item__reason i {
  margin-top: 2px;
  font-size: 11px;
  color: var(--color-primary, #E67E22);
  flex-shrink: 0;
}

/* テキスト＋タグを縦に積むラッパー */
.catchcopy-item__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.catchcopy-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.catchcopy-item__tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  background: var(--bg-subtle, #F3F4F6);
  color: var(--text-muted, #6B7280);
  border-radius: var(--radius-full, 100px);
  white-space: nowrap;
}

/* 「選択中」バッジ：選択時のみ表示 */
.catchcopy-item__selected-badge {
  display: none;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 11px;
  background: var(--color-primary, #E67E22);
  color: #fff;
  border-radius: var(--radius-full, 100px);
  white-space: nowrap;
  flex-shrink: 0;
}

.catchcopy-item.is-selected .catchcopy-item__selected-badge {
  display: inline-block;
}

/* 旧バッジ（オリジナル候補ラベル等で利用） */
.catchcopy-item__badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  background: rgba(230, 126, 34, 0.12);
  color: #C05621;
  border-radius: var(--radius-full, 100px);
  white-space: nowrap;
  flex-shrink: 0;
}

/* おすすめ候補：アンバー→控えめなオレンジ寄りに */
.catchcopy-item--recommended {
  border-color: rgba(230, 126, 34, 0.22);
  background: rgba(230, 126, 34, 0.02);
}

/* ============================
   キャッチコピー 選択状況カード
   ============================ */
.cc-status-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-light, #E0E0E0);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
}

.cc-status-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cc-status-card__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #1F2937);
}

.cc-status-card__label i {
  color: var(--text-muted, #9CA3AF);
  margin-right: 4px;
  transition: color 0.2s ease;
}

.cc-status-card__badge {
  font-size: 13px;
  font-weight: 700;
  color: #6B7280;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  padding: 4px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.cc-status-card__hint {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted, #9CA3AF);
  margin-top: 6px;
}

/* 1つ以上選択済み：オレンジで強調 */
.cc-status-card.is-complete {
  border-color: var(--color-primary, #E67E22);
  background: rgba(230, 126, 34, 0.05);
}

.cc-status-card.is-complete .cc-status-card__label i {
  color: var(--color-primary, #E67E22);
}

.cc-status-card.is-complete .cc-status-card__badge {
  color: #fff;
  background: var(--color-primary, #E67E22);
  border-color: var(--color-primary, #E67E22);
}

/* 上限超過：赤で警告 */
.cc-status-card.is-over {
  border-color: #DC2626;
  background: rgba(220, 38, 38, 0.05);
}

.cc-status-card.is-over .cc-status-card__label i {
  color: #DC2626;
}

.cc-status-card.is-over .cc-status-card__badge {
  color: #fff;
  background: #DC2626;
  border-color: #DC2626;
}

/* セクション見出しの小バッジ（★おすすめ/定番） */
.cc-section-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  background: rgba(230, 126, 34, 0.12);
  color: #C05621;
  border-radius: var(--radius-full, 100px);
  white-space: nowrap;
}

/* キャッチコピー選択（ライブビルダー 3/5） */
#substep-3 .c-page-header {
  margin-bottom: 18px;
}

#substep-3 .cc-status-card {
  border-color: #E2E8F0;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
  background: #fff;
  box-shadow: none;
}

#substep-3 .cc-status-card__row {
  justify-content: flex-start;
}

#substep-3 .cc-status-card__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  color: #172033;
}

#substep-3 .cc-status-card__label i {
  margin: 0;
  font-size: 18px;
  color: #94A3B8;
}

#substep-3 .cc-status-card__badge {
  display: none;
}

#substep-3 .cc-status-card__hint {
  margin-top: 8px;
  padding-left: 25px;
  font-size: 12px;
  line-height: 1.5;
  color: #64748B;
}

#substep-3 .cc-status-card.is-complete {
  border-color: #D7EBDD;
  background: #FBFFFC;
}

#substep-3 .cc-status-card.is-complete .cc-status-card__label,
#substep-3 .cc-status-card.is-complete .cc-status-card__label i {
  color: #16B981;
}

#substep-3 .catchcopy-section {
  margin-bottom: 16px;
}

#substep-3 .catchcopy-section__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

#substep-3 .catchcopy-section__title {
  font-size: 15px;
  font-weight: 800;
  color: #172033;
}

#substep-3 .catchcopy-list {
  gap: 8px;
}

#substep-3 .catchcopy-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#substep-3 .catchcopy-item {
  position: relative;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 13px 14px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

#substep-3 .catchcopy-item:hover {
  border-color: #FDBA74;
  background: #FFFBF7;
}

#substep-3 .catchcopy-item.is-selected {
  border-color: var(--color-primary, #E67E22);
  background: linear-gradient(180deg, #FFF7ED 0%, #fff 100%);
  box-shadow: 0 0 0 1px var(--color-primary, #E67E22), 0 7px 18px rgba(230, 126, 34, 0.10);
  transform: none;
}

#substep-3 .catchcopy-item__check {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  border: 2px solid #CBD5E1;
  background: #fff;
  color: transparent;
}

#substep-3 .catchcopy-item__check i {
  display: none;
}

#substep-3 .catchcopy-checkbox:focus-visible + .catchcopy-item__check {
  outline: 3px solid rgba(230, 126, 34, 0.24);
  outline-offset: 3px;
}

#substep-3 .catchcopy-item.is-selected .catchcopy-item__check {
  position: relative;
  border-color: var(--color-primary, #E67E22);
  background: #fff;
}

#substep-3 .catchcopy-item.is-selected .catchcopy-item__check::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary, #E67E22);
}

#substep-3 .catchcopy-item__number {
  display: none;
}

#substep-3 .catchcopy-item__body {
  gap: 5px;
  padding-right: 76px;
}

#substep-3 .catchcopy-item__text {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
  color: #172033;
  letter-spacing: 0;
}

#substep-3 .catchcopy-item__reason {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
  color: #64748B;
}

#substep-3 .catchcopy-item__reason i {
  display: none;
}

#substep-3 .catchcopy-item__tags {
  margin-top: 0;
}

#substep-3 .catchcopy-item__tag {
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 800;
  color: #64748B;
  background: #F1F5F9;
}

#substep-3 .catchcopy-item.is-selected .catchcopy-item__tag {
  color: #C05621;
  background: #FFF2E6;
}

#substep-3 .catchcopy-item__selected-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  display: none;
  padding: 3px 8px;
  font-size: 11px;
  color: #E67E22;
  background: #FFF2E6;
}

#substep-3 .catchcopy-item.is-selected .catchcopy-item__selected-badge {
  display: inline-flex;
}

#substep-3 .catchcopy-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: center;
  margin: 12px 0 12px;
}

#substep-3 .catchcopy-action-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

#substep-3 .catchcopy-actions .sun-btn {
  width: 100%;
  min-height: 40px;
  border-radius: 7px;
  font-weight: 800;
  font-size: 12px;
}

#substep-3 .catchcopy-actions .sun-btn span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#substep-3 .catchcopy-custom-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  border: 1px solid transparent;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  border-radius: 7px;
}

#substep-3 .catchcopy-custom-toggle:hover,
#substep-3 .catchcopy-custom-toggle:focus-visible {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #172033;
}

#substep-3 .catchcopy-custom-toggle--assist {
  color: #C05621;
  border-color: #FED7AA;
  background: #FFF7ED;
}

#substep-3 .catchcopy-ai-panel,
#substep-3 .catchcopy-custom-panel {
  margin-bottom: 22px;
  padding: 16px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #fff;
}

#substep-3 .catchcopy-panel-head {
  margin-bottom: 10px;
}

#substep-3 .catchcopy-panel-head h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 800;
}

#substep-3 .catchcopy-panel-head h3 i {
  color: var(--color-primary);
  font-size: 13px;
}

#substep-3 .catchcopy-panel-head p {
  margin: 5px 0 0;
  color: #64748B;
  font-size: 12px;
  line-height: 1.55;
}

#substep-3 .catchcopy-ai-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 10px;
}

#substep-3 .catchcopy-ai-feedback {
  min-height: 16px;
  margin: 0 0 8px;
  color: #64748B;
  font-size: 11.5px;
  line-height: 1.45;
}

#substep-3 .substep3-footer-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px 0;
  color: #94A3B8;
  font-size: 13px;
  font-weight: 800;
}

#substep-3 .substep3-footer-summary.is-complete {
  color: #16B981;
}

@media (max-width: 520px) {
  #substep-3 .catchcopy-actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #substep-3 .catchcopy-item__body {
    padding-right: 0;
  }

  #substep-3 .catchcopy-item__selected-badge {
    position: static;
    margin-left: auto;
  }
}

/* ========================================
   LAYOUT CARDS (Step 2-3)
   ======================================== */

.layout-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

.layout-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  border: 2px solid transparent;
  transition: var(--transition-normal);
  cursor: pointer;
}

.layout-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.layout-card.is-selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.layout-card__wireframe {
  aspect-ratio: 4 / 3;
  background: #f5f5f5;
  overflow: hidden;
  border-bottom: 1px solid var(--border-light);
  position: relative;
}

.layout-wireframe__fallback {
  width: 100%;
  height: 100%;
  border: 1.5px solid #ccc;
  box-sizing: border-box;
}

.layout-wireframe__fallback>div {
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box;
}

.layout-card__info {
  padding: var(--spacing-md);
}

.layout-card__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  background: rgba(230, 126, 34, 0.1);
  color: #C05621;
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-xs);
}

.layout-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.layout-card__name-en {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: var(--spacing-xs);
}

.layout-card__description {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.layout-card__check {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  width: 26px;
  height: 26px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 11px;
  opacity: 0;
  transform: scale(0.8);
  transition: var(--transition-fast);
}

.layout-card.is-selected .layout-card__check {
  opacity: 1;
  transform: scale(1);
}

.layout-card.is-maxed {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.layout-card.is-recommended {
  border-color: rgba(230, 126, 34, 0.3);
}

.layout-card__reason {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(79, 70, 229, 0.04);
  border-radius: var(--radius-sm);
  font-size: 11px;
  line-height: 1.6;
  color: var(--color-primary);
}

.layout-card__reason i {
  color: var(--color-accent);
  margin-right: 4px;
}

.layout-grid--full {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

/* ========================================
   CONFIRM DIALOG
   ======================================== */

.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: substepFadeIn 0.2s ease;
}

.confirm-dialog {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl) var(--spacing-2xl);
  max-width: 520px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.confirm-dialog__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
}

.confirm-dialog__summary {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: var(--spacing-xl);
}

.confirm-dialog__section {
  margin-bottom: var(--spacing-md);
}

.confirm-dialog__section strong {
  color: var(--text-primary);
}

.confirm-dialog__section ul {
  margin: 4px 0 0 var(--spacing-lg);
  padding: 0;
}

.confirm-dialog__section li {
  margin-bottom: 2px;
}

.confirm-dialog__actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: flex-end;
}

/* ========================================
   GENERATING OVERLAY (Step 2-4)
   ======================================== */

.generating-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  animation: substepFadeIn 0.3s ease;
}

.generating-overlay__content {
  text-align: center;
  max-width: 400px;
}

.generating-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--border-light);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  margin: 0 auto var(--spacing-lg);
  animation: genSpin 0.8s linear infinite;
}

@keyframes genSpin {
  to {
    transform: rotate(360deg);
  }
}

.generating-overlay__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.generating-overlay__text {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-xl);
}

.generating-progress {
  width: 100%;
  height: 4px;
  background: var(--bg-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.generating-progress__bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-full);
  transition: width 0.05s linear;
}



.page-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.page-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  cursor: pointer;
}

.page-item:hover {
  border-color: var(--color-primary-light);
  background: var(--bg-hover);
}

.page-item.is-checked {
  border-color: var(--color-primary);
  background: rgba(230, 126, 34, 0.04);
}

.page-item.is-recommended {
  position: relative;
}

.page-item.is-recommended::after {
  content: 'おすすめ';
  position: absolute;
  right: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-accent);
  background: rgba(16, 185, 129, 0.1);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
}

.page-item__checkbox {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  font-size: 11px;
}

.page-item.is-checked .page-item__checkbox {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.page-item__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

/* ========================================
   PREVIEW LAYOUT
   ======================================== */

.preview-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--spacing-xl);
  min-height: calc(100vh - var(--spacing-2xl) * 2);
}

.preview-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.preview-panel {
  flex: 1;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.preview-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-light);
}

.preview-panel__url {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-secondary);
  flex: 1;
  max-width: 400px;
}

.preview-panel__content {
  height: 600px;
  overflow: auto;
}

/* ========================================
   ALERTS & NOTIFICATIONS
   ======================================== */

.sun-alert {
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: 14px;
}

.sun-alert--success {
  background: rgba(16, 185, 129, 0.08);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.sun-alert--error {
  background: rgba(239, 68, 68, 0.08);
  color: #DC2626;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.sun-alert--warning {
  background: rgba(245, 158, 11, 0.08);
  color: #D97706;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.sun-alert--info {
  background: rgba(79, 70, 229, 0.06);
  color: var(--color-primary);
  border: 1px solid rgba(79, 70, 229, 0.15);
}

/* ========================================
   SHARE MODAL
   ======================================== */

.share-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-normal);
}

.share-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.share-modal__content {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  max-width: 480px;
  width: 90%;
  box-shadow: none;
  border: 1px solid #e0e0e0;
  transform: translateY(20px) scale(0.98);
  transition: var(--transition-normal);
}

.share-modal.is-open .share-modal__content {
  transform: translateY(0) scale(1);
}

.share-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}

.share-modal__title {
  font-size: 18px;
  font-weight: 600;
}

.share-modal__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  transition: var(--transition-fast);
}

.share-modal__close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.share-url-box {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
}

.share-url-box__url {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
  word-break: break-all;
}

/* ========================================
   UTILITIES
   ======================================== */

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-muted {
  color: var(--text-muted);
}

.text-secondary {
  color: var(--text-secondary);
}

.mt-xs {
  margin-top: var(--spacing-xs);
}

.mt-sm {
  margin-top: var(--spacing-sm);
}

.mt-md {
  margin-top: var(--spacing-md);
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.mt-xl {
  margin-top: var(--spacing-xl);
}

.mt-2xl {
  margin-top: var(--spacing-2xl);
}

.mb-xs {
  margin-bottom: var(--spacing-xs);
}

.mb-sm {
  margin-bottom: var(--spacing-sm);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.mb-xl {
  margin-bottom: var(--spacing-xl);
}

.mb-2xl {
  margin-bottom: var(--spacing-2xl);
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: flex-end;
}

.gap-xs {
  gap: var(--spacing-xs);
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-lg {
  gap: var(--spacing-lg);
}

.gap-xl {
  gap: var(--spacing-xl);
}

.grid {
  display: grid;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

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

/* Legacy class mappings for backward compatibility */
/* @extend directives removed — plain CSS does not support @extend */

/* Backward compatibility aliases */
.c-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: none;
  padding: var(--spacing-xl);
  box-shadow: none;
  transition: var(--transition-normal);
}

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
}

.c-btn--primary {
  background: var(--color-primary);
  color: var(--text-inverse);
}

.c-btn--primary:hover {
  background: var(--color-primary-dark);
}

.c-btn--outline {
  background: transparent;
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
}

.c-btn--outline:hover {
  background: var(--bg-hover);
}

.c-btn--lg {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 15px;
}

.c-btn--sm {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 13px;
}

.c-input {
  width: 100%;
  padding: var(--spacing-md);
  font-size: 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  transition: var(--transition-fast);
}

.c-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: none;
}

.c-textarea {
  min-height: 120px;
  resize: vertical;
}

.c-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394A3B8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-md) center;
  background-size: 18px;
  padding-right: var(--spacing-2xl);
}

.c-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.c-form-group {
  margin-bottom: var(--spacing-lg);
}

.c-alert {
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.c-alert--success {
  background: rgba(16, 185, 129, 0.08);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.c-alert--info {
  background: rgba(79, 70, 229, 0.06);
  color: var(--color-primary);
  border: 1px solid rgba(79, 70, 229, 0.15);
}

.c-accordion {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
}

.c-accordion__item {
  border-bottom: 1px solid var(--border-light);
}

.c-accordion__item:last-child {
  border-bottom: none;
}

.c-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-xl);
  cursor: pointer;
  background: var(--bg-card);
  transition: var(--transition-fast);
  user-select: none;
}

.c-accordion__header:hover {
  background: var(--bg-hover);
}

.c-accordion__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.c-accordion__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  color: white;
  font-size: 14px;
}

.c-accordion__arrow {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: var(--transition-bounce);
  font-size: 12px;
}

.c-accordion__item.is-open .c-accordion__arrow {
  transform: rotate(180deg);
}

.c-accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.c-accordion__item.is-open .c-accordion__content {
  max-height: 1000px;
}

.c-accordion__body {
  padding: 0 var(--spacing-xl) var(--spacing-xl);
}

/* ========================================
   ANTI-GRAVITY EFFECTS
   ======================================== */

/* Card float animation */
@keyframes cardFloat {
  0% {
    transform: translateY(0) scale(1);
  }

  40% {
    transform: translateY(-10px) scale(1.02);
  }

  100% {
    transform: translateY(-6px) scale(1);
  }
}

/* Button activation animation */
@keyframes btnActivate {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(230, 126, 34, 0);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 0 24px 4px rgba(230, 126, 34, 0.25);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 4px 16px rgba(230, 126, 34, 0.2);
  }
}

.sun-btn--activated {
  animation: btnActivate 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 4px 16px rgba(230, 126, 34, 0.2);
}

/* Generate button */
.sun-btn--generate {
  background: var(--color-primary, #E67E22);
  border: none;
  color: white;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 28px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(230, 126, 34, 0.24);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sun-btn--generate:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(230, 126, 34, 0.32);
}

.sun-btn--generate::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: generateShimmer 2s ease infinite;
}

@keyframes generateGradient {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@keyframes generateShimmer {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

/* Layout / Design card float effects */
.layout-card.is-selected,
.design-card.is-selected,
.catchcopy-item.is-selected {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(230, 126, 34, 0.12);
  animation: cardFloat 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Step 1 wizard styles for admin mode */
.step1-wizard-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 8px 0;
}

.step1-wizard-nav__step {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  border: 2px solid #E5E7EB;
  background: white;
  color: #9CA3AF;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.step1-wizard-nav__step--active {
  border-color: var(--color-primary, #E67E22);
  background: var(--color-primary, #E67E22);
  color: white;
  transform: scale(1.05);
}

.step1-wizard-nav__step--done {
  border-color: var(--color-accent, #10B981);
  background: var(--color-accent, #10B981);
  color: white;
}

.step1-wizard-nav__line {
  width: 18px;
  height: 2px;
  background: #E5E7EB;
  border-radius: 1px;
  transition: background 0.3s ease;
}

.step1-wizard-nav__line--done {
  background: var(--color-accent, #10B981);
}

.step1-wizard-info {
  text-align: right;
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  font-weight: 500;
}

/* Step 1 connection banner */
.step1-connect-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
  background: var(--bg-subtle, #F9FAFB);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--border-light, #F3F4F6);
}

.step1-connect-banner__card {
  background: white;
  border-radius: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border-light, #F3F4F6);
  transition: box-shadow 0.2s ease;
}

.step1-connect-banner__card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.step1-connect-banner__title {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

/* Step 1 summary/confirmation screen */
.step1-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.step1-summary__card {
  background: white;
  border: 1px solid var(--border-light, #F3F4F6);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.2s ease;
}

.step1-summary__card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.step1-summary__card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light, #F3F4F6);
}

.step1-summary__card-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: white;
}

.step1-summary__item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.5;
}

.step1-summary__item-label {
  color: var(--text-muted, #9CA3AF);
  flex-shrink: 0;
  width: 40%;
}

.step1-summary__item-value {
  color: var(--text-primary, #1F2937);
  font-weight: 500;
  text-align: right;
  flex: 1;
}

.step1-summary__item-value--empty {
  color: #D1D5DB;
  font-style: italic;
  font-weight: 400;
}

/* Step 1 wizard footer */
.step1-wizard-footer {
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border-light, #F3F4F6);
  padding: 14px 24px;
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ========================================
   ROUTE BRANCHING SCREEN
   ======================================== */

.route-branch {
  max-width: 946px;
  margin: 0 auto;
  padding: 40px 0;
}

.route-branch__heading {
  text-align: center;
  margin-bottom: 32px;
}

.route-branch__heading h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary, #1F2937);
  margin-bottom: 8px;
}

.route-branch__heading p {
  font-size: 14px;
  color: var(--text-secondary, #6B7280);
  line-height: 1.6;
}

.route-branch__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.route-branch__card {
  background: white;
  border: 2px solid var(--border-light, #F3F4F6);
  border-radius: 16px;
  padding: 16px 18px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0 12px;
  align-items: center;
  text-align: left;
}

.route-branch__card .route-branch__icon {
  grid-row: 1;
  grid-column: 1;
  margin: 0;
}

.route-branch__card .route-branch__title {
  grid-row: 1;
  grid-column: 2;
  text-align: left;
}

.route-branch__card .route-branch__desc {
  grid-row: 2;
  grid-column: 1 / -1;
  margin-top: 8px;
}

/* ::before 装飾を廃止（Anti-Gravity: 視覚ノイズ排除） */

.route-branch__card:hover {
  border-color: var(--color-primary, #E67E22);
  transform: none;
  box-shadow: none;
}

.route-branch__card.is-selected {
  border-color: var(--color-primary, #E67E22);
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.10);
  transform: none;
}

.route-branch__card.is-selected::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary, #E67E22);
  color: white;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.route-branch__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin: 0 auto 12px;
  transition: all 0.3s ease;
}

.route-branch__card:first-child .route-branch__icon {
  background: rgba(230, 126, 34, 0.08);
  color: #E67E22;
}

.route-branch__card:last-child .route-branch__icon {
  background: rgba(16, 185, 129, 0.08);
  color: #10B981;
}

/* hover時のアイコン拡大を廃止（Anti-Gravity: 非クリック要素のアニメーション排除） */

.route-branch__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary, #1F2937);
  margin-bottom: 8px;
  text-align: center;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.route-branch__desc {
  font-size: 12px;
  color: var(--text-secondary, #6B7280);
  line-height: 1.7;
  text-align: left;
}

/* ========================================
   PHASE PROGRESS BAR
   ======================================== */

.phase-progress {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 16px 0;
  margin-bottom: 8px;
}

.phase-progress__step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted, #9CA3AF);
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: default;
  white-space: nowrap;
}

.phase-progress__step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: var(--bg-subtle, #F3F4F6);
  color: var(--text-muted, #9CA3AF);
  transition: all 0.3s ease;
}

.phase-progress__step--active {
  color: var(--color-primary, #E67E22);
  background: rgba(230, 126, 34, 0.05);
}

.phase-progress__step--active .phase-progress__step-num {
  background: var(--color-primary, #E67E22);
  color: white;
  box-shadow: 0 2px 8px rgba(230, 126, 34, 0.3);
}

.phase-progress__step--done {
  color: var(--color-accent, #10B981);
}

.phase-progress__step--done .phase-progress__step-num {
  background: var(--color-accent, #10B981);
  color: white;
}

.phase-progress__connector {
  width: 32px;
  height: 3px;
  background: var(--border-light, #E5E7EB);
  border-radius: 2px;
  margin: 0 4px;
  transition: background 0.3s ease;
}

.phase-progress__connector--done {
  background: var(--color-accent, #10B981);
}

/* ========================================
   BUTTON DISABLED / SHAKE / TOOLTIP
   ======================================== */

.sun-btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: auto;
  filter: grayscale(0.5);
}

.sun-btn--disabled:hover {
  transform: none;
  box-shadow: none;
}

@keyframes fieldShake {

  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  50%,
  90% {
    transform: translateX(-4px);
  }

  30%,
  70% {
    transform: translateX(4px);
  }
}

.field-shake {
  animation: fieldShake 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  outline: 2px solid #EF4444 !important;
  outline-offset: 2px;
  border-radius: 8px;
}

.field-shake-tooltip {
  position: fixed;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  background: #1F2937;
  color: white;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  z-index: 100;
  animation: tooltipFadeIn 0.3s ease;
  white-space: nowrap;
}

.field-shake-tooltip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: #1F2937;
  border-radius: 2px;
  transform: translateX(-50%) rotate(45deg);
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ========================================
   RECOMMENDED LAYOUT (Step 2)
   ======================================== */

/* Anti-Gravity: 囲い枠を廃止し、フラットなテキスト表示に集約 */
.ai-recommend-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 4px 0;
  background: none;
  border: none;
  border-radius: 0;
  margin-bottom: 20px;
}

.ai-recommend-header__icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--color-primary, #E67E22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  flex-shrink: 0;
}

.ai-recommend-header__text h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #6B7280);
  margin-bottom: 0;
}

.ai-recommend-header__text p {
  font-size: 12px;
  color: var(--text-muted, #9CA3AF);
  line-height: 1.5;
}

.taste-card--recommended {
  position: relative;
}

.taste-card__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, var(--color-primary, #E67E22), var(--color-accent, #E8976B));
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  z-index: 3;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
}

.taste-card__badge i {
  font-size: 9px;
}

/* Other styles section */
/* Anti-Gravity: border-top → 余白のみで分離、hover のtranslateX廃止 */
.other-styles-section {
  margin-top: 40px;
  padding-top: 0;
  border-top: none;
}

.other-styles-section__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted, #9CA3AF);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.other-styles-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.other-style-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: white;
  border: 1px solid var(--border-light, #F3F4F6);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.other-style-item:hover {
  border-color: var(--color-primary, #E67E22);
  background: rgba(230, 126, 34, 0.02);
  transform: none;
}

.other-style-item.is-selected {
  border-color: var(--color-primary, #E67E22);
  background: rgba(230, 126, 34, 0.04);
  box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.12);
}

.other-style-item__preview {
  width: 48px;
  height: 36px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-subtle, #F3F4F6);
}

.other-style-item__info {
  flex: 1;
}

.other-style-item__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1F2937);
}

.other-style-item__desc {
  font-size: 12px;
  color: var(--text-secondary, #6B7280);
  margin-top: 2px;
  line-height: 1.4;
}

.other-style-item__check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border-light, #E5E7EB);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: transparent;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.other-style-item.is-selected .other-style-item__check {
  border-color: var(--color-primary, #E67E22);
  background: var(--color-primary, #E67E22);
  color: white;
}

/* ========================================
   BOTTOM NAV (画面下部固定フッター)
   ======================================== */

.sun-bottom-nav {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-width, 260px);
  right: 0;
  height: 60px;
  background: white;
  border-top: 1px solid var(--border-light, #E5E7EB);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  z-index: 80;
}

.sun-bottom-nav__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #6B7280);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}

.sun-bottom-nav__back:hover {
  color: var(--text-primary, #1F2937);
  background: var(--bg-hover, #F3F4F6);
}

/* コンテンツがフッターに隠れないための余白 */
.sun-content-has-bottom-nav {
  padding-bottom: 80px;
}

/* フローティングナビバー（画面下部追従） */
.sun-floating-bar {
  position: fixed;
  bottom: 0;
  left: 260px;
  right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  padding: 14px 32px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.sun-floating-bar__spacer {
  flex: 1;
}

.sun-floating-bar__hint {
  max-width: 520px;
  margin-right: 16px;
  color: var(--text-secondary, #64748B);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-align: right;
}

.sun-floating-bar__prev {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #6B7280);
  background: white;
  border: 1px solid var(--border-light, #E5E7EB);
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.sun-floating-bar__prev:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  color: var(--text-primary, #1F2937);
}

.sun-floating-bar__next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 600;
  color: white;
  background: var(--sun-primary, #E67E22);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(230, 126, 34, 0.35), 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.sun-floating-bar__next:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(230, 126, 34, 0.45), 0 3px 10px rgba(0, 0, 0, 0.12);
  background: #D55A22;
}

.sun-floating-bar__next:active {
  transform: translateY(0);
}

.sun-floating-bar__next--generate {
  background: var(--color-primary, #E67E22);
  box-shadow: 0 4px 20px rgba(230, 126, 34, 0.3);
  overflow: hidden;
  position: relative;
}

.sun-floating-bar__next--generate:hover {
  background: #D55A22;
  box-shadow: 0 8px 28px rgba(230, 126, 34, 0.36);
  transform: translateY(-2px);
}

.sun-floating-bar__next--generate::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: generateShimmer 2s ease infinite;
}

/* ========================================
   HEARING SEND UI (ヒアリングシート送信)
   ======================================== */

.hearing-send-card {
  background: white;
  border: 1px solid var(--border-light, #F3F4F6);
  border-radius: 12px;
  padding: 20px;
}

.hearing-send-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.hearing-send-card__title i {
  margin-right: 6px;
}

.hearing-send-field {
  margin-bottom: 12px;
}

.hearing-send-field__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
  display: block;
}

.hearing-send-field__input {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--border-light, #E5E7EB);
  border-radius: 8px;
  background: white;
  color: var(--text-primary);
  transition: border-color 0.2s ease;
}

.hearing-send-field__input:focus {
  outline: none;
  border-color: var(--color-primary, #E67E22);
}

.hearing-send-field__textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px 12px;
  font-size: 13px;
  border: 1px solid var(--border-light, #E5E7EB);
  border-radius: 8px;
  background: white;
  color: var(--text-primary);
  resize: vertical;
  line-height: 1.6;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.hearing-send-field__textarea:focus {
  outline: none;
  border-color: var(--color-primary, #E67E22);
}

/* フィールドエラーメッセージ */
.hearing-send-field__error {
  font-size: 12px;
  color: #EF4444;
  margin-top: 4px;
  line-height: 1.4;
}

/* ローディングオーバーレイ（右パネル） */
.saved-wizard-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  backdrop-filter: blur(2px);
}

.saved-wizard-loading__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #6B7280);
}

/* 確認ポップアップ（モーダル） */
.sun-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.sun-modal-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

.sun-modal {
  background: white;
  border-radius: 16px;
  padding: 28px;
  max-width: 520px;
  width: 90%;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
  transform: translateY(12px);
  transition: transform 0.25s ease;
}

.sun-modal-overlay--visible .sun-modal {
  transform: translateY(0);
}

.sun-modal__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.sun-modal__body {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 20px;
}

.sun-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 送信完了トースト */
.sun-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: rgba(16, 185, 129, 0.95);
  color: white;
  font-size: 15px;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 12px;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.sun-toast--visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ========================================
   UNIFIED PHASE BAR (Step 1 & Step 2 共通)
   ======================================== */

.sun-phase-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 8px 0;
  margin-bottom: 8px;
}

.sun-phase-bar__steps {
  display: flex;
  align-items: center;
  gap: 0;
}

.sun-phase-bar__step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted, #9CA3AF);
  white-space: nowrap;
  cursor: default;
  transition: color 0.3s ease;
}

.sun-phase-bar__dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-subtle, #F3F4F6);
  color: var(--text-muted, #9CA3AF);
  transition: all 0.3s ease;
}

.sun-phase-bar__step--active {
  color: var(--color-primary, #E67E22);
}

.sun-phase-bar__step--active .sun-phase-bar__dot {
  background: var(--color-primary, #E67E22);
  color: white;
}

.sun-phase-bar__step--done {
  color: var(--color-accent, #10B981);
}

.sun-phase-bar__step--done .sun-phase-bar__dot {
  background: var(--color-accent, #10B981);
  color: white;
}

.sun-phase-bar__connector {
  width: 28px;
  height: 2px;
  background: var(--border-light, #E5E7EB);
  margin: 0 4px;
  transition: background 0.3s ease;
}

.sun-phase-bar__connector--done {
  background: var(--color-accent, #10B981);
}

/* ========================================
   STEP 2: 見出し（左）＋ サブステッパー（右）を1行で（添付4）
   ======================================== */

.substep-stage {
  position: relative;
}

/* 見出し内の「デザイン選択 1/5」部分をオレンジで強調 */
.c-page-header__step {
  color: var(--color-primary, #E67E22);
  font-weight: 700;
}

/* 「デザイン選択 N/5」を小さくオレンジで表示し、改行でタイトルを下に置く */
.c-page-header__step--block {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 4px;
}

/* 見出しエリアを白カード化する汎用モディファイア。
   step2 のサブステップ見出しと揃え、step3／プレビューの見出しもカード化して
   ウィザード全体の「白カード見出し＋白カード本文」のリズムを統一する。 */
.c-page-header--card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-light, #E0E0E0);
  border-radius: 12px;
  padding: 18px 24px;
  margin-bottom: 16px;
}

/* 見出しエリアも白カード化（コンテンツ側のパネルと統一してガタつきをなくす） */
.substep-stage .substep-panel > .c-page-header {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-light, #E0E0E0);
  border-radius: 12px;
  padding: 18px 24px;
  margin-bottom: 16px;
  align-items: center;
}

/* ステージ内のフェーズバーは見出しカードの右上にラベル付きで配置（添付1の見せ方）。
   見出し（長め）と詰まらないよう、ステップ文字は小さめ＋全体幅を抑える。 */
.substep-stage > .sun-phase-bar {
  position: absolute;
  top: 20px;
  right: 24px;
  width: auto;
  margin: 0;
  padding: 0;
  z-index: 2;
}

.substep-stage > .sun-phase-bar .sun-phase-bar__steps {
  justify-content: flex-end;
}

.substep-stage > .sun-phase-bar .sun-phase-bar__step {
  font-size: 11px;
  padding: 3px 4px;
  gap: 5px;
}

.substep-stage > .sun-phase-bar .sun-phase-bar__dot {
  width: 20px;
  height: 20px;
  font-size: 10px;
}

.substep-stage > .sun-phase-bar .sun-phase-bar__connector {
  width: 14px;
  margin: 0 3px;
}

/* 見出し側にステッパー分の右余白を確保して重なりを防ぐ */
.substep-stage .substep-panel > .c-page-header {
  padding-right: 600px;
}

/* 画面が狭いときは従来どおり：ラベル付きフルバーを見出しの上に通常配置 */
@media (max-width: 1200px) {
  .substep-stage > .sun-phase-bar {
    position: static;
    width: 100%;
    margin-bottom: 12px;
    padding: 8px 0;
  }
  .substep-stage > .sun-phase-bar .sun-phase-bar__steps {
    justify-content: space-between;
  }
  .substep-stage > .sun-phase-bar .sun-phase-bar__step {
    font-size: 13px;
    padding: 6px 14px;
    gap: 8px;
  }
  .substep-stage > .sun-phase-bar .sun-phase-bar__dot {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  .substep-stage > .sun-phase-bar .sun-phase-bar__connector {
    width: 28px;
    margin: 0 4px;
  }
  .substep-stage .substep-panel > .c-page-header {
    padding-right: 24px;
  }
}

/* ========================================
   STEP 0: 3CARD ROUTE (Anti-Gravity)
   ======================================== */

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

.route-branch__card:nth-child(3) .route-branch__icon {
  background: rgba(230, 126, 34, 0.08);
  color: #F97316;
}

/* ========================================
   SUMMARY EDIT BUTTON (確認画面)
   ======================================== */

.step1-summary__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light, #F3F4F6);
}

.step1-summary__card-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.step1-summary__edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary, #E67E22);
  background: none;
  border: 1px solid var(--color-primary, #E67E22);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.step1-summary__edit-btn:hover {
  background: var(--color-primary, #E67E22);
  color: white;
}

/* ========================================
   RESPONSIVE
   ======================================== */

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

  .preview-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    --sidebar-width: 100%;
  }

  .sun-wrapper {
    flex-direction: column;
  }

  .sun-sidebar {
    position: relative;
    width: 100%;
    height: auto;
  }

  .sun-main {
    margin-left: 0;
    padding: var(--spacing-lg);
  }

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

  .sun-wizard__bar {
    flex-wrap: wrap;
  }
}

/* ===================================
   Header/Footer Variant Selection
   =================================== */
.device-toggle {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  background: transparent;
  border: none;
  color: var(--color-text-muted, #636E72);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-family);
}

.device-toggle:hover {
  background: var(--color-bg-base, #f5f6f7);
  color: var(--color-text, #2D3436);
}

.device-toggle--active {
  background: var(--color-primary, #E67E22);
  color: #fff;
}

.device-toggle--active:hover {
  background: var(--color-primary-dark, #D35400);
  color: #fff;
}

.variant-card:hover {
  border-color: var(--color-border, #E5E7EB) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.variant-check-badge {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary, #E67E22);
  color: #fff;
  font-size: 11px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  z-index: 2;
}

/* ========================================
   STEP 1: はじめ方を選択（リッチ3カード刷新）
   ・見出しカード（左:ステップ/タイトル ＋ 右:サブステッパー）
   ・3枚のリッチカード（アイコン/バッジ/説明/目安時間/アクション）
   既存 .route-branch__* ルールを .route-branch__options--three 等で上書き
   ======================================== */

/* ルート分岐コンテナ：946px固定をやめ、コンテンツ幅いっぱいに3カラム展開 */
.route-branch {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* 見出しカード：左テキストと右サブステッパーを1行に */
.route-branch__header-card {
  gap: 24px;
  flex-wrap: wrap;
}

.route-branch__header-card .c-page-header__step {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}

/* 右サブステッパー（コンパクト版） */
.route-branch__substepper {
  flex: none;
  width: auto;
  margin: 0;
  padding: 0;
}

.route-branch__substepper .sun-phase-bar__steps {
  justify-content: flex-end;
}

.route-branch__substepper .sun-phase-bar__step {
  font-size: 12px;
  padding: 4px 6px;
  gap: 6px;
}

.route-branch__substepper .sun-phase-bar__dot {
  width: 22px;
  height: 22px;
  font-size: 11px;
}

.route-branch__substepper .sun-phase-bar__connector {
  width: 18px;
  margin: 0 4px;
}

/* 3カードのグリッド余白 */
.route-branch__options--three {
  gap: 18px;
}

/* カード本体：縦並びフレックスに作り替え
   ※ベースの .route-branch__card は align-items:center のため、
     stretch で上書きしないと各行が中央寄せ＆幅縮小されてしまう */
.route-branch__options--three .route-branch__card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  text-align: left;
  padding: 20px;
  border-radius: 16px;
  border: 2px solid var(--border-light, #E0E0E0);
}

/* ヘッダー行：アイコン＋テキストを左詰め */
.route-branch__card-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.route-branch__options--three .route-branch__card .route-branch__icon {
  width: 44px;
  height: 44px;
  margin: 0;
  flex: none;
  border-radius: 12px;
  background: var(--rb-accent-bg, rgba(230, 126, 34, 0.10));
  color: var(--rb-accent, #E67E22);
  font-size: 18px;
}

.route-branch__head-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
}

.route-branch__options--three .route-branch__title {
  margin: 0;
  text-align: left;
  font-size: 16px;
  line-height: 1.4;
}

.route-branch__badge {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--rb-accent, #E67E22);
  background: var(--rb-accent-bg, rgba(230, 126, 34, 0.10));
}

.route-branch__divider {
  align-self: stretch;
  width: 100%;
  height: 0;
  margin: 0;
  border: none;
  border-top: 1px solid var(--border-light, #E0E0E0);
}

.route-branch__options--three .route-branch__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary, #6B7280);
  flex: 1 1 auto;
}

.route-branch__time {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #9CA3AF);
  background: var(--bg-subtle, #F3F4F6);
  padding: 5px 12px;
  border-radius: 999px;
}

.route-branch__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--rb-accent, #E67E22);
}

/* おすすめカード（簡単作成） */
.route-branch__options--three .route-branch__card--recommend {
  border-color: var(--rb-accent, #10B981);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.04), #fff 40%);
}

/* おすすめバッジが右上にあるため、ヘッダー右側に逃げ場を確保（タイトルと重ねない） */
.route-branch__card--recommend .route-branch__card-head {
  padding-right: 64px;
}

.route-branch__recommend {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--rb-accent, #10B981);
  background: rgba(16, 185, 129, 0.10);
  border: 1px solid var(--rb-accent, #10B981);
  padding: 3px 9px;
  border-radius: 999px;
  box-shadow: none;
}

/* 選択状態：アクセントカラーで縁取り＋チェック */
.route-branch__options--three .route-branch__card.is-selected {
  border-color: var(--rb-accent, #E67E22);
  box-shadow: 0 0 0 3px var(--rb-accent-bg, rgba(230, 126, 34, 0.10));
}

.route-branch__options--three .route-branch__card.is-selected::after {
  background: var(--rb-accent, #E67E22);
}

/* 下部バー「次へ」未選択時の無効表示 */
#route-branch-next.is-disabled {
  background: var(--bg-subtle, #F3F4F6);
  color: var(--text-muted, #9CA3AF);
  box-shadow: none;
  cursor: default;
}

#route-branch-next.is-disabled:hover {
  transform: none;
}

/* テンプレートから作成: 最小入力パネル */
.quick-create-panel {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--border-light, #E0E0E0);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.quick-create-panel[hidden] {
  display: none !important;
}

.quick-create-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.quick-create-panel__head h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  color: var(--text-primary, #111827);
}

.quick-create-panel__head p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary, #6B7280);
}

.quick-create-panel__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.10);
  color: #047857;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.quick-create-alert {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 10px;
  background: rgba(254, 242, 242, 0.92);
  color: #B91C1C;
  font-size: 13px;
  font-weight: 700;
}

.quick-create-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.quick-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.quick-field span {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-secondary, #6B7280);
}

.quick-field__control {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--border-light, #DDE3EA);
  border-radius: 10px;
  background: #fff;
  color: var(--text-primary, #111827);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.quick-field__select-wrap {
  position: relative;
  display: block;
}

.quick-field__control--select {
  appearance: none;
  padding-right: 38px;
  cursor: pointer;
}

.quick-field__select-wrap i {
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%);
  color: #64748B;
  font-size: 12px;
  pointer-events: none;
}

.quick-field__control:focus {
  border-color: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
}

.quick-site-type {
  margin-top: 18px;
}

.quick-site-type__label {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 900;
  color: var(--text-primary, #111827);
}

.quick-site-type__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quick-site-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 88px;
  padding: 14px 38px 14px 14px;
  border: 1px solid var(--border-light, #DDE3EA);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.quick-site-card:hover,
.quick-site-card:focus-visible {
  border-color: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.10);
  outline: none;
}

.quick-site-card:disabled {
  cursor: not-allowed;
  background: #F8FAFC;
  color: #94A3B8;
  opacity: 0.76;
}

.quick-site-card:disabled:hover {
  border-color: var(--border-light, #DDE3EA);
  box-shadow: none;
}

.quick-site-card:disabled .quick-site-card__icon {
  background: #E2E8F0;
  color: #94A3B8;
}

.quick-site-card:disabled .quick-site-card__title,
.quick-site-card:disabled .quick-site-card__desc {
  color: #94A3B8;
}

.quick-site-card.is-selected {
  border-color: #10B981;
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.06), #fff 70%);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

.quick-site-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.10);
  color: #059669;
}

.quick-site-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.quick-site-card__title {
  font-size: 13px;
  font-weight: 900;
  line-height: 1.45;
  color: var(--text-primary, #111827);
}

.quick-site-card__desc {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary, #6B7280);
}

.quick-site-card__check {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #10B981;
  color: #fff;
  font-size: 11px;
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.quick-site-card.is-selected .quick-site-card__check {
  opacity: 1;
  transform: scale(1);
}

.quick-site-card__soon {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: #E2E8F0;
  color: #64748B;
  font-size: 11px;
  font-weight: 800;
}

/* ========================================
   STEP 1 DIAGNOSIS ROUTE: UX / A11Y / RESPONSIVE
   診断ルート専用。POST契約や生成エンジンには影響させない。
   ======================================== */

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

.route-branch-screen.sun-content-has-bottom-nav {
  padding-bottom: 128px;
}

.l-main:has(#route-branch-screen) > .l-container {
  max-width: none;
}

.route-branch-screen .route-branch__card[role="button"]:focus-visible,
.diag-client-option:focus-visible,
.diag-result-item:focus-visible,
.sun-diagnosis-confirm-btn:focus-visible {
  outline: 3px solid rgba(230, 126, 34, 0.45);
  outline-offset: 3px;
}

.route-branch-screen .route-branch__card[role="button"]:hover {
  border-color: var(--rb-accent, #E67E22);
  box-shadow: 0 0 0 3px var(--rb-accent-bg, rgba(230, 126, 34, 0.10));
}

.sun-diagnosis-panel {
  scroll-margin-top: 18px;
  width: 100%;
  max-width: none;
}

#diag-grid.sun-diagnosis-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
}

#diag-grid.sun-diagnosis-grid.is-picker {
  grid-template-columns: minmax(0, 1fr);
}

#diag-grid.sun-diagnosis-grid.is-confirm {
  grid-template-columns: minmax(0, 1fr);
}

#diag-grid.sun-diagnosis-grid.is-select-only {
  grid-template-columns: minmax(0, 1fr);
}

#diag-grid.sun-diagnosis-grid.is-confirm #diag-confirm-area,
#diag-grid.sun-diagnosis-grid.is-confirm #diag-confirm-embed {
  min-width: 0;
  width: 100%;
}

#diag-grid.sun-diagnosis-grid.is-confirm #diag-confirm-embed {
  max-width: none;
  margin: 0;
}

.sun-diagnosis-picker-card {
  border: 1px solid var(--border-light, #E5E7EB);
  box-sizing: border-box;
  width: 100%;
}

#diag-picker-mount,
#diag-confirm-embed > .sun-diagnosis-picker-card,
#diag-picker-mount > .sun-diagnosis-picker-card {
  width: 100%;
  max-width: none;
}

.diagnosis-picker-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.diagnosis-picker-shell__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.diagnosis-picker-shell__head h1 {
  margin: 0 0 8px;
  color: #1F2937;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.35;
}

.diagnosis-picker-shell__head p {
  margin: 0;
  color: #6B7280;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.7;
}

.diagnosis-picker-shell__change {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  gap: 8px;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  background: #fff;
  color: #4B5563;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.diagnosis-picker-shell__change:focus-visible {
  outline: 3px solid rgba(230, 126, 34, 0.45);
  outline-offset: 3px;
}

.sun-diagnosis-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(220, 38, 38, 0.22);
  border-radius: 8px;
  background: rgba(254, 242, 242, 0.95);
  color: #B91C1C;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.sun-diagnosis-alert[hidden] {
  display: none;
}

.sun-diagnosis-alert::before {
  content: '\f06a';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  flex: none;
  margin-top: 1px;
}

.sun-diagnosis-empty {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(230, 126, 34, 0.16);
  border-radius: 10px;
  background: #F8FAFC;
  color: #475569;
  font-size: 12px;
  line-height: 1.6;
}

.sun-diagnosis-empty i {
  color: #E67E22;
  margin-top: 2px;
}

.sun-diagnosis-empty strong,
.sun-diagnosis-empty span {
  display: block;
}

.sun-diagnosis-empty strong {
  color: #1F2937;
  font-size: 12px;
}

.sun-diagnosis-empty--compact {
  margin-top: 0;
}

.diag-client-option[aria-selected="true"] {
  background: #EEF2FF !important;
}

.diag-result-item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #F9FAFB;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.diag-result-item:hover {
  border-color: rgba(230, 126, 34, 0.35);
  background: #F8FAFF;
}

.diag-result-item.is-selected {
  border-color: #E67E22;
  background: #EEF2FF;
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.12);
}

.diag-result-item i {
  color: #E67E22;
  font-size: 13px;
  margin-top: 3px;
}

.diag-result-item__body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.diag-result-item__top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.diag-result-item__badge,
.diag-result-item__rank {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.diag-result-item__badge--latest {
  background: #DCFCE7;
  color: #047857;
}

.diag-result-item__rank {
  background: #EEF2FF;
  color: #4338CA;
}

.diag-result-item__date {
  color: #6B7280;
  font-size: 11px;
  font-weight: 700;
}

.diag-result-item__score {
  color: #1F2937;
  font-size: 13px;
  font-weight: 700;
}

.diag-result-item__issue {
  color: #374151;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.45;
}

.diag-result-item__issue span {
  color: #6B7280;
  font-weight: 500;
}

.diag-result-item__meta {
  color: #6B7280;
  font-size: 11px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diagnosis-score-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #EEF2FF;
  color: #4338CA;
  font-size: 12px;
  font-weight: 800;
}

.diagnosis-issue-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  border: 1px solid rgba(230, 126, 34, 0.18);
  border-radius: 999px;
  background: #F8FAFF;
  color: #4338CA;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
}

.diagnosis-impact-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

.diagnosis-impact-strip__item {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(230, 126, 34, 0.14);
  border-radius: 12px;
  background: linear-gradient(180deg, #F8FAFF 0%, #FFFFFF 100%);
}

.diagnosis-impact-strip__item span,
.diagnosis-impact-strip__item strong {
  display: block;
}

.diagnosis-impact-strip__item span {
  margin-bottom: 4px;
  color: #6B7280;
  font-size: 11px;
  font-weight: 700;
}

.diagnosis-impact-strip__item strong {
  color: #1F2937;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

#diag-confirm-placeholder {
  text-align: center;
}

#diag-confirm-embed {
  min-width: 0;
}

#diag-confirm-btn[aria-disabled="true"] {
  cursor: not-allowed !important;
}

@media (max-width: 900px) {
  .route-branch-screen .route-branch__header-card {
    gap: 16px;
  }

  .route-branch-screen .route-branch__substepper {
    width: 100%;
  }

  .route-branch-screen .route-branch__substepper .sun-phase-bar__steps {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .route-branch-screen .route-branch__options--three {
    grid-template-columns: 1fr;
  }

  .quick-create-grid,
  .quick-site-type__grid {
    grid-template-columns: 1fr;
  }

  #diag-grid.sun-diagnosis-grid,
  #diag-grid.sun-diagnosis-grid.is-picker,
  #diag-grid.sun-diagnosis-grid.is-confirm,
  #diag-grid.sun-diagnosis-grid.is-select-only {
    grid-template-columns: 1fr;
  }

  #diag-confirm-area {
    min-height: 180px !important;
  }

  .diagnosis-picker-shell__head {
    flex-direction: column;
  }

  .diagnosis-picker-shell__change {
    width: 100%;
  }

  #diag-confirm-embed [style*="grid-template-columns:1fr 1fr"],
  #diag-confirm-embed [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  #diag-confirm-embed [style*="justify-content:space-between"],
  #diag-confirm-embed [style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
  }

  .diagnosis-impact-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .l-main:has(#route-branch-screen) {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .route-branch-screen.sun-content-has-bottom-nav {
    padding-bottom: 172px;
  }

  #route-branch-bottom-bar,
  #s1-floating-bar {
    left: 0;
    right: 0;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }

  #route-branch-bottom-bar .sun-floating-bar__spacer,
  #s1-floating-bar .sun-floating-bar__spacer {
    display: none;
  }

  #route-branch-bottom-bar .sun-floating-bar__prev,
  #route-branch-bottom-bar .sun-floating-bar__next,
  #s1-floating-bar .sun-floating-bar__prev,
  #s1-floating-bar .sun-floating-bar__next,
  #s1-diag-reselect,
  #s1-diag-next {
    flex: 1 1 100%;
    justify-content: center;
    min-width: 0;
    white-space: normal !important;
  }

  #s1-floating-info {
    width: 100%;
  }

  .route-branch-screen .route-branch {
    padding-top: 16px;
  }

  .route-branch-screen .route-branch__options--three .route-branch__card {
    min-height: auto;
    padding: 18px;
  }

  #diag-confirm-embed h1 {
    font-size: 20px !important;
    line-height: 1.45 !important;
  }

  #diag-confirm-embed button {
    max-width: 100%;
    white-space: normal !important;
  }
}

/* ========================================
   STEP 2 (2-2 メインビジュアル): 選択状況パネル＋デザインセクションのカード化
   ======================================== */

/* 選択状況パネル（MV / ヘッダー / フッターの3要素ステータス） */
.mv-status-panel {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-light, #E0E0E0);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.mv-status-panel__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #1F2937);
  margin-bottom: 12px;
}

.mv-status-panel__chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.mv-status-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--border-light, #E0E0E0);
  border-radius: 10px;
  background: var(--bg-card, #fff);
  transition: all 0.2s ease;
}

.mv-status-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--bg-subtle, #F3F4F6);
  color: var(--text-muted, #9CA3AF);
  font-size: 13px;
  flex: none;
}

.mv-status-chip__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.mv-status-chip__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1F2937);
}

.mv-status-chip__hint {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted, #9CA3AF);
  margin-top: 1px;
}

.mv-status-chip__count {
  margin-left: auto;
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: #6B7280;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.mv-status-chip__count i {
  font-size: 10px;
  margin-right: 2px;
}

.mv-status-chip.is-selected {
  border-color: var(--color-primary, #E67E22);
  background: rgba(230, 126, 34, 0.06);
}

.mv-status-chip.is-selected .mv-status-chip__icon {
  background: rgba(230, 126, 34, 0.14);
  color: var(--color-primary, #E67E22);
}

.mv-status-chip.is-selected .mv-status-chip__hint {
  color: var(--color-primary, #E67E22);
}

.mv-status-chip.is-selected .mv-status-chip__count {
  color: #fff;
  background: var(--color-primary, #E67E22);
  border-color: var(--color-primary, #E67E22);
}

/* デザインセクション（メインビジュアル / ヘッダー / フッターを各カードに） */
.design-section {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-light, #E0E0E0);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
}

.design-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.design-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary, #1F2937);
}

.design-section__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary, #E67E22);
  font-size: 15px;
}

.design-section__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #C05621;
  background: rgba(230, 126, 34, 0.10);
  padding: 3px 10px;
  border-radius: 999px;
}

/* プレビュー切替（PC/SP）— セクションヘッダー右側 */
.design-preview-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.design-preview-toggle__label {
  font-size: 12px;
  color: var(--text-muted, #9CA3AF);
}

.device-toggle-group {
  display: inline-flex;
  border: 1px solid var(--border-light, #E0E0E0);
  border-radius: 8px;
  overflow: hidden;
}

/* ========================================
   SITE LIST: explicit row actions and in-app delete confirmation
   ======================================== */

.site-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 24px 0 16px;
}

.site-list-toolbar__count {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.site-status-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.site-status-filter__label {
  margin-right: 2px;
  color: #6B7280;
  font-size: 12px;
  font-weight: 700;
}

.site-status-filter__item {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  background: #fff;
  color: #4B5563;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.site-status-filter__item:hover {
  border-color: #FDBA74;
  background: #FFF7ED;
  color: #C2410C;
}

.site-status-filter__item.is-active {
  border-color: transparent;
  background: #EA580C;
  color: #fff;
}

.site-list-card {
  overflow-x: hidden;
}

.site-list-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.site-list-table__col-id {
  width: 5%;
}

.site-list-table__col-name {
  width: 19%;
}

.site-list-table__col-client {
  width: 16%;
}

.site-list-table__col-url {
  width: 17%;
}

.site-list-table__col-status {
  width: 9%;
}

.site-list-table__col-created {
  width: 9%;
}

.site-list-table__col-actions {
  width: 20%;
}

.site-list-table th,
.site-list-table td {
  padding: 14px 12px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border-light);
}

.site-list-table th {
  border-bottom-width: 2px;
  border-bottom-color: #E0E0E0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.site-list-table tbody tr:last-child td {
  border-bottom: 0;
}

.site-list-table__id {
  color: #374151;
  font-size: 0.9rem;
}

.site-list-table__name {
  color: #1F2937;
  font-size: 0.9rem;
  font-weight: 700;
}

.site-list-name,
.site-list-client-link {
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.site-list-client-link,
.site-list-url {
  color: var(--color-primary);
  text-decoration: none;
}

.site-list-client-link {
  font-weight: 600;
}

.site-list-table__url {
  font-size: 0.85rem;
}

.site-list-url {
  display: inline-block;
  max-width: 100%;
  word-break: break-all;
}

.site-list-table__created {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.site-list-date,
.site-list-time {
  display: block;
}

.site-list-date {
  color: #4B5563;
  font-weight: 600;
}

.site-list-time {
  margin-top: 2px;
  color: #9CA3AF;
  font-size: 0.78rem;
}

.site-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.site-status-badge--published {
  border-color: #A7F3D0;
  background: #ECFDF5;
  color: #047857;
}

.site-status-badge--progress,
.site-status-badge--watch {
  border-color: #FDE68A;
  background: #FFFBEB;
  color: #92400E;
}

.site-status-badge--draft,
.site-status-badge--muted {
  border-color: #E5E7EB;
  background: #F3F4F6;
  color: #4B5563;
}

.site-list-table__actions {
  white-space: nowrap;
}

.site-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.site-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #fff;
  color: #1F2937;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.site-row-check-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #9CA3AF;
  font-size: 12px;
}

.site-action-button--delete,
.site-action-button--disabled {
  width: 34px;
  min-width: 34px;
  padding-right: 0;
  padding-left: 0;
}

.site-action-button:focus-visible {
  outline: 3px solid rgba(230, 126, 34, 0.34);
  outline-offset: 2px;
}

.site-action-button--preview {
  color: #334155;
}

.site-action-button--preview:hover {
  border-color: #FDBA74;
  background: #FFF7ED;
  color: var(--color-primary-dark);
}

.site-action-button--admin {
  border-color: #FDBA74;
  background: #FFF7ED;
  color: #C2410C;
}

.site-action-button--admin:hover {
  border-color: #FB923C;
  background: #FFEDD5;
  color: #9A3412;
}

.site-action-button--delete {
  border-color: transparent;
  background: #FEE2E2;
  color: #B91C1C;
}

.site-action-button--delete:hover,
.site-action-button--delete.is-strong {
  background: #DC2626;
  color: #fff;
}

.site-action-button--cancel {
  color: #374151;
}

.site-action-button--cancel:hover {
  background: #F9FAFB;
  color: #111827;
}

.site-action-button--disabled {
  border-style: dashed;
  color: #9CA3AF;
  cursor: not-allowed;
}

.site-delete-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.48);
}

.site-delete-overlay.is-active {
  display: flex;
}

.site-delete-modal {
  width: min(440px, 100%);
  padding: 28px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.24);
  text-align: center;
}

.site-delete-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: #FEE2E2;
  color: #DC2626;
  font-size: 20px;
}

.site-delete-modal__title {
  margin: 0 0 8px;
  color: #111827;
  font-size: 18px;
  font-weight: 700;
}

.site-delete-modal__desc {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 20px;
  color: #6B7280;
  font-size: 13px;
  line-height: 1.7;
  word-break: keep-all;
}

.site-delete-modal__desc strong {
  display: block;
  margin-bottom: 2px;
  color: #111827;
  font-size: 15px;
  line-height: 1.45;
}

.site-delete-modal__desc span {
  display: block;
}

.site-delete-modal__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .site-list-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-status-filter {
    justify-content: flex-start;
  }
}

/* ========================================
   DASHBOARD HOME: SUN内の作業状況と次アクション
   最終カンプ準拠: 枠は1階層 / オレンジ=操作できる場所 / 状態・スコアは意味色ピル
   ======================================== */

.dashboard-home {
  --dash-ink: #1F2937;
  --dash-muted: #6B7280;
  --dash-faint: #9CA3AF;
  --dash-line: #E5E7EB;
  --dash-soft: #F9FAFB;
  --dash-primary: var(--color-primary, #E67E22);
  --dash-primary-dark: var(--color-primary-dark, #C05F0E);
  --dash-tint: #FDEEDC;
  --dash-tint-soft: #FFF7ED;
  --dash-tint-line: #F3D8B8;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dashboard-home,
.dashboard-home * {
  box-sizing: border-box;
}

.dashboard-home a:focus-visible,
.dashboard-home button:focus-visible {
  outline: 3px solid rgba(230, 126, 34, 0.32);
  outline-offset: 3px;
}

/* ページ見出し: カードに入れず余白の上に置く */
.dashboard-phead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.dashboard-phead h1 {
  margin: 0;
  color: var(--dash-ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
}

.dashboard-phead__date {
  color: var(--dash-muted);
  font-size: 12.5px;
}

/* カード基本形: 白＋薄枠＋ごく薄い影の1階層だけ。中の小箱は作らない */
.dashboard-panel {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--dash-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.dashboard-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.dashboard-panel__title {
  margin: 0;
  color: var(--dash-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

/* 一覧導線(すべて見る): オレンジ=操作できる場所 */
.dashboard-text-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  color: var(--color-primary-dark, #C05F0E);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}

.dashboard-text-link i {
  font-size: 11px;
}

.dashboard-text-link:hover {
  color: #A85408;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 集計カード: ラベル＋数字のみ・カード全体がリンク */
.dashboard-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-metric {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  padding: 18px 20px 16px;
  border: 1px solid var(--dash-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.16s ease;
}

.dashboard-metric:hover {
  border-color: #D2D6DC;
}

.dashboard-metric__label {
  color: var(--dash-muted);
  font-size: 12px;
  font-weight: 600;
}

.dashboard-metric__value {
  color: var(--dash-ink);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.dashboard-metric__go {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--dash-tint);
  color: var(--dash-primary-dark);
  font-size: 12px;
}

.dashboard-metric:hover .dashboard-metric__go {
  background: var(--dash-primary);
  color: #fff;
}

/* サイトの状態: 制作中合計と内訳を同じ面に載せ、公開済みだけ緑面で分離 */
.dashboard-status-flow {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.dashboard-status-group {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 26px;
  padding: 13px 22px;
  border-radius: 10px;
  background: #F3F4F6;
}

.dashboard-status-group__main {
  display: block;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}

.dashboard-status-group__label,
.dashboard-status-cell__label {
  display: block;
  color: var(--dash-muted);
  font-size: 12px;
  font-weight: 600;
}

.dashboard-status-group__value {
  display: block;
  color: var(--dash-ink);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.dashboard-status-group__divider {
  width: 1px;
  align-self: stretch;
  background: #D8DCE2;
}

.dashboard-status-cells {
  display: flex;
  gap: 10px;
}

.dashboard-status-cell {
  display: block;
  padding: 5px 14px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}

.dashboard-status-cell:hover {
  background: #fff;
}

.dashboard-status-cell__label {
  font-size: 11.5px;
}

.dashboard-status-cell__count {
  display: block;
  color: var(--dash-ink);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.dashboard-status-cell--zero .dashboard-status-cell__count {
  color: var(--dash-faint);
}

.dashboard-status-pub {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  padding: 13px 26px;
  border-radius: 10px;
  background: #DCFCE7;
  color: inherit;
  text-decoration: none;
}

.dashboard-status-pub:hover {
  background: #CBF3D9;
}

.dashboard-status-pub__label {
  display: block;
  color: #15803D;
  font-size: 12px;
  font-weight: 600;
}

.dashboard-status-pub__value {
  display: block;
  color: #16A34A;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* 次にやること / 新しく始める の2カラム */
.dashboard-cols {
  display: grid;
  align-items: stretch;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
  gap: 12px;
}

/* 行リスト: 枠付き小箱ではなく、余白＋内側罫線で区切る */
.dashboard-next-list {
  display: flex;
  flex-direction: column;
}

.dashboard-next {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 12px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

.dashboard-next:hover {
  background: var(--dash-soft);
}

.dashboard-next + .dashboard-next::before {
  content: "";
  position: absolute;
  top: 0;
  right: 12px;
  left: 12px;
  height: 1px;
  background: var(--dash-line);
}

.dashboard-next__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--dash-tint);
  color: var(--dash-primary-dark);
}

.dashboard-next__icon--small {
  width: 34px;
  height: 34px;
}

.dashboard-next__body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.dashboard-next__body strong {
  color: var(--dash-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.dashboard-next__body span {
  margin-top: 1px;
  color: var(--dash-muted);
  font-size: 12.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.dashboard-next__chevron {
  flex: none;
  color: var(--dash-primary-dark);
  font-size: 12px;
}

.dashboard-next:hover .dashboard-next__chevron {
  color: #A85408;
}

/* 最近の案件: クライアント｜サイト制作｜診断 の2ゾーン表 */
.dashboard-table-wrap {
  overflow-x: auto;
}

.dashboard-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.dashboard-table th {
  padding: 10px 20px;
  border-bottom: 1px solid var(--dash-line);
  color: var(--dash-faint);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: left;
  white-space: nowrap;
}

.dashboard-table td {
  padding: 13px 20px;
  border-bottom: 1px solid var(--dash-line);
  color: var(--dash-muted);
  vertical-align: middle;
  white-space: nowrap;
}

.dashboard-table tr:last-child td {
  border-bottom: 0;
}

.dashboard-table tbody tr:hover {
  background: var(--dash-soft);
}

.dashboard-table .is-sep {
  border-left: 1px solid var(--dash-line);
}

.dashboard-table__name,
.dashboard-table__title {
  color: var(--dash-ink);
  font-weight: 700;
}

.dashboard-table__title {
  text-decoration: none;
}

.dashboard-table__title:hover {
  color: var(--dash-primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dashboard-zone {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

.dashboard-zone__date {
  color: var(--dash-muted);
  font-size: 12.5px;
}

.dashboard-zone__none {
  color: var(--dash-faint);
  font-size: 12.5px;
  font-weight: 600;
}

.dashboard-table-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: -1px;
  padding-top: 13px;
  border-top: 1px solid var(--dash-line);
  color: var(--dash-muted);
  font-size: 12.5px;
}

/* 詳細導線ボタン: プレビューと同形に統一（薄オレンジ地＋オレンジ文字） */
.dashboard-mini-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid #F3D8B8;
  border-radius: 8px;
  background: #FFF7ED;
  color: var(--color-primary-dark, #C05F0E);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.dashboard-mini-button i {
  font-size: 12px;
}

.dashboard-mini-button:hover {
  border-color: #E7B888;
  background: #FBEAD6;
  color: var(--color-primary-dark, #C05F0E);
}

/* 副アクション: 1行に複数ボタンが並ぶ画面では、主ボタンだけオレンジを持たせる */
.dashboard-mini-button.is-quiet {
  border-color: #E5E7EB;
  background: #fff;
  color: #6B7280;
}

.dashboard-mini-button.is-quiet:hover {
  border-color: #E7B888;
  background: #FFF7ED;
  color: var(--color-primary-dark, #C05F0E);
}

/* 状態バッジ: 色は意味があるところだけ（グレー=下書き/緑=完了/黄=注意/赤=要改善・エラー） */
.dashboard-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 24px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.dashboard-badge.is-muted {
  background: #F3F4F6;
  color: #4B5563;
}

.dashboard-badge.is-progress {
  background: #FEF3C7;
  color: #92400E;
}

.dashboard-badge.is-info {
  background: #F3F4F6;
  color: #4B5563;
}

.dashboard-badge.is-success {
  background: #DCFCE7;
  color: #166534;
}

.dashboard-badge.is-warning {
  background: #FEF9C3;
  color: #854D0E;
}

.dashboard-badge.is-danger {
  background: #FEE2E2;
  color: #B91C1C;
}

/* 診断スコアピル */
.dashboard-score {
  display: inline-flex;
  align-items: baseline;
  flex: none;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dashboard-score small {
  margin-left: 1px;
  color: inherit;
  font-size: 11px;
  font-weight: 700;
}

.dashboard-score.is-muted {
  background: #F3F4F6;
  color: #6B7280;
}

.dashboard-score.is-success {
  background: #DCFCE7;
  color: #166534;
}

.dashboard-score.is-warning {
  background: #FEF9C3;
  color: #854D0E;
}

.dashboard-score.is-danger {
  background: #FEE2E2;
  color: #B91C1C;
}

/* 空状態と汎用ボタン */
.dashboard-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.dashboard-button--primary {
  background: var(--dash-primary);
  color: #fff;
}

.dashboard-button--primary:hover {
  background: var(--dash-primary-dark);
  color: #fff;
}

.dashboard-button--secondary {
  border-color: var(--dash-tint-line);
  background: var(--dash-tint-soft);
  color: var(--dash-primary-dark);
}

.dashboard-button--secondary:hover {
  border-color: #E7B888;
  background: #FBEAD6;
  color: var(--dash-primary-dark);
}

.dashboard-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px dashed #CBD5E1;
  border-radius: 10px;
  background: var(--dash-soft);
  color: var(--dash-muted);
}

.dashboard-empty i {
  flex: none;
  color: var(--dash-primary);
  font-size: 20px;
}

.dashboard-empty div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.dashboard-empty strong {
  color: var(--dash-ink);
  font-size: 14px;
}

.dashboard-empty span {
  font-size: 13px;
  line-height: 1.6;
}

.dashboard-empty--compact {
  align-items: flex-start;
  padding: 14px;
}

@media (max-width: 1100px) {
  .dashboard-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-cols {
    grid-template-columns: 1fr;
  }

  .dashboard-status-flow {
    flex-direction: column;
  }

  .dashboard-status-group {
    flex-wrap: wrap;
    gap: 14px 22px;
  }

  .dashboard-status-group__divider {
    display: none;
  }

  .dashboard-status-pub {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .l-main:has(.dashboard-home) {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .l-main:has(.dashboard-home) .l-container,
  .dashboard-home {
    min-width: 0;
    max-width: calc(100vw - 32px);
    width: calc(100vw - 32px);
  }

  .dashboard-home {
    gap: 14px;
    margin: 0;
  }

  .dashboard-home > * {
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }

  .dashboard-summary {
    grid-template-columns: 1fr;
  }

  .dashboard-panel {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    padding: 16px;
  }

  .dashboard-panel__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-metric__value {
    font-size: 28px;
  }

  .dashboard-status-cells {
    flex-wrap: wrap;
  }

  .dashboard-next {
    align-items: flex-start;
  }

  .dashboard-next__body strong,
  .dashboard-next__body span {
    white-space: normal;
  }

  .dashboard-table {
    min-width: 720px;
  }

  .dashboard-table th,
  .dashboard-table td {
    padding: 11px 14px;
  }

  .dashboard-table-foot {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}

/* ========================================
   SITE ASSESSMENT FLOW: diagnosis -> proposal -> site generation
   Generator/SiteAssessments 専用。診断結果の読み順と主導線を整える。
   ======================================== */

.assessment-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

.assessment-flow__step {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  background: #fff;
  color: #64748B;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.assessment-flow__step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #F1F5F9;
  color: #64748B;
  font-size: 11px;
}

.assessment-flow__step.is-active {
  border-color: rgba(249, 115, 22, 0.32);
  background: #FFF7ED;
  color: #9A3412;
}

.assessment-flow__step.is-active span {
  background: #F97316;
  color: #fff;
}

.assessment-flow__step.is-complete {
  border-color: rgba(16, 185, 129, 0.24);
  background: #F0FDF4;
  color: #166534;
}

.assessment-flow__step.is-complete span {
  background: #10B981;
  color: #fff;
}

.assessment-report-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 2px solid #CBD5E1;
}

.assessment-report-title {
  flex: 1 1 320px;
  min-width: 0;
}

.assessment-report-title h1 {
  margin: 0;
  color: #0F172A;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.35;
}

.assessment-report-title span {
  display: inline-block;
  color: #64748B;
  font-size: 1.05rem;
  font-weight: 700;
}

.assessment-report-title p {
  margin: 8px 0 0;
  color: #64748B;
  font-size: 13px;
  font-weight: 700;
}

.assessment-report-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.assessment-report-actions .c-btn {
  min-height: 42px;
}

.assessment-next-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  background: #F9FAFB;
  color: #4B5563;
  font-size: 13px;
  line-height: 1.7;
}

.assessment-next-hint i {
  flex: none;
  margin-top: 3px;
  color: #E67E22;
}

@media (max-width: 900px) {
  .assessment-flow {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .assessment-flow {
    grid-template-columns: 1fr;
  }

  .assessment-report-hero {
    flex-direction: column;
  }

  .assessment-report-title h1 {
    font-size: 1.7rem;
  }

  .assessment-report-actions {
    width: 100%;
    justify-content: stretch;
  }

  .assessment-report-actions .c-btn {
    flex: 1 1 100%;
    justify-content: center;
    white-space: normal !important;
  }
}

/* ========================================
   ASSESSMENT LIST: 診断一覧（最終カンプ準拠）
   ピル/ミニボタンはダッシュボードの共通クラス
   (.dashboard-badge / .dashboard-score / .dashboard-mini-button) を再利用する。
   ======================================== */

.assessment-list .assessment-index-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.assessment-index-header .c-page-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.assessment-list .assessment-new-button {
  min-height: 40px;
}

/* 検索ツールバー: カードにせず表の直上に1行で置く */
.assessment-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  margin-bottom: 12px;
}

.assessment-topbar[hidden] {
  display: none;
}

.assessment-search {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.assessment-search > div,
.assessment-search .input {
  flex: 1;
  max-width: 400px;
}

.assessment-search .c-input {
  width: 100%;
  min-height: 40px;
}

.assessment-search .c-input:focus-visible {
  outline: 3px solid rgba(230, 126, 34, 0.28);
  outline-offset: 2px;
}

.assessment-search__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 18px;
  border: 1px solid #F3D8B8;
  border-radius: 10px;
  background: #FFF7ED;
  color: var(--color-primary-dark, #C05F0E);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.assessment-search__btn:hover {
  border-color: #E7B888;
  background: #FBEAD6;
}

.assessment-count {
  flex: none;
  margin-left: auto;
  color: #6B7280;
  font-size: 12.5px;
}

/* 一括操作バー: 行を選択した時だけ検索バーの行と入れ替わりで表示 */
.assessment-selbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  margin-bottom: 12px;
  padding: 6px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.assessment-selbar[hidden] {
  display: none;
}

.assessment-selbar b {
  color: #1F2937;
  font-size: 13px;
}

.assessment-selbar__spacer {
  flex: 1;
}

.assessment-ghost-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #fff;
  color: #6B7280;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.assessment-ghost-button:hover {
  border-color: #D2D6DC;
  color: #1F2937;
}

.assessment-danger-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid #F5C6C6;
  border-radius: 8px;
  background: #FEF2F2;
  color: #B91C1C;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.assessment-danger-button:hover {
  border-color: #EBA3A3;
  background: #FCE4E4;
}

.assessment-danger-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* 一覧テーブル */
.assessment-card {
  padding: 0;
  overflow: hidden;
}

.assessment-table-wrap {
  /* 幅が足りない時はカードの中だけ横スクロールし、ページ全体は横に流さない */
  overflow-x: auto;
}

.assessment-table {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
  font-size: 13.5px;
  table-layout: fixed;
}

.assessment-table th {
  padding: 11px 10px;
  border-bottom: 1px solid #E5E7EB;
  background: #fff;
  color: #9CA3AF;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: left;
  white-space: nowrap;
}

.assessment-table td {
  padding: 11px 10px;
  border-bottom: 1px solid #E5E7EB;
  color: #6B7280;
  vertical-align: middle;
  white-space: nowrap;
}

.assessment-table th:first-child,
.assessment-table td:first-child {
  width: 44px;
  padding-left: 18px;
}

.assessment-table th:last-child,
.assessment-table td:last-child {
  padding-right: 18px;
}

.assessment-table tr:last-child td {
  border-bottom: 0;
}

.assessment-table tbody tr:hover {
  background: #F9FAFB;
}

.assessment-table th a {
  color: #9CA3AF;
  text-decoration: none;
}

.assessment-table th a::after {
  content: "\f0dc";
  margin-left: 5px;
  color: #C4C9D0;
  font-family: "Font Awesome 6 Free";
  font-size: 10px;
  font-weight: 900;
}

.assessment-table th a:hover {
  color: #1F2937;
}

.assessment-table th a.asc,
.assessment-table th a.desc {
  color: #1F2937;
}

.assessment-table th a.asc::after {
  content: "\f0de";
  color: #1F2937;
}

.assessment-table th a.desc::after {
  content: "\f0dd";
  color: #1F2937;
}

.assessment-table__title {
  display: block;
  overflow: hidden;
  color: #1F2937;
  font-weight: 700;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assessment-table__title:hover {
  color: var(--color-primary-dark, #C05F0E);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.assessment-row-check {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid #D2D6DC;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  vertical-align: middle;
}

.assessment-row-check:hover {
  border-color: var(--color-primary, #E67E22);
}

.assessment-row-check:focus-visible {
  outline: 3px solid rgba(230, 126, 34, 0.28);
  outline-offset: 2px;
}

.assessment-row-check:checked,
.assessment-row-check:indeterminate {
  border-color: var(--color-primary, #E67E22);
  background-color: var(--color-primary, #E67E22);
}

.assessment-row-check:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 5 5 9-12'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 11px;
}

.assessment-row-check:indeterminate::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 3px;
  left: 3px;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: #fff;
}

.assessment-url a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #6B7280;
  font-size: 12.5px;
  text-decoration: none;
}

.assessment-url a span {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assessment-url a:hover {
  color: #1F2937;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.assessment-url i {
  color: #9CA3AF;
  font-size: 10px;
}

.assessment-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.assessment-actions .dashboard-mini-button {
  padding: 5px 9px;
}

/* スコアピル内のラベル（49点 要対応 の「要対応」部分） */
.dashboard-score em {
  margin-left: 6px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.assessment-none {
  color: #9CA3AF;
}

/* テーブルフッター: 件数・ページネーション・スコア凡例を1箇所に */
.assessment-table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid #E5E7EB;
  color: #6B7280;
  font-size: 12.5px;
}

.assessment-table-foot__left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.assessment-legend {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #9CA3AF;
  font-size: 11.5px;
}

.assessment-legend span {
  display: inline-flex;
  align-items: center;
}

.assessment-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
}

.assessment-legend .is-good i {
  background: #16A34A;
}

.assessment-legend .is-watch i {
  background: #EAB308;
}

.assessment-legend .is-risk i {
  background: #DC2626;
}

/* ページネーション（診断一覧） */
.assessment-list .pagination {
  display: inline-flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.assessment-list .pagination li a,
.assessment-list .pagination li span {
  display: block;
  padding: 6px 10px;
  border-radius: 8px;
  color: #6B7280;
  font-size: 12.5px;
  text-decoration: none;
}

.assessment-list .pagination li a:hover {
  background: #F3F4F6;
  color: #1F2937;
}

.assessment-list .pagination li.active span {
  background: var(--color-primary, #E67E22);
  color: #fff;
}

/* 空状態 */
.assessment-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.assessment-empty__title {
  margin: 0 0 4px;
  color: #1F2937;
  font-size: 16px;
  font-weight: 700;
}

.assessment-empty__text {
  margin: 0;
  color: #6B7280;
  font-size: 13px;
  line-height: 1.7;
}

/* CSV操作メニュー */
.data-csv-menu {
  position: relative;
  z-index: 20;
}

.data-csv-menu__summary {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  background: #fff;
  color: #1F2937;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.data-csv-menu__summary::-webkit-details-marker {
  display: none;
}

.data-csv-menu__summary::after {
  content: "\f107";
  margin-left: 4px;
  color: #9CA3AF;
  font-family: "Font Awesome 6 Free";
  font-size: 12px;
  font-weight: 900;
}

.data-csv-menu__summary:hover {
  border-color: #D2D6DC;
  background: #F9FAFB;
}

.data-csv-menu[open] .data-csv-menu__summary {
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.data-csv-menu[open] .data-csv-menu__summary::after {
  content: "\f106";
}

.data-csv-menu__summary:focus-visible,
.data-csv-import__file:focus-within,
.data-csv-import__button:focus-visible {
  outline: 3px solid rgba(232, 101, 42, 0.28);
  outline-offset: 3px;
}

.data-csv-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 360px;
  padding: 14px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
}

.data-csv-menu__title {
  margin: 0 0 4px;
  color: #1F2937;
  font-size: 13px;
  font-weight: 800;
}

.data-csv-menu__desc {
  margin: 0 0 12px;
  color: #6B7280;
  font-size: 12px;
  line-height: 1.6;
}

.data-csv-menu__export {
  justify-content: center;
  width: 100%;
  margin-bottom: 12px;
}

.data-csv-menu__divider {
  height: 1px;
  margin: 0 0 12px;
  background: #E5E7EB;
}

.data-csv-import {
  display: grid;
  gap: 8px;
  margin: 0;
}

.data-csv-import input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.data-csv-import__file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  gap: 10px;
  padding: 0 12px;
  border: 1px dashed #CBD5E1;
  border-radius: 8px;
  background: #F8FAFC;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.data-csv-import__file:hover {
  border-color: #94A3B8;
  background: #F1F5F9;
}

.data-csv-import__filename {
  overflow: hidden;
  color: #64748B;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-csv-import__button {
  justify-content: center;
  width: 100%;
}

.data-csv-import__button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

@media (max-width: 768px) {
  .assessment-list .assessment-index-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .assessment-topbar {
    flex-wrap: wrap;
  }

  .assessment-count {
    width: 100%;
    margin-left: 0;
  }

  .assessment-table-foot {
    align-items: flex-start;
    flex-direction: column;
  }
}