/* 第39回中国ブロック理学療法士学会 日程表 → 抄録PDF
   スコープは .cbpt-tt / .cbpt-modal 配下のみ。テーマ側のCSSには触れない。

   スマートフォン最優先。説明文・表示切替タブ・表示サイズボタンは置かず、
   拡大縮小はピンチで行う。モーダルは右下の「戻る」で一段ずつ戻る。 */

.cbpt-tt {
  --cbpt-accent: #235b6e;
  --cbpt-accent-weak: #3ca2a2;
  --cbpt-hit: rgba(60, 162, 162, 0.28);
  --cbpt-hit-strong: rgba(60, 162, 162, 0.5);
  --cbpt-line: #d7dee2;
  --cbpt-ink: #1c2b30;
  --cbpt-ink-weak: #5c6f76;
  --cbpt-bg-soft: #f4f7f8;
  --cbpt-radius: 10px;

  color: var(--cbpt-ink);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 2em;
  -webkit-text-size-adjust: 100%;
}

.cbpt-tt *,
.cbpt-tt *::before,
.cbpt-tt *::after { box-sizing: border-box; }

/* テーマ（Lightning）の見出し・リスト装飾がこの中に入ってこないようにする */
.cbpt-tt h2, .cbpt-tt h3, .cbpt-tt h4,
.cbpt-modal h2, .cbpt-modal h3, .cbpt-modal h4 {
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  font-family: inherit;
}
.cbpt-tt h2::before, .cbpt-tt h3::before, .cbpt-tt h4::before,
.cbpt-tt h2::after, .cbpt-tt h3::after, .cbpt-tt h4::after,
.cbpt-modal h2::before, .cbpt-modal h3::before, .cbpt-modal h4::before,
.cbpt-modal h2::after, .cbpt-modal h3::after, .cbpt-modal h4::after { content: none; display: none; }
.cbpt-tt ul, .cbpt-tt li,
.cbpt-modal ul, .cbpt-modal li {
  list-style: none;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}
.cbpt-tt ul::before, .cbpt-tt li::before,
.cbpt-modal ul::before, .cbpt-modal li::before { content: none; display: none; }

.cbpt-tt__loading,
.cbpt-tt__error {
  padding: 2em 1em;
  text-align: center;
  color: var(--cbpt-ink-weak);
  background: var(--cbpt-bg-soft);
  border-radius: var(--cbpt-radius);
}
.cbpt-tt__error { color: #9b2c2c; background: #fdf3f3; }

/* ---------- 操作バー（日付の切替だけ） ---------- */

.cbpt-tt__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 10px;
}

.cbpt-tt__group {
  display: inline-flex;
  border: 1px solid var(--cbpt-line);
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}

.cbpt-tt__group button {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--cbpt-ink-weak);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  padding: 11px 16px;
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
}
.cbpt-tt__group button + button { border-left: 1px solid var(--cbpt-line); }
.cbpt-tt__group button[aria-pressed="true"],
.cbpt-tt__group button[aria-selected="true"] {
  background: var(--cbpt-accent);
  color: #fff;
  font-weight: 700;
}
.cbpt-tt__group button:focus-visible { outline: 3px solid var(--cbpt-accent-weak); outline-offset: -3px; }

.cbpt-tt__spacer { flex: 1 1 auto; }

/* ---------- 日程表（画像＋当たり判定＋ピンチ拡大） ---------- */

/* 枠の高さは等倍時のまま固定し、中身だけを transform で拡大する。
   こうしておくと、拡大してもページ全体のレイアウトが動かない。 */
.cbpt-tt__viewport {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--cbpt-line);
  border-radius: var(--cbpt-radius);
  background: #fff;
  /* 1本指の縦方向は、拡大しているかどうかに関わらず常にブラウザに預ける。
     ここで touch-action: none にすると、日程表の上に指を置いたまま
     ページを下に送れなくなる（日程表が画面をほぼ埋めるので実質行き止まりになる）。
     拡大中に中身を動かしたいときだけ、JS側が touchmove で preventDefault して奪う。

     overscroll-behavior は指定しないこと。
     この要素は overflow:hidden なのでブラウザからは「スクロール領域」に見え、
     contain を付けると **ページへのスクロールの伝播が止まる**。
     それで「日程表の上でスクロールが効かない」状態になっていた。 */
  touch-action: pan-y;
}
.cbpt-tt__viewport.is-zoomed { cursor: grab; }
.cbpt-tt__viewport.is-dragging { cursor: grabbing; }

.cbpt-tt__zoom {
  transform-origin: 0 0;
  will-change: transform;
}

