/* DESIGN.md準拠 CSS変数 */
:root {
  /* 背景 */
  --bg-primary: #FFF8E7;
  --bg-card: #FFFFFF;
  --bg-selected: #E0F2F1;
  --bg-hover: #E8F5F3;
  --bg-overlay: rgba(0, 0, 0, 0.4);

  /* テキスト */
  --text-primary: #212121;
  --text-secondary: #757575;
  --text-accent: #00897B;

  /* ボーダー */
  --border-default: #E0E0E0;
  --border-active: #00897B;

  /* アクセント */
  --accent-primary: #00897B;
  --accent-hover: #00796B;
  --accent-success: #43A047;
  --accent-warning: #FFA000;
  --accent-danger: #E53935;
  --accent-disabled: #BDBDBD;

  /* 角丸 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 24px;

  /* フォント */
  --font-jp: "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-num: "Roboto", "SF Pro", sans-serif;

  /* サイドバー */
  --sidebar-width: 260px;
}

/* 基本スタイル */
body {
  font-family: var(--font-jp);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
}

/* プライマリボタン */
.btn-primary {
  background-color: var(--accent-primary);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

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

.btn-primary:disabled {
  background-color: var(--accent-disabled);
  cursor: not-allowed;
}

/* セカンダリボタン */
.btn-secondary {
  background-color: transparent;
  color: var(--accent-primary);
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.btn-secondary:hover {
  background-color: var(--bg-selected);
}

/* カード */
.card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

@media (min-width: 768px) {
  .card {
    padding: 16px 20px;
  }
}

/* レスポンシブ：サイドバー */
.sidebar {
  position: fixed;
  top: 0;
  left: -280px;
  width: var(--sidebar-width);
  height: 100vh;
  background-color: var(--bg-card);
  transition: left 0.3s ease;
  z-index: 1000;
}

.sidebar.open {
  left: 0;
}

@media (min-width: 768px) {
  .sidebar {
    left: 0;
  }

  .main-content {
    margin-left: var(--sidebar-width);
  }
}

/* オーバーレイ */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-overlay);
  z-index: 999;
  display: none;
}

.overlay.active {
  display: block;
}