/* ==========================================================================
   MiriCanvas Japan Partners Community - Prototype Stylesheet
   ========================================================================== */

:root {
  --color-primary: #21afbf;
  --color-primary-dark: #1b8b98;
  --color-bg-tint: #e9f9fb;
  --color-bg: #ffffff;
  --color-bg-alt: #f7fafb;
  --color-text: #1f2933;
  --color-text-sub: #64748b;
  --color-border: #e2e8ec;
  --color-danger: #e0554f;
  --color-warning: #e8a33d;
  --color-success: #3fa66a;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --header-height: 64px;
  --max-width: 1080px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", "Noto Sans JP", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

.page-main {
  padding-top: var(--header-height);
}

.section {
  padding: 64px 0;
  border-bottom: 1px solid var(--color-border);
}

.section:last-of-type {
  border-bottom: none;
}

.section-alt {
  background: var(--color-bg-alt);
}

.section-tint {
  background: var(--color-bg-tint);
}

.section-head {
  text-align: center;
  margin-bottom: 40px;
}

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-primary-dark);
  background: var(--color-bg-tint);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.section-title {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 12px;
}

.section-desc {
  color: var(--color-text-sub);
  font-size: 15px;
  max-width: 560px;
  margin: 0 auto;
}

.placeholder-note {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-warning);
  border: 1px dashed var(--color-warning);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
}

/* --------------------------------------------------------------------------
   Header / Desktop Nav
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
  z-index: 100;
}

.site-header .wrap {
  max-width: 1240px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 16px;
  white-space: nowrap;
  flex-shrink: 0;
}

.brand .brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
}

.brand .brand-sub {
  display: block;
  color: var(--color-text-sub);
  font-weight: 600;
  font-size: 12px;
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-desktop::-webkit-scrollbar {
  display: none;
}

.nav-desktop a {
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.nav-desktop a:hover {
  background: var(--color-bg-tint);
  color: var(--color-primary-dark);
}

.nav-desktop a.active {
  color: var(--color-primary-dark);
  background: var(--color-bg-tint);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn .short-label {
  display: none;
}

.btn-primary {
  background: var(--color-primary-dark);
  color: #fff;
}

.btn-primary:hover {
  background: #146873;
}

.btn-arrow-icon {
  display: inline-block;
  width: 13px;
  height: 13px;
  vertical-align: -1px;
}

.btn-ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn-ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.user-chip .avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  overflow: hidden;
}

.user-chip .avatar.has-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.role-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--color-bg-tint);
  color: var(--color-primary-dark);
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: #fff;
  align-items: center;
  justify-content: center;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-text);
  position: relative;
  transition: all 0.2s ease;
}

.nav-toggle span::before {
  position: absolute;
  top: -6px;
}

.nav-toggle span::after {
  position: absolute;
  top: 6px;
}

/* --------------------------------------------------------------------------
   Mobile side panel
   -------------------------------------------------------------------------- */

.mobile-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.mobile-panel-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(78vw, 320px);
  background: #fff;
  z-index: 151;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
}

.mobile-panel.open {
  transform: translateX(0);
}

.mobile-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}

.mobile-panel-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: #fff;
  font-size: 16px;
}

.mobile-panel-body {
  padding: 12px 8px;
  overflow-y: auto;
  flex: 1;
}

.mobile-panel-body a {
  display: block;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
}

.mobile-panel-body a.active {
  color: var(--color-primary-dark);
  background: var(--color-bg-tint);
}

.mobile-panel-body a:active {
  background: var(--color-bg-alt);
}

.mobile-panel-foot {
  padding: 16px 20px;
  border-top: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   Login / Signup modal
   -------------------------------------------------------------------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.open {
  display: flex;
}

.modal {
  background: #fff;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 380px;
  padding: 28px 24px 24px;
  box-shadow: var(--shadow-md);
  max-height: 90vh;
  overflow-y: auto;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.modal-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--color-bg-alt);
  font-size: 14px;
}

.modal-title {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 18px;
}

.modal-tabs {
  display: flex;
  gap: 4px;
  background: var(--color-bg-alt);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 20px;
}

.modal-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-sub);
}

.modal-tab.active {
  background: #fff;
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-sm);
}

.modal-panel {
  display: none;
  flex-direction: column;
  gap: 14px;
}

.modal-panel.active {
  display: flex;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-sub);
}

.field input,
.field select,
.field textarea {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
}

.field textarea {
  resize: vertical;
  min-height: 90px;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.checkbox-chip {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  cursor: pointer;
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.checkbox-chip input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

.checkbox-chip:has(input:checked) {
  background: var(--color-bg-tint);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  font-weight: 700;
}

.survey-section {
  margin-bottom: 26px;
}

.survey-section h4 {
  font-size: 14px;
  margin: 0 0 10px;
}

.agree-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--color-text-sub);
}

.agree-row input {
  margin-top: 3px;
  flex-shrink: 0;
}

.field input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.role-select {
  display: flex;
  gap: 8px;
}

.role-option {
  flex: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-sub);
  cursor: pointer;
}

.role-option input {
  display: none;
}

.role-option.selected {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  background: var(--color-bg-tint);
}

.field-hint {
  font-size: 11px;
  color: var(--color-text-sub);
}

.mock-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-warning);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  margin-left: 6px;
}

.modal-forgot {
  text-align: right;
  font-size: 12px;
  color: var(--color-primary-dark);
  font-weight: 700;
}

.modal-submit {
  width: 100%;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Home - hero / video
   -------------------------------------------------------------------------- */

.hero {
  padding: 56px 0 40px;
  text-align: center;
}

.hero h1 {
  font-size: 32px;
  font-weight: 900;
  margin: 0 0 14px;
}

.hero p {
  color: var(--color-text-sub);
  font-size: 15px;
  margin: 0 0 28px;
}

.video-frame {
  max-width: 720px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #0f2b30, #1b8b98);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.video-frame .play-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.video-frame .video-caption {
  position: absolute;
  bottom: 16px;
  font-size: 12px;
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   3 points / feature grids
   -------------------------------------------------------------------------- */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

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

.home-hero-video {
  max-width: 720px;
  margin: 0 auto;
}

.home-showcase-image {
  margin: 24px 0 0;
}

.home-showcase-image img {
  width: 100%;
  border-radius: var(--radius-lg);
  display: block;
}

.security-cert-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.security-cert-row img {
  height: 96px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.brand-guide-logo-img {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  display: block;
}

.point-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  text-align: left;
}

.point-card-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  display: block;
}

.point-card .icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-tint);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}

.point-card h3 {
  font-size: 16px;
  margin: 0 0 8px;
}

.point-card p {
  font-size: 13.5px;
  color: var(--color-text-sub);
  margin: 0;
}

/* Step row */

.step-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.step-card {
  position: relative;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: 22px 18px;
  text-align: center;
}

.step-card-image {
  width: 100%;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  display: block;
}

.step-card .step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.step-card h4 {
  font-size: 14px;
  margin: 0 0 6px;
}

.step-card p {
  font-size: 12.5px;
  color: var(--color-text-sub);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.price-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  background: #fff;
  text-align: center;
}

.price-card.featured {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-bg-tint);
}

.price-card .plan-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-text-sub);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.price-card .plan-price {
  font-size: 26px;
  font-weight: 900;
  margin: 10px 0 4px;
}

.price-card .plan-price span {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-sub);
}