.cbpt-tt__crop {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.cbpt-tt__crop::before {
  content: "";
  display: block;
  padding-top: calc(var(--cbpt-crop-h) * 100%);
}

.cbpt-tt__inner {
  position: absolute;
  left: 0;
  top: calc(var(--cbpt-crop-off) * -100%);
  width: 100%;
}

.cbpt-tt__img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

.cbpt-tt__hit {
  position: absolute;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  text-indent: -9999px;
  transition: background-color .12s ease, border-color .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.cbpt-tt__hit::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cbpt-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/9px 9px no-repeat;
  opacity: .55;
}
.cbpt-tt__hit:hover,
.cbpt-tt__hit:focus-visible {
  background: var(--cbpt-hit);
  border-color: var(--cbpt-accent);
  outline: none;
}
.cbpt-tt__hit:hover::after,
.cbpt-tt__hit:focus-visible::after { opacity: 1; }
.cbpt-tt__hit:active { background: var(--cbpt-hit-strong); }

/* ピンチで拡大したときだけ出る「等倍に戻す」 */
.cbpt-tt__reset {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: 12.5px;
  line-height: 1;
  padding: 10px 14px;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  background: rgba(24, 40, 46, .82);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(10, 25, 30, .28);
}
.cbpt-tt__reset[hidden] { display: none; }
.cbpt-tt__reset:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- モーダル ---------- */

.cbpt-modal {
  position: fixed;
  inset: 0;
  z-index: 1000000; /* テーマの固定ボタン（99999）より上に出す */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  font-size: 15px;
  line-height: 1.6;
  color: #1c2b30;
}
.cbpt-modal[hidden] { display: none; }
.cbpt-modal *,
.cbpt-modal *::before,
.cbpt-modal *::after { box-sizing: border-box; }

.cbpt-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 32, 38, .62);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: cbpt-fade .16s ease;
}

.cbpt-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(920px, 100%);
  height: min(88vh, 100%);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(10, 25, 30, .38);
  overflow: hidden;
  animation: cbpt-pop .18s cubic-bezier(.2, .8, .3, 1);
}

@keyframes cbpt-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes cbpt-pop { from { opacity: 0; transform: translateY(10px) scale(.985) } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .cbpt-modal__backdrop, .cbpt-modal__panel { animation: none; }
}

.cbpt-modal__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px 12px 18px;
  border-bottom: 1px solid #e4eaec;
  background: linear-gradient(#fbfdfd, #f2f6f7);
}
.cbpt-modal__titles { flex: 1 1 auto; min-width: 0; }
.cbpt-modal__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #3ca2a2;
  margin-bottom: 2px;
}
.cbpt-modal .cbpt-modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  word-break: break-word;
}
.cbpt-modal__note {
  margin: 3px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: #2f4a52;
  line-height: 1.45;
}
.cbpt-modal__note[hidden] { display: none; }
.cbpt-modal__meta { margin: 4px 0 0; font-size: 13px; color: #5c6f76; }

/* 「×」は一気に全部閉じるボタン。PCだけに出す（狭い画面では下の「戻る」を使う） */
.cbpt-modal__close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid #d7dee2;
  border-radius: 50%;
  background: #fff;
  color: #3b4c52;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.cbpt-modal__close:hover { background: #eef3f4; }
.cbpt-modal__close:focus-visible { outline: 3px solid #3ca2a2; outline-offset: 2px; }

.cbpt-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #eef2f3;
  overscroll-behavior: contain;
  /* 2本指のピンチをこちらで拾い、1本指のスクロールは今までどおりにする */
  touch-action: pan-x pan-y;
}

.cbpt-modal__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid #e4eaec;
  background: #fbfdfd;
}
.cbpt-modal__foot .cbpt-tt__spacer { flex: 1 1 auto; }

