/* ================ 基本（古書クラシック・革装丁＋金箔） ================ */
:root {
  /* ベースは白 */
  --paper-outer: #f0ece2;        /* 最外側の淡いクリーム枠 */
  --paper: #ffffff;              /* 本体の白 */
  --paper-light: #ffffff;
  --paper-card: #ffffff;
  --paper-card-end: #fafaf5;     /* カード下端だけわずかに差 */
  --paper-warm: #fbf8ef;         /* ほのかな暖色 */
  --ink: #1a1a1a;
  --ink-2: #333333;
  --ink-3: #666666;
  --ink-4: #999999;
  --wine: #7a2e3a;
  --wine-dark: #5c1f2a;
  --wine-soft: #a64e5a;
  --gold: #b8952e;
  --gold-light: #d4b055;
  --green-deep: #3d4e3e;
  --rule: #c4b68a;               /* 罫線：はっきりした金茶 */
  --rule-soft: #d9cdb4;
}

/* フォント定義 */
:root {
  /* 日本語メイン: しっぽり明朝 */
  --font-jp: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  /* 欧文タイトル: Playfair Display */
  --font-display: "Playfair Display", Georgia, serif;
  /* 欧文本文: Cormorant Garamond */
  --font-en: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  /* UIフォント */
  --font-ui: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body {
  height: 100%;
  font-family: var(--font-jp);
  background: var(--paper-outer);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}
body {
  display: flex;
  flex-direction: column;
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  background: #ffffff;
  box-shadow: 0 0 30px rgba(0,0,0,0.08);
}

/* ================ 横に広いHP版レイアウト ================ */
/* PCブラウザ（900px以上）では本棚のように広く使う */
@media (min-width: 900px) {
  body {
    max-width: 1080px;
    box-shadow: 0 0 40px rgba(0,0,0,0.12);
  }
  main { padding: 0 18px; }
  .home-block, .view > * { max-width: 1040px; margin-left: auto; margin-right: auto; }
  .book-grid { grid-template-columns: repeat(6, 1fr); gap: 18px 14px; }
  /* 本日のおすすめ（ホーム）は6人横並び */
  #peopleList .book-grid { grid-template-columns: repeat(6, 1fr); }
  /* 検索結果の本棚も6列 */
  #tagsList .book-grid { grid-template-columns: repeat(6, 1fr); }
  /* わたしの本も6列 */
  #favoritesList .book-grid { grid-template-columns: repeat(6, 1fr); }
  /* 偉人たちの本棚（ホームの書籍カバー）も6冊横並び */
  .home-books { grid-template-columns: repeat(6, 1fr); max-width: 100%; gap: 16px 12px; }
  /* HP版はブログ記事も6冊横並び — カード内サイズはスマホ同等の控えめな帯に */
  .article-card { aspect-ratio: 2 / 2.9; }
  .article-card-inner {
    max-height: 36%;
    min-height: auto;
    padding: 6px 8px 7px;
  }
  .article-card-inner .article-source,
  .article-card-inner .article-category { font-size: 7px; padding: 1px 4px; }
  .article-card-inner .article-badges { margin-bottom: 3px; }
  .article-card-inner .article-title {
    font-size: 9px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    letter-spacing: 0.02em;
    -webkit-line-clamp: unset;
  }
  .article-card-inner .article-desc {
    font-size: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
  }
  .category-filter, .era-filter, .sort-filter { justify-content: center; }
  /* 人物詳細：本全体を読みやすい820px幅に統一 */
  .profile-cover { height: 260px; }
  #personDetail > .profile-cover,
  #personDetail > .profile-header,
  #personDetail > .routine-open-btn,
  #personDetail > .profile-tabs,
  #personDetail > .profile-tab-content {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }
  #personDetail > .profile-header { padding-left: 24px; padding-right: 24px; }
  .profile-avatar { width: 120px; height: 120px; margin-top: -60px; font-size: 44px; border-width: 4px; }
  .profile-name { font-size: 28px; }
  .profile-handle { font-size: 15px; }
  .profile-bio { font-size: 15px; line-height: 1.9; }
  .profile-meta { font-size: 13px; }
  .profile-stats { gap: 28px; padding: 14px 0; }
  .profile-stat { font-size: 14px; }
  .profile-stat strong { font-size: 20px; margin-right: 4px; }
  .profile-tabs {
    justify-content: center;
    gap: 4px;
  }
  .profile-tab { padding: 14px 22px; font-size: 14px; }
  .profile-feed, .profile-tab-content { margin-left: auto; margin-right: auto; padding: 0 24px; }
  /* 画像クレジット・タブ内のバーも同じ幅に */
  #personDetail > .profile-header .image-credit { font-size: 12px; padding: 8px 12px; }
  /* ルーティンポップアップも広く */
  .routine-modal-panel { width: min(92vw, 760px); }
}
@media (min-width: 1200px) {
  body { max-width: 1200px; }
  .book-grid { grid-template-columns: repeat(6, 1fr); }
  .home-block, .view > * { max-width: 1160px; }
}
/* タブレットサイズ */
@media (min-width: 660px) and (max-width: 899px) {
  body { max-width: 760px; }
  .book-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

/* ================ ヘッダー ================ */
.app-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding: 14px 16px;
  background:
    linear-gradient(180deg, #5c1f2a 0%, #4a1822 100%);
  border-bottom: 2px solid var(--gold);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.app-header .header-left {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 6px;
}
.header-logo {
  color: var(--gold-light);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.2em;
  font-family: var(--font-jp);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  border: 1px solid var(--gold);
  border-radius: 14px;
  background: rgba(0,0,0,0.18);
  white-space: nowrap;
}
.header-logo::before {
  content: "◆";
  font-size: 8px;
  color: var(--gold);
}
/* 戻るボタンが見える時（詳細画面）はロゴを隠す */
.back-btn.visible ~ .header-logo { display: none; }
.app-header h1 {
  /* 中央セル：コンテナ中央に自動配置 */
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold-light);
  font-family: var(--font-jp);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  text-align: center;
  white-space: nowrap;
  margin: 0;
}
.app-header .header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
}
.back-btn, .icon-btn {
  background: none;
  border: none;
  color: var(--gold-light);
  font-size: 24px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.back-btn { visibility: hidden; }
.back-btn.visible { visibility: visible; }

/* ================ タブ ================ */
.tabs {
  display: flex;
  background: #382018;
  border-bottom: 2px solid var(--gold);
  position: sticky;
  top: 54px;
  z-index: 9;
}
.tabs.hidden { display: none; }
.tab {
  flex: 1;
  min-width: 0;
  padding: 14px 0;
  background: none;
  border: none;
  color: #b89f6a;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  font-family: inherit;
  letter-spacing: 0.1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 520px) {
  .tab { font-size: 12px; letter-spacing: 0.05em; padding: 12px 2px; }
}
@media (max-width: 360px) {
  .tab { font-size: 11px; letter-spacing: 0.02em; }
}
.tab.active {
  color: var(--gold-light);
  border-bottom-color: var(--gold);
  font-weight: 600;
  background: linear-gradient(180deg, transparent 0%, rgba(184,149,46,0.08) 100%);
}

/* ================ 検索バー ================ */
.search-bar {
  display: flex;
  padding: 10px 12px;
  background: #4a1822;
  gap: 8px;
  border-bottom: 1px solid var(--gold);
}
.search-bar.hidden { display: none; }
.search-bar input {
  flex: 1;
  background: var(--paper-light);
  border: 1px solid var(--rule);
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 3px;
  font-size: 14px;
  font-family: inherit;
}
.search-bar input:focus { outline: none; border-color: var(--gold); }
#searchClose {
  background: none;
  border: none;
  color: var(--gold-light);
  font-size: 22px;
  cursor: pointer;
}

/* ================ ビュー切り替え ================ */
main { flex: 1; overflow-y: auto; overflow-x: hidden; background: var(--paper); scrollbar-gutter: stable both-edges; }
.view { display: none; padding: 16px 18px 80px; }
.view.active { display: block; }

/* わたしの本だけノート罫線の背景 */
#view-favorites {
  background-color: #fffcf3;
  background-image:
    /* 左端の綴じ穴の縦線 */
    linear-gradient(90deg, transparent 0, transparent 22px, rgba(122,46,58,0.3) 22px, rgba(122,46,58,0.3) 23px, transparent 23px, transparent 100%),
    /* 横罫線 */
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 31px,
      rgba(122, 46, 58, 0.14) 31px,
      rgba(122, 46, 58, 0.14) 32px
    );
}
.view.fade-enter {
  animation: view-fade-in 450ms ease-out;
}
@keyframes view-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.intro {
  color: var(--ink-3);
  font-size: 14px;
  margin-bottom: 16px;
  line-height: 1.85;
  font-family: var(--font-jp);
}

/* ================ ヒーロー（古書の扉絵風） ================ */
.hero {
  margin: -16px -18px 28px;
  max-width: none;
  width: auto;
  padding: 10px;
  background: #ffffff;
  border-bottom: 3px double var(--wine);
  position: relative;
  overflow: hidden;
}
/* ヒーロー画像版 */
.hero.hero-image {
  padding: 0;
  background: transparent;
  border-bottom: none;
  margin: -16px -18px 20px;
}
.hero-img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  max-height: 260px;
  object-fit: contain;
  background: #fff;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .hero-img { max-width: 680px; max-height: 340px; }
}
.hero-image::before { display: none; }
.hero-tagline-below {
  text-align: center;
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: 700;
  color: var(--wine);
  letter-spacing: 0.15em;
  margin: 20px 14px 8px;
  line-height: 1.7;
}
.hero-sub-below {
  text-align: center;
  font-family: var(--font-jp);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
  line-height: 1.8;
  margin: 0 18px 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-soft);
}
@media (min-width: 900px) {
  .hero-tagline-below { font-size: 18px; }
  .hero-sub-below { font-size: 14px; }
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 15%, rgba(184,149,46,0.12) 0%, transparent 35%),
    radial-gradient(circle at 85% 85%, rgba(122,46,58,0.10) 0%, transparent 40%);
  pointer-events: none;
}
.hero-frame {
  border: 2px solid var(--wine);
  padding: 18px 18px 14px;
  text-align: center;
  position: relative;
  background:
    linear-gradient(180deg, #ffffff 0%, var(--paper-card) 55%, var(--paper-card-end) 100%);
  box-shadow:
    inset 0 0 0 1px var(--gold),
    inset 0 0 0 4px var(--wine),
    inset 0 0 0 5px var(--gold),
    0 4px 16px rgba(0,0,0,0.18);
}
.hero-frame::before,
.hero-frame::after {
  content: '❦';
  position: absolute;
  font-size: 20px;
  color: var(--gold);
  background: var(--paper);
  padding: 0 6px;
}
.hero-frame::before { top: -12px; left: 50%; transform: translateX(-50%); }
.hero-frame::after  { bottom: -12px; left: 50%; transform: translateX(-50%); }

.hero-ornament {
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.15em;
}
.hero-ornament.top { margin-bottom: 8px; }
.hero-ornament.bottom { margin-top: 8px; }

.hero-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.25em;
  color: var(--wine-dark);
  margin-bottom: 10px;
  font-family: var(--font-jp);
  text-shadow: 0 1px 0 rgba(255,240,200,0.7);
}

.hero-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0 8px;
}
.hero-divider span {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  position: relative;
}
.hero-divider span::before {
  content: '❖';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  color: var(--wine);
  background: var(--paper-card);
  padding: 0 8px;
}

.hero-tagline {
  font-size: 12px;
  color: var(--wine);
  letter-spacing: 0.18em;
  margin-bottom: 16px;
  font-family: var(--font-jp);
  font-weight: 600;
  line-height: 1.8;
}
.hero-sub {
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.9;
  letter-spacing: 0.08em;
  font-family: var(--font-jp);
  margin-bottom: 12px;
  font-weight: 400;
}

.hero-stats {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  margin: 12px 0 2px;
  padding: 10px 0;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  position: relative;
}
.hero-stats::before,
.hero-stats::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--rule-soft);
}
.hero-stats::before { top: -3px; }
.hero-stats::after  { bottom: -3px; }
.hero-stats > div:not(.hs-sep) {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.hero-stats .hs-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--wine-dark);
  font-family: var(--font-jp);
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255,240,200,0.6);
}
.hero-stats .hs-label {
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.25em;
}
.hero-stats .hs-sep {
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  flex: 0 0 1px;
}

/* ================ ホームのブロック ================ */
.home-block { margin-bottom: 34px; }
.home-block-label {
  font-size: 13px;
  color: var(--wine);
  letter-spacing: 0.35em;
  margin-bottom: 18px;
  padding-left: 12px;
  border-left: 4px double var(--wine);
  line-height: 1.2;
  font-family: var(--font-jp);
  font-weight: 700;
  text-transform: none;
}

/* ================ 今日の言葉 ================ */
.quote-of-the-day {
  background: #ffffff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 24px 22px 18px;
  position: relative;
  box-shadow:
    inset 0 0 0 1px var(--gold),
    inset 0 0 0 2px rgba(255,253,247,0.4),
    0 3px 10px rgba(0,0,0,0.1);
}
.quote-of-the-day::before {
  content: '”';
  position: absolute;
  top: 2px;
  left: 12px;
  font-size: 64px;
  color: var(--wine);
  opacity: 0.28;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1;
}
.qod-text {
  font-size: 20px;
  line-height: 2;
  color: var(--ink);
  font-family: var(--font-jp);
  padding-left: 28px;
  margin-bottom: 14px;
  letter-spacing: 0.05em;
  font-weight: 500;
}
@media (min-width: 900px) {
  .qod-text { font-size: 22px; }
}
.qod-attrib {
  text-align: right;
  font-size: 13px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  cursor: pointer;
  padding-top: 10px;
  border-top: 1px solid var(--rule-soft);
}
.qod-attrib .qod-name {
  color: var(--wine);
  font-weight: 700;
  font-size: 12px;
  margin-right: 6px;
}

