/* css/style.css */

/* 基本スタイル */
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #F1F1F1;
  }
  p {
    color: #5A5A5A;
    font-size: 13px;
  }
  
  /* ヘッダー */
  header {
    font-size: 16px;
    font-weight: normal;
    margin: 16px 10px;
    text-align: left;
  }
  header a {
    text-decoration: none;
    color: gray;
  }
  
  /* 横並びコンテナ */
  .container {
    display: flex;
    min-height: calc(100vh - 50px);
    margin: 0 2%;
  }
  
  /* 左カラム */
  .panel.left {
    width: 200px;
    border-right: 1px solid #ccc;
    padding: 0.5rem;
  }
  
  /* 右カラム */
  .panel.right,
  #ajax-content {
    overflow: hidden;
    flex: 1;
    padding: 1rem;
  }
  
  /* フッター */
  footer {
    font-family: 'VT323', monospace;
    height: 30px;
    text-align: center;
    padding-top: 8px;
  }
  
  /* ナビリンク */
  nav a {
    display: block;
    padding: 4px 0;
    color: #5A5A5A;
    text-decoration: none;
  }
  nav a:hover {
    letter-spacing: 0.1em;
  }
  /* アクティブなナビの装飾 */
  nav a.active {
    font-weight: bold;
  }
  
  /* リスト */
  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
  }
  li {
    padding: 4px 0;
    color: #5A5A5A;
  }
  
  /* 外部リンクマーク */
  nav a.external::after {
    content: "↗";
    margin-left: 0.25rem;
    font-size: 0.7em;
    vertical-align: text-bottom;
  }
  
  /* ------ ここに article.css を統合 ------ */
  /* セクションタイトル */
  .section-title {
    font-size: 1rem;
    margin: 1rem 0 0.5rem;   /* article.css を採用 */
    font-weight: bold;
    color: #5A5A5A;
  }
  
  /* サブタイトル／小見出し */
  .section-subtitle {
    font-size: 0.8rem;         /* article.css を採用 */
    color: #666;
    margin-bottom: 1rem;
  }
  
  /* 右カラムのリスト */
  .panel.right ul li a {
    padding: 4px 0;
    color: #5A5A5A;
    text-decoration: none;
  }
  .panel.right ul li a:hover {
    letter-spacing: 0.1em;
  }
  
  /* 外部リンクアイコン（右カラム） */
  .panel.right ul li a[target="_blank"]::after {
    content: "↗";
    margin-left: 0.25rem;
    font-size: 0.7em;
    vertical-align: text-bottom;
  }
  
  /* ----- memoページだけ適用 ----- */
  .memo-list .memo-entry {
    display: grid;
    grid-template-columns: 13rem 60%;
    column-gap: 1rem;
    align-items: start;
  }
  .memo-entry {
    margin-bottom: 3rem;
  }
  .memo-entry header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .memo-entry time {
    font-size: 0.8rem;
    color: #5A5A5A;
  }
  .memo-title {
    font-size: 1rem;
    font-weight: normal;
    margin: 0;
    color: #5A5A5A;
  }
  .memo-body {
    line-height: 1.6;
    font-size: 0.9rem;
    color: #5A5A5A;
  }
  
  /* Aboutの名前 */
  .aboutname {
    font-size: 14px;
    color: #5A5A5A;
    margin-bottom: 1rem;
  }
  
  /* Aboutと活動の間の間隔 */
  .aboutname + ul {
    margin-bottom: 4rem;
  }
  
  /* about.html 相当の本文内リンク */
  .panel.right .about-page a {
    text-decoration: none;
    color: #989898;
  }
  

  /* ====== ボトムナビ（デフォルトは非表示） ====== */
