/* ─────────────────────────────────────────────────────────
   Warm Theme — 共通テーマ変数・ナビ・warm-body
   ───────────────────────────────────────────────────────── */

/* ═══ 1. CSS Custom Properties ═══ */
:root {
  /* Typography */
  --wm-font-display: "Shippori Mincho B1", "Noto Serif JP", serif;
  --wm-font-ui:      "Noto Sans JP", system-ui, sans-serif;

  /* Ink */
  --wm-ink:       #2d2d45;
  --wm-ink-soft:  #5a5a73;
  --wm-ink-mute:  #8b8ba0;

  /* Background */
  --wm-bg:        #faf8f4;
  --wm-bg-warm:   #fff8f1;

  /* Accent */
  --wm-pink:       #ff8fa8;
  --wm-pink-deep:  #e96b89;
  --wm-pink-pale:  #fff0f4;
  --wm-gold:       #c4a040;

  /* Lines */
  --wm-line:        rgba(45, 45, 69, 0.08);
  --wm-line-strong: rgba(45, 45, 69, 0.14);
}


/* ═══ 2. warm-body base ═══ */
.warm-body {
  margin: 0;
  background: var(--wm-bg-warm);
  color: var(--wm-ink);
  font-family: var(--wm-font-ui);
  min-height: 100vh;
  position: relative;
}

.warm-body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(250,235,215,0.35), transparent),
    radial-gradient(ellipse 70% 50% at 80% 60%, rgba(220,210,240,0.25), transparent),
    radial-gradient(ellipse 60% 40% at 50% 80%, rgba(245,225,200,0.2),  transparent);
  pointer-events: none;
}


/* ═══ 3. Navigation (wm-nav) ═══ */
.wm-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 248, 241, 0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,248,241,0.18);
}

.wm-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wm-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--wm-ink);
}

.wm-brand-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
}

.wm-brand-bars i {
  display: block;
  width: 3px;
  background: var(--wm-pink-deep);
  border-radius: 1px;
}

.wm-brand-bars i:nth-child(1) { height: 6px; }
.wm-brand-bars i:nth-child(2) { height: 10px; }
.wm-brand-bars i:nth-child(3) { height: 16px; }
.wm-brand-bars i:nth-child(4) { height: 10px; }
.wm-brand-bars i:nth-child(5) { height: 6px; }

.wm-brand-name {
  font-family: var(--wm-font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.wm-nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.wm-nav-links a {
  font-family: var(--wm-font-ui);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--wm-ink-mute);
  text-decoration: none;
  transition: color 0.15s;
}

.wm-nav-links a:hover {
  color: var(--wm-ink);
}

.wm-nav-links .wm-active {
  font-family: var(--wm-font-ui);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--wm-pink-deep);
  font-weight: 500;
}

@media (max-width: 640px) {
  .wm-nav-inner { padding: 10px 16px; gap: 12px; }
  .wm-nav-links { gap: 14px; }
  .wm-nav-links a,
  .wm-nav-links .wm-active { font-size: 11px; }
  .wm-brand-name { font-size: 13px; }
}

@media (max-width: 420px) {
  .wm-nav-links { gap: 10px; flex-wrap: wrap; }
  .wm-nav-links a,
  .wm-nav-links .wm-active { font-size: 10px; }
}


/* ═══ 4. HiBiKi Gate lock styles ═══ */
.hg-locked-btn {
  position: relative;
  opacity: 0.55;
}

.hg-locked-cell {
  position: relative;
  opacity: 0.45;
  cursor: pointer;
}

.hg-lock-badge {
  position: absolute;
  top: -4px; right: -4px;
  width: 18px; height: 18px;
  background: var(--wm-pink-deep, #e96b89);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.hg-lock-badge svg {
  width: 10px; height: 10px;
  color: white;
}

.hg-lock-icon {
  position: absolute;
  top: 4px; right: 4px;
  color: var(--wm-pink-deep, #e96b89);
  opacity: 0.7;
}