/* ============================================================
   theme.css — 色・フォント・装飾（デザインの着せ替えはこのファイルだけ差し替える）
   すべての色・フォントは :root の CSS 変数経由で参照する。
   v0/Figma 等で作ったデザインはこの変数と装飾ルールに移植する。
   ============================================================ */

:root {
  /* --- 基本色 --- */
  --color-bg: #fbf9f4;               /* 生成りの背景 */
  --color-surface: #ffffff;          /* カード等の面 */
  --color-text: #2b3a42;             /* 本文 */
  --color-muted: #6b7a83;            /* 補足テキスト */
  --color-primary: #23566b;          /* 瀬戸内の深い海色 */
  --color-primary-contrast: #ffffff; /* primary 上の文字色 */
  --color-accent: #c9a24b;           /* 夕凪の金色 */
  --color-border: #e2ddd2;           /* 罫線 */

  /* --- 部品色 --- */
  --color-badge-bg: #eef3f4;         /* 特徴バッジの背景 */
  --color-cal-blocked: #d9d9d9;      /* カレンダー: 予約済み */
  --color-cal-past: #f1efe9;         /* カレンダー: 過去日 */
  --color-status: #8a6d1f;           /* フォームの状態メッセージ */

  /* --- フォント --- */
  --font-base: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  --font-heading: var(--font-base);

  /* --- 形状 --- */
  --radius-s: 6px;
  --radius-m: 12px;
  --shadow-card: 0 2px 12px rgba(35, 58, 66, 0.08);
}

/* --- ベース --- */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  line-height: 1.8;
}
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.4; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- ヘッダー --- */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.site-header__brand {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-text);
}
.site-header__brand-en {
  color: var(--color-muted);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}
.site-header__nav-link { font-size: 0.9rem; }

/* --- セクション見出し --- */
.section__title {
  font-size: 1.5rem;
  color: var(--color-primary);
  border-left: 4px solid var(--color-accent);
  padding-left: 12px;
}

/* --- ヒーロー --- */
.hero__brand {
  color: var(--color-muted);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}
.hero__title { font-size: 2rem; }
.hero__name-en {
  color: var(--color-muted);
  letter-spacing: 0.1em;
  font-size: 0.95rem;
}
.hero__catch { font-size: 1.1rem; color: var(--color-primary); }
.hero--top { background: var(--color-primary); }
.hero--top .hero__title { color: var(--color-primary-contrast); font-size: 2.2rem; }
.hero--top .hero__catch { color: var(--color-primary-contrast); opacity: 0.85; }

/* --- 特徴バッジ・基本情報 --- */
.feature-badges__item {
  background: var(--color-badge-bg);
  color: var(--color-primary);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.9rem;
}
.fact-list__label { color: var(--color-muted); font-size: 0.9rem; }
.fact-list__value { font-weight: 700; }

/* --- ギャラリー --- */
.gallery__notice { color: var(--color-muted); font-size: 0.9rem; }
.gallery__image { border-radius: var(--radius-s); }

/* --- カレンダー --- */
.calendar-section__note { color: var(--color-muted); font-size: 0.9rem; }
.calendar__status { color: var(--color-muted); }
.calendar__month-title { font-size: 1rem; color: var(--color-primary); }
.calendar__table { background: var(--color-surface); border-radius: var(--radius-s); }
.calendar__weekday { color: var(--color-muted); font-size: 0.8rem; font-weight: 400; }
.calendar__day { font-size: 0.9rem; }
.calendar__day--blocked { background: var(--color-cal-blocked); color: var(--color-muted); }
.calendar__day--past { background: var(--color-cal-past); color: var(--color-muted); }
.calendar__legend-item { color: var(--color-muted); font-size: 0.85rem; }
.calendar__legend-swatch { border: 1px solid var(--color-border); border-radius: 3px; background: var(--color-surface); }
.calendar__legend-swatch--blocked { background: var(--color-cal-blocked); }

/* --- プランカード --- */
.plan-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
}
.plan-card__name { font-size: 1.1rem; color: var(--color-primary); }
.plan-card__name-en { color: var(--color-muted); font-size: 0.8rem; letter-spacing: 0.08em; }
.plan-card__price { font-weight: 700; color: var(--color-accent); }
.plan-card__rule { font-size: 0.92rem; padding-left: 1em; text-indent: -1em; }
.plan-card__rule::before { content: "・"; }
.plans__notes-heading { font-size: 1rem; color: var(--color-primary); }
.plans__note { color: var(--color-muted); font-size: 0.9rem; padding-left: 1em; text-indent: -1em; }
.plans__note::before { content: "※"; }

