/* 日本の暦 - 落ち着いた華やかデザイン */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #faf9f7;
  --card: #ffffff;
  --card2: #f7f5f2;
  --border: #e5e0d8;
  --accent: #9b6b4a;
  --accent-dark: #7a5438;
  --gold: #c4a35a;
  --text: #3a3530;
  --text2: #5a554d;
  --text3: #8a857d;
  --red: #c45c5c;
  --blue: #5a7a9a;
  --shadow: 0 2px 12px rgba(0,0,0,0.06);
  --card-opacity: 0.95;
}

/* ダークモード */
[data-theme="dark"] {
  --bg: #1a1815;
  --card: #252220;
  --card2: #2d2a27;
  --border: #3d3935;
  --accent: #c4956a;
  --accent-dark: #a87d58;
  --gold: #d4b36a;
  --text: #e8e4e0;
  --text2: #b8b4b0;
  --text3: #888480;
  --red: #e07070;
  --blue: #7a9aba;
  --shadow: 0 2px 12px rgba(0,0,0,0.3);
  --card-opacity: 0.92;
}

/* 二十四節気背景 */
#sekki-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s ease;
}
#sekki-background.loaded {
  opacity: 1;
}
#sekki-background::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
[data-theme="dark"] #sekki-background::after {
  opacity: 0.88;
}

/* 節気情報バッジ */
.sekki-badge {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 50;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.7;
  transition: opacity 0.3s;
}
.sekki-badge:hover {
  opacity: 1;
}
.sekki-badge-icon {
  font-size: 14px;
}
.sekki-badge-text {
  letter-spacing: 0.05em;
}

body {
  font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.9;
  min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* テーマ切り替えボタン */
.theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  font-size: 20px;
}
.theme-toggle:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.1);
}
.theme-toggle:hover .theme-icon {
  filter: brightness(10);
}
.theme-icon {
  transition: transform 0.3s ease;
}
[data-theme="dark"] .theme-icon-light {
  display: none;
}
[data-theme="dark"] .theme-icon-dark {
  display: inline;
}
.theme-icon-dark {
  display: none;
}
[data-theme="dark"] .theme-icon-dark {
  display: inline;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 16px 60px;
  perspective: 1000px;
}

/* ヘッダー */
header {
  text-align: center;
  margin-bottom: 24px;
  padding: 36px 20px;
  background: rgba(155, 107, 74, 0.95);
  border-radius: 12px;
  position: relative;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="dark"] header {
  background: linear-gradient(135deg, rgba(168, 125, 88, 0.9) 0%, rgba(61, 45, 32, 0.95) 100%);
}
header::after {
  content: '';
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: var(--gold);
}
header .sub {
  font-size: 11px;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 8px;
}
header h1 {
  font-size: 28px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 8px;
}

/* カード */
.card {
  background: rgba(255, 255, 255, var(--card-opacity));
  border-radius: 12px;
  padding: 28px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  transition: background-color 0.3s ease, border-color 0.3s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="dark"] .card {
  background: rgba(37, 34, 32, var(--card-opacity));
}

/* ヒーロー */
.hero {
  background: var(--card);
  text-align: center;
  padding: 28px 20px;
  border-top: 3px solid var(--accent);
  position: relative;
  transition: box-shadow 0.2s ease;
  border-radius: 12px 12px 0 12px; /* 右下だけ角なし */
}

/* 日めくりアニメーション - カードが落下する */
.hero.flipping {
  animation: cardFall 0.4s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
.hero.flipping-in {
  animation: cardRise 0.35s cubic-bezier(0, 0.55, 0.45, 1) forwards;
}

@keyframes cardFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  30% {
    transform: translateY(10px) rotate(1deg);
    opacity: 1;
  }
  100% {
    transform: translateY(120%) rotate(3deg);
    opacity: 0;
  }
}

@keyframes cardRise {
  0% {
    transform: translateY(-30px) scale(0.98);
    opacity: 0;
  }
  70% {
    transform: translateY(3px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* 今日ボタン用 */
.hero.flip-today {
  animation: todayBounce 0.4s ease-out;
}

@keyframes todayBounce {
  0% { transform: scale(1); }
  30% { transform: scale(0.95) translateY(5px); }
  60% { transform: scale(1.02) translateY(-3px); }
  100% { transform: scale(1) translateY(0); }
}

/* ===== 角めくりUI ===== */
.page-curl {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70px;
  height: 70px;
  cursor: pointer;
  z-index: 10;
}

/* めくれた角 */
.curl-fold {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--card2) 0%, var(--border) 100%);
  border-top-left-radius: 10px;
  box-shadow: 
    -3px -3px 6px rgba(0,0,0,0.1),
    inset 2px 2px 4px rgba(255,255,255,0.5);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 8px;
  padding-left: 8px;
}

/* めくるテキスト */
.curl-fold::after {
  content: 'めくる';
  font-size: 10px;
  color: var(--accent);
  font-family: 'Shippori Mincho', serif;
  writing-mode: vertical-rl;
  letter-spacing: 0.1em;
}

/* 影（めくれた下の影） */
.curl-shadow {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, 
    transparent 0%, 
    transparent 45%, 
    rgba(0,0,0,0.05) 45%, 
    rgba(0,0,0,0.1) 100%);
  pointer-events: none;
  z-index: -1;
}

