/* ---- /info/ glossary + explainer pages (new design / light theme) ---- */
html,body{overflow-x:clip;}
.info-wrap{max-width:820px; margin:0 auto; padding:34px 24px 70px;}
.info-sub{color:rgba(255,255,255,.62); font-weight:700; font-size:14px; margin-top:8px; font-family:var(--font-head);}

/* explainer prose */
.info-body{color:#33333f; font-size:16px;}
.info-body p{line-height:1.95; margin:14px 0;}
.info-body p:first-child{font-size:17px; color:var(--ink);}            /* definition-first lead */
.info-body strong{color:var(--ink);}
.info-body h2{font-family:var(--font-head); font-weight:700; font-size:22px; color:var(--ink);
  margin:38px 0 12px; padding-top:18px; border-top:1px solid #ece8e1;}

/* FAQ */
.info-faq{margin-top:30px;}
.info-faq .qa{margin:18px 0;}
.info-faq .qa h2{font-family:var(--font-head); font-weight:700; font-size:19px; color:var(--ink); margin:0 0 6px; border:0; padding:0;}
.info-faq .qa p{color:#33333f; line-height:1.9; margin:0;}

/* related rail */
.info-related{margin:40px 0 8px; padding-top:20px; border-top:1px solid #ece8e1;}
.info-related h2{font-family:var(--font-head); font-weight:700; font-size:16px; color:var(--ink); margin-bottom:12px;}
.rel-row{display:flex; flex-wrap:wrap; gap:9px;}
.rel-chip{display:inline-flex; align-items:center; gap:7px; text-decoration:none; font-weight:700; font-size:13px;
  padding:8px 14px; border-radius:var(--pill); background:#F4F1EC; color:var(--ink); border:1px solid #e9e3d9;}
.rel-chip:hover{background:#fff; box-shadow:0 4px 12px rgba(40,30,50,.1);}
.rel-chip.rel-bjs{background:rgba(255,46,115,.10); border-color:rgba(255,46,115,.32); color:var(--brand-coral);}
.rel-chip.rel-art{background:rgba(31,80,180,.08); border-color:rgba(31,80,180,.25); color:var(--flag-blue);}

/* meta + disclaimer + back */
.info-meta{margin-top:28px; font-size:12.5px; color:var(--text-subtle); font-weight:700;}
.info-disclaim{margin-top:8px; font-size:12px; color:var(--text-subtle); line-height:1.6;}
.info-back{margin-top:26px;}

/* glossary hub list */
.info-cat{margin:0 0 38px;}
.info-cat h2{font-family:var(--font-head); font-weight:700; font-size:20px; color:var(--ink);
  margin:0 0 14px; padding-bottom:8px; border-bottom:2px solid #efe6dc;}
.dl{margin:0;}
.dl dt{font-family:var(--font-head); font-weight:700; font-size:16px; color:var(--ink); margin:16px 0 3px;}
/* terms WITH a detail page: coral + soft underline + trailing chevron so they read as links at a glance */
.dl dt a{color:var(--brand-coral); text-decoration:none; border-bottom:1.5px solid rgba(255,46,115,.32);
  transition:border-color .15s, color .15s;}
.dl dt a::after{content:"\f105"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:12px;
  margin-left:5px; opacity:.65; border:0;}
.dl dt a:hover{color:var(--brand-coral); border-bottom-color:var(--brand-coral);}
.dl dt a:hover::after{opacity:1;}
.dl dt .dt-read{font-weight:700; font-size:12.5px; color:var(--text-subtle); margin-left:6px;}
.dl dd{margin:0 0 4px; color:var(--text-muted); font-size:14px; line-height:1.7;}
/* "Read more / 詳しく" promoted to a visible pill button with an arrow */
.dl dd .dt-more{display:inline-flex; align-items:center; gap:5px; vertical-align:middle; margin-left:8px;
  padding:3px 11px; border-radius:var(--pill); background:rgba(255,46,115,.08); color:var(--brand-coral);
  border:1px solid rgba(255,46,115,.28); font-weight:700; font-size:12px; text-decoration:none; white-space:nowrap;
  transition:background .15s, border-color .15s, color .15s;}
.dl dd .dt-more::after{content:"\f061"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:10px;}
.dl dd .dt-more:hover{background:var(--brand-coral); border-color:var(--brand-coral); color:#fff; text-decoration:none;}

/* crew terms with a thumbnail (links to the crew page) */
.dl .term-card{display:flex; gap:15px; align-items:flex-start; margin:18px 0 12px;}
.dl .term-card__thumb{flex:0 0 152px; aspect-ratio:16/10; border-radius:12px; overflow:hidden; display:block;
  background:repeating-linear-gradient(45deg,#E9E4DC,#E9E4DC 9px,#E2DCD2 9px,#E2DCD2 18px); box-shadow:0 4px 12px rgba(40,30,50,.1);}
.dl .term-card__thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s ease;}
.dl .term-card__thumb:hover img{transform:scale(1.05);}
.dl .term-card__body{flex:1 1 auto; min-width:0;}
.dl .term-card__body dt{margin-top:0;}
@media(max-width:600px){
  .dl .term-card{gap:11px;}
  .dl .term-card__thumb{flex-basis:108px;}
}

@media(max-width:560px){
  .info-wrap{padding:24px 16px 56px;}
  .info-body p:first-child{font-size:16px;}
}