/*
Theme Name: Mucchujin Theme
Theme URI: https://example.com/mucchujin
Author: ReLudens
Author URI: https://example.com
Description: ミート・ザ・ムッチュー人 アーカイブサイト用カスタムテーマ
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mucchujin
*/

/* ==========================================================================
   CSS Variables (Design Tokens)
   ========================================================================== */
:root {
  /* Primary Colors - Based on Next.js design tokens */
  --color-primary: #EE9F17;
  --color-primary-plus1: #E8920A;
  --color-primary-minus1: #F3AE36;
  --color-secondary: #0068C9;
  --color-alert: #EB5757;

  /* Orange Palette */
  --color-orange-100: #F45700;
  --color-orange-200: #FAD189;
  --color-orange-300: #F9C364;
  --color-orange-400: #F3AE36;
  --color-orange-500: #EE9F17;
  --color-orange-600: #E8920A;
  --color-orange-700: #E28B02;

  /* Violet Palette */
  --color-violet-100: #65558F;
  --color-violet-200: #5135AC;
  --color-violet-300: #C17CF8;

  /* Blue Palette */
  --color-blue-100: #2A3B45;
  --color-blue-200: #2B3A4A;
  --color-blue-300: #3386D4;
  --color-blue-400: #0068C9;
  --color-blue-500: #005EB5;

  /* Yellow Palette */
  --color-yellow-100: #FFFF00;
  --color-yellow-200: #FFFF9C;
  --color-yellow-300: #FFF4B5;
  --color-yellow-400: #F4DC80;

  /* Monotone Palette */
  --color-monotone-0: #FFFFFF;
  --color-monotone-20: #F6F6F6;
  --color-monotone-40: #5E6062;
  --color-monotone-90: #D5D2CD;
  --color-monotone-100: #CECECE;
  --color-monotone-200: #B4B4B4;
  --color-monotone-300: #828282;
  --color-monotone-400: #6E6E6E;
  --color-monotone-500: #505050;
  --color-monotone-600: #464646;
  --color-monotone-700: #323232;
  --color-monotone-800: #1E1E1E;
  --color-monotone-900: #000000;

  /* Text Colors */
  --color-text-heading: #fff;
  --color-text-body: #292D31;
  --color-text-label: #828282;
  --color-text-placeholder: #B4B4B4;

  /* Font Sizes */
  --font-size-ultral: 48px;
  --font-size-superl: 40px;
  --font-size-xxxxl: 32px;
  --font-size-xxxl: 24px;
  --font-size-xxl: 22px;
  --font-size-xl: 20px;
  --font-size-lg: 18px;
  --font-size-md: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;
  --font-size-xxs: 10px;
  --font-size-xxxs: 8px;

  /* Font Families */
  --font-family-base: 'M PLUS 1', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --font-family-rounded: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', sans-serif;

  /* Line Heights */
  --line-height-eq: 1.0;
  --line-height-md: 1.6;
  --line-height-lg: 1.6;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;

  /* Header - Two Row Design (Figma) */
  --header-height: 133px;          /* Total: 57px + 76px */
  --header-top-height: 57px;       /* Top bar height */
  --header-main-height: 76px;      /* Main bar height */
  --header-top-bg: #3c2685;        /* Dark purple */
  --header-main-bg: #5135af;       /* Light purple */
  --header-bg: var(--header-main-bg);

  /* Footer */
  --footer-bg: #3c2685;           /* Dark purple - Figma spec */
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--color-text-body);
  background-color: var(--color-monotone-20);
  min-height: 100vh;
}

/* MainBg - Default background wrapper (matches Next.js structure) */
.main-bg {
  z-index: 1;
  position: relative;
  min-height: 100dvh;
  background-image: url('assets/images/default.svg');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* Site main - no separate background needed */
.site-main {
  position: relative;
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--spacing-md);
  font-weight: 700;
  line-height: var(--line-height-eq);
  color: var(--color-text-heading);
}

h1 { font-size: var(--font-size-xxxxl); }
h2 { font-size: var(--font-size-xxxl); }
h3 { font-size: var(--font-size-xxl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-md); }

p {
  margin: 0 0 var(--spacing-md);
}

a {
  color: var(--color-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-primary);
}

/* ==========================================================================
   Layout
   ========================================================================== */
.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-content {
  max-width: 840px;
  margin: 0 auto;
  width: 100%;
}

.site-main {
  flex: 1;
  padding-bottom: 40px;
}

.container {
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* ==========================================================================
   Header - Two Row Design (Figma Spec)
   ========================================================================== */
.site-header {
  position: relative;
  z-index: 100;
  height: var(--header-main-height);
}

/* Two Row Header Variant */
.site-header--two-row {
  display: flex;
  flex-direction: column;
}

/* Top Bar - Dark Purple (#3c2685) - スマホではカメラエリアのみ（safe-area-inset-topで制御） */
.header-top-bar {
  height: 0;
  background-color: var(--header-top-bg);
}

/* Main Bar - Light Purple (#5135af) */
.header-main-bar {
  height: var(--header-main-height);
  background-color: var(--header-main-bg);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 840px;
  margin: 0 auto;
  padding: 0 25px;
}

.site-logo {
  display: flex;
  align-items: center;
}

.site-logo__link {
  display: block;
  width: 86px;
}

.site-logo__svg {
  width: 86px;
  height: 39px;
}

.site-logo a {
  display: block;
  color: var(--color-yellow-100);
}

.site-logo img,
.site-logo svg {
  width: 86px;
  height: auto;
}

/* Header Navigation - Icons with Labels */
.header-nav {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.header-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  color: var(--color-monotone-0);
  text-decoration: none;
  gap: 2px;
}

.header-nav-link__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-nav-link__icon-img {
  display: block;
  width: 28px;
  height: auto;
}

.header-nav-link__label {
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-monotone-0);
}

.menu-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-monotone-0);
  cursor: pointer;
  gap: 2px;
}

.menu-toggle__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-toggle__icon-img {
  display: block;
  width: 56px;
  height: auto;
}

.menu-toggle__label {
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-monotone-0);
}

/* ==========================================================================
   Navigation Menu
   ========================================================================== */
.main-navigation {
  position: fixed;
  top: var(--header-height);
  right: -300px;
  width: 300px;
  height: calc(100vh - var(--header-height));
  background-color: var(--color-monotone-0);
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
  transition: right 0.3s ease;
  overflow-y: auto;
  z-index: 999;
}

.main-navigation.is-open {
  right: 0;
}

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

.main-navigation li {
  border-bottom: 1px solid var(--color-monotone-200);
}

.main-navigation a {
  display: block;
  padding: var(--spacing-md);
  color: var(--color-text-body);
  font-size: var(--font-size-md);
}

.main-navigation a:hover {
  background-color: var(--color-monotone-100);
}

.menu-overlay {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
}

.menu-overlay.is-visible {
  display: block;
}

/* ==========================================================================
   Footer - Figma Mock Style
   ========================================================================== */
.footer {
  width: 100%;
  height: 107px;
  position: relative;
}

@media (min-width: 769px) {
  .footer {
    width: 100%;
  }
}

.footer > .base {
  width: 100%;
  height: 107px;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #3c2685;
}

.footer__copyright {
  width: 100%;
  height: 22px;
  position: absolute;
  left: 0;
  top: 53px;
  color: var(--color-monotone-0);
  font-family: var(--font-family-base);
  font-size: 10px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  margin: 0;
}

.footer__links {
  display: flex;
  justify-content: center;
  gap: 24px;
  position: absolute;
  top: 20px;
  width: 100%;
}

.footer__link {
  color: var(--color-monotone-0);
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  text-decoration: none;
}

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

/* ==========================================================================
   Common Banner
   ========================================================================== */
.page-banner-link {
  display: block;
  align-self: center;
  margin: 30px 0;
  transition: opacity 0.2s ease;
}

.page-banner-link:hover {
  opacity: 0.8;
}

.page-banner {
  width: calc(100% - 20px);
  height: auto;
  aspect-ratio: 370 / 200;
  display: block;
  margin: 30px auto;
}

@media (min-width: 769px) {
  .page-banner {
    max-width: 390px;
  }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 768px) {
  .container {
    padding: 0 var(--spacing-lg);
  }
}

@media (min-width: 1024px) {
  .main-navigation {
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .main-navigation ul {
    display: flex;
    gap: var(--spacing-md);
  }

  .main-navigation li {
    border: none;
  }

  .main-navigation a {
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-monotone-0);
    font-size: var(--font-size-sm);
  }

  .main-navigation a:hover {
    background: transparent;
    color: var(--color-yellow-100);
  }
}

/* ==========================================================================
   Archive Pages - Figma spec
   ========================================================================== */
.archive-header {
  padding: var(--spacing-xl) 30px var(--spacing-lg);
}

/* Archive Title - Figma spec: decorative banner style with rounded font */
.archive-title {
  font-family: var(--font-family-rounded);
  font-size: var(--font-size-xxl);
  color: var(--color-yellow-100);
  margin: 0;
  font-weight: 700;
  text-shadow: 2px 2px 0 var(--color-violet-300),
               -1px -1px 0 var(--color-violet-300),
               1px -1px 0 var(--color-violet-300),
               -1px 1px 0 var(--color-violet-300);
  letter-spacing: 0.05em;
}

.archive-description {
  color: var(--color-monotone-400);
  font-size: var(--font-size-md);
}

.no-posts {
  text-align: center;
  padding: var(--spacing-xxl);
  color: var(--color-monotone-400);
}

/* Archive Events Page */
.archive-events .event-grid {
  padding: 0 30px;
}

