/* ============================================================
   2026年度 情報処理学会関西支部 支部大会 プログラムサイト
   共通スタイルシート（v2：シンプル版）
   参考：情報処理学会 全国大会タイムテーブル / JSAI2025 参加案内
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');

:root{
  --bg:        #FFFFFF;
  --surface:   #F5F6F7;   /* 表のヘッダー等の淡いグレー */
  --ink:       #222222;
  --muted:     #666666;
  --primary:   #1F3F5C;   /* 見出し・リンク・ナビの紺 */
  --primary-2: #14293C;
  --accent:    #C98A2C;   /* バッジ・強調用ゴールド（控えめに使用） */
  --accent-ink:#4A3210;
  --brick:     #8B3A3A;   /* ◎バッジ等の第2アクセント */
  --line:      #D9DCDF;   /* 罫線色 */
  --line-strong:#B7BCC1;

  --font-body: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
}

html{
  -webkit-text-size-adjust: 100%;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

a{ color: var(--primary); }
a:hover{ color: var(--accent-ink); }
a:focus-visible, button:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }

img{ max-width:100%; height:auto; display:block; }

.wrap{
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 24px);
}

/* ---------- サイト共通ヘッダー ---------- */
.site-header{
  background: var(--primary);
  color:#fff;
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  padding-top:14px;
  padding-bottom:14px;
}
.site-header .brand{
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:.01em;
  color:#fff;
  text-decoration:none;
}
.site-header .brand small{
  display:block;
  font-size:.68rem;
  color:#C7D2DB;
  font-weight:400;
  letter-spacing:.06em;
}
.site-nav{ display:flex; gap:2px; flex-wrap:wrap; }
.site-nav a{
  color:#fff;
  text-decoration:none;
  font-size:.85rem;
  padding:7px 12px;
  border-bottom:2px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"]{
  border-bottom-color: var(--accent);
}

/* ---------- パンくず ---------- */
.crumb{
  font-size:.8rem;
  color: var(--muted);
  margin: 20px 0 6px;
}
.crumb a{ color:var(--muted); }

/* ---------- 見出し類 ---------- */
h1,h2,h3{
  color: var(--primary-2);
  line-height:1.5;
  margin: 0 0 .5em;
  font-weight:700;
}
.page-title{
  font-size:1.5rem;
  border-bottom:3px solid var(--primary);
  padding-bottom:10px;
  margin-top:28px;
}
.section-title{
  font-size:1.2rem;
  color: var(--primary);
  border-left:6px solid var(--primary);
  padding:4px 12px;
  margin: 44px 0 18px;
  background: var(--surface);
}

/* ---------- 概要ボックス（トップページ用） ---------- */
.overview-box{
  border:1px solid var(--line);
  background: var(--surface);
  padding: 16px 20px;
  margin-top: 18px;
  font-size:.92rem;
}
.overview-box dl{
  display:grid;
  grid-template-columns: 90px 1fr;
  gap:6px 12px;
  margin:0;
}
.overview-box dt{ color:var(--muted); }
.overview-box dd{ margin:0; }

/* ---------- 発表・講演の情報ボックス ---------- */
.session-box{
  border:1px solid var(--line);
  margin-bottom: 20px;
}
.session-box-head{
  background: var(--primary);
  color:#fff;
  padding: 12px 18px;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  font-size:.88rem;
}
.session-box-head .s-title{
  font-weight:700;
  font-size:1.05rem;
  margin-right:auto;
}
.session-box-body{ padding: 16px 18px 18px; }
.session-box .note{
  color:var(--muted);
  font-size:.86rem;
  margin: 0 0 14px;
}

/* ---------- 発表リスト ---------- */
.paper-list{
  list-style:none;
  margin:0; padding:0;
  border-top:1px solid var(--line);
}
.paper{
  display:grid;
  grid-template-columns: 90px 1fr;
  gap: 4px 18px;
  padding: 14px 4px;
  border-bottom:1px solid var(--line);
}
.paper-id{
  font-weight:700;
  color: var(--primary);
  font-size:.88rem;
  padding-top:2px;
}
.paper-title{
  font-weight:700;
  font-size:1rem;
  margin:0 0 6px;
}
.paper-authors{
  color: var(--muted);
  font-size:.92rem;
  margin:0;
}
.paper-abstract{
  color: var(--ink);
  font-size:.9rem;
  margin:8px 0 0;
  padding-top:8px;
  border-top:1px dashed var(--line);
}
.paper-note{
  color:#8a7a4a;
  font-size:.8rem;
  background:#FBF3DD;
  border:1px dashed #D9C084;
  display:inline-block;
  padding:2px 8px;
  margin-top:6px;
}

