/* ==========================================================================
   もなとーく デザインシステム(ポップ・カジュアル)
   --main-color は管理者コンソールで自由に指定できる値をそのまま活かす。
   ここではその1色から周辺色を計算し、統一感のある配色に仕上げている。
   ========================================================================== */

:root {
  --main-color: #ffa831;
  /* 管理者設定で上書きされる。ここはフォールバック値 */
  --main-color-soft: color-mix(in srgb, var(--main-color) 16%, white);
  --main-color-softer: color-mix(in srgb, var(--main-color) 8%, white);
  --main-color-strong: color-mix(in srgb, var(--main-color) 82%, black);
  --main-color-text: color-mix(in srgb, var(--main-color) 55%, black);

  --bg: color-mix(in srgb, var(--main-color) 6%, #fffdfa);
  --surface: #ffffff;
  --text: #3a2e22;
  --text-muted: #8a7c6d;
  --border: #f0e3d0;
  --danger: #ff6b81;
  --success: #34c38f;

  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --shadow-card: 0 6px 20px -6px color-mix(in srgb, var(--main-color) 35%, transparent),
    0 2px 6px rgba(58, 46, 34, 0.06);
  --shadow-pop: 0 4px 0 color-mix(in srgb, var(--main-color-strong) 60%, transparent);
}

/* ダークモード。--main-color(管理者設定 or 既定値)はそのまま使い、それ以外の面・文字色だけを
   黒側に大きく寄せたcolor-mixで再計算する(アクセントカラーの個性は残しつつ画面全体は暗くする)。 */
:root[data-theme="dark"] {
  --main-color-soft: color-mix(in srgb, var(--main-color) 22%, #1a1410);
  --main-color-softer: color-mix(in srgb, var(--main-color) 12%, #1a1410);
  --main-color-strong: color-mix(in srgb, var(--main-color) 88%, black);
  --main-color-text: color-mix(in srgb, var(--main-color) 65%, white);

  --bg: color-mix(in srgb, var(--main-color) 10%, #17130f);
  --surface: color-mix(in srgb, var(--main-color) 4%, #241e18);
  --text: #f0e6d8;
  --text-muted: #b3a595;
  --border: color-mix(in srgb, var(--main-color) 18%, #3a2e22);
  --danger: #ff8a9a;
  --success: #4fd6a3;

  --shadow-card: 0 6px 20px -6px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 4px 0 color-mix(in srgb, var(--main-color-strong) 70%, black);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 900px;
  margin: 0 auto;
  background-color: transparent;
  padding: 0;
}

body {
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif, "Noto Color Emoji";
  background: linear-gradient(180deg, var(--main-color-softer) 0%, var(--bg) 320px);
  background-repeat: no-repeat;
  color: var(--text);
  padding: 0;
  margin: 0 auto;
  line-height: 1.7;
  font-size: 16px;
}

a {
  color: var(--main-color-text);
}

a:not(.profile-series-column a, .pagination a) {
  position: relative;
  display: inline-block;
  text-decoration: none;
  z-index: 0;
}

a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--main-color-soft);
  border-radius: var(--radius-sm);
  z-index: -1;
  top: -2px;
  right: -8px;
  bottom: -2px;
  left: -8px;
  opacity: 0;
}

a:not(.item7 a,
  .item7 p a, .pagination a, .sort-tabs a, header h1 a, .profile-series-column a, .profile-share-links a, #footer-top-link, .sidebar-create-link, .item4 a, .share-links a):hover::after {
  opacity: 1;
}

/* ------------------------- ヘッダー / フッター ------------------------- */

header {
  background-color: var(--main-color);
  padding: 16px 24px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--main-color) 50%, transparent);
}

header h1 {
  margin: 0;
  text-align: right;
  font-size: 2em;
  color: #fff;
  text-shadow: 0 2px 0 color-mix(in srgb, var(--main-color-strong) 40%, transparent);
}

header h1 a {
  color: inherit;
  text-decoration: none;
}

header h1 a:hover {
  text-decoration: underline;
}

header .pagetitle-en {
  margin: 2px 0 0;
  text-align: right;
  font-size: 0.75em;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
}

header nav {
  display: flex;
  align-items: center;
}

.scroll-buttons {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
}

.scroll-buttons button {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--main-color);
  box-shadow: var(--shadow-card);
  font-size: 1.1em;
  line-height: 1;
  cursor: pointer;
}

.scroll-buttons button:hover {
  filter: brightness(1.05);
}

#achievement-toast-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
}

.achievement-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
  max-width: 320px;
  padding: 12px 16px;
  background: var(--surface);
  color: var(--text-main, inherit);
  border-left: 4px solid var(--main-color);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateX(120%);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.achievement-toast.show {
  opacity: 1;
  transform: translateX(0);
}

.achievement-toast.hide {
  opacity: 0;
  transform: translateX(120%);
}

.achievement-toast-icon {
  font-size: 1.6em;
  line-height: 1;
}

.achievement-toast-title {
  font-size: 0.75em;
  font-weight: bold;
  color: var(--main-color);
}

.achievement-toast-label {
  font-weight: bold;
}

.achievement-toast-desc {
  font-size: 0.85em;
  opacity: 0.8;
}

/* プロフィールアイコン等のクリック演出(ハート/星/激レアでモナコイン)。 */
.click-burst-particle {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 2000;
  font-size: var(--size, 20px);
  line-height: 1;
  transform: translate(-50%, -100%) rotate(var(--angle, 0deg));
  animation: click-burst-fly var(--duration, 700ms) ease-out forwards;
}