/* ================ 今日の一人（大型カード） ================ */
.person-of-the-day {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px var(--gold),
    0 6px 16px rgba(0,0,0,0.22);
  border: 2px solid var(--wine);
  transition: transform 0.15s;
}
.person-of-the-day:active { transform: scale(0.99); }
.potd-image {
  width: 100%;
  height: 220px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  background-color: #1a130c;
  position: relative;
}
.potd-image::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(31, 24, 18, 0) 0%,
    rgba(31, 24, 18, 0.15) 40%,
    rgba(31, 24, 18, 0.80) 78%,
    rgba(31, 24, 18, 0.95) 100%);
}
.potd-image.no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 70px;
  color: var(--wine);
  font-family: var(--font-jp);
}
.potd-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 20px 18px;
  color: var(--paper-light);
  z-index: 2;
}
.potd-label-line {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.35em;
  color: var(--gold-light);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gold);
  margin-bottom: 10px;
  font-weight: 600;
}
.potd-name {
  font-size: 23px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;
  font-family: var(--font-jp);
  letter-spacing: 0.08em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.potd-meta {
  font-size: 11px;
  color: var(--gold-light);
  letter-spacing: 0.12em;
  margin-bottom: 8px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.potd-summary {
  font-size: 12px;
  color: #f0e4c9;
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* ================ 言葉のコレクション ================ */
.quote-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.quote-carousel::-webkit-scrollbar { display: none; }
.qc-card {
  flex: 0 0 78%;
  scroll-snap-align: start;
  background: #ffffff;
  border: 1px solid var(--wine);
  border-radius: 4px;
  padding: 18px 16px 14px;
  position: relative;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px var(--gold),
    inset 0 0 0 2px rgba(255,253,247,0.4),
    0 3px 8px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  min-height: 150px;
}
.qc-card::before {
  content: '”';
  position: absolute;
  top: -2px;
  left: 10px;
  font-size: 48px;
  color: var(--wine);
  opacity: 0.28;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1;
}
.qc-text {
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink);
  font-family: var(--font-jp);
  padding-left: 22px;
  padding-top: 4px;
  flex: 1;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qc-attrib {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rule-soft);
}
.qc-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-size: cover;
  background-position: center top;
  background-color: var(--paper-warm);
  border: 1px solid var(--gold);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--wine);
  font-family: var(--font-jp);
}
.qc-meta-name {
  font-size: 12px;
  color: var(--wine);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.qc-meta-src {
  font-size: 10px;
  color: var(--ink-3);
  line-height: 1.5;
}

/* ================ 注目の感情タイル ================ */
.featured-tags {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.feat-tile {
  border-radius: 4px;
  padding: 18px 14px;
  color: var(--paper-light);
  cursor: pointer;
  text-align: center;
  box-shadow:
    inset 0 0 0 1px rgba(212,176,85,0.5),
    0 3px 8px rgba(0, 0, 0, 0.22);
  transition: transform 0.1s;
  font-family: inherit;
  border: 1px solid rgba(0,0,0,0.3);
}
.feat-tile-wine {
  background: linear-gradient(135deg, var(--wine) 0%, var(--wine-dark) 100%);
}
.feat-tile-green {
  background: linear-gradient(135deg, var(--green-deep) 0%, #2a3a2b 100%);
}
.feat-tile:active { transform: scale(0.97); }
.feat-tile .ft-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin-bottom: 6px;
  font-family: var(--font-jp);
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.feat-tile .ft-count {
  font-size: 10px;
  opacity: 0.9;
  letter-spacing: 0.1em;
}
.feat-tile .ft-desc {
  font-size: 10px;
  opacity: 0.92;
  margin-top: 6px;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

/* ================ カテゴリ絞り込み ================ */
.category-filter {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.category-filter::-webkit-scrollbar { display: none; }
.cat-chip {
  flex-shrink: 0;
  padding: 7px 15px;
  border-radius: 18px;
  font-size: 12px;
  background: var(--paper-light);
  border: 1px solid var(--rule);
  color: var(--ink-2);
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.05em;
  transition: all 0.15s;
  white-space: nowrap;
}
.cat-chip.active {
  background: var(--wine);
  color: var(--gold-light);
  border-color: var(--wine);
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.cat-chip .cat-count {
  font-size: 10px;
  margin-left: 5px;
  opacity: 0.7;
}

/* 時代フィルタ（カテゴリ下のサブフィルタ） */
.era-filter, .sort-filter {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
  overflow-x: auto;
  padding-bottom: 3px;
  scrollbar-width: none;
  flex-wrap: wrap;
}
.era-filter:empty, .sort-filter:empty { display: none; margin: 0; }
.era-filter::-webkit-scrollbar, .sort-filter::-webkit-scrollbar { display: none; }
.era-chip, .sort-chip {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 11px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.04em;
  transition: all 0.15s;
  white-space: nowrap;
}
.era-chip.active {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
  font-weight: 600;
}
.era-chip .cat-count {
  font-size: 9px;
  margin-left: 4px;
  opacity: 0.7;
}
.sort-chip.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 600;
}

/* ================ 古紙テクスチャ（シミと斑点） ================ */
.aged-paper {
  background-color: var(--paper-card);
  background-image:
    /* 全体の微妙な色むら */
    radial-gradient(ellipse 60% 40% at 18% 22%, rgba(184,149,46,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 82% 78%, rgba(122,46,58,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 50% 95%, rgba(107,88,64,0.08) 0%, transparent 60%),
    /* 小さなシミ */
    radial-gradient(circle 6px at 25% 65%, rgba(107,58,30,0.12) 0%, transparent 100%),
    radial-gradient(circle 4px at 70% 30%, rgba(92,31,42,0.10) 0%, transparent 100%),
    radial-gradient(circle 3px at 88% 55%, rgba(107,58,30,0.08) 0%, transparent 100%),
    radial-gradient(circle 5px at 12% 85%, rgba(92,31,42,0.07) 0%, transparent 100%),
    radial-gradient(circle 2px at 55% 18%, rgba(107,58,30,0.10) 0%, transparent 100%),
    /* 紙の繊維感（細かい斑点） */
    radial-gradient(circle 1px at 20% 40%, rgba(107,58,30,0.10), transparent 100%),
    radial-gradient(circle 1px at 65% 75%, rgba(107,58,30,0.08), transparent 100%),
    radial-gradient(circle 1px at 35% 20%, rgba(107,58,30,0.09), transparent 100%),
    radial-gradient(circle 1px at 80% 12%, rgba(107,58,30,0.07), transparent 100%),
    radial-gradient(circle 1px at 45% 90%, rgba(107,58,30,0.09), transparent 100%),
    radial-gradient(circle 1px at 92% 88%, rgba(107,58,30,0.08), transparent 100%),
    /* ベースの明るいグラデ */
    linear-gradient(180deg, #fffdf4 0%, var(--paper-card) 50%, #f5e8c8 100%);
}

/* ================ 表紙グリッド（Kindle風） ================ */
.book-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 10px;
  padding: 8px 4px 16px;
  width: 100%;
  box-sizing: border-box;
}
/* 人物カード = 写真全面＋下部に情報オーバーレイ */
.person-book {
  aspect-ratio: 2 / 2.9;
  position: relative;
  cursor: pointer;
  border-radius: 3px 6px 6px 3px;
  overflow: hidden;
  background-size: cover;
  background-position: center 15%;
  background-color: #2a2018;
  box-shadow:
    6px 8px 18px rgba(0,0,0,0.35),
    2px 2px 5px rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(0,0,0,0.25);
  transition: transform 0.15s;
}
.person-book:active { transform: translateY(2px); }
/* 下半分に向かって暗くなるオーバーレイ */
.person-book-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 40%,
    rgba(0,0,0,0.55) 70%,
    rgba(0,0,0,0.92) 100%);
  pointer-events: none;
}
.person-book.no-img {
  background: linear-gradient(135deg, #3d5a80 0%, #2c4363 100%);
}
.person-book-placeholder {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 72px;
  color: rgba(255,255,255,0.35);
  font-family: var(--font-jp);
}
/* 下部に情報 */
.person-book-info {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  padding: 10px 12px 12px;
  color: #fff;
  text-align: center;
  z-index: 2;
}
.person-book-en {
  font-size: 10px;
  color: #f0d690;
  opacity: 0.85;
  letter-spacing: 0.05em;
  font-family: var(--font-display);
  font-style: italic;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.person-book-name {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  font-family: var(--font-jp);
  line-height: 1.3;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
}
.person-book-meta {
  font-size: 9px;
  color: #e5dcc4;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  opacity: 0.88;
}
.person-book .cover-bookmark {
  position: absolute;
  top: -2px;
  right: 14px;
  z-index: 5;
}

/* 表紙のブックマークボタン（リボン型） */
.person-book-bookmark {
  position: absolute;
  top: -2px;
  right: 12px;
  width: 18px;
  height: 30px;
  border: none;
  background: rgba(255,255,255,0.3);
  box-shadow:
    -1px 1px 2px rgba(0,0,0,0.3),
    inset 0 0 0 1px rgba(0,0,0,0.2);
  cursor: pointer;
  z-index: 10;
  padding: 0;
  transition: all 0.15s;
}
.person-book-bookmark::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 0; height: 0;
  border-left: 9px solid rgba(255,255,255,0.3);
  border-right: 9px solid rgba(255,255,255,0.3);
  border-bottom: 7px solid transparent;
  transition: border-color 0.15s;
}
.person-book-bookmark:active { transform: translateY(2px); }
.person-book-bookmark.active {
  background: var(--gold);
  box-shadow:
    -1px 1px 3px rgba(0,0,0,0.4),
    inset 0 0 0 1px rgba(0,0,0,0.3);
}
.person-book-bookmark.active::after {
  border-left-color: var(--gold);
  border-right-color: var(--gold);
}

.book-cover-card {
  aspect-ratio: 2 / 2.9;
  border-radius: 3px 6px 6px 3px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border: none;
  background-color: #2a2018;
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.25),
    6px 8px 18px rgba(0,0,0,0.3),
    2px 2px 5px rgba(0,0,0,0.15);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 人物カード = 布張り（紺）+ 中央に写真 */
.book-cover-card:not(.tag-cover):not(.no-photo) {
  background-color: #2c4363;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 1px, transparent 1px, transparent 3px),
    linear-gradient(135deg, #3d5a80 0%, #2c4363 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.25),
    inset 2px 2px 6px rgba(255,255,255,0.08),
    inset -2px -2px 6px rgba(0,0,0,0.15),
    6px 8px 18px rgba(0,0,0,0.3),
    2px 2px 5px rgba(0,0,0,0.15);
}
/* 3冊ごとに色を変える */
.book-cover-card:not(.tag-cover):not(.no-photo):nth-child(3n+2) {
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 1px, transparent 1px, transparent 3px),
    linear-gradient(135deg, #6d3340 0%, #4d1f2a 100%);
}
.book-cover-card:not(.tag-cover):not(.no-photo):nth-child(3n) {
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 1px, transparent 1px, transparent 3px),
    linear-gradient(135deg, #4d5e3e 0%, #2f3e2a 100%);
}
.book-cover-card:active {
  transform: scale(0.97);
}
/* 背表紙の厚み（左端） */
/* 背表紙も削除 */
.book-cover-card::before { display: none; }
/* 小口は削除（段差の違和感を消すため） */
.book-cover-card::after { display: none; }
/* 写真のオーバーレイ — 下だけ薄暗く + 光沢ハイライト */
.cover-card-overlay {
  position: absolute;
  inset: 0;
  background:
    /* 左上からの光沢（本のカバーの反射） */
    linear-gradient(135deg,
      rgba(255,255,255,0.18) 0%,
      rgba(255,255,255,0.06) 20%,
      transparent 40%),
    /* 下部の暗がり（テキスト用） */
    linear-gradient(180deg,
      transparent 0%,
      transparent 45%,
      rgba(15,10,5,0.50) 72%,
      rgba(15,10,5,0.88) 100%);
  z-index: 2;
  pointer-events: none;
}
/* エンボス風の枠線（二重線で凹凸感） */
.cover-card-frame {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0,0,0,0.45);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    inset 1px 1px 0 rgba(255,255,255,0.12),
    inset -1px -1px 0 rgba(0,0,0,0.15);
  z-index: 4;
  pointer-events: none;
  border-radius: 2px 6px 6px 2px;
}
/* テキスト（下部・本の表紙のように大きく） */
.cover-card-info {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  z-index: 5;
  padding: 8px 10px 10px;
}
.cover-card-name-en {
  font-size: 10px;
  color: #fff;
  opacity: 0.82;
  letter-spacing: 0.06em;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  margin-bottom: 4px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.cover-card-name {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.08em;
  font-family: var(--font-jp);
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
  margin-bottom: 8px;
  line-height: 1.35;
}
.cover-card-meta {
  font-size: 9px;
  color: #fff;
  opacity: 0.8;
  letter-spacing: 0.02em;
  font-family: var(--font-en);
  font-weight: 600;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}
/* 写真なしのカバー */
.book-cover-card.no-photo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.book-cover-card.no-photo .cover-card-overlay {
  background: none;
}

/* タグの表紙（写真なし、テキストのみ） */
.book-cover-card.tag-cover {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cover-card-tag-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 18px;
  z-index: 3;
}
.cover-tag-ornament {
  color: var(--gold-light);
  font-size: 14px;
  opacity: 0.7;
}
.cover-card-count {
  font-size: 11px;
  color: var(--gold-light);
  opacity: 0.7;
  letter-spacing: 0.1em;
}
.tag-cover .cover-card-name {
  font-size: 17px;
  letter-spacing: 0.15em;
}

/* ================ 人気タグ表紙（横長1列） ================ */
.tag-featured-cover {
  position: relative;
  height: 130px;
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 14px;
  box-shadow:
    6px 6px 16px rgba(0,0,0,0.4),
    2px 2px 4px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}
.tag-featured-cover:active { transform: scale(0.98); }
.tag-featured-cover::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 10px;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.5) 0%, transparent 100%);
  z-index: 4;
  pointer-events: none;
}
.tag-featured-cover .cover-card-frame {
  inset: 6px;
}
.tfc-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 24px;
  z-index: 3;
}
.tfc-ornament {
  color: var(--gold-light);
  font-size: 14px;
  opacity: 0.65;
  margin-bottom: 6px;
}
.tfc-name {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.2em;
  font-family: var(--font-jp);
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  margin-bottom: 6px;
}
.tfc-desc {
  font-size: 11px;
  color: #f0e4c9;
  opacity: 0.85;
  line-height: 1.6;
  letter-spacing: 0.06em;
  font-family: var(--font-jp);
  margin-bottom: 4px;
}
.tfc-count {
  font-size: 10px;
  color: var(--gold-light);
  opacity: 0.75;
  letter-spacing: 0.15em;
  font-family: var(--font-en);
  font-style: italic;
}

/* ================ 棚の中の表紙（face-out display） ================ */
.shelf-face-cover {
  flex: 2 0 90px;
  max-width: 130px;
  height: 155px;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.5);
  box-shadow:
    inset 0 0 0 1px rgba(212,176,85,0.2),
    2px 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shelf-face-cover:active {
  transform: translateY(-10px);
}
.sfc-frame {
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(212,176,85,0.45);
  pointer-events: none;
  z-index: 2;
}
.sfc-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.sfc-ornament {
  color: var(--gold-light);
  font-size: 12px;
  opacity: 0.6;
}
.sfc-name {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.15em;
  font-family: var(--font-jp);
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  line-height: 1.35;
}
.sfc-count {
  font-size: 10px;
  color: var(--gold-light);
  opacity: 0.8;
  font-family: var(--font-en);
  font-style: italic;
  letter-spacing: 0.1em;
}

/* お気に入りリボン（表紙右上） */
.cover-bookmark {
  position: absolute;
  top: -2px;
  right: 14px;
  width: 14px;
  height: 26px;
  background: var(--gold);
  border-left: 1px solid rgba(0,0,0,0.3);
  border-right: 1px solid rgba(0,0,0,0.3);
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  z-index: 8;
}
.cover-bookmark::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 0; height: 0;
  border-left: 7px solid var(--gold);
  border-right: 7px solid var(--gold);
  border-bottom: 7px solid transparent;
}

/* ================ 人物カード（旧） ================ */
.people-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.person-card {
  background-color: var(--paper-card);
  background: #ffffff;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--wine);
  border-radius: 3px;
  padding: 14px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow:
    inset 0 0 0 1px rgba(255,253,247,0.5),
    0 2px 6px rgba(0, 0, 0, 0.08);
  position: relative;
}
.person-card:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 0 0 1px rgba(255,253,247,0.5),
    0 1px 3px rgba(0, 0, 0, 0.06);
}
.person-avatar {
  width: 80px;
  height: 80px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--paper-warm), var(--rule));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--wine);
  flex-shrink: 0;
  border: 1px solid var(--gold);
  overflow: hidden;
  background-size: cover;
  background-position: center top;
  font-family: var(--font-jp);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.person-avatar.has-image { background-color: transparent; }
.person-body { flex: 1; min-width: 0; padding-right: 28px; }
.person-name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--ink);
  font-family: var(--font-jp);
  letter-spacing: 0.03em;
}
.person-meta {
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}
.person-summary {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ================ タグ一覧 ================ */
.tags-list {
  display: block;
}
.tag-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 10px;
  min-height: 72px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  background: var(--paper-card);
  border: 1px solid var(--wine);
  color: var(--wine);
  transition: transform 0.1s, background 0.15s, color 0.15s;
  font-family: var(--font-jp);
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  text-align: center;
}
.tag-chip:active {
  transform: scale(0.97);
  background: var(--wine);
  color: var(--gold-light);
}
.tag-count {
  font-size: 10px;
  color: var(--ink-3);
  font-weight: 400;
  letter-spacing: 0.05em;
}
.tag-chip:active .tag-count { color: var(--gold-light); }

/* ================ 人物詳細（SNSプロフィール風） ================ */
.profile-cover {
  height: 180px;
  background-size: cover;
  background-position: center 20%;
  position: relative;
  margin: -16px -16px 0;
  border-radius: 0;
  overflow: hidden;
}
/* 画像モード時のオーバーレイ（旧仕様用・未使用） */
.profile-cover:not(.profile-cover-typo)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%);
}
/* 名前を主役にしたタイポグラフィ版カバー */
.profile-cover-typo {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(184,149,46,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(74,24,34,0.4) 0%, transparent 70%),
    linear-gradient(135deg, #3a0f18 0%, #4a1822 40%, #2a0810 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.profile-cover-typo::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(184,149,46,0.04) 0px, rgba(184,149,46,0.04) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(-45deg, rgba(184,149,46,0.04) 0px, rgba(184,149,46,0.04) 1px, transparent 1px, transparent 40px);
  pointer-events: none;
}
.profile-cover-frame {
  position: relative;
  text-align: center;
  color: var(--gold-light);
  padding: 14px 30px;
  border-top: 1px solid rgba(184,149,46,0.35);
  border-bottom: 1px solid rgba(184,149,46,0.35);
  max-width: 90%;
}
.profile-cover-orn-top,
.profile-cover-orn-bot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: rgba(184,149,46,0.7);
  letter-spacing: 0.4em;
  background: linear-gradient(135deg, #3a0f18, #4a1822);
  padding: 0 10px;
  font-family: var(--font-en);
}
.profile-cover-orn-top { top: -7px; }
.profile-cover-orn-bot { bottom: -7px; }
.profile-cover-name {
  font-family: var(--font-jp);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--gold-light);
  text-shadow: 0 2px 4px rgba(0,0,0,0.6), 0 0 20px rgba(184,149,46,0.2);
  line-height: 1.2;
  padding: 8px 0 4px;
}
.profile-cover-name-en {
  font-family: var(--font-en);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: rgba(245,222,179,0.7);
  margin-top: 2px;
}
.profile-cover-dates {
  font-family: var(--font-en);
  font-size: 11px;
  color: rgba(245,222,179,0.55);
  letter-spacing: 0.2em;
  margin-top: 4px;
}
@media (min-width: 900px) {
  .profile-cover-name { font-size: 44px; letter-spacing: 0.25em; }
  .profile-cover-name-en { font-size: 16px; }
  .profile-cover-dates { font-size: 13px; }
  .profile-cover-frame { padding: 18px 48px; }
}
@media (max-width: 520px) {
  .profile-cover { height: auto !important; min-height: 160px; }
  .profile-cover-typo { padding: 22px 16px 26px; }
  .profile-cover-frame {
    padding: 10px 18px;
    max-width: 100%;
  }
  .profile-cover-orn-top,
  .profile-cover-orn-bot {
    font-size: 8px;
    letter-spacing: 0.3em;
    padding: 0 8px;
  }
  .profile-cover-name {
    font-size: 22px;
    letter-spacing: 0.12em;
    padding: 2px 0;
    line-height: 1.3;
  }
  .profile-cover-name-en { font-size: 10px; letter-spacing: 0.08em; }
  .profile-cover-dates { font-size: 9px; letter-spacing: 0.15em; margin-top: 3px; }
}
@media (max-width: 360px) {
  .profile-cover-name { font-size: 18px; }
}
.profile-cover-caption {
  position: absolute;
  left: 14px;
  bottom: 10px;
  z-index: 2;
  color: #fff;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 11px;
  font-family: var(--font-jp);
  letter-spacing: 0.05em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-header {
  position: relative;
  padding: 0 4px 12px;
  margin-bottom: 0;
}
.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-size: cover;
  background-position: center top;
  background-color: var(--paper-warm);
  border: 3px solid var(--paper);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  margin-top: -40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--wine);
  font-family: var(--font-jp);
}
.profile-names {
  margin-top: 8px;
}
.profile-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  font-family: var(--font-jp);
  letter-spacing: 0.05em;
}
.profile-handle {
  font-size: 13px;
  color: var(--ink-4);
  font-family: var(--font-en);
  font-style: italic;
}
.profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--font-jp);
}
.profile-meta span::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-4);
  margin-right: 4px;
  vertical-align: middle;
}
.profile-bio {
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-2);
  margin: 10px 0;
  font-family: var(--font-jp);
}
.profile-stats {
  display: flex;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 12px;
}
.profile-stat {
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--font-jp);
}
.profile-stat strong {
  font-size: 15px;
  color: var(--ink);
  font-weight: 700;
  margin-right: 2px;
}
/* プロフィール内ミニタブ */
.profile-tabs {
  display: flex;
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tab {
  flex: 0 0 auto;
  padding: 10px 14px;
  text-align: center;
  font-size: 13px;
  font-family: var(--font-jp);
  font-weight: 600;
  color: var(--ink-3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  outline: none;
}
.profile-tab:focus { outline: none; }
.profile-tab:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
  border-radius: 3px;
}
.profile-tab.active {
  color: var(--wine);
  border-bottom-color: var(--wine);
}
.profile-tab-content { display: none; padding-top: 12px; }
.profile-tab-content.active { display: block; }
/* 投稿フィード（プロフィール内LINE風） */
.profile-feed {
  background: #8caab5;
  border-radius: 8px;
  padding: 10px 8px;
}
/* 旧スタイルの後方互換 */
.person-header { display: none; }
.person-summary-full { display: none; }

/* ================ セクション見出し ================ */
.section-heading {
  font-size: 13px;
  color: var(--wine);
  font-weight: 700;
  letter-spacing: 0.3em;
  margin: 26px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--wine);
  position: relative;
  font-family: var(--font-jp);
}
.section-heading::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 1px;
  background: var(--gold);
}

/* ================ 名言ブロック ================ */
.quotes-section { margin-bottom: 10px; }
.quote { position: relative; }
.quote .fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 18px;
  z-index: 2;
}
.quote {
  background: #ffffff;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--wine);
  padding: 18px 18px 14px;
  margin-bottom: 14px;
  border-radius: 2px;
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(184,149,46,0.3),
    0 1px 4px rgba(0, 0, 0, 0.08);
}
.quote::before {
  content: '”';
  position: absolute;
  top: -8px;
  left: 10px;
  font-size: 56px;
  color: var(--wine);
  opacity: 0.3;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1;
}
.quote-text {
  font-size: 16px;
  line-height: 1.95;
  color: var(--ink);
  font-family: var(--font-jp);
  padding-left: 26px;
  margin-bottom: 10px;
  letter-spacing: 0.03em;
}
.quote-source {
  font-size: 11px;
  color: var(--ink-3);
  text-align: right;
  letter-spacing: 0.05em;
  font-style: italic;
}