/* Archive News Page */
.archive-news .news-list {
  padding: 0 30px;
}

/* Archive Pagination - Figma spec: ≪ 1 2 3 ≫ */
.archive-pagination {
  padding: var(--spacing-xl) 30px;
  text-align: center;
}

.archive-pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
}

.archive-pagination .page-numbers {
  color: var(--color-monotone-0);
  font-size: var(--font-size-lg);
  padding: var(--spacing-xs) var(--spacing-sm);
}

.archive-pagination .page-numbers.current {
  font-weight: 700;
}

.archive-pagination .page-numbers:hover:not(.current) {
  opacity: 0.7;
}

/* Category Filter */
.category-filter {
  margin-bottom: var(--spacing-xl);
}

.category-filter__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
}

.category-filter__link {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-monotone-100);
  border-radius: 20px;
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
  transition: all 0.2s ease;
}

.category-filter__link:hover,
.category-filter__link.is-active {
  background-color: var(--color-violet-200);
  color: var(--color-monotone-0);
}

/* ==========================================================================
   Event Cards - Figma spec: 330x200px cards, single column on mobile
   ========================================================================== */
.event-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding: 0 30px;
  margin-bottom: var(--spacing-xl);
}

@media (min-width: 768px) {
  .event-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
  }
}

@media (min-width: 1024px) {
  .event-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.event-card {
  overflow: hidden;
  border-radius: 8px;
}

.event-card__link {
  display: block;
}

.event-card__thumbnail {
  aspect-ratio: 330 / 200;
  overflow: hidden;
}

.event-card__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* More Button - Figma spec: 130x36px, white border, rounded */
.more-button {
  display: inline-block;
  padding: 7px 25px;
  border: 1px solid var(--color-monotone-0);
  border-radius: 30px;
  color: var(--color-monotone-0);
  font-size: var(--font-size-md);
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.more-button:hover {
  background-color: var(--color-monotone-0);
  color: var(--color-violet-200);
}

.front-section__action {
  text-align: center;
  margin-top: var(--spacing-lg);
}

/* Event Sections - Figma spec E-003: Upcoming/Past separation */
.event-section {
  margin-bottom: var(--spacing-xxl);
}

.event-section--past .archive-header {
  margin-top: var(--spacing-xl);
}

.event-more {
  text-align: center;
  padding: var(--spacing-xl) 0;
}

/* ==========================================================================
   Mucchujin Cards (Encyclopedia) - Horizontal Scroll Carousel
   ========================================================================== */

/* Horizontal scroll carousel - Figma spec */
.mucchujin-carousel {
  display: flex;
  gap: var(--spacing-md);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 30px var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  scrollbar-width: none; /* Firefox */
}

.mucchujin-carousel::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.mucchujin-carousel .mucchujin-card {
  flex: 0 0 100px;
  scroll-snap-align: start;
}

/* Mucchujin Grid - Figma spec M-003: 3-column, 112-120px cards */
.mucchujin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 13px;
  margin-bottom: var(--spacing-xl);
}

.mucchujin-grid .mucchujin-card {
  width: 100%;
  max-width: 120px;
}

.mucchujin-card {
  transition: transform 0.2s ease;
}

.mucchujin-card:hover {
  transform: scale(1.02);
}

.mucchujin-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Squircle frame with yellow border - Figma spec: 112x138px card */
.mucchujin-card__thumbnail {
  position: relative;
  width: 100%;
  max-width: 112px;
  margin: 0 auto;
  padding: 2px;
  filter: drop-shadow(0 2px 0 var(--color-yellow-100))
          drop-shadow(-2px 0 0 var(--color-yellow-100))
          drop-shadow(0 -2px 0 var(--color-yellow-100))
          drop-shadow(2px 0 0 var(--color-yellow-100));
}

.mucchujin-card__thumbnail-inner {
  width: 100%;
  aspect-ratio: 1;
  background-color: var(--color-blue-200);
  clip-path: url(#mucchujin-clip);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mucchujin-card__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder when no image */
.mucchujin-card__thumbnail--empty .mucchujin-card__thumbnail-inner {
  background-color: var(--color-blue-200);
}

.mucchujin-card__placeholder {
  width: 60%;
  height: auto;
  opacity: 0.6;
}

.mucchujin-card__content {
  padding: var(--spacing-sm) 0;
  text-align: center;
}

.mucchujin-card__title {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-monotone-0);
  margin: 0;
  min-width: 140px;
  line-height: 1;
}

.mucchujin-card__category {
  font-size: var(--font-size-xxs);
  color: var(--color-monotone-300);
  margin-top: var(--spacing-xs);
}

/* SVG Clip Path Definition (hidden, for reference) */
.mucchujin-clip-svg {
  position: absolute;
  width: 0;
  height: 0;
}

/* ==========================================================================
   Video Cards
   ========================================================================== */
.video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

@media (min-width: 768px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .video-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.video-card {
  background: var(--color-monotone-0);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.video-card__link {
  display: block;
  color: inherit;
}

.video-card__thumbnail {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--color-monotone-800);
}

.video-card__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-card__play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.video-card:hover .video-card__play-icon {
  opacity: 1;
}

.video-card__content {
  padding: var(--spacing-md);
}

.video-card__title {
  font-size: var(--font-size-md);
  margin-bottom: var(--spacing-sm);
}

.video-card__date {
  font-size: var(--font-size-xs);
  color: var(--color-monotone-500);
}

/* ==========================================================================
   News List - Figma spec: dark theme with white text
   ========================================================================== */
.news-list {
  margin-bottom: var(--spacing-xl);
}

.news-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.news-item__link {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-lg);
  padding: var(--spacing-md) 0;
  color: var(--color-monotone-0);
  transition: opacity 0.2s ease;
}

.news-item__link:hover {
  opacity: 0.7;
}

.news-item__date {
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  color: var(--color-monotone-0);
}

.news-item__title {
  font-size: var(--font-size-md);
  font-weight: 400;
  margin: 0;
  color: var(--color-monotone-0);
}

@media (max-width: 767px) {
  .news-item__link {
    flex-direction: column;
    gap: var(--spacing-xs);
  }
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination,
.nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xl) 0;
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--spacing-sm);
  border-radius: 4px;
  background-color: var(--color-monotone-100);
  color: var(--color-text-body);
  font-size: var(--font-size-sm);
  transition: all 0.2s ease;
}

.page-numbers:hover {
  background-color: var(--color-monotone-200);
  color: var(--color-text-body);
}

.page-numbers.current {
  background-color: var(--color-violet-200);
  color: var(--color-monotone-0);
}

/* ==========================================================================
   Single Pages - Common
   ========================================================================== */
.entry-content {
  font-size: var(--font-size-md);
  line-height: var(--line-height-lg);
}

.entry-content p {
  margin-bottom: var(--spacing-lg);
}

.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.entry-content h2 {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
}

.entry-content h3 {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}

.post-navigation {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xxl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--color-monotone-200);
}

.post-navigation__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-md);
  background-color: var(--color-monotone-100);
  border-radius: 8px;
  color: inherit;
  transition: background-color 0.2s ease;
}

.post-navigation__link:hover {
  background-color: var(--color-monotone-200);
  color: inherit;
}

.post-navigation__link--next {
  text-align: right;
}

.post-navigation__label {
  font-size: var(--font-size-xs);
  color: var(--color-monotone-500);
}

.post-navigation__title {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-monotone-100);
  border-radius: 4px;
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
}

.back-link:hover {
  background-color: var(--color-monotone-200);
  color: var(--color-text-body);
}

/* ==========================================================================
   Single Event
   ========================================================================== */
.single-event__hero {
  width: 100%;
  max-height: 400px;
  overflow: hidden;
}

.single-event__hero img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.single-event__header {
  padding: var(--spacing-xl) 0;
  text-align: center;
}

.single-event__date {
  font-size: var(--font-size-sm);
  color: var(--color-monotone-500);
  margin-bottom: var(--spacing-sm);
}

.single-event__title {
  font-size: var(--font-size-xxxxl);
  margin-bottom: var(--spacing-md);
}

.single-event__categories {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
}

.single-event__category {
  padding: var(--spacing-xs) var(--spacing-md);
  background-color: var(--color-violet-200);
  border-radius: 20px;
  font-size: var(--font-size-xs);
  color: var(--color-monotone-0);
}

.single-event__content {
  max-width: 800px;
  margin: 0 auto var(--spacing-xl);
}

.single-event__meta {
  max-width: 800px;
  margin: 0 auto var(--spacing-xl);
  padding: var(--spacing-lg);
  background-color: var(--color-monotone-100);
  border-radius: 8px;
}

.single-event__meta-item {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-monotone-200);
}

.single-event__meta-item:last-child {
  border-bottom: none;
}

.single-event__meta-label {
  flex-shrink: 0;
  width: 100px;
  font-weight: 500;
  color: var(--color-monotone-600);
}

.single-event__nav {
  max-width: 800px;
  margin: 0 auto;
}

.single-event__back {
  text-align: center;
  padding: var(--spacing-xl) 0 var(--spacing-xxl);
}

/* ==========================================================================
   Single Mucchujin (Profile Page - mucchu.net design)
   ========================================================================== */

/* Back Navigation */
.single-mucchujin__back-nav {
  width: fit-content;
  min-width: 90px;
  padding: 12px 0;
}

.back-nav__button {
  display: inline-block;
  padding: 8px 16px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-monotone-0);
  background-color: var(--color-violet-200);
  border: 2px solid var(--color-monotone-900);
  border-radius: 20px;
  box-shadow: 0 3px 0 var(--color-monotone-900);
  text-decoration: none;
  transition: transform 0.1s, box-shadow 0.1s;
}