.click-burst-coin {
  width: var(--size, 20px);
  height: var(--size, 20px);
  object-fit: contain;
}

@keyframes click-burst-fly {
  0% {
    opacity: 1;
    transform: translate(-50%, -100%) rotate(var(--angle, 0deg)) translateY(0) scale(0.6);
  }

  20% {
    opacity: 1;
    transform: translate(-50%, -100%) rotate(var(--angle, 0deg)) translateY(-10px) scale(1.1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -100%) rotate(var(--angle, 0deg)) translateY(-70px) scale(0.9);
  }
}

main {
  padding: 24px 20px 40px;
  background: transparent;
  flex-grow: 1;
}

footer {
  text-align: center;
  padding: 24px;
  background-color: var(--main-color);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin-top: 30px;
}

footer p {
  margin: 0 0 8px;
  color: #fff;
}

footer a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

footer a:hover {
  text-decoration: underline;
}

.footer-admin-row {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 12px;
}

.footer-admin-row a {
  opacity: 0.85;
  font-size: 0.85em;
}

.footer-admin-row a:last-child {
  opacity: 0;
}

/* ------------------------------- ログイン ------------------------------- */

#login-area {
  padding: 8px 14px;
  text-align: left;
  background: rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 0.9em;
}

.logged-in {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: var(--surface);
  padding: 10px;
  border-radius: var(--radius-md);
}

/* ------------------------------ 共通サイドメニュー ------------------------------ */

#sidebar-toggle {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 260;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--main-color);
  box-shadow: var(--shadow-card);
  font-size: 1.2em;
  line-height: 1;
}

#theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 260;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  font-size: 1.2em;
  line-height: 1;
}

#sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(58, 46, 34, 0.35);
  z-index: 220;
}

#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100%;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  z-index: 240;
  padding: 72px 20px 20px;
  overflow-y: auto;
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (max-width: 1460px) {
  #sidebar {
    transform: translateX(-100%);
  }

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

body.sidebar-open #sidebar-backdrop {
  display: block;
}

#sidebar hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 8px 0;
  width: 100%;
}

.sidebar-top-link {
  font-size: 0.9em;
  color: var(--text-muted);
}

.sidebar-inline-links {
  margin: 0;
}

.lang-switch {
  display: flex;
  gap: 8px;
  font-size: 0.85em;
}

.lang-switch a {
  opacity: 0.55;
}

.lang-switch a.active {
  opacity: 1;
  font-weight: bold;
}

#sidebar #login-area {
  padding: 0;
  background: transparent;
  color: var(--text);
  font-size: 1em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0 auto 4px;
}

.sidebar-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-all;
  font-size: 0.85em;
  color: var(--text-muted);
  text-align: center;
}

.sidebar-user-icon {
  width: 50%;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  margin: 12px;
}

.sidebar-user-icon-default {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8em;
  line-height: 1;
  width: auto;
  height: auto;
  border-radius: 0;
}

.sidebar-user-icon-default svg,
.following-icon-default svg {
  width: 1em;
  height: 1em;
}

.sidebar-user-icon-wrap {
  position: relative;
  display: inline-block;
}

/* アイコンフレーム(実績で選べる装飾枠)の重ね表示。プロフィール本体以外の箇所
   (サイドバー等)で使う汎用版。親要素をposition:relativeにした上で使うこと。 */
.icon-frame-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.sidebar-user-icon-wrap .icon-frame-overlay {
  width: 61%;
}

.sidebar-heading {
  margin: 0;
  font-weight: bold;
  color: var(--text-muted);
  font-size: 0.9em;
}

.sidebar-notification {
  display: block;
  font-size: 0.85em;
  line-height: 1.4;
  padding: 4px 0;
  word-break: break-all;
}

.sidebar-notificationwrap {
  background: var(--bg);
  padding: 8px;
  border-radius: var(--radius-sm);
}

.sidebar-empty {
  margin: 0;
  font-size: 0.85em;
  color: var(--text-muted);
}

.sidebar-read-all {
  display: block;
  margin-top: 4px;
  padding: 0.2em 0.8em;
  border: none;
  font-size: 0.8em;
  text-decoration: none;
  cursor: pointer;
}

.sidebar-create-link {
  display: block;
  text-align: center;
  background: var(--main-color);
  color: #fff;
  font-weight: bold;
  padding: 12px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pop);
}

.sidebar-create-link:hover {
  filter: brightness(1.05);
  text-decoration: none;
}

@media (min-width: 1161px) {
  #sidebar-backdrop {
    display: none !important;
  }
}

/* ------------------------- Mpurse未インストール案内ポップアップ ------------------------- */

#mpurse-install-popup {
  position: fixed;
  inset: 0;
  z-index: 300;
}

.mpurse-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(58, 46, 34, 0.45);
}

.mpurse-popup-box {
  position: relative;
  max-width: 340px;
  margin: 20vh auto 0;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px;
  text-align: center;
}

.mpurse-popup-box p {
  margin: 0 0 12px;
}

.mpurse-popup-box a {
  font-weight: bold;
}

.mpurse-missing-banner {
  background: var(--main-color-softer);
  border-bottom: 2px dashed var(--main-color-soft);
  color: var(--main-color-text);
  text-align: center;
  padding: 10px 16px;
  font-size: 0.9em;
}

.mpurse-missing-banner a {
  font-weight: bold;
}

/* -------------------------------- ボタン -------------------------------- */

button,
.form-group button,
input[type="submit"] {
  font-family: inherit;
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--main-color);
  color: #fff;
  padding: 10px 22px;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  box-shadow: var(--shadow-pop);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