/* ================ 年表（出来事） ================ */
.timeline {
  position: relative;
  padding-left: 26px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--rule) 100%);
}
.event {
  position: relative;
  margin-bottom: 24px;
}
.event::before {
  content: '';
  position: absolute;
  left: -26px;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--wine);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--gold);
}
.event-year {
  font-size: 11px;
  color: var(--wine);
  margin-bottom: 5px;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.event-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 8px;
  color: var(--ink);
  font-family: var(--font-jp);
  padding-right: 32px;
}
.event-detail {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.9;
  margin-bottom: 10px;
  font-family: var(--font-jp);
}
.event-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.event-tag {
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 10px;
  background: var(--paper-card);
  color: var(--wine);
  border: 1px solid var(--wine);
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ================ つぶやきタイムライン（LINE風） ================ */
.line-chat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
  background: #8caab5;
  border-radius: 8px;
  padding: 12px 10px;
}
/* 日付ラベル */
.line-date {
  text-align: center;
  font-size: 11px;
  color: #fff;
  background: rgba(0,0,0,0.15);
  border-radius: 16px;
  padding: 4px 12px;
  margin: 8px auto;
  font-family: var(--font-en);
  width: fit-content;
}
/* ---- 左側（偉人のメッセージ） ---- */
.line-msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 85%;
}
.line-msg-avatar { cursor: pointer; }
.line-msg-avatar {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background-size: cover;
  background-position: center top;
  background-color: var(--paper-warm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--wine);
  font-family: var(--font-jp);
  border: 1px solid rgba(255,255,255,0.3);
}
.line-msg-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.line-msg-name {
  font-size: 11px;
  color: #fff;
  font-family: var(--font-jp);
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  padding-left: 4px;
}
.line-bubble {
  position: relative;
  background: #fff;
  border-radius: 0 16px 16px 16px;
  padding: 10px 14px;
  font-size: 13px;
  color: #333;
  font-family: var(--font-jp);
  line-height: 1.75;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  word-break: break-word;
}
.line-bubble::before {
  content: '';
  position: absolute;
  top: 0;
  left: -8px;
  border-width: 0 8px 8px 0;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
}
.line-bubble-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 4px;
  color: #1a1a1a;
}
/* 名言 */
.line-bubble-quote {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: 0.03em;
  line-height: 1.9;
}
.line-bubble-source {
  font-size: 10px;
  color: #999;
  font-family: var(--font-en);
  font-style: italic;
  text-align: right;
  margin-top: 4px;
}
.line-bubble-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.line-bubble-tags .event-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(122,46,58,0.08);
  color: var(--wine);
  cursor: pointer;
}
.line-msg-meta {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  align-self: flex-end;
  flex-shrink: 0;
  padding-bottom: 2px;
}
.line-msg-time {
  font-size: 10px;
  color: rgba(255,255,255,0.7);
  font-family: var(--font-en);
  white-space: nowrap;
}
/* コメントボタン */
.line-comment-btn {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  color: rgba(255,255,255,0.6);
  padding: 2px;
  transition: color 0.2s;
}
.line-comment-btn:hover { color: #fff; }
.line-comment-btn.has-comments { color: #ffe066; }
/* ---- 右側（ユーザーのコメント） ---- */
.line-msg-right {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  max-width: 85%;
  margin-left: auto;
}
.line-bubble-green {
  position: relative;
  background: #8de86d;
  border-radius: 16px 0 16px 16px;
  padding: 10px 14px;
  font-size: 13px;
  color: #1a1a1a;
  font-family: var(--font-jp);
  line-height: 1.75;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  word-break: break-word;
}
.line-bubble-green::before {
  content: '';
  position: absolute;
  top: 0;
  right: -8px;
  border-width: 0 0 8px 8px;
  border-style: solid;
  border-color: transparent transparent transparent #8de86d;
}
.line-comment-time {
  font-size: 10px;
  color: rgba(255,255,255,0.7);
  font-family: var(--font-en);
  align-self: flex-end;
  flex-shrink: 0;
  padding-bottom: 2px;
}
/* コメント入力エリア */
.line-comment-input-area {
  display: none;
  padding: 0 10px 0 54px;
  margin-top: 4px;
}
.line-comment-input-area.open { display: flex; gap: 6px; }
.line-comment-input {
  flex: 1;
  border: none;
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 13px;
  font-family: var(--font-jp);
  background: #fff;
  outline: none;
}
.line-comment-send {
  background: #8de86d;
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.line-comment-send:active { background: #6bc74e; }

/* ================ ルーティン比較ページ ================ */
.routine-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.routine-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-2);
  font-family: var(--font-jp);
  padding: 4px 10px;
  background: #fffdf6;
  border: 1px solid var(--rule);
  border-radius: 14px;
}
.routine-legend-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.routine-legend-label { font-size: 12px; }
.routine-legend-del {
  background: none;
  border: none;
  color: var(--ink-4);
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.routine-legend-del:hover { color: #e0245e; }
.routine-legend-add {
  padding: 4px 10px;
  background: transparent;
  border: 1px dashed var(--wine);
  border-radius: 14px;
  font-size: 12px;
  color: var(--wine);
  cursor: pointer;
  font-family: var(--font-jp);
}
.routine-legend-add:hover { background: var(--wine); color: #fff; }

/* ================ 広告枠（ホーム・人物詳細） ================ */
.ad-slot {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 2px dashed var(--gold);
  border-radius: 10px;
  padding: 16px 18px;
  background:
    repeating-linear-gradient(45deg, rgba(184,149,46,0.03) 0px, rgba(184,149,46,0.03) 10px, transparent 10px, transparent 20px),
    #fffdf6;
  transition: all 0.2s;
  cursor: pointer;
}
.ad-slot:hover {
  border-color: var(--wine);
  background:
    repeating-linear-gradient(45deg, rgba(122,46,58,0.04) 0px, rgba(122,46,58,0.04) 10px, transparent 10px, transparent 20px),
    #fff8e8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.ad-slot-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.ad-slot-badge {
  flex-shrink: 0;
  background: var(--gold);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: var(--font-en);
}
.ad-slot-main { flex: 1; min-width: 0; }
.ad-slot-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  color: var(--wine);
  margin-bottom: 4px;
  letter-spacing: 0.05em;
}
.ad-slot-sub {
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--font-jp);
  line-height: 1.6;
  margin-bottom: 8px;
}
.ad-slot-cta {
  display: inline-block;
  font-size: 11px;
  color: var(--wine);
  font-family: var(--font-jp);
  text-decoration: none;
  font-weight: 600;
}

/* ================ イベント・グッズ タブ ================ */
.happenings-intro {
  color: var(--ink-3);
  font-size: 12px;
  margin: 10px 0 14px;
  text-align: center;
  font-family: var(--font-jp);
}
.happenings-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.happening-card {
  background: #fffdf6;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--wine);
  border-radius: 6px;
  padding: 14px 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}
.happening-type {
  font-size: 10px;
  color: var(--wine);
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 4px;
  font-family: var(--font-jp);
}
.happening-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 6px;
}
.happening-venue, .happening-period {
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--font-jp);
  margin-bottom: 2px;
}
.happening-desc {
  font-size: 12px;
  color: var(--ink-2);
  font-family: var(--font-jp);
  line-height: 1.6;
  margin-top: 6px;
}
.happening-links {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.happening-btn {
  display: inline-block;
  padding: 5px 12px;
  font-size: 11px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink-2);
  font-family: var(--font-jp);
  white-space: nowrap;
}
.happening-btn-main {
  background: var(--wine);
  color: #fff;
  border-color: var(--wine);
  font-weight: 600;
}
.happening-btn:hover { background: #fffdf6; }
.happening-btn-main:hover { background: var(--wine-dark); color: #fff; }

.happenings-empty {
  text-align: center;
  padding: 30px 20px;
  background: #fffdf6;
  border: 1px dashed var(--rule);
  border-radius: 8px;
}
.happenings-empty-icon { font-size: 42px; margin-bottom: 8px; }
.happenings-empty-title {
  font-family: var(--font-jp);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  font-size: 14px;
}
.happenings-empty-text {
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--font-jp);
  line-height: 1.7;
  margin-bottom: 14px;
}
.happenings-empty-links {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.happenings-ad-slot {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 2px dashed var(--gold);
  border-radius: 8px;
  text-align: left;
  margin-top: 16px;
}

/* ルーティン編集：時間帯追加・カテゴリ追加ボタン */
.routine-edit-btn-row {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}
.routine-edit-btn-row .routine-edit-add { flex: 1; margin: 0; }
.routine-edit-addcat {
  background: transparent !important;
  color: var(--gold) !important;
  border: 1px dashed var(--gold) !important;
}
.routine-edit-addcat:hover {
  background: var(--gold) !important;
  color: #fff !important;
}

/* ================ アカウント（ログイン/登録） ================ */
.account-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--gold);
  border-radius: 14px;
  color: var(--gold-light);
  font-size: 11px;
  font-family: var(--font-jp);
  cursor: pointer;
  transition: all 0.15s;
  margin-left: 8px;
}
.account-badge:hover { background: var(--gold); color: #fff; }
.account-badge.logged-in {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}
.acc-icon { font-size: 13px; }
.acc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3fd18c;
  display: inline-block;
  box-shadow: 0 0 4px #3fd18c;
}
.acc-name {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.auth-modal.open { opacity: 1; pointer-events: auto; }
.auth-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20,15,10,0.55);
  backdrop-filter: blur(3px);
}
.auth-modal-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  transition: transform 0.2s;
  width: min(92vw, 420px);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  padding: 28px 28px 24px;
}
.auth-modal.open .auth-modal-panel { transform: translate(-50%, -50%) scale(1); }
.auth-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 22px;
  color: var(--ink-3);
  cursor: pointer;
  line-height: 1;
}
.auth-head { text-align: center; margin-bottom: 18px; }
.auth-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 20px;
  color: var(--wine);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.auth-sub {
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--font-jp);
  line-height: 1.6;
}
.auth-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 18px;
}
.auth-tab {
  flex: 1;
  padding: 10px 0;
  background: none;
  border: none;
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--ink-3);
  cursor: pointer;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.auth-tab.active { color: var(--wine); border-bottom-color: var(--wine); }
.auth-label {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--font-jp);
  margin-bottom: 14px;
}
.auth-label input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin-top: 5px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-jp);
  box-sizing: border-box;
  outline: none;
}
.auth-label input:focus { border-color: var(--wine); }
.auth-submit {
  width: 100%;
  padding: 12px;
  background: var(--wine);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-jp);
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.1em;
}
.auth-submit:hover { background: var(--wine-dark); }
.auth-divider {
  display: flex;
  align-items: center;
  margin: 16px 0;
  color: var(--ink-4);
  font-size: 11px;
  font-family: var(--font-jp);
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.auth-divider span { padding: 0 12px; }
.auth-google {
  width: 100%;
  padding: 11px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--font-jp);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink);
}
.auth-google:hover { background: #fffdf6; border-color: var(--wine); }
.auth-google-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4285F4, #EA4335 40%, #FBBC05 70%, #34A853);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-family: var(--font-en);
  font-size: 12px;
}
.auth-error {
  color: #c4302b;
  font-size: 12px;
  font-family: var(--font-jp);
  margin-top: 10px;
  text-align: center;
}
.auth-footnote {
  font-size: 10px;
  color: var(--ink-4);
  font-family: var(--font-jp);
  text-align: center;
  margin-top: 14px;
  line-height: 1.6;
}
.auth-menu { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.auth-menu-btn {
  padding: 12px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: var(--font-jp);
  font-size: 13px;
  cursor: pointer;
  color: var(--ink);
}
.auth-menu-btn:hover { background: #fffdf6; }
.auth-menu-danger { color: #c4302b; border-color: #c4302b; }
.auth-menu-danger:hover { background: #c4302b; color: #fff; }

/* ================ 未ログイン通知バナー ================ */
.login-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 16px 0;
  padding: 12px 14px;
  background: linear-gradient(135deg, #fff8e1 0%, #ffe8b3 100%);
  border: 1px solid var(--gold);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(184,149,46,0.2);
  position: relative;
}
.login-notice-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.login-notice-text { flex: 1; min-width: 0; }
.login-notice-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 13px;
  color: var(--wine);
  margin-bottom: 3px;
}
.login-notice-sub {
  font-family: var(--font-jp);
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.6;
}
.login-notice-btn {
  padding: 8px 14px;
  background: var(--wine);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-family: var(--font-jp);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.login-notice-btn:hover { background: var(--wine-dark); }
.login-notice-close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: none;
  color: var(--ink-4);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}
@media (max-width: 520px) {
  .login-notice { flex-wrap: wrap; padding: 10px 12px 12px; }
  .login-notice-text { flex-basis: calc(100% - 40px); }
  .login-notice-btn { width: 100%; padding: 10px; font-size: 12px; margin-top: 6px; }
}

/* ================ AIに相談 ================ */
.ai-consult-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 22px;
  background: linear-gradient(135deg, #4a1822 0%, #7a2e3a 60%, #b8952e 180%);
  border: none;
  border-radius: 12px;
  color: var(--gold-light);
  cursor: pointer;
  text-align: left;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 14px rgba(122,46,58,0.3);
  font-family: var(--font-jp);
}
.ai-consult-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(122,46,58,0.4); }
.ai-consult-icon {
  font-size: 32px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.ai-consult-texts { flex: 1; min-width: 0; }
.ai-consult-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--gold-light);
  margin-bottom: 3px;
}
.ai-consult-sub {
  font-size: 11px;
  color: rgba(255,240,200,0.85);
  letter-spacing: 0.05em;
}
.ai-consult-arrow {
  font-size: 22px;
  color: var(--gold-light);
  flex-shrink: 0;
}

.ai-panel { max-width: 520px; }
.ai-label-text {
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 700;
  color: var(--wine);
  letter-spacing: 0.1em;
  display: block;
  margin-top: 10px;
  margin-bottom: 6px;
}
.ai-panel textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: var(--font-jp);
  font-size: 14px;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}
.ai-panel textarea:focus { border-color: var(--wine); }
.ai-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.ai-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  font-size: 11px;
  color: var(--ink-3);
  background: #fff;
  cursor: pointer;
  font-family: var(--font-jp);
}
.ai-cat-chip:has(input:checked) {
  background: var(--wine);
  color: #fff;
  border-color: var(--wine);
}
.ai-cat-chip input { display: none; }

.ai-gate, .ai-content, .ai-result { margin-top: 4px; }
.hidden { display: none !important; }
.ai-gate-block {
  text-align: center;
  padding: 24px 12px;
}
.ai-gate-icon {
  font-size: 42px;
  margin-bottom: 10px;
}
.ai-gate-title {
  font-family: var(--font-jp);
  font-weight: 700;
  color: var(--ink);
  font-size: 16px;
  margin-bottom: 10px;
}
.ai-gate-text {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.8;
  font-family: var(--font-jp);
  margin-bottom: 16px;
}

.ai-loading {
  text-align: center;
  padding: 40px 0;
  font-size: 18px;
  color: var(--wine);
  font-family: var(--font-jp);
  letter-spacing: 0.3em;
}
.ai-result-intro {
  font-size: 13px;
  color: var(--ink-2);
  font-family: var(--font-jp);
  margin-bottom: 8px;
  line-height: 1.6;
}
.ai-result-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
.ai-result-tag {
  font-size: 11px;
  padding: 2px 8px;
  background: #fff3e6;
  color: var(--wine);
  border-radius: 10px;
  font-family: var(--font-jp);
}
.ai-result-message {
  font-size: 14px;
  font-family: var(--font-jp);
  color: var(--ink);
  font-weight: 700;
  margin: 10px 0 14px;
}
.ai-result-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-result-card {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  padding: 12px;
  background: #fffdf6;
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
}
.ai-result-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--wine);
  background-size: cover;
  background-position: center top;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 22px;
}
.ai-result-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ai-result-name {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.ai-result-field {
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--font-jp);
}
.ai-result-reason {
  font-size: 12px;
  color: var(--ink-2);
  font-family: var(--font-jp);
  line-height: 1.5;
  margin-top: 3px;
}
.ai-result-open {
  align-self: flex-start;
  margin-top: 8px;
  padding: 5px 12px;
  background: var(--wine);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 11px;
  font-family: var(--font-jp);
  cursor: pointer;
}
.ai-result-open:hover { background: var(--wine-dark); }
.ai-result-footnote {
  font-size: 10px;
  color: var(--ink-4);
  font-family: var(--font-jp);
  margin-top: 14px;
  text-align: center;
  line-height: 1.7;
}
.ai-result-empty {
  text-align: center;
  padding: 24px 0;
  color: var(--ink-3);
  font-family: var(--font-jp);
  font-size: 13px;
}

/* ================ 応援する（投げ銭） ================ */
.support-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  background: linear-gradient(135deg, #fffdf6 0%, #fbf3e0 100%);
  border: 1px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(184,149,46,0.15);
}
.support-icon {
  font-size: 34px;
  flex-shrink: 0;
  line-height: 1;
}
.support-texts { flex: 1; min-width: 0; }
.support-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 14px;
  color: var(--wine);
  margin-bottom: 5px;
  letter-spacing: 0.05em;
}
.support-sub {
  font-size: 12px;
  color: var(--ink-2);
  font-family: var(--font-jp);
  line-height: 1.7;
  margin-bottom: 12px;
}
.support-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.support-btn {
  display: inline-block;
  padding: 7px 14px;
  background: var(--wine);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-jp);
  font-size: 11px;
  font-weight: 600;
  border-radius: 14px;
  letter-spacing: 0.04em;
  transition: all 0.15s;
}
.support-btn:hover { background: var(--wine-dark); transform: translateY(-1px); }
.support-btn-coffee {
  background: #ffdd00;
  color: #2a2a2a;
}
.support-btn-coffee:hover { background: #ffc400; color: #2a2a2a; }
.support-btn-sub {
  background: transparent;
  color: var(--ink-3);
  border: 1px solid var(--rule);
}
.support-btn-sub:hover { background: #fff; color: var(--wine); border-color: var(--wine); }

/* TOP用のコンパクト広告枠 */
.home-block-ad-top { margin-top: 4px; margin-bottom: 14px; }
.ad-slot-compact { padding: 10px 14px; }
.ad-slot-compact .ad-slot-title { font-size: 13px; margin-bottom: 2px; }
.ad-slot-compact .ad-slot-sub { font-size: 11px; margin-bottom: 0; }

/* 今日の気分下のAI誘導ボタン */
.mood-ai-more {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 22px;
  margin-top: 18px;
  background: #fffdf6;
  color: var(--ink);
  border: 2px solid var(--wine);
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-jp);
  text-align: left;
  transition: all 0.18s;
  position: relative;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}
.mood-ai-more::before {
  content: 'NEW';
  position: absolute;
  top: -10px;
  right: 16px;
  background: var(--gold);
  color: #fff;
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 10px;
  letter-spacing: 0.1em;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.mood-ai-more:hover {
  background: var(--wine);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(122,46,58,0.3);
}
.mood-ai-more:hover .mood-ai-title,
.mood-ai-more:hover .mood-ai-arrow { color: #fff; }
.mood-ai-more:hover .mood-ai-sub { color: rgba(255,240,220,0.85); }

.mood-ai-icon {
  font-size: 32px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
}
.mood-ai-texts { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mood-ai-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--wine);
  line-height: 1.4;
  margin-bottom: 4px;
}
.mood-ai-sub {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.5;
}
.mood-ai-arrow {
  font-size: 20px;
  color: var(--wine);
  flex-shrink: 0;
  font-weight: 700;
}

/* 感情の本棚の説明文 */
.search-section-desc {
  color: var(--ink-3);
  font-size: 12px;
  margin: 4px 0 14px;
  line-height: 1.7;
  font-family: var(--font-jp);
  padding: 0 4px;
}
/* ルーティンカード */
.routine-card {
  position: relative;
  background: var(--paper-card);
  border: 1px solid #c4b68a;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 18px;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.12),
    0 4px 12px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}
.routine-card:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 3px rgba(0,0,0,0.12),
    0 2px 6px rgba(0,0,0,0.08);
}
.routine-card .fav-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 20px;
  z-index: 2;
}
.routine-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.routine-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-size: cover;
  background-position: center top;
  background-color: var(--paper-warm);
  border: 2px solid var(--wine);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--wine);
  font-family: var(--font-jp);
  flex-shrink: 0;
}
.routine-card-info { flex: 1; }
.routine-person-name {
  font-size: 16px;
  color: var(--ink);
  font-family: var(--font-jp);
  font-weight: 700;
  margin-bottom: 2px;
}
.routine-person-sub {
  font-size: 13px;
  color: var(--ink-3);
  font-family: var(--font-jp);
}
/* 24hバー（色のみ・ラベルなし） */
.routine-bar {
  display: flex;
  height: 18px;
  border-radius: 9px;
  overflow: hidden;
  margin-bottom: 10px;
}
.routine-bar-seg {
  height: 100%;
  position: relative;
}
.routine-bar-seg-label { display: none; }
/* アクティビティリスト */
/* ================ 折りたたみルーティン ================ */
.routine-collapsible {
  margin: 20px 0;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #ffffff;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.routine-collapsible[open] {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.routine-summary {
  list-style: none;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(90deg, rgba(184,149,46,0.08), rgba(122,46,58,0.04));
  user-select: none;
  transition: background 0.15s;
}
.routine-summary::-webkit-details-marker { display: none; }
.routine-summary:hover {
  background: linear-gradient(90deg, rgba(184,149,46,0.15), rgba(122,46,58,0.08));
}
.section-heading-inline {
  font-size: 14px;
  font-weight: 800;
  color: var(--wine);
  font-family: var(--font-jp);
  letter-spacing: 0.25em;
  flex: 1;
}
.routine-summary-hint {
  font-size: 10px;
  color: var(--ink-4);
  font-family: var(--font-jp);
  font-style: italic;
}
.routine-summary-arrow {
  color: var(--wine);
  font-size: 16px;
  transition: transform 0.2s;
}
.routine-collapsible[open] .routine-summary-arrow {
  transform: rotate(180deg);
}
.routine-collapsible[open] .routine-summary-hint {
  display: none;
}
.routine-collapsible > .routine-story,
.routine-collapsible > .routine-source,
.routine-collapsible > .routine-bar,
.routine-collapsible > .rcal-wrap {
  margin-left: 16px;
  margin-right: 16px;
}
.routine-collapsible > .routine-bar { margin-top: 16px; }
.routine-collapsible > .rcal-wrap { margin-bottom: 16px; }

