:root {
  font-family: "Noto Sans Sinhala", "Nirmala UI", system-ui, sans-serif;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* 검색 패널이 덮개로 열릴 때 배경 스크롤을 잠근다. 잠그면 스크롤 막대가
     사라져 폭이 그만큼 넓어지고 본문이 옆으로 튄다. 자리를 늘 비워 두면
     열고 닫을 때 화면이 움직이지 않는다. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
}

/* 덮개가 열려 있는 동안 배경이 따라 움직이지 않게 한다. overflow:hidden
   만으로는 iOS 에서 배경이 계속 움직이고 스크롤 위치도 튄다. body 를
   통째로 띄우고 원래 위치는 인라인 top 에 실어 둔다(search-panel.js). */
body[data-scroll-locked] {
  position: fixed;
  right: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.search-field input {
  min-width: 0;
}

.search-field button,
.listen-link,
.transcript-line,
.demo-player button,
.text-link {
  min-height: 2.75rem;
}

.example-query {
  min-height: 2.25rem;
}

mark {
  color: inherit;
  font-weight: 750;
}

:focus-visible {
  outline: 3px solid var(--focus-color, #d18a24);
  outline-offset: 3px;
}@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* 길이만 0으로 만들면 지연은 그대로 남는다. 덮개를 닫을 때 쓰는
     "visibility 를 애니메이션 길이만큼 늦춰 끄기"가 이 경우 지연만 남아,
     움직임을 줄인 사람에게는 패널이 한동안 보이지 않는 상태로 멈춘다.
     그래서 지연도 같이 0으로 만든다. */
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0.01ms !important;
  }}
/* ---------------------------------------------------------------
   B안 · 아카이브 작업대
   색은 모두 토큰으로만 쓴다. 하드코딩한 색은 이 블록 밖에 두지 않는다.
   --------------------------------------------------------------- */

/* 싱할라 웹폰트. 기기 설치 폰트에 맡기면 안드로이드(Noto)·윈도우(Nirmala)·
   iOS(Sangam)가 각각 다른 자형과 줄높이로 그려서, 결합기호가 기준선 위아래로
   뻗는 싱할라에서는 잰 간격이 기기마다 어긋난다. 웹폰트로 고정해야 44px 탭
   영역 같은 값이 한 번 재서 성립한다.

   패밀리 이름을 시스템 폰트와 다르게 둔 것은 의도다. 같은 이름을 쓰면
   @font-face 가 설치 폰트를 가려 fallback 사슬이 보이지 않는다.
   출처: Google Fonts, Noto Sans Sinhala v36 싱할라 서브셋 가변, OFL 1.1
   (fonts/OFL.txt). 갱신하면 자형 폭이 바뀌므로 버전을 함께 올린다. */
@font-face {
  font-family: "Noto Sans Sinhala Web";
  src: url("/static/fonts/noto-sans-sinhala-v36-sinhala-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0964-0965, U+0D81-0DF4, U+1CF2, U+200C-200D, U+25CC,
    U+111E1-111F4;
}

:root {
  --bar-height: 3.5rem;
  --mobile-toolbar-height: 4rem;

  --bg: #f3f0e8;
  --surface: #fffdf8;
  --surface-sunken: #ece7db;
  --surface-raised: #ffffff;
  --border: #ded6c6;
  --border-strong: #c3baa7;

  --text: #1f2a24;
  --text-strong: #14291f;
  --text-muted: #6b736e;
  --text-faint: #98a09a;

  --accent: #265a43;
  --accent-hover: #1c4433;
  --accent-text: #ffffff;
  --accent-soft: #e2ede6;

  --amber: #a86a15;
  --amber-line: #d09a49;
  --amber-soft: #fdf1d5;

  --mark-bg: #ffe08a;
  --mark-text: #3a2c05;

  --shadow-low: 0 1px 2px rgb(52 45 32 / 7%);
  --shadow-mid: 0 0.35rem 1.1rem rgb(52 45 32 / 9%);
  --shadow-bar: 0 1px 0 var(--border), 0 0.4rem 1rem rgb(52 45 32 / 5%);

  --focus-color: #a86a15;

  /* 싱할라 문자를 먼저 찾고, 한국어는 그다음 글꼴로 넘어간다.
     웹폰트가 먼저고 설치 폰트들은 로딩 실패·차단 대비 fallback 이다.
     한국어는 웹폰트로 받지 않는다 — 한글은 자형이 1만 자를 넘어 파일이
     크고, 시스템 폰트로 충분하다. */
  font-family: "Noto Sans Sinhala Web", "Noto Sans Sinhala", "Nirmala UI",
    "Sinhala Sangam MN", "Kohinoor Sinhala", "Malgun Gothic",
    "Apple SD Gothic Neo", system-ui, sans-serif;

  color-scheme: light;
}@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-surface="admin"]) {
    --bg: #14181a;
    --surface: #1c2124;
    --surface-sunken: #101416;
    --surface-raised: #232a2d;
    --border: #313a3e;
    --border-strong: #45524f;

    --text: #e3e6e1;
    --text-strong: #f2f4ef;
    --text-muted: #9aa5a0;
    --text-faint: #79837e;

    --accent: #74b795;
    --accent-hover: #8fcaab;
    --accent-text: #10201a;
    --accent-soft: #22332b;

    --amber: #e0aa5e;
    --amber-line: #8a6a33;
    --amber-soft: #2c2519;

    --mark-bg: #6d5620;
    --mark-text: #ffeec2;

    --shadow-low: 0 1px 2px rgb(0 0 0 / 35%);
    --shadow-mid: 0 0.35rem 1.1rem rgb(0 0 0 / 40%);
    --shadow-bar: 0 1px 0 var(--border), 0 0.4rem 1rem rgb(0 0 0 / 30%);

    --focus-color: #e0aa5e;

    color-scheme: dark;
  }}