button:hover,
.form-group button:hover,
.item7 a:hover {
  background-color: var(--main-color);
  filter: brightness(1.05);
  transform: translateY(-1px);
}

button:active,
.form-group button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--main-color-strong) 60%, transparent);
}

.form-group button {
  width: 100%;
  padding: 12px;
}

/* 投稿ボタンと並べても混同しないよう、下書き保存はテキストリンク風の控えめな見た目にする
   (位置は投稿ボタンのすぐ近くに残し、「下書き保存という選択肢があること」自体は
   見つけやすいままにする)。 */
#draft-save-button {
  display: block;
  width: auto;
  margin: 10px auto 0;
  padding: 4px 8px;
  background: none;
  color: var(--text-muted);
  font-weight: normal;
  font-size: 0.9em;
  text-decoration: underline;
  box-shadow: none;
}

#draft-save-button:hover {
  background: none;
  color: var(--main-color-text);
  filter: none;
  transform: none;
}

/* 投げ銭ボタンだけ控えめなセカンダリ配色にする */
.tip-link {
  background: var(--main-color-soft);
  color: var(--main-color-text);
  box-shadow: none;
  padding: 6px 16px;
  font-size: 0.85em;
}

.tip-link:hover {
  background: var(--main-color-soft);
  filter: brightness(0.97);
  transform: none;
}

/* --------------------------------- タブ --------------------------------- */

.search-form {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  flex-wrap: wrap;
  align-items: center;
}

.search-form input[type="text"] {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--main-color-soft);
  font-family: inherit;
}

.search-form a {
  color: var(--main-color-text);
  font-size: 0.9em;
}

.sort-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 20px;
}

.sort-tabs {
  display: flex;
  gap: 8px;
  margin: 0;
  flex-wrap: wrap;
}

.sort-tabs a {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 2px solid var(--main-color-soft);
  color: var(--main-color-text);
  font-weight: bold;
  text-decoration: none;
}

.sort-tabs a.active {
  background: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
}

/* ------------------------------ お知らせ枠 ------------------------------ */

.nav-txt {
  background: var(--main-color-softer);
  max-width: 100%;
  margin: 0 0 20px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  border: 2px dashed var(--main-color-soft);
}

.nav-txt:empty {
  display: none;
}

.nav-txt p {
  margin: 0;
}

#post-fee-notice {
  margin: -10px 0 16px;
  color: var(--text-muted);
  font-size: 0.85em;
}

/* -------------------------------- お知らせ -------------------------------- */

#announcement-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.announcement-box {
  position: relative;
  background: var(--surface);
  border: 2px solid var(--main-color-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 16px 20px;
  display: flex;
}

.announcement-details {
  width: 100%;
}

.announcement-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}

.announcement-summary::-webkit-details-marker {
  display: none;
}

.announcement-category-label {
  display: inline-block;
  flex-shrink: 0;
  background: var(--main-color);
  color: #fff;
  font-size: 0.75em;
  font-weight: bold;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}

.announcement-title {
  font-size: 1.05em;
  font-weight: bold;
}

.announcement-body {
  color: var(--text);
  font-size: 0.9em;
  margin-top: 10px;
}

.announcement-body :first-child {
  margin-top: 0;
}

.announcement-body :last-child {
  margin-bottom: 0;
}

.announcement-share-container .share-links {
  text-align: right;
  margin-top: 8px;
  font-size: 0.75em;
}

.announcement-more-link {
  align-self: center;
  font-size: 0.9em;
  color: var(--main-color-text);
}

.announcement-none-active {
  margin: 0;
  padding: 12px 16px;
  color: var(--text-muted);
  font-size: 0.9em;
  text-align: center;
}

.announcement-dismiss-button {
  background: var(--main-color-softer);
  border: 1px solid var(--main-color-soft);
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  padding: 0 4px;
  font-size: 0.8em;
  cursor: pointer;
  width: 8em;
  height: 2em;
}

.announcement-dismiss-button:hover {
  background: var(--main-color-soft);
}

/* -------------------------------- 一覧の表示切り替え -------------------------------- */

.view-toggle {
  display: flex;
  gap: 8px;
  margin: 0;
  flex-shrink: 0;
}

.view-toggle button {
  background: var(--surface);
  color: var(--main-color-text);
  border: 2px solid var(--main-color-soft);
  padding: 6px 16px;
}

.view-toggle button.active {
  background: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
}

.posts-list.view-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .posts-list.view-card {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .posts-list.view-card {
    grid-template-columns: 1fr;
  }

  body {
    font-size: 24px;
  }

  /* フォント拡大により検索欄のプレースホルダーが箱からはみ出して見切れるため、
     横並びをやめて1行ずつ全幅で表示する。 */
  .search-form input[type="text"] {
    flex: 1 1 100%;
    width: 100%;
  }
}

.posts-list.view-card article {
  display: block;
  padding: 14px;
}

.posts-list.view-card .item1 {
  padding: 0 0 8px;
}

.posts-list.view-card .item1 h2 {
  font-size: 1em;
}

.posts-list.view-card .item2 {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: none;
  margin: 0 0 8px;
}

.posts-list.view-card .item3,
.posts-list.view-card .item4,
.posts-list.view-card .item5 {
  display: none;
}

.posts-list.view-card .edit_link {
  grid-column: auto;
  margin: 4px 0 0;
}

.posts-list.view-card .item6 h3 {
  font-size: 0.85em;
}

.posts-list.view-card .item7 {
  margin-top: 8px;
}