/* ================ カレンダー風ルーティン ================ */
.rcal-wrap {
  margin-top: 14px;
  max-height: 520px;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: #fffdf6;
  box-shadow: inset 0 0 0 1px rgba(184,149,46,0.1);
}
.rcal {
  display: flex;
  position: relative;
  padding-top: 10px;
  background:
    repeating-linear-gradient(180deg, transparent 0, transparent 43px, rgba(0,0,0,0.06) 43px, rgba(0,0,0,0.06) 44px);
  background-position: 0 10px;
}
.rcal-ruler {
  width: 64px;
  flex-shrink: 0;
  position: relative;
  border-right: 1px solid var(--rule);
  background: #fffcf3;
}
.rcal-hour-line {
  position: absolute;
  left: 0; right: 0;
  height: 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  pointer-events: none;
}
.rcal-hour-label {
  position: absolute;
  top: -8px;
  right: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  font-family: var(--font-en);
  background: #fffcf3;
  padding: 1px 5px;
  letter-spacing: 0.03em;
  line-height: 1;
}
.rcal-events {
  flex: 1;
  min-width: 0;
  position: relative;
}
.rcal-event {
  position: absolute;
  left: 4px;
  right: 8px;
  border-radius: 3px;
  color: #ffffff;
  padding: 4px 8px;
  font-family: var(--font-jp);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.15),
    0 1px 3px rgba(0,0,0,0.2);
  transition: filter 0.15s;
  cursor: default;
}
.rcal-event:hover { filter: brightness(1.08); }
.rcal-event-time {
  font-size: 11px;
  opacity: 0.95;
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.rcal-event-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
/* 短時間のブロックはコンパクト表示（1時間以下） */
.rcal-event.rcal-event-compact {
  padding: 3px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rcal-event.rcal-event-compact .rcal-event-time { margin-bottom: 0; font-size: 10px; flex-shrink: 0; }
.rcal-event.rcal-event-compact .rcal-event-title { font-size: 12px; }

.routine-activities {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 10px;
  padding-left: 8px;
  position: relative;
}
.routine-activities::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--rule-soft);
}
.routine-act {
  display: grid;
  grid-template-columns: 46px 14px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--ink-2);
  font-family: var(--font-jp);
  line-height: 1.6;
  border-bottom: 1px dotted var(--rule-soft);
}
.routine-act > span:last-child {
  word-break: break-word;
}
.routine-act:last-child { border-bottom: none; }
.routine-act-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px var(--rule-soft);
  align-self: center;
  justify-self: center;
}
.routine-act-time {
  font-family: var(--font-en);
  color: var(--wine);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: right;
  white-space: nowrap;
}
/* カテゴリ色 */
.routine-cat-sleep    { background: #1e2a3a; }
.routine-cat-work     { background: var(--wine); }
.routine-cat-meal     { background: var(--gold); }
.routine-cat-exercise { background: #3d6b4b; }
.routine-cat-social   { background: #3a5a8c; }
.routine-cat-rest     { background: #a09080; }

/* 人物詳細内のルーティン */
.person-routine {
  margin: 20px 0;
}
.person-routine .routine-bar {
  height: 32px;
  border-radius: 6px;
}
.person-routine .routine-bar-seg-label {
  font-size: 9px;
}
.routine-detail-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.routine-detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-2);
  font-family: var(--font-jp);
}
.routine-detail-time {
  font-family: var(--font-en);
  color: var(--ink-3);
  font-size: 11px;
  min-width: 70px;
}
.routine-detail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ================ 書籍カード ================ */
.book-card {
  display: flex;
  gap: 12px;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.book-card-cover {
  width: 70px;
  height: 100px;
  flex-shrink: 0;
  border-radius: 4px;
  background: #e8e0d0;
  background-size: cover;
  background-position: center;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.15);
}
.book-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.book-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-jp);
  line-height: 1.4;
}
.book-card-author {
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--font-jp);
}
.book-card-desc {
  font-size: 12px;
  color: var(--ink-2);
  font-family: var(--font-jp);
  line-height: 1.6;
  flex: 1;
}
.book-card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: #ff9900;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-jp);
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.15s;
}
.book-card-link:active { background: #e68a00; }
/* TOPページ 本棚セクション */
.home-books {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px 12px;
  padding: 4px;
}
@media (min-width: 900px) {
  .home-books { grid-template-columns: repeat(6, 1fr); gap: 16px 12px; }
}
.home-book-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform 0.15s;
}
.home-book-card:active { transform: translateY(2px); }
.home-book-cover {
  width: 100%;
  aspect-ratio: 2 / 2.9;
  background: linear-gradient(135deg, #fffdf6 0%, #e8dcc8 100%);
  border-radius: 2px 5px 5px 2px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.2),
    4px 6px 14px rgba(0,0,0,0.3),
    2px 2px 4px rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
}
.home-book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.home-book-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(122,46,58,0.03) 0px, rgba(122,46,58,0.03) 2px, transparent 2px, transparent 8px),
    linear-gradient(135deg, #fffdf6 0%, #e8dcc8 100%);
  border-top: 4px solid var(--wine);
  border-bottom: 4px solid var(--wine);
}
.home-book-cover.no-cover .home-book-fallback { display: flex; }
.home-book-fallback-ornament {
  font-size: 18px;
  color: var(--gold);
  margin-bottom: 8px;
}
.home-book-fallback-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 11px;
  color: var(--wine);
  line-height: 1.4;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-book-fallback-author {
  font-family: var(--font-jp);
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
}
.home-book-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-jp);
  text-align: center;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-book-person {
  font-size: 10px;
  color: var(--ink-4);
  font-family: var(--font-jp);
}
.home-book-cover-wrap {
  position: relative;
  width: 100%;
}
.home-book-ribbon {
  position: absolute;
  top: 6px;
  left: -4px;
  z-index: 2;
  background: var(--wine);
  color: var(--gold-light);
  font-family: var(--font-jp);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 7px 3px 6px;
  border-radius: 0 2px 2px 0;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
  white-space: nowrap;
}
.home-book-ribbon::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 0;
  border: 2px solid var(--wine-dark);
  border-left-color: transparent;
  border-bottom-color: transparent;
}
/* 今日の言葉のお気に入りボタン */
.quote-of-the-day { position: relative; }
.qod-fav {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--gold);
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: all 0.15s;
}
.qod-fav:hover { transform: scale(1.2); }
.qod-fav.active { color: var(--wine); }
.qod-collection-link {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 14px;
  font-size: 11px;
  color: var(--wine);
  background: transparent;
  border: 1px solid var(--wine);
  border-radius: 14px;
  cursor: pointer;
  font-family: var(--font-jp);
  letter-spacing: 0.06em;
  transition: all 0.15s;
}
.qod-collection-link:hover {
  background: var(--wine);
  color: #fff;
}

/* ================ 映画・ドラマ（media）タブ ================ */
.media-intro {
  color: var(--ink-3);
  font-size: 12px;
  margin: 10px 0 14px;
  text-align: center;
  font-family: var(--font-jp);
}
.media-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.media-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: flex-start;
  background: #fffdf6;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  padding: 14px;
}
.media-card:has(.media-info:only-child),
.media-card:not(:has(.media-cover)) {
  grid-template-columns: 1fr;
}
/* Amazonパッケージ画像（縦長DVD/Blu-rayのジャケット想定） */
.media-cover {
  width: 90px;
  display: block;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.media-cover:hover { transform: translateY(-2px); }
.media-cover img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.12),
    0 2px 6px rgba(0,0,0,0.15);
  background: #e8e0d0;
}
@media (max-width: 520px) {
  .media-cover { width: 70px; }
}
/* 旧デザイン用（使われなくなるが保持） */
.media-thumb {
  background: #1a1a1a;
  background-size: cover;
  background-position: center;
  aspect-ratio: 16 / 10;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}
.media-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  background: rgba(0,0,0,0.25);
  transition: background 0.15s;
}
.media-thumb:hover .media-play { background: rgba(0,0,0,0.5); }
.media-thumb-fallback {
  font-size: 42px;
  color: #fff8;
}
.media-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.media-info {
  padding: 10px 12px 10px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.media-type {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--wine);
  font-weight: 700;
}
.media-title {
  font-family: var(--font-jp);
  font-weight: 700;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
}
.media-cast {
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--font-jp);
}
.media-desc {
  font-size: 11px;
  color: var(--ink-2);
  font-family: var(--font-jp);
  line-height: 1.5;
  margin-top: 2px;
}
.media-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.media-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 9px;
  font-size: 10px;
  border-radius: 11px;
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--ink-2);
  text-decoration: none;
  font-family: var(--font-jp);
  white-space: nowrap;
}
.media-btn-yt {
  background: #c4302b;
  color: #fff;
  border-color: #c4302b;
}
.media-btn-sub {
  background: transparent;
  color: var(--ink-3);
}
.media-btn-amazon {
  background: #ff9900;
  color: #fff;
  border-color: #ff9900;
  font-weight: 700;
}
.media-btn-amazon:hover { background: #e88a00; color: #fff; }
.media-btn-rakuten {
  background: #bf0000;
  color: #fff;
  border-color: #bf0000;
  font-weight: 700;
}
.media-btn-rakuten:hover { background: #990000; color: #fff; }
.media-btn-store {
  background: var(--wine);
  color: #fff;
  border-color: var(--wine);
  font-weight: 700;
}
.media-btn-store:hover { background: var(--wine-dark); color: #fff; }

/* ================ お知らせ（リリースノート） ================ */
.updates-feed {
  background: #fffdf6;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px 16px;
}
.updates-list { display: flex; flex-direction: column; gap: 10px; }
.updates-item {
  padding: 10px 0;
  border-bottom: 1px dashed var(--rule-soft);
}
.updates-item:last-child { border-bottom: none; }
.updates-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.updates-date {
  font-size: 10px;
  color: var(--ink-4);
  font-family: var(--font-en);
  letter-spacing: 0.05em;
}
.updates-tag {
  font-size: 9px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--ink-4);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-family: var(--font-jp);
}
.updates-tag-new { background: var(--wine); }
.updates-tag-add { background: var(--gold); }
.updates-tag-improve { background: #5e7254; }
.updates-tag-fix { background: #4a6b7a; }
.updates-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 3px;
}
.updates-body {
  font-size: 12px;
  color: var(--ink-2);
  font-family: var(--font-jp);
  line-height: 1.6;
}
.updates-more {
  margin-top: 4px;
}
.updates-more summary {
  font-size: 12px;
  color: var(--wine);
  cursor: pointer;
  text-align: center;
  padding: 8px;
  font-family: var(--font-jp);
  list-style: none;
}
.updates-more summary::-webkit-details-marker { display: none; }
.updates-more summary:hover { text-decoration: underline; }
.updates-list-more { margin-top: 10px; }
.updates-empty { color: var(--ink-4); text-align: center; font-family: var(--font-jp); padding: 10px; font-size: 13px; }

/* ================ 認証モーダル：利用規約リンク ================ */
.auth-legal {
  text-align: center;
  font-size: 10px;
  color: var(--ink-4);
  margin-top: 10px;
  font-family: var(--font-jp);
  line-height: 1.6;
}
.auth-legal a { color: var(--wine); text-decoration: underline; }

/* ================ フッター（利用規約リンク） ================ */
.home-footer {
  text-align: center;
  padding: 20px 0;
  border-top: 1px solid var(--rule-soft);
  margin-top: 24px;
}
.home-footer-links a {
  color: var(--ink-3);
  text-decoration: none;
  font-size: 11px;
  font-family: var(--font-jp);
  letter-spacing: 0.05em;
}
.home-footer-links a:hover { color: var(--wine); text-decoration: underline; }
.home-footer-sep { color: var(--ink-4); margin: 0 4px; font-size: 11px; }

/* ================================================================
   モバイル崩れ防止（520px以下）
   HP版の広いデザインが漏れないよう、モバイルは安全側に上書き
   ================================================================ */
@media (max-width: 520px) {
  /* 全般：はみ出し防止 */
  * { max-width: 100%; box-sizing: border-box; }
  img, video { max-width: 100%; height: auto; }

  /* 書籍カード（詳細版） — 縦積み */
  .book-card {
    grid-template-columns: 80px 1fr;
    gap: 12px;
    padding: 12px;
  }
  .book-card-cover-link { width: 80px; }
  .book-card-title-link { font-size: 14px; }
  .book-card-desc { font-size: 11px; }
  .book-card-actions { gap: 4px; }
  .book-card-link { font-size: 10px; padding: 4px 8px; }

  /* Amazon 書籍カード（タイムライン内） */
  .x-book-card {
    grid-template-columns: 70px 1fr;
    gap: 10px;
    padding: 10px;
  }
  .x-book-cover { width: 70px; }
  .x-book-title { font-size: 13px; }
  .x-book-amazon { padding: 6px 14px; font-size: 11px; }

  /* X タイムライン ポスト */
  .x-post { padding: 10px 12px; gap: 8px; }
  .x-post-title { font-size: 14px; }
  .x-post-text { font-size: 13px; }
  .x-post-actions { gap: 16px; }
  .x-post-media { aspect-ratio: 16/9; }

  /* Amazon購入カード */
  .media-card {
    grid-template-columns: 70px 1fr;
    gap: 10px;
    padding: 10px;
  }
  .media-cover { width: 70px; }
  .media-title { font-size: 14px; }
  .media-desc { font-size: 11px; }
  .media-links { gap: 4px; flex-wrap: wrap; }
  .media-btn { font-size: 10px; padding: 5px 10px; }

  /* ルーティンカード — アクションボタンが重ならないように */
  .routine-card-actions { gap: 6px; flex-wrap: wrap; }
  .routine-card-actions .routine-copy-btn,
  .routine-card-actions .routine-peek-btn { font-size: 10px; padding: 6px 8px; }

  /* イベント・グッズカード */
  .happening-title { font-size: 13px; }
  .happening-desc { font-size: 11px; }
  .happening-btn { font-size: 10px; padding: 4px 10px; }
  .happening-links { flex-wrap: wrap; gap: 4px; }

  /* AI相談ボタン */
  .ai-consult-card { padding: 14px 16px; gap: 10px; }
  .ai-consult-title { font-size: 13px; }
  .ai-consult-sub { font-size: 10px; }

  /* 応援カード */
  .support-card { padding: 14px 16px; gap: 10px; }
  .support-title { font-size: 13px; }
  .support-sub { font-size: 11px; }

  /* mood-ai-more 誘導ボタン */
  .mood-ai-more { padding: 14px 16px; }
  .mood-ai-title { font-size: 12px; }
  .mood-ai-sub { font-size: 9px; }

  /* 使い方ガイド */
  .howto-label { font-size: 13px; }
  .howto-body { padding: 0 14px 14px; }
  .howto-step-title { font-size: 12px; }
  .howto-step-desc { font-size: 11px; }

  /* お知らせ（リリースノート） */
  .updates-title { font-size: 13px; }
  .updates-body { font-size: 11px; }

  /* 今日の言葉（モバイルでは少し抑える） */
  .qod-text { font-size: 17px; line-height: 1.9; padding-left: 20px; }
  .qc-text { font-size: 13px; padding-left: 18px; }

  /* 人物詳細：本文パディング調整 */
  .profile-cover { height: 120px; }
  .profile-cover-name { font-size: 22px; letter-spacing: 0.12em; padding: 6px 0 3px; }
  .profile-cover-name-en { font-size: 11px; }
  .profile-cover-dates { font-size: 10px; }

  /* ヒーロー */
  .hero-frame { padding: 16px 12px 12px; }
  .hero-title { font-size: 19px; letter-spacing: 0.15em; margin-bottom: 8px; }
  .hero-ornament { font-size: 9px; letter-spacing: 0.1em; }
  .hero-tagline { font-size: 13px; letter-spacing: 0.12em; }
  .hero-sub { font-size: 11px; line-height: 1.7; }

  /* 詳細検索パネル */
  .adv-search-toggle { padding: 9px 12px; font-size: 11px; }
  .adv-search-panel { padding: 10px 12px; }

  /* アカウントバッジ（モバイル：小さめに表示してタイトルと両立） */
  .account-badge { padding: 3px 7px; font-size: 10px; }
  .acc-name { max-width: 44px; font-size: 10px; }

  /* ヘッダー：検索アイコンを小さくしてタイトル重なりを防止 */
  .app-header { padding: 14px 10px; }
  .app-header .icon-btn { width: 26px; height: 26px; font-size: 18px; }
  .app-header .header-right { gap: 4px; }

  /* ヘッダータイトル */
  .app-header h1 { font-size: 16px; letter-spacing: 0.15em; }

  /* 感情の本棚の説明 */
  .search-section-desc { font-size: 11px; padding: 0 8px; }
}

/* ================================================================
   超小型モバイル（360px以下・iPhone SE等）
   ================================================================ */
@media (max-width: 360px) {
  .app-header h1 { font-size: 14px; letter-spacing: 0.1em; }
  .account-badge .acc-name { display: none; }
  .book-card { grid-template-columns: 70px 1fr; }
  .book-card-cover-link { width: 70px; }
  .profile-cover-name { font-size: 18px; }
  .qod-text { font-size: 15px; }
}
.home-footer-copyright {
  text-align: center;
  font-size: 9px;
  color: var(--ink-4);
  font-family: var(--font-en);
  letter-spacing: 0.1em;
  margin-top: 8px;
  opacity: 0.7;
}
.tag-match-count {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 400;
  font-family: var(--font-jp);
  letter-spacing: 0.03em;
}

/* ================ 使い方ガイド ================ */
.howto-card {
  background: linear-gradient(135deg, #fffdf6 0%, #fbf3e0 100%);
  border: 1px solid var(--gold);
  border-radius: 12px;
  overflow: hidden;
}
.howto-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  cursor: pointer;
  font-family: var(--font-jp);
  list-style: none;
  transition: background 0.15s;
}
.howto-summary::-webkit-details-marker { display: none; }
.howto-summary:hover { background: rgba(184,149,46,0.08); }
.howto-icon { font-size: 22px; flex-shrink: 0; }
.howto-label {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--wine);
  letter-spacing: 0.05em;
}
.howto-arrow {
  color: var(--wine);
  font-size: 16px;
  transition: transform 0.25s;
}
.howto-card[open] .howto-arrow { transform: rotate(180deg); }

.howto-body {
  padding: 0 20px 18px;
  border-top: 1px dashed var(--rule);
  animation: howtoSlide 0.3s ease;
}
@keyframes howtoSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.howto-intro {
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.8;
  margin: 16px 0 20px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.7);
  border-left: 3px solid var(--wine);
  border-radius: 4px;
}
.howto-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  margin-bottom: 14px;
  align-items: flex-start;
}
.howto-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--wine);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}
.howto-step-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: 0.03em;
}
.howto-step-desc {
  font-family: var(--font-jp);
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.7;
}
.howto-tips {
  margin-top: 20px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.6);
  border-radius: 6px;
  border: 1px dashed var(--gold);
}
.howto-tips-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 13px;
  color: var(--wine);
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}
.howto-tips ul {
  padding-left: 1.2em;
  margin: 0;
}
.howto-tips li {
  font-family: var(--font-jp);
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.7;
  margin-bottom: 5px;
}
.howto-footer {
  font-family: var(--font-jp);
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.7;
  text-align: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--rule-soft);
}
.howto-footer a { color: var(--wine); }