/* --- 予約フォーム --- */
.booking__approval-note {
  background: var(--color-badge-bg);
  border-radius: var(--radius-s);
  padding: 14px 18px;
  font-size: 0.92rem;
}
/* 予約受付停止中の案内（プレビュー公開中・届出申請中） */
.booking__notice {
  background: var(--color-badge-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  padding: 18px 20px;
}
.booking__notice-text { font-size: 0.95rem; }
.booking-form__legend { font-weight: 700; margin-bottom: 6px; }
.booking-form__label { font-size: 0.9rem; color: var(--color-muted); }
.booking-form__input, .booking-form__textarea {
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  padding: 10px 12px;
}
.booking-form__input:focus, .booking-form__textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.booking-form__status { color: var(--color-status); font-size: 0.92rem; min-height: 1.5em; }
.booking-form__submit {
  font: inherit;
  font-weight: 700;
  color: var(--color-primary-contrast);
  background: var(--color-primary);
  border: 0;
  border-radius: 999px;
  padding: 14px 32px;
  cursor: pointer;
}
.booking-form__submit:hover { opacity: 0.9; }

/* --- アクセス --- */
.access__address-label { color: var(--color-muted); font-size: 0.9rem; }
.access__route { color: var(--color-text); }
.access__map { border: 1px solid var(--color-border); border-radius: var(--radius-s); overflow: hidden; }
.access__map-link { font-size: 0.9rem; }

/* --- ハウスルール --- */
.rules__time-label { color: var(--color-muted); font-size: 0.9rem; }
.rules__time-value { font-weight: 700; }
.rules__item { padding-left: 1em; text-indent: -1em; font-size: 0.95rem; }
.rules__item::before { content: "・"; }

/* --- フッター --- */
.site-footer {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}
.site-footer a { color: var(--color-primary-contrast); }
.site-footer__permit { font-size: 0.9rem; opacity: 0.9; }
.site-footer__legal-link { font-size: 0.85rem; opacity: 0.85; }
.site-footer__brand { font-size: 0.9rem; }
.site-footer__copyright { font-size: 0.8rem; opacity: 0.7; }

/* --- トップ: 4宿カード --- */
.stay-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.stay-card__link { color: inherit; }
.stay-card__link:hover { text-decoration: none; }
/* 届出申請中バッジ */
.stay-card__badge {
  background: var(--color-cal-past);
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px 12px;
  font-size: 0.78rem;
}
.stay-card__name { font-size: 1.1rem; color: var(--color-primary); }
.stay-card__name-en { color: var(--color-muted); font-size: 0.8rem; letter-spacing: 0.08em; }
.stay-card__catch { font-size: 0.95rem; }
.stay-card__meta { color: var(--color-muted); font-size: 0.85rem; }
.stay-card__cta { color: var(--color-accent); font-weight: 700; font-size: 0.9rem; }

/* --- 法定ページ --- */
.legal__title { font-size: 1.6rem; color: var(--color-primary); }
.legal__intro { color: var(--color-text); }
.legal-table__row { border-bottom: 1px solid var(--color-border); }
.legal-table__label { color: var(--color-muted); font-size: 0.92rem; }
.legal-section__heading { font-size: 1.1rem; color: var(--color-primary); }
.legal-section__list-item { padding-left: 1em; text-indent: -1em; }
.legal-section__list-item::before { content: "・"; }
.legal-plan {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  padding: 14px 18px;
}
.legal-plan__name { font-size: 0.95rem; color: var(--color-primary); }
.legal-plan__rule { font-size: 0.9rem; padding-left: 1em; text-indent: -1em; }
.legal-plan__rule::before { content: "・"; }
.legal-notes__item { color: var(--color-muted); font-size: 0.88rem; padding-left: 1em; text-indent: -1em; }
.legal-notes__item::before { content: "※"; }
.legal-facility__name { font-size: 1rem; }
.legal-facility__operator,
.legal-facility__address,
.legal-facility__permit,
.legal-facility__management { font-size: 0.92rem; color: var(--color-muted); }
.legal__enacted { color: var(--color-muted); font-size: 0.88rem; }