/* -------------------------------- 記事カード -------------------------------- */

article {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto auto auto auto auto auto;
  margin: 0 0 24px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.item {
  margin: 0 10px;
}

.item1 {
  grid-column: 1 / span 2;
  padding: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.item1 .bookmark-button {
  flex-shrink: 0;
  font-size: 0.75em;
}

.item1 h2 {
  margin: 0;
  font-size: 1.3em;
}

.item1 h3 {
  margin: 0;
}

.summary-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-line;
}

/* プロフィールページの投稿一覧は一覧グリッド用のarticleレイアウトを使わず、素直な縦積みにする */
.profile-main article {
  display: flex;
}

.item2 {
  grid-column: 1;
  grid-row: 2 / span 4;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  height: auto;
  background: var(--main-color-softer);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.item2 img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.item3 {
  grid-column: 2;
  grid-row: 2;
}

.item4 {
  grid-column: 2;
  grid-row: 3;
  text-align: left;
}

.item4 a {
  display: inline-block;
  background: var(--main-color-softer);
  color: var(--main-color-text);
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.85em;
  margin: 2px 4px 2px 0;
  text-decoration: none;
}

.item4 a:hover {
  background: var(--main-color-soft);
}

.item5 {
  grid-column: 2;
  grid-row: 4;
  text-align: left;
  color: var(--text-muted);
  font-size: 0.9em;
}

.item5 a {
  font-weight: bold;
}

.item6 {
  grid-column: 2;
  grid-row: 5;
}

.item7 {
  grid-column: 1 / span 2;
  grid-row: 6;
  text-align: right;
}

.edit_link,
#article-edit-link {
  display: block;
  text-align: right;
  grid-column: 2;
  font-size: 0.85em;
}

.nsfw {
  display: inline-block;
  background: var(--danger);
  color: #fff;
  margin: 0 0 6px;
  padding: 2px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.8em;
  font-weight: bold;
}

.nsfw-blur {
  filter: blur(14px);
  user-select: none;
}

.nsfw-gate {
  text-align: center;
  padding: 40px 20px;
}

.nsfw-gate-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

.nsfw-gate-buttons button {
  min-width: 100px;
}

img.nsfw-blur {
  transform: scale(1.05);
  /* ぼかしで縁が透けて見えるのを軽減 */
}

.placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--main-color-softer);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #999);
  font-size: 0.75em;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.placeholder::after {
  content: "NO IMAGE";
}

/* 限定記事で、保有者以外には本文中の画像を見せられないために代わりに表示するプレースホルダー。
   通常のNO IMAGE(画像が単に無い)と区別できるよう鍵アイコンを添える。 */
.placeholder-locked::after {
  content: "";
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  background-color: var(--text-muted, #999);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10V8a6 6 0 1 1 12 0v2h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h1zm2 0h8V8a4 4 0 1 0-8 0v2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10V8a6 6 0 1 1 12 0v2h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h1zm2 0h8V8a4 4 0 1 0-8 0v2z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.rotate {
  transform: rotate(-90deg);
}

/* 必要トークン一覧 */
.item6 h3 {
  margin: 0 0 6px;
  font-size: 0.95em;
  color: var(--text-muted);
}

.item6 ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.item6 li {
  background: var(--main-color-softer);
  border: 1px solid var(--main-color-soft);
  border-radius: var(--radius-pill);
  padding: 4px 14px;
  font-size: 0.85em;
}

.buy-link {
  display: inline-block;
  background: var(--main-color);
  color: #fff;
  padding: 1px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.85em;
  text-decoration: none;
}

.buy-link:hover {
  filter: brightness(1.05);
  text-decoration: none;
}

#share-links-container {
  padding: 0 20px;
}

.share-links {
  margin-top: 1em;
  text-align: center;
}

.share-links a {
  display: inline-block;
  background: var(--main-color-softer);
  color: var(--main-color-strong, var(--main-color));
  padding: 4px 14px;
  margin-right: 6px;
  border-radius: var(--radius-pill);
  font-size: 0.85em;
  text-decoration: none;
}

.share-links a:hover {
  filter: brightness(1.05);
  text-decoration: none;
}

#comments-section {
  margin-top: 2em;
}

#comment-form textarea {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 2px solid var(--main-color-soft);
  font-family: inherit;
  resize: vertical;
  margin-bottom: 8px;
}

.comment-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comment-list li {
  background: var(--main-color-softer);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.comment-author {
  font-weight: bold;
}

.author-name-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.author-name-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}

.comment-time {
  color: var(--text-muted);
  font-size: 0.85em;
  margin-left: 8px;
}

.comment-delete-btn {
  float: right;
  background: transparent;
  color: var(--danger);
  box-shadow: none;
  padding: 2px 10px;
  font-size: 0.8em;
}

.comment-delete-btn:hover {
  background: transparent;
  filter: none;
  text-decoration: underline;
  transform: none;
}

.comment-content {
  margin: 6px 0 0;
}

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

.item7 a,
.item7 p a {
  color: #fff;
  display: block;
  background: var(--main-color);
  margin: 10px 0 0;
  padding: 14px;
  text-decoration: none;
  font-size: 1.05em;
  font-weight: bold;
  border-radius: var(--radius-pill);
  text-align: center;
  box-shadow: var(--shadow-pop);
}

.item7 span {
  display: block;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95em;
}

/* -------------------------------- ページネーション -------------------------------- */

.pagination {
  text-align: center;
  margin: 24px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.pagination a,
.pagination .current-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 2px solid var(--main-color-soft);
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
}

