/* ShoU Design System — shared across all pages */

:root {
  --color-bg:        #FAF6EE;
  --color-ink:       #1E1F29;
  --color-orange:    #F2994A;
  --color-gold:      #FFB84D;
  --color-warm:      #E07A5F;
  --color-gold-lt:   #FFD66B;
  --color-text:      #43474f;
  --color-muted:     #7a7f88;
  --color-dark-bg:   #1E1F29;
  --color-dark-text: #FAF6EE;

  --border:    2.5px solid #1E1F29;
  --border-sm: 2px solid #1E1F29;
  --shadow:    4px 4px 0 #1E1F29;
  --shadow-lg: 6px 6px 0 #1E1F29;

  --radius-card: 16px;
  --radius-card-lg: 24px;
  --radius-pill: 40px;

  --font-heading: 'Zen Maru Gothic', sans-serif;
  --font-body:    'Zen Kaku Gothic New', sans-serif;
  --font-label:   'Space Grotesk', sans-serif;
}

/* ── ベースリセット ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
html, body { margin: 0; padding: 0; }
body { background: var(--color-bg); font-family: var(--font-body); color: var(--color-ink); -webkit-font-smoothing: antialiased; }
::selection { background: #FFD085; color: var(--color-ink); }

/* ── 共通ボタン ───────────────────────────────────── */
.shou-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-label);
  font-weight: 700;
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  text-decoration: none;
  white-space: nowrap;
}
.shou-btn:focus-visible { outline: 3px solid var(--color-orange); outline-offset: 2px; }

.shou-btn-primary {
  background: var(--color-gold);
  color: var(--color-ink);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 14px 28px;
  font-size: 16px;
}
.shou-btn-primary:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }

.shou-btn-ghost {
  background: var(--color-bg);
  color: var(--color-ink);
  border: var(--border-sm);
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 600;
}
.shou-btn-ghost:hover { background: var(--color-gold); }

/* ── ナビゲーション ───────────────────────────────── */
.shou-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 32px;
  background: rgba(250, 246, 238, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: var(--border-sm);
}

.shou-nav-logo {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 42px;
  letter-spacing: -1px;
  color: var(--color-ink);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 1;
}

/* ── カード ──────────────────────────────────────── */
.shou-card {
  background: var(--color-bg);
  border: var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  transition: transform 0.15s, box-shadow 0.15s;
}
.shou-card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-lg); }

/* ── タグ・バッジ ─────────────────────────────────── */
.shou-tag {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  background: var(--color-ink);
  color: var(--color-dark-text);
}

/* ── ハンバーガーボタン ──────────────────────────────── */
.shou-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 2px solid var(--color-ink);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: var(--color-ink);
}

/* ── SP (〜767px) ───────────────────────────────────── */
@media (max-width: 767px) {

  /* ナビ */
  .shou-hamburger { display: flex !important; }
  .shou-nav-links { display: none !important; }
  .shou-nav-links.open {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 16px 20px;
    background: rgba(250, 246, 238, 0.98);
    border-bottom: 2px solid var(--color-ink);
    gap: 8px;
    z-index: 100;
  }
  .shou-nav-links.open a,
  .shou-nav-links.open button {
    width: 100%;
    text-align: center;
    justify-content: center;
    box-sizing: border-box;
  }

  /* ヒーロー装飾 */
  .shou-hero-deco { display: none !important; }

  /* index.html セクション padding */
  #shou-hero  { padding: 32px 16px 40px !important; min-height: auto !important; gap: 16px !important; }
  #shou-hero-text { min-width: 0 !important; max-width: 100% !important; flex: 1 1 100% !important; }
  #shou-hero-mascot { flex: 0 0 auto !important; margin: 0 auto !important; }
  #shou-hero-mascot img { width: min(55vw, 220px) !important; }
  #works  { padding: 52px 16px 30px !important; }
  #blog   { padding: 52px 16px !important; }
  #about  { padding: 52px 16px !important; }
  #me     { padding: 52px 16px !important; }
  #shou-footer { padding: 40px 16px !important; }
  .shou-footer-logo { font-size: 40px !important; }

  /* profile.html */
  #shou-profile-main { padding: 32px 16px !important; }
  #shou-profile-hero { padding: 24px 20px !important; gap: 20px !important; }
  #shou-profile-hero .profile-text { min-width: 0 !important; }

  /* works.html / blog.html */
  #shou-works-header { padding: 40px 16px 0 !important; }
  #shou-works-main   { padding: 0 16px 60px !important; }
  #shou-blog-main    { padding: 52px 16px !important; }
}

/* ── タブレット (768px〜1023px) ──────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  #shou-hero  { padding: 48px 24px !important; }
  #works      { padding: 60px 24px 30px !important; }
  #blog       { padding: 60px 24px !important; }
  #about      { padding: 60px 24px !important; }
  #me         { padding: 60px 24px !important; }
  #shou-footer { padding: 48px 24px !important; }
  #shou-profile-main { padding: 48px 24px !important; }
  #shou-works-header { padding: 48px 24px 0 !important; }
  #shou-works-main   { padding: 0 24px 60px !important; }
  #shou-blog-main    { padding: 60px 24px !important; }
}