/* ============================================================
   菊池研究室サイト — style.css
   Apache 静的配信用。外部CDN・blob・eval 依存なし。
   ============================================================ */

/* ---- reset / base ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #eceae7;
  /* Zen Kaku Gothic New の代替システムフォントスタック
     macOS/iOS: Hiragino Kaku Gothic ProN
     Windows:   Yu Gothic UI / Meiryo
     汎用:      sans-serif                                    */
  font-family:
    'Hiragino Kaku Gothic ProN',
    'Hiragino Sans',
    'Yu Gothic UI',
    'Yu Gothic',
    Meiryo,
    sans-serif;
  color: #0a0a0a;
}

a { text-decoration: none; color: inherit; }

img { display: block; }

/* ---- font helper ------------------------------------------ */
/* Space Mono の代替システム等幅フォントスタック              */
.mono,
[class*="mono"] {
  font-family:
    ui-monospace,
    'SF Mono',
    Menlo,
    'Courier New',
    monospace;
}

/* ---- interactive states ----------------------------------- */
.navlink { transition: color .15s; }
.navlink:hover { color: #0a0a0a; }

.btn { transition: background .15s, color .15s; }
.btn:hover { background: #0a0a0a !important; color: #fff !important; }

.btn-fill { transition: opacity .15s; }
.btn-fill:hover { opacity: .82; }

.card-link { transition: background .15s; }
.card-link:hover { background: #fafafa; }

/* ---- responsive: 760 px 以下 ------------------------------ */
@media (max-width: 760px) {

  /* ナビゲーション */
  .nav {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .nav > a.nav-logo {
    grid-column: 1 / -1 !important;
    border-right: none !important;
    border-bottom: 1px solid #e2e2e2 !important;
    padding: 15px 20px !important;
  }
  .nav > a:not(.nav-logo) {
    padding: 14px 4px !important;
    font-size: 10px !important;
    letter-spacing: .02em !important;
    justify-content: center !important;
    text-align: center !important;
    border-right: 1px solid #e2e2e2 !important;
  }
  .nav > a:not(.nav-logo):last-child {
    border-right: none !important;
  }

  /* 2:1 グリッド → 1カラム */
  .row21 { grid-template-columns: 1fr !important; }
  .col-main {
    border-right: none !important;
    border-bottom: 1px solid #e2e2e2 !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* フッター */
  .footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 24px 22px !important;
  }

  /* ---- index.html ----------------------------------------- */
  .hero-h1   { font-size: 42px !important; }
  .contact-h2 { font-size: 26px !important; }

  .about-grid { grid-template-columns: 1fr 1fr !important; }
  .about-lead {
    grid-column: 1 / -1 !important;
    border-right: none !important;
    border-bottom: 1px solid #e2e2e2 !important;
    padding: 36px 22px 40px !important;
  }
  .about-cell { padding: 26px 22px !important; }

  .sec-head {
    padding: 22px 22px !important;
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
  }

  .cards-3 { grid-template-columns: 1fr !important; }
  .card-3 {
    border-right: none !important;
    border-bottom: 1px solid #e2e2e2 !important;
    padding: 34px 24px 36px !important;
  }
  .card-3:last-child { border-bottom: none !important; }

  .books-grid { grid-template-columns: 1fr 1fr !important; }
  .book-card {
    padding: 22px 15px 26px !important;
    border-right: 1px solid #e2e2e2 !important;
    border-bottom: 1px solid #e2e2e2 !important;
  }

  .apps-2 { grid-template-columns: 1fr !important; }
  .app-card {
    border-right: none !important;
    border-bottom: 1px solid #e2e2e2 !important;
    padding: 36px 24px 40px !important;
  }
  .app-card:last-child { border-bottom: none !important; }

  /* ---- research.html -------------------------------------- */
  .page-h1   { font-size: 40px !important; }
  .kw-panel  { padding: 30px 22px !important; }
  .pad48     { padding-left: 22px !important; padding-right: 22px !important; }
  .work-row  {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    padding: 15px 0 !important;
  }
  .work-meta { white-space: normal !important; }

  /* ---- webapps.html --------------------------------------- */
  .app-h2    { font-size: 30px !important; }
  .app-split { grid-template-columns: 1fr !important; }
  .app-img   {
    min-height: 230px !important;
    border-right: none !important;
    order: 2 !important;
  }
  .feat-3    { grid-template-columns: 1fr !important; }
  .feat-cell {
    border-right: none !important;
    border-bottom: 1px solid #e2e2e2 !important;
  }
  .feat-cell:last-child { border-bottom: none !important; }

  .note-grid  { grid-template-columns: 1fr !important; }
  .note-label {
    border-right: none !important;
    border-bottom: 1px solid #e2e2e2 !important;
    padding: 24px 22px !important;
  }
  .note-body {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}