.price-card ul {
  margin-top: 16px;
  text-align: left;
  font-size: 12.5px;
  color: var(--color-text-sub);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.price-card li::before {
  content: "✓ ";
  color: var(--color-primary);
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   Stats
   -------------------------------------------------------------------------- */

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}

.stat-num {
  font-size: 34px;
  font-weight: 900;
  color: var(--color-primary-dark);
}

.stat-label {
  font-size: 13px;
  color: var(--color-text-sub);
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Logo grid / security placeholders
   -------------------------------------------------------------------------- */

.logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.logo-box {
  aspect-ratio: 2 / 1;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-sub);
  font-size: 11px;
  background: var(--color-bg-alt);
}

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

.security-card {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  color: var(--color-text-sub);
  font-size: 13px;
  background: var(--color-bg-alt);
}

.security-card .icon {
  font-size: 22px;
  margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   Brand guide block
   -------------------------------------------------------------------------- */

.brand-guide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.brand-guide-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 22px;
  background: #fff;
}

.brand-guide-card h4 {
  font-size: 14px;
  margin: 0 0 14px;
}

.swatch-row {
  display: flex;
  gap: 10px;
}

.swatch {
  flex: 1;
  border-radius: var(--radius-sm);
  height: 56px;
  display: flex;
  align-items: flex-end;
  padding: 6px;
  font-size: 10px;
  color: #fff;
  font-weight: 700;
}

.rule-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-sub);
}

.rule-list b {
  color: var(--color-text);
}


/* Event "apply" CTA - a wide static button placed right below the event's
   meta info block (not a floating bar - floating buttons went unnoticed). */
.event-apply-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px 24px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-dark);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  margin: 14px 0;
}

.event-apply-cta:hover {
  background: #146873;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding: 40px 0 0;
  font-size: 12.5px;
  color: var(--color-text-sub);
}

.footer-main {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 28px;
  padding-bottom: 28px;
}

.footer-brand-name {
  font-weight: 800;
  font-size: 16px;
  color: var(--color-text);
}

.footer-brand p {
  margin: 8px 0 0;
  line-height: 1.6;
}

.footer-col h5 {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-col a {
  color: var(--color-text-sub);
}

.footer-col a:hover {
  color: var(--color-primary-dark);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--color-border);
}

.footer-links {
  display: flex;
  gap: 16px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .nav-desktop {
    display: none;
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .brand .brand-sub {
    display: none;
  }

  .brand > span:not(.brand-mark) {
    display: none;
  }

  .header-actions .btn .full-label {
    display: none;
  }

  .header-actions .btn .short-label {
    display: inline;
  }

  .header-actions .user-chip span:not(.avatar) {
    display: none;
  }

  .header-actions #logout-btn {
    display: none;
  }

  .header-actions .user-chip {
    padding: 6px;
  }

  .grid-3,
  .grid-4,
  .step-row,
  .pricing-grid,
  .stats-row,
  .brand-guide {
    grid-template-columns: 1fr;
  }

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

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

  .hero h1 {
    font-size: 24px;
  }

  .section {
    padding: 44px 0;
  }

  .section-title {
    font-size: 22px;
  }

  .pin-grid {
    columns: 2 160px;
  }

  .admin-sidebar {
    display: none;
  }

  .admin-main {
    padding: 20px 16px;
  }
}

/* ==========================================================================
   List / gallery pages (news, events, learning, sns, freetalk)
   ========================================================================== */

.list-page-head {
  padding: 28px 0 20px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

/* title/description on the left, the write CTA pinned to the bottom-right
   corner of the hero (colored the same as an active filter chip, so it
   reads as "the" primary action on the page) */
.list-page-head-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.list-page-head h1 {
  font-size: 22px;
  margin: 0 0 8px;
}

.list-page-head p {
  color: var(--color-text-sub);
  font-size: 13.5px;
  margin: 0;
  max-width: 640px;
}

.list-page-head-cta {
  flex-shrink: 0;
  background: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .list-page-head-top {
    flex-direction: column;
    align-items: stretch;
  }
  .list-page-head-cta {
    align-self: flex-end;
  }
}

/* below the hero, not inside it - the view toggle sits first, then the
   filter chips. Only .filter-tabs goes display:contents (its chips flow
   as individual pills in the wrap); .view-toggle keeps its own box so its
   two options read as ONE connected control, not two loose chips that
   just happen to match the chips' look - same outer height/radius as a
   single .filter-tab so it doesn't look out of place sized against them. */
.filter-view-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.filter-view-row .filter-tabs {
  display: contents;
}

.filter-tab {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-sub);
  background: #fff;
}

.filter-tab.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* Real toggle switch, not two pickable buttons: one sliding thumb behind
   whichever icon is active, whole track is one click target that flips
   list<->gallery (see renderViewToggle in post-render.js). */
.view-toggle {
  position: relative;
  flex-shrink: 0;
  display: flex;
  width: 64px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
}

.view-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(50% - 3px);
  height: calc(100% - 4px);
  border-radius: 999px;
  background: var(--color-primary);
  transition: transform 0.18s ease;
}

.view-toggle.is-gallery .view-toggle-thumb {
  transform: translateX(calc(100% + 2px));
}

.view-toggle button {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  color: var(--color-text-sub);
  background: transparent;
  pointer-events: none;
  transition: color 0.18s ease;
}

.view-toggle button.active {
  color: #fff;
}

.filter-tab-count {
  font-size: 11px;
  font-weight: 800;
  opacity: 0.7;
}

.filter-tab.active .filter-tab-count {
  opacity: 0.9;
}

.topic-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.list-body {
  padding: 24px 0 80px;
}

.role-pill {
  background: #eef0f4;
  color: var(--color-text-sub);
}

.category-pill {
  font-weight: 800;
}

.tag-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--color-bg-tint);
  color: var(--color-primary-dark);
  white-space: nowrap;
}

.status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.status-approved {
  background: #e7f6ee;
  color: var(--color-success);
}

.status-pending {
  background: #fdf2e0;
  color: var(--color-warning);
}

.status-hold {
  background: #eef0f4;
  color: var(--color-text-sub);
}

.status-rejected {
  background: #fdeceb;
  color: var(--color-danger);
}

.status-ended {
  background: #eef0f4;
  color: var(--color-text-sub);
}

.status-upcoming {
  background: var(--color-bg-tint);
  color: var(--color-primary-dark);
}

.status-private {
  background: #eef0f4;
  color: var(--color-text-sub);
}

/* --- List view row --- */

.post-list {
  margin-top: 8px;
  border-top: 1px solid var(--color-border);
}

.post-list-item {
  display: flex;
  gap: 16px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--color-border);
  align-items: flex-start;
}

.post-list-item .thumb {
  width: 92px;
  height: 68px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
}

.post-list-item .content {
  flex: 1;
  min-width: 0;
}

.post-list-item .meta-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.post-list-item h3 {
  font-size: 15px;
  margin: 0 0 6px;
  font-weight: 700;
}