/* ================ 聖地：画像表示 ================ */
.place-card.has-image { padding: 0; overflow: hidden; }
.place-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #e8e0d0;
}
.place-card.has-image .place-info { padding: 12px 14px; }
.place-card.has-image .place-pin { display: none; }

/* ================ 本の詳細カード（拡張版） ================ */
.books-intro {
  color: var(--ink-3);
  font-size: 12px;
  margin: 10px 0 14px;
  text-align: center;
  font-family: var(--font-jp);
}
.book-card {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding: 14px;
  background: #fffdf6;
  border: 1px solid var(--rule);
  border-radius: 8px;
  margin-bottom: 12px;
  align-items: start;
}
.book-card-cover-link {
  display: block;
  text-decoration: none;
  width: 100px;
  transition: transform 0.15s;
}
.book-card-cover-link:hover { transform: translateY(-2px); }
.book-card-cover-img {
  width: 100%;
  aspect-ratio: 2 / 2.9;
  object-fit: cover;
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.12),
    3px 4px 10px rgba(0,0,0,0.2);
}
.book-card-cover-placeholder {
  width: 100%;
  aspect-ratio: 2 / 2.9;
  background: linear-gradient(135deg, #fffdf6 0%, #e8dcc8 100%);
  border: 1px solid var(--rule);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: var(--ink-4);
}
.book-card-cover-link.no-cover .book-card-cover-placeholder { display: flex; }
.book-card-title-link {
  display: block;
  text-decoration: none;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 4px;
}
.book-card-title-link:hover { color: var(--wine); }
.book-card-author {
  font-size: 12px;
  color: var(--wine);
  font-family: var(--font-jp);
  margin-bottom: 2px;
}
.book-card-meta {
  font-size: 11px;
  color: var(--ink-4);
  font-family: var(--font-jp);
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}
.book-card-desc {
  font-size: 12px;
  color: var(--ink-2);
  font-family: var(--font-jp);
  line-height: 1.6;
  margin-bottom: 10px;
}
.book-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.book-card-link {
  display: inline-block;
  padding: 5px 10px;
  font-size: 11px;
  border-radius: 4px;
  text-decoration: none;
  font-family: var(--font-jp);
  font-weight: 600;
}
.book-card-amazon { background: #ff9900; color: #fff; }
.book-card-amazon:hover { background: #e88a00; color: #fff; }
.book-card-rakuten { background: #bf0000; color: #fff; }
.book-card-rakuten:hover { background: #990000; color: #fff; }
.book-card-sub { background: transparent; color: var(--ink-3); border: 1px solid var(--rule); }
.book-card-sub:hover { color: var(--wine); border-color: var(--wine); }
.work-btn-search {
  background: #fff;
  color: var(--wine);
  border: 1px solid var(--wine);
}
.work-btn-search:hover {
  background: var(--wine);
  color: #fff;
}
.work-btn-musescore {
  background: #1f88be;
  color: #fff;
  border-color: #1f88be;
}
.work-btn-imslp {
  background: #444;
  color: #fff;
  border-color: #444;
}
/* YouTube ID なしの作品カード（検索で聴ける） */
.work-music-search {
  text-decoration: none;
  color: inherit;
}
.work-thumb-placeholder {
  background: linear-gradient(135deg, #4a1822 0%, #7a2e3a 50%, #4a1822 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  position: relative;
  overflow: hidden;
}
.work-thumb-placeholder::before {
  content: '♪';
  position: absolute;
  font-size: 80px;
  color: rgba(184,149,46,0.15);
  font-family: var(--font-en);
}
.work-thumb-placeholder .work-play {
  font-size: 24px;
  background: rgba(255,255,255,0.12);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(184,149,46,0.5);
  z-index: 1;
}
.work-thumb-label {
  font-size: 11px;
  color: rgba(245,222,179,0.8);
  font-family: var(--font-jp);
  margin-top: 8px;
  letter-spacing: 0.08em;
  z-index: 1;
}
.work-iframe-fallback {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5px 8px;
  font-size: 10px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-family: var(--font-jp);
}
.work-iframe-fallback:hover { background: rgba(0,0,0,0.9); color: #ffdd00; }
.work-thumb { position: relative; }

/* ================ X（Twitter）風タイムライン ================ */
.x-feed {
  background: #fff;
  border: 1px solid var(--rule-soft);
  border-radius: 0;
}
.x-post {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule-soft);
  transition: background 0.15s;
  cursor: default;
}
.x-post:hover { background: rgba(122,46,58,0.03); }
.x-post:last-child { border-bottom: none; }
.x-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--paper-warm);
  background-size: cover;
  background-position: center top;
  flex-shrink: 0;
}
.x-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-jp);
  color: var(--wine);
  font-weight: 700;
  font-size: 18px;
}
.x-post-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.x-post-head {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 13px;
}
.x-post-name {
  font-family: var(--font-jp);
  font-weight: 800;
  color: var(--ink);
}
.x-post-verified {
  color: #1d9bf0;
  font-size: 13px;
  font-weight: 900;
}
.x-post-handle {
  color: var(--ink-4);
  font-family: var(--font-en);
  font-style: italic;
  font-size: 12px;
}
.x-post-dot { color: var(--ink-4); margin: 0 2px; }
.x-post-time {
  color: var(--ink-4);
  font-size: 12px;
  font-family: var(--font-jp);
}
.x-post-type {
  margin-left: auto;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(122,46,58,0.08);
  color: var(--wine);
  font-family: var(--font-jp);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.x-post-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.4;
  margin-top: 2px;
}
.x-post-text {
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}
.x-post-source {
  font-size: 12px;
  color: var(--ink-4);
  font-family: var(--font-jp);
  margin-top: 2px;
}
.x-post-media {
  margin-top: 8px;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #1a1a1a;
  background-size: cover;
  background-position: center;
  border-radius: 14px;
  border: 1px solid var(--rule-soft);
}
.x-post-embed-link {
  display: inline-block;
  margin-top: 8px;
  color: #1d9bf0;
  font-size: 13px;
  font-family: var(--font-jp);
  text-decoration: none;
  font-weight: 600;
}
/* タイムライン内の書籍カード（Amazon本風） */
.x-book-card {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  margin-top: 8px;
  padding: 12px;
  background: #fffdf6;
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
}
.x-book-cover {
  width: 90px;
  aspect-ratio: 2 / 2.9;
  background: #e8e0d0;
  background-size: cover;
  background-position: center;
  border-radius: 2px 5px 5px 2px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.15),
    3px 4px 10px rgba(0,0,0,0.2);
  text-decoration: none;
  transition: transform 0.15s;
}
.x-book-cover:hover { transform: translateY(-2px) scale(1.02); }
.x-book-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.x-book-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.3;
}
.x-book-author {
  font-family: var(--font-jp);
  font-size: 12px;
  color: var(--ink-3);
}
.x-book-desc {
  font-family: var(--font-jp);
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-top: 3px;
}
.x-book-amazon {
  display: inline-block;
  margin-top: auto;
  padding: 8px 18px;
  background: #ff9900;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 12px;
  border-radius: 6px;
  align-self: flex-start;
  margin-top: 8px;
}
.x-book-amazon:hover { background: #e88a00; }

/* 言葉のコレクションカードの星ボタン */
.qc-card { position: relative; }
.qc-fav {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--gold);
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: all 0.15s;
  z-index: 2;
}
.qc-fav:hover { transform: scale(1.2); background: rgba(184,149,46,0.08); }
.qc-fav.active { color: var(--wine); }
.x-post-embed-link:hover { text-decoration: underline; }
.x-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.x-post-tags .event-tag {
  font-size: 11px;
  padding: 2px 8px;
  background: #fffdf6;
  border: 1px solid var(--rule);
  color: var(--wine);
  border-radius: 10px;
  cursor: pointer;
}
.x-post-actions {
  display: flex;
  gap: 28px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-4);
  font-family: var(--font-en);
  align-items: center;
}
.x-action {
  background: none;
  border: none;
  color: var(--ink-4);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  transition: all 0.15s;
}
.x-action:hover { background: rgba(122,46,58,0.08); color: var(--wine); }
.x-action.liked { color: #e0245e; }
.x-action-like.liked { background: rgba(224,36,94,0.08); }
.x-action-share:hover { color: #1d9bf0; background: rgba(29,155,240,0.08); }
.x-action-count { font-size: 12px; }
.x-post-comments {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rule-soft);
}
.x-post-comments.hidden { display: none; }
.x-comments-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.x-comments-empty {
  font-size: 12px;
  color: var(--ink-4);
  text-align: center;
  font-family: var(--font-jp);
  padding: 6px 0;
}
.x-comment {
  background: #fffdf6;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--rule-soft);
}
.x-comment-text {
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  word-break: break-word;
}
.x-comment-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}
.x-comment-date {
  font-size: 10px;
  color: var(--ink-4);
  font-family: var(--font-en);
}
.x-comment-delete {
  background: none;
  border: none;
  color: var(--ink-4);
  font-size: 10px;
  cursor: pointer;
  font-family: var(--font-jp);
  padding: 2px 6px;
  border-radius: 8px;
}
.x-comment-delete:hover { color: #e0245e; background: rgba(224,36,94,0.08); }
.x-comment-form {
  display: flex;
  gap: 6px;
}
.x-comment-input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  font-size: 13px;
  font-family: var(--font-jp);
  outline: none;
}
.x-comment-input:focus { border-color: var(--wine); }
.x-comment-send {
  padding: 7px 14px;
  background: var(--wine);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font-jp);
}
.x-comment-send:hover { background: var(--wine-dark); }

/* 手紙の通報ボタン */
.letter-report-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: var(--ink-4);
  font-size: 10px;
  cursor: pointer;
  font-family: var(--font-jp);
  padding: 4px 8px;
  border-radius: 10px;
  opacity: 0.5;
  transition: all 0.15s;
}
.letter-report-btn:hover {
  opacity: 1;
  color: #e0245e;
  background: rgba(224,36,94,0.08);
}
.letter-card { position: relative; }

/* ================ わたしの本 扉絵のインク瓶・万年筆 ================ */
.open-page-left { position: relative; overflow: hidden; }
.book-ornament {
  position: absolute;
  pointer-events: none;
  opacity: 0.85;
  filter: drop-shadow(2px 3px 4px rgba(0,0,0,0.2));
}
.book-ink {
  width: 48px;
  height: 48px;
  left: 18px;
  bottom: 28px;
  transform: rotate(-6deg);
}
.book-pen {
  width: 110px;
  height: auto;
  right: -12px;
  top: 52px;
  transform: rotate(18deg);
}
/* インクのしみ（万年筆の下に小さな点） */
.book-pen::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 42px;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, #4a1822 20%, transparent 70%);
  border-radius: 50%;
}
@media (max-width: 520px) {
  .book-ink { width: 36px; height: 36px; left: 10px; bottom: 18px; }
  .book-pen { width: 80px; right: -8px; top: 32px; }
}
/* 旧LINE風スタイルの無効化 */
.profile-feed.line-chat { background: transparent !important; padding: 0 !important; }
.line-msg, .line-bubble, .line-date, .line-msg-avatar { display: none !important; }

/* ================ 詳細検索トグル ================ */
.adv-search-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  margin-top: 10px;
  background: #fff;
  border: 1px dashed var(--rule);
  border-radius: 8px;
  color: var(--ink-2);
  font-family: var(--font-jp);
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: all 0.15s;
}
.adv-search-toggle:hover {
  border-style: solid;
  border-color: var(--wine);
  color: var(--wine);
}
.adv-search-toggle.open {
  background: var(--wine);
  border-color: var(--wine);
  color: #fff;
  border-style: solid;
}
.adv-search-arrow {
  transition: transform 0.25s;
  font-size: 14px;
}
.adv-search-toggle.open .adv-search-arrow { transform: rotate(180deg); }

.adv-search-panel {
  margin-top: 10px;
  padding: 12px 14px;
  background: #fffdf6;
  border: 1px solid var(--rule);
  border-radius: 8px;
  animation: advSlideDown 0.25s ease;
}
.adv-search-panel.hidden { display: none; }
@keyframes advSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.adv-search-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.adv-search-row:last-child { margin-bottom: 0; }
.adv-search-row-label {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--wine);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-family: var(--font-jp);
  padding-top: 6px;
  min-width: 56px;
}
.adv-search-row .era-filter,
.adv-search-row .sort-filter {
  flex: 1;
  margin: 0;
}
@media (max-width: 520px) {
  .adv-search-row { flex-direction: column; gap: 4px; }
  .adv-search-row-label { padding-top: 0; }
}

/* ================ ルーティンを開くボタン ================ */
.routine-open-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  margin: 14px 0;
  background: linear-gradient(135deg, #fffdf6 0%, #faf4e5 100%);
  border: 1px solid var(--rule);
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--ink);
  transition: all 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.routine-open-btn:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}
.routine-open-icon { font-size: 18px; }
.routine-open-label { flex: 1; text-align: left; margin-left: 10px; font-weight: 600; letter-spacing: 0.04em; }
.routine-open-arrow { color: var(--gold); font-weight: 700; }

/* ================ ルーティンポップアップ ================ */
.routine-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.routine-modal.open { opacity: 1; pointer-events: auto; }
.routine-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20,15,10,0.55);
  backdrop-filter: blur(2px);
}
.routine-modal-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  transition: transform 0.2s;
  width: min(92vw, 560px);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  padding: 20px 22px 24px;
}
.routine-modal.open .routine-modal-panel { transform: translate(-50%, -50%) scale(1); }
.routine-modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 22px;
  color: var(--ink-3);
  cursor: pointer;
  line-height: 1;
}
.routine-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.routine-modal-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--wine);
  background-size: cover;
  background-position: center;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-jp);
  flex-shrink: 0;
}
.routine-modal-name {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.routine-modal-sub {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
}
.routine-modal-body { font-family: var(--font-jp); }

/* ================ チャット「おーい」呼びかけバブル ================ */
.chat-fab-wrap {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.chat-fab-wrap .chat-fab {
  position: static; /* wrap に移設 */
}
.chat-call-bubble {
  background: #fffdf6;
  border: 1px solid var(--rule);
  border-radius: 14px 14px 2px 14px;
  padding: 10px 14px;
  max-width: 220px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  font-family: var(--font-jp);
  cursor: pointer;
  transform: translateY(8px);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.2,1.2,0.4,1), opacity 0.25s;
  position: relative;
}
.chat-call-bubble.pop { transform: translateY(0); opacity: 1; }
.chat-call-bubble.hidden { display: none; }
.chat-call-bubble::after {
  content: '';
  position: absolute;
  right: 20px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: #fffdf6;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transform: rotate(45deg);
}
.chat-call-text {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4;
  font-weight: 600;
}
.chat-call-who {
  font-size: 10px;
  color: var(--wine);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

/* ルーティンカード：タップで開くヒント */
.routine-card[data-peek-id] { cursor: pointer; }
.routine-avatar-link {
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.routine-avatar-link:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.routine-person-name-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
}
.routine-person-name-link:hover { color: var(--wine); text-decoration: underline; }
.routine-card[data-peek-id]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.routine-card-hint {
  text-align: center;
  font-size: 10px;
  color: var(--ink-4);
  font-family: var(--font-jp);
  letter-spacing: 0.08em;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--rule);
}
.routine-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.routine-card-actions .routine-copy-btn,
.routine-card-actions .routine-peek-btn {
  flex: 1;
  padding: 7px 10px;
  font-size: 11px;
  font-family: var(--font-jp);
  border-radius: 14px;
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--ink-2);
  cursor: pointer;
}
.routine-card-actions .routine-peek-btn {
  background: var(--wine);
  color: #fff;
  border-color: var(--wine);
}

/* ================ 全年表（旧・フォールバック） ================ */
.timeline-list .event {
  background: #ffffff;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--wine);
  border-radius: 3px;
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(255,253,247,0.5),
    0 1px 4px rgba(0, 0, 0, 0.08);
}
.timeline-list .event::before { display: none; }
.timeline-list .event-person {
  font-size: 12px;
  color: var(--wine);
  margin-bottom: 4px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ================ タグ詳細 ================ */
.tag-detail-header {
  padding: 22px 0;
  text-align: center;
  border-bottom: 2px solid var(--wine);
  margin-bottom: 20px;
  position: relative;
}
.tag-detail-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 1px;
  background: var(--gold);
}
.tag-detail-header .big-chip {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 24px;
  font-size: 17px;
  color: var(--paper-light);
  margin-bottom: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  box-shadow:
    inset 0 0 0 1px var(--gold),
    0 3px 6px rgba(0, 0, 0, 0.2);
}
.tag-detail-header .tag-desc {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.8;
  padding: 0 18px;
  font-family: var(--font-jp);
}
/* 感情タグの本（記事と同じ布張り+帯） */
.tag-book-card.article-card {
  aspect-ratio: 2 / 2.9;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.tag-book-count {
  font-size: 10px !important;
  color: #f0d690 !important;
  letter-spacing: 0.15em !important;
  padding: 10px 6px 4px !important;
  font-style: italic;
  opacity: 0.75;
}
.tag-book-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 8px 10px;
}
.tag-book-center .cover-tag-ornament {
  color: var(--gold-light);
  font-size: 12px;
  opacity: 0.7;
}
.tag-book-name {
  font-size: clamp(10px, 4cqw, 18px);
  font-weight: 800;
  color: #ffffff;
  font-family: var(--font-jp);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 6px rgba(0,0,0,0.45);
  line-height: 1.15;
  text-align: center;
  max-width: 100%;
  padding: 0 2px;
  white-space: nowrap;
  overflow: hidden;
}
.tag-book-card { container-type: inline-size; }
.tag-book-inner {
  padding: 10px 8px !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff !important;
  border-top: 2px solid rgba(0,0,0,0.3) !important;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 3px 0 -2px rgba(184,149,46,0.4),
    inset 0 -3px 0 -2px rgba(184,149,46,0.4),
    0 -2px 6px rgba(0,0,0,0.15) !important;
}
.tag-book-inner::before,
.tag-book-inner::after {
  content: '';
  position: absolute;
  left: 6px; right: 6px;
  height: 1px;
  background: rgba(184,149,46,0.6);
}
.tag-book-inner::before { top: 5px; }
.tag-book-inner::after { bottom: 5px; }
.tag-book-desc {
  font-size: 10px;
  color: var(--ink-2);
  line-height: 1.5;
  letter-spacing: 0.03em;
  font-family: var(--font-jp);
  text-align: center;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0 4px;
}