:root[data-theme="dark"]:not([data-surface="admin"]) {
  --bg: #14181a;
  --surface: #1c2124;
  --surface-sunken: #101416;
  --surface-raised: #232a2d;
  --border: #313a3e;
  --border-strong: #45524f;

  --text: #e3e6e1;
  --text-strong: #f2f4ef;
  --text-muted: #9aa5a0;
  --text-faint: #79837e;

  --accent: #74b795;
  --accent-hover: #8fcaab;
  --accent-text: #10201a;
  --accent-soft: #22332b;

  --amber: #e0aa5e;
  --amber-line: #8a6a33;
  --amber-soft: #2c2519;

  --mark-bg: #6d5620;
  --mark-text: #ffeec2;

  --shadow-low: 0 1px 2px rgb(0 0 0 / 35%);
  --shadow-mid: 0 0.35rem 1.1rem rgb(0 0 0 / 40%);
  --shadow-bar: 0 1px 0 var(--border), 0 0.4rem 1rem rgb(0 0 0 / 30%);

  --focus-color: #e0aa5e;

  color-scheme: dark;
}

body {
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

mark {
  padding: 0 0.1em;
  border-radius: 0.2em;
  color: var(--mark-text);
  background: var(--mark-bg);
}

/* ── 상단 바 ────────────────────────────────────────────────── */

.app-bar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  height: var(--bar-height);
  padding: 0 1rem;
  background: var(--surface);
  box-shadow: var(--shadow-bar);
}

.app-brand {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0;
  border: 0;
  color: var(--text-strong);
  background: none;
  font-size: 0.98rem;
  font-weight: 800;
}

.brand-name {
  white-space: nowrap;
}

.brand-mark {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border-radius: 0.5rem;
  color: var(--accent-text);
  background: var(--accent);
  font-size: 0.95rem;
}

/* ── 아이콘 ─────────────────────────────────────────────────
   스프라이트 심볼은 기하만 갖고 있다. 굵기·색·크기는 전부 여기서
   준다(본 웹앱 web/static/styles.css 의 .lucide-icon 과 같은 규약).
   색을 currentColor 로 두면 버튼의 상태 색을 그대로 따라간다. */
.lucide-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}/* 아이콘만 든 버튼은 글자 상자가 없어 기본 정렬로는 가운데가 맞지 않는다. */
.icon-button,
.bar-nav a,
.theme-toggle,
.language-toggle,
.panel-toggle,
.input-tool,
.submit-search,
.row-action,
.follow-switch,
.follow-return,
.show-more,
.query-chip,
.section-head a,
.correction-actions button {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  justify-content: center;
}

/* 법문 화면은 상단 바 가운데에 법문 id 를 보인다. 다른 화면에서는 빈
   칸으로 남아 좌우를 벌려 놓는 몫만 한다. */
.bar-ident {
  display: flex;
  align-items: center;
  min-width: 0;
}

.bar-nav {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.bar-nav a {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.5rem;
  color: var(--accent);
  text-decoration: none;
}

.bar-nav a:hover {
  background: var(--accent-soft);
}.theme-toggle,
.language-toggle {
  height: 2.1rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: var(--text-muted);
  background: var(--bg);
  font-size: 1rem;
}

.theme-toggle,
.language-toggle {
  width: 2.1rem;
}.theme-toggle:hover,
.language-toggle:hover {
  color: var(--text-strong);
  border-color: var(--border-strong);
}

/* 검색 패널을 여닫는다. 테마 전환과 같은 꼴이되, 열려 있는 동안은
   그 사실이 보여야 하므로 강조색으로 뒤집는다. */
.panel-toggle {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: var(--text-muted);
  background: var(--bg);
}

.panel-toggle:hover {
  color: var(--text-strong);
  border-color: var(--border-strong);
}

.panel-toggle[aria-expanded="true"] {
  color: var(--accent-text);
  border-color: var(--accent);
  background: var(--accent);
}

.placeholder-notice {
  margin: 0;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--amber-line);
  color: var(--amber);
  background: var(--amber-soft);
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
}

.app-main {
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2rem 0 5rem;
}

/* ── 홈 ─────────────────────────────────────────────────────── */

.home-inner {
  width: min(46rem, 100%);
  margin: 0 auto;
  padding-top: 2rem;
}

.eyebrow {
  margin: 0;
  color: var(--amber);
  font-size: 0.9rem;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.home-hero h1 {
  margin: 0.5rem 0 0.7rem;
  color: var(--text-strong);
  font-size: clamp(1.9rem, 5.5vw, 2.9rem);
  line-height: 1.25;
}

.lede {
  margin: 0;
  color: var(--text-muted);
  font-size: 1.02rem;
}

.search-block {
  margin-top: 1.8rem;
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: var(--surface);
  box-shadow: var(--shadow-mid);
}

.search-block > label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.search-field {
  display: flex;
  gap: 0.45rem;
}

.search-field input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 2.9rem;
  padding: 0 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.6rem;
  color: inherit;
  background: var(--surface-raised);
  font-size: 1.02rem;
}

.input-tool {
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 0.6rem;
  color: var(--text);
  background: var(--bg);
  font-size: 1.05rem;
}

.input-tool[aria-expanded="true"] {
  color: var(--accent-text);
  border-color: var(--accent);
  background: var(--accent);
}

.submit-search {
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 0;
  border-radius: 0.6rem;
  color: var(--accent-text);
  background: var(--accent);
}

.submit-search:hover {
  background: var(--accent-hover);
}

.input-panel {
  margin-top: 0.7rem;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--bg);
}

.input-panel label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
  font-weight: 700;
}

.input-panel input {
  width: 100%;
  height: 2.6rem;
  padding: 0 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.55rem;
  color: inherit;
  background: var(--surface-raised);
}

.panel-help {
  margin: 0.5rem 0 0;
  color: var(--text-muted);
  font-size: 0.87rem;
}

/* 자판은 어느 폭에서든 5열이다. 한 줄이 වර්ග 하나라 열 수가 흔들리면
   구획이 무너진다. 그래서 넓은 화면에서는 칸을 늘리는 대신 자판 자체의
   폭을 묶어 둔다. */
.keyboard-panel {
  max-width: 22rem;
}