.post-list-item .excerpt {
  font-size: 13px;
  color: var(--color-text-sub);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-counts {
  color: var(--color-text-sub);
  font-size: 12px;
  white-space: nowrap;
}

.card-counts-sep {
  margin: 0 2px;
}

.post-list-item .sub-meta {
  font-size: 12px;
  color: var(--color-text-sub);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.post-list-item.opacity-muted {
  opacity: 0.55;
}

.post-list-item .sub-meta .comment-avatar,
.post-gallery-card .sub-meta .comment-avatar {
  width: 18px;
  height: 18px;
  font-size: 9px;
}

/* --- Gallery view grid --- */

.post-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 20px;
}

@media (max-width: 860px) {
  .post-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .post-gallery {
    grid-template-columns: 1fr;
  }

  .footer-main {
    grid-template-columns: 1fr;
  }
}

.post-gallery-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.post-gallery-card .thumb {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: #fff;
}

.post-gallery-card .body {
  padding: 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.post-gallery-card h3 {
  font-size: 14px;
  margin: 0;
  font-weight: 700;
}

.post-gallery-card .sub-meta {
  font-size: 11.5px;
  color: var(--color-text-sub);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: auto;
}

/* ==========================================================================
   Pinterest / feed grid (SNS)
   ========================================================================== */

.pin-grid {
  columns: 3 220px;
  column-gap: 16px;
  margin-top: 20px;
}

.pin-card {
  display: block;
  break-inside: avoid;
  margin-bottom: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.pin-card .og-image {
  padding: 28px 16px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 110px;
  justify-content: flex-end;
}

.pin-card .og-platform {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
}

.pin-card .og-title {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}

.pin-card .og-body {
  padding: 12px 14px;
}

.pin-card .og-desc {
  font-size: 12.5px;
  color: var(--color-text-sub);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pin-card .og-meta {
  font-size: 11.5px;
  color: var(--color-text-sub);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 560px) {
  .pin-grid {
    columns: 1;
  }
}

/* ==========================================================================
   Discovery grid (SNS) - Instagram-explore style masonry of external cards
   ========================================================================== */

.discovery-grid {
  columns: 1;
  column-gap: 14px;
  margin-top: 20px;
}

@media (min-width: 560px) {
  .discovery-grid {
    columns: 2;
  }
}

@media (min-width: 860px) {
  .discovery-grid {
    columns: 3;
  }
}

.discovery-card {
  display: block;
  break-inside: avoid;
  margin-bottom: 14px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.discovery-card-media {
  width: 100%;
  min-height: 140px;
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}

.discovery-card-media .video-embed-wrap {
  margin-bottom: 0;
  border-radius: 0;
}

.discovery-card-media img {
  width: 100%;
  display: block;
}

.discovery-card-loading {
  min-height: 220px;
  background: linear-gradient(100deg, var(--color-bg-alt) 30%, #eef2f4 50%, var(--color-bg-alt) 70%);
  background-size: 200% 100%;
  animation: discovery-shimmer 1.4s infinite;
}

@keyframes discovery-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.discovery-card-fallback {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-text-sub);
}

/* 写真が取れず本文(og:description)だけ確保できた投稿用 - 空の色付き
   プレースホルダーではなく実際の投稿文を見せるので、そのぶん背が高い。 */
.discovery-card-textonly {
  min-height: 0;
  align-items: flex-start;
  background: var(--color-bg-tint);
  padding: 16px;
}

.discovery-card-textonly p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-line;
}

.discovery-card-body {
  padding: 10px 12px;
}

.discovery-card-platform {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--color-primary-dark);
  background: var(--color-bg-tint);
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
}

.discovery-card-title {
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   Post detail (news / events / learning / freetalk)
   ========================================================================== */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-sub);
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #fff;
}

.back-link:hover {
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
  background: var(--color-bg-tint);
}

.back-link-icon {
  font-size: 17px;
  line-height: 1;
}

.post-detail {
  padding: 96px 0 80px;
}

.post-detail-narrow {
  max-width: 720px;
  margin: 0 auto;
}

.post-detail-head {
  margin-bottom: 24px;
}

.post-detail-head h1 {
  font-size: 22px;
  margin: 12px 0;
}

.post-detail-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--color-text-sub);
  flex-wrap: wrap;
}

.post-owner-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.post-owner-action-btn {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-sub);
  font-size: 12.5px;
  cursor: pointer;
}

.post-owner-action-btn:hover {
  background: var(--color-bg-tint);
  color: var(--color-text);
}

.post-owner-action-danger:hover {
  background: #fdeceb;
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.post-detail-body {
  font-size: 14.5px;
  line-height: 1.9;
  padding: 20px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.post-detail-body img {
  border-radius: var(--radius-sm);
}

.video-embed-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
  background: #000;
}

.video-embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.post-detail-thumb {
  aspect-ratio: 16/7;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: #fff;
  margin-bottom: 20px;
}

.reaction-bar {
  display: flex;
  gap: 8px;
  padding: 18px 0;
  flex-wrap: wrap;
}

.reaction-chip {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--color-text-sub);
}

.reaction-chip.active {
  border-color: var(--color-primary);
  background: var(--color-bg-tint);
  color: var(--color-primary-dark);
}

.reaction-chip.add {
  color: var(--color-text-sub);
}

/* Who-reacted popover - avatar + name listed vertically, shown on hover
   (replaces a plain title="" tooltip). */
.reaction-chip-wrap {
  position: relative;
  display: inline-block;
}

.reaction-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  min-width: 150px;
  max-width: 240px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
  z-index: 20;
  display: none;
  flex-direction: column;
  gap: 6px;
}

.reaction-chip-wrap:hover .reaction-popover {
  display: flex;
}

.reaction-popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.reaction-popover-item .comment-avatar {
  width: 22px;
  height: 22px;
  font-size: 10px;
  flex-shrink: 0;
}

.reaction-popover-avatar-anon {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.reaction-popover-note {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
  white-space: normal;
}

.emoji-picker {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  display: flex;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 6px 8px;
  box-shadow: var(--shadow-md);
  z-index: 20;
}

.emoji-picker[hidden] {
  display: none;
}

.emoji-picker-option {
  border: none;
  background: transparent;
  font-size: 17px;
  padding: 2px 4px;
  border-radius: 6px;
  line-height: 1;
}

.emoji-picker-option:hover {
  background: var(--color-bg-tint);
}

.emoji-picker-option.active {
  background: var(--color-bg-tint);
  outline: 2px solid var(--color-primary);
}

/* comments */

.comment-section {
  margin-top: 8px;
}

.comment-section h4 {
  font-size: 14px;
  margin: 0 0 14px;
}

.comment-compose {
  margin-bottom: 24px;
}

.comment-compose-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.comment-item {
  display: flex;
  gap: 10px;
}

.comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg-tint);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

.comment-body-wrap {
  flex: 1;
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  margin-bottom: 4px;
}

.comment-meta b {
  font-size: 13px;
}

.comment-owner-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.comment-owner-action-btn {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-sub);
  font-size: 11.5px;
  cursor: pointer;
}

.comment-owner-action-btn:hover {
  background: var(--color-bg-tint);
  color: var(--color-text);
}

.comment-owner-action-danger:hover {
  background: #fdeceb;
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.comment-text {
  font-size: 13.5px;
  line-height: 1.7;
  margin: 0 0 6px;
}

.comment-actions {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--color-text-sub);
  font-weight: 700;
}

.comment-actions button {
  background: none;
  border: none;
  color: inherit;
  font-weight: 700;
  padding: 0;
}

.reply-list {
  margin-top: 12px;
  margin-left: 20px;
  padding-left: 16px;
  border-left: 2px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ==========================================================================
   Composer modal (write post)
   ========================================================================== */

.modal-wide {
  max-width: 560px;
}

/* Composer modal: header + submit stay fixed, only the field area scrolls
   when the viewport is short. Full-screen by default (the write flow gets
   the whole viewport rather than a small centered popup). */
.modal-overlay-fullscreen {
  padding: 0;
}

.modal-composer {
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  padding-bottom: 20px;
}

.modal-composer.modal-fullscreen {
  max-width: 100%;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  border-radius: 0;
  padding: 0;
}

.modal-fullscreen .modal-head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0;
}