.pagination a.prev-next {
  padding: 0 18px;
}

.pagination a:hover {
  background: var(--main-color-soft);
}

.pagination .current-page {
  background: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
}

.pagination .ellipsis {
  color: var(--text-muted);
  font-weight: bold;
  padding: 0 4px;
}

/* -------------------------------- フォーム -------------------------------- */

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
  color: var(--main-color-text);
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="url"],
.form-group input[type="datetime-local"],
.form-group textarea {
  width: 100%;
  padding: 10px 14px;
  box-sizing: border-box;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: inherit;
  font-size: 1em;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--main-color);
}

.form-group input[readonly] {
  background: var(--main-color-softer);
  color: var(--text-muted);
}

.live-datetime {
  display: inline-block;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--main-color-softer);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.form-group textarea {
  height: 150px;
}

.markdown-toolbar {
  margin-bottom: 8px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  background: var(--surface);
}

.markdown-toolbar summary {
  cursor: pointer;
  font-weight: bold;
  color: var(--main-color-text);
}

.markdown-toolbar-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.markdown-toolbar-buttons button {
  width: auto;
  flex: 0 0 auto;
  padding: 4px 12px;
  font-size: 0.85em;
  font-weight: normal;
  box-shadow: none;
}

.content-preview-wrap {
  margin-top: 8px;
}

/* -------------------------------- 投票フォーム(投稿・編集) -------------------------------- */

.poll-form-section {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--main-color-softer);
  border-radius: var(--radius-sm);
}

.poll-option-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.poll-option-row input[type="text"] {
  flex: 1;
}

.poll-remove-option-button {
  flex: 0 0 auto;
  padding: 4px 10px;
}

.poll-option-row .poll-remove-option-button {
  width: 50px;
}

/* -------------------------------- 投票(記事表示) -------------------------------- */

.poll-box {
  margin: 16px 0;
  padding: 14px 16px;
  border: 1px solid var(--main-color-softer);
  border-radius: var(--radius-md);
}

.poll-option-vote-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.poll-result-row {
  margin-bottom: 8px;
}

.poll-result-bar-wrap {
  background: var(--main-color-softer);
  border-radius: var(--radius-sm);
  overflow: hidden;
  height: 20px;
  margin-top: 2px;
}

.poll-result-bar {
  background: var(--main-color, #4a76d4);
  height: 100%;
}

.poll-meta {
  margin-top: 8px;
  font-size: 0.85em;
  color: var(--text-muted);
}

.content-preview-pane {
  margin-top: 8px;
  padding: 12px 16px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

/* -------------------------------- 画像アップロード選択プレビュー(送信前) -------------------------------- */

.pending-image-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.pending-image-preview-item {
  position: relative;
  width: 80px;
  height: 80px;
}

.pending-image-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.pending-image-remove-button {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 0.75em;
  line-height: 1;
  border-radius: 50%;
}

.content-preview-pane img {
  max-width: 100%;
  border-radius: var(--radius-sm);
}

.form-group input[type="color"] {
  width: 60px;
  height: 40px;
  padding: 2px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}

.field-hint {
  margin: 6px 0 0;
  font-size: 0.85em;
  color: var(--text-muted);
}

.field-warning {
  margin: 6px 0 0;
  font-size: 0.85em;
  color: var(--danger);
}

.tag-suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}

/* .form-group button { width:100%; padding:12px; } (詳細度 0,1,1)がここより強く
   幅・パディングを上書きしてしまうため、.form-group を前置して詳細度を上げている
   (既存の .form-group .radio-group input[type="radio"] 等と同じ考え方)。 */
.form-group .tag-suggestion-chip {
  width: auto;
  background: var(--main-color-softer);
  border: 1px solid var(--main-color-soft);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
  font-size: 0.85em;
  font-weight: normal;
  color: var(--main-color-text);
  box-shadow: none;
  cursor: pointer;
}

.form-group .tag-suggestion-chip:hover {
  background: var(--main-color-soft);
}

.tag-suggestion-dropdown {
  position: relative;
  margin-top: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  max-width: 280px;
  overflow: hidden;
}

.form-group .tag-suggestion-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  font-size: 0.9em;
  font-weight: normal;
  background: none;
  border: none;
  cursor: pointer;
}

.form-group .tag-suggestion-item:hover {
  background: var(--main-color-softer);
}

.form-group .radio-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.form-group .radio-group label {
  display: inline;
  margin-right: 4px;
  font-weight: normal;
}

.form-group .radio-group input[type="radio"] {
  margin-right: 5px;
}

.form-group .radio-group input[type="checkbox"] {
  margin-left: 20px;
}

