/*
 * btmade-common.css
 * BTmadeシリーズ共通スタイル
 * tusi.html、caliper.html など各コンテンツページから読み込む
 *
 * 各ページのfontリンクに以下を含めること:
 * Klee One, Libre Baskerville, Zen Antique Soft,
 * Zen Kaku Gothic Antique, Zen Kaku Gothic New
 */

/* ===== CSS変数 ===== */
:root {
  /* 紙・背景 */
  --paper-base:       #F7F5F0;
  --paper-main:       #FAFAF8;
  --paper-dark:       #dfc9a0;
  --card-bg:          rgba(243, 234, 215, 0.92);

  /* テキスト */
  --ink-main:         #4b3a2f;
  --ink-text:         #333333;
  --ink-soft:         #888888;
  --ink-muted:        #aaaaaa;

  /* アクセント */
  --crimson:          #722F37;
  --accent-gold:      #c9a84c;
  --accent-gold-deep: #a87e4a;
  --gold:             #c9a84c;
  --gold-light:       #e8cc80;
  --gold-glow:        rgba(201, 168, 76, 0.35);

  /* リンク */
  --link:             #44546A;
  --link-hover:       #2F4560;

  /* 方眼グリッド */
  --grid-strong:      rgba(75, 58, 47, 0.07);
  --grid-soft:        rgba(75, 58, 47, 0.04);
}

/* ===== リセット ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===== ベース ===== */
html {
  background: var(--paper-base);
}

body {
  font-family: 'Klee One', 'Zen Kaku Gothic New', 'Yu Gothic', sans-serif;
  background:
    linear-gradient(var(--grid-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-soft) 1px, transparent 1px),
    linear-gradient(var(--grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px),
    var(--paper-base);
  background-size: 20px 20px, 20px 20px, 80px 80px, 80px 80px, auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding: max(52px, calc(env(safe-area-inset-top) + 52px))
           max(20px, env(safe-area-inset-right))
           max(32px, env(safe-area-inset-bottom))
           max(20px, env(safe-area-inset-left));
  color: var(--ink-text);
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--link);
  text-decoration-color: rgba(68, 84, 106, 0.55);
  text-underline-offset: 0.16em;
}

a:visited,
a:hover {
  color: var(--link-hover);
}

button {
  touch-action: manipulation;
}

/* ===== サイトヘッダーバー ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 44px;
  background: rgba(243, 234, 215, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(201, 168, 76, 0.35);
  box-shadow: 0 1px 8px rgba(75, 58, 47, 0.10);
  display: flex;
  align-items: center;
  padding: 0 max(16px, env(safe-area-inset-left));
}

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

.site-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

/* アイコン画像URL: https://giju-c.chu.jp/jpg/bt_made.png */
/* アイコン画像URL: https://giju-c.chu.jp/jpg/bt_made.png */
/* アイコン画像URL: https://giju-c.chu.jp/jpg/bt_made.png */
.site-header-icon {
  height: 26px;
  width: auto;
  display: block;
}

.site-header-label {
  font-family: 'Zen Antique Soft', serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--crimson);
  line-height: 1;
}

.site-header-badge {
  background: transparent;
  color: var(--ink-main);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 10px;
  border-radius: 4px;
  line-height: 1.6;
  white-space: nowrap;
}

.badge-num {
  background: var(--crimson);
  color: #f3ead7;
  padding: 0 6px;
  border-radius: 3px;
}

.badge-date {
  color: var(--ink-main);
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* ===== サイトフッター ===== */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  margin-bottom: 6px;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
}

.site-footer-link {
  color: var(--crimson);
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.05em;
  font-family: 'Zen Antique Soft', serif;
}

.site-footer-link:hover,
.site-footer-link:active,
.site-footer-link:visited {
  color: var(--crimson);
}

.site-footer-link:focus-visible {
  outline: 2px solid rgba(47, 69, 96, 0.25);
  outline-offset: 2px;
}

.site-footer-top {
  font-family: 'Zen Kaku Gothic Antique', 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
}

.site-footer-sep {
  color: var(--paper-dark);
  font-size: 13px;
  user-select: none;
}

/* ===== モバイル共通 ===== */
@media (max-width: 834px) {
  body {
    padding: max(56px, calc(env(safe-area-inset-top) + 52px))
             max(12px, env(safe-area-inset-right))
             max(calc(16px + env(safe-area-inset-bottom)), 16px)
             max(12px, env(safe-area-inset-left));
  }

  .site-footer {
    margin-top: 12px;
    margin-bottom: 4px;
  }
}

/* ===== スライドカード（.slide-container）デザイン決定事項 ===== */
/*
 * .slide::before / .slide::after の上下ゴールドラインは廃止。
 * 各コンテンツのHTML内に .slide::before, .slide::after を書かないこと。
 *
 * 代わりに .slide-container の box-shadow で存在感を出す。
 * 標準値（各コンテンツのCSSにコピーして使うこと）:
 *
 * box-shadow:
 *   0 0 0 1.5px rgba(201, 168, 76, 0.5),
 *   0 0 12px 2px rgba(201, 168, 76, 0.18),
 *   0 8px 32px rgba(75, 58, 47, 0.18);
 */

/* ===== スライドカード（.slide-container）デザイン決定事項 ===== */
/*
 * .slide::before / .slide::after の上下ゴールドラインは廃止。
 * 各コンテンツのHTML内に .slide::before, .slide::after を書かないこと。
 *
 * .slide-container の box-shadow 標準値（各コンテンツのCSSにコピーして使うこと）:
 *
 * box-shadow:
 *   0 0 0 1.5px rgba(201, 168, 76, 0.5),
 *   0 0 12px 2px rgba(201, 168, 76, 0.18),
 *   0 8px 32px rgba(75, 58, 47, 0.18);
 */

/* ===== ナビボタン（.nav button）デザイン決定事項 ===== */
/*
 * アウトラインボタン（塗りなし・枠線のみ）を採用。
 * transformによる浮き沈みは使わない。opacityのみで変化をつける。
 *
 * 標準値（各コンテンツのCSSにコピーして使うこと）:
 *
 * background: transparent;
 * color: #7a5c3e;
 * border: 2px solid #7a5c3e;
 * transition: background 0.18s ease, opacity 0.18s ease;
 *
 * hover時:
 *   background: rgba(122, 92, 62, 0.10);
 *   opacity: 0.88;
 *
 * active時:
 *   opacity: 0.72;
 */