.cbpt-btn {
  -webkit-appearance: none;
  appearance: none;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid #d7dee2;
  border-radius: 999px;
  background: #fff;
  color: #26383e;
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cbpt-btn[hidden] { display: none; }
.cbpt-btn:hover:not(:disabled) { background: #eef3f4; }
.cbpt-btn:focus-visible { outline: 3px solid #3ca2a2; outline-offset: 2px; }
.cbpt-btn:disabled { opacity: .4; cursor: default; }
.cbpt-btn--primary { background: #235b6e; border-color: #235b6e; color: #fff; }
.cbpt-btn--primary:hover:not(:disabled) { background: #1b4a5a; }

/* 右下の「戻る」。押しやすいように少し大きめに。 */
.cbpt-modal__back {
  min-height: 44px;
  padding: 10px 22px;
  font-weight: 700;
}

.cbpt-modal__pageno { font-size: 13px; color: #5c6f76; min-width: 5.5em; text-align: center; }
.cbpt-modal__pageno[hidden] { display: none; }

/* 演題一覧（二段階の1段目） */

.cbpt-picker { padding: 12px; }
.cbpt-modal .cbpt-picker__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.cbpt-abs {
  display: flex;
  gap: 10px;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #dfe6e8;
  border-radius: 10px;
  cursor: pointer;
  color: inherit;
}
.cbpt-abs:hover { border-color: #3ca2a2; background: #f7fbfb; }
.cbpt-abs:focus-visible { outline: 3px solid #3ca2a2; outline-offset: 2px; }
.cbpt-abs__id {
  flex: 0 0 auto;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #3ca2a2;
  border-radius: 5px;
  padding: 4px 7px;
  letter-spacing: .02em;
}
.cbpt-abs__body { min-width: 0; }
.cbpt-abs__title { display: block; font-weight: 600; font-size: 14.5px; }
.cbpt-abs__by { display: block; margin-top: 3px; font-size: 12.5px; color: #5c6f76; }

/* PDFビュー */

/* 拡大時に横スクロールしても左端が切れないよう、flex ではなく auto マージンで中央寄せする */
.cbpt-pdf { padding: 12px; transform-origin: 0 0; }
.cbpt-pdf canvas {
  display: block;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 2px 12px rgba(20, 40, 45, .18);
  border-radius: 3px;
}
.cbpt-pdf__status {
  padding: 3em 1em;
  text-align: center;
  color: #5c6f76;
  font-size: 14px;
}
.cbpt-pdf__status p { margin: 0; }
.cbpt-pdf__status--error { color: #9b2c2c; }
.cbpt-pdf__fallback { margin: 14px 0 0 !important; }
.cbpt-pdf__spinner {
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto 10px;
  border: 3px solid #cfdadd;
  border-top-color: #3ca2a2;
  border-radius: 50%;
  animation: cbpt-spin .8s linear infinite;
}
@keyframes cbpt-spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .cbpt-pdf__spinner { animation-duration: 2.4s } }

body.cbpt-modal-open { overflow: hidden; }

/* ---------- 狭い画面 ---------- */

/* 「×」（一気に全部閉じる）を出さない条件。
   狭い画面ではモーダルだと気づきにくいので、右下の「戻る」で一段ずつ戻す。
   横向きのスマホは幅が 800px 超になるので、幅だけで判定すると PC 扱いになってしまう。
   そのため「縦に短い横向き」も同じ扱いにする。 */
@media (max-width: 767px) {
  .cbpt-modal__close { display: none; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .cbpt-modal__close { display: none; }
}

@media (max-width: 640px) {
  .cbpt-modal { padding: 0; }
  .cbpt-modal__panel { width: 100%; height: 100%; border-radius: 0; }
  .cbpt-modal .cbpt-modal__title { font-size: 16.5px; }
  .cbpt-modal__head { padding: 12px 14px 10px; }
  .cbpt-pdf { padding: 8px; }
  .cbpt-modal__foot {
    gap: 6px;
    padding: 8px 10px max(8px, env(safe-area-inset-bottom));
  }
  .cbpt-modal__foot .cbpt-btn { padding: 8px 11px; font-size: 13px; min-height: 38px; }
  .cbpt-modal__back { padding: 8px 18px; min-height: 42px; }
  .cbpt-modal__pageno { font-size: 12px; min-width: 0; }
}

/* ---------- 端末を横にしたとき ---------- */
/* 抄録の1行を長く見せるのが目的なので、見出し類は畳んでセッション名の1行だけ残し、
   ボタン列も薄くして、残りを全部 抄録の表示面積にまわす。 */

@media (orientation: landscape) and (max-height: 560px) {
  .cbpt-modal { padding: 0; }
  .cbpt-modal__panel { width: 100%; height: 100%; border-radius: 0; }

  .cbpt-modal__head {
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px max(10px, env(safe-area-inset-left));
  }
  .cbpt-modal__eyebrow,
  .cbpt-modal__note,
  .cbpt-modal__meta { display: none; }
  .cbpt-modal .cbpt-modal__title {
    font-size: 13.5px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cbpt-pdf { padding: 2px 0; }
  .cbpt-pdf canvas { border-radius: 0; box-shadow: none; }

  .cbpt-modal__foot {
    gap: 5px;
    padding: 4px max(8px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  .cbpt-modal__foot .cbpt-btn { min-height: 32px; padding: 5px 11px; font-size: 12.5px; }
  .cbpt-modal__back { min-height: 32px; padding: 5px 16px; }
  .cbpt-modal__pageno { font-size: 11.5px; min-width: 0; }

  .cbpt-picker { padding: 8px; }
  .cbpt-modal .cbpt-picker__list {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  }
}