/* ホバー時 - めくりが大きくなる */
.page-curl:hover .curl-fold {
  width: 75px;
  height: 75px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--accent) 100%);
  box-shadow: 
    -4px -4px 10px rgba(0,0,0,0.15),
    inset 2px 2px 4px rgba(255,255,255,0.3);
}

.page-curl:hover .curl-fold::after {
  color: #fff;
}

/* アクティブ時 */
.page-curl:active .curl-fold {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
}

/* ちょっと揺れるアニメーションで注目させる */
@keyframes curlHint {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-2px, -2px); }
  75% { transform: translate(1px, 1px); }
}

.curl-fold {
  animation: curlHint 3s ease-in-out infinite;
}

/* ===== 縦書き日付エリア ===== */
.tate-date-area {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 16px;
  /* HTMLでday, month, yearの順 → 画面上で左から日・月・年 → 右から読むと年・月・日 ✓ */
}
.tate-col {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: 'Shippori Mincho', serif;
  letter-spacing: 0.1em;
}
.tate-year {
  font-size: 20px;
  color: var(--text2);
}
.tate-month {
  font-size: 28px;
  color: var(--text);
  font-weight: 500;
}
.tate-day {
  font-size: 36px;
  color: var(--accent);
  font-weight: 600;
}

/* 曜日・六曜行 */
.hero-weekday-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.hero-weekday {
  font-size: 16px;
  color: var(--text2);
  font-weight: 500;
}
.hero-weekday.sun { color: var(--red); }
.hero-weekday.sat { color: var(--blue); }

/* 六曜・祝日 */
.rokuyo {
  background: var(--card2);
  color: var(--text2);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 13px;
}
.holiday {
  background: rgba(196, 163, 90, 0.15);
  color: var(--gold);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 13px;
}

/* 月のイベント */
.moon-events {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.moon-event-tag {
  background: var(--text);
  color: #ffffff;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 14px;
}

/* ===== 縦書き旧暦エリア ===== */
.tate-lunar-area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 20px 0;
  padding: 16px;
  background: var(--card2);
  border-radius: 8px;
  /* 右から読む：月齢が左、旧暦が右 */
}
.tate-lunar-col {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 16px;
  color: var(--text);
  letter-spacing: 0.15em;
}
.tate-lunar-item {
  text-align: center;
}
.moon-icon {
  font-size: 28px;
  margin-bottom: 4px;
}
.lunar-val {
  font-size: 13px;
  color: var(--text2);
}

/* ===== 和風月名（旧暦セクション内） ===== */
.tate-wafu-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tate-wafu-name {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.1em;
}
.tate-wafu-yomi {
  writing-mode: vertical-rl;
  font-size: 11px;
  color: var(--text3);
  letter-spacing: 0.05em;
}

/* ===== 縦書き干支エリア ===== */
.tate-kanshi-area {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 16px 0;
  /* HTMLでday, month, yearの順 → 画面上で左から日・月・年 → 右から読むと年・月・日 ✓ */
}
.tate-kanshi-item {
  background: transparent;
  border: none;
  padding: 12px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
}
/* 年干支（最後）のアクセント - 枠なし */
.tate-kanshi-item:last-child {
  /* アクセントなし */
}
.tate-kanshi-val {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.1em;
  margin: 0 auto 8px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tate-kanshi-label {
  font-size: 11px;
  color: var(--text3);
}
/* セクション */
.section { 
  margin-bottom: 28px;
  text-align: center;
}
.section:last-child { margin-bottom: 0; }
.section h3 {
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
  padding-left: 16px;
  padding-right: 16px;
}

/* 二十四節気 */
.sekki-box {
  text-align: center;
  padding: 28px;
  background: var(--card2);
  border-radius: 10px;
}
.sekki-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
}
.sekki-icon svg {
  width: 100%;
  height: 100%;
}
.sekki-name {
  font-size: 28px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 4px;
}
.sekki-reading {
  font-size: 13px;
  color: var(--text3);
  margin-bottom: 12px;
}
.sekki-period {
  font-size: 14px;
  color: var(--text2);
  margin-bottom: 12px;
}
.sekki-summary {
  font-size: 16px;
  color: var(--text);
  margin-bottom: 12px;
  font-weight: 500;
}
.sekki-detail {
  font-size: 15px;
  color: var(--text2);
  line-height: 2;
  text-align: left;
}