.back-nav__button:hover {
  transform: translateY(1px);
  box-shadow: 0 2px 0 var(--color-monotone-900);
}

.back-nav__button:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--color-monotone-900);
}

/* Layout */
.single-mucchujin__layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xxl);
  padding: var(--spacing-xl) 0;
  max-width: 840px;
  margin: 0 auto;
}

/* Profile Section */
.single-mucchujin__profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  width: 100%;
}

/* Mucchujin Icon (large squircle for single page) */
.single-mucchujin__icon {
  display: flex;
  justify-content: center;
  width: 100%;
}

.mucchujin-icon {
  width: 100%;
  max-width: 300px;
  position: relative;
  overflow: hidden;
  line-height: 0;
  padding: 4px;
  filter: drop-shadow(0 4px 0px var(--color-yellow-100))
          drop-shadow(-4px 0 0px var(--color-yellow-100))
          drop-shadow(0 -4px 0 var(--color-yellow-100))
          drop-shadow(4px 0 0 var(--color-yellow-100));
}

.mucchujin-icon--empty {
  filter: drop-shadow(0 4px 0px rgba(255, 255, 0, 0.6))
          drop-shadow(-4px 0 0px rgba(255, 255, 0, 0.6))
          drop-shadow(0 -4px 0 rgba(255, 255, 0, 0.6))
          drop-shadow(4px 0 0 rgba(255, 255, 0, 0.6));
}

.mucchujin-icon__inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-blue-200);
  clip-path: url(#mucchujin-clip);
  aspect-ratio: 1;
}

.mucchujin-icon__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mucchujin-icon__placeholder {
  width: 100%;
  height: 100%;
}

/* MucchuJinBox - styled container */
.mucchujin-box {
  width: 100%;
  padding: 15px 42px;
  border-radius: 40px;
  box-sizing: border-box;
  max-width: 95vw;
  color: var(--color-monotone-0);
  background-color: rgba(42, 59, 69, 0.8); /* blue-100 with opacity */
  border: 3px solid var(--color-monotone-900);
  box-shadow: 0 4px 0 var(--color-monotone-900);
}

.mucchujin-box--name {
  width: fit-content;
}

/* Title inside box */
.single-mucchujin__title {
  font-size: var(--font-size-xxxl);
  font-weight: 700;
  color: var(--color-monotone-0);
  margin: 0;
  text-align: center;
  line-height: var(--line-height-eq);
}

/* Slogan */
.single-mucchujin__slogan {
  font-size: var(--font-size-md);
  line-height: var(--line-height-lg);
  color: var(--color-monotone-0);
  margin: 0;
  text-align: center;
}

/* Description */
.single-mucchujin__description {
  font-size: var(--font-size-md);
  line-height: var(--line-height-lg);
  color: var(--color-monotone-0);
}

.single-mucchujin__description p {
  margin: 0;
}

.single-mucchujin__description p + p {
  margin-top: var(--spacing-md);
}

/* Content inside box */
.single-mucchujin__content {
  color: var(--color-monotone-0);
}

.single-mucchujin__content p {
  margin: 0;
}

.single-mucchujin__content p + p {
  margin-top: var(--spacing-md);
}

/* Sidebar (optional info section) */
.single-mucchujin__sidebar {
  width: 100%;
  max-width: 400px;
}

.single-mucchujin__info {
  padding: var(--spacing-md);
  background-color: rgba(42, 59, 69, 0.6);
  border-radius: 16px;
  border: 2px solid var(--color-monotone-900);
}

.single-mucchujin__info-item {
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.single-mucchujin__info-item:last-child {
  border-bottom: none;
}

.single-mucchujin__info-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-monotone-200);
  margin-bottom: var(--spacing-xs);
}

.single-mucchujin__info-value {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-monotone-0);
}

/* Related Videos */
.single-mucchujin__related {
  margin-top: var(--spacing-xxl);
  padding-top: var(--spacing-xl);
  width: 100%;
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}

.single-mucchujin__related-title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.related-videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.related-video-card {
  display: block;
  color: inherit;
}

.related-video-card__thumbnail {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: var(--spacing-sm);
}

.related-video-card__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.related-video-card__title {
  font-size: var(--font-size-sm);
}

/* Navigation */
.single-mucchujin__nav,
.single-mucchujin__back {
  padding: var(--spacing-xl) 0;
}

.single-mucchujin__back {
  text-align: center;
}

/* ==========================================================================
   Single Video
   ========================================================================== */
/* Video Comment Page (single-video) */
body.single-video {
  background-color: #1a1a2e;
}

.site-content:has(.video-comment-page) {
  max-width: 680px;
}

.video-comment-page {
  padding-bottom: 60px;
}

.video-comment-page__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.video-comment-page__video-area {
  width: 100%;
  position: relative;
}

.video-comment-page__video-area .video-bg {
  width: 100%;
  height: 100%;
  background-color: #000;
}

.video-comment-page__video-area .video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
  overflow: hidden;
}

.video-comment-page__video-area .video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-comment-page__video-area img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.video-comment-page__video-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #9d9d9d;
  font-size: 22px;
  font-weight: 900;
}

.video-comment-page__info {
  padding: 12px 20px;
}

.video-comment-page__title {
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  line-height: 22px;
  margin-bottom: 10px;
}

