/* intro-panel.css — "거룩한 바이블 소개" 화면(TASK-030, REQ-051 — 2026-09-30 사람 승인, TASK-032 앱 이식). 색은 ts-theme-sky.css 토큰만 쓴다(다크는 토큰이 바뀜).
   소개가 열리면(body.ts-intro-open) 성경 뷰어(.sidebar·.main·.six-footer)를 숨기고 같은 칸을 소개가 채운다. 모바일은 Keep 헤더(☰·제목·⚙)를 남긴다. */
body.ts-intro-open .app > .sidebar,
body.ts-intro-open .app > .main,
body.ts-intro-open .app > .six-footer { display: none !important; }

.ts-intro { position: relative; isolation: isolate; flex: 1 1 0; min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; background: transparent; }
.ts-intro::before { content: ""; position: absolute; z-index: 1; top: 50%; left: 50%; width: min(80%, 520px); aspect-ratio: 1; transform: translate(-50%, -50%); background: url('/intro-stamp.png') center / contain no-repeat; opacity: .08; pointer-events: none; }
body.dark-mode .ts-intro::before { filter: brightness(0) invert(1); opacity: .055; }
.ts-intro[hidden] { display: none; }
.ts-intro-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

.ts-intro-head,
.ts-intro-tabs,
.ts-intro-panels { box-sizing: border-box; width: 100%; max-width: 860px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

.ts-intro-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-top: 28px; padding-bottom: 16px; }
.ts-intro-titlebox { min-width: 0; }
.ts-intro-title { margin: 0; font: 800 26px/1.3 var(--ksans); letter-spacing: -.4px; color: var(--ts-ink-strong); outline: none; }
.ts-intro-draft { display: inline-block; margin: 10px 0 0; padding: 5px 10px; border-radius: 8px; background: var(--ts-warn-soft); color: var(--ts-warn-ink); font: 700 12px/1.5 var(--ksans); }

/* 탭 줄: 스크롤해도 위에 붙어 있다(PC·모바일 같음) */
.ts-intro-tabs {
  position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; padding-top: 10px; padding-bottom: 10px;
  background: var(--ts-page-glass); backdrop-filter: blur(12px);
}
/* 메뉴에서 지금 소개가 열려 있음을 보인다 */
.ts-nav-link[data-ts-intro][aria-current="page"], .ts-rail-btn[data-ts-intro][aria-current="page"] { background: var(--ts-accent-soft); color: var(--ts-accent-ink); font-weight: 700; }
.ts-intro-tab {
  flex: 1 1 0; min-width: 0; min-height: 42px; padding: 8px 10px; border: 1px solid var(--ts-line); border-radius: 10px;
  background: var(--ts-surface); color: var(--ts-ink-3); font: 700 14px/1.3 var(--ksans); cursor: pointer;
}
.ts-intro-tab:hover { background: var(--ts-hover); color: var(--ts-ink-2); }
.ts-intro-tab[aria-selected="true"] { background: var(--ts-accent); border-color: var(--ts-accent); color: #fff; box-shadow: 0 2px 6px var(--ts-badge-shadow); }
.ts-intro-tab:focus-visible, .ts-intro-panel:focus-visible { outline: 2px solid var(--ts-accent-2); outline-offset: 2px; }

.ts-intro-panels { padding-top: 8px; padding-bottom: 56px; }
.ts-intro-panel { color: var(--ts-ink); font: 15px/1.8 var(--ksans); border-radius: 6px; }
.ts-intro-panel[hidden] { display: none; }
.ts-intro-h { margin: 26px 0 8px; font: 800 17px/1.4 var(--ksans); color: var(--ts-ink-strong); }
.ts-intro-p { margin: 0 0 12px; }
.ts-intro-note { margin: 12px 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ts-line); background: var(--ts-accent-soft); color: var(--ts-ink-2); font-size: 13.5px; line-height: 1.7; }
.ts-intro-list { margin: 0 0 12px; padding-left: 1.3em; }
.ts-intro-list li { margin: 4px 0; }
.ts-intro-list li::marker { color: var(--ts-accent); }
.ts-intro-dl { margin: 0 0 14px; border: 1px solid var(--ts-line); border-radius: 12px; overflow: hidden; background: var(--ts-surface); }
.ts-intro-dl-row { display: grid; grid-template-columns: minmax(120px, 30%) 1fr; }
.ts-intro-dl-row + .ts-intro-dl-row { border-top: 1px solid var(--ts-line-soft); }
.ts-intro-dl dt { padding: 10px 12px; background: var(--ts-panel); color: var(--ts-ink-strong); font-weight: 700; font-size: 14px; }
.ts-intro-dl dd { margin: 0; padding: 10px 12px; font-size: 14px; line-height: 1.7; }
.ts-intro-timeline { list-style: none; margin: 4px 0 16px; padding: 0 0 0 14px; border-left: 2px solid var(--ts-line); }
.ts-intro-timeline li { position: relative; display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 7px 0; }
.ts-intro-timeline li::before { content: ""; position: absolute; left: -20px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--ts-accent); box-shadow: 0 0 0 3px var(--ts-page); }
.ts-intro-date { font: 700 13px/1.7 var(--ksans); color: var(--ts-accent-ink); font-variant-numeric: tabular-nums; }
.ts-intro-event { font-size: 14.5px; line-height: 1.7; }
.ts-intro-src { margin: 20px 0 0; padding-top: 10px; border-top: 1px dashed var(--ts-line); color: var(--ts-sub); font-size: 12px; line-height: 1.6; }

@media (max-width: 767px) {
  .ts-intro { background: var(--ts-page); }
  .ts-intro-head, .ts-intro-tabs, .ts-intro-panels { padding-left: 16px; padding-right: 16px; }
  .ts-intro-head { display: grid; grid-template-columns: 1fr; align-items: center; padding-top: 16px; padding-bottom: 12px; gap: 10px; }
  .ts-intro-titlebox { display: contents; }
  .ts-intro-title { grid-column: 1; grid-row: 1; }
  .ts-intro-draft { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .ts-intro-title { font-size: 20px; }
  .ts-intro-tabs { gap: 5px; padding-top: 8px; padding-bottom: 8px; }
  .ts-intro-tab { min-height: 44px; padding: 6px 4px; font-size: 13px; }
  .ts-intro-panel { font-size: 15px; }
  .ts-intro-dl-row { grid-template-columns: 1fr; }
  .ts-intro-dl dt { padding-bottom: 4px; }
  .ts-intro-dl dd { padding-top: 4px; }
  .ts-intro-timeline li { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .ts-intro:not([hidden]) .ts-intro-panel:not([hidden]) { animation: ts-intro-in .16s ease-out; }
  @keyframes ts-intro-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}