.modal-fullscreen .composer-scroll-area {
  padding: 16px 24px;
  margin: 0;
  max-width: 720px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.modal-fullscreen .composer-foot {
  margin: 0;
  border-radius: 0;
}

.modal-fullscreen .composer-foot button {
  border-radius: 0;
  padding: 16px;
  font-size: 15px;
}

/* Desktop: the write flow doesn't need the whole viewport the way it does
   on mobile - a centered popup (narrower, still tall) reads better. Mobile
   keeps the full-bleed fullscreen treatment above untouched. */
@media (min-width: 860px) {
  .modal-overlay-fullscreen {
    padding: 20px;
  }

  .modal-composer.modal-fullscreen {
    max-width: 680px;
    width: 100%;
    height: 88vh;
    height: 88dvh;
    max-height: 88vh;
    max-height: 88dvh;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }

  .modal-fullscreen .composer-scroll-area {
    padding: 16px 24px;
  }

  /* the modal itself is rounded here (not full-bleed like mobile) - the
     two buttons stay flush square against EACH OTHER, but the footer row
     as a whole needs to round its own bottom-left/bottom-right corners to
     match, otherwise square button corners poke out past the modal's own
     rounded edge and the pair reads as crooked/mismatched. */
  .modal-fullscreen .composer-foot {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    overflow: hidden;
  }
}

.modal-composer .modal-head {
  flex-shrink: 0;
}

.composer-scroll-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* iOS Safari's momentum-scroll can silently give up partway through a
     NESTED scroll container (the editor's own overflow-y:auto adds one
     more layer inside this one) - this is the standard fix so a touch-
     scroll started anywhere in this area, including over the editor,
     reliably reaches every field below it instead of stalling. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 2px;
  margin: 4px 0;
}

/* discard (left, secondary) and submit (right, primary) sit side by side,
   flush against each other at an even 5:5 split (both used to stack
   full-width, and a 1:2 split still read lopsided - explicit feedback on
   both). A thin border stands in for a gap so there's still a visible
   seam between them without breaking the rounded-corner clipping above. */
.composer-foot {
  flex-shrink: 0;
  display: flex;
  margin-top: 4px;
}

.composer-submit-fixed,
.composer-discard-btn {
  flex: 1;
  min-width: 0;
  border-radius: 0;
  /* .modal-submit (a shared base class) sets margin-top:4px, which the
     discard button doesn't have - in a flex row that shrinks the submit
     button's cross-size by 4px relative to its sibling, so the two read
     as slightly different heights even though every other property
     (padding, border, font-size) matches exactly. */
  margin-top: 0;
}

.composer-discard-btn {
  text-align: center;
  white-space: nowrap;
  border-right: 1px solid var(--color-border);
}

.field-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.field-row > label {
  width: 96px;
  flex-shrink: 0;
  padding-top: 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-sub);
}

.field-row .field-row-input {
  flex: 1;
  min-width: 0;
}

.field-row .field-row-input input,
.field-row .field-row-input select {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font-size: 13.5px;
  font-family: inherit;
}

/* Stacked field (label above, full-width content below) - used for the body
   editor so it isn't squeezed by a side label like the short fields are. */
.field-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
}

.field-stack .composer-editor-mount {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.field-stack > label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-sub);
}

.thumb-field-preview {
  display: none;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
  margin-bottom: 8px;
}

.thumb-field-preview.has-img {
  display: block;
}

.thumb-field-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumb-field-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.thumb-field-or {
  font-size: 12px;
  color: var(--color-text-sub);
}

.thumb-field-controls input[type="url"] {
  flex: 1;
  min-width: 160px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
}

.thumb-field-remove {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text-sub);
  font-size: 12px;
}