.bottom-nav {
    display: none;
    background: #F1F1F1;
    border-top: 1px solid #ddd;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    height: 56px;
    padding-bottom: env(safe-area-inset-bottom); /* iOS安全領域 */
  }
  .bottom-nav ul {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    margin: 0; padding: 0;
    list-style: none;
    height: 100%;
  }
  .bottom-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 12px;
    color: #5A5A5A;
    padding: 0 6px;
  }
  .bottom-nav a.active { font-weight: bold; }
  
  /* ====== スマホ幅で 1カラム化 & ボトムナビ表示 ====== */
  @media (max-width: 768px) {
    /* 全体を縦並びに */
    .container {
      display: block;
      margin: 0; /* 余白を詰める */
      min-height: auto;
    }
    /* 左カラムは隠す（=1カラム化） */
    .panel.left { display: none; }
  
    /* 右カラムは全幅で */
    .panel.right,
    #ajax-content {
      padding: 1rem;
    }
  
    /* ボトムナビを表示。被り対策で下パディングを確保 */
    body {
      padding-bottom: calc(56px + env(safe-area-inset-bottom));
    }
    .bottom-nav { display: block; }
  
    /* memo ページは1カラムの読みやすい組み方に */
    .memo-list .memo-entry {
      display: block;
    }
    .memo-entry header { margin-bottom: 0.5rem; }
  }
  @media (max-width: 768px) {
    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    .container {
      flex: 1;
    }
    footer {
      margin-top: auto;
      margin-bottom: 50px; 
    }
  }
  
  /* 活動リスト：年と本文で2カラム */
.activities {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .activities .activity {
    display: grid;
    grid-template-columns: 3rem 1fr; /* 左：年 / 右：本文 */
    gap: 0.25rem 0.5rem;
    align-items: start;
    padding: 0.5rem 0;
  }
  .activities .year {
    letter-spacing: 0.02em;
    white-space: nowrap; /* 年が折り返されないように */
    opacity: 0.9;
  }
  .activities .detail {
    min-width: 0; /* 長文でもきれいに折り返し */
  }
  
  /* サブ項目（例：solo exhibition） */
  .activities .sub {
    margin: 0.25rem 0 0 0;
    padding: 0;
    list-style: none;
  }
  .activities .sub li {
    margin: 0.125rem 0 0 0;
  }
  
  /* 画面が狭い時は自然に1カラムへ */
  @media (max-width: 768px) {
    .activities .activity { grid-template-columns: 4.5rem 1fr; }
  }
  @media (max-width: 480px) {
    .activities .activity { grid-template-columns: 1fr; }
    .activities .year { opacity: 0.6; margin-bottom: 0.125rem; }
  }

  .education {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .education .edu-item {
    display: grid;
    grid-template-columns: 7rem 1fr; /* 左：年 / 右：本文 */
    gap: 0.25rem 0.5rem;
    align-items: start;
    padding: 0.5rem 0;
  }
  .education .year {
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0.9;
  }
  .education .detail {
    min-width: 0;
  }
  
  @media (max-width: 480px) {
    .education .edu-item {
      grid-template-columns: 1fr;
    }
    .education .year {
      opacity: 0.6;
      margin-bottom: 0.125rem;
    }
  }
  /* ===== モバイルのボトムナビを“角丸なしの枠ボタン”に ===== */
@media (max-width: 768px) {
    .bottom-nav ul {
      gap: 1.5vw; /* ボタン間のすき間（任意） */
    }
    .bottom-nav a {
      border: 1px solid #ccc;   /* 文字と同じ色の細い線 */
      border-radius: 0px;               /* 角丸*/
      padding: 2vh 4vw;                /* 触りやすいタップ領域 */
      line-height: 1;                   /* ボタン内の縦詰め */
      font-size: 12px;                  /* 既存値を踏襲 */
      color: #5A5A5A;                   /* 既存の文字色と合わせる */
    }
    /* グローバルの hover アニメを打ち消す */
    .bottom-nav a:hover {
      letter-spacing: 0; 
    }
    /* アクティブ＝今いるページ：塗りつぶし＆文字反転 */
    .bottom-nav a.active {
      background-color: #5A5A5A;
      color: #fff;
      font-weight: normal;
    }
  }

/* why?リンクの位置調整 */
#why-link {
  display: block;
  margin-top: 200px;
  color: gray;
  text-decoration: none;
  font-size: 12px;
}
#why-link:hover {
  letter-spacing: 0.1em;
}

/* 3カラム目スタイル */
.panel.third {
  width: 270px;
  padding: 1rem;
  display: none;
  overflow-y: auto;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  height: calc(100dvh - 2rem);     /* ← パディング上下ぶんを差し引いて“画面ぴったり” */
  overscroll-behavior: contain;     /* ← 端で止めて“全体”にスクロールを伝播させない */
  background: #F1F1F1; /* 背景色 */
}
.panel.third.active {
  display: block;
}

/* 3カラムレイアウト時の親コンテナ調整 */
.container.three-columns {
  display: flex;
}

/* third panel が開いている間だけ why? を中央線で消す */
.container.three-columns #why-link {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: #5A5A5A;
  }

  /* third panel のヒントUI */
