@import url("./assets/fonts/google-fonts.css");

:root {
  --font-ui: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Segoe UI", system-ui, sans-serif;
  --font-oracle: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-logo: "Zen Antique", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-display: "Murecho", "Noto Sans JP", "Yu Gothic", sans-serif;
  --bg: #edf9f5;
  --surface: #ffffff;
  --surface-soft: #f6fcf9;
  --line: #c9e4da;
  --line-ink: rgba(20, 105, 82, 0.16);
  --ink: #173f35;
  --muted: #56786f;
  --gold: #168568;
  --gold-strong: #0f6c55;
  --gold-soft: #75c9b0;
  --accent: #0b755b;
  --muji-red: #7f1d1d;
  --green: #21735b;
  --red: #9b3d38;
  --nav-height: 64px;
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  background: #e8f7f1;
  max-width: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  /* iOSで画面外まで描画されやすい固定の放射グラデーションは使わない。 */
  background:
    radial-gradient(circle at 12% 5%, rgba(102, 220, 183, 0.22), transparent 30%),
    linear-gradient(160deg, #fbfffd 0%, #eefaf6 54%, #e4f5ef 100%);
  background-attachment: scroll;
  max-width: 100%;
  overflow-x: clip;
  line-height: 1.65;
  line-break: strict;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 0;
}

button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

.app-shell {
  min-height: 100vh;
  padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom));
  min-width: 0;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
  background: linear-gradient(100deg, rgba(250, 255, 253, 0.96), rgba(231, 248, 241, 0.96));
  border-bottom: 1px solid rgba(27, 139, 106, 0.18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding-top: max(12px, env(safe-area-inset-top));
  transition: transform 220ms ease, box-shadow 220ms ease;
  will-change: transform;
}

.topbar.is-scroll-hidden {
  pointer-events: none;
  transform: translate3d(0, -105%, 0);
}

.topbar__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.topbar__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 8px;
  color: #168568;
  background: rgba(22, 133, 104, 0.1);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.topbar__back:hover {
  background: rgba(22, 133, 104, 0.2);
  color: #0f6c55;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
}

.brand__mark {
  display: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--gold-soft);
  border-radius: 8px;
  color: var(--gold);
  font-weight: 800;
  background: var(--surface);
  font-family: Georgia, "Times New Roman", serif;
}

.brand__name,
.eyebrow,
.panel p,
.stat__note,
.stat__label,
.setting p {
  margin: 0;
}

.brand__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.15;
}

.account {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.news-header-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}

.news-header-link__badge {
  position: absolute;
  top: -6px;
  right: -7px;
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--muji-red);
  color: #fff;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1;
}

.news-header-link svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.news-header-link.is-active {
  color: var(--gold-strong);
  border-color: rgba(154, 122, 47, 0.45);
  background: rgba(255, 250, 237, 0.92);
}

.news-header-link.has-news {
  color: #72531a;
  border-color: rgba(125, 99, 40, 0.68);
  background: #fff;
  box-shadow: 0 4px 12px rgba(125, 99, 40, 0.16);
}

.news-header-link.has-news svg path:first-child { fill: currentColor; }

.news-header-link.has-news svg {
  animation: news-bell-ring 720ms ease-in-out 1;
  transform-origin: 50% 8%;
}

@keyframes news-bell-ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-14deg); }
  45% { transform: rotate(11deg); }
  60% { transform: rotate(-11deg); }
  75% { transform: rotate(5deg); }
  88% { transform: rotate(-5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .news-header-link.has-news svg { animation: none; }
}

@media (max-width: 520px) {
  .news-header-link {
    width: 38px;
    justify-content: center;
    padding: 7px;
  }

  .news-header-link span { display: none; }
}

.main {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 24px 16px 36px;
  min-width: 0;
}

@media (max-width: 719px) {
  /* Fixed bottom navigation must never cover the final action or form field. */
  .main {
    padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 28px);
  }
}

.page-head {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.page-head__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.page-head h1,
.panel h2,
.panel h3,
.setting h3,
.membership-hero h2,
.dialog h3 {
  margin: 0;
}

.page-head h1 {
  font-size: 25px;
  line-height: 1.25;
  letter-spacing: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--gold-soft);
}

.bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: calc(var(--nav-height) + env(safe-area-inset-bottom));
  padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.90);
  border-top: 1px solid rgba(123, 105, 151, 0.18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding-bottom: env(safe-area-inset-bottom);
}

.user-bottom-nav {
  grid-template-columns: repeat(3, 1fr);
}

.user-bottom-nav a[href="./news.html"] { display: none; }

.admin-bottom-nav {
  grid-template-columns: repeat(4, 1fr);
}

.admin-subtabs {
  display: flex;
  gap: 4px;
  margin: 0 auto 16px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.admin-subtabs button {
  flex: 1;
  min-height: 40px;
  padding: 7px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.admin-subtabs button.is-active {
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(43, 39, 67, 0.08);
}

.user-page .main {
  margin-right: auto;
  margin-left: auto;
  max-width: 720px;
}

.user-page .app-shell {
  padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 20px);
}

.auth-pending .app-shell {
  visibility: hidden;
}

.auth-pending::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--bg);
}

.auth-pending::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 10000;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2px solid rgba(154, 122, 47, 0.22);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: auth-pending-spin 0.8s linear infinite;
}

@keyframes auth-pending-spin {
  to { transform: rotate(360deg); }
}

.auth-page .app-shell {
  padding-bottom: 0;
}

.user-main {
  display: grid;
  justify-items: center;
  padding-bottom: 40px;
}

.auth-main {
  display: grid;
  justify-items: center;
  padding-top: 28px;
  padding-bottom: 40px;
}

.register-main {
  width: min(760px, 100%);
}

.auth-card {
  position: relative;
  width: min(480px, 100%);
  min-width: 0;
  max-width: 100%;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.card-lottery-panel {
  border-color: rgba(154, 122, 47, 0.36);
  background: linear-gradient(to bottom, rgba(154, 122, 47, 0.055), var(--surface) 72%);
}

.card-lottery-panel .panel__head {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.page-lead {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.member-feature-panel .panel__head {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 16px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: var(--surface);
  color: var(--gold-strong);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.secondary-button:hover {
  background: rgba(154, 122, 47, 0.08);
}

.content-choice-grid,
.news-list {
  display: grid;
  gap: 12px;
}

.news-list {
  width: min(100%, 720px);
}

.content-choice {
  display: grid;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.content-choice--available {
  border-color: rgba(154, 122, 47, 0.5);
  background: linear-gradient(to bottom, rgba(154, 122, 47, 0.08), var(--surface));
}

.content-choice h2,
.news-item h2 {
  margin: 0;
  font-size: 19px;
}

.content-choice p,
.news-item p,
.monthly-summary p {
  margin: 0;
}

.content-choice__icon {
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1;
}

.content-choice__status,
.news-item__date {
  color: var(--gold);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.content-choice__note {
  color: var(--muted);
  font-size: 14px;
}

.monthly-summary {
  display: grid;
  gap: 12px;
  padding: 24px;
  border-color: rgba(154, 122, 47, 0.42);
  background: linear-gradient(to bottom, rgba(154, 122, 47, 0.09), var(--surface));
}

.monthly-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  overflow: hidden;
  margin-bottom: 14px;
  padding: 26px 24px;
  border: 1px solid rgba(154, 122, 47, 0.42);
  border-radius: 12px;
  background: linear-gradient(135deg, #2b2743, #4a3d65);
  color: #fffdf6;
}

.monthly-hero > div:first-child,
.monthly-detail-grid > *,
.monthly-rank-card,
.monthly-recent-card {
  min-width: 0;
}

.monthly-hero h2,
.monthly-hero p {
  margin: 0;
}

.monthly-hero h2 {
  margin-top: 6px;
  font-family: var(--font-oracle);
  font-size: 24px;
  overflow-wrap: anywhere;
}

.monthly-hero p:not(.summary-label) {
  margin-top: 10px;
  color: rgba(255, 253, 246, 0.78);
  font-size: 14px;
  line-height: 1.7;
}

.monthly-hero .summary-label {
  color: #ead19b;
}

.monthly-hero__ornament {
  color: #ead19b;
  font-family: Georgia, serif;
  font-size: 70px;
  opacity: 0.85;
}

.monthly-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.monthly-metrics article {
  display: grid;
  gap: 5px;
  padding: 15px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.monthly-metrics span,
.monthly-metrics small {
  color: var(--muted);
  font-size: 14px;
}

.monthly-metrics strong {
  color: var(--gold-strong);
  font-family: Georgia, "Noto Serif JP", serif;
  font-size: 25px;
}

.monthly-theme {
  display: flex;
  align-items: center;
  gap: 13px;
}

.monthly-theme__number {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: rgba(154, 122, 47, 0.12);
  color: var(--gold-strong);
  font-size: 22px;
}

.monthly-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0;
}

.monthly-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.monthly-calendar__weekday {
  padding-bottom: 4px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.monthly-calendar__day {
  display: grid;
  min-height: 38px;
  place-items: center;
  padding: 3px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 14px;
}

.monthly-calendar__day b {
  font-weight: 600;
}

.monthly-calendar__day small {
  color: inherit;
  font-size: 9px;
}

.monthly-calendar__day.is-drawn {
  background: rgba(154, 122, 47, 0.16);
  color: var(--gold-strong);
}

.monthly-top-cards,
.monthly-recent-cards {
  display: grid;
  gap: 8px;
}

.monthly-theme-card {
  position: relative;
  overflow: hidden;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  margin-bottom: 12px;
}

.monthly-theme-card::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.70) 0%, rgba(255, 255, 255, 0.92) 100%);
  content: "";
}

.monthly-theme-card .archive-card__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
  opacity: 0.72;
}

.monthly-theme-card > * {
  position: relative;
  z-index: 2;
}

.monthly-rank-card,
.monthly-recent-card {
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.monthly-rank-card::before,
.monthly-recent-card::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.92) 55%, rgba(255, 255, 255, 0.98) 100%);
  content: "";
}

.monthly-rank-card .archive-card__background,
.monthly-recent-card .archive-card__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
  opacity: 0.72;
}