/* ================ 感情の書（本の中身風） ================ */
.tag-book-page {
  background: #ffffff;
  border: 1px solid var(--rule);
  padding: 36px 28px 40px;
  box-shadow:
    inset 0 0 0 1px rgba(184,149,46,0.15),
    0 4px 14px rgba(0,0,0,0.1);
  position: relative;
}
/* 本の中身っぽい上下の罫 */
.tag-book-page::before,
.tag-book-page::after {
  content: '';
  position: absolute;
  left: 20px; right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.tag-book-page::before { top: 14px; }
.tag-book-page::after { bottom: 14px; }

.tag-book-chapter {
  text-align: center;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--rule-soft);
}
.tag-book-chapter-label {
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 0.4em;
  font-family: var(--font-en);
  font-style: italic;
  margin-bottom: 10px;
}
.tag-book-chapter-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--wine-dark);
  font-family: var(--font-jp);
  letter-spacing: 0.2em;
  margin-bottom: 12px;
}
.tag-book-chapter-line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--wine), transparent);
  margin: 0 auto 16px;
  position: relative;
}
.tag-book-chapter-line::before {
  content: '❖';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  color: var(--wine);
  background: #ffffff;
  padding: 0 8px;
}
.tag-book-chapter-desc {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.95;
  letter-spacing: 0.06em;
  font-family: var(--font-jp);
  margin-bottom: 18px;
  padding: 0 20px;
}

.tag-book-section-title {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
}
.tag-book-section-title span {
  display: inline-block;
  padding: 0 20px;
  background: #ffffff;
  position: relative;
  z-index: 1;
  font-size: 12px;
  color: var(--wine);
  font-family: var(--font-jp);
  font-weight: 700;
  letter-spacing: 0.2em;
}
.tag-book-section-title::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--rule);
}

/* 偉人グリッド（1人1列、複数の出来事がカードで並ぶ） */
.tag-people-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.tpg-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
/* 人物ヘッダー（アバター+名前） */
.tpg-person-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: linear-gradient(90deg, rgba(184,149,46,0.1), rgba(122,46,58,0.05));
  border-bottom: 2px solid var(--wine);
  cursor: pointer;
  transition: background 0.15s;
}
.tpg-person-header:active {
  background: linear-gradient(90deg, rgba(184,149,46,0.18), rgba(122,46,58,0.1));
}
.tpg-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-size: cover;
  background-position: center top;
  background-color: var(--paper-warm);
  border: 2px solid var(--gold);
  box-shadow:
    inset 0 0 0 2px #ffffff,
    0 2px 5px rgba(0,0,0,0.15);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--wine);
  font-family: var(--font-jp);
}
.tpg-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-jp);
  letter-spacing: 0.05em;
}

/* 出来事カード（人物の下にリスト表示） */
.tpg-events {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0 0;
}
.tpg-event {
  background: #ffffff;
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--wine);
  border-radius: 3px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.tpg-event:active {
  background: rgba(184,149,46,0.06);
  transform: translateX(2px);
}
.tpg-year {
  font-size: 10px;
  color: var(--wine);
  font-family: var(--font-en);
  font-style: italic;
  margin-bottom: 4px;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.tpg-event-title {
  font-size: 13px;
  color: var(--ink);
  font-family: var(--font-jp);
  line-height: 1.55;
  letter-spacing: 0.03em;
  font-weight: 600;
}

/* 該当イベントに飛んだ時のハイライト */
.event.highlight-flash {
  animation: highlight-pulse 2.5s ease-out;
}
@keyframes highlight-pulse {
  0%   { background: rgba(184,149,46,0.4); box-shadow: 0 0 0 4px rgba(184,149,46,0.3); }
  30%  { background: rgba(184,149,46,0.25); }
  100% { background: transparent; box-shadow: none; }
}

/* 「棚に飾る」ボタン */
.fav-tag-btn {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 18px;
  border: 1px solid var(--gold);
  border-radius: 3px;
  background: var(--paper-card);
  color: var(--wine);
  font-size: 12px;
  font-family: var(--font-jp);
  font-weight: 600;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.2s;
}
.fav-tag-btn.active {
  background: var(--wine);
  color: var(--gold-light);
  border-color: var(--wine);
}

.tag-event {
  background: #ffffff;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--wine);
  border-radius: 3px;
  padding: 14px;
  margin-bottom: 11px;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px rgba(255,253,247,0.4),
    0 1px 4px rgba(0, 0, 0, 0.08);
}
.tag-event .tag-event-person {
  font-size: 12px;
  color: var(--wine);
  margin-bottom: 4px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.tag-event .event-year { margin-bottom: 5px; }
.tag-event .event-title { font-size: 14px; padding-right: 28px; }
.tag-event .event-detail { font-size: 12px; }

/* ================ 読みもの ================ */
.articles-author {
  text-align: center;
  padding: 20px 16px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--wine);
  position: relative;
}
.articles-author::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 1px;
  background: var(--gold);
}
.articles-author-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  font-family: var(--font-jp);
  letter-spacing: 0.2em;
  margin-bottom: 6px;
}
.articles-author-bio {
  font-size: 13px;
  color: var(--ink-3);
  font-family: var(--font-jp);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  font-style: italic;
}
.articles-author-link {
  display: inline-block;
  padding: 7px 18px;
  border: 1px solid var(--gold);
  border-radius: 3px;
  background: var(--paper-card);
  color: var(--wine);
  font-size: 12px;
  font-family: var(--font-jp);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: all 0.2s;
}
.articles-author-link:active {
  background: var(--wine);
  color: var(--gold-light);
}

/* 記事グリッド（スマホ3列、HP(900px+)は6列） */
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 10px;
  padding: 8px 4px 16px;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 900px) {
  .article-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 14px; }
}

/* 空の本（プレースホルダ） */
.article-card-empty {
  pointer-events: none;
  opacity: 0.55;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 1px, transparent 1px, transparent 3px),
    linear-gradient(135deg, #8a7f6b 0%, #6b5f4d 100%);
}
.article-card-empty-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.article-card-empty-ornament {
  font-size: 20px;
  color: rgba(240,214,144,0.6);
}
.article-card-empty-text {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.25em;
  font-family: var(--font-en);
  font-style: italic;
}

/* 記事カードラッパー（本＋下の説明） */
.article-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.article-caption {
  text-decoration: none;
  color: inherit;
  text-align: center;
  padding: 0 4px;
  font-family: var(--font-jp);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.article-caption .article-badges {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.article-caption .article-source,
.article-caption .article-category {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--wine);
  color: #fff;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.article-caption .article-category {
  background: #fffdf6;
  color: var(--wine);
  border: 1px solid var(--wine);
}
.article-caption .article-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  letter-spacing: 0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}
.article-caption .article-desc {
  font-size: 10px;
  color: var(--ink-3);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}
.article-caption .article-date {
  font-size: 9px;
  color: var(--ink-4);
  font-family: var(--font-en);
  margin-top: 2px;
}
.article-card-wrap .article-card-inner { display: none; }

/* 記事 = 布張りハードカバー風（本らしい縦長比率） */
.article-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  margin: 0;
  position: relative;
  min-width: 0;
  width: 100%;
  aspect-ratio: 2 / 2.9;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.04) 0px,
      rgba(255,255,255,0.04) 1px,
      transparent 1px,
      transparent 3px),
    repeating-linear-gradient(-45deg,
      rgba(0,0,0,0.04) 0px,
      rgba(0,0,0,0.04) 1px,
      transparent 1px,
      transparent 3px),
    linear-gradient(135deg, #3d5a80 0%, #2c4363 100%);
  border-radius: 3px 6px 6px 3px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.25),
    inset 2px 2px 6px rgba(255,255,255,0.08),
    inset -2px -2px 6px rgba(0,0,0,0.15),
    6px 8px 18px rgba(0,0,0,0.3),
    2px 2px 5px rgba(0,0,0,0.15);
  transition: transform 0.15s;
  display: flex;
  flex-direction: column;
}
.article-card:active { transform: translateY(2px); }

/* 内側要素（写真・帯）の角を揃える */
/* 帯 = 本の下 1/3 に収まる控えめサイズ */
.article-card-inner {
  margin-top: auto;
  background: rgba(255,253,247,0.97);
  border-top: 1px solid rgba(0,0,0,0.25);
  padding: 6px 8px 7px;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.15);
  max-height: 33%;
  overflow: hidden;
}
.article-card-inner .article-badges {
  margin-bottom: 3px;
  line-height: 1;
}
.article-card-inner .article-source,
.article-card-inner .article-category {
  font-size: 7px;
  padding: 1px 4px;
  letter-spacing: 0.05em;
}
.article-card-inner .article-title {
  font-size: 9px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
}
.article-card-inner .article-desc {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 8px;
  line-height: 1.4;
  color: var(--ink-3);
  margin-bottom: 0;
  text-align: center;
}
.article-card-inner .article-meta,
.article-card-inner .article-relations { display: none; }

.article-card::before,
.article-card::after { display: none; }
/* 背表紙の溝（左端の縦線） */
.article-card::before {
  content: '';
  position: absolute;
  left: 12px; top: 14px; bottom: 14px;
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,0.3) 10%,
    rgba(0,0,0,0.3) 90%,
    transparent 100%);
  border-right: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
  z-index: 2;
}
/* 背表紙から飛び出した小口のページ層（右側の紙の重なり） */
.article-card::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 8px;
  bottom: 8px;
  width: 7px;
  background:
    repeating-linear-gradient(180deg,
      #e8ddc0 0px, #e8ddc0 1px,
      #d4c8a4 1px, #d4c8a4 2px,
      #bcb088 2px, #bcb088 3px);
  border: 1px solid rgba(0,0,0,0.35);
  border-radius: 0 2px 2px 0;
  box-shadow:
    inset 2px 0 4px rgba(0,0,0,0.3),
    2px 1px 4px rgba(0,0,0,0.25);
  pointer-events: none;
}
.article-card:active {
  transform: translateY(2px);
}

/* カードごとに色をバラす */
.article-card:nth-child(3n+1) {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 1px, transparent 1px, transparent 3px),
    linear-gradient(135deg, #3d5a80 0%, #2c4363 100%);
}
.article-card:nth-child(3n+2) {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 1px, transparent 1px, transparent 3px),
    linear-gradient(135deg, #6d3340 0%, #4d1f2a 100%);
}
.article-card:nth-child(3n) {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 1px, transparent 1px, transparent 3px),
    linear-gradient(135deg, #4d5e3e 0%, #2f3e2a 100%);
}

.article-author-name {
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  color: #f0d690;
  letter-spacing: 0.05em;
  font-family: var(--font-display);
  text-shadow:
    0 1px 0 rgba(0,0,0,0.5),
    0 2px 3px rgba(0,0,0,0.4);
  padding: 10px 8px 4px;
  line-height: 1;
  font-style: italic;
}

/* サムネ = 表紙中央に貼り付けた絵札 */
.article-thumb {
  margin: 0 12px 12px;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: #f5ead0;
  position: relative;
  border: 1px solid rgba(0,0,0,0.35);
  box-shadow:
    0 2px 5px rgba(0,0,0,0.3),
    inset 0 0 0 1px rgba(255,255,255,0.25);
}
/* 帯（下のテキスト）を削除した新デザインでは、サムネが本をフィルする */
.article-card-wrap .article-thumb {
  margin: 12px;
  flex: 1;
  aspect-ratio: auto;
  min-height: 60%;
}
.article-card-wrap .article-card {
  display: flex;
  flex-direction: column;
}

/* 帯 = 本の下部（白背景）— max-height: 33%で画像優位 */
.article-card-inner {
  position: relative;
  padding: 8px 10px 10px;
  margin-top: auto;
  max-height: 33%;
  background: rgba(255,253,247,0.97);
  border-top: 1px solid rgba(0,0,0,0.25);
  box-shadow: 0 -2px 6px rgba(0,0,0,0.15);
  overflow: hidden;
}
.article-card:active .article-card-inner {
  transform: translateY(1px);
}
.article-card-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 11px;
}
.article-badges {
  text-align: center;
  margin-bottom: 6px;
}
.article-source {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  color: #ffffff;
  background: var(--wine);
  padding: 2px 8px;
  border-radius: 2px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.article-category {
  display: inline-block;
  font-size: 10px;
  color: var(--wine);
  border: 1px solid var(--wine);
  padding: 1px 8px;
  border-radius: 2px;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-left: 4px;
}
.article-date {
  color: var(--ink-4);
  font-family: var(--font-en);
  font-style: italic;
  letter-spacing: 0.05em;
}
.article-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  font-family: var(--font-jp);
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.article-desc {
  font-size: 11px;
  color: var(--ink-2);
  font-family: var(--font-jp);
  line-height: 1.6;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
}
.article-meta {
  font-size: 10px;
  color: var(--ink-4);
  font-family: var(--font-en);
  font-style: italic;
  letter-spacing: 0.05em;
  margin-bottom: 0;
  text-align: center;
}
.article-relations {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding-top: 8px;
  margin-top: 10px;
}
.article-tag {
  font-size: 10px;
  padding: 2px 9px;
  border-radius: 10px;
  background: #ffffff;
  color: var(--wine);
  border: 1px solid var(--wine);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.article-person {
  font-size: 10px;
  padding: 2px 9px;
  border-radius: 10px;
  background: var(--wine);
  color: #ffffff;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ================ 画像クレジット ================ */
.image-credit {
  font-size: 10px;
  color: var(--ink-4);
  padding: 6px 10px;
  margin: 8px 0 12px;
  background: rgba(0,0,0,0.03);
  border-left: 2px solid var(--rule-soft);
  border-radius: 2px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  font-family: var(--font-en);
  font-style: italic;
}
.image-credit a {
  color: var(--wine);
  text-decoration: none;
  border-bottom: 1px dotted var(--wine);
}
.image-credit-source {
  color: var(--ink-4);
  margin-left: 6px;
  opacity: 0.7;
}

.empty {
  text-align: center;
  color: var(--ink-3);
  padding: 40px 20px;
  font-size: 13px;
  line-height: 1.9;
  font-family: var(--font-jp);
}
.hidden { display: none !important; }

/* ================ 本棚 ================ */
.bookshelf {
  background:
    /* 上側の内影 */
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 6%),
    /* 木目 */
    repeating-linear-gradient(90deg,
      #4a2e1a 0px, #3a220e 1px, #4a2e1a 2px, #5c3820 4px, #4a2e1a 6px),
    /* 木の色ベース */
    linear-gradient(180deg, #5c3820 0%, #3a220e 100%);
  border-radius: 4px;
  padding: 18px 8px 4px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.5),
    inset 0 0 24px rgba(0,0,0,0.45),
    0 3px 10px rgba(0,0,0,0.25);
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.bookshelf::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: linear-gradient(180deg, #1a0f05 0%, transparent 100%);
  pointer-events: none;
}

.shelf-row {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 2px;
  padding: 0 4px;
  min-height: 170px;
  border-bottom: 10px solid #1a0f05;
  box-shadow:
    0 2px 0 #0a0502,
    0 5px 10px rgba(0,0,0,0.35),
    inset 0 -1px 0 rgba(255,255,255,0.06);
  margin-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.shelf-row::-webkit-scrollbar { display: none; }
.shelf-row:last-child { margin-bottom: 4px; }

/* ================ 本の背表紙 ================ */
.book-spine {
  flex: 1 0 45px;
  max-width: 80px;
  height: 200px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.5);
  box-shadow:
    inset -3px 0 6px rgba(0,0,0,0.35),
    inset 3px 0 4px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.1);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  padding: 0;
  will-change: transform;
}
.book-spine:active {
  transform: translateY(-14px) rotateZ(-1deg);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5));
}
.book-spine.tag-book { min-width: 42px; max-width: 65px; height: 155px; }

/* 背表紙の色バリエーション */
.spine-wine {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.35) 0%, transparent 8%, transparent 92%, rgba(0,0,0,0.35) 100%),
    linear-gradient(180deg, #8a3a48 0%, var(--wine) 50%, var(--wine-dark) 100%);
}
.spine-green {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.35) 0%, transparent 8%, transparent 92%, rgba(0,0,0,0.35) 100%),
    linear-gradient(180deg, #4d604e 0%, var(--green-deep) 50%, #2a3a2b 100%);
}
.spine-navy {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.35) 0%, transparent 8%, transparent 92%, rgba(0,0,0,0.35) 100%),
    linear-gradient(180deg, #364660 0%, #253245 50%, #141d2e 100%);
}
.spine-brown {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.35) 0%, transparent 8%, transparent 92%, rgba(0,0,0,0.35) 100%),
    linear-gradient(180deg, #6d4628 0%, #4a2f1a 50%, #2e1c0d 100%);
}
.spine-ink {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.35) 0%, transparent 8%, transparent 92%, rgba(0,0,0,0.35) 100%),
    linear-gradient(180deg, #322820 0%, #1a130c 100%);
}
.spine-ochre {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.35) 0%, transparent 8%, transparent 92%, rgba(0,0,0,0.35) 100%),
    linear-gradient(180deg, #8a6a2e 0%, #6b5020 50%, #483318 100%);
}

/* 金の帯（本の上下の装飾） */
.spine-band {
  width: 100%;
  height: 7px;
  background: linear-gradient(180deg, #e4c36a 0%, var(--gold) 50%, #8a6820 100%);
  border-top: 1px solid rgba(0,0,0,0.4);
  border-bottom: 1px solid rgba(0,0,0,0.4);
  flex-shrink: 0;
}
.spine-band.top { margin-top: 16px; }
.spine-band.bottom { margin-bottom: 16px; }

/* タイトル（縦書き） */
.spine-title {
  writing-mode: vertical-rl;
  color: #f2d898;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-family: var(--font-jp);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  line-height: 1.15;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.book-spine.tag-book .spine-title {
  font-size: 13px;
  letter-spacing: 0.18em;
}
.spine-meta {
  writing-mode: vertical-rl;
  font-size: 9px;
  color: #d4b76a;
  opacity: 0.65;
  letter-spacing: 0.15em;
  line-height: 1.2;
  margin-bottom: 6px;
}

/* お気に入りのリボン */
.spine-bookmark {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 18px;
  background: var(--gold);
  border-left: 1px solid rgba(0,0,0,0.3);
  border-right: 1px solid rgba(0,0,0,0.3);
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
  z-index: 2;
}
.spine-bookmark::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 5px solid var(--gold);
  border-right: 5px solid var(--gold);
  border-bottom: 5px solid transparent;
}

/* 本棚の空状態 */
.shelf-empty {
  text-align: center;
  color: #d4b76a;
  padding: 60px 20px;
  font-size: 13px;
  font-family: var(--font-jp);
  opacity: 0.7;
}