/* ---------- バッジ（◎†★◆） 元のデザインを維持 ---------- */
.badges{ display:inline-flex; gap:6px; margin-left:6px; }
.badge{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  border-radius:3px;
  padding:1px 6px;
  border:1px solid currentColor;
}
.badge.b-star{ color:var(--brick); }
.badge.b-dagger{ color:var(--primary); }
.badge.b-diamond{ color:#6b8e4e; }
.badge.b-ce{ color:var(--accent-ink); }

/* ---------- 凡例 ---------- */
.legend{
  font-size:.82rem;
  color: var(--muted);
  background: var(--surface);
  border:1px solid var(--line);
  padding: 12px 16px;
  margin-top: 22px;
}
.legend dt{ font-weight:700; color:var(--ink); display:inline; }
.legend dd{ display:inline; margin:0 18px 0 4px; }

/* ---------- スケジュール表 ---------- */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  border:1px solid var(--line);
}
.schedule{
  width:100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size:.86rem;
}
.schedule th, .schedule td{
  border:1px solid var(--line);
  padding: 10px 10px;
  vertical-align: top;
  text-align:left;
}
.schedule thead th{
  background: var(--primary);
  color:#fff;
  font-weight:700;
  font-size:.8rem;
  white-space:nowrap;
}
.schedule tbody th{
  background: var(--surface);
  font-weight:700;
  white-space:nowrap;
  color:var(--primary-2);
  width:9em;
  position:sticky;
  left:0;
}
.schedule thead th:first-child{
  position:sticky;
  left:0;
  z-index:2;
}
.schedule tr.poster-row th{ color: var(--accent-ink); }
.schedule .item + .item{ margin-top:10px; }
.schedule .item .t{
  display:block;
  font-size:.76rem;
  color:var(--muted);
}
.schedule .item a{ font-weight:700; text-decoration:underline; }
.schedule .item .plain{ font-weight:700; color:var(--ink); }
.schedule td.empty{ color:#B9BEC2; }
.schedule .poster-link{
  display:inline-block;
  font-weight:700;
  background: #FBF3DD;
  border:1px solid var(--accent);
  color: var(--accent-ink);
  padding:4px 10px;
  text-decoration:none;
}
.schedule .poster-link:hover{ background:#F5E6BD; }

/* ---------- スピーカー（講演者）ブロック ---------- */
.speaker{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  align-items:start;
  padding: 22px 0;
  border-top:1px solid var(--line);
}
.speaker:first-of-type{ border-top:none; }
.speaker-photo{
  width:100%;
  background: var(--surface);
  border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;
  color:#9AA1A7;
  font-size:.72rem;
  text-align:center;
  overflow:hidden;
}
.speaker-photo img{ width:100%; height:auto; }
.talk-title{
  font-size:1.1rem;
  font-weight:700;
  color: var(--primary-2);
  margin: 2px 0 10px;
}
.talk-meta{
  font-size:.8rem;
  color: var(--brick);
  border:1px solid var(--brick);
  display:inline-block;
  padding:2px 8px;
  margin-bottom:10px;
}
.speaker-name{ font-weight:700; margin:14px 0 2px; }
.speaker-affil{ color:var(--muted); font-size:.9rem; margin:0 0 8px; }
.speaker-bio{ font-size:.9rem; color:var(--ink); }

/* ---------- Hero（トップページ見出し部） ---------- */
.hero{
  margin-top: 26px;
  background: var(--surface);
  border:1px solid var(--line);
  padding: 30px 28px;
}
.hero-eyebrow{
  font-size:.78rem;
  letter-spacing:.08em;
  color: var(--muted);
}
.hero h1{
  color: var(--primary-2);
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  margin: 8px 0 16px;
}
.hero dl{
  display:grid;
  grid-template-columns: max-content 1fr;
  gap:6px 14px;
  margin:0;
  font-size:.92rem;
}
.hero dt{ color:var(--muted); }
.hero dd{ margin:0; font-weight:700; }

/* ---------- フッター ---------- */
.site-footer{
  margin-top: 60px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size:.82rem;
  padding: 20px 0 50px;
}

/* ============================================================
   レスポンシブ
   ============================================================ */

/* ---- タブレット（〜900px） ---- */
@media (max-width: 900px){
  .speaker{ grid-template-columns: 120px 1fr; gap:16px; }
  .hero{ padding: 24px 22px; }
}

/* ---- スマートフォン（〜640px） ---- */
@media (max-width: 640px){
  body{ line-height:1.75; }

  .site-header .wrap{
    flex-direction:column;
    align-items:flex-start;
    padding-top:12px;
    padding-bottom:0;
  }
  .site-nav{
    width:100%;
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:1px;
    border-top:1px solid rgba(255,255,255,.18);
    margin-top:10px;
  }
  .site-nav a{
    text-align:center;
    padding:10px 6px;
    font-size:.76rem;
    border-bottom:2px solid transparent;
  }

  .page-title{ font-size:1.25rem; }
  .section-title{ font-size:1.05rem; margin:34px 0 14px; }

  .hero{ padding:20px 16px; }
  .hero h1{ font-size:1.35rem; }
  .hero dl{ font-size:.86rem; }

  .paper{ grid-template-columns: 1fr; }
  .paper-id{ padding-top:0; }

  .speaker{ grid-template-columns: 96px 1fr; gap:12px; }

  .session-box-head{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    padding:12px 14px;
  }
  .session-box-head .s-title{ margin-right:0; }
  .session-box-body{ padding:14px 14px 16px; }

  .legend{ font-size:.8rem; }
  .legend dt, .legend dd{ display:block; margin:0; }
  .legend dd{ margin:0 0 8px 0; }
  .legend dd:last-child{ margin-bottom:0; }

  .schedule{ font-size:.78rem; }
  .schedule th, .schedule td{ padding:8px 8px; }

  .overview-box dl{ grid-template-columns: 1fr; }
  .overview-box dt{ margin-top:8px; }

  .crumb{ font-size:.75rem; }
}

/* ---- 小型スマートフォン（〜400px） ---- */
@media (max-width: 400px){
  .site-header .brand{ font-size:.92rem; }
  .site-nav{ grid-template-columns: 1fr 1fr; }
  .speaker{ grid-template-columns: 1fr; }
  .hero h1{ font-size:1.15rem; }
  .schedule{ font-size:.72rem; }
  .schedule th, .schedule td{ padding:6px 6px; }
  .talk-title{ font-size:1rem; }
}

/* ---- 印刷時（プログラムを印刷して持ち歩く場合を考慮） ---- */
@media print{
  .site-header, .site-footer, .crumb{ display:none; }
  .table-scroll{ overflow:visible; }
  a{ color:var(--ink); text-decoration:none; }
}