.hints {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }
  
  .hint-toggle {
  display: inline-block;
  color: #5A5A5A;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  }
  .hint-toggle:hover {
    letter-spacing: 0.05em;
  }
  
  /* ヒント本文は他の本文と同じ雰囲気 */
  .hint-body {
    margin: 0.25rem 0 0 0.5rem;  /* ボタンの下に少し下げてインデント */
    line-height: 1.6;
    font-size: 0.8rem;
    color: #5A5A5A;
  }

.home-image {
    display: block;
    margin-top: 80px;
  }
.about-image {
    display: block;
    margin-bottom: 50px;
  }

/* ===== works グリッド（メディアクエリ版：広い時3列／狭い時2列） ===== */
.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 140px); /* 好きなカード幅に調整OK */
  gap: 20px 20px;                          /* 縦 横 の順 */
  justify-content: left;                   /* 左寄せ*/
}

/* 右カラムが狭くなって3列が入らない幅で2列に切替 */
@media (max-width: 1230px) {
  .works-grid {
    grid-template-columns: repeat(2, 140px);
  }
}

.works-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.works-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid #ddd;
  background: #fafafa;
}

.works-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.works-caption {
  margin-top: 6px;
  font-size: 10px;
  color: #5A5A5A;
  line-height: 1.4;
}

/* 詳細（third panel）内の体裁 */
.work-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.work-detail img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #ddd;
}

.panel.third.works-detail {
  flex: 0 0 clamp(230px, 55%, 590px); /* 最小230px, だいたい40%, 最大480px */
  width: auto;                         /* 干渉しないよう明示 */
  box-sizing: border-box;              /* 念のため */
  background: #f5f5f5;
}

/* ---- works-thumb の白オーバーレイ ---- */
/* どれくらい白くするか（0～1） */
:root { --thumb-whiten: 0.3; } 

.works-thumb {
  position: relative;           /* ← オーバーレイを重ねるために必要 */
  overflow: hidden;             /* すでに入っていればOK */
}

/* 白オーバーレイをかぶせる（サムネだけ） */
.works-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, var(--thumb-whiten));
  pointer-events: none;         /* クリック操作に干渉しない */
  transition: opacity .2s ease; /* ホバーで元の明るさに戻す演出用 */
}

/* ホバー/フォーカス時は元の明るさに */
.works-card:hover .works-thumb::after,
.works-card:focus-visible .works-thumb::after {
  opacity: 0;
}

/* ---- Markdown を差し込む領域 ---- */
.markdown-body {
  font-size: 12px;
  color: #5A5A5A;
  line-height: 1.7;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
  margin: 0.9em 0 0.4em;
  font-size: 12px;
  font-weight: bold;
  color: #5A5A5A;
}
.markdown-body p, .markdown-body ul, .markdown-body ol, .markdown-body blockquote {
  margin: 0.6em 0;
}
.markdown-body ul, .markdown-body ol { padding-left: 1.1em; }
.markdown-body a {
  color: #5A5A5A;
  text-decoration: none;
  border-bottom: 1px dotted #aaa;
}
.markdown-body a:hover { letter-spacing: 0.02em; }
.markdown-body img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid #ddd;
  margin: 6px 0;
}

/* 外部リンクのカード（画像なし） */
.link-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 10px 12px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.link-card:hover {
  transform: translateY(-1px);
  border-color: #ddd;
  box-shadow: 0 3px 10px rgba(0,0,0,0.06);
}
.link-card__meta { min-width: 0; }
.link-card__host {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: #8a8a8a; margin-bottom: 4px;
}
.link-card__host img { width: 14px; height: 14px; border-radius: 3px; }
.link-card__title {
  font-size: 12px; font-weight: 600; color: #4a4a4a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* === 左ナビをレスポンシブ幅に（下に追記でOK） === */
:root{
  --nav-min: 120px;  /* これ以下には縮ませない */
  --nav-max: 260px;  /* これ以上は広げない（好みで調整） */
  --nav-pc:  19%;    /* 画面に対する目安の割合（ここを主にいじる） */
}

.panel.left{
  /* flex-basis を clamp で指定：min ～ ％ ～ max */
  flex: 0 0 clamp(var(--nav-min), var(--nav-pc), var(--nav-max));
  width: auto;           /* 既存の width:200px を無効化 */
  box-sizing: border-box;
  /* 縦が溢れるとき用 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* works の third panel の本文末尾に余白を足す */
.panel.third.works-detail .markdown-body {
  padding-bottom: 80px;
}