.video-comment-page__comment-count {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

.video-comment-page__form-section {
  background-color: #5135AF;
  padding: 15px 20px 20px;
}

.video-comment-page__form-label {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  text-align: center;
  margin-bottom: 20px;
}

.video-comment-page__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.video-comment-page__form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.video-comment-page__comments {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px;
}

.video-comment-page__more {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

/* Input Fields */
.input-field {
  background-color: #ffffff;
  border-radius: 5px;
  padding: 12px 17px;
}

.input-field--name {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
}

.input-field--comment {
  width: 100%;
  height: 150px;
  display: flex;
  align-items: flex-start;
  padding-top: 17px;
}

.input-field__input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: #000000;
  font-family: "M PLUS 1p", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 22px;
  resize: none;
}

/* Comment Cards */
.comment-card {
  display: flex;
  flex-direction: column;
  padding: 15px 19px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.comment-card:last-child {
  border-bottom: none;
}

.comment-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.comment-card__username {
  color: #ffff00;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

.comment-card__time {
  color: #ffffff;
  font-size: 12px;
  font-weight: 400;
  line-height: 22px;
}

.comment-card__text {
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  text-align: justify;
  margin-bottom: 15px;
}

/* Reaction Icons (いいね・返信) - mock common.css準拠 */
.reaction-icons {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 24px;
}

.comment-card .reaction-icons {
  align-self: flex-end;
}

.reaction-icons__item {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.reaction-icons__icon {
  width: 24px;
  height: 24px;
}

.reaction-icons__count {
  color: #ffffff;
  font-family: "M PLUS 1", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

.reaction-icons__reply {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.reaction-icons__reply-text {
  color: #ffffff;
  font-family: "M PLUS 1", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

.reaction-icons__item:hover .reaction-icons__icon,
.reaction-icons__reply:hover .reaction-icons__icon {
  opacity: 0.7;
}

.reaction-icons__item.liked .reaction-icons__icon {
  filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1700%) hue-rotate(338deg) brightness(95%) contrast(90%);
}

.reaction-icons__item.liked .reaction-icons__count {
  color: #EB5757;
}

/* Reply comment indent */
.comment-card--reply {
  margin-left: 32px;
  border-left: 2px solid rgba(255, 255, 255, 0.15);
  padding-left: 16px;
}

/* Inline reply form */
.comment-reply-form {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comment-reply-form .input-field__input {
  width: 100%;
  box-sizing: border-box;
}

.comment-reply-form .video-comment-page__form-actions {
  justify-content: flex-end;
}

/* Button - Primary */
.btn-primary {
  height: 40px;
  background-color: #f45700;
  border-radius: 23px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-primary__text {
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: 0.1px;
  text-align: center;
}

.btn-primary:hover {
  background-color: #d84e00;
}

.btn-primary:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
  opacity: 0.7;
}

.btn-primary--medium {
  width: 122px;
}

/* Button - Secondary */
.btn-secondary {
  height: 40px;
  background-color: #888888;
  border-radius: 23px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-secondary__text {
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: 0.1px;
  text-align: center;
}

.btn-secondary:hover {
  background-color: #777777;
}

.btn-secondary--medium {
  width: 122px;
}


/* ==========================================================================
   Front Page
   ========================================================================== */

/* Hero Section - Figma spec: full-width image */
.hero {
  width: 100%;
  display: block;
}

.hero__image {
  width: 100%;
  max-width: 540px;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: cover;
}

/* Front Sections */
.front-section {
  padding: var(--spacing-xxl) 0;
}

/* Events Section - dark theme with white text */
.front-section--events {
  background-color: transparent;
}

.front-section--events .front-section__title {
  color: var(--color-monotone-0);
  padding: 0 30px;
}

.front-section--events .front-section__header {
  justify-content: flex-start;
}

/* Mucchujin Section - Figma spec: horizontal carousel */
.front-section--mucchujin {
  background-color: transparent;
  padding: var(--spacing-xl) 0;
}

.front-section--mucchujin .front-section__header {
  padding: 0 30px;
  margin-bottom: var(--spacing-lg);
}

.front-section--mucchujin .front-section__title {
  color: var(--color-monotone-0);
}

.front-section--about {
  background-color: var(--color-monotone-900);
  color: var(--color-monotone-0);
}

.front-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xl);
}

.front-section__title {
  font-size: var(--font-size-xxxl);
  margin: 0;
}

.front-section--about .front-section__title {
  color: var(--color-monotone-0);
}

.front-section__more {
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.front-section__more:hover {
  color: var(--color-primary);
}

.front-section__more::after {
  content: '→';
}

/* About Block */
.about-block {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.about-block__title {
  font-size: var(--font-size-xxxl);
  color: var(--color-yellow-100);
  margin-bottom: var(--spacing-lg);
}

.about-block__text {
  font-size: var(--font-size-md);
  line-height: var(--line-height-lg);
  margin-bottom: var(--spacing-xl);
  opacity: 0.9;
}

.about-block__link {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-xl);
  border: 2px solid var(--color-monotone-0);
  border-radius: 30px;
  color: var(--color-monotone-0);
  font-size: var(--font-size-sm);
  transition: all 0.2s ease;
}

.about-block__link:hover {
  background-color: var(--color-monotone-0);
  color: var(--color-monotone-900);
}

/* ==========================================================================
   Static Pages
   ========================================================================== */

/* Default Page */
.page-header {
  padding: var(--spacing-xxl) 0 var(--spacing-xl);
  text-align: center;
}

.page-title {
  font-size: var(--font-size-xxxxl);
  margin-bottom: var(--spacing-md);
}

.page-lead {
  font-size: var(--font-size-lg);
  color: var(--color-monotone-600);
  max-width: 600px;
  margin: 0 auto;
}

.page-body {
  max-width: 800px;
  margin: 0 auto var(--spacing-xxl);
}

/* About LP Page — show header, use standard footer */
/* ヘッダーメニューは他ページと同様に表示する */

.is-about-lp .site-content {
  padding-top: 0;
  max-width: none;
}

.is-about-lp .site-main {
  padding: 0;
}

.is-about-lp .site-wrapper {
  background: var(--color-monotone-900);
}

.is-about-lp .page-about {
  margin: 0;
  padding: 0;
}

.about-lp {
  position: relative;
  background-color: #1a1a2e;
  background-image: url('assets/images/space.svg');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.about-lp::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/images/about/gradation.png');
  background-position: top left;
  background-size: auto 100%;
  background-repeat: repeat-x;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

.about-lp__inner {
  position: relative;
  z-index: 1;
}

.about-lp__logo {
  max-width: 440px;
  margin: 0 auto;
}

.about-lp__logo-svg {
  width: 100%;
  height: auto;
}

.about-lp__section {
  max-width: 660px;
  margin: 0 auto;
  padding: 48px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 24px;
}

.about-lp__section--bottom {
  padding-bottom: 160px;
}

.about-lp__text-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 24px;
}

.about-lp__text {
  color: var(--color-monotone-0);
  font-size: var(--font-size-md);
  line-height: 1.8;
  font-weight: 700;
  text-align: center;
}

.about-lp__text--lg {
  font-size: var(--font-size-lg);
}

.about-lp__text--xl {
  font-size: var(--font-size-xl);
}

.about-lp__text--xxxl {
  font-size: var(--font-size-xxxl);
  color: var(--color-monotone-0);
  font-weight: 700;
}

.about-lp__text--xxxxl {
  display: block;
  font-size: var(--font-size-xxxxl);
  color: var(--color-monotone-0);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.about-lp__text--yellow {
  color: var(--color-yellow-100);
}

.about-lp__planets {
  width: 100%;
  overflow: hidden;
  overflow-x: clip;
  overflow-y: visible;
  padding: 24px 0;
}

.about-lp__planets-track {
  display: flex;
  align-items: center;
  gap: 24px;
  animation: about-planets-scroll 50s linear infinite;
  width: max-content;
}

.about-lp__planet-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  cursor: pointer;
}

.about-lp__planet-wrap:nth-child(odd) {
  margin-top: 32px;
}

.about-lp__planet {
  transition: opacity 0.3s ease-in-out;
}

.about-lp__planet--closed {
  width: 100%;
  height: auto;
  position: relative;
}

.about-lp__planet--open {
  position: absolute;
  z-index: 1;
  right: -50px;
  bottom: 0;
  left: -50px;
  width: 200%;
  height: auto;
  margin: auto;
  opacity: 0;
}

.about-lp__planet-wrap:hover .about-lp__planet--closed {
  opacity: 0;
}

.about-lp__planet-wrap:hover .about-lp__planet--open {
  opacity: 1;
}

@keyframes about-planets-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* MucchuJin Flame frame for YouTube */
.about-lp__video-flame {
  width: 100%;
  max-width: 300px;
  padding: 4px;
  filter:
    drop-shadow(0 4px 0px var(--color-yellow-100))
    drop-shadow(-4px 0 0px var(--color-yellow-100))
    drop-shadow(0 -4px 0 var(--color-yellow-100))
    drop-shadow(4px 0 0 var(--color-yellow-100));
  position: relative;
  overflow: hidden;
  line-height: 0;
}

.about-lp__video-clip {
  width: 100%;
  aspect-ratio: 1 / 1;
  clip-path: url(#squircle-clip);
  background-color: var(--color-blue-200);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-lp__video-clip iframe {
  min-width: 290px;
  max-height: 290px;
  width: 100%;
  height: 100%;
  border: 0;
}

.about-lp__cta-btn {
  display: inline-block;
  padding: 16px 48px;
  background-color: var(--color-yellow-100);
  color: var(--color-monotone-900);
  border-radius: 30px;
  font-weight: 700;
  font-size: var(--font-size-lg);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.about-lp__cta-btn:hover {
  opacity: 0.85;
  color: var(--color-monotone-900);
}

.about-lp__lawn {
  position: relative;
  background-color: var(--color-monotone-900);
  height: 0;
}

.about-lp__lawn::before {
  content: '';
  position: absolute;
  top: -43px;
  left: 0;
  width: 100%;
  height: 44px;
  background-image: url('assets/images/about/lawn.svg'), url('assets/images/about/lawn.svg');
  background-position: top left, 12px;
  background-repeat: repeat-x;
}

.about-lp__lawn::after {
  content: '';
  position: absolute;
  top: -96px;
  left: 60px;
  width: 44px;
  height: 86px;
  background-image: url('assets/images/about/man.svg');
  background-repeat: no-repeat;
}

/* About LP - Event carousel */
.about-lp__events {
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
  padding: 48px 20px;
  background-color: var(--color-monotone-900);
}

.about-lp__events-title {
  text-align: center;
  color: var(--color-monotone-0);
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: 24px;
}

.about-lp__events-swiper {
  position: relative;
  overflow: visible;
}

.about-lp__events-swiper .swiper {
  overflow: visible;
}

.about-lp__events-swiper .swiper-slide {
  width: 80%;
}

.about-lp__events-swiper .swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.about-lp__events-swiper .swiper-pagination {
  position: relative;
  margin-top: 16px;
}

.about-lp__events-swiper .swiper-pagination-bullet {
  background: var(--color-monotone-0);
  opacity: 0.5;
}

.about-lp__events-swiper .swiper-pagination-bullet-active {
  background: var(--color-yellow-100);
  opacity: 1;
}

.about-lp__events-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-lp__events-nav--prev {
  left: 10px;
}

.about-lp__events-nav--next {
  right: 10px;
}

.about-lp__events-nav svg {
  width: 35px;
  height: 35px;
}

/* About LP — mucchu.net style footer */
.about-lp__footer {
  width: 100%;
  padding: 12px 0 24px;
  background-color: var(--color-monotone-900);
  text-align: center;
}

.about-lp__footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
}

.about-lp__footer-links a {
  color: var(--color-monotone-0);
  font-size: var(--font-size-sm);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
}

.about-lp__footer-links a:hover {
  opacity: 0.8;
}

.about-lp__footer-text {
  color: var(--color-monotone-0);
  font-size: var(--font-size-xs);
  line-height: 1.8;
}

/* Contact Page */
.contact-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  padding-bottom: var(--spacing-xxl);
}

@media (min-width: 768px) {
  .contact-content {
    grid-template-columns: 2fr 1fr;
  }
}

.contact-form {
  background-color: var(--color-monotone-100);
  padding: var(--spacing-xl);
  border-radius: 8px;
}

.contact-info {
  background-color: var(--color-monotone-0);
  padding: var(--spacing-xl);
  border: 1px solid var(--color-monotone-200);
  border-radius: 8px;
}

.contact-info__title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--color-violet-200);
}

.contact-info__item {
  margin-bottom: var(--spacing-lg);
}

.contact-info__item:last-child {
  margin-bottom: 0;
}

.contact-info__label {
  font-size: var(--font-size-xs);
  color: var(--color-monotone-500);
  margin-bottom: var(--spacing-xs);
}

.contact-info__value {
  font-size: var(--font-size-sm);
  margin: 0;
}

/* Contact Form Fields - Figma spec CF-001 */
.contact-form__group {
  margin-bottom: var(--spacing-lg);
}

.contact-form__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-monotone-0);
  margin-bottom: var(--spacing-sm);
}

.contact-form__label::before {
  content: '■';
  margin-right: var(--spacing-xs);
  color: var(--color-yellow-100);
}

.contact-form__input,
.contact-form__textarea {
  width: 100%;
  max-width: 330px;
  height: 45px;
  padding: 0 var(--spacing-md);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  background-color: var(--color-monotone-0);
  border: none;
  border-radius: 5px;
  outline: none;
}

.contact-form__input:focus,
.contact-form__textarea:focus {
  box-shadow: 0 0 0 2px var(--color-violet-200);
}

.contact-form__textarea {
  height: 150px;
  padding: var(--spacing-md);
  resize: vertical;
}

/* Contact Form Submit Button - Figma spec CF-003 */
.contact-form__submit {
  width: 110px;
  height: 40px;
  background-color: #f45700;
  color: var(--color-monotone-0);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border: none;
  border-radius: 23px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.contact-form__submit:hover {
  background-color: #e04f00;
}

.contact-form__submit:active {
  background-color: #c74600;
}

/* ==========================================================================
   Back Button - Figma spec: 110x40px, #f45700, radius 23px
   ========================================================================== */
.back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 40px;
  background-color: #f45700;
  color: var(--color-monotone-0);
  font-family: var(--font-family-rounded);
  font-size: var(--font-size-md);
  font-weight: 500;
  text-decoration: none;
  border: none;
  border-radius: 23px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.back-button:hover {
  background-color: #e04f00;
}

.back-button:active {
  background-color: #c74600;
}

/* ==========================================================================
   Single Mucchujin (Encyclopedia Detail) - Figma specs
   ========================================================================== */
.single-mucchujin {
  padding-bottom: var(--spacing-xxl);
}

.single-mucchujin .container {
  padding: 0 13px;
}

/* Profile Image - 228x228px with squircle clip */
.mucchujin-profile__image {
  display: flex;
  justify-content: center;
  padding: var(--spacing-xl) 0;
}

.mucchujin-profile__image img {
  width: 228px;
  height: 228px;
  object-fit: cover;
  clip-path: url(#mucchujin-clip);
}

/* Name Badge - 364x98px, #2a3b45, 3px black border, 40px radius */
.mucchujin-profile__name-badge {
  background-color: #2a3b45;
  border: 3px solid #000000;
  border-radius: 40px;
  padding: var(--spacing-md) var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.mucchujin-profile__name {
  font-family: var(--font-family-rounded);
  font-size: 20px;
  font-weight: 800;
  line-height: 36px;
  color: var(--color-monotone-0);
  margin: 0;
}

.mucchujin-profile__subtitle {
  font-family: var(--font-family-rounded);
  font-size: 20px;
  font-weight: 800;
  line-height: 36px;
  color: var(--color-monotone-0);
  margin: 0;
}

/* Content Boxes - #2a3b45, 3px black border, 40px radius */
.mucchujin-content-box {
  background-color: #2a3b45;
  border: 3px solid #000000;
  border-radius: 40px;
  padding: var(--spacing-lg) var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
}

.mucchujin-content-box p {
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: 30px;
  color: var(--color-monotone-0);
  margin: 0;
  text-align: justify;
}

/* Related Section Title */
.mucchujin-related__title {
  font-family: var(--font-family-rounded);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-yellow-100);
  text-shadow: 2px 2px 0 var(--color-violet-300),
               -1px -1px 0 var(--color-violet-300),
               1px -1px 0 var(--color-violet-300),
               -1px 1px 0 var(--color-violet-300);
  margin-bottom: var(--spacing-lg);
}

/* ==========================================================================
   Single News (News Detail) - Mock HTML specs
   ========================================================================== */
.news-detail-page-layout {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.news-detail-page-layout__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 0 19px;
  margin-top: 12px;
}

.news-detail-page-layout .section-title {
  margin-bottom: 20px;
}

.news-detail-page-layout .card-news-detail {
  width: 100%;
  position: relative;
  padding: 0;
  box-sizing: border-box;
  margin-bottom: 30px;
}

.news-detail-page-layout .card-news-detail__date {
  color: #ffff00;
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: left;
}

.news-detail-page-layout .card-news-detail__title {
  color: var(--color-yellow-100);
  font-family: var(--font-family-base);
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: var(--line-height-md);
  text-align: left;
  margin-top: 2em;
  margin-bottom: 1em;
}

.news-detail-page-layout .card-news-detail__content {
  width: 100%;
  color: #ffffff;
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  text-align: justify;
  margin-top: 20px;
}

.news-detail-page-layout .card-news-detail__content p {
  margin-bottom: var(--spacing-md);
}

.news-detail-page-layout .card-news-detail__content p:last-child {
  margin-bottom: 0;
}

.news-detail-page-layout .card-news-detail__content h2,
.news-detail-page-layout .card-news-detail__content h3,
.news-detail-page-layout .card-news-detail__content h4 {
  color: var(--color-yellow-100);
  margin-top: 2em;
  margin-bottom: 1em;
  font-weight: 700;
}

.news-detail-page-layout .card-news-detail__content h2 {
  font-size: var(--font-size-xl);
}

.news-detail-page-layout .card-news-detail__content h3 {
  font-size: var(--font-size-lg);
}

.news-detail-page-layout .card-news-detail__content h4 {
  font-size: var(--font-size-md);
}

.news-detail-page-layout__actions {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 30px;
}

.news-detail-page-layout__actions .btn-primary {
  position: relative;
  text-decoration: none;
  width: 110px;
}

/* ==========================================================================
   Single Event (Event Detail) - Similar to News
   ========================================================================== */
.single-event {
  padding-bottom: var(--spacing-xxl);
}

.single-event .container {
  padding: 0 19px;
}

.event-detail__header {
  margin-bottom: var(--spacing-xl);
}

.event-detail__thumbnail {
  margin-bottom: var(--spacing-lg);
}

.event-detail__thumbnail img {
  width: 100%;
  border-radius: 8px;
}

.event-detail__title {
  font-family: var(--font-family-rounded);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-monotone-0);
  line-height: 1.4;
  margin-bottom: var(--spacing-md);
}

.event-detail__meta {
  font-size: var(--font-size-sm);
  color: var(--color-monotone-400);
  margin-bottom: var(--spacing-lg);
}

.event-detail__content {
  font-size: var(--font-size-md);
  line-height: 1.8;
  color: var(--color-monotone-0);
  margin-bottom: var(--spacing-xxl);
}

.event-detail__content p {
  margin-bottom: var(--spacing-lg);
}

.event-detail__back {
  display: flex;
  justify-content: center;
  padding: var(--spacing-xl) 0;
}

/* ==========================================================================
   Legal Pages (Privacy Policy / Terms) - Figma specs PP-001, PP-002, TU-001, TU-002
   ========================================================================== */
.page-legal {
  padding-bottom: var(--spacing-xxl);
}

.page-legal .container {
  padding: 0 20px;
}

/* Page Title - Figma spec: decorative banner style */
.page-legal .page-header {
  padding: var(--spacing-xl) 0 var(--spacing-lg);
  text-align: left;
}

.page-legal .page-title {
  font-family: var(--font-family-rounded);
  font-size: var(--font-size-xxl);
  color: var(--color-yellow-100);
  margin: 0;
  font-weight: 700;
  text-shadow: 2px 2px 0 var(--color-violet-300),
               -1px -1px 0 var(--color-violet-300),
               1px -1px 0 var(--color-violet-300),
               -1px 1px 0 var(--color-violet-300);
  letter-spacing: 0.05em;
}

/* Body Content - Figma spec: white text on dark background */
.page-legal .page-body {
  font-family: "Noto Sans JP", var(--font-family-base);
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: 30px;
  color: var(--color-monotone-0);
  text-align: justify;
  margin: 0;
  max-width: 100%;
}

.page-legal .page-body p {
  margin: 0 0 var(--spacing-lg);
}

.page-legal .page-body p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Event Detail - Date Badge - Figma spec ED-002: Month/Day vertical layout
   ========================================================================== */
.single-event__date-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--color-orange-100);
  color: var(--color-monotone-0);
  border-radius: 8px;
  padding: var(--spacing-sm) var(--spacing-md);
  min-width: 60px;
  text-align: center;
  margin-bottom: var(--spacing-md);
}

.single-event__date-badge time {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.single-event__date-month {
  font-size: var(--font-size-xs);
  font-weight: 500;
  margin-bottom: 2px;
}

.single-event__date-day {
  font-size: var(--font-size-xxxl);
  font-weight: 700;
}

/* ==========================================================================
   Mucchujin Related Sections - Figma spec MD-004: Events, Videos, Uwasa
   ========================================================================== */

/* Related Events */
.single-mucchujin__related--events {
  margin-bottom: var(--spacing-xl);
}

.related-events-grid {
  padding: 0 var(--spacing-md);
}

.related-event-card {
  display: block;
}

.related-event-card__thumbnail {
  border-radius: 8px;
  overflow: hidden;
}

.related-event-card__thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}

/* Uwasa (Rumors) Section - Figma spec: yellow/gray cards */
.single-mucchujin__related--uwasa {
  margin-bottom: var(--spacing-xl);
}

.uwasa-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding: 0 var(--spacing-md);
}

.uwasa-card {
  position: relative;
  border-radius: 15px;
  padding: 25px 22px 22px;
  min-height: 178px;
}

.uwasa-card--yellow {
  background-color: #fff4b5;
}

.uwasa-card--gray {
  background-color: #8f8d7e;
}

.uwasa-card__header {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.uwasa-card__label {
  display: inline-block;
  font-family: var(--font-family-rounded);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-monotone-900);
  background-color: var(--color-monotone-0);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 20px;
  border: 2px solid var(--color-monotone-900);
}

.uwasa-card__text {
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 22px;
  color: var(--color-monotone-900);
  margin: var(--spacing-lg) 0 0;
  text-align: left;
}

/* ==========================================================================
   Meby Overlay Navigation (MO-001)
   ========================================================================== */
.meby-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--color-monotone-900);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow: hidden;
}

