/* ==========================================================================
   stop&loss — 리치 본문 조판 (.prose)

   관리자가 쓴 HTML 이 이 규칙을 만나 사이트의 글이 된다.
   공지사항 상세 · 자주 묻는 질문 답변 · 관리자 콘솔 미리보기가 같은 파일을 쓴다 —
   그래서 관리자가 미리보기에서 본 모양이 방문자 화면에서도 그대로다.

   ── 이 파일이 존재하는 이유 ──
   본문에 인라인 style 을 허용하지 않기 때문이다(서버 소독기가 지운다). 관리자가
   색과 크기를 손으로 정하기 시작하면 글마다 모양이 달라지고, 사이트 디자인을
   바꿀 때 지난 글이 전부 옛 모양으로 남는다. 대신 '태그만 쓰면 알아서 예뻐진다'로
   뒤집었다 — <h2> 를 쓰면 사이트의 소제목이 되고, class="callout" 을 붙이면
   사이트의 안내 상자가 된다.

   ── 색과 글꼴을 새로 만들지 않는다 ──
   전부 style.css 의 토큰이다. --primary(#3de9ff) · --danger · --warn · --success 는
   이 사이트에서 이미 뜻을 가진 색이라(정상 · 경고 · 위험) 본문에서도 같은 뜻으로 쓴다.

   ── 클래스를 늘릴 때 ──
   세 곳을 함께 고쳐야 한다. 하나라도 빠지면 조용히 반쪽만 동작한다.
     functions/api/[[path]].js  RICH_ALLOWED_CLASSES   (저장 허용)
     static/richtext.js         ALLOWED_CLASSES        (화면 허용)
     이 파일                     그 클래스의 모양

   ── 구조 ──
     1. 컨테이너 · 흐름
     2. 제목
     3. 문단 · 강조 · 링크
     4. 목록
     5. 인용 · 구분선
     6. 코드
     7. 표
     8. 이미지 · figure
     9. 블록 클래스 (callout · steps · checks · kv · columns …)
    10. 크기 변형 · 반응형
   ========================================================================== */

/* ---------- 1. 컨테이너 · 흐름 ---------- */

/*
 * 세로 흐름은 '형제 사이 여백'으로만 만든다(margin-top 을 뒤 요소에 준다).
 *
 * 각 요소에 margin-bottom 을 주면 마지막 요소 아래에 여백이 남아, 본문을 감싼
 * 카드의 아래쪽만 두꺼워진다. 위에서 아래로 흐르는 글에서는 '앞의 것과 얼마나
 * 떨어지나'만 정하면 충분하고, 그러면 첫 요소 위와 마지막 요소 아래가 언제나 0 이다.
 */
.prose {
  color: var(--text-soft);
  font-size: 15.5px;
  line-height: 1.85;
  /* 긴 주소나 붙여넣은 영문이 컨테이너를 뚫고 나가지 않게 한다. */
  overflow-wrap: anywhere;
}

.prose > * + * { margin-top: 16px; }

/* 첫 요소 위 · 마지막 요소 아래에는 여백을 두지 않는다. 감싼 카드가 정한다. */
.prose > :first-child { margin-top: 0; }

/* ---------- 2. 제목 ---------- */

/*
 * h1 은 없다. 문서의 h1 은 글 제목(공지 제목 · 질문)이 이미 쓰고 있어서,
 * 본문에서 또 쓰면 제목이 둘인 문서가 되어 화면 낭독기의 목차가 무너진다.
 * 그래서 서버 소독기도 h1 을 허용 목록에서 뺐다.
 *
 * 위 여백이 아래 여백보다 훨씬 큰 것은 의도다. 소제목은 '앞 문단의 끝'이 아니라
 * '다음 덩어리의 시작'이라, 자기가 이끄는 글에 붙어 있어야 덩어리가 눈에 잡힌다.
 */
.prose h2,
.prose h3,
.prose h4 {
  color: #fff;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.45;
}

.prose > h2 { margin-top: 40px; font-size: 21px; }
.prose > h3 { margin-top: 32px; font-size: 17.5px; letter-spacing: -.01em; }
.prose > h4 { margin-top: 26px; font-size: 15.5px; letter-spacing: -.005em; }