/* ================ 本の表紙を全画面にズームする演出 ================ */
.book-flip {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 10, 5, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  animation: bg-dim-in 550ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.book-flip.closing {
  animation: bg-dim-out 500ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
@keyframes bg-dim-in {
  from { background-color: rgba(15, 10, 5, 0); }
  to   { background-color: rgba(15, 10, 5, 0.88); }
}
@keyframes bg-dim-out {
  from { background-color: rgba(15, 10, 5, 0.88); }
  to   { background-color: rgba(15, 10, 5, 0); }
}

/* 本（表紙）は中央で拡大する */
.book {
  width: min(260px, 70vw);
  aspect-ratio: 2 / 3;
  height: auto;
  position: relative;
  animation: book-zoom-in 700ms cubic-bezier(0.25, 0.8, 0.3, 1) forwards;
  animation-delay: 50ms;
  opacity: 0;
  transform: scale(0.6);
}
@keyframes book-zoom-in {
  0% {
    opacity: 0;
    transform: scale(0.55) translateY(30px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.book-flip.closing .book {
  animation: book-zoom-out 500ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
@keyframes book-zoom-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.25);
  }
}

/* 静止ページ・本の谷は非表示（ズーム演出のため） */
.book-page-static { display: none; }
.book::before { display: none; }

/* 表紙カード本体（回転なし、ズームで見せる） */
.book-flipper {
  position: absolute;
  inset: 0;
  border-radius: 3px 8px 8px 3px;
  overflow: hidden;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.55),
    0 8px 20px rgba(0,0,0,0.4);
}
.book-flipper-back { display: none; }
.book-flipper-front { position: absolute; inset: 0; }

.book-flipper-front,
.book-flipper-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

/* 表紙（革装丁の赤） */
.book-flipper-front {
  background:
    radial-gradient(ellipse at 30% 25%, rgba(184,149,46,0.12) 0%, transparent 55%),
    linear-gradient(135deg, var(--wine) 0%, var(--wine-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-shadow: inset 0 0 0 1px rgba(212,176,85,0.25);
}
.book-cover-inner {
  border: 1px solid var(--gold);
  padding: 40px 22px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  box-shadow:
    inset 0 0 0 1px rgba(212,176,85,0.45),
    inset 0 0 40px rgba(0,0,0,0.2);
}
.book-cover-ornament {
  font-size: 18px;
  color: var(--gold-light);
  letter-spacing: 0.3em;
  opacity: 0.85;
}
.book-cover-name {
  font-size: 28px;
  color: var(--gold-light);
  font-weight: 800;
  letter-spacing: 0.22em;
  font-family: var(--font-jp);
  line-height: 1.6;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  margin: 8px 0;
}
.book-cover-dates {
  font-size: 14px;
  color: var(--gold-light);
  opacity: 0.85;
  letter-spacing: 0.1em;
  font-family: var(--font-en);
  font-style: italic;
  font-weight: 600;
}

/* 写真付き表紙 */
.book-flipper-front.cover-with-photo {
  padding: 0;
  overflow: hidden;
  background: var(--wine-dark);
}
.cover-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 20%;
  z-index: 1;
}
.cover-photo-frame {
  position: absolute;
  inset: 18px;
  border: 1px solid var(--gold-light);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.3),
    0 0 0 1px rgba(0,0,0,0.3);
  z-index: 4;
  pointer-events: none;
}
.cover-photo-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(92,31,42,0.15) 0%,
      rgba(31,24,18,0.12) 35%,
      rgba(31,24,18,0.65) 68%,
      rgba(31,24,18,0.92) 100%);
  z-index: 2;
}
.cover-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 24px 26px 30px;
  text-align: center;
}
.cover-text .book-cover-ornament {
  opacity: 0.7;
  margin-bottom: 10px;
}
.cover-text .book-cover-name {
  font-size: 32px;
  text-shadow: 0 3px 12px rgba(0,0,0,0.7);
  letter-spacing: 0.25em;
  margin-bottom: 10px;
  font-weight: 800;
}
.cover-text .book-cover-dates {
  font-size: 15px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  letter-spacing: 0.12em;
  font-family: var(--font-en);
  font-style: italic;
  font-weight: 600;
}

/* めくった裏側（紙の裏） */
.book-flipper-back {
  background:
    linear-gradient(180deg, #ffffff 0%, var(--paper-card) 55%, var(--paper-card-end) 100%);
  transform: rotateY(180deg);
  box-shadow: inset 0 0 0 1px rgba(184,149,46,0.12);
}

/* ================ お気に入りボタン ================ */
.fav-btn {
  background: none;
  border: none;
  color: var(--rule);
  font-size: 22px;
  cursor: pointer;
  padding: 2px 6px;
  transition: transform 0.15s, color 0.15s;
  line-height: 1;
  font-family: inherit;
}
.fav-btn.active { color: var(--gold); }
.fav-btn:active { transform: scale(1.25); }

.person-card { position: relative; }
.person-card .fav-btn {
  position: absolute;
  top: 10px;
  right: 10px;
}
.person-header .fav-btn {
  font-size: 30px;
  margin-top: 10px;
}
.event { position: relative; }
.event .fav-btn {
  position: absolute;
  top: -2px;
  right: 0;
  font-size: 18px;
}
.timeline-list .event .fav-btn {
  top: 8px;
  right: 8px;
}
.tag-event { position: relative; }
.tag-event .fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 18px;
}

/* お気に入りビュー */
.fav-section-title {
  font-size: 13px;
  color: var(--wine);
  margin: 22px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--wine);
  position: relative;
  font-weight: 700;
  letter-spacing: 0.2em;
  font-family: var(--font-jp);
}
.fav-section-title::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 1px;
  background: var(--gold);
}
.fav-section-title:first-child { margin-top: 0; }

/* ================ わたしの本（お手本タブ） ================ */
.my-book-empty {
  text-align: center;
  padding: 30px 20px 40px;
}
.my-book-empty-cover {
  width: 180px;
  aspect-ratio: 2 / 3;
  margin: 0 auto 20px;
  background:
    linear-gradient(135deg, var(--wine) 0%, var(--wine-dark) 100%);
  border-radius: 2px 6px 6px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-shadow:
    6px 8px 16px rgba(0,0,0,0.4),
    0 3px 0 0 #e8ddc6,
    0 5px 0 0 #d4c8a4,
    0 7px 0 0 #bcb088,
    0 9px 0 0 #a49870,
    0 11px 6px 0 rgba(0,0,0,0.3);
}
.my-book-empty-inner {
  border: 1px solid var(--gold);
  padding: 20px 14px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
.my-book-empty-ornament {
  color: var(--gold-light);
  font-size: 16px;
  opacity: 0.7;
}
.my-book-empty-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--gold-light);
  letter-spacing: 0.18em;
  font-family: var(--font-jp);
  white-space: nowrap;
}
.my-book-empty-sub {
  font-size: 10px;
  color: var(--gold-light);
  opacity: 0.7;
  letter-spacing: 0.1em;
  font-family: var(--font-en);
  font-style: italic;
}
.my-book-empty-text {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 2;
  letter-spacing: 0.05em;
  font-family: var(--font-jp);
}

/* 気分選択チップ + 推し */
.mood-picker {
  text-align: center; padding: 20px 14px 18px; background: #ffffff;
  border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.mood-picker-title {
  font-size: 17px; font-weight: 800; color: var(--wine-dark);
  font-family: var(--font-jp); letter-spacing: 0.15em; margin-bottom: 6px;
}
.mood-picker-sub {
  font-size: 11px; color: var(--ink-3); font-family: var(--font-jp);
  margin-bottom: 16px; letter-spacing: 0.05em;
}
.mood-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mood-chip {
  padding: 8px 14px; border-radius: 18px; border: 1px solid rgba(0,0,0,0.2);
  color: #ffffff; font-family: var(--font-jp); font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(212,176,85,0.3), 0 2px 4px rgba(0,0,0,0.15);
}
.mood-chip:active { transform: scale(0.95); }
.mood-result-label {
  text-align: center; font-size: 12px; color: var(--wine);
  font-family: var(--font-jp); font-weight: 700; letter-spacing: 0.15em; margin-bottom: 10px;
}
.mood-reset {
  display: block; margin: 12px auto 0; background: transparent; border: none;
  color: var(--ink-3); font-size: 11px; font-family: var(--font-jp); cursor: pointer;
  text-decoration: underline; letter-spacing: 0.05em;
}
.oshi-empty {
  background: #ffffff; border: 1px dashed var(--wine);
  border-radius: 6px; padding: 20px 16px; text-align: center;
}
.oshi-empty-text { font-size: 12px; color: var(--ink-3); font-family: var(--font-jp); line-height: 1.9; }
.oshi-card {
  display: flex; align-items: center; gap: 14px; padding: 14px;
  background: linear-gradient(135deg, #ffffff 0%, #fff5f0 100%);
  border: 2px solid var(--wine); border-radius: 6px; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--gold), 0 3px 10px rgba(122,46,58,0.15);
}
.oshi-image {
  width: 72px; height: 72px; border-radius: 50%; background-size: cover;
  background-position: center top; background-color: #d9cdb4;
  border: 2px solid var(--gold); box-shadow: 0 2px 6px rgba(0,0,0,0.2); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: var(--wine); font-family: var(--font-jp);
}
.oshi-info { flex: 1; min-width: 0; }
.oshi-label { font-size: 10px; color: var(--wine); letter-spacing: 0.2em; font-weight: 700; margin-bottom: 3px; }
.oshi-name { font-size: 18px; font-weight: 800; color: var(--ink); font-family: var(--font-jp); letter-spacing: 0.05em; }
.oshi-meta { font-size: 11px; color: var(--ink-3); font-family: var(--font-en); font-style: italic; }
.profile-action-btns { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; margin-top: 4px; }
.oshi-set-btn {
  padding: 4px 10px; background: transparent; border: 1px solid var(--wine);
  color: var(--wine); border-radius: 3px; font-family: var(--font-jp);
  font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.oshi-set-btn.active { background: var(--wine); color: var(--gold-light); }

/* ================ 聖地巡礼 ================ */
.places-intro {
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
  margin-bottom: 16px;
  font-family: var(--font-jp);
  font-style: italic;
  letter-spacing: 0.05em;
}
.places-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.place-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--wine);
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: transform 0.15s, box-shadow 0.15s;
}
.place-card:hover {
  transform: translateX(2px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
  border-left-color: var(--gold);
}
.place-pin {
  font-size: 26px;
  flex-shrink: 0;
}
.place-info { flex: 1; min-width: 0; }
.place-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  font-family: var(--font-jp);
  margin-bottom: 3px;
  letter-spacing: 0.04em;
}
.place-location {
  font-size: 11px;
  color: var(--wine);
  font-weight: 700;
  font-family: var(--font-jp);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.place-note {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.6;
  font-family: var(--font-jp);
  letter-spacing: 0.02em;
}
.place-arrow {
  color: var(--wine);
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}
.place-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.place-link {
  display: inline-block;
  padding: 4px 10px;
  background: var(--wine);
  color: var(--gold-light);
  border-radius: 14px;
  font-size: 10px;
  font-family: var(--font-jp);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: 1px solid var(--wine-dark);
  transition: background 0.15s;
}
.place-link:hover { background: var(--wine-dark); }
.place-link.place-link-sub {
  background: transparent;
  color: var(--wine);
  border: 1px solid var(--wine);
}
.place-link.place-link-sub:hover {
  background: var(--wine);
  color: var(--gold-light);
}

/* ================ 関わった人々 ================ */
.person-relations { margin: 24px 0; }
.relations-grid {
  display: flex; flex-direction: column; gap: 10px;
}
.relation-item {
  display: flex; gap: 12px; padding: 12px 14px;
  background: #ffffff; border: 1px solid var(--rule); border-left: 3px solid var(--wine);
  border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: transform 0.15s, box-shadow 0.15s;
}
.relation-item.linked {
  cursor: pointer;
  background: linear-gradient(90deg, #fff5e8, #ffffff);
}
.relation-item.linked:hover {
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
  border-left-color: var(--gold);
}
.relation-item.linked:active { transform: translateX(2px); }
.relation-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background-size: cover; background-position: center top;
  background-color: var(--paper-warm); border: 1px solid var(--rule);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--wine); font-family: var(--font-jp); font-weight: 700;
}
.relation-avatar.no-img { background-color: #e8dcc0; }
.relation-info { flex: 1; min-width: 0; }
.relation-name {
  font-size: 14px; font-weight: 800; color: var(--ink);
  font-family: var(--font-jp); letter-spacing: 0.04em; margin-bottom: 3px;
}
.relation-linked-badge {
  color: var(--wine); font-size: 14px; font-weight: 400;
}
.relation-role {
  font-size: 11px; color: var(--wine); font-weight: 700;
  font-family: var(--font-jp); letter-spacing: 0.05em; margin-bottom: 4px;
}
.relation-note {
  font-size: 12px; color: var(--ink-2); line-height: 1.65;
  font-family: var(--font-jp); letter-spacing: 0.02em;
}

/* ================ 浮遊チャットウィジェット ================ */
.chat-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wine) 0%, var(--wine-dark) 100%);
  border: 2px solid var(--gold);
  color: var(--gold-light);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}
.chat-fab:hover { transform: scale(1.05); }
.chat-fab-icon { font-size: 24px; }
.chat-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: #ff4757;
  color: #fff;
  border: 2px solid #fff;
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-en);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  animation: chat-fab-pulse 1.8s infinite;
}
@keyframes chat-fab-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.chat-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: min(370px, calc(100vw - 24px));
  height: min(560px, calc(100vh - 32px));
  background: #fffcf3;
  border: 2px solid var(--wine);
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  z-index: 95;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(90deg, var(--wine) 0%, var(--wine-dark) 100%);
  color: var(--gold-light);
  border-bottom: 1px solid var(--gold);
}
.chat-panel-head-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background-size: cover; background-position: center top;
  background-color: var(--paper-warm);
  border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--wine); font-weight: 700; font-family: var(--font-jp); font-size: 14px;
  flex-shrink: 0;
}
.chat-panel-head-info { flex: 1; min-width: 0; }
.chat-panel-head-name {
  font-size: 14px; font-weight: 800; color: #fff;
  font-family: var(--font-jp); letter-spacing: 0.05em;
}
.chat-panel-head-status {
  font-size: 10px; color: #b9ef9d; letter-spacing: 0.08em;
}
.chat-panel-close {
  background: none; border: none; color: var(--gold-light);
  font-size: 22px; cursor: pointer; line-height: 1;
  padding: 0 6px;
}
.chat-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 27px, rgba(122,46,58,0.06) 27px, rgba(122,46,58,0.06) 28px),
    #fffcf3;
}
.chat-panel-empty {
  text-align: center;
  color: var(--ink-3);
  font-size: 12px;
  font-family: var(--font-jp);
  line-height: 1.9;
  padding: 40px 20px;
  font-style: italic;
}
.chat-msg {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: 8px;
}
.chat-msg-them { justify-content: flex-start; }
.chat-msg-me { justify-content: flex-end; }
.chat-msg-avatar-sm {
  width: 28px; height: 28px; border-radius: 50%;
  background-size: cover; background-position: center top;
  background-color: var(--paper-warm);
  display: flex; align-items: center; justify-content: center;
  color: var(--wine); font-size: 11px; font-weight: 700;
  font-family: var(--font-jp); flex-shrink: 0;
  border: 1px solid var(--rule);
}
.chat-msg-bubble {
  max-width: 75%;
  background: #ffffff;
  padding: 8px 12px;
  border-radius: 12px 12px 12px 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  font-family: var(--font-jp);
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink);
  border: 1px solid var(--rule-soft);
}
.chat-msg-title {
  font-weight: 700;
  color: var(--wine);
  margin-bottom: 3px;
  font-size: 12px;
}
.chat-msg-src {
  font-size: 10px; color: var(--ink-4);
  font-style: italic; text-align: right; margin-top: 4px;
}
.chat-msg-time {
  font-size: 9px; color: var(--ink-4);
  font-family: var(--font-en); font-style: italic;
}
.chat-msg-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  gap: 8px;
}
.chat-msg-fav {
  background: none;
  border: none;
  color: #c4b68a;
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: transform 0.15s, color 0.15s;
}
.chat-msg-fav:active { transform: scale(1.3); }
.chat-msg-fav.active { color: var(--gold); }
.chat-msg-bubble-me {
  max-width: 75%;
  background: linear-gradient(135deg, #8aa870, #6b8a55);
  color: #fff;
  padding: 8px 12px;
  border-radius: 12px 12px 2px 12px;
  font-family: var(--font-jp);
  font-size: 13px;
  line-height: 1.6;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.chat-msg-time-me {
  font-size: 9px; color: rgba(255,255,255,0.8);
  font-family: var(--font-en); font-style: italic;
  text-align: right; margin-top: 3px;
}
.chat-waiting-mini {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  color: var(--ink-4); font-size: 11px;
  font-family: var(--font-jp); font-style: italic;
}
.chat-panel-form {
  display: flex;
  padding: 12px 10px;
  background: linear-gradient(180deg, #faf2d8 0%, #ffffff 100%);
  border-top: 2px solid var(--wine);
  gap: 8px;
  flex-shrink: 0;
  box-shadow: 0 -4px 8px rgba(0,0,0,0.08);
}
.chat-panel-input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--wine);
  border-radius: 20px;
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--ink);
  background: #ffffff;
  min-width: 0;
}
.chat-panel-input::placeholder {
  color: var(--wine);
  opacity: 0.6;
}
.chat-panel-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(184,149,46,0.2);
}
.chat-panel-send {
  padding: 0 18px;
  background: var(--wine);
  color: var(--gold-light);
  border: 1.5px solid var(--wine-dark);
  border-radius: 20px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.chat-panel-send:active { background: var(--wine-dark); }

/* ================ 今日の偉人とのチャット ================ */
.chat-empty {
  text-align: center; padding: 50px 20px; background: #ffffff;
  border: 1px dashed var(--wine); border-radius: 6px;
}
.chat-empty-title {
  font-size: 15px; font-weight: 800; color: var(--wine); font-family: var(--font-jp);
  letter-spacing: 0.1em; margin-bottom: 10px;
}
.chat-empty-text { font-size: 12px; color: var(--ink-3); line-height: 2; font-family: var(--font-jp); margin-bottom: 16px; }
.chat-empty-btn {
  padding: 8px 18px; background: var(--wine); color: var(--gold-light);
  border: 1px solid var(--wine-dark); border-radius: 3px; font-family: var(--font-jp);
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; cursor: pointer;
}
.chat-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: #ffffff;
  border: 1px solid var(--rule); border-radius: 6px;
  cursor: pointer; margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.chat-header:active { transform: translateY(1px); }
.chat-head-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background-size: cover; background-position: center top;
  background-color: var(--paper-warm); border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--wine); font-family: var(--font-jp); flex-shrink: 0;
}
.chat-head-name { font-size: 15px; font-weight: 800; color: var(--ink); font-family: var(--font-jp); }
.chat-head-sub { font-size: 10px; color: #55a855; font-weight: 700; letter-spacing: 0.1em; }
.chat-waiting {
  display: flex; align-items: center; gap: 10px; padding: 14px 12px;
  margin: 14px 20px; color: var(--ink-4); font-size: 12px;
}
.chat-typing { display: inline-flex; gap: 4px; }
.chat-typing span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-4); animation: chat-typing-bounce 1.2s infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chat-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-6px); opacity: 1; }
}
.chat-waiting-text { font-family: var(--font-jp); letter-spacing: 0.03em; }