.keyboard-block {
  margin-bottom: 0.9rem;
}

.keyboard-block:last-of-type {
  margin-bottom: 0;
}

.keyboard-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.3rem;
  margin-bottom: 0.3rem;
}

.keyboard-row:last-child {
  margin-bottom: 0;
}

/* 블록 사이 여백이 구획을 만드는 유일한 신호다. 동작 줄은 글자가 아니므로
   한 칸 더 띄워 떼어 놓는다. 자리는 자판 맨 위 — 지우기와 검색이
   스크롤 너머로 밀리지 않게. */
.keyboard-action-row {
  grid-template-columns: minmax(0, 1fr) 3.5rem;
  margin-bottom: 0.9rem;
}

.keyboard-search {
  grid-column: 1 / -1;
}

.keyboard-key {
  min-height: 2.5rem;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  color: var(--text);
  background: var(--surface-raised);
  box-shadow: var(--shadow-low);
}

.keyboard-key:hover {
  border-color: var(--amber-line);
  background: var(--amber-soft);
}

.examples {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.85rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.chip {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--accent);
  background: var(--bg);
  font-size: 0.9rem;
  font-weight: 650;
}

.chip:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.home-collections {
  margin-top: 2.2rem;
}

.section-head {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.section-head h2 {
  margin: 0;
  color: var(--text-strong);
  font-size: 1.15rem;
}

.section-head a {
  width: 2.2rem;
  height: 2.2rem;
  align-self: center;
  color: var(--accent);
  text-decoration: none;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.7rem;
}

.collection-card {
  display: grid;
  gap: 0.2rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--surface);
  text-align: left;
}

.collection-card:hover {
  border-color: var(--amber-line);
  box-shadow: var(--shadow-mid);
}

.collection-card .name {
  color: var(--text-strong);
  font-weight: 750;
}

.collection-card .series,
.collection-card .count {
  color: var(--text-muted);
  font-size: 0.87rem;
}

/* ── 검색 결과 ──────────────────────────────────────────────── */

.results-head {
  margin-bottom: 1.2rem;
}

/* 질의 띠. 패널이 펼쳐져 있는 넓은 화면에서는 검색창이 같은 말을 이미
   하고 있으므로 나오지 않는다 — 좁은 화면 media query 에서만 켠다. */
.query-chip {
  display: none;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  margin-bottom: 0.6rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  color: var(--text-muted);
  background: var(--surface);
  text-align: left;
}