.monthly-rank-card > *,
.monthly-recent-card > * {
  position: relative;
  z-index: 2;
}

.monthly-rank-card:last-child,
.monthly-recent-card:last-child {
  margin-bottom: 0;
}

.monthly-rank-card > span {
  flex: 0 0 2.4em;
  color: var(--gold-strong);
  font-family: Georgia, serif;
  font-size: 18px;
  white-space: nowrap;
}

.monthly-rank-card > div,
.monthly-recent-card > div {
  min-width: 0;
  flex: 1;
}

.monthly-rank-card h3 {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.monthly-rank-card h3,
.monthly-rank-card p,
.monthly-recent-card h3,
.monthly-recent-card p {
  margin: 0;
}

.monthly-rank-card h3,
.monthly-recent-card h3 {
  font-size: 14px;
}

.monthly-rank-card b,
.monthly-recent-card b {
  margin-left: auto;
  align-self: center;
  color: var(--gold-strong);
  font-size: 18px;
}

.monthly-rank-card:hover,
.monthly-recent-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 108, 85, 0.12);
}

.monthly-rank-card p,
.monthly-recent-card p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.monthly-recent-card > span {
  flex: 0 0 48px;
  color: var(--gold-strong);
  font-size: 14px;
  font-weight: 800;
}

.monthly-history-panel .secondary-button {
  width: 100%;
  margin-top: 14px;
}

.history-intro {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 640px;
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid rgba(154, 122, 47, 0.4);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(154, 122, 47, 0.12), var(--surface));
}

.history-intro > span {
  display: grid;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: rgba(154, 122, 47, 0.12);
  color: var(--gold-strong);
  font-size: 22px;
}

.history-intro > div {
  min-width: 0;
  flex: 1 1 auto;
}

.history-intro p,
.history-intro h2,
.history-intro small {
  margin: 0;
}

.history-total {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.history-intro .history-intro__description {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.65;
}

.history-card-guide {
  margin: 0;
  padding: 11px 13px;
  border-left: 3px solid rgba(154, 122, 47, 0.55);
  background: rgba(154, 122, 47, 0.07);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.history-intro p {
  color: var(--gold-strong);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.07em;
}

.history-intro h2 {
  margin-top: 3px;
  font-family: var(--font-oracle);
  font-size: 19px;
}

.history-intro small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 14px;
}

.card-history {
  display: grid;
  width: 100%;
  max-width: 640px;
  gap: 18px;
}

.history-category {
  display: grid;
  gap: 9px;
}

.history-category__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.history-category__head p,
.history-category__head span {
  margin: 0;
}

.history-category__head p {
  color: var(--gold-strong);
  font-family: var(--font-oracle);
  font-size: 18px;
  font-weight: 700;
}

.history-category__head span {
  color: var(--muted);
  font-size: 14px;
}

.archive-card-grid {
  display: grid;
  gap: 8px;
}

.archive-card {
  position: relative;
  isolation: isolate;
  min-height: 124px;
  overflow: hidden;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.archive-card::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.90) 68%, rgba(255, 255, 255, 0.98) 100%);
  content: "";
}

.archive-card__background {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
  opacity: 0.72;
}

.archive-card__content {
  min-width: 0;
}

.archive-card p,
.archive-card h3,
.archive-card span {
  margin: 0;
}

.archive-card p {
  color: var(--gold-strong);
  font-size: 14px;
  font-weight: 700;
}

.archive-card h3 {
  margin-top: 3px;
  font-size: 15px;
}

.archive-card span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.history-lock {
  display: grid;
  gap: 10px;
  padding: 24px;
  text-align: center;
}

.history-lock h2,
.history-lock p {
  margin: 0;
}

@media (max-width: 620px) {
  .history-intro {
    align-items: flex-start;
    gap: 11px;
    padding: 16px;
  }

  .history-intro > span {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }

  .history-intro h2 {
    font-size: 18px;
    line-height: 1.45;
  }

  .archive-card {
    min-height: 116px;
    padding: 13px;
  }

  .history-category__head {
    gap: 10px;
  }

  .monthly-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* 会員ページのグリッド内容がスマホ幅を押し広げないようにする。 */
@media (max-width: 719px) {
  .user-page .main {
    width: 100%;
    max-width: 100%;
  }

  .user-main > .monthly-hero,
  .user-main > .member-feature-panel,
  .user-main > .monthly-metrics,
  .user-main > .monthly-summary,
  .user-main > .monthly-detail-grid,
  .user-main > .monthly-history-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .monthly-detail-grid {
    grid-template-columns: 1fr;
  }
}

.summary-label {
  color: var(--gold);
  font-size: 14px;
  font-weight: 800;
}

.summary-card-title {
  margin: 4px 0 6px !important;
  font-family: var(--font-oracle);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}

.summary-count,
.draw-count {
  color: var(--gold-strong);
  font-weight: 800;
}

.draw-count {
  margin: 0;
  font-size: 30px;
}

.loading-copy {
  color: var(--muted);
}

[data-loading-value] {
  position: relative;
  display: inline-block;
  min-width: 4.5em;
  color: transparent !important;
  user-select: none;
}

[data-loading-value]::after,
.skeleton-line,
.content-skeleton > span {
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(15, 108, 85, 0.08), rgba(15, 108, 85, 0.17), rgba(15, 108, 85, 0.08));
  background-size: 220% 100%;
  animation: user-skeleton-shimmer 1.4s ease-in-out infinite;
  content: "";
}

[data-loading-value]::after {
  position: absolute;
  inset: 50% 0 auto;
  width: 100%;
  height: 0.85em;
  transform: translateY(-50%);
}

.content-skeleton {
  display: grid;
  gap: 10px;
  width: 100%;
}

.content-skeleton--text {
  padding: 8px 0;
}

.content-skeleton--text > span {
  height: 14px;
}

.content-skeleton--text > span:nth-child(2) { width: 84%; }
.content-skeleton--text > span:nth-child(3) { width: 62%; }

.content-skeleton--cards > span {
  height: 88px;
  border-radius: 10px;
}