/* 七十二候 */
.ko-image-wrap {
  position: relative;
  margin-bottom: 16px;
  border-radius: 10px;
  overflow: hidden;
}
.ko-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.ko-image.loading { opacity: 0.5; }
.ko-image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
}
.ko-sekki {
  color: #ffffff;
  font-size: 14px;
}
.ko-box {
  text-align: center;
  padding: 24px;
  background: var(--card2);
  border-radius: 10px;
}
.ko-name {
  font-size: 24px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 4px;
}
.ko-reading {
  font-size: 13px;
  color: var(--text3);
  margin-bottom: 12px;
}
.ko-summary {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 12px;
}
.ko-desc {
  font-size: 15px;
  color: var(--text2);
  line-height: 2;
  text-align: left;
}

/* 旬の食材・季節の花 */
.seasonal-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.seasonal-item {
  background: var(--card);
  padding: 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  text-align: left;
}
.seasonal-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 12px;
}
.seasonal-content {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.seasonal-tag {
  background: var(--card2);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
}
.seasonal-tag.food {
  background: #fef8f0;
  color: #8b6a3a;
}
.seasonal-tag.flower {
  background: #fef5f5;
  color: #9a5a5a;
}

/* 年中行事 */
.event-item {
  background: var(--card2);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 12px;
  border-left: 3px solid var(--gold);
  text-align: left;
}
.event-item:last-child { margin-bottom: 0; }
.event-name {
  font-size: 18px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 4px;
}
.event-reading {
  font-size: 13px;
  color: var(--text3);
  margin-bottom: 8px;
}
.event-desc {
  font-size: 15px;
  color: var(--text2);
  line-height: 1.9;
}

/* 運気診断 */
.fortune-input {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.fortune-input label {
  font-size: 14px;
  color: var(--text2);
}
.fortune-input input {
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  background: var(--card);
  color: var(--text);
}
.fortune-input input:focus {
  outline: none;
  border-color: var(--accent);
}
.fortune-input button {
  background: var(--gold);
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}
.fortune-input button:hover {
  background: var(--accent);
}
.fortune-result {
  display: none;
  background: var(--card2);
  border-radius: 10px;
  padding: 24px;
}
.fortune-result.show { display: block; }
.fortune-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.fortune-rank {
  font-size: 48px;
  line-height: 1;
}
.fortune-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--accent);
}
.fortune-subtitle {
  font-size: 14px;
  color: var(--text2);
  margin-top: 4px;
}
.fortune-detail {
  font-size: 15px;
  color: var(--text2);
  line-height: 2;
  margin-bottom: 16px;
}

/* 運気診断の日柱表示 */
.fortune-kanshi-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px 0;
}
.fortune-kanshi-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  text-align: center;
  min-width: 120px;
}
.fortune-kanshi-box.birth-kanshi {
  border-color: var(--gold);
  box-shadow: 0 2px 8px rgba(196, 163, 90, 0.15);
}
.fortune-kanshi-label {
  font-size: 11px;
  color: var(--text3);
  margin-bottom: 8px;
}
.fortune-kanshi-val {
  font-size: 28px;
  font-weight: 600;
  color: var(--accent);
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.05em;
  display: inline-block;
  margin-bottom: 6px;
}
.fortune-kanshi-gogyo {
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 8px;
}
.fortune-kanshi-link {
  display: inline-block;
  font-size: 11px;
  color: var(--gold);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--gold);
  border-radius: 4px;
  transition: all 0.2s;
}
.fortune-kanshi-link:hover {
  background: var(--gold);
  color: #fff;
}
.fortune-vs {
  font-size: 20px;
  color: var(--text3);
  font-weight: 300;
}

.fortune-advice {
  background: var(--card);
  padding: 16px;
  border-radius: 8px;
  border-left: 3px solid var(--gold);
}
.fortune-advice-label {
  font-size: 13px;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 8px;
}
#fortune-advice {
  font-size: 15px;
  color: var(--text);
  line-height: 1.9;
}

/* 六曜説明 */
.event-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 12px;
}

/* 記念日・誕生日 */
.events-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.events-list .event-item { margin-bottom: 0; }

/* カレンダー */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.calendar-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--accent);
}
.calendar-help-link {
  font-size: 13px;
  color: var(--text3);
  text-decoration: none;
  transition: color 0.2s;
}
.calendar-help-link:hover {
  color: var(--accent);
}
.calendar-nav {
  display: flex;
  gap: 8px;
}
.calendar-nav button {
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  transition: all 0.2s;
}
.calendar-nav button:hover {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border-radius: 10px;
  overflow: hidden;
  min-width: 600px;
}
/* カレンダー横スクロール対応 */
.calendar-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.calendar-grid::before {
  content: '日 月 火 水 木 金 土';
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 12px;
  padding: 12px 0;
  background: var(--accent);
  color: #ffffff;
  font-weight: 500;
}
.calendar-cell {
  background: var(--card);
  padding: 8px 6px;
  min-height: 100px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}