.query-chip-text {
  flex: 1;
  min-width: 0;
  color: var(--text-strong);
  font-weight: 650;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.results-head h1 {
  margin: 0;
  color: var(--text-strong);
  font-size: clamp(1.3rem, 3.6vw, 1.75rem);
  line-height: 1.35;
}

.results-note {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* ── 검색 패널 ─────────────────────────────────────────────────
   검색에 관한 것은 전부 이 안에 있다(UI_DESIGN.md 11장) — 검색창, 화면
   자판, Singlish, 그리고 결과 화면에서는 필터와 정렬까지. 내용물은 어느
   화면에서나 같고 놓이는 자리만 다르다. 여는 것은 상단 바의 panel-left
   버튼이고, 열림·닫힘 상태는 body[data-panel] 한 곳에만 실린다.

   숨길 때 hidden 속성이나 display:none 을 쓰지 않는다(넓은 결과 화면은
   예외 — 아래 참고). 미끄러져 나오려면 그 사이에도 요소가 살아 있어야
   하기 때문이다. 대신 transform 으로 화면 밖에 밀어 두고 visibility 로
   초점·낭독에서 뺀다. 움직이는 것이 transform 과 opacity 뿐이라 매
   프레임 레이아웃을 다시 계산하지 않는다(UI_DESIGN.md 11.9). */

.results-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

/* 접으면 결과가 그 폭을 그대로 가져간다. data-panel 이 아직 없는 것은
   search-panel.js 가 상태를 싣기 전이라는 뜻이다 — 그 사이에 빈 15rem
   칸이 보이지 않게 같이 접어 둔다. */
body[data-panel="closed"] .results-layout,
body:not([data-panel]) .results-layout {
  grid-template-columns: minmax(0, 1fr);
}

/* 자판은 5열 고정이라(.keyboard-panel) 15rem 패널에 들어가지 않는다.
   그렇다고 패널을 넓히면 오른쪽 결과가 통째로 밀린다 — 자판을 누르는
   순간 눈은 패널에 가 있는데, 보고 있지도 않은 곳이 출렁인다. 부드럽게
   만들어도 움직이는 것은 그대로다.

   그래서 패널 폭은 건드리지 않고 자판만 결과 위로 띄운다. 가리는 동안은
   글자를 치는 중이라 결과를 읽고 있지 않다(UI_DESIGN.md 11.11).

   덮개일 때는 필요 없다 — 좁은 화면 판은 화면 폭을 다 쓰고, 넓은 화면
   덮개는 24rem 이라 안쪽이 정확히 22rem 이다. 둘 다 자판이 그대로
   들어간다. 그래서 결과 화면 넓은 폭에만 건다. */
.panel-search {
  position: relative;
}

body[data-page="search"][data-keyboard-open="true"] [data-panel-keyboard] {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  width: 22rem;
  /* 자판이 화면보다 길면 그 안에서 스크롤한다. */
  max-height: calc(100dvh - var(--bar-height) - 9rem);
  overflow-y: auto;
  box-shadow: var(--shadow-mid);
}

/* 떠 있는 자판이 판 가장자리에서 잘리지 않게 이 동안만 자르기를 푼다.
   자판이 판의 높이를 먹지 않으므로 판 자체는 짧아 스크롤이 필요 없다. */
body[data-page="search"][data-keyboard-open="true"] .search-panel {
  overflow: visible;
  max-height: none;
}

.search-panel {
  position: sticky;
  top: calc(var(--bar-height) + 1rem);
  display: grid;
  gap: 0.9rem;
  align-content: start;
  /* 붙어 있는 판이 화면보다 길면 아래쪽(자판을 폈을 때의 필터·정렬)에
     닿을 방법이 없다 — 페이지를 내려도 판은 제자리에 붙어 있기 때문이다.
     넘치는 만큼은 판 안에서 스크롤한다. */
  max-height: calc(100dvh - var(--bar-height) - 2rem);
  overflow-y: auto;
  /* 판 안에서 끝까지 훑은 뒤에도 계속 쓸면 뒤쪽 본문이 따라 움직인다.
     덮고 있는 판에서는 그 이어짐을 끊는다. */
  overscroll-behavior: contain;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  background: var(--surface);
}

/* 넓은 결과 화면에서만 접을 때 자리를 통째로 비운다. 여기서는 패널이
   덮개가 아니라 격자의 한 칸이라, 남겨 두면 결과 위에 겹친다. 칸 폭이
   변하는 전환은 아직 넣지 않았다 — 결과 카드가 전부 다시 흐르는 일이라
   실제 데이터로 재보고 정한다.

   data-panel 이 아직 없는 것은 search-panel.js 가 상태를 싣기 전이라는
   뜻이다. 그 사이에는 어느 화면에서나 감춰 둔다. */
body[data-page="search"][data-panel="closed"] .search-panel,
body:not([data-panel]) .search-panel {
  display: none;
}

/* 결과 화면 밖에서는 레이아웃에 패널의 자리가 없다. 왼쪽에서 미끄러져
   나와 본문을 덮는다 — 아이콘(panel-left)이 가리키는 그대로다. */
body:not([data-page="search"]) .search-panel {
  position: fixed;
  z-index: 40;
  top: var(--bar-height);
  bottom: 0;
  left: 0;
  width: min(24rem, 92vw);
  border-width: 0 1px 0 0;
  border-radius: 0;
  overflow-y: auto;
  box-shadow: var(--shadow-mid);
  /* 닫힌 자리. visibility 는 중간값이 없으므로 나갈 때는 미끄러짐이
     끝난 뒤에 꺼지도록 그만큼 늦춘다. 들어올 때는 늦추지 않는다. */
  transform: translateX(-100%);
  visibility: hidden;
  transition:
    transform 200ms ease-in,
    visibility 0s linear 200ms;
}

body:not([data-page="search"])[data-panel="open"] .search-panel {
  transform: none;
  visibility: visible;
  transition:
    transform 240ms ease-out,
    visibility 0s linear 0s;
}

.search-panel-backdrop {
  position: fixed;
  z-index: 35;
  inset: 0;
  background: rgb(0 0 0 / 0.45);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 200ms ease-in,
    visibility 0s linear 200ms;
}

/* 배경막은 덮개일 때만 나온다. 넓은 결과 화면에서 패널은 덮는 것이
   아니라 옆에 있는 것이라 뒤를 가릴 이유가 없다. */
body:not([data-page="search"])[data-panel="open"] .search-panel-backdrop {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 240ms ease-out,
    visibility 0s linear 0s;
}

/* 패널은 좁다. 홈처럼 한 줄에 넷을 늘어놓을 폭이 없으므로 검색창이 한
   줄을 통째로 갖고 도구와 실행이 다른 줄을 나눈다(1-1-2). 좁은 화면의
   .search-field 가 이미 같은 배치를 쓰고 있고 — order:1 로 버튼 줄을
   위에 두는 까닭까지 그대로다. Singlish 칸과 변환 결과가 나오는 검색창이
   맞붙어 있어야 손가락 자판을 올린 채로도 결과가 눈에 들어온다. 패널은
   어느 폭에서나 좁으므로 여기서도 같게 둔다. */
.panel-search .search-field {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}

.panel-search .search-field input[type="search"] {
  grid-column: 1 / -1;
  order: 1;
}

.panel-search .input-tool,
.panel-search .submit-search {
  width: auto;
}

.panel-search .submit-search {
  grid-column: span 2;
}

.filter-body {
  display: grid;
  gap: 0.9rem;
}

.filter-group {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.filter-group legend {
  margin-bottom: 0.3rem;
  padding: 0;
  color: var(--text-faint);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.filter-group label {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.93rem;
}

.filter-group input {
  accent-color: var(--accent);
}

.filter-count {
  margin-left: auto;
  color: var(--text-faint);
  font-size: 0.83rem;
  font-variant-numeric: tabular-nums;
}

.filter-sort {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  color: var(--text-faint);
}

.filter-sort select {
  height: 2.4rem;
  padding: 0 0.5rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.5rem;
  color: var(--text);
  background: var(--bg);
  font: inherit;
  font-size: 0.92rem;
  letter-spacing: normal;
  text-transform: none;
}

.result-groups {
  display: grid;
  gap: 0.9rem;
}

.sermon-group {
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  background: var(--surface);
  overflow: hidden;
}

.group-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.95rem 1rem 0.75rem;
}

.group-meta {
  margin: 0.1rem 0 0;
  color: var(--text-faint);
  font-size: 0.83rem;
  font-variant-numeric: tabular-nums;
}

/* 제목 자리에 법문 번호가 들어온다. 길이가 일정해 줄바꿈이 없고,
   숫자를 고정폭으로 두면 세로로 자릿수가 맞아 훑기 쉽다. */
.group-title {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--text-strong);
  background: none;
  font-size: 1.02rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-align: left;
}

.group-title:hover {
  color: var(--accent);
  text-decoration: underline;
}

.group-question {
  margin: 0.3rem 0 0;
  padding-left: 0.6rem;
  border-left: 2px solid var(--amber-line);
  color: var(--text-muted);
  font-size: 0.9rem;
}

.hit-count {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  color: var(--amber);
  background: var(--amber-soft);
  font-size: 0.85rem;
  font-weight: 750;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.hit-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

.hit {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) 2rem;
  gap: 0.6rem;
  align-items: baseline;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.6rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  background: none;
  text-align: left;
}

.hit-list li:last-child .hit {
  border-bottom: 0;
}

.hit:hover {
  background: var(--amber-soft);
}

.hit-time {
  color: var(--amber);
  font-size: 0.9rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.hit-text {
  line-height: 1.6;
}

.hit-play {
  display: inline-flex;
  align-self: center;
  color: var(--text-faint);
}

.hit:hover .hit-play {
  color: var(--accent);
}

.show-more {
  width: 100%;
  min-height: 2.6rem;
  font-variant-numeric: tabular-nums;
  border: 0;
  border-top: 1px solid var(--border);
  color: var(--accent);
  background: var(--surface-sunken);
  font-size: 0.9rem;
  font-weight: 700;
}

.empty-state {
  padding: 2.2rem 1.5rem;
  border: 1px dashed var(--border-strong);
  border-radius: 0.8rem;
  background: var(--surface);
  text-align: center;
}

.empty-state h2 {
  margin: 0 0 0.5rem;
  color: var(--text-strong);
  font-size: 1.15rem;
}

.empty-state p {
  max-width: 26rem;
  margin: 0 auto;
  color: var(--text-muted);
}

.empty-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  margin-top: 1rem;
}

.filter-empty {
  padding: 1.5rem;
  border: 1px dashed var(--border-strong);
  border-radius: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

/* ── 법문 ───────────────────────────────────────────────────── */

.sermon-id {
  min-width: 0;
  color: var(--text-strong);
  font-size: 1.02rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-button {
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: var(--text-muted);
  background: var(--surface);
}

.icon-button:hover {
  color: var(--text-strong);
  border-color: var(--border-strong);
}

/* 전사문은 읽기 좋은 폭으로 묶고, 남는 오른쪽을 작업 레일로 쓴다.
   레일이 sticky라서 몇 백 줄을 내려가도 확인 버튼이 따라온다. */
.sermon-layout {
  display: grid;
  grid-template-columns: minmax(0, 46rem) minmax(13rem, 1fr);
  gap: 1.75rem;
  align-items: start;
}

.sermon-rail {
  position: sticky;
  top: calc(var(--bar-height) + 1rem);
  display: grid;
  gap: 0.7rem;
}/* 확인 지점 보고. 고칠 게 없었던 사람도 흔적을 남길 수 있어야
   같은 법문이 다음 사람에게 또 배정되지 않는다. */
.rail-card {
  display: grid;
  gap: 0.5rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--surface);
}.rail-heading {
  display: flex;
  margin: 0;
  color: var(--text-faint);
}

.rail-line {
  margin: 0;
  color: var(--text-strong);
  font-size: 0.88rem;
  font-weight: 700;
}

.rail-question {
  margin: 0;
  padding-left: 0.55rem;
  border-left: 2px solid var(--amber-line);
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.55;
}

/* 재생 컨트롤과 별개로 오른쪽 레일에 모아 둔 작업 버튼 줄. */
.rail-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* 라벨 달린 스위치를 아이콘 토글로 바꿨다. 켜짐/꺼짐은 글자가 아니라
   색으로 말한다 — 체크박스는 상태를 담고 있을 뿐 보이지 않는다. */
.follow-switch {
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: var(--text-faint);
  background: var(--surface);
  cursor: pointer;
}

.follow-switch:hover {
  color: var(--text-strong);
  border-color: var(--border-strong);
}

.follow-switch:has(input:checked) {
  color: var(--accent-text);
  border-color: var(--accent);
  background: var(--accent);
}

.follow-switch:has(input:focus-visible) {
  outline: 3px solid var(--focus-color);
  outline-offset: 3px;
}

.follow-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.caption-notice {
  display: flex;
  gap: 0.5rem;
  align-items: start;
  margin: 0 0 1.1rem;
  padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--amber-line);
  border-radius: 0 0.4rem 0.4rem 0;
  color: var(--text-muted);
  background: var(--amber-soft);
  font-size: 0.88rem;
  line-height: 1.55;
}

.caption-notice .lucide-icon {
  margin-top: 0.15rem;
  color: var(--amber);
}

.transcript {
  display: grid;
  width: min(46rem, 100%);
}

.transcript-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  border-bottom: 1px solid var(--border);
}

.transcript-line {
  display: flow-root;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.6rem 0.5rem;
  border: 0;
  border-left: 3px solid transparent;
  color: var(--text);
  background: none;
  text-align: left;
}

.transcript-line:hover {
  background: var(--surface);
}

/* 이미 확인된 구간. 활성 줄 표시가 이겨야 하므로 앞에 둔다. */
.transcript-row.is-verified .transcript-line {
  border-left-color: var(--accent-soft);
}

.transcript-line.is-active {
  border-left-color: var(--amber-line);
  background: var(--amber-soft);
}

.transcript-time {
  float: left;
  width: 3.6rem;
  margin-right: 0.85rem;
  color: var(--text-faint);
  font-size: 0.87rem;
  font-variant-numeric: tabular-nums;
}

.transcript-line.is-active .transcript-time {
  color: var(--amber);
  font-weight: 750;
}

.transcript-text {
  line-height: 1.75;
}

.row-actions {
  display: flex;
  gap: 0.15rem;
  align-self: center;
  padding-right: 0.25rem;
  opacity: 0;
  transition: opacity 120ms ease;
}

/* 듣고 있는 줄에만 상시 노출한다. 틀린 곳을 알아차리는 순간이
   그 줄이 활성인 순간이라 맥락이 맞고, 400줄이 아이콘으로 덮이지 않는다.
   나머지 줄은 호버나 포커스로 꺼내 쓴다. */
.transcript-row:has(.transcript-line.is-active) .row-actions,
.transcript-row:hover .row-actions,
.transcript-row:focus-within .row-actions,
.transcript-row.is-correcting .row-actions {
  opacity: 1;
}

.row-action {
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  color: var(--text-faint);
  background: none;
}

.row-action .lucide-icon {
  width: 1.05rem;
  height: 1.05rem;
}

.row-action:hover {
  color: var(--text-strong);
  border-color: var(--border);
  background: var(--surface);
}

.correction-form {
  grid-column: 1 / -1;
  padding: 0.75rem 0.5rem 0.9rem 4.1rem;
}

.correction-form textarea {
  width: 100%;
  min-height: 5rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.55rem;
  color: inherit;
  background: var(--surface-raised);
  font: inherit;
  line-height: 1.7;
  resize: vertical;
}

.correction-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.correction-actions button {
  width: 2.4rem;
  min-height: 2.4rem;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 0.5rem;
  color: var(--text);
  background: var(--bg);
  font-size: 0.9rem;
  font-weight: 650;
}

.correction-actions button[type="submit"] {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent);
}