.thumb-field-remove:hover {
  border-color: var(--color-danger, #e0554f);
  color: var(--color-danger, #e0554f);
}

.topic-chip-select {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.topic-chip-option {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  background: #fff;
  color: var(--color-text-sub);
}

.topic-chip-option.selected {
  background: var(--color-bg-tint);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  font-weight: 700;
}

@media (max-width: 560px) {
  .field-row {
    flex-direction: column;
    /* the base rule is align-items:flex-start, which only made sense
       side-by-side (label sized to its own text) - stacked, it left every
       field-row-input shrink-to-fit its own input's browser-default width
       instead of filling the row, so category/title/event-date etc. each
       ended up a different width. Stretch makes them all match. */
    align-items: stretch;
    gap: 4px;
  }
  .field-row > label {
    width: auto;
    padding-top: 0;
  }
}

/* Block background (Notion-style: the whole block gets a color tint) -
   applies to rendered post/comment bodies (both migrated content and the
   block editor's own saved output use plain background-color styles). */
.post-detail-body p[style*="background-color"],
.comment-text p[style*="background-color"] {
  padding: 6px 10px;
  border-radius: 4px;
  margin: 4px 0;
}

/* Callout block (💡) - same look for migrated Slashpage .sp-callout content
   and the block editor's own callout blocks (icon is a real character in
   the markup, not a CSS ::before, so no extra rule needed for that). */
.post-detail-body .sp-callout,
.comment-text .sp-callout {
  background: var(--color-bg-tint);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 8px 0;
}

/* --------------------------------------------------------------------------
   Block editor (js/block-editor.js) - built on Tiptap. Tiptap is headless
   (no UI of its own), so everything here is hand-styled: the editable
   surface itself, the gutter (+/drag-handle, positioned automatically by
   the DragHandle extension - only its contents need CSS from us), the
   floating selection toolbar, block/insert popovers, callout, media/file
   blocks, and the emoji picker. Shared by the post composer and comments.
   -------------------------------------------------------------------------- */

.be-root {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 14px 10px;
  min-height: 260px;
  overflow-y: auto;
  font-size: 13.5px;
}

/* The main post composer has no per-block gutter overlap problem to solve
   with a border box - it drops the border entirely (a divider above the
   editor takes its place, see .composer-body-divider) and gains left
   padding instead, so the +/drag-handle icons that float just left of each
   block have room without spilling onto a border edge. */
.be-root:not(.be-compact) {
  border: none;
  padding: 4px 4px 14px 8px;
  /* the base rule makes .be-root its OWN scroll container (overflow-y:
     auto) - fine for the small fixed-height comment box, but the full
     post editor should just grow taller as you type and let the ONE
     outer popup scroll (.composer-scroll-area) show more of it, not
     scroll internally itself. A nested scroll container here is also the
     likely cause of "can't reach the editor" on mobile - iOS Safari's
     touch-scroll can get stuck handing the gesture from an outer
     scrollable to one nested inside it. */
  overflow-y: visible;
}

@media (min-width: 860px) {
  .be-root:not(.be-compact) {
    min-height: 420px;
  }
}

.be-compact {
  min-height: 70px;
  /* comment box felt top/bottom-heavy and loosely spaced compared to a
     typical chat-style input - tighter line-height, and more horizontal
     than vertical padding (the base .be-root padding is the reverse:
     14px 10px, tuned for the full post editor, not a compact one). */
  padding: 10px 14px;
}

.be-compact .ProseMirror {
  line-height: 1.5;
}

.composer-body-divider {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 4px 0 10px;
}

/* DragHandle renders its +/grip gutter as a direct child of .be-content
   with inline position:absolute;top:0;left:0 (coordinates meant to track
   the hovered node RELATIVE TO .be-content). Without a positioning
   context here, the browser resolved that absolute position against the
   nearest ancestor that HAD one instead - .modal-overlay (fixed, covers
   the viewport) - so the gutter landed at the literal top-left corner of
   the screen/modal, nowhere near the actual paragraph. */
.be-content {
  position: relative;
}

/* reserves room for the gutter, which sits at a negative left offset
   relative to .be-content (see createBlockEditor) - without this the
   handle/plus buttons get clipped. .be-root no longer clips this itself
   (overflow-y:visible now, see .be-root:not(.be-compact) above) so the
   real clipping boundary is .composer-scroll-area further out. .be-root's
   own left padding (8px) plus this margin has to exceed the gutter's full
   rendered width (20px plus-button + 14px handle-button, no gap = 34px)
   with a little room to spare. */
.be-content-has-gutter {
  margin-left: 36px;
}

.be-content .ProseMirror {
  outline: none;
  line-height: 1.7;
}

/* the browser's default <p> top margin (~1em) doesn't collapse out of
   .ProseMirror, so the very first block always sat ~13-14px below
   .be-content's own top edge - which is exactly where DragHandle's gutter
   wrapper anchors (top:0 relative to .be-content). That gap was the real
   cause of the gutter appearing to float above the first block: it was
   correctly at .be-content's top, the text just started lower than that. */
.be-content .ProseMirror > :first-child {
  margin-top: 0;
}

.be-content p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: var(--color-text-sub);
  float: left;
  height: 0;
  pointer-events: none;
}

.be-content h1 {
  font-size: 22px;
  font-weight: 800;
  margin: 10px 0 4px;
}
.be-content h2 {
  font-size: 18px;
  font-weight: 800;
  margin: 8px 0 4px;
}
.be-content h3,
.be-content h4 {
  font-size: 15px;
  font-weight: 800;
  margin: 6px 0 4px;
}

.be-content blockquote {
  border-left: 3px solid var(--color-border);
  padding-left: 12px;
  color: var(--color-text-sub);
  margin: 6px 0;
}

.be-content pre {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12.5px;
  background: var(--color-bg-alt);
  border-radius: 4px;
  padding: 10px 12px;
  white-space: pre-wrap;
  margin: 6px 0;
}

.be-content ul,
.be-content ol {
  padding-left: 22px;
  margin: 4px 0;
}

.be-content ul {
  list-style: disc;
}

.be-content ol {
  list-style: decimal;
}

.be-content li p {
  margin: 0;
}

.be-content code {
  background: #fdeceb;
  color: #c2352c;
  border-radius: 4px;
  padding: 1px 6px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.9em;
}

.be-content pre code {
  background: none;
  color: inherit;
  padding: 0;
}

.be-content a {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* the gutter DragHandle floats in via its own positioning logic - only its
   internal buttons need styling from us */
.be-gutter {
  display: flex;
  align-items: center;
  gap: 0;
  /* the REAL cause of the long-standing "gutter appears above the first
     block, then disappears" bug: DragHandle doesn't set an inline
     position/top/left AT ALL until the first real hover/onNodeChange
     fires (confirmed by sampling its style attribute every 60ms after
     mount with no mouse movement - it stayed as just
     "pointer-events: auto" for the whole window). With no position here
     either, it defaulted to position:static and rendered as a normal
     in-flow child BEFORE the first paragraph, i.e. visibly above it.
     Giving it this exact position up front - beside the very top of
     .be-content, using the same left offset the hover logic itself would
     compute for the first line - makes it correctly placed from the
     first frame, hover or not; the fade-in stays as a small extra
     safety net for the instant right after mount. */
  position: absolute;
  top: 0;
  left: -34px;
  animation: be-gutter-settle 0.18s ease 0.12s both;
}

@keyframes be-gutter-settle {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.be-add-btn,
.be-handle-btn {
  /* icon shrunk 18->16px and box 22->20px with the gap now 0 (touching) -
     the two used to visually read as separated even at a 1px CSS gap,
     since padding inside each button (26-28px boxes, tried earlier) added
     up to real empty space between the icon glyphs themselves. */
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--color-text-sub);
  cursor: pointer;
}

.be-add-btn {
  width: 20px;
}

.be-handle-btn {
  /* the grip icon's actual ink (6 small dots) only spans the middle third
     of its 16px canvas either way, so narrowing just this box (not the
     plus button, which needs its full square to read as a "+") shrinks the
     gutter's total footprint without the icon looking clipped or off-center. */
  width: 14px;
  cursor: grab;
}

.be-add-btn:hover,
.be-handle-btn:hover {
  background: var(--color-bg-tint);
  color: var(--color-text);
}

.ProseMirror-selectednode {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 3px;
}

.ProseMirror-dropcursor {
  background-color: var(--color-primary) !important;
  height: 3px !important;
  border-radius: 2px;
}

.be-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 2px 0;
}

.be-callout-icon {
  border: none;
  background: transparent;
  font-size: 16px;
  line-height: 1.4;
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
}

.be-callout-icon:hover {
  background: rgba(0, 0, 0, 0.06);
}

.be-media-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 4px 0;
}

.be-media-box img {
  width: 100%;
  display: block;
}

.be-media-placeholder {
  display: block;
  padding: 20px;
  font-size: 12.5px;
  color: var(--color-text-sub);
  text-align: center;
}

.be-file-block,
.be-embed-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin: 4px 0;
}

.be-media-picker-btn {
  width: 100%;
  padding: 24px 14px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  color: var(--color-text-sub);
  font-size: 13px;
  cursor: pointer;
}

.be-media-picker-btn:hover {
  background: var(--color-bg-tint);
  color: var(--color-text);
}

.be-editable-content:empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-sub);
  pointer-events: none;
}

/* popovers (emoji picker, callout background settings) share the same
   floating-card look as Editor.js's own native settings popup */
.be-popover {
  position: absolute;
  z-index: 300;
  flex-direction: column;
  align-items: stretch;
  background: #fff;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  min-width: 160px;
  padding: 6px;
  display: flex;
  gap: 2px;
}

.be-popover button {
  display: flex;
  align-items: center;
  gap: 9px;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: 13px;
  text-align: left;
  padding: 7px 10px;
  border-radius: 5px;
  white-space: nowrap;
}

.be-popover button:hover {
  background: var(--color-bg-tint);
}

.be-popover button.be-danger {
  color: var(--color-danger);
}

.be-popover button.be-danger:hover {
  background: #fdeceb;
}

.be-popover.be-bg-submenu {
  flex-direction: row;
  min-width: auto;
}

/* horizontal icon-only row (heading/color/align/format submenus of the
   selection toolbar) - the base .be-popover button rule is built for
   label+icon rows (left-aligned, nowrap), not compact icon-only buttons */
.be-popover-row {
  flex-direction: row;
  min-width: auto;
}

.be-popover-row button {
  justify-content: center;
  padding: 7px;
  gap: 0;
}

.be-popover-row button.active {
  background: var(--color-bg-tint);
  color: var(--color-primary-dark);
}

/* floating selection toolbar */
.be-sel-toolbar {
  position: absolute;
  z-index: 300;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 4px;
  gap: 1px;
}

.be-sel-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.be-sel-btn:hover {
  background: var(--color-bg-tint);
}

.be-sel-btn.active {
  background: var(--color-bg-tint);
  color: var(--color-primary-dark);
}

.be-sel-sep {
  width: 1px;
  height: 18px;
  background: var(--color-border);
  margin: 0 3px;
}

.be-aa-label,
.be-sel-btn-text {
  font-size: 11px;
  font-weight: 800;
}

/* compact editor (comments) toolbar row - replaces the per-block gutter,
   meant to sit in the same row as the composer's own send button. */
.be-compact-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
}

.be-compact-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--color-text-sub);
}

