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

/* ============================================================
   site-base.css — Kino Studio 共通デザイン基盤
   全ページ共通のカラートークン・フォント・ヘッダー・フッター。
   各ページ用CSSはこのファイルを @import して使う。

   注意: --clr-* / --ff-* トークンはブログ本文・一覧・コレクション一覧が
   全面的に依存している。消さない・値を変えないこと。
   BRIGHT WALL 用のトークンは別系統（--wall / --ink / 作品カラー）として追加する。
   ============================================================ */

:root {
  /* ---- ベース（SITE_OVERVIEW 準拠の元パレット） ---- */
  --clr-base:       #dce6e2;
  --clr-base-warm:  #e8e0d4;
  --clr-base-cool:  #cddadf;
  --clr-paper:      #f3ede3;
  --clr-paper-alt:  #eee8db;

  /* ---- アクセント（作品カラー） ---- */
  --clr-blue:       #4a7fa5;  /* Blog・旅の空色 */
  --clr-blue-light: #a3c8de;
  --clr-red:        #c44b3a;  /* 紅鱗録・炎 */
  --clr-yellow:     #d4a843;  /* グラニ・星・光 */
  --clr-orange:     #d4723a;  /* Reiage・夕焼け */
  --clr-beige:      #b89a72;  /* 地図・共通装飾 */
  --clr-green:      #5a9e6f;  /* 5個目以降の作品（予約） */
  --clr-purple:     #8b6fbf;  /* 6個目以降の作品（予約） */

  /* ---- テキスト ---- */
  --clr-ink:        #2c2a26;
  --clr-ink-muted:  #5a5650;

  /* ---- フォント ----
     --ff-display : 大見出し・サイトクローム（sans）
     --ff-title   : 記事・カードタイトル（serif）
     --ff-body    : 本文
     --ff-mono    : 日付・ラベル・コード                      */
  --ff-display: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", sans-serif;
  --ff-title:   Georgia, "Times New Roman", "Hiragino Mincho ProN", serif;
  --ff-body:    "Segoe UI", system-ui, -apple-system, "Hiragino Sans", sans-serif;
  --ff-mono:    "Consolas", "SFMono-Regular", "Courier New", monospace;

  /* ---- シェイプ ---- */
  --radius-circle: 50%;
  --radius-card:   14px;
  --radius-sm:     6px;
  --shadow-soft:   0 2px 20px rgba(44, 42, 38, .08);
  --shadow-lift:   0 8px 32px rgba(44, 42, 38, .14);
  --shadow-glow:   0 0 24px rgba(74, 127, 165, .2);

  /* ---- 罫線 ---- */
  --line-soft: rgba(184, 154, 114, .18);
  --line-mid:  rgba(184, 154, 114, .35);

  --header-height: 56px;
  --max-width: 1160px;

  /* ============================================================
     BRIGHT WALL トークン
     トップページ（明るいコンクリート壁）と、全ページ共通クローム（黒帯）で使う。
     作品カラーは各作品の style.css からそのまま持ってきた値。変えないこと。
     ============================================================ */

  /* 地 —— 明るいコンクリート */
  --wall:    #f0ece1;
  --wall-2:  #e4dfd0;
  --ink:     #0d0d0f;   /* 輪郭。これが全体をまとめる */

  /* 作品カラー */
  --grani:   #ffcc00;
  --kourin:  #c92a2a;
  --reiage:  #ff0055;

  /* スタジオ側の挿し色 */
  --cyan:    #00c2ff;
  --lime:    #8ee000;
  --orange:  #ff6600;

  /* 極太書体（クローム・トップページ用） */
  --ff-heavy: 'Noto Sans JP', system-ui, -apple-system, "Hiragino Sans", sans-serif;
}

/* ============================================================
   共通ヘッダー（.kino-header）— 黒帯・極太
   全ページで同じマークアップ・同じ見た目。href だけページ相対で変える。
   トップの壁・ブログ・コレクションのどの地色の上でも成立するよう、
   地は必ず --ink のベタで、文字は --wall。
   ============================================================ */
.kino-header {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-height);
  padding: .7rem 1.4rem;
  background: var(--ink);
  border-bottom: 4px solid var(--ink);
}

.kino-header__brand {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--ff-heavy);
  font-size: .88rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wall);
  text-decoration: none;
  white-space: nowrap;
}

.kino-header__brand:hover,
.kino-header__brand:focus-visible {
  color: var(--grani);
}

.kino-header__back {
  color: var(--grani);
  font-weight: 900;
}

.kino-header__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
}

.kino-header__nav a {
  font-family: var(--ff-heavy);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wall);
  text-decoration: none;
  padding: .22rem .4rem;
  transition: color .15s, background .15s;
}

.kino-header__nav a:hover,
.kino-header__nav a:focus-visible {
  color: var(--grani);
}

.kino-header__nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--grani);
  font-weight: 900;
}

/* ============================================================
   共通フッター（.kino-footer）— 黒帯
   ============================================================ */
.kino-footer {
  background: var(--ink);
  color: var(--wall);
  border-top: 6px solid var(--ink);
  padding: 2.2rem 1.5rem 2.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
}

.kino-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.kino-footer__links a {
  font-family: var(--ff-heavy);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--wall);
  text-decoration: none;
  transition: color .15s;
}

.kino-footer__links a:hover,
.kino-footer__links a:focus-visible {
  color: var(--grani);
}

.kino-footer__copy {
  margin: 0;
  font-family: var(--ff-heavy);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(240, 236, 225, .65);
}

/* ============================================================
   共通ユーティリティ
   ============================================================ */
.kino-skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 300;
  padding: .75rem 1rem;
  font-family: var(--ff-heavy);
  font-weight: 900;
  background: var(--grani);
  color: var(--ink);
  box-shadow: 0 0 0 4px var(--ink);
  text-decoration: none;
}

.kino-skip-link:focus {
  top: .5rem;
}

/* display 指定を持つ要素にも hidden 属性を効かせる */
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* セクション見出しの共通ラベル（罫線付き） */
.kino-rule-heading {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--ff-mono);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--clr-beige);
}

.kino-rule-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--line-mid), transparent);
}

@media (max-width: 560px) {
  .kino-header {
    padding: .6rem .9rem;
    gap: .5rem;
    flex-wrap: wrap;
  }

  .kino-header__brand {
    font-size: .8rem;
  }

  .kino-header__nav {
    gap: .3rem .7rem;
  }

  .kino-header__nav a {
    font-size: .72rem;
    padding: .2rem .3rem;
  }
}