.copy-toast {
  position: fixed;
  z-index: 40;
  bottom: 3.5rem;
  left: 50%;
  /* left:50% 로 놓으면 쓸 수 있는 폭이 화면 절반뿐이라, 문구를 줄여도
     싱할라어 쪽이 두 줄로 접혔다. max-content 로 필요한 만큼 넓히고
     상한만 걸어 둔다. */
  width: max-content;
  max-width: min(90vw, 24rem);
  padding: 0.5rem 0.9rem;
  text-align: center;
  border-radius: 999px;
  color: var(--accent-text);
  background: var(--accent);
  box-shadow: var(--shadow-mid);
  font-size: 0.88rem;
  font-weight: 650;
  transform: translateX(-50%);
}

.follow-return {
  position: fixed;
  z-index: 25;
  bottom: 1.25rem;
  left: 50%;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-strong);
  background: var(--surface);
  box-shadow: var(--shadow-mid);
  transform: translateX(-50%);
}

/* 위/아래 세그먼트 이동 버튼(.segment-nav-btn)은 데스크톱 레일 줄에선
   보통 .icon-button 처럼 보이지만, 키보드로 충분한 데스크톱에서는 숨긴다.
   좁은 화면 media query(아래)에서만 보인다. */
.segment-nav-btn {
  display: none;
}