/* 큰 제목만 위에 선을 둔다. 셋 다 두르면 본문이 표처럼 잘려 보인다. */
.prose > h2 {
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

/* 본문 맨 앞의 소제목은 글 제목 바로 아래다. 그 사이에 선과 큰 여백을 또 두면
   제목이 두 번 나오는 것처럼 보인다. */
.prose > :first-child.prose-heading-reset,
.prose > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.prose > h3:first-child,
.prose > h4:first-child { margin-top: 0; }

/* ---------- 3. 문단 · 강조 · 링크 ---------- */

.prose p { margin: 0; }

/* 굵게는 흰색까지 올린다. 본문이 이미 78% 흰색이라 굵기만으로는 잘 안 보인다. */
.prose strong,
.prose b { color: #fff; font-weight: 700; }

.prose em,
.prose i { font-style: italic; }

.prose u { text-decoration: underline; text-underline-offset: 3px; }

.prose s { color: var(--muted); text-decoration: line-through; }

/* 형광펜. 노란 배경 대신 사이트의 청록을 옅게 깐다 — 다크 배경에서 노랑은 튄다. */
.prose mark {
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(61, 233, 255, .16);
  color: #d6f8ff;
}

.prose small { font-size: .875em; color: var(--muted); }

.prose sup, .prose sub { font-size: .75em; line-height: 0; }

.prose a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--ease);
}

.prose a:hover { color: #fff; }

/* 외부 링크에는 화살표를 붙인다. 눌렀을 때 새 탭이 열리는 것을 미리 알린다.
   (target="_blank" 는 richtext.js 가 외부 주소에만 붙인다) */
.prose a[target="_blank"]::after {
  content: '↗';
  margin-left: 3px;
  font-size: .85em;
  /* 화살표까지 밑줄이 이어지면 주소의 일부처럼 보인다. */
  text-decoration: none;
  display: inline-block;
}

/* ---------- 4. 목록 ---------- */

.prose ul,
.prose ol {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.prose li { position: relative; padding-left: 20px; }

/* 중첩 목록은 한 단 들여쓰고 위 여백을 준다. */
.prose li > ul,
.prose li > ol { margin-top: 8px; padding-left: 4px; }

/* 글머리 점은 사이트의 포인트 색. notice.css · faq.css 의 목록과 같은 문법이다. */
.prose ul > li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: .82em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
}

/* 번호는 직접 센다. 기본 마커는 색과 자리를 정할 수 없다. */
.prose ol { counter-reset: prose-item; }
.prose ol > li { counter-increment: prose-item; padding-left: 26px; }

.prose ol > li::before {
  content: counter(prose-item) '.';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: .88em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 항목 · 값 목록. 용어 사전이나 사양표에 쓴다. */
.prose dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.prose dt {
  color: #fff;
  font-size: .95em;
  font-weight: 700;
}

.prose dd {
  margin: 2px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--border-strong);
  color: var(--muted);
}

/* ---------- 5. 인용 · 구분선 ---------- */

.prose blockquote {
  margin: 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--primary);
  color: var(--text);
  font-size: 1.02em;
  line-height: 1.8;
}

.prose blockquote > * + * { margin-top: 10px; }

/* 인용 안의 마지막 문단이 출처인 경우가 많다. */
.prose blockquote cite,
.prose blockquote footer {
  display: block;
  color: var(--muted);
  font-size: .88em;
  font-style: normal;
}

.prose hr {
  height: 1px;
  margin: 32px 0;
  border: 0;
  /* 양 끝이 흐려지는 선. 통짜 선은 화면을 잘라 놓은 것처럼 보인다. */
  background: linear-gradient(90deg, transparent, var(--border-strong) 20%, var(--border-strong) 80%, transparent);
}

/* ---------- 6. 코드 ---------- */

.prose code {
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: #b9f6ff;
  font-family: var(--font-mono);
  font-size: .86em;
}

.prose pre {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-alt);
  /* 코드는 줄바꿈이 뜻을 가지므로 접지 않고 가로로 흐르게 둔다. */
  overflow-x: auto;
  line-height: 1.7;
}

/* 블록 안의 code 는 알약 틀을 벗는다. 두 번 감싼 상자가 된다. */
.prose pre code {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-soft);
  font-size: 13px;
  white-space: pre;
}

.prose kbd {
  display: inline-block;
  min-width: 22px;
  padding: 2px 7px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: .82em;
  text-align: center;
}