.form-group .placeholder {
  width: 112px;
  height: 160px;
  background-color: var(--main-color-softer);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.form-group img {
  max-width: 300px;
  border-radius: var(--radius-sm);
}

.form-group .preview {
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-group .preview div {
  margin-left: 20px;
}

.fee-notice,
.fee-pending-banner {
  background: var(--main-color-softer);
  border: 2px dashed var(--main-color-soft);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  color: var(--main-color-text);
  font-weight: bold;
}

.fee-sending-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(58, 46, 34, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.fee-sending-overlay-box {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px 28px;
  max-width: 420px;
  text-align: center;
  font-weight: bold;
  color: var(--text);
}

.fee-sending-overlay-box p {
  white-space: pre-line;
  margin: 0;
}


.fee-pending-banner.fee-pending-ready {
  border-style: solid;
  border-color: var(--main-color);
  font-weight: bold;
}

.fee-pending-tx-hash {
  font-size: 0.85em;
  word-break: break-all;
  margin-top: 6px;
}

#fee-pending-status {
  font-size: 0.9em;
  margin-top: 4px;
}

#fee-manual-check-button {
  margin-top: 8px;
}

.post-form-fieldset {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.post-form-fieldset:disabled {
  opacity: 0.5;
  filter: grayscale(1);
  pointer-events: none;
}

.required-mark {
  color: #e02020;
  font-weight: bold;
  margin-left: 2px;
}

/* ハニーポット: 人間には見えないが、機械的に全項目を埋めるボットには見える位置に置く */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.required-note {
  font-size: 0.85em;
  color: #e02020;
  margin: -4px 0 12px;
}

.nft-gating-help {
  margin-top: 6px;
  font-size: 0.85em;
  color: var(--text-muted, #666);
}

.nft-gating-help summary {
  cursor: pointer;
  color: var(--main-color-text);
}

.nft-gating-help p {
  margin: 6px 0 0;
}

.icon-frame-select {
  font-size: 0.9em;
}

.icon-frame-select summary {
  cursor: pointer;
  font-weight: bold;
  color: var(--main-color-text);
}

.icon-flame-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}

.icon-frame-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 72px;
  font-weight: normal;
  font-size: 0.85em;
  text-align: center;
  cursor: pointer;
}

button.icon-frame-option {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  color: inherit;
}

.icon-frame-option-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-frame-thumb {
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: var(--main-color-softer);
  border-radius: var(--radius-sm);
}


.notif-heading-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
}

.notif-heading {
  display: block;
  font-size: 1.17em;
  font-weight: bold;
  margin: 1em 0;
}

.notif-about {
  margin: 4px 0 10px;
  font-size: 0.85em;
  color: var(--text-muted, #666);
}

.notif-about summary {
  cursor: pointer;
  color: var(--main-color-text);
}

.notif-about ul {
  margin: 6px 0 0;
  padding-left: 1.2em;
}

.notif-dispenser-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 4px 16px;
}

.notif-dispenser-card {
  flex: 0 0 auto;
  width: 220px;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.notif-dispenser-asset {
  font-weight: bold;
  color: var(--main-color-text);
}

.notif-pending-fee-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.notif-pending-fee-card {
  flex: 0 1 calc(25% - 8px);
  min-width: 160px;
  background: var(--main-color-softer);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  color: var(--text);
}

.notif-columns {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 800px) {
  .notif-pending-fee-card {
    flex: 1 1 100%;
  }

  .notif-columns {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------- 記事本文ページ -------------------------------- */

#article-content {
  margin: 0;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
}

#article-content h1 {
  margin-top: 0;
}

#author-info {
  margin: 0 0 16px;
  color: var(--text-muted);
}

.tip-section {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}

.tip-stats {
  color: var(--main-color-text);
  font-size: 0.9em;
  font-weight: bold;
}

/* アイコン(🔖)のみのボタン。記事一覧・記事ページ共通。ブックマーク済みかどうかは
   絵文字自体を変えるのではなく背景色の有無で区別する。 */
.bookmark-button,
.form-group .bookmark-button {
  width: auto;
  background: var(--surface);
  color: var(--main-color-text);
  border: 2px solid var(--main-color-soft);
  box-shadow: none;
  font-size: 0.8em;
  line-height: 1;
  padding: 6px 10px;
}

.bookmark-button:hover,
.form-group .bookmark-button:hover {
  filter: none;
  background: var(--main-color-softer);
}

.bookmark-button.bookmarked {
  background: var(--main-color-soft);
  border-color: var(--main-color);
}

.bookmark-button svg,
.favorite-button svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  vertical-align: -0.1em;
}

.bookmark-button.bookmarked svg,
.favorite-button[data-favorited="1"] svg {
  fill: currentColor;
}

.draft-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--main-color-softer);
  border: 1px solid var(--main-color-soft);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 0.9em;
}

.draft-banner button {
  font-size: 0.85em;
  padding: 4px 12px;
}

.draft-banner .draft-restore {
  background: var(--main-color);
  color: #fff;
}

.draft-banner .draft-discard {
  background: var(--surface);
  border: 1px solid var(--main-color-soft);
}

.reaction-section {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.reaction-button {
  background: var(--surface);
  border: 2px solid var(--main-color-soft);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 1.1em;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.reaction-button:hover {
  filter: none;
  background: var(--main-color-softer);
}

.reaction-button.reaction-pressed {
  background: var(--main-color-soft);
  border-color: var(--main-color);
}

.reaction-count {
  font-size: 0.7em;
  color: var(--main-color-text);
}

.series-nav {
  background: var(--main-color-softer);
  border: 1px solid var(--main-color-soft);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 12px 0;
}

.series-nav p {
  text-align: center;
  font-weight: bold;
  margin: 0;
}

.series-nav-label {
  font-size: 0.75em;
  color: var(--main-color-text);
  margin-bottom: 2px;
}

.series-nav-links {
  display: flex;
  justify-content: space-between;
}

.series-nav-disabled {
  color: var(--main-color-soft);
}

.achievements-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.achievement-badge {
  position: relative;
  font-size: 0.85em;
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid var(--main-color-soft);
}

/* title属性(ブラウザ標準ツールチップ)の代わりに、位置を調整できる自作ツールチップを表示する。
   カーソル(バッジ)のすぐ下に出す。 */
.achievement-badge[data-tooltip] {
  cursor: default;
}

.achievement-badge[data-tooltip]:hover::after,
.achievement-badge[data-tooltip]:focus::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  background: var(--main-color-strong);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.85em;
  font-weight: normal;
  white-space: nowrap;
  box-shadow: var(--shadow-card);
  z-index: 20;
  pointer-events: none;
}

.achievement-badge.achievement-unlocked {
  background: var(--main-color-soft);
  color: var(--main-color-strong);
  font-weight: bold;
}

.achievement-badge.achievement-locked {
  background: var(--surface);
  color: var(--main-color-soft);
}

.profile-post-reactions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-reaction-item {
  font-size: 0.9em;
  background: var(--main-color-softer);
  border-radius: 10px;
  padding: 2px 8px;
}

.comment-pagination {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.comment-page-button {
  background: var(--surface);
  border: 1px solid var(--main-color-soft);
  border-radius: 6px;
  padding: 4px 10px;
  box-shadow: none;
}

.comment-page-button.active {
  background: var(--main-color);
  color: #fff;
}

.account-delete-section {
  margin-top: 24px;
  padding: 12px 16px;
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--danger) 6%, var(--surface));
}