.be-compact-btn:hover {
  background: var(--color-bg-tint);
  color: var(--color-text);
}

/* when the compact toolbar is present (main comment box + reply boxes),
   it sits at the left of the same row as the send button, pushed apart;
   the comment-edit foot (保存/キャンセル, no toolbar) keeps its own
   flex-end rule further up untouched. */
.comment-compose-foot:has(.be-compact-toolbar) {
  justify-content: space-between;
  align-items: center;
}

.be-inline-color-actions {
  display: flex;
  gap: 2px;
  padding: 4px;
}

.be-color-swatch-btn {
  width: 26px;
  height: 26px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
  font-weight: 800;
  font-size: 13px;
}

.be-color-swatch-btn:hover {
  background: var(--color-bg-tint);
}

/* color now lives inside the swatch's own SVG (the "A" glyph or the
   square's outline - see beColorAIcon/beColorBgIcon), not a CSS
   background-color, so these are just plain square icon buttons - same
   base look as any other .be-popover-row button, current value marked
   the same way (.active) as everywhere else in the toolbars. */
.be-bg-swatch,
.be-color-chip {
  width: 26px;
  height: 26px;
  padding: 0 !important;
}

.be-link-menu {
  flex-direction: row;
  align-items: center;
  min-width: auto;
  padding: 6px;
  gap: 4px;
}

.be-link-input {
  width: 200px;
  max-width: 60vw;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text);
}

.be-link-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.be-link-menu button {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  gap: 0;
}

.be-emoji-picker {
  max-height: 260px;
  overflow-y: auto;
  min-width: 220px;
}

.be-emoji-group-label {
  font-size: 11px;
  color: var(--color-text-sub);
  padding: 6px 4px 2px;
}

.be-emoji-group {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
}

.be-emoji-btn {
  border: none;
  background: transparent;
  font-size: 17px;
  padding: 4px;
  border-radius: 5px;
}

.be-emoji-btn:hover {
  background: var(--color-bg-tint);
}

.tag-chip-input {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px;
}

.tag-chip {
  background: var(--color-bg-tint);
  color: var(--color-primary-dark);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tag-chip button {
  background: none;
  border: none;
  color: inherit;
  font-size: 11px;
  padding: 0;
}

.tag-chip-input input {
  border: none;
  outline: none;
  flex: 1;
  min-width: 80px;
  font-size: 13px;
  font-family: inherit;
}

.thumb-color-picker {
  display: flex;
  gap: 8px;
}

.thumb-color-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}

.thumb-color-swatch.selected {
  border-color: var(--color-text);
}

.draft-restored-note {
  font-size: 12px;
  color: var(--color-primary-dark);
  background: var(--color-bg-tint);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin-bottom: 10px;
}

/* ==========================================================================
   Guide page (ambassador / supporter)
   ========================================================================== */

.guide-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.guide-tab {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #fff;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-text-sub);
  white-space: nowrap;
}

.guide-tab.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.guide-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.guide-panel {
  display: none;
  padding: 32px 0 80px;
}

.guide-panel.active {
  display: block;
}

.guide-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px;
  background: #fff;
  margin-bottom: 20px;
}

.guide-block h3 {
  font-size: 16px;
  margin: 0 0 12px;
}

.guide-block p,
.guide-block li {
  font-size: 14.5px;
  color: var(--color-text);
  line-height: 1.8;
}

.guide-copy-box {
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: 13px;
  font-family: monospace;
  margin: 10px 0;
}

/* ==========================================================================
   Settings page
   ========================================================================== */

.settings-body {
  padding: 96px 0 80px;
  max-width: 480px;
  margin: 0 auto;
}

.settings-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 22px;
  margin-bottom: 16px;
  background: #fff;
}

.settings-block h3 {
  font-size: 15px;
  margin: 0 0 14px;
}

.settings-block.danger {
  border-color: #f3d3d1;
  background: #fff8f7;
}

.settings-block.danger h3 {
  color: var(--color-danger);
}

.profile-photo-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

.profile-photo-preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  flex-shrink: 0;
  overflow: hidden;
}

.profile-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-photo-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ==========================================================================
   Admin (backoffice) - separate simple shell
   ========================================================================== */

.admin-shell {
  display: flex;
  min-height: 100vh;
}

.admin-sidebar {
  width: 220px;
  background: #12232a;
  color: #cbd5e1;
  padding: 22px 14px;
  flex-shrink: 0;
}

.admin-sidebar .admin-brand {
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  padding: 0 10px 20px;
}

.admin-sidebar a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  color: #cbd5e1;
  margin-bottom: 2px;
  font-weight: 600;
}

.admin-sidebar a.active {
  background: var(--color-primary);
  color: #fff;
}

.admin-sidebar a:hover {
  background: rgba(255, 255, 255, 0.08);
}

.admin-main {
  flex: 1;
  padding: 28px 32px;
  background: var(--color-bg-alt);
  min-width: 0;
}

.admin-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-topbar h1 {
  font-size: 20px;
  margin: 0;
}

.admin-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

select.admin-select,
input.admin-input {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  background: #fff;
}

.admin-table-wrap {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: auto;
}

table.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.admin-table th {
  text-align: left;
  font-size: 12px;
  color: var(--color-text-sub);
  background: var(--color-bg-alt);
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

/* both grid pages (支払い確定 / コミュニティ会員) double as spreadsheets:
   the wrap gets its own bounded scroll (both axes) with a sticky header -
   otherwise the horizontal scrollbar ends up thousands of px down the
   page, unreachable, and the remaining columns are effectively lost. The
   whole page no longer scrolls - .admin-main becomes a fixed-height flex
   column and only the table wrap scrolls vertically inside it. */
body[data-page="costs"],
body[data-page="members"] {
  height: 100%;
  overflow: hidden;
}

body[data-page="costs"] .admin-shell,
body[data-page="members"] .admin-shell {
  height: 100vh;
}

body[data-page="costs"] .admin-main,
body[data-page="members"] .admin-main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

body[data-page="costs"] .admin-grid-table-wrap,
body[data-page="members"] .admin-grid-table-wrap {
  flex: 1;
  min-height: 0;
}

.admin-costs-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.admin-costs-table th.admin-save-col {
  z-index: 3;
}

.admin-costs-table td.admin-save-col {
  z-index: 1;
}

.admin-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
  vertical-align: middle;
  white-space: nowrap;
}

.admin-table tr:last-child td {
  border-bottom: none;
}

.admin-amount-input {
  width: 90px;
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}

.admin-memo-input {
  width: 140px;
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}

.admin-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

/* costs admin's stats as 3 short equations (件数の内訳 / 発送済み件数 / 発送済み
   金額) instead of 8 disconnected cards - the numbers' relationship to each
   other (総-確定-却下-保留=待機 など) is the point, so it's spelled out inline
   rather than left for the reader to reconstruct from 8 separate tiles. */
.admin-stat-eq-wrap {
  display: flex;
  flex-direction: row;
  margin-bottom: 14px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.admin-stat-eq {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 14px;
  font-size: 12px;
  border-right: 1px solid var(--color-border);
}

.admin-stat-eq:last-child {
  border-right: none;
}

.admin-stat-eq .eq-term {
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.admin-stat-eq .eq-term b {
  font-size: 15px;
  font-weight: 800;
}

.admin-stat-eq .eq-term label {
  color: var(--color-text-sub);
  font-size: 11px;
}

.admin-stat-eq .eq-op {
  color: var(--color-text-sub);
  font-size: 13px;
  font-weight: 700;
}

.admin-stat-eq .eq-result b,
.admin-stat-eq .eq-result label {
  color: var(--color-primary-dark);
}

.admin-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 16px;
}

.admin-chip {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-sub);
  background: #fff;
}