.mobile-toolbar {
  display: none;
}

/* 글자를 빼고 아이콘만 남기면 버튼이 글자 폭만큼 줄어든다. 마우스로는
   문제가 없지만 손가락에는 작다. 그래서 터치 기기에서는 조작 요소에
   44px 바닥을 깐다 — 아이콘 크기는 그대로 두고 눌리는 면적만 넓힌다. */
@media (pointer: coarse) {.icon-button,
.bar-nav a,
.theme-toggle,
.language-toggle,
.panel-toggle,
.app-brand,
.row-action,
.follow-switch,
.follow-return,
.section-head a,
.query-chip,
.correction-actions button,
.chip,
.keyboard-key {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}

/* ── 좁은 화면 ──────────────────────────────────────────────── */

@media (max-width: 60rem) {
  /* 패널이 레이아웃의 칸이 아니므로 결과가 폭을 다 쓴다. */
  body[data-page="search"] .results-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 판이 화면 폭을 다 쓰므로 자판을 띄울 이유가 없다. 넓은 폭 규칙을
     되돌려 판 안에 그대로 둔다. */
  body[data-page="search"][data-keyboard-open="true"] [data-panel-keyboard] {
    position: static;
    width: auto;
    max-height: none;
    box-shadow: none;
  }

  body[data-page="search"][data-keyboard-open="true"] .search-panel {
    overflow-y: auto;
    max-height: 85dvh;
  }

  /* 좁은 폭에서는 어느 화면에서나 아래에서 올라와 본문을 덮는다. 위가
     아니라 아래인 것은 자판을 엄지로 눌러야 하기 때문이다
     (UI_DESIGN.md 11.1). 자판까지 펼치면 길어지므로 넘치는 만큼은
     패널 안에서 스크롤한다. */
  .search-panel,
  body:not([data-page="search"]) .search-panel {
    position: fixed;
    z-index: 40;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-height: 85dvh;
    overflow-y: auto;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 0.9rem 0.9rem 0 0;
    box-shadow: var(--shadow-mid);
    /* 옆이 아니라 아래로 밀어 둔다. */
    transform: translateY(100%);
    visibility: hidden;
    transition:
      transform 200ms ease-in,
      visibility 0s linear 200ms;
  }

  /* 결과 화면도 여기서는 덮개다. display:none 으로 지우면 미끄러질 것이
     남지 않으므로 넓은 화면용 규칙을 되돌린다. */
  body[data-page="search"][data-panel="closed"] .search-panel {
    display: grid;
  }

  /* 결과 화면 밖의 열림 규칙이 위에서 더 좁게 걸려 있어(가로 밀기),
     여기서 같은 좁기로 다시 적어야 세로 밀기가 이긴다. */
  body[data-panel="open"] .search-panel,
  body:not([data-page="search"])[data-panel="open"] .search-panel {
    transform: none;
    visibility: visible;
    transition:
      transform 240ms ease-out,
      visibility 0s linear 0s;
  }

  body[data-panel="open"] .search-panel-backdrop {
    opacity: 1;
    visibility: visible;
    transition:
      opacity 240ms ease-out,
      visibility 0s linear 0s;
  }

  /* 접혀 있을 때 지금 찾는 낱말을 보이는 것도, 다시 검색하러 들어가는
     입구도 이 띠가 맡는다(UI_DESIGN.md 11.3). */
  body[data-page="search"] .query-chip {
    display: flex;
  }

  /* 레일을 세울 폭이 없으면 흩어 놓는다. display:contents 로 레일을
     해체해 배너는 전사문 위로 올리고, 확인 카드만 화면 아래에 고정한다.
     그래야 어디까지 내려가도 제출이 엄지 근처에 있다. */
  .sermon-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sermon-rail {
    display: contents;
  }

  .rail-card {
    order: 1;
  }

  /* 재생·자동 추적·복사·공유·컬렉션 복귀·세그먼트 이동은 데스크톱에서만
     레일 카드로 산다. 좁은 화면에서는 sermon.js 가 같은 버튼들을 화면
     아래 고정 도구줄로 옮겨 붙이므로, 남은 빈 레일 카드는 감춘다. */
  .rail-actions {
    display: none;
  }

  .segment-nav-btn {
    display: inline-flex;
  }

  /* 도구줄이 상단이 아니라 하단에 있어야 엄지가 닿는다. */
  .mobile-toolbar {
    position: fixed;
    z-index: 25;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-mid);
  }

  .mobile-toolbar .rail-actions-row {
    justify-content: center;
  }

  .mobile-toolbar .header-copy-status {
    text-align: center;
  }

  body[data-page="sermon"] .app-main {
    padding-bottom: calc(var(--mobile-toolbar-height) + 1rem);
  }

  .follow-return {
    bottom: calc(var(--mobile-toolbar-height) + 0.75rem);
  }
}