/* ---------- 7. 표 ---------- */

/*
 * 표는 좁은 화면에서 반드시 넘친다. 문서를 밀지 않도록 표 자신이 가로로 흐르게
 * 감싼다 — richtext.js 가 감싸개를 만들지 않으므로 table 자체에 건다.
 */
.prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: .93em;
  -webkit-overflow-scrolling: touch;
}

.prose th,
.prose td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.prose thead th {
  border-bottom-color: var(--border-strong);
  color: var(--muted);
  font-size: .88em;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.prose tbody th { color: #fff; font-weight: 600; }

.prose tbody tr:last-child > th,
.prose tbody tr:last-child > td { border-bottom: 0; }

/* 줄무늬. 열이 많은 표에서 한 줄을 눈으로 따라가게 해 준다. */
.prose tbody tr:nth-child(even) { background: rgba(255, 255, 255, .022); }

.prose caption {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: .88em;
  text-align: left;
}

/* ---------- 8. 이미지 · figure ---------- */

.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.prose figure { margin: 0; }

.prose figure img { width: 100%; }

.prose figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: .86em;
  line-height: 1.6;
  text-align: center;
}

/* 테두리를 두른 이미지. 스크린샷처럼 배경이 흰 그림이 검정 위에서 떠 보이는 것을 막는다. */
.prose .frame,
.prose img.frame {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

/* ---------- 9. 블록 클래스 ---------- */

/*
 * 여기 있는 클래스만 본문에서 쓸 수 있다(서버 · richtext.js 의 허용 목록과 짝).
 * 임의 클래스를 열지 않는 이유: 사이트의 실제 클래스(.btn · .site-header)를
 * 본문에 적으면 글 안에서 헤더 스타일이 되살아나 화면이 깨진다.
 */

/* 도입부 큰 문장. 글 첫머리에 한 번만 쓰는 것을 전제로 한 크기다. */
.prose .lead {
  color: var(--text);
  font-size: 1.12em;
  line-height: 1.75;
  letter-spacing: -.01em;
}

.prose .muted { color: var(--muted); font-size: .93em; }

.prose .center { text-align: center; }

/* 문장 안의 작은 알약. 버전 · 상태 같은 짧은 값에 쓴다. */
.prose .badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .08);
  color: var(--text);
  font-size: .82em;
  font-weight: 700;
  white-space: nowrap;
}

/*
 * 안내 상자.
 *
 * 네 가지 뜻(기본 · 주의 · 경고 · 정상)을 왼쪽 굵은 선의 색으로 가른다.
 * 배경까지 진하게 칠하지 않는 이유: 본문 중간에 색 판이 크게 들어가면 그 아래
 * 글을 읽는 눈이 한 번 끊긴다. 안내는 눈에 걸리되 흐름을 자르면 안 된다.
 */
.prose .callout,
.prose .callout-warn,
.prose .callout-danger,
.prose .callout-ok {
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-md);
  background: var(--bg-alt);
  color: var(--text-soft);
  font-size: .96em;
}

.prose .callout > * + *,
.prose .callout-warn > * + *,
.prose .callout-danger > * + *,
.prose .callout-ok > * + * { margin-top: 8px; }

/* 상자 안의 제목은 크기를 낮춘다. 밖과 같은 크기면 상자가 문서를 끊는다. */
.prose .callout h2, .prose .callout h3, .prose .callout h4,
.prose .callout-warn h2, .prose .callout-warn h3, .prose .callout-warn h4,
.prose .callout-danger h2, .prose .callout-danger h3, .prose .callout-danger h4,
.prose .callout-ok h2, .prose .callout-ok h3, .prose .callout-ok h4 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1em;
}

.prose .callout-warn {
  border-left-color: var(--warn);
  background: rgba(255, 196, 77, .06);
  border-color: rgba(255, 196, 77, .24);
}

.prose .callout-danger {
  border-left-color: var(--danger);
  background: rgba(255, 92, 122, .06);
  border-color: rgba(255, 92, 122, .26);
}

.prose .callout-ok {
  border-left-color: var(--success);
  background: rgba(61, 220, 151, .06);
  border-color: rgba(61, 220, 151, .24);
}