.calendar-cell:hover {
  background: var(--card2);
}
.calendar-cell.today {
  background: rgba(196, 163, 90, 0.1);
}
.calendar-cell.today::after {
  content: '今日';
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 8px;
  color: var(--gold);
}
.calendar-cell.selected {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.calendar-cell.other-month {
  background: var(--card2);
  opacity: 0.4;
}
.calendar-cell.new-moon { background: #f5f5f5; }
.calendar-cell.full-moon { background: #fffdf5; }
.calendar-cell.saikyo-day {
  background: linear-gradient(135deg, #fffef5 0%, #fff8dc 50%, #fffacd 100%);
  border: 2px solid #ffd700 !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
  animation: saikyo-cell-pulse 3s ease-in-out infinite;
}
@keyframes saikyo-cell-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); }
  50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
}
.cell-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2px;
}
.cell-day {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}
.cell-day.sun { color: var(--red); }
.cell-day.sat { color: var(--blue); }
.cell-moon-icon {
  font-size: 12px;
  opacity: 0.6;
}
.cell-rokuyo {
  font-size: 10px;
  color: var(--text2);
  margin: 2px 0;
}
.cell-rokuyo.taian {
  color: var(--red);
  font-weight: 500;
}
.cell-rokuyo.butsumetsu { color: var(--blue); }
.cell-rokuyo.shakko { color: var(--text3); }
.cell-lunar {
  font-size: 10px;
  color: var(--text3);
}
.lunar-first {
  color: var(--gold);
  font-weight: 500;
}
.cell-kanshi {
  font-size: 10px;
  color: var(--text3);
}
.cell-moon-event {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 2px;
  text-align: center;
}
.cell-moon-event.new {
  background: #e0e0e0;
  color: #555;
}
.cell-moon-event.full {
  background: var(--gold);
  color: #ffffff;
}
.cell-kichi-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 2px;
}
.cal-kichi {
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 3px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cal-kichi:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}
.cal-kichi.tensha {
  background: var(--gold);
  color: #ffffff;
}
.cal-kichi.ichiryu {
  background: var(--accent);
  color: #ffffff;
}
.cal-kichi.kaiun {
  background: #e8f0e8;
  color: #4a7a4a;
}
.cal-kichi.kinun {
  background: #fef8e8;
  color: #a08030;
}
.cal-kichi.super, .cal-kichi.lions {
  background: transparent;
  padding: 0;
  font-size: 10px;
}
.cal-kichi.kyo {
  background: #f8e8e8;
  color: #a04040;
}
.cal-kichi.saikyo {
  background: linear-gradient(135deg, #ffd700 0%, #ff8c00 50%, #ffd700 100%);
  color: #5a3000;
  font-weight: bold;
  animation: saikyo-glow 2s ease-in-out infinite;
  text-decoration: none;
}
@keyframes saikyo-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
  50% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 140, 0, 0.4); }
}

/* 最強開運日バナー（吉日セクション用） */
.saikyo-kaiun {
  margin-bottom: 12px;
}
.saikyo-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #ffd700 0%, #ff8c00 30%, #ffd700 50%, #ff8c00 70%, #ffd700 100%);
  background-size: 200% 200%;
  animation: saikyo-shine 3s ease-in-out infinite;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(255, 140, 0, 0.4);
}
@keyframes saikyo-shine {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.saikyo-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 140, 0, 0.6);
}
.saikyo-icon {
  font-size: 28px;
}
.saikyo-text {
  font-size: 20px;
  font-weight: bold;
  color: #5a3000;
  letter-spacing: 2px;
}
.saikyo-sub {
  font-size: 12px;
  color: #7a4a00;
  background: rgba(255,255,255,0.5);
  padding: 3px 10px;
  border-radius: 10px;
}