/* 手紙タブ */
.letters-empty {
  text-align: center; color: var(--ink-4); padding: 30px 20px;
  font-size: 12px; line-height: 1.9; font-family: var(--font-jp); font-style: italic;
}
.letter-card {
  background: #fffcf3; border: 1px solid var(--rule); border-left: 4px solid var(--wine);
  border-radius: 3px; padding: 14px 16px 12px; margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.letter-date {
  font-size: 11px; color: var(--wine); font-family: var(--font-en);
  font-style: italic; font-weight: 700; letter-spacing: 0.08em;
  padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px dashed var(--rule-soft);
}
.letter-text { font-size: 13px; color: var(--ink); line-height: 1.85; font-family: var(--font-jp); white-space: pre-wrap; }

/* ================ 検索パネル ================ */
.search-panel {
  margin-bottom: 18px;
}
.search-box {
  width: 100%;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-size: 14px;
  font-family: var(--font-jp);
  color: var(--ink);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
  margin-bottom: 12px;
  letter-spacing: 0.03em;
}
.search-box:focus {
  outline: none;
  border-color: var(--wine);
}
.search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.search-filter {
  padding: 6px 14px;
  background: #ffffff;
  border: 1px solid var(--wine);
  color: var(--wine);
  border-radius: 16px;
  font-size: 12px;
  font-family: var(--font-jp);
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.15s;
}
.search-filter.active {
  background: var(--wine);
  color: var(--gold-light);
}
.search-filter:hover { background: var(--paper-warm); }
.search-filter.active:hover { background: var(--wine-dark); }

.search-section-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--wine);
  font-family: var(--font-jp);
  letter-spacing: 0.25em;
  text-align: center;
  margin: 22px 0 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.search-section-label::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
}

/* ================ 見開きの本 ================ */
.open-book {
  display: flex;
  max-width: 680px;
  margin: 16px auto 36px;
  background: #fffcf3;
  border: 2px solid var(--wine-dark);
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px var(--gold),
    0 10px 30px rgba(0,0,0,0.25),
    0 20px 40px rgba(0,0,0,0.12);
  position: relative;
  overflow: hidden;
}
/* 中央の綴じ目 */
.open-book::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.12) 30%,
    rgba(0,0,0,0.32) 48%,
    rgba(0,0,0,0.42) 50%,
    rgba(0,0,0,0.32) 52%,
    rgba(0,0,0,0.12) 70%,
    rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 2;
}
.open-page {
  flex: 1;
  min-width: 0;
  padding: 36px 24px 32px;
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, #fffcf3 0%, #f5ead0 100%);
}
.open-page-left { padding-right: 36px; }
.open-page-right { padding-left: 36px; }
@media (max-width: 520px) {
  .open-book { flex-direction: column; max-width: 360px; }
  .open-book::before { display: none; }
  .open-page { padding: 24px 20px; }
  .open-page-left { border-bottom: 1px solid var(--rule); }
}

/* タイトルページ（左ページ） */
.title-page {
  text-align: center;
  font-family: var(--font-jp);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 340px;
}
.title-page-top,
.title-page-bottom {
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.1em;
}
.title-page-title {
  font-size: 30px;
  font-weight: 800;
  color: var(--wine-dark);
  letter-spacing: 0.25em;
  margin: 22px 0 6px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}
.title-page-sub {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.12em;
  font-family: var(--font-display);
  font-style: italic;
  margin-bottom: 18px;
}
.title-page-divider {
  display: flex;
  justify-content: center;
  margin: 10px 0 18px;
}
.title-page-divider span {
  width: 80px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--wine), transparent);
  position: relative;
}
.title-page-divider span::before {
  content: '❖';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  color: var(--wine);
  background: #fffcf3;
  padding: 0 6px;
}
.title-page-meta {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}
.title-page-meta-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-jp);
}
.title-page-meta-item strong {
  font-size: 28px;
  color: var(--wine);
  font-weight: 800;
}
.title-page-meta-item span {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
}
.title-page-date {
  font-size: 11px;
  color: var(--ink-4);
  font-family: var(--font-en);
  font-style: italic;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
}
.title-page-edit-name {
  background: transparent;
  border: 1px solid var(--wine);
  color: var(--wine);
  padding: 6px 16px;
  border-radius: 3px;
  font-family: var(--font-jp);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  align-self: center;
  margin-bottom: 18px;
  transition: all 0.15s;
}
.title-page-edit-name:active {
  background: var(--wine);
  color: var(--gold-light);
}

/* ================ 旧：見開きヘッダー（消える） ================ */
.my-book-header {
  display: none;
  display: flex;
  gap: 0;
  padding: 20px 10px 28px;
  margin: 0 auto 32px;
  position: relative;
  max-width: 640px;
}
@media (max-width: 520px) {
  .my-book-header {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 20px 4px 28px;
  }
  .my-book-header::before { display: none; }
  .my-book-header-left { padding: 0; justify-content: center; }
  .my-book-header-right {
    padding: 14px 16px;
    border-radius: 4px;
    box-shadow: 2px 3px 8px rgba(0,0,0,0.12);
    width: 100%;
    max-width: 320px;
  }
}
/* 見開き中央の綴じ目の影 */
.my-book-header::before {
  content: '';
  position: absolute;
  top: 20px; bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.2) 45%,
    rgba(0,0,0,0.35) 50%,
    rgba(0,0,0,0.2) 55%,
    rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 1;
}
.my-book-header-left,
.my-book-header-right {
  flex: 1;
  min-width: 0;
  position: relative;
}
.my-book-header-left {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
}
.my-book-header-right {
  padding-left: 14px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.08) 0%, transparent 8%, transparent 95%, rgba(0,0,0,0.03) 100%),
    #fffcf3;
  border: 1px solid var(--rule);
  border-radius: 0 4px 4px 0;
  box-shadow:
    inset 10px 0 15px -12px rgba(0,0,0,0.25),
    2px 3px 8px rgba(0,0,0,0.12);
}
.my-book-cover {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 2 / 3;
  margin: 0 auto;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(184,149,46,0.15) 0%, transparent 55%),
    linear-gradient(135deg, var(--wine) 0%, var(--wine-dark) 100%);
  border-radius: 2px 8px 8px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-shadow:
    inset 0 0 0 1px rgba(212,176,85,0.2),
    6px 8px 20px rgba(0,0,0,0.45),
    0 3px 0 0 #e8ddc6,
    0 5px 0 0 #d4c8a4,
    0 7px 0 0 #bcb088,
    0 9px 0 0 #a49870,
    0 11px 0 0 #988c64,
    0 13px 7px 0 rgba(0,0,0,0.35);
}
.my-book-cover-inner {
  border: 1px solid var(--gold-light);
  padding: 22px 14px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  box-shadow:
    inset 0 0 0 1px rgba(212,176,85,0.35),
    inset 0 0 30px rgba(0,0,0,0.2);
}
.my-book-cover-ornament {
  color: var(--gold-light);
  font-size: 11px;
  opacity: 0.75;
  letter-spacing: 0.1em;
}
.my-book-cover-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--gold-light);
  letter-spacing: 0.2em;
  font-family: var(--font-jp);
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
  margin: 6px 0 2px;
  white-space: nowrap;
}
.my-book-cover-sub {
  font-size: 9px;
  color: var(--gold-light);
  opacity: 0.7;
  letter-spacing: 0.08em;
  font-family: var(--font-en);
  font-style: italic;
  margin-bottom: 8px;
}
.my-book-cover-meta {
  font-size: 10px;
  color: var(--gold-light);
  opacity: 0.65;
  letter-spacing: 0.1em;
  font-family: var(--font-en);
}

.my-book-stats {
  display: none;
}

/* 本のページ内の目次 */
.my-book-toc {
  padding: 18px 20px 20px 12px;
  font-family: var(--font-jp);
}
.my-book-toc-head {
  font-size: 20px;
  font-weight: 800;
  color: var(--wine-dark);
  letter-spacing: 0.4em;
  text-align: center;
  margin-bottom: 4px;
}
.my-book-toc-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 0 auto 14px;
  width: 70%;
  position: relative;
}
.my-book-toc-line::before {
  content: '❖';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  color: var(--wine);
  background: #fffcf3;
  padding: 0 6px;
}
.my-book-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.my-book-toc-list li {
  display: block;
}
.my-book-toc-link {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 8px 4px;
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
  font-family: var(--font-jp);
  border-bottom: 1px dotted var(--rule);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.my-book-toc-link:hover {
  color: var(--wine);
  background: rgba(184,149,46,0.08);
}
.toc-num {
  color: var(--wine);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
}
.toc-title {
  font-weight: 700;
  letter-spacing: 0.05em;
}
.toc-count {
  color: var(--ink-4);
  font-size: 11px;
  font-family: var(--font-en);
  font-style: italic;
}
.my-book-stat { display: none; }

/* 章見出し */
.my-book-chapter {
  text-align: center;
  margin: 26px 0 18px;
  position: relative;
}
.my-book-chapter-label {
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 0.4em;
  font-family: var(--font-en);
  font-style: italic;
  margin-bottom: 4px;
}
.my-book-chapter-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--wine-dark);
  letter-spacing: 0.2em;
  font-family: var(--font-jp);
}
.my-book-chapter-line {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 8px auto 0;
  position: relative;
}
.my-book-chapter-line::before {
  content: '❖';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  color: var(--wine);
  background: var(--paper);
  padding: 0 6px;
}

/* 言葉のブロック */
.my-book-quote {
  cursor: pointer;
}

/* ================ 代表作タブ ================ */
.works-intro {
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
  margin-bottom: 16px;
  font-family: var(--font-jp);
  letter-spacing: 0.05em;
  font-style: italic;
}
.works-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.work-card {
  display: flex;
  gap: 14px;
  background: #ffffff;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--wine);
  border-radius: 3px;
  padding: 12px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: transform 0.15s, box-shadow 0.15s;
  overflow: hidden;
}
.work-card:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.work-thumb {
  width: 120px;
  height: 90px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-color: #e8e0d0;
  border-radius: 3px;
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.work-thumb.book-thumb {
  width: 80px;
  height: 110px;
  background-size: cover;
}
.work-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
  background: rgba(0,0,0,0.18);
  transition: background 0.15s;
}
.work-music:hover .work-play { background: rgba(0,0,0,0.35); }
.work-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.work-type {
  font-size: 10px;
  color: var(--gold);
  font-family: var(--font-en);
  font-style: italic;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.work-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-jp);
  line-height: 1.4;
  letter-spacing: 0.03em;
}
.work-desc {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.65;
  font-family: var(--font-jp);
  letter-spacing: 0.02em;
}
.work-link {
  margin-top: auto;
  font-size: 11px;
  color: var(--wine);
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* 作品のアクションボタン（YouTube + 楽譜） */
.work-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.work-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 10px;
  font-family: var(--font-jp);
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 3px;
  text-decoration: none;
  transition: transform 0.1s, filter 0.1s;
}
.work-btn:active { transform: scale(0.95); }
.work-btn-icon {
  font-size: 11px;
  line-height: 1;
}
.work-btn-yt {
  background: #c4302b;
  color: #ffffff;
  border: 1px solid #8b1f1b;
}
.work-btn-yt:hover { filter: brightness(1.1); }
.work-btn-imslp {
  background: #ffffff;
  color: var(--wine);
  border: 1px solid var(--wine);
}
.work-btn-imslp:hover { background: var(--wine); color: #ffffff; }
.work-iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  display: block;
  background: #000;
}
.work-music.playing { padding: 0; }

/* 画像拡大オーバーレイ */
.image-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  cursor: pointer;
  padding: 20px;
}
.image-overlay img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 4px 30px rgba(0,0,0,0.5);
}
.image-overlay-close {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
}

/* ================ わたしのルーティン ================ */
.my-routine-section {
  background: linear-gradient(135deg, rgba(184,149,46,0.08), rgba(122,46,58,0.05));
  border: 2px solid var(--wine);
  border-radius: 8px;
  padding: 18px 16px 16px;
  margin-bottom: 28px;
  box-shadow: inset 0 0 0 1px var(--gold);
}
.my-routine-heading {
  font-size: 16px;
  font-weight: 800;
  color: var(--wine-dark);
  font-family: var(--font-jp);
  letter-spacing: 0.15em;
  text-align: center;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gold);
}
.routine-slots {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}
.routine-slot {
  padding: 8px 6px;
  background: #ffffff;
  border: 1px solid var(--wine);
  border-radius: 4px;
  color: var(--wine);
  cursor: pointer;
  font-family: var(--font-jp);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: all 0.15s;
}
.routine-slot.active {
  background: var(--wine);
  color: var(--gold-light);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.routine-slot-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.routine-slot-hint {
  font-size: 9px;
  opacity: 0.7;
  letter-spacing: 0.08em;
}
.routine-slot-rename {
  display: block;
  margin: 0 auto 12px;
  padding: 4px 12px;
  background: transparent;
  border: none;
  color: var(--ink-3);
  font-size: 11px;
  font-family: var(--font-jp);
  cursor: pointer;
  text-decoration: underline;
}
.routine-slot-rename:active { color: var(--wine); }
.my-routine-empty {
  text-align: center;
  color: var(--ink-3);
  padding: 16px;
  font-size: 13px;
  font-family: var(--font-jp);
  font-style: italic;
  line-height: 1.7;
}
.my-routine-card {
  margin-bottom: 12px !important;
  border-color: var(--wine) !important;
  background: #ffffff !important;
}
.my-avatar {
  background: var(--wine) !important;
  color: var(--gold-light) !important;
  font-size: 22px !important;
}
.my-routine-edit-btn {
  width: 100%;
  padding: 10px 14px;
  background: var(--wine);
  color: var(--gold-light);
  border: 1px solid var(--wine-dark);
  border-radius: 4px;
  font-family: var(--font-jp);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.my-routine-edit-btn:active { background: var(--wine-dark); }

.routines-section-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--wine);
  font-family: var(--font-jp);
  letter-spacing: 0.2em;
  margin-bottom: 4px;
  text-align: center;
}
.routines-section-sub {
  font-size: 11px;
  color: var(--ink-3);
  text-align: center;
  margin-bottom: 18px;
  font-family: var(--font-jp);
  font-style: italic;
}
.routine-source {
  font-size: 10px;
  color: var(--ink-4);
  font-family: var(--font-en);
  font-style: italic;
  text-align: right;
  margin: -6px 0 12px;
  letter-spacing: 0.03em;
  padding-right: 6px;
}
.routine-story {
  background: #fffcf3;
  border-left: 3px solid var(--gold);
  padding: 10px 12px;
  margin: 10px 0;
  font-size: 12px;
  line-height: 1.8;
  color: var(--ink-2);
  font-family: var(--font-jp);
  letter-spacing: 0.02em;
  border-radius: 2px;
}
.routine-copy-btn {
  width: 100%;
  margin-top: 10px;
  padding: 8px 14px;
  background: transparent;
  color: var(--wine);
  border: 1px dashed var(--wine);
  border-radius: 3px;
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.routine-copy-btn:active {
  background: var(--wine);
  color: var(--gold-light);
}

/* ルーティン編集モーダル */
.routine-edit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.routine-edit-modal {
  background: #ffffff;
  border-radius: 6px;
  padding: 20px;
  max-width: 580px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
.routine-edit-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.routine-edit-head h3 {
  font-size: 16px;
  color: var(--wine);
  font-family: var(--font-jp);
}
.routine-edit-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--ink-3);
}
.routine-edit-desc {
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 12px;
  line-height: 1.7;
}
.routine-edit-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.re-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 8px;
  background: #fffcf3;
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
}
.re-start, .re-end { width: 50px; }
.re-row input, .re-row select {
  padding: 4px 6px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-family: inherit;
  font-size: 12px;
}
.re-activity { flex: 1; min-width: 100px; }
.re-del {
  background: none;
  border: none;
  color: var(--wine);
  font-size: 18px;
  cursor: pointer;
  padding: 0 6px;
}
.routine-edit-add {
  width: 100%;
  padding: 8px;
  background: transparent;
  border: 1px dashed var(--rule);
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--font-jp);
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.routine-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--rule);
  padding-top: 12px;
}
.routine-edit-cancel,
.routine-edit-save {
  padding: 8px 18px;
  border-radius: 3px;
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.1em;
}
.routine-edit-cancel {
  background: #ffffff;
  border: 1px solid var(--rule);
  color: var(--ink-3);
}
.routine-edit-save {
  background: var(--wine);
  border: 1px solid var(--wine-dark);
  color: var(--gold-light);
}

/* ================ 付箋（出来事へのメモ） ================ */
.event-note {
  margin-top: 10px;
  padding: 10px 12px 8px;
  background: #fff5b8;
  border: 1px solid #e6d88f;
  box-shadow:
    2px 2px 6px rgba(0,0,0,0.1),
    inset 0 0 0 1px rgba(255,255,255,0.4);
  position: relative;
  transform: rotate(-0.5deg);
  border-radius: 1px 6px 2px 4px;
}
.event-note::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%) rotate(3deg);
  width: 28px;
  height: 10px;
  background: rgba(184,149,46,0.25);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.event-note-text {
  font-size: 12px;
  color: #4a3a20;
  font-family: var(--font-jp);
  line-height: 1.75;
  letter-spacing: 0.03em;
  white-space: pre-wrap;
  padding-right: 24px;
}
.event-note-edit {
  position: absolute;
  top: 6px;
  right: 6px;
  background: none;
  border: none;
  color: #8b7030;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 6px;
}
.event-note-add {
  margin-top: 8px;
  padding: 4px 12px;
  background: transparent;
  border: 1px dashed var(--rule);
  border-radius: 3px;
  color: var(--ink-4);
  font-size: 11px;
  font-family: var(--font-jp);
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: all 0.15s;
}
.event-note-add:active {
  background: #fff5b8;
  color: var(--wine);
  border-color: var(--wine);
}

/* ================ 日記 ================ */
.diary-section {
  margin-bottom: 24px;
}
.diary-form {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.diary-section {
  background: #ffffff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 18px 16px 16px !important;
  margin: 0 0 24px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.diary-input {
  width: 100%;
  min-height: 110px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-family: var(--font-jp);
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink);
  resize: vertical;
  letter-spacing: 0.03em;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
}
.diary-input:focus {
  outline: none;
  border-color: var(--wine);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
.diary-submit {
  align-self: flex-end;
  padding: 8px 22px;
  background: var(--wine);
  color: var(--gold-light);
  border: 1px solid var(--wine-dark);
  border-radius: 3px;
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: background 0.15s;
}
.diary-submit:active { background: var(--wine-dark); }
.diary-empty {
  text-align: center;
  color: var(--ink-4);
  padding: 20px;
  font-size: 13px;
  font-family: var(--font-jp);
  font-style: italic;
}
.diary-entries {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.diary-entry {
  background: #ffffff;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--wine);
  border-radius: 3px;
  padding: 14px 16px 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  position: relative;
}
.diary-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--rule-soft);
}
.diary-date {
  font-size: 11px;
  color: var(--wine);
  font-family: var(--font-en);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.diary-delete {
  background: none;
  border: none;
  color: var(--ink-4);
  font-size: 18px;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
}
.diary-delete:active { color: var(--wine); }
.diary-text {
  font-size: 14px;
  line-height: 1.95;
  color: var(--ink);
  font-family: var(--font-jp);
  letter-spacing: 0.03em;
}

/* 奥付 */
.my-book-colophon {
  margin-top: 36px;
  padding: 18px 0;
  text-align: center;
}
.colophon-line {
  width: 60px;
  height: 1px;
  background: var(--rule);
  margin: 8px auto;
}
.colophon-text {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 2.1;
  letter-spacing: 0.08em;
  font-family: var(--font-jp);
  font-style: italic;
}
.fav-intro {
  font-size: 12px;
  color: var(--ink-2);
  background: var(--paper-light);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--wine);
  padding: 12px 16px;
  margin-bottom: 18px;
  border-radius: 2px;
  line-height: 1.8;
  font-family: var(--font-jp);
  box-shadow: inset 0 0 0 1px rgba(184,149,46,0.2);
}