.meby-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.meby-overlay__inner {
  width: 100%;
  max-width: 390px;
  padding: var(--spacing-xl);
  padding-top: 113px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
}

/* Close Button */
.meby-overlay__close {
  position: absolute;
  top: 36px;
  right: 32px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.overlay-close__circle {
  width: 40px;
  height: 40px;
  background-color: #8f4dd8;
  border: 2px solid #ffffff;
  border-radius: 50%;
}

.overlay-close__icon {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 8px;
  top: 8px;
}

/* Menu Items */
.meby-overlay__menu {
  list-style: none;
  margin: 77px 0 0;
  padding: 0;
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.meby-overlay__item {
  width: 100%;
}

.meby-overlay__link {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  background-color: var(--color-orange-100);
  border-radius: 30px;
  padding: 0 var(--spacing-md);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.meby-overlay__link:hover {
  background-color: var(--color-orange-600);
}

.meby-overlay__icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-sm);
  color: var(--color-monotone-0);
}

.meby-overlay__icon svg {
  width: 24px;
  height: 24px;
}

.meby-overlay__icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.meby-overlay__text {
  font-family: var(--font-family-rounded);
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--color-monotone-0);
  line-height: 22px;
}

/* Footer Links */
.meby-overlay__footer {
  margin-top: auto;
  padding-bottom: 120px;
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
}