/* 吉日セクション */
.kichi-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kichi-category {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.kichi-label {
  font-size: 11px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 4px;
  background: #e8f0e8;
  color: #4a7a4a;
}
.kichi-label.gold {
  background: #fef8e8;
  color: #a08030;
}
.kichi-label.special {
  background: #e8e8f8;
  color: #6060a0;
}
.kichi-label.kyo {
  background: #f8e8e8;
  color: #a04040;
}
.kichijitsu-tag {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 12px;
  background: #e8f0e8;
  color: #4a7a4a;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.kichijitsu-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.kichijitsu-tag.active {
  background: #d0e8d0;
  color: #2a5a2a;
}
.kichijitsu-tag.active:hover {
  background: #b8d8b8;
}
.kichijitsu-tag.gold {
  background: #fef8e8;
  color: #a08030;
}
.kichijitsu-tag.gold:hover {
  background: #fdf0d0;
}
.kichijitsu-tag.special {
  background: #e8e8f8;
  color: #6060a0;
}
.kichijitsu-tag.kyo {
  background: #f8e8e8;
  color: #a04040;
}
.kichijitsu-tag.kyo:hover {
  background: #f0d8d8;
}

/* フッター */
footer {
  text-align: center;
  padding: 28px;
  color: var(--text3);
  font-size: 13px;
}
.footer-legal {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 20px;
}
.footer-legal a {
  color: var(--text3);
  text-decoration: none;
  font-size: 12px;
}
.footer-legal a:hover {
  color: var(--accent);
}

/* レスポンシブ - タブレット */
@media (max-width: 768px) {
  .container {
    padding: 12px 12px 40px;
  }
  header {
    padding: 24px 16px;
    margin-bottom: 16px;
  }
  header h1 { font-size: 24px; letter-spacing: 6px; }
  .card { padding: 20px; margin-bottom: 12px; }
  .hero { padding: 20px 16px; }
  .tate-date-area { gap: 16px; }
  .tate-year { font-size: 18px; }
  .tate-month { font-size: 24px; }
  .tate-day { font-size: 30px; }
  .tate-kanshi-area { gap: 12px; }
  .tate-kanshi-val { font-size: 20px; }
  .calendar-cell { min-height: 85px; }
}

/* レスポンシブ - スマートフォン */
@media (max-width: 480px) {
  .container {
    padding: 8px 8px 32px;
  }
  
  /* ヘッダーをコンパクトに */
  header {
    padding: 16px 12px 20px;
    margin-bottom: 10px;
    border-radius: 8px;
  }
  header::after {
    bottom: 8px;
    width: 40px;
  }
  header .sub {
    font-size: 9px;
    letter-spacing: 2px;
    margin-bottom: 4px;
  }
  header h1 {
    font-size: 18px;
    letter-spacing: 4px;
  }
  
  /* 角めくりをコンパクトに */
  .page-curl {
    width: 60px;
    height: 60px;
  }
  .curl-fold {
    width: 50px;
    height: 50px;
  }
  .curl-fold::after {
    font-size: 9px;
  }
  .page-curl:hover .curl-fold {
    width: 60px;
    height: 60px;
  }
  
  /* カードをコンパクトに */
  .card {
    padding: 16px 14px;
    margin-bottom: 10px;
    border-radius: 8px;
  }
  
  /* ヒーローセクション（縦書き）をコンパクトに */
  .hero {
    padding: 14px 12px;
    border-top-width: 2px;
  }
  .tate-date-area {
    gap: 12px;
    margin-bottom: 12px;
  }
  .tate-year { font-size: 14px; }
  .tate-month { font-size: 20px; }
  .tate-day { font-size: 26px; }
  
  .hero-weekday-row { gap: 8px; margin-bottom: 10px; }
  .hero-weekday { font-size: 14px; }
  .rokuyo, .holiday {
    padding: 3px 8px;
    font-size: 11px;
  }
  
  /* 旧暦・月齢（縦書き） */
  .tate-lunar-area {
    gap: 16px;
    margin: 14px 0;
    padding: 12px;
  }
  .tate-lunar-col { font-size: 13px; }
  .moon-icon { font-size: 22px; }
  .lunar-val { font-size: 11px; }
  .tate-wafu-name { font-size: 16px; }
  .tate-wafu-yomi { font-size: 9px; }
  
  /* 干支（縦書き） */
  .tate-kanshi-area { gap: 10px; padding: 12px 0; }
  .tate-kanshi-item { padding: 10px 12px; }
  .tate-kanshi-val { font-size: 18px; }
  .tate-kanshi-label { font-size: 9px; }
  
  /* 月のイベント */
  .moon-events { gap: 6px; margin-bottom: 10px; }
  .moon-event-tag {
    padding: 5px 12px;
    font-size: 11px;
  }
  
  /* セクション */
  .section { padding: 12px 0; }
  .section h3 { font-size: 14px; margin-bottom: 12px; }
  
  /* 二十四節気・七十二候 */
  .sekki-box, .ko-box { padding: 10px; }
  .sekki-name, .ko-name { font-size: 20px; }
  .sekki-reading, .ko-reading { font-size: 11px; }
  .sekki-summary, .ko-summary { font-size: 12px; }
  .sekki-detail, .ko-desc { font-size: 11px; }
  
  .ko-image-wrap { height: 140px; margin-bottom: 12px; }
  
  .seasonal-info { grid-template-columns: 1fr; gap: 8px; }
  .seasonal-label { font-size: 11px; }
  .seasonal-tag { font-size: 10px; padding: 3px 8px; }
  
  /* 運気診断 */
  .fortune-input { flex-direction: column; gap: 8px; }
  .fortune-input label { font-size: 12px; }
  .fortune-input input { padding: 10px; font-size: 14px; }
  .fortune-input button { padding: 10px 16px; font-size: 13px; }
  .fortune-rank { font-size: 32px; }
  .fortune-title { font-size: 16px; }
  .fortune-subtitle { font-size: 11px; }
  .fortune-detail { font-size: 12px; }
  .fortune-kanshi-row { gap: 10px; padding: 12px 0; }
  .fortune-kanshi-box { padding: 12px 14px; min-width: 100px; }
  .fortune-kanshi-val { font-size: 22px; }
  .fortune-kanshi-gogyo { font-size: 10px; }
  .fortune-kanshi-link { font-size: 10px; padding: 3px 8px; }
  .fortune-vs { font-size: 16px; }
  
  /* 六曜説明 */
  .event-title { font-size: 14px; }
  .event-desc { font-size: 12px; }
  
  /* カレンダー */
  .calendar-header { margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
  .calendar-title { font-size: 14px; }
  .calendar-help-link { font-size: 11px; order: 3; width: 100%; text-align: center; }
  .calendar-nav button { padding: 6px 10px; font-size: 11px; }
  .calendar-grid { gap: 2px; }
  .calendar-weekday { font-size: 10px; padding: 4px 0; }
  .calendar-cell {
    min-height: 65px;
    padding: 4px 2px;
    border-radius: 4px;
  }
  .cell-day { font-size: 13px; }
  .cell-rokuyo { font-size: 8px; margin: 1px 0; }
  .cell-lunar { font-size: 8px; }
  .cell-moon-icon { font-size: 10px; }
  
  /* 新月カード */
  #new-moon-card { padding: 14px 12px; }
  .new-moon-icon { font-size: 24px; }
  .new-moon-title { font-size: 15px; }
  .new-moon-time { font-size: 11px; }
  .theme-text { font-size: 14px; }
  .new-moon-desc { font-size: 12px; }
  .keyword-tag { font-size: 10px; padding: 3px 8px; }
  .wishes-label { font-size: 12px; }
  .wishes-list { font-size: 11px; padding-left: 16px; }
  
  /* ボイドタイム */
  .void-time-section { padding: 8px 10px; }
  .void-label { font-size: 11px; }
  .void-period { font-size: 12px; }
  .void-note { font-size: 9px; }
  
  /* 次の新月 */
  .next-nm-days { font-size: 28px; }
  .next-nm-date { font-size: 12px; }
  .next-nm-zodiac { font-size: 14px; }
  .next-nm-theme { font-size: 11px; }
}

/* 小さいスマートフォン (iPhone SE等) */
@media (max-width: 375px) {
  .container { padding: 6px 6px 24px; }
  header { padding: 12px 10px 16px; }
  header h1 { font-size: 16px; letter-spacing: 3px; }
  .page-curl { width: 55px; height: 55px; }
  .curl-fold { width: 45px; height: 45px; }
  .curl-fold::after { font-size: 8px; }
  .card { padding: 12px 10px; }
  .hero { padding: 12px 10px; }
  .tate-date-area { gap: 10px; }
  .tate-year { font-size: 12px; }
  .tate-month { font-size: 16px; }
  .tate-day { font-size: 22px; }
  .tate-lunar-area { gap: 12px; padding: 10px; }
  .tate-lunar-col { font-size: 11px; }
  .moon-icon { font-size: 18px; }
  .tate-wafu-name { font-size: 14px; }
  .tate-wafu-yomi { font-size: 8px; }
  .tate-kanshi-area { gap: 8px; }
  .tate-kanshi-item { padding: 8px 10px; }
  .tate-kanshi-val { font-size: 16px; }
  .calendar-cell { min-height: 55px; }
  .cell-day { font-size: 12px; }
  .fortune-kanshi-row { gap: 8px; flex-wrap: wrap; }
  .fortune-kanshi-box { padding: 10px 12px; min-width: 90px; }
  .fortune-kanshi-val { font-size: 20px; }
  .fortune-vs { font-size: 14px; }
}

/* ===== 新月の願い事カード ===== */
#new-moon-card {
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d4a 100%);
  color: #e8e0d0;
}
#new-moon-card h3 {
  color: #c9b8e8;
  border-bottom-color: rgba(201, 184, 232, 0.3);
}
.new-moon-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.new-moon-icon {
  font-size: 32px;
}
.new-moon-title-wrap {
  flex: 1;
}
.new-moon-title {
  font-size: 18px;
  font-weight: 600;
  color: #c9b8e8;
}
.new-moon-time {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}
.new-moon-theme {
  margin-bottom: 12px;
}
.theme-label {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
}
.theme-text {
  font-size: 16px;
  font-weight: 500;
  color: #c9b8e8;
}
.new-moon-desc {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,0.8);
  margin-bottom: 12px;
}
.new-moon-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.keyword-tag {
  background: rgba(138, 110, 180, 0.3);
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 12px;
  color: #e8e0d0;
}
.keyword-tag.small {
  padding: 3px 8px;
  font-size: 11px;
}
.new-moon-wishes {
  background: rgba(255,255,255,0.08);
  padding: 14px;
  border-radius: 6px;
}
.wishes-label {
  font-size: 13px;
  color: #c9a227;
  margin-bottom: 10px;
  font-weight: 500;
}
.wishes-list {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,255,255,0.85);
}