.account-delete-section summary {
  cursor: pointer;
  font-weight: bold;
  color: var(--danger);
}

.account-delete-section #delete-account-button {
  background: var(--danger);
  color: #fff;
}

.post-series-badge {
  font-size: 0.85em;
  color: var(--main-color-text);
}


.series-page-thumbnail {
  width: 100%;
  height: 120px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  margin-bottom: 10px;
}

.series-page-summary {
  white-space: pre-line;
}

.series-edit-post-list {
  list-style: none;
  padding: 0;
}

.series-edit-post-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding: 6px 8px;
  background: var(--surface);
  border: 1px solid var(--main-color-soft);
  border-radius: 8px;
  cursor: grab;
}

.series-edit-post-list li.dragging {
  opacity: 0.4;
}

.series-edit-drag-handle {
  color: var(--main-color-soft);
  cursor: grab;
}

.series-edit-drag-hint {
  font-size: 0.85em;
  color: var(--text-muted);
}

/* -------------------------------- ダッシュボード -------------------------------- */

.dashboard-chart-wrap {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 12px 16px;
  margin-bottom: 24px;
}

.dashboard-chart {
  width: 100%;
  height: auto;
  display: block;
  font-family: inherit;
}

.dashboard-bar-row {
  cursor: pointer;
}

.dashboard-bar {
  fill: var(--main-color);
  transition: fill 0.15s ease;
}

.dashboard-bar-row:hover .dashboard-bar {
  fill: var(--main-color-strong);
}

.dashboard-bar-label {
  font-size: 11px;
  fill: var(--text-muted);
}

.dashboard-bar-value {
  font-size: 11px;
  font-weight: bold;
  fill: var(--text);
}

.dashboard-line-path {
  fill: none;
  stroke: var(--main-color);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-line-point {
  fill: var(--main-color);
  cursor: pointer;
  transition: r 0.15s ease;
}

.dashboard-line-point:hover {
  r: 6;
  fill: var(--main-color-strong);
}

.dashboard-axis-line {
  stroke: var(--main-color-soft);
  stroke-width: 1;
}

.dashboard-axis-label {
  font-size: 10px;
  fill: var(--text-muted);
}

/* -------------------------------- 保有者限定ブロック -------------------------------- */

.paywall-section {
  background: var(--main-color-softer);
  text-align: center;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  margin: 0 24px;
}

.paywall-section p {
  margin: 0;
}

/* -------------------------------- Markdown: 折りたたみ -------------------------------- */

.markdown-collapsible {
  margin: 8px 0;
  border: 1px solid var(--main-color-softer);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

.markdown-collapsible summary {
  cursor: pointer;
  font-weight: bold;
  color: var(--main-color-text);
}

/* -------------------------------- Markdown: ネタバレ(黒塗り、Discord風) -------------------------------- */
/* クリック/タップで解除するトグルはmpurse-auth.js側(.markdown-spoiler-revealedの付け外し) */

.markdown-spoiler {
  background: #000;
  color: transparent;
  border-radius: 3px;
  padding: 0 2px;
  cursor: pointer;
  user-select: none;
}

.markdown-spoiler img {
  visibility: hidden;
}

.markdown-spoiler.markdown-spoiler-revealed {
  background: var(--main-color-softer);
  color: inherit;
  cursor: text;
  user-select: text;
}

.markdown-spoiler.markdown-spoiler-revealed img {
  visibility: visible;
}

/* -------------------------------- 広告風表示(ブースト) -------------------------------- */

.ad-boost-carousel {
  max-width: 900px;
  margin: 0 auto 12px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ad-boost-carousel-label-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px 6px;
}

.ad-boost-carousel-label {
  display: inline-block;
  font-size: 0.7em;
  font-weight: bold;
  color: var(--text-muted);
  border: 1px solid var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}

.ad-boost-carousel-items {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  flex: 1;
}

.ad-boost-carousel-item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  width: 280px;
  height: 120px;
  color: var(--text);
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.ad-boost-carousel-item-thumb-wrap {
  position: relative;
  width: 100%;
  height: 64px;
  flex-shrink: 0;
}

.ad-boost-carousel-item-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ad-boost-carousel-item-thumb.placeholder {
  background: var(--main-color-softer);
}

.ad-boost-carousel-item-thumb-gradient {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.92) 100%);
  pointer-events: none;
}