.content-skeleton--detail {
  min-height: 260px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.content-skeleton--detail > span:first-child { width: 42%; height: 28px; }
.content-skeleton--detail > span:nth-child(2) { width: 100%; height: 150px; border-radius: 8px; }
.content-skeleton--detail > span:nth-child(3) { width: 76%; height: 16px; }

.skeleton-line {
  width: 100%;
  height: 0.8em;
  vertical-align: middle;
}

.skeleton-line--short { width: 7em; }

@keyframes user-skeleton-shimmer {
  to { background-position: -220% 0; }
}

.news-item {
  display: grid;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 20px;
}

.news-item--link {
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.news-item--link:hover {
  border-color: rgba(154, 122, 47, 0.55);
  box-shadow: 0 8px 20px rgba(43, 39, 67, 0.09);
  transform: translateY(-2px);
}

.news-item--link.is-unread {
  border: 2px solid var(--gold);
  background: linear-gradient(135deg, rgba(255, 248, 225, 0.95), var(--surface));
  box-shadow: 0 5px 16px rgba(125, 99, 40, 0.14);
}

.news-item--link h2 {
  display: -webkit-box;
  min-height: 3.2em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.news-item__image {
  display: block;
  width: 100%;
  height: 168px;
  border-radius: 8px;
  object-fit: cover;
}

.news-item__more {
  color: var(--gold-strong);
  font-size: 14px;
  font-weight: 800;
}

.news-item__new {
  display: inline-flex;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--gold-strong);
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.08em;
  line-height: 1.35;
  vertical-align: middle;
}

.news-back-link {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--gold-strong);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.news-detail {
  display: grid;
  gap: 16px;
  width: min(100%, 760px);
  padding: 28px;
}

.news-detail h1 { margin: 0; font-size: clamp(24px, 4vw, 34px); line-height: 1.4; }

.news-detail__image {
  width: 100%;
  max-height: 420px;
  border-radius: 10px;
  object-fit: cover;
}

.admin-content-tools {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

.admin-form {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.markdown-toolbar,
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.markdown-toolbar button {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.markdown-preview {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(154, 122, 47, 0.05);
}

.markdown-editor {
  min-height: 250px;
  resize: vertical;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  line-height: 1.7;
}

.markdown-help {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.markdown-help code {
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(43, 39, 67, 0.07);
}

.markdown-preview > p,
.markdown-preview h2,
.markdown-preview h3,
.markdown-preview h4,
.markdown-preview p {
  margin: 0;
}

.markdown-preview > p {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.markdown-preview blockquote {
  margin: 0;
  padding-left: 12px;
  border-left: 3px solid var(--gold);
  color: var(--muted);
}

.news-item__body {
  display: grid;
  gap: 8px;
}

.news-item__body p,
.news-item__body h2,
.news-item__body h3,
.news-item__body h4 {
  margin: 0;
}

.news-item__body blockquote {
  margin: 0;
  padding-left: 12px;
  border-left: 3px solid var(--gold);
  color: var(--muted);
}

.admin-news-list {
  display: grid;
  gap: 8px;
}

.admin-news-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.admin-news-row:last-child {
  border-bottom: 0;
}

.admin-news-row span {
  color: var(--gold-strong);
  font-size: 14px;
  font-weight: 800;
}

.admin-news-row h3 {
  margin: 4px 0 0;
  font-size: 15px;
}

.admin-card-row {
  align-items: center;
}

.admin-card-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}

.admin-card-metrics b {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.admin-card-sort {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
}

.admin-card-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1.6fr) repeat(2, minmax(130px, .8fr));
  gap: 12px;
  align-items: end;
  margin: 16px 0 8px;
}

.admin-card-search,
.admin-card-filter {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 14px;
}

.admin-card-search input,
.admin-card-filter select {
  width: 100%;
}

.admin-card-result {
  min-height: 20px;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 640px) {
  .admin-card-controls { grid-template-columns: 1fr; }
}

.admin-card-sort select {
  min-height: 36px;
  padding: 6px 10px;
}

.card-detail-panel__favorite.is-active {
  border-color: var(--accent);
  background: rgba(111, 87, 201, 0.12);
  color: var(--accent);
}

.card-detail-panel__favorite {
  display: none;
}

/* Member home: a calm, oracle-inspired hierarchy without changing the lottery experience. */
.user-page .user-main,
.user-page .member-page {
  max-width: 920px;
}

.member-home-hero {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border: 1px solid rgba(184, 148, 69, 0.5);
  border-radius: 12px;
  color: #fcfaf5;
  background: #211d38;
  box-shadow: 0 16px 32px rgba(31, 27, 51, 0.18);
}

.member-home-hero__eyebrow {
  margin: 0 0 12px;
  color: #d7bd7a;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.member-home-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(32px, 7vw, 40px);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.25;
}

#mypageGreeting {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.mypage-greeting__tail {
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 620px) {
  #mypageGreeting {
    letter-spacing: 0;
  }
}

.random-font--zen {
  font-family: var(--font-logo);
  font-weight: 400;
}

.random-font--shippori {
  font-family: var(--font-oracle);
  font-weight: 600;
}

.random-font--noto {
  font-family: var(--font-ui);
  font-weight: 700;
}

.random-font--kaisei {
  font-family: "Kaisei Decol", "Yu Mincho", serif;
  font-weight: 400;
}

.random-font--hachi-maru {
  font-family: "Hachi Maru Pop", "Yu Gothic", sans-serif;
  font-weight: 400;
}

.random-font--yomogi {
  font-family: "Yomogi", "Yu Gothic", sans-serif;
  font-weight: 400;
}

.random-font--klee {
  font-family: "Klee One", "Yu Mincho", serif;
  font-weight: 400;
}

.random-font--m-plus-rounded {
  font-family: "M PLUS Rounded 1c", "Yu Gothic", sans-serif;
  font-weight: 500;
}

.random-font--zen-kurenaido {
  font-family: "Zen Kurenaido", "Yu Gothic", sans-serif;
  font-weight: 400;
}

.random-font--yuji-syuku {
  font-family: "Yuji Syuku", "Yu Mincho", serif;
  font-weight: 400;
}

.member-home-hero > p:not(.member-home-hero__eyebrow) {
  margin: 10px 0 20px;
  color: rgba(252, 250, 245, 0.76);
}

.member-home-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: rgba(252, 250, 245, 0.78);
  font-size: 14px;
}

.member-home-hero .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(252, 250, 245, 0.12);
  color: #fcfaf5;
}

.member-home-hero .badge svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.member-home-hero .badge--paid {
  color: #f5db91;
  background: rgba(184, 148, 69, 0.2);
}

.member-home-hero .badge--canceling {
  color: #f0c2b8;
  background: rgba(164, 79, 71, 0.24);
}

.member-home-hero .badge--admin {
  color: #fff4c7;
  border: 1px solid rgba(234, 197, 107, 0.45);
  background: rgba(154, 122, 47, 0.38);
}

.member-home-upgrade-link,
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  min-height: 44px;
  margin-top: 20px;
  padding: 10px 20px;
  border-radius: 10px;
  color: #ffffff;
  background: linear-gradient(135deg, #df6b36 0%, #c65320 100%);
  font-weight: 800;
  text-decoration: none;
  border: none;
  box-shadow: 0 6px 16px rgba(198, 83, 32, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.member-home-upgrade-link:hover,
.cta-button:hover {
  background: linear-gradient(135deg, #e87641 0%, #ce5a26 100%);
  box-shadow: 0 8px 20px rgba(198, 83, 32, 0.42);
  transform: translateY(-1px);
  color: #ffffff;
}

.member-home-upgrade-link[hidden] {
  display: none;
}

.member-home-admin-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 14px;
  padding: 9px 13px;
  border: 1px solid rgba(234, 197, 107, 0.42);
  border-radius: 8px;
  color: #fff4c7;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.member-home-admin-link:hover {
  background: rgba(255, 255, 255, 0.08);
}

.member-home-admin-link[hidden] {
  display: none;
}

.member-home-menu {
  display: grid;
  gap: 10px;
}

.member-home-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.member-home-draw,
.member-home-link {
  position: relative;
  display: grid;
  gap: 6px;
  min-height: 142px;
  padding: 18px;
  border: 1px solid rgba(113, 94, 145, 0.22);
  border-radius: 10px;
  color: var(--ink);
  background: #fffdf8;
  box-shadow: 0 8px 20px rgba(57, 47, 84, 0.05);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.member-home-draw {
  grid-column: 1 / -1;
  min-height: 152px;
  border-color: rgba(184, 148, 69, 0.52);
  background: #fbf6e8;
}

.member-home-draw > span {
  color: var(--gold-strong);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.member-home-link__icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  margin-bottom: 2px;
  border: 1px solid rgba(184, 148, 69, 0.42);
  border-radius: 11px;
  color: var(--gold-strong);
  background: #fffdf7;
  box-shadow: 0 4px 10px rgba(89, 68, 26, 0.07);
}

.member-home-link__icon svg,
.bottom-nav__item span svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.member-home-draw strong,
.member-home-link strong {
  font-size: 18px;
}

.member-home-draw p,
.member-home-link p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.member-home-draw b {
  position: absolute;
  right: 20px;
  bottom: 18px;
  color: var(--gold-strong);
  font-size: 24px;
}

.member-home-actions a:hover {
  border-color: rgba(184, 148, 69, 0.76);
  box-shadow: 0 12px 24px rgba(57, 47, 84, 0.1);
  transform: translateY(-2px);
}

.member-home-status .status-list {
  grid-template-columns: 110px 1fr;
}

@media (max-width: 620px) {
  .member-home-hero {
    padding: 24px 20px;
  }

  .member-home-actions {
    grid-template-columns: 1fr;
  }

  .member-home-draw {
    min-height: 124px;
    padding: 18px;
  }

  .member-home-link {
    min-height: 0;
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 13px;
    row-gap: 2px;
    padding: 14px 16px;
  }

  .member-home-link__icon {
    width: 38px;
    height: 38px;
    grid-row: 1 / -1;
    margin: 0;
  }

  .member-home-link__icon svg {
    width: 22px;
    height: 22px;
  }

  .member-home-link strong,
  .member-home-link p {
    grid-column: 2;
    min-width: 0;
  }

  .member-home-link strong {
    align-self: end;
    font-size: 16px;
    line-height: 1.35;
  }

  .member-home-link p {
    align-self: start;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.media-play-count {
  color: var(--gold-strong);
  font-size: 15px;
  white-space: nowrap;
}

.admin-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.upload-help {
  margin: -2px 0 2px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.admin-form input,
.admin-form select,
.admin-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--ink);
}

.admin-form .check-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 680px) {
  .admin-content-tools { grid-template-columns: 1fr; }
}

.register-page .page-head,
.register-page .content-grid {
  width: 100%;
  max-width: 720px;
}

.register-page .page-head {
  text-align: center;
}

.register-page .content-grid {
  align-items: start;
}

.auth-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 24px;
  left: 24px;
  height: 2px;
  background: var(--gold-soft);
}

.auth-card__head {
  display: grid;
  gap: 6px;
  margin-bottom: 20px;
  text-align: center;
}

.auth-card__head h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1.25;
}

.auth-section {
  display: grid;
  gap: 14px;
}

.auth-section .form-grid {
  grid-template-columns: 1fr;
}

.agreement-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.agreement-check input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  accent-color: var(--accent);
}

.agreement-check a {
  color: var(--ink);
  text-underline-offset: 3px;
}

.account-delete-status { margin: 0 0 16px; color: var(--muted); }

/* Account actions: ordinary operations and irreversible actions never compete visually. */
.account-page {
  display: grid;
  gap: 14px;
}

.account-page__hero {
  padding: 28px 30px;
  border: 1px solid rgba(184, 148, 69, 0.5);
  border-radius: 12px;
  color: #fcfaf5;
  background: #211d38;
  box-shadow: 0 16px 32px rgba(31, 27, 51, 0.14);
}

.account-page__hero h1,
.account-page__hero p {
  margin: 0;
}

.account-page__hero h1 {
  margin-bottom: 8px;
  font-size: clamp(25px, 4vw, 32px);
}

.account-page__hero > p:not(.member-home-hero__eyebrow) {
  color: rgba(252, 250, 245, 0.76);
}

.account-profile-card {
  display: grid;
  gap: 5px;
}

.account-profile-card .eyebrow {
  margin: 0;
}

.account-profile-card strong {
  overflow-wrap: anywhere;
  font-size: 19px;
}

.account-membership-details {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 8px;
  margin: 8px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.account-membership-details dt {
  color: var(--muted);
  font-size: 14px;
}

.account-membership-details dd {
  margin: 0;
  font-weight: 800;
}

.account-profile-card .account-delete-status {
  margin: 3px 0 0;
}

.account-action-card,
.account-danger-card {
  display: grid;
  gap: 14px;
}

.account-action-card .panel__head,
.account-danger-card .panel__head {
  margin-bottom: 0;
}

.account-logout-button {
  width: 100%;
  justify-content: center;
  min-height: 46px;
}

.account-danger-card {
  border-color: rgba(154, 71, 71, 0.34);
  background: linear-gradient(135deg, rgba(255, 250, 249, 0.97), rgba(255, 246, 244, 0.92));
}

.account-danger-card__notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(154, 71, 71, 0.2);
  border-radius: 8px;
  color: #77514f;
  background: rgba(154, 71, 71, 0.05);
}

.account-danger-card__notice span {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #9a4747;
  font-size: 14px;
  font-weight: 800;
}

.account-danger-card__notice p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
}