/* ボイドタイム */
.void-time-section {
  background: rgba(255,255,255,0.1);
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 14px;
  border-left: 4px solid #4ade80;
}
.void-time-section.void-good {
  border-color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
}
.void-time-section.void-limited {
  border-color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
}
.void-time-section.void-caution {
  border-color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}
.void-advice {
  display: flex;
  align-items: center;
  gap: 8px;
}
.void-icon {
  font-size: 18px;
}
.void-message {
  font-size: 13px;
  line-height: 1.5;
}

/* ボイドタイム */
.void-time-section {
  background: rgba(248, 113, 113, 0.15);
  border-left: 3px solid #f87171;
  padding: 10px 14px;
  border-radius: 4px;
  margin-bottom: 14px;
}
.void-label {
  font-size: 12px;
  font-weight: 600;
  color: #f87171;
  margin-bottom: 6px;
}
.void-period {
  font-size: 14px;
  font-weight: 500;
  color: #e8e0d0;
  margin-bottom: 4px;
}
.void-note {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  margin-top: 6px;
}

/* 次の新月 */
.next-new-moon {
  text-align: center;
}
.next-nm-header {
  margin-bottom: 12px;
}
.next-nm-label {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}
.next-nm-days {
  font-size: 36px;
  font-weight: 700;
  color: #c9b8e8;
  margin-left: 8px;
}
.next-nm-info {
  margin-bottom: 12px;
}
.next-nm-date {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
}
.next-nm-zodiac {
  font-size: 16px;
  font-weight: 600;
  color: #c9b8e8;
  margin: 4px 0;
}
.next-nm-theme {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}
.next-nm-keywords {
  display: flex;
  justify-content: center;
  gap: 6px;
}