.ad-boost-carousel-item-title {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  margin: 0;
  font-weight: bold;
  font-size: 0.95em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ad-boost-carousel-item-body {
  flex: 1;
  min-height: 0;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ad-boost-carousel-item-summary {
  margin: 0;
  font-size: 0.8em;
  color: var(--text-muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: 1;
}

.ad-boost-carousel-item-period {
  margin: 0;
  font-size: 0.5em;
  color: var(--text-muted);
  text-align: right;
}

#dashboard-tooltip {
  position: fixed;
  display: none;
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm, 8px);
  box-shadow: var(--shadow-card);
  padding: 6px 10px;
  font-size: 12px;
  pointer-events: none;
  z-index: 4000;
  max-width: 260px;
}

.series-card {
  flex: 0 0 auto;
  width: 160px;
  background: var(--surface);
  border: 1px solid var(--main-color-soft);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}

.series-card img,
.series-card .placeholder {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
}

.series-card .series-card-title {
  font-size: 0.85em;
  font-weight: bold;
  margin: 6px 0 2px;
}

.series-card .series-card-count {
  font-size: 0.75em;
  color: var(--main-color-text);
}

.view-count {
  font-size: 0.9em;
  color: var(--text-muted);
}

#article-content img {
  max-width: 100%;
  border-radius: var(--radius-sm);
}

/* Lightbox(記事本文内画像の拡大表示) */
#lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 10, 0.85);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

#lightbox-overlay.open {
  display: flex;
}

#lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.lightbox-nav-button {
  position: fixed;
  transform: translateY(-10%);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 1.8em;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

.lightbox-nav-button:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox-prev {
  left: 16px;
}

.lightbox-next {
  right: 16px;
}

.lightbox-direction-toggle {
  position: fixed;
  bottom: 16px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 0.85em;
  cursor: pointer;
  box-shadow: none;
}

.lightbox-direction-toggle:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* デバッグ情報は一般利用者向けではないため非表示にしておく */
#debug-info {
  display: none;
}

#notokenwrap {
  text-align: center;
  background: var(--main-color-softer);
  border: 2px dashed var(--main-color-soft);
  max-width: 100%;
  margin: 20px auto 0;
  padding: 30px 20px;
  border-radius: var(--radius-md);
}

#tk_list {
  margin: 20px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

#tk_list p {
  background: var(--surface);
  border: 1px solid var(--main-color-soft);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  margin: 0;
}

#notoken {
  max-width: 220px;
  max-height: 220px;
  margin: 0 auto;
  display: grid;
  justify-items: center;
  align-items: center;
  position: relative;
}

#notokenimg {
  filter: opacity(50%) grayscale(100%);
  max-width: 220px;
  max-height: 220px;
  padding: 20px 0;
}

#lock {
  width: 90px;
  position: absolute;
}

/* -------------------------------- プロフィールページ -------------------------------- */

.profile-info {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  margin: 24px 0;
  overflow-wrap: break-word;
  word-break: break-all;
}

.profile-image {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--main-color-soft);
  display: block;
  margin-bottom: 12px;
}

.profile-header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
  color: var(--main-color-text);
}

.profile-image-default {
  background: var(--main-color-soft);
  color: var(--main-color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.profile-image-default svg {
  width: 50%;
  height: 50%;
}

.profile-icon-frame-wrap {
  position: relative;
  display: inline-block;
}

.profile-icon-frame-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 125%;
  height: auto;
  transform: translate(-50%, calc(-50% - 6px));
  pointer-events: none;
  border-radius: 0;
}

.profile-username {
  font-weight: 700;
  margin: 0;
  font-size: 2em;
}

.user-prof-markdown {
  padding: 0 1em 0.5em;
}

.profile-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.profile-share-links a {
  margin-left: 8px;
  padding: 4px 12px;
  background: var(--bg);
  border-radius: var(--radius-lg);
}

.notification-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notification-list li {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  box-shadow: var(--shadow-card);
  overflow-wrap: break-word;
  word-break: break-all;
}

.notification-time {
  display: block;
  color: var(--text-muted);
  font-size: 0.85em;
  margin-top: 4px;
}

.notif-read-all {
  font-size: 0.7em;
  font-weight: normal;
  margin-left: 8px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  padding: 0 0.8em;
}

.notif-read-one {
  display: inline-block;
  font-weight: normal;
  margin-top: 6px;
  font-size: 0.8em;
  border-radius: var(--radius-md);
  padding: 2px 10px;
  cursor: pointer;
}

.profile-create-series-link {
  text-align: right;
  margin: 0;
}

.profile-columns {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 24px;
  align-items: start;
}

.profile-columns.profile-columns-single {
  grid-template-columns: 1fr;
}

.profile-series-column .series-card {
  width: 100%;
  margin-bottom: 12px;
}

.following-list li a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.following-icon-wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.following-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.following-icon-default {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  line-height: 1;
}

@media (max-width: 800px) {
  .profile-columns {
    grid-template-columns: 1fr;
  }
}

.profile-post-item {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
}

.profile-post-date {
  font-size: 0.8em;
}

.profile-post-thumb {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.profile-post-thumb-placeholder {
  background: var(--main-color-softer);
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-post-body {
  flex: 1;
  min-width: 0;
}

/* -------------------------------- アカウント設定 -------------------------------- */

#verify-gate {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 30px;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.checkbox-preview {
  text-align: left;
  max-width: 420px;
  margin: 16px auto;
  background: var(--main-color-softer);
  border-radius: var(--radius-md, 8px);
  padding: 12px 20px;
}

.checkbox-preview ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.checkbox-preview li {
  font-size: 0.9em;
  margin-bottom: 4px;
}

#account-form-section {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
}