/* ========================================
   wisdom.css（CLEANED）
   先人達の教え
======================================== */

/* ========================================
   セクション見出し
======================================== */
.w-section { margin-top: 2.2rem; }


/* ========================================
   グリッドレイアウト
======================================== */
.w-grid{ display:grid; gap:1.1rem; }

@media (min-width:768px){
  .w-grid{ grid-template-columns:repeat(2,1fr); gap:1.2rem; }
}

/* アニメモード専用：1列 */
.w-grid.anime-only{
  grid-template-columns:1fr !important;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}

/* ========================================
   カード
======================================== */
.w-card{
  background:#fff;
  border-radius:18px;
  padding:1.25rem 1.15rem;
  border:1px solid rgba(15,23,42,.07);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}

/* 左アクセントライン */
.w-card::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  opacity:.9;
}

/* standard-only 色分け */
.w-grid.standard-only .w-card:nth-child(1)::before,
.w-grid.standard-only .w-card:nth-child(2)::before,
.w-grid.standard-only .w-card:nth-child(3)::before{ background:#2563eb; }

.w-grid.standard-only .w-card:nth-child(4)::before,
.w-grid.standard-only .w-card:nth-child(5)::before,
.w-grid.standard-only .w-card:nth-child(6)::before{ background:#0784c6; }

.w-grid.standard-only .w-card:nth-child(7)::before,
.w-grid.standard-only .w-card:nth-child(8)::before,
.w-grid.standard-only .w-card:nth-child(9)::before{ background:#2563eb; }

.w-grid.standard-only .w-card:nth-child(10)::before,
.w-grid.standard-only .w-card:nth-child(11)::before,
.w-grid.standard-only .w-card:nth-child(12)::before{ background:#0784c6; }

.w-grid.standard-only .w-card:nth-child(13)::before,
.w-grid.standard-only .w-card:nth-child(14)::before,
.w-grid.standard-only .w-card:nth-child(15)::before{ background:#2563eb; }

.w-grid.standard-only .w-card:nth-child(16)::before,
.w-grid.standard-only .w-card:nth-child(17)::before,
.w-grid.standard-only .w-card:nth-child(18)::before,
.w-grid.standard-only .w-card:nth-child(19)::before,
.w-grid.standard-only .w-card:nth-child(20)::before,
.w-grid.standard-only .w-card:nth-child(21)::before,
.w-grid.standard-only .w-card:nth-child(22)::before{ background:#0784c6; }

/* ========================================
   カードヘッダー / アバター
======================================== */
.w-card-head{
  display:flex;
  gap:.9rem;
  align-items:center;
  margin-bottom:.95rem;
}

.w-avatar{
  width:50px; height:50px;
  border-radius:14px;
  display:grid; place-items:center;
  background:#eef1f6;
  border:1px solid rgba(15,23,42,.06);
  flex:0 0 auto;
  overflow:hidden;
}
.w-avatar img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}


/* ========================================
   メタ情報
======================================== */
.w-meta{ min-width:0; }

.w-meta h3{
  margin:0;
  font-size:1.02rem;
  letter-spacing:.02em;
}

.w-meta p{
  margin:.15rem 0 0;
  font-size:.82rem;
  opacity:.72;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ※ .w-tag-odd/.w-tag-even  */
.w-tag-odd, .w-tag-even{
  margin-left:auto;
  font-size:.90rem;
  padding:.3rem .65rem;
  border-radius:999px;
  font-weight:900;
}
.w-tag-odd{
  background:hsla(229, 84%, 39%, 0.122);
  color:hsl(212,83%,26%);
  border:1px solid #101bb92e;
}
.w-tag-even{
  background:rgba(7,132,198,.12);
  color:#08699f;
  border:1px solid rgba(7,132,198,.18);
}

/* ========================================
   引用（名言）
======================================== */
.w-quote{
  position:relative;
  padding-left:.2rem;
  margin-bottom:.95rem;
  min-height:1.6em;
}

/* ========================================
   解釈（GFI解釈）
======================================== */
.w-interpret{
  border-radius:14px;
  padding:.9rem;
  background:#f8fafc;
  min-height:3.2em;
  /* borderを付けたいなら下をON */
  /* border: 1px solid rgba(15,23,42,.06); */
}

.w-interpret div{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-size:.82rem;
  font-weight:900;
  opacity:.85;
  margin-bottom:.45rem;
}
.w-interpret svg{
  width:16px; height:16px;
  display:block;
  color:currentColor;
}
.w-interpret p{
  margin:0;
  line-height:1.85;
  font-size:.92rem;
  font-weight:700;
  opacity:.92;
  word-break:break-word;
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
@supports not (-webkit-line-clamp:2){
  .w-interpret p{ max-height:3.2em; overflow:hidden; }
}

/* ========================================
   ページ内リンク位置補正
======================================== */
:root{ --anchor-offset:130px; }
#w1,#w2,#w3,#w4,#w5,#w6{ scroll-margin-top: var(--anchor-offset); }

/* ========================================
   ビュー切替
======================================== */
.view-toggle{
  display:flex;
  font-size:.9rem;
  gap:.75rem;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  margin: 2rem 0; /* ← 修正 */
}

.seg{
  display:inline-flex;
  gap:.5rem;
  padding:.4rem;
  border:2px solid #e2e8f0;
  background:#fff;
  border-radius:999px;
  box-shadow:0 4px 6px -1px rgba(0,0,0,.10);
}

.seg button{
  border:0;
  background:transparent;
  padding:.65rem .9rem;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
  color:#334155;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  transition:all .2s ease;
}
.seg button:hover{ background:rgba(7,132,198,.08); }
.seg button[aria-pressed="true"]{
  background:rgba(7,132,198,.14);
  color:#0b3858;
}
.seg .mini{
  font-size:.8rem;
  opacity:.85;
  font-weight:700;
}

/* 表示モード */
[data-view="standard"] .anime-only{ display:none !important; }
[data-view="anime"] .standard-only{ display:none !important; }

/* ========================================
   ページ内ショートカット
======================================== */
.shortcuts-grid{ grid-template-columns:repeat(3,1fr); }

@media (min-width:768px){
  .shortcuts-grid{ grid-template-columns:repeat(6,1fr); }
}

/* 統合：a の定義を1回にまとめる */
.shortcuts-grid a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.6rem .5rem;
  min-height:72px;

  background: var(--white);
  border: 2px solid rgba(7,132,198,.6);
  border-radius:12px;

  text-decoration:none;
  color: var(--text);
  box-shadow: 0 8px 16px rgba(7,132,198,.12);
  transition: all .25s ease;
}

.shortcuts-grid a:hover,
.shortcuts-grid a:focus{
  border-color: var(--emerald);
  background: var(--emerald-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(7,132,198,.15);
  outline:none;
}
.shortcuts-grid a:active{ transform: translateY(0); }

.shortcuts-grid span{
  font-size:.9rem;
  font-weight:700;
  text-align:center;
  line-height:1.3;
  color: #0b3858;
}

/* ========================================
   インジケータ（初期は隠す）
======================================== */
#scrollIndicator{
  opacity:0;
  transform: translateY(-6px);
  pointer-events:none;
  transition: opacity .22s ease, transform .22s ease;
}
body.show-indicator #scrollIndicator{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

/* ========================================
   名言：吹き出し（上向き・左寄せ）
   ※モバイル指定は1か所に統合
======================================== */
.quote-bubble{
  position:relative;
  margin:0 0 .75rem 0;
  padding:.85rem;
  max-width:100%;
  background:#f8fafc;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.08);
  font-weight:800;
  line-height:1.8;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
}

.quote-bubble::before{
  content:"";
  position:absolute;
  left:16px;
  top:-10px;
  width:0; height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-bottom:10px solid #f8fafc;
}
.quote-bubble::after{
  content:"";
  position:absolute;
  left:15px;
  top:-12px;
  width:0; height:0;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-bottom:12px solid rgba(15,23,42,.08);
}

@media (max-width:767px){
  .quote-bubble{
    max-width:100%;
    margin-left:0;
    margin-right:0;
    font-size:.95rem;
  }
  .quote-bubble::before{ left:18px; }
  .quote-bubble::after{ left:16px; }
}

/* ユーティリティ */


/* デスクトップ余白 */


/* ページ内ショートカット（wisdomのみ） */
.page-shortcuts{
  background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
  border: 2px solid var(--emerald);
  border-radius: 16px;
  padding: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow);
}
.shortcuts-header{
  display:flex;
  align-items:center;
  gap: .75rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--border);
}
.shortcuts-icon{
  width: 28px;
  height: 28px;
  color: var(--emerald);
  flex-shrink: 0;
}
.shortcuts-title{ font-weight: 900; font-size: 1rem; color: var(--navy); letter-spacing: .02em; }

.shortcuts-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: .75rem;
}
.shortcut-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: .5rem;
  padding: .875rem .5rem;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 12px;
  text-decoration:none;
  color: var(--text);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
  min-height: 72px;
}
.shortcut-btn:hover,
.shortcut-btn:focus{
  border-color: var(--emerald);
  background: var(--emerald-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(7,132,198,.15);
  outline: none;
}


/* スクロール位置表示（wisdom のみ） */
.scroll-indicator{
  position: fixed;
  top: 73px;
  left: 0;
  right: 0;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--emerald);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  z-index: 900;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity .2s ease, transform .2s ease;
}
.scroll-indicator.visible{
  opacity: 1;
  transform: translateY(0);
}
.indicator-content{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: .75rem;
  padding: .75rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}
.indicator-label{
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.indicator-section{
  font-size: .875rem;
  font-weight: 900;
  color: var(--navy);
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.indicator-progress{
  height: 4px;
  background: rgba(15,23,42,.06);
}
.indicator-bar{
  height: 100%;
  background: linear-gradient(90deg, #08699f 0%, #0784c6 100%);
  width: 0%;
  border-radius: 0 999px 999px 0;
  transition: width .08s linear;
  box-shadow: 0 0 10px rgba(7,132,198,.5);
}
/* インジケータ表示時：mainが隠れないように */


/* =========================================================
   Profile Modal（顔写真クリック）
   ※既存レイアウトには影響しない（display:none 初期）
========================================================= */
#profileModal[aria-hidden="true"]{ display:none; }

#profileModal{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,.45);
}

.c-profileModal__panel{
  width: min(520px, 100%);
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  padding: 1.25rem 2rem 1.4rem;
}


.c-profileModal__title{
  font-size: 1.2rem;        /* 本文より一段だけ大きく */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin-bottom: 0.25rem;
}


.c-profileModal__text{
  font-size: 1rem;        /* 約15.2px：スマホで最も読まれる帯 */
  line-height: 1.8;          /* 行間は広めが正解 */
  letter-spacing: 0.03em;    /* 日本語は少しだけ空ける */
  color: #333;
  margin-top: 0.75rem;
  text-align: justify;
}

.c-profileModal__role{
  margin-top: .1rem;
  font-size: .8rem;
  color: #8a8f98;
  letter-spacing: .02em;
  border-bottom: #8a8f98;
}


/* =========================================
   Profile Modal Close Button
========================================= */

.profile-modal__closeBtn{
  display: block;          /* ← これを追加 */
  margin: 1.5rem auto;
  padding: .6rem 1rem;
  width: 60%;
  border-radius: 10px;
  background: #f2f4f7;
  color: #555;
  font-size: .875rem;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: background .15s ease;
}


.profile-modal__closeBtn:hover{
  background: #e6e9ee;
}


#currentSection{
  font-weight: 900;
  color: #08699f;
}