.account-danger-card .ghost-button,
.account-danger-card .text-danger-button {
  width: 100%;
  justify-content: center;
}

/* Monthly reflection: guide the member from a broad view to meaningful details. */
.monthly-page { max-width: 920px; }
.monthly-page-head { width: 100%; margin-bottom: 18px; text-align: center; }
.monthly-page-head p, .monthly-page-head h1 { margin: 0; }
.monthly-page-head h1 { margin: 5px 0 7px; font-size: clamp(26px, 4vw, 34px); }
.monthly-page-head > p:last-child { color: var(--muted); font-size: 14px; }
.monthly-reflection-hero { display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 22px; align-items: center; padding: 30px; border: 1px solid rgba(184, 148, 69, .48); border-radius: 14px; color: #fcfaf5; background: #211d38; box-shadow: 0 16px 32px rgba(31, 27, 51, .15); }
.monthly-reflection-hero p, .monthly-reflection-hero h2 { margin: 0; }
.monthly-reflection-hero .summary-label { color: #d7bd7a; }
.monthly-reflection-hero h2 { margin: 7px 0 10px; font-size: clamp(22px, 3vw, 29px); }
.monthly-reflection-hero p:not(.summary-label) { max-width: 560px; color: rgba(252,250,245,.76); font-size: 14px; line-height: 1.7; }
.monthly-reflection-hero__link { display: inline-flex; gap: 10px; margin-top: 18px; color: #f5db91; font-size: 14px; font-weight: 800; text-decoration: none; }
.monthly-reflection-hero__mark { display: grid; width: 92px; height: 92px; place-items: center; border: 1px solid rgba(215,189,122,.5); border-radius: 50%; color: #d7bd7a; }
.monthly-reflection-hero__mark svg { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.monthly-metrics { margin: 14px 0; gap: 12px; }
.monthly-metrics article { padding: 18px; border-color: rgba(184,148,69,.22); background: #fffdf8; }
.monthly-metrics strong { font-size: 28px; }
.monthly-insight { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 22px; padding: 23px; border: 4px double rgba(184,148,69,.62); border-radius: 12px; background: linear-gradient(135deg, #fbf6e8, #fffdf8); box-shadow: inset 0 0 0 3px rgba(255,255,255,.45); }
.monthly-insight__head h2, .monthly-insight__head p { margin: 0; }
.monthly-insight__head h2 { margin-top: 6px; font-size: 20px; }
.monthly-insight #monthlySummary { display: grid; gap: 10px; align-content: center; }
.monthly-insight .summary-card-title { line-break: strict; overflow-wrap: normal; word-break: normal; }
.monthly-insight .summary-card-title__nowrap { display: block; white-space: nowrap; }
.monthly-journal-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 14px; margin: 14px 0; }
.monthly-history-panel .panel__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.monthly-history-panel .panel__head > div { min-width: 0; }
@media (min-width: 621px) {
  .monthly-metrics { grid-auto-rows: 1fr; }
  .monthly-metrics article { display: flex; flex-direction: column; min-height: 138px; height: 100%; padding: 22px 24px; }
  .monthly-metrics article small { margin-top: auto; }
  .monthly-journal-grid { align-items: stretch; }
  .monthly-journal-grid > .panel { display: flex; flex-direction: column; height: 100%; }
  .monthly-journal-grid .panel__head { flex: 0 0 auto; }
  .monthly-calendar,
  .monthly-top-cards { flex: 1 1 auto; }
  .monthly-top-cards { display: grid; grid-auto-rows: 1fr; }
  .monthly-rank-card { height: 100%; align-items: center; }
}

@media (min-width: 900px) {
  .monthly-history-panel .monthly-recent-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .monthly-history-panel .monthly-recent-card { position: relative; display: flex; flex-direction: column; min-height: 174px; height: 100%; padding: 14px; border: 1px solid rgba(184, 148, 69, 0.22); border-radius: 10px; background: rgba(255, 253, 248, 0.65); }
  .monthly-history-panel .monthly-recent-card > span { flex: 0 0 auto; }
  .monthly-history-panel .monthly-recent-card > div { min-width: 0; }
  .monthly-history-panel .monthly-recent-card h3 { margin-top: 9px; line-height: 1.4; }
  .monthly-history-panel .monthly-recent-card p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .monthly-history-panel .monthly-recent-card b { margin-top: auto; align-self: flex-end; }
}
@media (max-width: 620px) { .monthly-page-head { margin-bottom: 14px; } .monthly-reflection-hero { grid-template-columns: 1fr 68px; gap: 13px; padding: 22px 18px; } .monthly-reflection-hero__mark { width: 58px; height: 58px; } .monthly-reflection-hero__mark svg { width: 31px; height: 31px; } .monthly-reflection-hero h2 { font-size: 21px; } .monthly-reflection-hero p:not(.summary-label) { font-size: 14px; } .monthly-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .monthly-metrics article { padding: 13px 9px; } .monthly-metrics span, .monthly-metrics small { font-size: 14px; } .monthly-metrics strong { font-size: 23px; } .monthly-insight { grid-template-columns: 1fr; gap: 10px; padding: 19px 16px; } .monthly-journal-grid { grid-template-columns: 1fr; } .monthly-history-panel .panel__head { align-items: flex-start; } }

@media (max-width: 620px) {
  .account-page__hero {
    padding: 24px 20px;
  }
}

.archive-card { color: inherit; text-decoration: none; }
.archive-card:hover { border-color: rgba(154, 122, 47, 0.55); transform: translateY(-1px); }
.card-detail { width: min(100%, 520px); }
body[data-page="card-detail"] { background: linear-gradient(160deg, #ece8ee 0%, #e7e3ed 58%, #e8eee9 100%); }
body.card-lightbox-open { overflow: hidden; touch-action: none; }
body[data-page="card-detail"] .app-shell { min-height: 100vh; background: radial-gradient(circle at 50% 14%, rgba(255, 253, 246, 0.45), transparent 42%); }
.card-detail-panel { display: grid; justify-items: center; gap: 12px; padding: 24px; border: 1px solid rgba(113, 94, 145, 0.28); border-radius: 12px; background: linear-gradient(145deg, rgba(244, 241, 247, 0.96), rgba(233, 229, 238, 0.94)); box-shadow: 0 16px 30px rgba(57, 47, 84, 0.1); text-align: center; }
.card-detail-panel__image { width: min(220px, 62vw); aspect-ratio: 2 / 3; overflow: hidden; padding: 0; border: 0; border-radius: 12px; background: var(--surface-soft); box-shadow: 0 10px 24px rgba(43, 39, 67, 0.14); cursor: zoom-in; }
.card-detail-panel__image img { width: 100%; height: 100%; object-fit: cover; }
.card-lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); border: 0; background: transparent; place-items: center; }
.card-lightbox[open] { display: grid; }
.card-lightbox::backdrop { background: rgba(28, 24, 42, 0.62); backdrop-filter: blur(2px); }
.card-lightbox__art { --light-x: 50%; --light-y: 16%; position: relative; width: fit-content; max-width: 100%; max-height: calc(100dvh - 48px); transform-style: preserve-3d; transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.card-lightbox__art.is-dragging { transition: none; }
.card-lightbox__art::after { position: absolute; inset: 0; border-radius: 12px; background: radial-gradient(ellipse 62% 34% at var(--light-x) var(--light-y), rgba(255,255,255,.42), rgba(255,246,205,.16) 32%, transparent 72%), linear-gradient(180deg, rgba(255,255,255,.16), transparent 24%); box-shadow: inset 0 1px 1px rgba(255,255,255,.34); content: ""; mix-blend-mode: screen; opacity: .78; pointer-events: none; }
.card-lightbox img { display: block; width: auto; max-width: 100%; max-height: calc(100dvh - 48px); object-fit: contain; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.42); cursor: grab; touch-action: none; user-select: none; }
.card-lightbox__art.is-dragging img { cursor: grabbing; }
.card-lightbox__close { position: fixed; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); z-index: 1; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: #fff; background: rgba(255,255,255,.12); font-size: 28px; line-height: 1; cursor: pointer; }
.card-detail-panel__date, .card-detail-panel__unavailable { margin: 0; color: var(--muted); font-size: 14px; }
.card-detail-panel h1 { margin: 0; color: var(--gold); font-size: 24px; }
.card-detail-panel__text { width: 100%; margin: 0; padding: 16px; border: 1px solid rgba(184, 148, 69, 0.16); border-radius: 10px; background: rgba(250, 247, 239, 0.7); color: var(--ink); text-align: left; white-space: pre-wrap; line-height: 1.75; }
.card-detail-panel__audio { width: 100%; text-align: left; }
.card-detail-panel__audio h2 { margin: 0 0 8px; font-size: 15px; }
.card-detail-panel__audio .audio__row { display: flex; gap: 10px; }
.card-detail-panel__audio .audio__btn { flex: 1; padding: 12px; border: 1px solid var(--accent); border-radius: 12px; color: var(--ink); background: rgba(95, 85, 128, 0.1); font: inherit; cursor: pointer; }
.card-detail-panel__audio .audio__btn--ghost { flex: 0 0 auto; color: var(--muted); border-color: var(--line); background: transparent; }
.card-detail-panel__audio .audio__btn:disabled { opacity: 0.45; cursor: default; }
.card-detail-panel__audio .audio__seek { margin-top: 12px; }
.card-detail-panel__audio .audio__progress { width: 100%; accent-color: var(--accent); }
.card-detail-panel__audio .audio__times { display: flex; justify-content: space-between; margin-top: 5px; color: var(--muted); font-size: 14px; }
.card-detail-panel__audio .audio__remain { color: var(--gold); }
.card-detail-panel__audio .audio__volume { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--muted); font-size: 14px; }
.card-detail-panel__audio .audio__volume input { min-height: 0; padding: 0; border: 0; }
.card-detail-panel__history { width: 100%; padding: 16px; border: 1px solid rgba(184, 148, 69, 0.16); border-radius: 10px; background: rgba(250, 247, 239, 0.7); text-align: left; }
.card-detail-panel__history h2, .card-detail-panel__history p { margin: 0; }
.card-detail-panel__history h2 { font-size: 15px; }
.card-detail-panel__history p { margin-top: 3px; color: var(--muted); font-size: 14px; }
.card-detail-panel__history ul { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.card-detail-panel__history li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid rgba(184, 148, 69, 0.16); color: var(--muted); font-size: 14px; }
.card-detail-panel__history strong { color: var(--gold-strong); font-size: 14px; }
.card-detail-panel__back { width: 100%; }

body[data-page="profile-complete"] .auth-section {
  gap: 10px;
}

body[data-page="profile-complete"] .panel__head {
  margin-bottom: 4px;
  padding-bottom: 8px;
}

body[data-page="profile-complete"] .panel__head p {
  line-height: 1.55;
}

.line-privacy-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px !important;
  padding: 10px 12px;
  border: 1px solid rgba(33, 115, 91, 0.24);
  border-radius: 8px;
  color: #28634f !important;
  background: rgba(33, 115, 91, 0.06);
  font-size: 14px;
  font-weight: 700;
}

.line-privacy-notice span {
  display: grid;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  font-size: 14px;
}

body[data-page="profile-complete"] .form-actions {
  margin-top: 4px;
}

.legal-page {
  display: grid;
  gap: 16px;
}

.legal-page h1,
.legal-page p {
  margin: 0;
}

.liff-entry-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.liff-entry-card h1,
.liff-entry-card p {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.liff-entry-actions {
  display: grid;
  width: min(100%, 320px);
  gap: 10px;
  margin-top: 4px;
}

.liff-entry-actions .primary-button,
.liff-entry-actions .ghost-button {
  justify-content: center;
}

.root-entry-card {
  display: grid;
  gap: 24px;
  text-align: center;
}

.root-entry-card__head {
  display: grid;
  gap: 10px;
}

.root-entry-card__head h1,
.root-entry-card__head p,
.root-entry-free h2,
.root-entry-free p,
.root-entry-note {
  margin: 0;
}

.root-entry-card__head h1 {
  font-family: var(--font-oracle);
  font-size: clamp(25px, 6vw, 32px);
  line-height: 1.45;
}

.root-entry-card__head > p:last-child,
.root-entry-free p,
.root-entry-note {
  color: var(--muted);
}

.root-entry-actions {
  display: grid;
  gap: 10px;
}

.root-entry-actions a,
.root-entry-free .secondary-button {
  width: 100%;
  justify-content: center;
}

.root-entry-free {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.root-entry-free h2 {
  font-size: 18px;
}

.root-entry-note {
  font-size: 13px;
}

.liff-entry-loader {
  width: 28px;
  height: 28px;
  border: 3px solid var(--line);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: liff-entry-spin 0.75s linear infinite;
}

@keyframes liff-entry-spin {
  to { transform: rotate(360deg); }
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  color: var(--muted);
  font-size: 14px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-register {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  text-align: center;
}

.auth-register p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.text-link {
  color: var(--gold);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.text-link:hover {
  text-decoration: underline;
}

.user-page .page-head {
  width: 100%;
  max-width: 640px;
}

.user-page .member-page {
  width: 100%;
  max-width: 920px;
}

.user-page .page-head {
  text-align: center;
}

.user-page .member-page,
.user-page .content-grid,
.user-page .benefit-grid,
.user-page .account-actions,
.user-page .form-actions {
  justify-items: stretch;
}

.bottom-nav__item {
  display: grid;
  place-items: center;
  gap: 3px;
  min-width: 0;
  min-height: 52px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.bottom-nav__item span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  line-height: 1;
}

.bottom-nav__item.is-active {
  background: rgba(154, 122, 47, 0.08);
  color: var(--gold);
}

.stats-grid,
.content-grid,
.settings-grid,
.member-page,
.benefit-grid,
.provider-grid,
.form-grid,
.plan-compare {
  display: grid;
  gap: 12px;
}

.stats-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 14px;
}

.stat,
.panel,
.setting,
.table-wrap,
.membership-hero,
.plan-card,
.benefit {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* 白一色にならないよう、読みやすさを保った淡い色面を重ねる。 */
.panel,
.setting,
.table-wrap,
.plan-card,
.benefit {
  border-color: rgba(113, 94, 145, 0.18);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 245, 255, 0.90));
  box-shadow: 0 10px 28px rgba(57, 47, 84, 0.05);
}

.stat {
  border-color: rgba(154, 122, 47, 0.24);
  background: linear-gradient(145deg, rgba(255, 253, 246, 0.96), rgba(250, 245, 229, 0.90));
}

.content-grid .panel:nth-child(3n + 2),
.benefit-grid .benefit:nth-child(even) {
  border-color: rgba(61, 133, 111, 0.20);
  background: linear-gradient(135deg, rgba(244, 252, 248, 0.96), rgba(255, 255, 255, 0.92));
}

.stat {
  min-height: 98px;
  padding: 16px;
}

.stat strong {
  display: block;
  margin: 4px 0;
  font-size: 28px;
  line-height: 1;
}

.stat__label,
.stat__note,
.panel p,
.setting p,
td {
  color: var(--muted);
  font-size: 14px;
}

.toolbar {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.search,
.select,
.form-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 14px;
}

input,
select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  background: #fff;
  color: var(--ink);
}

input:focus,
select:focus {
  outline: 2px solid rgba(154, 122, 47, 0.18);
  border-color: rgba(154, 122, 47, 0.55);
}

input:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(95, 85, 128, 0.34);
  outline-offset: 3px;
}

input:user-invalid {
  border-color: rgba(155, 61, 56, 0.7);
}

input::placeholder {
  color: #918ba0;
  opacity: 1;
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

th,
td {
  padding: 15px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

th {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-soft);
}

tr:last-child td {
  border-bottom: 0;
}

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

.member__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(154, 122, 47, 0.1);
  color: var(--gold);
  font-weight: 800;
}

.member__name {
  color: var(--ink);
  font-weight: 800;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(43, 39, 67, 0.06);
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.badge svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.badge--paid {
  background: rgba(33, 115, 91, 0.1);
  color: var(--green);
}

.badge--free {
  background: rgba(95, 85, 128, 0.09);
  color: var(--accent);
}

.badge--canceling {
  background: rgba(155, 61, 56, 0.1);
  color: var(--red);
}

.primary-button,
.ghost-button,
.small-button,
.provider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.primary-button {
  padding: 10px 16px;
  background: var(--gold);
  color: #fff;
  font-weight: 800;
}

.ghost-button,
.small-button {
  padding: 9px 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-weight: 700;
}

.text-danger-button {
  min-height: 44px;
  padding: 8px 0;
  background: transparent;
  color: var(--red);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.small-button {
  min-height: 36px;
  padding: 6px 10px;
}

.primary-button:hover {
  background: var(--gold-strong);
}

.primary-button:active,
.ghost-button:active,
.small-button:active,
.provider:active {
  transform: translateY(1px);
}

button:disabled,
input:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.ghost-button:hover,
.small-button:hover,
.provider:hover {
  background: var(--surface-soft);
}

.text-danger-button:hover {
  color: #7d2f2b;
}

.panel,
.setting {
  padding: 20px;
}

.panel__head {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.panel h2,
.panel h3,
.setting h3 {
  font-size: 18px;
}

.form-actions,
.account-actions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.provider-grid {
  gap: 10px;
}

.provider {
  justify-content: flex-start;
  padding: 11px 14px;
  border: 1px solid var(--line);
  background: #fff;
  text-align: left;
  font-weight: 800;
}

.provider--google {
  border-left: 4px solid var(--muji-red);
}

.provider--line {
  border-left: 4px solid var(--gold-soft);
}

.auth-note {
  margin-top: 14px;
  padding: 12px;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 14px;
}

.auth-note[data-type="success"] {
  background: rgba(33, 115, 91, 0.1);
  color: var(--green);
}

.auth-note[data-type="error"] {
  background: rgba(155, 61, 56, 0.1);
  color: var(--red);
}

.membership-hero {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.membership-hero h2 {
  margin: 4px 0 8px;
  font-size: 24px;
  line-height: 1.25;
}

.membership-hero__text {
  margin: 0;
  color: var(--muted);
}

.price-box {
  display: grid;
  place-items: center;
  min-height: 108px;
  padding: 14px;
  border: 1px solid rgba(154, 122, 47, 0.32);
  border-radius: 8px;
  color: var(--gold);
  background: rgba(154, 122, 47, 0.06);
}

.price-box--compact {
  min-height: 96px;
}

.payment-provider-note {
  display: grid;
  margin-top: 16px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
}

.payment-panel {
  width: 100%;
}

.page-link-row {
  display: grid;
  justify-items: stretch;
}

.page-link-row .ghost-button {
  width: 100%;
}

.user-status-panel {
  border-color: rgba(154, 122, 47, 0.28);
}

.price-box strong {
  color: var(--ink);
  font-size: 30px;
}

.membership-action-panel {
  border-color: rgba(154, 122, 47, 0.28);
}

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.price-row div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.price-row span {
  color: var(--muted);
  font-size: 14px;
}

.price-row strong {
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
}

.action-stack {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.withdraw-section {
  display: grid;
  justify-items: center;
  padding: 8px 0 2px;
}

.status-list {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px 12px;
  margin: 0;
}

.status-list dt {
  color: var(--muted);
}

.status-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.status-list dd:not(:has(.badge)) {
  font-weight: 700;
}

.plan-card,
.benefit {
  padding: 15px;
}

.benefit-list {
  position: relative;
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(154, 122, 47, 0.25);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 253, 246, 0.96), rgba(249, 246, 238, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.benefit-list::before {
  content: "";
  position: absolute;
  top: 33px;
  bottom: 33px;
  left: 36px;
  width: 1px;
  background: linear-gradient(var(--gold-soft), rgba(200, 176, 106, 0.16));
}

.benefit-list .benefit {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px 18px;
  border: 0;
  border-bottom: 1px solid rgba(154, 122, 47, 0.17);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.benefit-list .benefit:last-child {
  border-bottom: 0;
}

.benefit-list .benefit > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(154, 122, 47, 0.42);
  border-radius: 10px;
  background: #fffdf7;
  box-shadow: 0 3px 8px rgba(89, 68, 26, 0.08);
  color: var(--gold-strong);
  font-family: Georgia, "Noto Serif JP", serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.benefit-list .benefit h3 {
  margin: 1px 0 4px;
  color: var(--ink);
}

.plan-card--paid {
  border-color: rgba(154, 122, 47, 0.34);
  background: rgba(154, 122, 47, 0.04);
}

.plan-card h3,
.benefit h3 {
  margin: 10px 0 8px;
  font-size: 16px;
}

.plan-card ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.benefit span {
  color: var(--gold);
  font-weight: 800;
}

.setting__state {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(154, 122, 47, 0.1);
  color: var(--gold);
  font-size: 14px;
  font-weight: 800;
}

.setting__state--ready {
  background: rgba(33, 115, 91, 0.1);
  color: var(--green);
}

.settings-main {
  display: grid;
  gap: 16px;
}

.settings-page-head {
  align-items: end;
}

.settings-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px;
}

.settings-overview h2,
.settings-overview p,
.settings-font-stats {
  margin: 0;
}

.settings-overview > .primary-button {
  flex: 0 0 auto;
}

.settings-font-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(74px, 1fr));
  gap: 8px;
}

.settings-font-stats div {
  min-width: 82px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  text-align: center;
}

.settings-font-stats dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.settings-font-stats dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.settings-font-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.settings-font-form-panel,
.settings-font-list-panel {
  min-width: 0;
}

.settings-font-form-panel > form {
  display: grid;
  gap: 12px;
}

.font-upload-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 13px;
}

.font-upload-summary strong {
  color: var(--ink);
  text-align: right;
}

.font-add-dialog {
  width: min(600px, calc(100vw - 24px));
  max-height: min(820px, calc(100dvh - 24px));
  overflow: auto;
  color: var(--ink);
  background: var(--surface);
}

.font-add-dialog > form {
  display: grid;
  gap: 14px;
  padding: 22px;
}

.font-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.font-dialog-head h2,
.font-dialog-head p {
  margin: 0;
}

.dialog-close-button {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: var(--surface-soft);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.font-add-dialog label[hidden] {
  display: none;
}

.font-add-dialog label > small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.55;
}

.font-add-dialog .form-actions {
  justify-content: flex-end;
}

.font-library-section + .font-library-section {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.font-library-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.font-library-heading h3 {
  margin: 0;
  font-size: 16px;
}

.font-library-heading span,
.font-setting-detail > span {
  color: var(--gold-strong);
  font-size: 12px;
  font-weight: 800;
}

.font-settings-list {
  display: grid;
  gap: 8px;
}

.font-setting-row {
  display: grid;
  grid-template-columns: minmax(112px, 0.65fr) minmax(150px, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  opacity: 0.66;
}

.font-setting-row.is-enabled {
  border-color: rgba(15, 108, 85, 0.34);
  opacity: 1;
}

.font-setting-preview {
  min-width: 0;
  overflow: hidden;
  padding: 9px 10px;
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 22px;
  line-height: 1.25;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.font-setting-detail {
  display: grid;
  min-width: 0;
}

.font-setting-detail strong,
.font-setting-detail small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.font-setting-detail small {
  color: var(--muted);
}

.font-setting-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.font-toggle-button,
.font-setting-actions .text-danger-button {
  min-height: 36px;
  padding: 7px 10px;
  white-space: nowrap;
}

.font-empty-state {
  padding: 24px 16px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}

.font-empty-state p {
  margin: 4px 0 0;
}

@media (max-width: 900px) {
  .settings-font-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .settings-overview {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-font-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .settings-font-stats div {
    min-width: 0;
    padding: 10px 6px;
  }

  .settings-overview > .primary-button {
    width: 100%;
  }

  .font-add-dialog > form {
    padding: 18px;
  }

  .font-setting-row {
    grid-template-columns: minmax(92px, 0.7fr) minmax(120px, 1fr);
  }

  .font-setting-row > .font-toggle-button,
  .font-setting-actions {
    grid-column: 1 / -1;
  }

  .font-setting-actions {
    justify-content: flex-end;
  }

}

dialog {
  width: min(520px, calc(100vw - 24px));
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 8px 24px rgba(43, 39, 67, 0.14);
}

dialog::backdrop {
  background: rgba(20, 18, 25, 0.45);
}

.dialog {
  padding: 20px;
}

.dialog dl {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 8px 12px;
  margin: 18px 0;
}

.dialog dt {
  color: var(--muted);
}

.dialog dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 720px) {
  .app-shell {
    padding-bottom: 0;
  }

  .topbar {
    padding: 16px 24px;
  }

  .main {
    padding: 28px 24px 40px;
  }

  .page-head {
    margin-bottom: 20px;
  }

  .page-head h1 {
    font-size: 30px;
  }

  .bottom-nav {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: 76px;
    height: 100vh;
    grid-template-columns: 1fr;
    grid-auto-rows: 74px;
    align-content: start;
    padding: 92px 8px 8px;
    border-top: 0;
    border-right: 1px solid var(--line);
  }

  .user-page .app-shell {
    padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 20px);
  }

  .user-page .main {
    padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 28px);
  }

  .user-page .bottom-nav {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    min-height: calc(var(--nav-height) + env(safe-area-inset-bottom));
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    border-right: 0;
  }

  .topbar,
  .main {
    margin-left: 76px;
  }

  /* Keep desktop admin screens centered within the area beside the sidebar. */
  body:not(.user-page) .main {
    width: min(1280px, calc(100% - 76px));
    margin-right: 0;
    margin-left: max(76px, calc(76px + (100vw - 1356px) / 2));
  }

  body[data-page="card-manager"] .admin-content-tools,
  body[data-page="news-manager"] .admin-content-tools {
    grid-template-columns: minmax(0, 880px);
    justify-content: center;
  }

  body[data-page="card-manager"] .admin-content-tools > .admin-form:not([hidden]),
  body[data-page="news-manager"] .admin-content-tools > .admin-form:not([hidden]) {
    grid-column: 1 / -1;
    width: 100%;
  }

  .user-page .topbar,
  .user-page .main {
    margin-right: auto;
    margin-left: auto;
  }

  .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .toolbar,
  .content-grid,
  .settings-grid,
  .membership-grid,
  .benefit-grid,
  .plan-compare,
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auth-section .form-grid {
    grid-template-columns: 1fr;
  }

  .auth-main {
    min-height: calc(100vh - 96px);
    align-content: center;
  }

  .user-page .content-grid,
  .user-page .benefit-grid {
    grid-template-columns: 1fr;
  }

  .user-page .account-actions,
  .user-page .form-actions {
    display: grid;
  }

  .toolbar {
    align-items: end;
  }

  .membership-hero {
    grid-template-columns: 1fr 180px;
    align-items: center;
  }

  .form-actions,
  .account-actions {
    display: flex;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .topbar {
    gap: 8px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .main {
    padding: 20px 14px 32px;
  }

  .auth-card,
  .panel,
  .setting {
    padding: 18px;
  }

  .liff-entry-card h1 {
    font-size: 23px;
    line-height: 1.45;
  }

  .page-head__row {
    align-items: stretch;
    flex-direction: column;
  }

  .page-head__row .primary-button {
    width: 100%;
  }

  .status-list {
    grid-template-columns: 84px 1fr;
    gap: 10px;
  }
}

/* iPhone XR（414px）などの横幅で、ヘッダーと固定メニューを安定させる。 */
@media (max-width: 430px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* スマホでは補足も無理なく読める大きさに揃え、見出しは改行しにくい密度にする。 */
  .page-head h1,
  .auth-card__head h1 {
    font-size: 25px;
    line-height: 1.35;
  }

  .auth-section .panel__head h2 {
    font-size: 20px;
    line-height: 1.4;
  }

  .panel h2,
  .setting h3,
  .membership-hero h2 {
    font-size: 19px;
    line-height: 1.4;
  }

  .page-lead,
  .panel p,
  .panel__head p,
  .setting p,
  .auth-note,
  .form-grid label,
  .search,
  .select,
  .agreement-check,
  .auth-register p,
  .text-link {
    font-size: 12px;
    line-height: 1.65;
  }

  .bottom-nav__item {
    font-size: 14px;
    line-height: 1.25;
  }

  html,
  body {
    overflow-x: clip;
  }

  .topbar {
    min-height: 58px;
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  .brand {
    gap: 8px;
  }

  .brand__mark {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }

  .brand__name {
    font-size: 14px;
  }

  .account {
    gap: 6px;
  }

  .main {
    padding-right: 12px;
    padding-left: 12px;
    padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 32px);
  }

  .user-page .app-shell {
    padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 24px);
  }

  .bottom-nav__item {
    gap: 2px;
    padding-top: 4px;
  }

  .bottom-nav__item span {
    width: 22px;
    height: 22px;
  }

  .history-bottom-nav .bottom-nav__item {
    font-size: 9px;
  }

  .panel,
  .auth-card,
  .setting {
    padding: 16px;
  }
}

/* iPhone SE（375px）では振り返りの情報密度を抑える。 */
@media (max-width: 390px) {
  .monthly-hero {
    gap: 8px;
    padding: 18px 16px;
  }

  .monthly-hero h2 {
    font-size: 20px;
    line-height: 1.35;
  }

  .monthly-hero p:not(.summary-label) {
    margin-top: 7px;
    font-size: 14px;
    line-height: 1.55;
  }

  .monthly-hero__ornament {
    flex: 0 0 auto;
    font-size: 46px;
  }

  .monthly-metrics {
    gap: 5px;
  }

  .monthly-metrics article {
    gap: 3px;
    padding: 11px 8px;
  }

  .monthly-metrics span,
  .monthly-metrics small {
    font-size: 14px;
    line-height: 1.3;
  }

  .monthly-metrics strong {
    font-size: 22px;
  }

  .monthly-calendar {
    gap: 2px;
  }

  .monthly-calendar__day {
    min-height: 32px;
    padding: 2px;
    font-size: 14px;
  }

  .monthly-calendar__day small {
    font-size: 8px;
  }

  .monthly-recent-card {
    gap: 8px;
  }

  .monthly-recent-card > span {
    flex-basis: 43px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (min-width: 1040px) {
  .content-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  }

  .user-page .content-grid {
    grid-template-columns: 1fr;
  }

  .benefit-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 2026-07 明るいエメラルドグリーン系の全体テーマ */
.panel,
.stat,
.auth-card,
.member-hero,
.member-home-hero,
.account-page__hero,
.monthly-hero,
.settings-card,
.card-detail-panel,
.monthly-reflection-hero,
.monthly-insight,
.monthly-journal-card {
  background: rgba(255, 255, 255, 0.96);
  border-color: var(--line);
  box-shadow: 0 14px 36px rgba(18, 105, 82, 0.08);
}

.member-home-hero,
.account-page__hero,
.monthly-hero,
.monthly-reflection-hero {
  color: var(--ink);
  background:
    radial-gradient(circle at 90% 10%, rgba(255, 208, 106, 0.2), transparent 32%),
    linear-gradient(135deg, #ffffff, #e3f6ef);
}

.member-home-hero__eyebrow,
.monthly-reflection-hero .summary-label,
.monthly-hero .summary-label {
  color: var(--gold-strong);
}

.account-page__hero > p:not(.member-home-hero__eyebrow),
.member-home-hero > p:not(.member-home-hero__eyebrow),
.member-home-hero__meta,
.monthly-hero p:not(.summary-label),
.monthly-reflection-hero p:not(.summary-label) {
  color: var(--muted);
}

.monthly-hero__ornament,
.monthly-reflection-hero__link,
.monthly-reflection-hero__mark {
  color: var(--gold-strong);
}

.monthly-reflection-hero__mark {
  border-color: rgba(15, 108, 85, 0.34);
}

.monthly-page-head h1,
.monthly-reflection-hero h2,
.monthly-insight h2,
.card-detail-panel h1 {
  font-family: var(--font-oracle);
  font-weight: 600;
}

.member-home-hero .badge {
  color: var(--gold-strong);
  background: rgba(15, 108, 85, 0.09);
}

.member-home-hero .badge--paid {
  color: var(--green);
  background: rgba(33, 115, 91, 0.12);
}

.member-home-hero .badge--canceling {
  color: var(--red);
  background: rgba(155, 61, 56, 0.11);
}

.member-home-hero .badge--admin {
  color: #72531a;
  border-color: rgba(114, 83, 26, 0.34);
  background: rgba(255, 240, 196, 0.72);
}

.member-home-admin-link {
  color: var(--gold-strong);
  border-color: rgba(15, 108, 85, 0.34);
  background: rgba(255, 255, 255, 0.72);
}

.member-home-upgrade-link {
  color: #ffffff;
  background: linear-gradient(135deg, #df6b36 0%, #c65320 100%);
  box-shadow: 0 6px 16px rgba(198, 83, 32, 0.35);
}

.member-home-upgrade-link:hover {
  background: linear-gradient(135deg, #e87641 0%, #ce5a26 100%);
  box-shadow: 0 8px 20px rgba(198, 83, 32, 0.45);
}

.member-home-admin-link:hover {
  background: #ffffff;
}

.primary-button,
.small-button,
.auth-submit,
.membership-button {
  background: linear-gradient(135deg, var(--accent), var(--gold-strong));
  color: #fff;
  border-color: transparent;
}

.ghost-button,
.text-link,
.bottom-nav__item.is-active,
.eyebrow {
  color: var(--gold-strong);
}

.bottom-nav {
  background: rgba(251, 255, 253, 0.96);
  border-color: var(--line);
}

table thead,
.toolbar,
.admin-news-row:nth-child(even) {
  background: #f1faf6;
}

.stat__label,
.stat__note,
.bottom-nav__item,
.auth-note,
.upload-help,
small {
  font-size: 14px;
}

/* Mobile card journal: keep the date, title, and message in a calm vertical rhythm. */
@media (max-width: 620px) {
  .monthly-history-panel .panel__head { align-items: flex-start; }
  .monthly-history-panel .panel__head .text-link { flex: 0 0 auto; margin-top: 2px; white-space: nowrap; }
  .monthly-recent-cards { gap: 0; }
  .monthly-recent-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 15px 32px 15px 0; }
  .monthly-recent-card > span { width: fit-content; max-width: 100%; padding: 4px 8px; border: 1px solid rgba(184, 148, 69, 0.3); border-radius: 999px; color: var(--gold-strong); background: #fffdf7; font-size: 14px; line-height: 1.25; white-space: nowrap; }
  .monthly-recent-card > div { min-width: 0; }
  .monthly-recent-card h3 { font-size: 16px; line-height: 1.45; }
  .monthly-recent-card p { display: -webkit-box; overflow: hidden; margin-top: 5px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 14px; line-height: 1.65; }
  .monthly-recent-card b { position: absolute; top: 50%; right: 3px; transform: translateY(-50%); }
}
.site-footer {
  width: 100%;
  margin-top: 32px;
  padding: 20px 12px calc(82px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.03em;
  text-align: center;
}

body:not(.user-page) .site-footer {
  padding-bottom: 20px;
}

.dashboard-status {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.82);
  font-size: 14px;
}

.admin-dashboard-grid {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

.dashboard-panel {
  min-width: 0;
  padding: 16px;
}

.dashboard-panel .panel__head {
  margin-bottom: 12px;
}

.dashboard-panel .table-wrap {
  max-height: 360px;
  border-color: var(--line);
  box-shadow: none;
}

.dashboard-panel table {
  min-width: 560px;
}

.dashboard-ranking {
  display: grid;
  gap: 0;
  margin: 0;
  padding-left: 30px;
}

.dashboard-ranking li {
  padding: 11px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.dashboard-ranking li::marker {
  color: var(--accent);
  font-weight: 800;
}

.dashboard-ranking span {
  color: var(--ink);
}

.dashboard-ranking strong {
  float: right;
  margin-left: 12px;
  color: var(--gold-strong);
}

.card-stat-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 18px;
}

.card-stat-summary article {
  display: grid;
  gap: 3px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.card-stat-summary span,
.card-stat-history > p {
  color: var(--muted);
  font-size: 13px;
}

.card-stat-summary strong {
  color: var(--ink);
  font-size: 28px;
}

.card-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.card-stat-grid > section,
.card-stat-history {
  min-width: 0;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.card-stat-grid h3,
.card-stat-history h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

@media (max-width: 620px) {
  .card-stat-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.badge--ended {
  background: rgba(155, 61, 56, 0.1);
  color: var(--red);
}

@media (min-width: 900px) {
  body[data-page="admin"] .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-panel--wide {
    grid-column: 1 / -1;
  }
}