.admin-chip.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.admin-stat-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}

.admin-stat-card .num {
  font-size: 22px;
  font-weight: 800;
}

.admin-stat-card .label {
  font-size: 12px;
  color: var(--color-text-sub);
  margin-top: 2px;
}

/* Costs table - every row is a single fixed height now (memo/contact are
   truncated + edited through a popup instead of growing inline textareas -
   see .admin-cell-truncate below), and the save/edit column is sticky so
   it stays reachable even when the table has to scroll horizontally for
   the other columns. */
.admin-costs-table {
  min-width: 1560px;
}

.admin-costs-table td {
  white-space: nowrap;
  vertical-align: middle;
  height: 46px;
}

/* truncated single-line display for memo/contact/files - keeps every row
   the same height regardless of how long the underlying text is */
.admin-cell-truncate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.admin-cell-truncate-text {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-cell-truncate-text.is-empty {
  color: var(--color-text-sub);
}

.admin-cell-edit-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text-sub);
  font-size: 12px;
  cursor: pointer;
}

.admin-cell-edit-btn:hover {
  background: var(--color-bg-tint);
  color: var(--color-text);
}

.admin-cell-add-btn {
  flex-shrink: 0;
  padding: 3px 9px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text-sub);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.admin-cell-add-btn:hover {
  background: var(--color-bg-tint);
  color: var(--color-text);
}

/* small floating editor popup for a single memo/contact cell */
.admin-cell-popover {
  position: fixed;
  z-index: 400;
  width: 280px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 10px;
}

.admin-cell-popover textarea {
  width: 100%;
  min-height: 90px;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 8px;
}

.admin-cell-popover-foot {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.admin-save-col {
  position: sticky;
  right: 0;
  background: #fff;
  box-shadow: -4px 0 6px -4px rgba(0, 0, 0, 0.12);
  text-align: center;
}

.admin-table th.admin-save-col {
  background: var(--color-bg-alt);
}

.admin-save-btn {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text-sub);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  min-width: 60px;
}

.admin-save-btn.is-dirty {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* row is in edit mode - the same button reads 保存 (accent color) instead
   of 編集 (see rowEditHtml/rowReadHtml in costs.html) */
.admin-save-btn.is-editing {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ==========================================================================
   Excel-like grid editor (js/grid-editor.js) - shared by admin/members.html
   and admin/costs.html. First column is frozen/sticky and holds the 保存
   button (disabled until the row has an uncommitted edit - see
   .admin-save-btn.is-dirty below, reusing the same button look/class as
   the old row-toggle so the two tables stay visually consistent).
   ========================================================================== */

.admin-grid-table-wrap {
  position: relative;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: auto;
}

table.admin-grid-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.admin-grid-table th,
.admin-grid-table td {
  padding: 0;
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  white-space: nowrap;
  height: 42px;
}

.admin-grid-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--color-bg-alt);
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  color: var(--color-text-sub);
}

.admin-grid-table .grid-frozen-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.12);
  text-align: center;
  padding: 6px 10px;
}

.admin-grid-table thead .grid-frozen-col {
  z-index: 4;
  background: var(--color-bg-alt);
}

.grid-frozen-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
}

.grid-revert-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text-sub);
  cursor: pointer;
}

.grid-revert-btn:hover:not(:disabled) {
  background: var(--color-bg-tint);
  color: var(--color-text);
}

.grid-revert-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* qualified with the table selector so this beats .admin-grid-table td's
   own padding:0 on specificity - .grid-cell alone (0,1,0) used to lose to
   .admin-grid-table td (0,1,1) regardless of source order, so this padding
   was silently dead and cell text sat flush against the border. */
.admin-grid-table td.grid-cell {
  padding: 0 16px;
  font-size: 13px;
  cursor: cell;
  outline: none;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* same specificity fix as the readonly-focus rule below: plain ".grid-cell:
   focus"/".grid-cell.grid-cell-focused" (0-2-0) was losing the outline
   specifically to ".admin-grid-table td.grid-cell"'s own "outline: none"
   (0-2-1) above - the background tint still showed (nothing else was
   contesting that property), which is why this looked like it "mostly
   worked" while only the ring silently never appeared. */
.admin-grid-table td.grid-cell:focus,
.admin-grid-table td.grid-cell.grid-cell-focused {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  background: var(--color-bg-tint);
  position: relative;
  z-index: 1;
}

.grid-cell-readonly {
  color: var(--color-text-sub);
  background: repeating-linear-gradient(135deg, transparent, transparent 6px, rgba(0, 0, 0, 0.02) 6px, rgba(0, 0, 0, 0.02) 12px);
  cursor: default;
}

/* qualified with .admin-grid-table td for the same specificity reason as
   td.grid-cell's padding fix above: the base ".admin-grid-table td.grid-cell"
   rule's own "outline: none" (0-2-1) was silently beating this rule's
   ".grid-cell-readonly.grid-cell-focused" (0-2-0) regardless of source
   order, so the outline never rendered at all - only the equally-faint
   --color-bg-alt background was ever visible. */
.admin-grid-table td.grid-cell-readonly.grid-cell-focused {
  outline: 2px dashed var(--color-text-sub);
  outline-offset: -2px;
  background: var(--color-bg-tint);
}

.grid-cell-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* floating edit surface - fixed to the cell's exact width/position, but
   its own height is free to grow past the row (min-height only matches
   the row so short single-line edits don't look cramped). */
.grid-cell-editor {
  z-index: 500;
  background: #fff;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
}

.grid-cell-editor-text {
  justify-content: center;
}

.grid-cell-input {
  width: 100%;
  height: 100%;
  border: none;
  padding: 0 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.grid-cell-editor-longtext {
  padding: 8px;
  min-width: 260px;
}

.grid-cell-textarea {
  width: 100%;
  min-height: 60px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px;
  font-size: 13px;
  font-family: inherit;
  resize: none;
  overflow: hidden;
}

.grid-cell-editor-foot {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}

.grid-cell-editor-select {
  padding: 4px;
}

.grid-select-list {
  display: flex;
  flex-direction: column;
  max-height: 220px;
  overflow-y: auto;
}

.grid-select-opt {
  text-align: left;
  padding: 7px 10px;
  border: none;
  background: transparent;
  border-radius: 5px;
  font-size: 13px;
  color: var(--color-text);
}

.grid-select-opt:hover {
  background: var(--color-bg-tint);
}

.grid-select-opt.active {
  background: var(--color-primary);
  color: #fff;
}

.grid-cell-editor-autocomplete {
  padding: 4px;
  min-width: 220px;
}

.grid-cell-editor-autocomplete .grid-cell-input {
  height: 34px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
}

.grid-suggest-sub {
  color: var(--color-text-sub);
  font-size: 11.5px;
}

.grid-attach-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  max-height: 160px;
  overflow-y: auto;
}

.grid-attach-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  font-size: 12.5px;
}

.grid-attach-row a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grid-attach-remove {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--color-text-sub);
  cursor: pointer;
  font-size: 12px;
}

.grid-attach-empty {
  font-size: 12.5px;
  color: var(--color-text-sub);
  margin: 0 0 8px;
}

.grid-attach-form {
  display: flex;
  gap: 6px;
  align-items: center;
}

.grid-attach-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 12.5px;
  font-family: inherit;
}

/* row-level 保存 button (frozen column) - disabled/neutral until that row
   has an uncommitted cell edit, matching the same visual language as the
   older is-dirty/is-editing states above. */
