/*
Theme Name: haiboku
Theme URI: https://example.com/
Author: あなたの名前
Description: モックデザインと管理性を両立した WordPress テーマ
Version: 2.0 (Ultimate Detox)
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/* ==========================================================================
   1. Design System (CSS Variables)
   ========================================================================== */
:root {
  /* Colors - サイトの「魂」をここで一元管理 */
  --site-bg: #000000;
  --site-text: #ffffff;
  --site-text-muted: rgba(255, 255, 255, 0.7);
  --accent-color: #e75480;
  --border-color: #333333;
  --card-bg: #111111;
  
  /* Background Effects */
  --use-stripe: 0;
  --stripe-pattern: repeating-linear-gradient(to right, #a00 0 40px, #060 40px 80px, #000 80px 120px, #fc0 120px 160px);

  /* Layout */
  --container-width: 1100px;
  --header-height: 70px;
}

/* ==========================================================================
   2. Base Reset & Typography
   ========================================================================== */
body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
  background-color: var(--site-bg);
  color: var(--site-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ストライプオーバーレイ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--stripe-pattern);
  opacity: calc(var(--use-stripe) * 0.08);
  pointer-events: none;
  display: block;
}

/* 親サイトの!important地獄を中和するための基本定義 */
a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.8;
}

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

/* ==========================================================================
   3. Main Structural Elements
   ========================================================================== */
.site-header {
  background-color: var(--site-bg);
  border-bottom: 1px solid var(--border-color);
  padding: 15px 0;
}

.main-content {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 40px 20px;
}

.site-footer {
  background-color: var(--site-bg);
  color: var(--site-text);
  border-top: 1px solid var(--border-color);
  padding: 40px 20px;
  text-align: center;
}

/* ==========================================================================
   4. Shared Components (Cards, Sections)
   ========================================================================== */
.cast-card, 
.info-box,
.content-section {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.accent-btn {
  background-color: var(--accent-color);
  color: #fff;
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: bold;
  display: inline-block;
}

/* ==========================================================================
   5. Utility Classes
   ========================================================================== */
.text-center { text-align: center; }
.mt-20 { margin-top: 20px; }

/* レスポンシブ */
@media (max-width: 768px) {
  .site-footer .footer-top {
    flex-direction: column;
    align-items: center;
  }
}