/* 新月カード折りたたみ */
.next-new-moon-preview {
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}
.next-new-moon-detail {
  text-align: center;
  margin-top: 12px;
}
#new-moon-card.collapsed .next-new-moon-detail {
  display: none;
}
#new-moon-card.collapsed .next-new-moon-preview {
  display: block;
}
#new-moon-card:not(.collapsed) .next-new-moon-preview {
  display: none;
}
#new-moon-card.collapsed h3 .expand-hint::after {
  content: '▼';
  font-size: 10px;
  margin-left: 8px;
  opacity: 0.5;
}
#new-moon-card:not(.collapsed) h3 .expand-hint::after {
  content: '';
}

/* シェア＆ダウンロードセクション */
.share-section {
  background: var(--card);
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}

.share-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.share-label, .download-label {
  font-size: 0.85rem;
  color: var(--text2);
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: transform 0.2s, opacity 0.2s;
}

.share-btn:hover {
  transform: scale(1.1);
  opacity: 0.9;
}

.share-btn.twitter {
  background: #000;
  color: #fff;
}

.share-btn.facebook {
  background: #1877f2;
  color: #fff;
}

.share-btn.line {
  background: #06c755;
  color: #fff;
}

.share-btn.hatena {
  background: #00a4de;
  color: #fff;
  font-size: 0.75rem;
}