.meby-overlay__footer-link {
  font-family: var(--font-family-rounded);
  font-size: var(--font-size-xs);
  font-weight: 400;
  color: var(--color-monotone-0);
  text-decoration: none;
  line-height: 18px;
}

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

/* ==========================================================================
   Mobile Top Page - Figma Mock Styles
   ========================================================================== */

/* Section Title - Figma spec: yellow text with dots decoration */
.section-title {
  position: relative;
  width: 100%;
  max-width: 352px;
  height: 44px;
  background-color: transparent;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: var(--spacing-xl) auto var(--spacing-lg);
}

.section-title__dots {
  width: 100%;
  height: 40px;
  position: absolute;
  left: 0;
  top: 4px;
}

.section-title__text {
  position: relative;
  color: var(--color-yellow-100);
  -webkit-text-stroke: 4px #5135ac;
  paint-order: stroke fill;
  font-family: var(--font-family-rounded);
  font-size: var(--font-size-xxl);
  font-weight: 900;
  line-height: 22px;
  text-align: center;
  margin: 0;
}

/* Mobile Top Page Section */
.mobile-top-page__section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 19px;
  margin-bottom: 30px;
}

.mobile-top-page__section--with-agent {
  position: relative;
}

/* Event List */
.mobile-top-page__event-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 0 11px;
  margin-bottom: 20px;
}

.mobile-top-page__event-link {
  display: block;
}