.admin-save-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.admin-save-btn.is-dirty {
  opacity: 1;
}

/* ==========================================================================
   Migrated content (Slashpage -> local). Thumbnails with real images,
   comment avatars, and body blocks converted from Slashpage blockTree.
   ========================================================================== */

.thumb.has-img,
.post-detail-thumb.has-img {
  overflow: hidden;
  background: var(--color-bg-tint);
  padding: 0;
}
.thumb.has-img img,
.post-detail-thumb.has-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.post-detail-thumb.has-img {
  aspect-ratio: 16/9;
}

.comment-avatar.has-img {
  overflow: hidden;
  padding: 0;
}
.comment-avatar.has-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.comment-text p {
  margin: 0 0 6px;
}
.comment-text p:last-child {
  margin-bottom: 0;
}
.comment-text .sp-image img,
.comment-text .sp-video video {
  max-width: 320px;
  width: 100%;
  border-radius: var(--radius-sm);
}
.comment-text .sp-empty {
  display: none;
}

.source-link {
  font-size: 12px;
  color: var(--color-text-sub);
  margin: 14px 0 0;
  word-break: break-all;
}

/* pin-card with real OG/thumbnail image */
.pin-card .og-image.has-img {
  padding: 0;
  min-height: 0;
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.pin-card .og-image.has-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pin-card .og-image.has-img .og-platform {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.55);
  padding: 3px 8px;
  border-radius: 999px;
}
.pin-card .og-image.has-img .og-title {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.pin-card .og-detail-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-top: 8px;
  display: inline-block;
}

/* --- Slashpage block conversions --- */
.post-detail-body p {
  margin: 0 0 10px;
}
.post-detail-body .sp-empty {
  margin: 0;
  height: 10px;
  line-height: 10px;
}
.post-detail-body h2 {
  font-size: 20px;
  margin: 28px 0 12px;
  line-height: 1.5;
}
.post-detail-body h3 {
  font-size: 17px;
  margin: 22px 0 10px;
  line-height: 1.5;
}
.post-detail-body h4 {
  font-size: 15px;
  margin: 18px 0 8px;
}
.post-detail-body ul,
.post-detail-body ol,
.comment-text ul,
.comment-text ol {
  margin: 6px 0 12px;
  padding-left: 24px;
}
.post-detail-body ul,
.comment-text ul {
  list-style: disc;
}
.post-detail-body ol,
.comment-text ol {
  list-style: decimal;
}
.post-detail-body li,
.comment-text li {
  margin: 3px 0;
}
.post-detail-body hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 22px 0;
}
.post-detail-body blockquote {
  margin: 12px 0;
  padding: 8px 16px;
  border-left: 3px solid var(--color-primary);
  background: var(--color-bg-tint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.post-detail-body pre {
  background: #17242a;
  color: #e6f1f3;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 10px 0 14px;
}
.post-detail-body code,
.comment-text code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #fdeceb;
  color: #c2352c;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.9em;
}
.post-detail-body pre code,
.comment-text pre code {
  background: none;
  color: inherit;
  padding: 0;
}
.post-detail-body a,
.comment-text a {
  color: var(--color-primary-dark);
  text-decoration: underline;
  word-break: break-all;
}

.sp-callout {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin: 10px 0 14px;
  font-size: 14px;
}
.sp-callout-icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1.4;
}
.sp-callout > div {
  flex: 1;
  min-width: 0;
}
.sp-callout p {
  margin: 4px 0;
}
.sp-callout a {
  color: inherit;
  text-decoration: underline;
}

.sp-image {
  margin: 12px 0 16px;
}
.sp-image.center {
  text-align: center;
}
.sp-image img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  border-radius: var(--radius-sm);
}

/* Migrated content sometimes carries inline max-width (e.g. style="max-width:499px")
   from the source. Inline styles beat plain selectors, so force it here -
   this is the fix for the mobile horizontal-scroll bug. */
.post-detail-body img,
.comment-text img,
.post-detail-body iframe {
  max-width: 100% !important;
}
.sp-image figcaption {
  font-size: 12px;
  color: var(--color-text-sub);
  margin-top: 6px;
  text-align: center;
}

.sp-video {
  margin: 12px 0 16px;
}
.sp-video video,
.sp-video img {
  width: 100%;
  max-height: 480px;
  border-radius: var(--radius-sm);
  background: #000;
}

.sp-embed.sp-youtube {
  position: relative;
  aspect-ratio: 16/9;
  margin: 12px 0 16px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #000;
}
.sp-embed.sp-youtube iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.sp-linkcard {
  display: flex;
  gap: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 12px 0 16px;
  text-decoration: none !important;
  color: inherit !important;
  background: #fff;
}
.sp-linkcard:hover {
  border-color: var(--color-primary);
}
.sp-linkcard img {
  width: 160px;
  min-height: 100px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 0 !important;
}
.sp-linkcard-body {
  padding: 12px 14px 12px 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sp-linkcard img + .sp-linkcard-body {
  padding-left: 0;
}
.sp-linkcard-body:first-child {
  padding-left: 14px;
}
.sp-linkcard-site {
  font-size: 11px;
  font-weight: 800;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sp-linkcard-body b {
  font-size: 14px;
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sp-linkcard-body p {
  font-size: 12.5px;
  color: var(--color-text-sub);
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sp-linkcard-url {
  font-size: 11.5px;
  color: var(--color-text-sub);
  word-break: break-all;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sp-cols {
  display: grid;
  gap: 18px;
  margin: 8px 0 14px;
  align-items: start;
}
.sp-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .sp-cols { grid-template-columns: 1fr; }
  .sp-linkcard { flex-direction: column; }
  .sp-linkcard img { width: 100%; }
  .sp-linkcard-body { padding: 12px 14px; }
}

.sp-section {
  padding: 22px 18px;
  border-radius: var(--radius-lg);
  margin: 14px 0 18px;
}
.sp-background {
  margin: 8px 0;
}
.sp-background.center {
  text-align: center;
}
.sp-btn-wrap {
  margin: 12px 0 16px;
}
.sp-btn-wrap.center {
  text-align: center;
}
.sp-btn {
  text-decoration: none !important;
  color: #fff !important;
}
.sp-btn.btn-ghost {
  color: var(--color-primary-dark) !important;
}
.sp-imgbtn {
  display: block;
  margin: 8px 0;
}
.sp-imgbtn img {
  max-width: 100%;
  border-radius: var(--radius-sm);
}
.sp-social a {
  display: inline-block;
  margin-right: 10px;
  font-weight: 700;
}

.sp-table-wrap {
  overflow-x: auto;
  margin: 12px 0 16px;
}
.sp-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13.5px;
}
.sp-table td,
.sp-table th {
  border: 1px solid var(--color-border);
  padding: 8px 10px;
  vertical-align: top;
}
.sp-table th {
  background: var(--color-bg-tint);
}
.sp-table p {
  margin: 0;
}
.sp-table .sp-empty {
  display: none;
}
.sp-code-caption {
  font-size: 12px;
  color: var(--color-text-sub);
  margin: -8px 0 12px;
}

/* guide article list */
.guide-article-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin: 18px 0 8px;
}
.guide-article-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  background: #fff;
  text-decoration: none !important;
  color: inherit !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.guide-article-card:hover {
  border-color: var(--color-primary);
}
.guide-article-card h3 {
  font-size: 15.5px;
  margin: 0;
}
.guide-article-card p {
  font-size: 12.5px;
  color: var(--color-text-sub);
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}