/* ==========================================
   1. Design Tokens（カラー・フォント）
========================================== */
:root {
  /* Colors */
  --cl-bg-body: #FDFCF8;
  --cl-text-main: #333;
  --cl-text-accent: #5A4D42;
  --cl-primary: #E88E23;
  --cl-green: #8BA864;

  /* Fonts */
  --font-serif: "Shippori Mincho", serif;
  --font-sans: "Zen Kaku Gothic New", sans-serif;

  /* Radius */
  --card-radius: 12px;
}

/* ==========================================
   2. Base Styles（全体共通）
========================================== */
body {
  background-color: var(--cl-bg-body);
  color: var(--cl-text-main);
  font-family: var(--font-sans);
}

/* 画像の共通設定 */
img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}

/* ==========================================
   3. Utility / Accessibility
========================================== */
/* アクセシビリティ・SEO 用隠しテキスト */
.kininaru-header-tagline {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================
   4. Components
========================================== */

/* Topic Badge */
.topic-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: bold;
  border: 1px solid var(--topic-color);
  color: var(--topic-color);
}

/* SNS Circle Icon */
.sns-circle {
  transition: background-color 0.2s ease;
}

.sns-circle:hover {
  background-color: rgb(74 59 42 / var(--tw-bg-opacity, 1));
}

.sns-circle:hover .sns-icon {
  filter: brightness(0) invert(1);
}

/* =========================
   Vertical Writing（縦書き）
========================= */
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.15em;
}

.vertical-text.tight {
  letter-spacing: 0.05em;
}