.mobile-top-page__event-thumbnail {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

.mobile-top-page__event-thumbnail--placeholder {
  background-color: var(--color-monotone-40);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-top-page__event-placeholder-text {
  color: var(--color-monotone-0);
  font-size: var(--font-size-md);
  font-weight: 500;
  text-align: center;
  padding: var(--spacing-md);
}

@media (min-width: 769px) {
  .mobile-top-page__event-thumbnail {
    max-width: 500px;
  }
}

/* More Button Container */
.mobile-top-page__more {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

/* Ghost Button - Figma spec: 130x36px, white border, rounded */
.btn-ghost {
  width: 130px;
  height: 36px;
  border: 1px solid var(--color-monotone-0);
  border-radius: 30px;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.btn-ghost__text {
  color: var(--color-monotone-0);
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: 22px;
  text-align: center;
}

.btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Mucchujin List - 3x3 Grid */
.mucchujin-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 10px;
  width: 100%;
  padding: 0 17px;
  box-sizing: border-box;
}

.mucchujin-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 10px;
  text-decoration: none;
}

.mucchujin-item__icon-wrapper {
  position: relative;
  width: 90px;
  height: 90px;
  min-height: 90px;
  padding: 4px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  filter: drop-shadow(0 4px 0px var(--color-yellow-100))
          drop-shadow(-4px 0 0px var(--color-yellow-100))
          drop-shadow(0 -4px 0 var(--color-yellow-100))
          drop-shadow(4px 0 0 var(--color-yellow-100));
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.mucchujin-item__icon {
  width: 90px;
  height: 90px;
  min-height: 90px;
  overflow: hidden;
  background-color: var(--color-blue-100);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  clip-path: url(#mucchujin-clip);
}

.mucchujin-item__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mucchujin-item__name {
  color: var(--color-monotone-0);
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: 17px;
  text-align: center;
  margin: 0;
}

/* Agent Speech Bubble */
.mobile-top-page__agent-area {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-right: 24px;
}

.agent-speech-bubble {
  width: 246px;
  height: 52px;
  background-color: var(--color-monotone-0);
  border-radius: 9999px 0 9999px 9999px;
  display: flex;
  align-items: center;
  padding: 15px 25px;
}

.agent-speech-bubble__text {
  color: var(--color-text-body);
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  margin: 0;
}

.agent-hover {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}

.agent-hover img {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   News List Page - Figma spec
   ========================================================================== */
.news-list-page {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .news-list-page {
    max-width: 680px;
  }
}

.news-list-page__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}

.news-list-page .section-title {
  margin-bottom: 20px;
}

.news-list-page .card-news-list {
  padding: 0 19px;
}

.news-list-page__pagination {
  color: var(--color-monotone-0);
  font-family: var(--font-family-base);
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  margin: 30px auto;
}

/* Override site-content max-width for news list page */
.site-content:has(.news-list-page) {
  max-width: 680px;
}

/* Card News List */
.card-news-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 0;
  width: 100%;
}

.card-news {
  width: 100%;
  min-height: 65px;
  position: relative;
  background-color: var(--color-monotone-40);
  border-radius: 10px;
  padding: 10px 21px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.card-news:hover {
  background-color: #6e7072;
}

@media (min-width: 769px) {
  .card-news {
    max-width: 600px;
  }
}

.card-news__date {
  width: 70px;
  color: var(--color-yellow-100);
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 22px;
  text-align: left;
  flex-shrink: 0;
}

.card-news__title {
  flex: 1;
  min-width: 0;
  color: var(--color-monotone-0);
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 20px;
}


/* Font Rounded Utility */
.font-rounded {
  font-family: var(--font-family-rounded);
}

/* ==========================================================================
   Encyclopedia List Page - Figma Mock Styles
   ========================================================================== */

/* Encyclopedia List Page Layout */
.encyclopedia-list-page-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .encyclopedia-list-page-layout {
    max-width: 680px;
  }
}

.encyclopedia-list-page-layout__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 19px;
  flex: 1;
}

/* Zukan Logo */
.zukan-logo {
  width: 300px;
  margin: 0 auto 30px;
}

.zukan-logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Mucchujin Item Label (for encyclopedia list) */
.mucchujin-item__label {
  color: var(--color-monotone-0);
  font-size: 10px;
  font-weight: 500;
  line-height: 17px;
  text-align: center;
  margin: 0;
}

/* ==========================================================================
   Encyclopedia Detail Page - Figma Mock Styles
   ========================================================================== */

/* Encyclopedia Detail Page Layout */
.encyclopedia-detail-page {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  margin: 0 auto;
  border-radius: 20px;
  overflow-x: hidden;
}

@media (min-width: 769px) {
  .encyclopedia-detail-page {
    max-width: 680px;
  }
}

.encyclopedia-detail-page__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  margin-top: 30px;
  flex: 1;
}

.encyclopedia-detail-page__section {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

.encyclopedia-detail-page__section .section-title {
  margin-bottom: 20px;
}

.encyclopedia-detail-page__event-link {
  display: block;
  text-align: center;
}

.encyclopedia-detail-page__event-thumbnail {
  max-width: 500px;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

.encyclopedia-detail-page__rumors {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

/* おすすめ動画グリッド */
.encyclopedia-detail-page__videos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
}

@media (min-width: 769px) {
  .encyclopedia-detail-page__videos-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* おすすめ動画リンク */
.encyclopedia-detail-page__video-link {
  display: block;
  width: 100%;
  margin: 0 auto 24px;
  border-radius: 8px;
  overflow: hidden;
}

.encyclopedia-detail-page__video-link:last-child {
  margin-bottom: 0;
}

.encyclopedia-detail-page__videos-grid .encyclopedia-detail-page__video-link {
  margin-bottom: 16px;
  max-width: none;
}

@media (min-width: 769px) {
  .encyclopedia-detail-page__video-link {
    max-width: 500px;
  }

  .encyclopedia-detail-page__videos-grid .encyclopedia-detail-page__video-link {
    margin-bottom: 20px;
    max-width: none;
  }
}

.encyclopedia-detail-page__video-link img {
  width: 100%;
  height: auto;
  display: block;
}

.encyclopedia-detail-page__video-placeholder {
  width: 100%;
  padding-bottom: 56.25%;
  background-color: #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9d9d9d;
  font-size: 22px;
  font-weight: 900;
  border: none;
}


/* Mucchujin Profile - Detail Page */
.mucchujin-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 24px;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.mucchujin-profile__icon-wrapper {
  position: relative;
  width: 228px;
  height: 228px;
  min-height: 228px;
  padding: 4px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  filter: drop-shadow(0 4px 0px var(--color-yellow-100))
          drop-shadow(-4px 0 0px var(--color-yellow-100))
          drop-shadow(0 -4px 0 var(--color-yellow-100))
          drop-shadow(4px 0 0 var(--color-yellow-100));
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.mucchujin-profile__icon {
  width: 228px;
  height: 228px;
  min-height: 228px;
  overflow: hidden;
  background-color: var(--color-blue-100);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  clip-path: url(#mucchujin-clip);
}

.mucchujin-profile__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mucchujin Box - Styled Container */
.mucchujin-box {
  width: 100%;
  padding: 15px 42px;
  border-radius: 40px;
  box-sizing: border-box;
  max-width: 95vw;
  color: var(--color-monotone-0);
  background-color: rgba(42, 59, 69, 0.8);
  border: 3px solid var(--color-monotone-900);
  box-shadow: 0 4px 0 var(--color-monotone-900);
  text-align: center;
}

.mucchujin-box--fit-content {
  width: fit-content;
}

.mucchujin-box__title {
  color: var(--color-monotone-0);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  margin: 0;
}

.mucchujin-box__text {
  font-family: "Noto Sans JP", var(--font-family-base);
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: 30px;
  text-align: left;
  margin: 0;
}

.mucchujin-box__profile {
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: 30px;
  text-align: left;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}

.mucchujin-box__text a,
.mucchujin-box__profile a {
  color: #1a0dab;
  text-decoration: underline;
}

/* Rumor Card */
.rumor-card {
  width: 344px;
  max-width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* PC表示時: ウワサの幅を上部コンテンツと同じ幅に */
@media (min-width: 769px) {
  .rumor-card {
    width: 100%;
  }
}

.rumor-card__box {
  width: 100%;
  border-radius: 15px;
  padding: 42px 22px 20px;
  margin-top: 25px;
}

.rumor-card__box--yellow {
  background-color: #fff4b5;
}

.rumor-card__box--gray {
  background-color: #8f8d7e;
}

.rumor-card__text {
  color: var(--color-monotone-900);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.rumor-card__text a {
  color: #1a0dab;
  text-decoration: underline;
}

.rumor-card__title-image {
  width: 110px;
  height: 56px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* Video Placeholder */
.video-placeholder {
  width: 100%;
  height: auto;
  aspect-ratio: 352 / 198;
  background-color: #d9d9d9;
  position: relative;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .video-placeholder {
    max-width: none;
  }
}

.video-placeholder__text {
  position: absolute;
  width: 176px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #9d9d9d;
  font-family: var(--font-family-rounded);
  font-size: var(--font-size-xxl);
  font-weight: 900;
  line-height: 22px;
  text-align: center;
  margin: 0;
}

.video-placeholder--has-image {
  background-color: transparent;
  overflow: hidden;
  aspect-ratio: auto;
  height: auto;
}

.video-placeholder__thumbnail {
  width: 100%;
  height: auto;
  display: block;
}

.video-placeholder__play-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  transition: background-color 0.2s;
}

.event-detail-page__video-link {
  display: block;
  text-decoration: none;
  margin-left: 11px;
}

.event-detail-page__video-link .video-placeholder {
  margin-left: 0;
}

.event-detail-page__video-link:hover .video-placeholder__play-icon {
  background-color: rgba(0, 0, 0, 0.8);
}

/* ==========================================================================
   Event Detail Page (single-event.php)
   ========================================================================== */
.event-detail-page {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  margin: 0 auto;
  background-color: var(--color-bg-dark);
  border-radius: 20px;
}

@media (min-width: 769px) {
  .event-detail-page {
    max-width: 680px;
  }
}

.event-detail-page__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 0 19px;
  margin-top: 86px;
  flex: 1;
}

.event-detail-page__thumbnail-wrapper {
  width: 100%;
  max-width: 500px;
  margin: 0 auto 30px;
}

.event-detail-page__thumbnail {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
}

.event-detail-page__section {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

.event-detail-page__section .section-title {
  margin-bottom: 20px;
}

.event-detail-page__description {
  width: calc(100% - 22px);
  color: #ffffff;
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  text-align: justify;
  margin-left: 11px;
}

@media (min-width: 769px) {
  .event-detail-page__description {
    max-width: 600px;
  }
}

/* Event Info Table */
.event-info-table {
  display: flex;
  flex-direction: column;
  margin-left: 11px;
  margin-bottom: 20px;
}

.event-info-table__row {
  display: flex;
  gap: 24px;
  padding: 10px 0;
  border-bottom: 1px solid #ffffff;
}

.event-info-table__row:last-child {
  border-bottom: none;
}

.event-info-table__label {
  min-width: 48px;
  color: #ffffff;
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 800;
  line-height: 22px;
}

.event-info-table__value {
  color: #ffffff;
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

/* YouTube Video Embed */
.event-detail-page__video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  margin: 0 auto;
  background-color: #d9d9d9;
}

@media (min-width: 769px) {
  .event-detail-page__video {
    max-width: 500px;
  }
}

.event-detail-page__video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}


/* Carousel (Recommend Events) */
.event-detail-page__carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
}

.event-detail-page__carousel-image {
  width: 100%;
  height: auto;
  aspect-ratio: 250 / 152;
  object-fit: cover;
}

@media (min-width: 769px) {
  .event-detail-page__carousel-image {
    max-width: 400px;
  }
}

.event-detail-page__carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.carousel-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #858585;
}

.carousel-dot--active {
  background-color: var(--color-yellow-100);
}

/* Recommend Swiper (similar to about-lp) */
.event-recommend-swiper .swiper-slide {
  display: flex;
  justify-content: center;
  width: 100%;
}

.event-recommend-swiper .swiper-slide a {
  display: block;
}

.event-recommend-swiper .swiper-slide img {
  max-width: 500px;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

.event-recommend-swiper .swiper-pagination {
  position: relative;
  margin-top: 15px;
}

.event-recommend-swiper .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background-color: #858585;
  opacity: 1;
}

.event-recommend-swiper .swiper-pagination-bullet-active {
  background-color: var(--color-yellow-100);
}

/* Single Recommend (1件のみの場合) */
.event-detail-page__single-recommend {
  display: flex;
  justify-content: center;
}

.event-detail-page__single-recommend a {
  display: block;
  max-width: 500px;
}

.event-detail-page__single-recommend img {
  max-width: 500px;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

/* ==========================================================================
   Mucchujin Detail Card (Event Detail Page)
   ========================================================================== */
.mucchujin-detail-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 352px;
  max-width: 100%;
  height: 122px;
  margin: 0 auto 30px;
  background-color: #5135af;
  border-radius: 12px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.mucchujin-detail-card:hover {
  opacity: 0.85;
}

.mucchujin-detail-card__text {
  color: #ffffff;
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.mucchujin-detail-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 170px;
  height: 40px;
  background-color: var(--color-orange-100);
  border-radius: 20px;
  color: #ffffff;
  font-family: var(--font-family-rounded);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.mucchujin-detail-card__icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* ==========================================================================
   Contact Form Page Layout - Figma Mock Style
   ========================================================================== */
.contact-form-page-layout {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  margin: 0 auto;
  background-color: var(--color-bg-dark);
  border-radius: 20px;
}

@media (min-width: 769px) {
  .contact-form-page-layout {
    max-width: 680px;
  }
}

.contact-form-page-layout__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 0 19px;
  flex: 1;
}

.contact-form-page-layout .section-title {
  margin-bottom: 20px;
}

.contact-form-page-layout__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form-page-layout .form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 0;
}

.contact-form-page-layout .form-group__label {
  color: var(--color-monotone-0);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 22px;
  margin-bottom: 0;
}

.contact-form-page-layout .form-group__input {
  width: 100%;
  height: 36px;
  background-color: var(--color-monotone-0);
  border-radius: 5px;
  border: none;
  padding: 0 10px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
}

@media (min-width: 769px) {
  .contact-form-page-layout .form-group__input {
    max-width: 500px;
  }
}

.contact-form-page-layout .form-group__textarea {
  width: 100%;
  height: 166px;
  background-color: var(--color-monotone-0);
  border-radius: 5px;
  border: none;
  padding: 10px;
  resize: none;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
}

@media (min-width: 769px) {
  .contact-form-page-layout .form-group__textarea {
    max-width: 500px;
  }
}

.contact-form-page-layout .form-group__note {
  color: var(--color-yellow-100);
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 500;
  line-height: 22px;
  margin-top: 5px;
}

.contact-form-page-layout__actions {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

.contact-form-page-layout .btn-primary {
  height: 40px;
  width: 110px;
  position: static;
  background-color: #f45700;
  border-radius: 23px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-form-page-layout .btn-primary:hover {
  background-color: #da4e00;
}

.contact-form-page-layout .btn-primary__text {
  color: #ffffff;
  font-family: var(--font-family-rounded);
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: 0.1px;
  text-align: center;
}

/* Contact Form 7 Styles */
.contact-form-page-layout .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form-page-layout .wpcf7-form p {
  margin: 0;
}

.contact-form-page-layout .wpcf7-form label {
  display: block;
  color: var(--color-monotone-0);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 22px;
  margin-bottom: 5px;
}

.contact-form-page-layout .wpcf7-form input[type="text"],
.contact-form-page-layout .wpcf7-form input[type="email"] {
  width: 100%;
  height: 36px;
  background-color: var(--color-monotone-0);
  border-radius: 5px;
  border: none;
  padding: 0 10px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
}

.contact-form-page-layout .wpcf7-form textarea {
  width: 100%;
  height: 166px;
  background-color: var(--color-monotone-0);
  border-radius: 5px;
  border: none;
  padding: 10px;
  resize: none;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
}

.contact-form-page-layout .wpcf7-form .form-note {
  color: var(--color-yellow-100);
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 500;
  line-height: 22px;
  margin-top: 5px;
}

.contact-form-page-layout .wpcf7-form input[type="submit"] {
  height: 40px;
  width: 110px;
  background-color: #f45700;
  border-radius: 23px;
  border: none;
  cursor: pointer;
  color: #ffffff;
  font-family: var(--font-family-rounded);
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: 0.1px;
  text-align: center;
  margin: 0 auto;
  display: block;
}

.contact-form-page-layout .wpcf7-form input[type="submit"]:hover {
  background-color: #da4e00;
}

.contact-form-page-layout .wpcf7 form .wpcf7-response-output {
  color: var(--color-monotone-0);
  border-color: var(--color-yellow-100);
  margin: 0;
}

.contact-form-page-layout .wpcf7-not-valid-tip {
  color: #ff6b6b;
  font-size: 12px;
  margin-top: 5px;
}

.contact-form-page-layout .required-mark {
  color: #ff6b6b;
}

.contact-form-page-layout .hidden-fields-container {
  border: none;
}

.contact-form-page-layout .screen-reader-response {
  color: #ff6b6b;
}

/* ==========================================================================
   Events List Page - Figma spec
   ========================================================================== */
.events-list-page {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  margin: 0 auto;
  background-color: var(--color-bg-dark);
  border-radius: 20px;
}

@media (min-width: 769px) {
  .events-list-page {
    max-width: 680px;
  }
}

.events-list-page__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 0 19px;
  margin-top: 12px;
  flex: 1;
}

.events-list-page__section {
  margin-bottom: 30px;
}

.events-list-page__section .section-title {
  margin-bottom: 20px;
}

.events-list-page__event-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 0 11px;
}

.events-list-page__event-link {
  display: block;
  transition: opacity 0.2s ease;
}

.events-list-page__event-link:hover {
  opacity: 0.8;
}

.events-list-page__event-thumbnail {
  max-width: 500px;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

.events-list-page__no-posts {
  color: var(--color-monotone-0);
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  text-align: center;
  padding: 20px;
}

.events-list-page__more {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}


/* btn-ghost - Ghost button style */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 36px;
  border: 1px solid var(--color-monotone-0);
  border-radius: 30px;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.btn-ghost__text {
  color: var(--color-monotone-0);
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: 22px;
  text-align: center;
}

.btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   Legal Page - Terms and Privacy Policy (Figma Mock Styles)
   ========================================================================== */

.legal-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.legal-page__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  margin-top: 12px;
  flex: 1;
}

.legal-page .section-title {
  position: relative;
  margin-bottom: 20px;
}

.legal-page__text {
  width: 100%;
  color: var(--color-monotone-0);
  font-family: 'Noto Sans JP', var(--font-family-base);
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: 30px;
  text-align: justify;
  padding-bottom: 40px;
}

@media (min-width: 769px) {
  .legal-page__text {
    max-width: 600px;
    margin: 0 auto;
  }
}

/* Style for content within legal page */
.legal-page__text p {
  margin-bottom: 1.5em;
}

.legal-page__text h2,
.legal-page__text h3,
.legal-page__text h4 {
  color: var(--color-yellow-100);
  margin-top: 2em;
  margin-bottom: 1em;
  font-weight: 700;
}

.legal-page__text h2 {
  font-size: var(--font-size-xl);
}

.legal-page__text h3 {
  font-size: var(--font-size-lg);
}

.legal-page__text h4 {
  font-size: var(--font-size-md);
}

.legal-page__text ul,
.legal-page__text ol {
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.legal-page__text li {
  margin-bottom: 0.5em;
}

/* ==========================================================================
   Generic Page Template (.page-content)
   ========================================================================== */

.page-content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.page-content__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  margin-top: 12px;
  flex: 1;
}

.page-content__text {
  width: 100%;
  color: var(--color-monotone-0);
  font-family: 'Noto Sans JP', var(--font-family-base);
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: 30px;
  text-align: justify;
  padding-bottom: 40px;
}

@media (min-width: 769px) {
  .page-content__text {
    max-width: 600px;
    margin: 0 auto;
  }
}

.page-content__text p {
  margin-bottom: 1.5em;
}

.page-content__text h2,
.page-content__text h3,
.page-content__text h4 {
  color: var(--color-yellow-100);
  margin-top: 2em;
  margin-bottom: 1em;
  font-weight: 700;
}

.page-content__text h2 {
  font-size: var(--font-size-xl);
}

.page-content__text h3 {
  font-size: var(--font-size-lg);
}

.page-content__text h4 {
  font-size: var(--font-size-md);
}

.page-content__text ul,
.page-content__text ol {
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.page-content__text li {
  margin-bottom: 0.5em;
}

.page-content__text a {
  color: var(--color-yellow-100);
  text-decoration: underline;
}

.page-content__text a:hover {
  opacity: 0.8;
}

/* ==========================================================================
   Design Adjustments - 2026-02 Updates
   ========================================================================== */

/* 1. 画面遷移白フラッシュの解消 - html/bodyに背景色を設定 */
html {
  background-color: #1a1040;
}

body {
  background-color: #1a1040;
}

/* 2. ヘッダー紫色 - 濃い紫はスマホのカメラエリア（safe-area）のみ */
/* スマホ: ノッチ領域（セーフエリア上部）のみ濃い紫に */
@supports (padding-top: env(safe-area-inset-top)) {
  .site-header--two-row {
    padding-top: env(safe-area-inset-top);
    background-color: var(--header-top-bg);
  }
}

/* PC（769px以上）: 上段バーを非表示、セーフエリア不要 */
@media (min-width: 769px) {
  .header-top-bar {
    display: none;
  }

  .site-header--two-row {
    padding-top: 0;
    background-color: transparent;
  }
}

/* 3. エージェント下部固定フローティング */
.floating-agent {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.floating-agent__bubble {
  max-width: 246px;
  background-color: var(--color-monotone-0);
  border-radius: 9999px 0 9999px 9999px;
  padding: 12px 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.floating-agent__text {
  color: var(--color-text-body);
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  margin: 0;
}

.floating-agent__icon {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.floating-agent__icon:hover {
  transform: scale(1.05);
}

.floating-agent__icon img {
  width: 100%;
  height: 100%;
  display: block;
}

/* スマホではセーフエリア下部も考慮 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .floating-agent {
    bottom: calc(20px + env(safe-area-inset-bottom));
  }
}

/* 4. PC専用: ホーム・図鑑のムッチュー人サイズ調整 */
@media (min-width: 769px) {
  /* ホームページ・図鑑共通: ムッチュー人アイコンを大きく */
  .mucchujin-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 20px;
    max-width: 600px;
    margin: 0 auto;
  }

  .mucchujin-item__icon-wrapper {
    width: 150px;
    height: 150px;
    padding: 6px;
  }

  .mucchujin-item__icon {
    width: 150px;
    height: 150px;
  }

  /* 名前のサイズ調整 */
  .mucchujin-item__name {
    font-size: var(--font-size-lg);
    line-height: 1.3;
  }

  /* 星（ラベル）のサイズ調整 */
  .mucchujin-item__label {
    font-size: var(--font-size-sm);
    line-height: 1.3;
  }

  /* ホームのおすすめセクションの調整 */
  .front-page .mucchujin-list {
    padding: 0 40px;
  }
}

/* ==========================================================================
   Comment Menu & Report Dialog
   ========================================================================== */

/* Comment Card Header - position relative for menu */
.comment-card__header {
  position: relative;
}

/* Menu Button (⋮) */
.comment-card__menu-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  margin-left: auto;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.comment-card__menu-btn:hover {
  opacity: 1;
}

/* Dropdown Menu */
.comment-card__menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--color-monotone-800);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  min-width: 100px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.comment-card__menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.comment-card__menu-item {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--color-monotone-0);
  font-size: var(--font-size-sm);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}

.comment-card__menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.comment-card__menu-item:first-child {
  border-radius: 8px 8px 0 0;
}

.comment-card__menu-item:last-child {
  border-radius: 0 0 8px 8px;
}

.comment-card__menu-item:only-child {
  border-radius: 8px;
}

/* Report Dialog */
.report-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.report-dialog.is-open {
  opacity: 1;
  visibility: visible;
}

.report-dialog__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}

.report-dialog__content {
  position: relative;
  background: var(--color-monotone-700);
  border-radius: 16px;
  padding: 24px;
  max-width: 400px;
  width: calc(100% - 32px);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.report-dialog.is-open .report-dialog__content {
  transform: scale(1);
}

.report-dialog__title {
  color: var(--color-monotone-0);
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin: 0 0 8px;
}

.report-dialog__desc {
  color: var(--color-monotone-200);
  font-size: var(--font-size-sm);
  margin: 0 0 20px;
}

.report-dialog__options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.report-dialog__option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.report-dialog__option:hover {
  background: rgba(255, 255, 255, 0.1);
}

.report-dialog__option input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.report-dialog__option span {
  color: var(--color-monotone-0);
  font-size: var(--font-size-sm);
}

.report-dialog__detail {
  margin-bottom: 16px;
}

.report-dialog__detail textarea {
  width: 100%;
  min-height: 80px;
  resize: vertical;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 12px;
  color: var(--color-monotone-0);
  font-size: var(--font-size-sm);
}

.report-dialog__detail textarea::placeholder {
  color: var(--color-monotone-400);
}

.report-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.report-dialog__message {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: var(--font-size-sm);
  text-align: center;
}

.report-dialog__message--success {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
}

.report-dialog__message--error {
  background: rgba(235, 87, 87, 0.2);
  color: #eb5757;
}