@media (max-width: 44rem) {
  .app-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.5rem;
    padding: 0 0.7rem;
  }

  /* 상단 바 오른쪽 버튼이 넷(패널·컬렉션·언어·테마)이라 가운데 칸이 좁다.
     터치 목표 크기(2.75rem)는 건드리지 않고 법문 id 글씨만 줄여, 짧은 id 가
     말줄임표로 잘리지 않게 한다. */
  .sermon-id {
    font-size: 0.88rem;
  }

  .brand-name {
    display: none;
  }

  .app-main {
    width: calc(100% - 1.4rem);
    padding-top: 1.5rem;
  }

  .home-inner {
    padding-top: 0.5rem;
  }

  .search-field {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
  }

  /* 좁은 화면에서는 버튼 줄을 위로 올려, Singlish 입력칸과 싱할라 변환
     결과가 나오는 검색창을 바로 붙여 둔다. 손가락 자판을 올린 채로도
     변환 결과가 눈에 들어온다. */
  .search-field input[type="search"] {
    grid-column: 1 / -1;
    order: 1;
  }

  /* Singlish 패널 라벨은 placeholder 가 같은 말을 하므로, 좁은 화면에서는
     시각적으로만 감춰 변환 결과와 입력칸을 한 뼘 더 붙인다. 스크린 리더에는
     그대로 읽힌다. */
  #singlish-panel > label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* 칸이 폭을 정하므로 버튼의 고정 폭을 푼다. */
  .input-tool,
  .submit-search {
    width: auto;
  }

  .submit-search {
    grid-column: span 2;
  }

  .group-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .hit-count {
    justify-self: start;
  }

  .hit {
    grid-template-columns: 3.2rem minmax(0, 1fr);
    padding: 0.6rem 0.75rem;
  }

  .hit-play {
    display: none;
  }

  /* 좁은 화면에는 호버가 없다. 줄을 누르면 그 줄이 활성이 되면서
     같이 나타나므로 상시 노출하지 않는다. */
  .row-actions {
    opacity: 0;
  }

  .correction-form {
    padding-left: 0.75rem;
  }}

/* audio 는 controls 를 떼도 자리를 차지한다. 재생만 맡고 화면에서는
   빠져야 한다. */
#sermon-audio {
  display: none;
}

/* 복사·정정 결과를 알리는 작은 글. 비었을 때 자리를 먹지 않아야 한다. */
.header-copy-status,
.segment-copy-status,
.correction-status {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.header-copy-status:empty,
.segment-copy-status:empty,
.correction-status:empty {
  margin: 0;
}

/* 목록이 비었을 때와 검색 진행 중 안내. 시안에는 없던 상태다. */
.catalog-empty,
.status {
  margin: 0 0 1rem;
  color: var(--text-muted);
}

.status:empty {
  margin: 0;
}

/* .chip 은 버튼용이라 링크로 쓰면 밑줄이 남는다. */
a.chip {
  text-decoration: none;
}

/* ── 관리자 화면 ─────────────────────────────────────────────────
   관리자 화면은 이번 개편 대상이 아니다. 그런데 관리자 templates 는
   자기 버튼·입력칸 스타일을 갖고 있지 않고 예전 공개 CSS 의 맨 요소
   규칙(button/input/textarea/h1)에 얹혀 있었다. 그 규칙들을 여기로
   옮겨 [data-surface="admin"] 안에서만 살린다. admin_base.html 의
   <html> 이 그 속성을 단다. 새 토큰과 다크 모드는 위에서 이미 막았다.
   ---------------------------------------------------------------- */

[data-surface="admin"] body {
  line-height: normal;
}

[data-surface="admin"] h1 {
  margin: 0;
  font-size: clamp(2.4rem, 8vw, 4.8rem);
  line-height: 1;
  color: #183c2d;
}

[data-surface="admin"] input,
[data-surface="admin"] textarea,
[data-surface="admin"] button {
  min-height: 3rem;
  border-radius: 0.65rem;
  font: inherit;
}

[data-surface="admin"] input {
  min-width: 0;
  flex: 1;
  padding: 0.7rem 0.9rem;
  border: 1px solid #aaa493;
  background: white;
}

[data-surface="admin"] input:focus-visible,
[data-surface="admin"] button:focus-visible,
[data-surface="admin"] a:focus-visible {
  outline: 3px solid #d89b45;
  outline-offset: 2px;
}

[data-surface="admin"] button {
  padding: 0.7rem 1.15rem;
  border: 0;
  color: white;
  background: #265a43;
  font-weight: 700;
  cursor: pointer;
}

[data-surface="admin"] textarea {
  width: 100%;
  min-height: 7rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid #aaa493;
  border-radius: 0.65rem;
  background: white;
  font: inherit;
  line-height: 1.65;
  resize: vertical;
}

[data-surface="admin"] .page-shell {
  width: min(52rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 3rem 0 5rem;
}

[data-surface="admin"] .eyebrow {
  margin: 0 0 0.4rem;
  color: #7b4c24;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: normal;
}

[data-surface="admin"] .metadata {
  margin: 0.35rem 0 0.8rem;
  color: #7a7469;
  font-size: 0.9rem;
  line-height: 1.65;
}

[data-surface="admin"] .correction-status {
  margin: 0.65rem 0 0;
  color: #58645e;
}

/* 공개 화면에도 같은 이름이 있으나 그쪽은 인라인 정정 폼의 아이콘 버튼
   줄이다. 관리자 쪽은 예전 모양을 그대로 쓴다. */
[data-surface="admin"] .correction-actions {
  display: flex;
  gap: 0.55rem;
  margin-top: 0.65rem;
}

[data-surface="admin"] .correction-actions button {
  width: auto;
  min-height: 3rem;
  padding: 0.7rem 1.15rem;
  border: 0;
  border-radius: 0.65rem;
  color: white;
  background: #265a43;
}

[data-surface="admin"] mark {
  padding: 0;
  color: inherit;
  background: #ffe08a;
}

.admin-title {
  font-size: clamp(1.8rem, 6vw, 3.4rem);
  line-height: 1.25;
}

.admin-header {
  display: grid;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
}

.admin-language {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  font-weight: 700;
}

.admin-language select {
  padding: 0.45rem 0.6rem;
}

.admin-nav,
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.admin-nav a,
.admin-tabs a {
  padding: 0.55rem 0.7rem;
  color: #24543f;
  border: 1px solid #c9c1b1;
  border-radius: 0.55rem;
  background: #fffdf8;
  font-weight: 700;
  text-decoration: none;
}

.admin-tabs {
  margin-bottom: 1rem;
}

.admin-tabs a[aria-current="page"] {
  color: white;
  background: #265a43;
}

.admin-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.admin-metrics a {
  display: grid;
  gap: 0.25rem;
  padding: 1rem;
  color: #27332d;
  border: 1px solid #d7d0c1;
  border-radius: 0.8rem;
  background: #fffdf8;
  text-decoration: none;
}

.admin-metrics strong {
  color: #183c2d;
  font-size: 2rem;
}

.admin-section {
  margin-top: 1.5rem;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: #fffdf8;
}

.admin-table th,
.admin-table td {
  padding: 0.75rem;
  border: 1px solid #d7d0c1;
  text-align: left;
  vertical-align: top;
}

.admin-filter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 1rem;
  border: 1px solid #d7d0c1;
  border-radius: 0.8rem;
  background: #fffdf8;
}

.admin-filter label {
  display: grid;
  gap: 0.35rem;
  font-weight: 700;
}

.admin-filter button {
  align-self: end;
}

.compact-filter {
  grid-template-columns: minmax(0, 1fr) auto;
}

.admin-split {
  display: grid;
  grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 1.4fr);
  gap: 1rem;
}