.download-links {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dl-btn {
  background: var(--bg);
  color: var(--accent);
  padding: 8px 15px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  transition: background 0.2s;
}

.dl-btn:hover {
  background: var(--card2);
}

@media (max-width: 600px) {
  .share-section {
    flex-direction: column;
    align-items: flex-start;
  }
  .download-links {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ========== 目的別ナビ ========== */
.purpose-nav { margin-top: 15px; }
.purpose-nav h3 { 
  text-align: center;
  margin-bottom: 20px;
}
.purpose-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.purpose-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 12px;
  background: var(--card);
  border-radius: 16px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.2s ease;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.purpose-item:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(139,69,19,0.12);
}
.purpose-item-active {
  border-color: var(--gold);
  background: linear-gradient(135deg, #fffef8 0%, #fff8e1 100%);
}
.purpose-icon {
  font-size: 2.2em;
  margin-bottom: 10px;
}
.purpose-label {
  font-size: 0.95em;
  font-weight: 600;
  margin-bottom: 6px;
  text-align: center;
  color: var(--text);
}
.purpose-sub {
  font-size: 0.72em;
  color: var(--accent);
  text-align: center;
  line-height: 1.4;
  opacity: 0.85;
}

/* タブレット */
@media (max-width: 768px) {
  .purpose-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  .purpose-item {
    padding: 16px 8px;
    border-radius: 14px;
  }
  .purpose-icon {
    font-size: 1.8em;
  }
  .purpose-label {
    font-size: 0.85em;
  }
  .purpose-sub {
    font-size: 0.65em;
  }
}

/* スマホ */
@media (max-width: 480px) {
  .purpose-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .purpose-item {
    padding: 14px 8px;
  }
  .purpose-icon {
    font-size: 1.8em;
  }
  .purpose-label {
    font-size: 0.85em;
  }
  .purpose-sub {
    font-size: 0.65em;
  }
}

/* 暦ナビ */
.koyomi-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.koyomi-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  background: var(--card2);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.2s;
  border: 1px solid var(--border);
}
.koyomi-link:hover {
  background: var(--card);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
[data-theme="dark"] .koyomi-link:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.koyomi-icon {
  font-size: 1.8em;
  margin-bottom: 8px;
}
.koyomi-title {
  font-weight: 500;
  font-size: 0.95em;
  margin-bottom: 4px;
}
.koyomi-desc {
  font-size: 0.75em;
  color: var(--text3);
}
@media (max-width: 600px) {
  .koyomi-nav {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* エンジェルナンバー */
.angel-number-card {
  background: linear-gradient(135deg, #e8f5e9 0%, #fff8e1 50%, #fce4ec 100%);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.angel-number-card::before {
  content: '✨';
  position: absolute;
  top: 10px;
  left: 15px;
  font-size: 1.2em;
  opacity: 0.6;
}
.angel-number-card::after {
  content: '✨';
  position: absolute;
  bottom: 10px;
  right: 15px;
  font-size: 1.2em;
  opacity: 0.6;
}
.angel-time {
  font-size: 2em;
  font-weight: 600;
  color: #6a1b9a;
  margin-bottom: 8px;
  letter-spacing: 0.1em;
}
.angel-meaning {
  font-size: 1.1em;
  font-weight: 500;
  color: #7b1fa2;
  margin-bottom: 12px;
}
.angel-message {
  font-size: 0.95em;
  color: #4a148c;
  line-height: 1.7;
}

/* 感謝ワーク */
.gratitude-card {
  background: linear-gradient(135deg, #fff8e1 0%, #fffde7 100%);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  border: 1px solid #ffe082;
}
.gratitude-day {
  font-size: 0.85em;
  color: #8d6e63;
  margin-bottom: 12px;
}
.gratitude-theme {
  font-size: 1.3em;
  font-weight: 600;
  color: #5d4037;
  margin-bottom: 16px;
}
.gratitude-prompt {
  font-size: 0.95em;
  color: #6d4c41;
  line-height: 1.8;
  margin-bottom: 20px;
}
.gratitude-action {
  background: #fff;
  border-radius: 30px;
  padding: 12px 20px;
  font-size: 0.95em;
  color: #5d4037;
  font-weight: 500;
  display: inline-block;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* 記念日クリック展開 */
.memorial-days {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.memorial-item {
  display: inline-block;
  padding: 6px 12px;
  background: var(--card2);
  border-radius: 20px;
  font-size: 13px;
  color: var(--text2);
  transition: all 0.2s;
}
.memorial-item.has-origin {
  cursor: pointer;
}
.memorial-item.has-origin:hover {
  background: var(--accent);
  color: #fff;
}
.memorial-name {
  display: flex;
  align-items: center;
  gap: 4px;
}
.expand-icon {
  font-size: 10px;
  transition: transform 0.2s;
  opacity: 0.6;
}
.memorial-item.expanded .expand-icon {
  transform: rotate(180deg);
}
.memorial-origin {
  display: none;
  margin-top: 8px;
  padding: 10px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text2);
}
.memorial-item.expanded {
  width: 100%;
  border-radius: 12px;
}
.memorial-item.expanded .memorial-origin {
  display: block;
}

/* 目的から吉日を探す - 折りたたみ */
.purpose-section.collapsed .purpose-grid {
  display: none;
}
.purpose-section .section-header {
  cursor: pointer;
}
.purpose-section .section-header h3 {
  margin: 0;
}
.purpose-toggle {
  font-size: 12px;
  color: var(--text3);
  transition: transform 0.2s;
}
.purpose-section.collapsed .purpose-toggle {
  transform: rotate(180deg);
}

/* Wikipediaリンク（季節の花） */
.seasonal-tag.wiki-link {
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}
.seasonal-tag.wiki-link:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-1px);
}
.seasonal-tag.wiki-link::after {
  content: '↗';
  font-size: 10px;
  margin-left: 2px;
  opacity: 0.6;
}

/* Wikipediaリンク（誕生日） */
.event-title .wiki-link,
.event-item .wiki-link {
  color: var(--accent);
  text-decoration: none;
  transition: all 0.2s;
}
.event-title .wiki-link:hover,
.event-item .wiki-link:hover {
  color: var(--accent-dark);
  text-decoration: none;
}
.event-title .wiki-link .wiki-icon,
.event-item .wiki-link .wiki-icon {
  font-size: 10px;
  opacity: 0.6;
  margin-left: 2px;
}