/*
 * 절차 목록. <ol class="steps">.
 *
 * 기본 ol 과 다른 점은 번호가 원 안에 들어가고 항목마다 선이 그어진다는 것이다.
 * '순서대로 하세요'가 눈에 먼저 들어와야 하는 안내에 쓴다.
 */
.prose ol.steps {
  counter-reset: prose-step;
  gap: 0;
}

.prose ol.steps > li {
  counter-increment: prose-step;
  padding: 12px 0 12px 40px;
  border-top: 1px solid var(--border);
}

.prose ol.steps > li:first-child { border-top: 0; padding-top: 0; }
.prose ol.steps > li:last-child { padding-bottom: 0; }

.prose ol.steps > li::before {
  content: counter(prose-step);
  position: absolute;
  left: 0;
  top: 12px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(61, 233, 255, .35);
  border-radius: 50%;
  background: rgba(61, 233, 255, .1);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.prose ol.steps > li:first-child::before { top: 0; }

/* 체크 목록. <ul class="checks">. 준비물 · 완료 조건에 쓴다. */
.prose ul.checks > li { padding-left: 26px; }

.prose ul.checks > li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: .1em;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(61, 220, 151, .16);
  color: var(--success);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* 항목 · 값 판. <dl class="kv">. 사양이나 요약 정보에 쓴다. */
.prose dl.kv {
  padding: 4px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  gap: 0;
}

.prose dl.kv > dt {
  padding-top: 12px;
  color: var(--muted);
  font-size: .86em;
  font-weight: 700;
  letter-spacing: .02em;
}

.prose dl.kv > dd {
  margin: 2px 0 0;
  padding: 0 0 12px;
  border-left: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.prose dl.kv > dd:last-child { border-bottom: 0; }

/* ---------- 10. 크기 변형 · 반응형 ---------- */

/*
 * 넓은 화면에서 2열. <div class="columns">.
 * 좁은 화면에서는 그냥 세로로 쌓인다 — 모바일에서 2열은 한 줄이 20자도 안 된다.
 */
.prose .columns { display: grid; gap: 16px; }

/*
 * 본문 폭을 넘어 넓게. <table class="wide"> · <figure class="wide">.
 *
 * 감싼 쪽이 max-width 로 줄 길이를 잡고 있을 때(공지 상세는 74ch), 표와 큰 그림만
 * 그 상한을 벗어나게 한다. 음수 마진이라 부모에 overflow: hidden 이 있으면
 * 잘린다 — 지금은 없다.
 */
@media (min-width: 900px) {
  .prose .wide {
    width: calc(100% + 96px);
    margin-left: -48px;
    margin-right: -48px;
    max-width: none;
  }
}

@media (min-width: 640px) {
  .prose { font-size: 16px; }
  .prose > h2 { font-size: 23px; }
  .prose > h3 { font-size: 18.5px; }
  .prose > h4 { font-size: 16px; }
  .prose .columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

/*
 * 작은 변형. 자주 묻는 질문의 답변과 관리자 미리보기가 쓴다.
 *
 * 답변은 아코디언 안에 있어서 본문 크기 그대로 두면 질문(15.5px)보다 커진다 —
 * 접힌 목록에서 답이 질문보다 크면 위계가 뒤집힌다.
 */
.prose-sm { font-size: 14.5px; line-height: 1.8; }
.prose-sm > * + * { margin-top: 13px; }
.prose-sm > h2 { margin-top: 28px; padding-top: 14px; font-size: 17px; }
.prose-sm > h3 { margin-top: 22px; font-size: 15.5px; }
.prose-sm > h4 { margin-top: 18px; font-size: 14.5px; }
.prose-sm pre { padding: 13px 15px; }
.prose-sm pre code { font-size: 12.5px; }
.prose-sm th, .prose-sm td { padding: 8px 11px; }

@media (min-width: 640px) {
  .prose-sm { font-size: 15px; }
  .prose-sm > h2 { font-size: 18px; }
  .prose-sm > h3 { font-size: 16px; }
}

/* ---------- 11. 접근성: 모션 최소화 ---------- */

/*
 * 여기서 끄는 것은 링크 색 전환 하나뿐이다. 본문에는 애니메이션이 없다 —
 * 글을 읽는 화면에서 움직이는 것은 그 자체로 방해다.
 */
@media (prefers-reduced-motion: reduce) {
  .prose a { transition: none; }
}