.sermon-version-list {
  display: grid;
  gap: 0.55rem;
  padding: 0;
  list-style: none;
}

.sermon-version-list li,
.version-card,
.log-card,
.status-grid article {
  padding: 0.9rem;
  border: 1px solid #d7d0c1;
  border-radius: 0.75rem;
  background: #fffdf8;
}

.sermon-version-list li {
  display: grid;
  gap: 0.25rem;
}

.sermon-version-list span,
.current-badge {
  color: #6c736f;
  font-size: 0.85rem;
}

.current-badge {
  padding: 0.2rem 0.4rem;
  color: #185b39;
  border-radius: 999px;
  background: #dff3e5;
}

.version-card,
.log-card {
  margin-bottom: 0.8rem;
}

.version-card h3,
.status-grid h2 {
  margin-top: 0;
}

.version-change {
  margin-top: 0.7rem;
  padding: 0.7rem;
  border-radius: 0.55rem;
  background: #f7f3e9;
}

.version-change del {
  color: #8a312b;
  background: #ffe0dc;
}

.version-change ins {
  color: #185b39;
  background: #dff3e5;
  text-decoration: none;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.status-good {
  color: #185b39;
  font-weight: 700;
}

.status-bad {
  color: #8a312b;
  font-weight: 700;
}

.correction-list {
  display: grid;
  gap: 1rem;
}

.administrator-list {
  display: grid;
  gap: 0.75rem;
}

.administrator-card {
  align-items: center;
  border: 1px solid #d7d0c1;
  border-radius: 0.75rem;
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}

.administrator-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.correction-card {
  padding: 1rem;
  border: 1px solid #d7d0c1;
  border-radius: 0.8rem;
  background: #fffdf8;
}

.correction-comparison {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 0.4rem 0.8rem;
}

.correction-comparison dt {
  font-weight: 700;
}

.correction-comparison dd {
  margin: 0;
  line-height: 1.65;
}

.correction-warning {
  padding: 0.65rem;
  color: #6f3d17;
  background: #fff1c8;
}

.correction-diff {
  margin-top: 0.8rem;
  padding: 0.75rem;
  border-radius: 0.55rem;
  background: #f7f3e9;
  line-height: 1.7;
}

.correction-diff del {
  color: #8a312b;
  background: #ffe0dc;
}

.correction-diff ins {
  color: #185b39;
  background: #dff3e5;
  text-decoration: none;
}

.final-text-label {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.9rem;
  font-weight: 700;
}

@media (max-width: 34rem) {
  .page-shell {
    width: min(100% - 1.2rem, 52rem);
    padding-top: 1.5rem;
  }

  .search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3rem 5rem;
  }

  .search-submit {
    grid-column: 1 / -1;
    width: 100%;
  }

  .transcript-segment {
    grid-template-columns: 3.8rem 1fr;
  }

  .segment-main {
    display: flex;
    align-items: flex-start;
  }

  .segment-menu-toggle {
    display: inline-grid;
    flex: 0 0 auto;
  }

  .segment-actions,
  .segment-row.is-menu-open .segment-actions {
    position: static;
    display: none;
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }

  .segment-row.is-menu-open .segment-actions {
    display: flex;
  }

  .segment-actions,
  .segment-copy-status,
  .correction-form {
    margin-left: 0;
  }

  .sermon-card {
    grid-template-columns: 1fr auto;
  }

  .sermon-card-title {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .correction-comparison {
    grid-template-columns: 1fr;
  }

  .admin-metrics,
  .admin-filter,
  .admin-split,
  .status-grid {
    grid-template-columns: 1fr;
  }

  .compact-filter {
    grid-template-columns: 1fr;
  }
}