/* 읽는 한 장의 스타일. 슬라이드가 아니라 «표준을 읽는 화면»이다.
 * 치수는 제품군 눈금(lcy_chosun_docs/public/style.css)에서 옮겨 적었다 —
 * 본문 17/1.75 · h1 28 · 절 제목 23 · 글줄 폭 64ch.
 * 색은 deck.css 와 같은 값을 쓴다. 표준 사이트가 제 표준 밖의 색을 쓸 수는 없다. */

:root {
  --navy: #333D9D; --sky: #A7D7F4;
  --ink: #14161a; --read: #3d4450; --faint: #838b96;
  --line: #e6e5e0; --line-strong: #c7c6bf;
  --surface: #ffffff; --bg: #fbfbf9;
  --r-badge: 6px; --r-control: 10px; --r-card: 14px; --r-pill: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
  font-size: 17px; line-height: 1.75;
  -webkit-text-size-adjust: 100%;
}
.wrap { max-width: 920px; margin: 0 auto; padding: var(--s8) var(--s5) var(--s9); }

a { color: var(--navy); text-decoration: underline; }
a:hover { font-weight: 700; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ─── 머리 ─── */
.head { padding-bottom: var(--s6); border-bottom: 2px solid var(--navy); }
h1 { margin: 0 0 var(--s4); font-size: 28px; line-height: 1.35; }
h1 .ver {
  font-family: var(--mono); font-size: .6em; font-weight: 400;
  padding: .15em .7em; border: 1px solid var(--navy); border-radius: var(--r-pill);
  color: var(--navy); vertical-align: middle; margin-left: var(--s2);
}
/* 선언 한 줄. 이 페이지가 무엇인지 말하는 자리라 본문보다 크게 세운다. */
.decl { margin: 0; font-size: 19px; line-height: 1.7; color: var(--ink); font-weight: 700; }

section { margin-top: var(--s9); }
h2 {
  margin: 0 0 var(--s5); font-size: 23px; line-height: 1.4;
  counter-increment: sec;
}
h2::before {
  content: counter(sec) " "; font-family: var(--mono); font-size: .72em;
  color: var(--navy); margin-right: var(--s3);
}
body { counter-reset: sec; }
h3 { margin: var(--s7) 0 var(--s4); font-size: 17px; }
.note { margin: 0 0 var(--s4); color: var(--read); font-size: 15.5px; }

/* ─── 규칙 ─── */
/* 번호를 살린다. 「R4 를 어겼다」로 가리킬 수 있어야 규칙이 쓸모가 있다. */
ol.rules { margin: 0; padding-left: 0; list-style: none; counter-reset: r; }
ol.rules li {
  counter-increment: r;
  position: relative; padding: var(--s4) 0 var(--s4) 56px;
  border-top: 1px solid var(--line);
}
ol.rules li:last-child { border-bottom: 1px solid var(--line); }
ol.rules li::before {
  content: "R" counter(r);
  position: absolute; left: 0; top: var(--s4);
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--navy);
  border: 1px solid var(--navy); border-radius: var(--r-badge);
  padding: 1px 6px;
}

ul { margin: var(--s5) 0 0; padding-left: 22px; color: var(--read); }
ul li { margin-bottom: var(--s2); }

code {
  font-family: var(--mono); font-size: .88em;
  background: #f1f0ec; border-radius: var(--r-badge); padding: .1em .4em;
}
a code { background: transparent; padding: 0; }

/* ─── 표 ─── */
table { width: 100%; border-collapse: collapse; font-size: 15.5px; margin: 0; }
th, td { text-align: left; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 13.5px; color: var(--read); background: #f1f0ec; border-bottom-color: var(--line-strong); }
.sw { display: inline-block; width: 22px; height: 22px; border-radius: var(--r-badge); border: 1px solid var(--line-strong); }

/* ─── 파스텔 다섯 ─── */
.five { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3); margin-top: var(--s4); }
.five > div { border-radius: var(--r-card); padding: var(--s4); min-width: 0; }
.five b { display: block; font-size: 15px; margin-bottom: var(--s2); }
.five code { display: block; background: rgba(255, 255, 255, .6); font-size: 12px; margin-top: 2px; }

/* ─── 로고 ─── */
.logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.logos figure {
  margin: 0; padding: var(--s5); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card);
}
/* 흰 판은 흰 바탕에서 보이지 않는다. 제 배경을 깔아 준다. */
.logos figure.on-dark { background: var(--navy); border-color: var(--navy); }
.logos figure.on-dark figcaption { color: rgba(255, 255, 255, .8); }
.logos figure.on-dark a { color: #fff; }
.logos img { display: block; margin-bottom: var(--s4); }
figcaption { font-size: 13.5px; color: var(--read); line-height: 1.6; }

/* ─── 파일·순서 ─── */
ul.files { list-style: none; margin: 0; padding: 0; }
ul.files li { padding: var(--s3) 0; border-top: 1px solid var(--line); display: flex; gap: var(--s4); flex-wrap: wrap; }
ul.files li:last-child { border-bottom: 1px solid var(--line); }
ul.files span { color: var(--read); font-size: 15.5px; }

ol.steps { margin: 0 0 var(--s5); padding-left: 22px; color: var(--read); }
ol.steps li { margin-bottom: var(--s2); }

.foot {
  margin-top: var(--s9); padding-top: var(--s5);
  border-top: 1px solid var(--line-strong);
  font-size: 13.5px; color: var(--faint);
}

@media (max-width: 720px) {
  .wrap { padding: var(--s7) var(--s4) var(--s8); }
  .five, .logos { grid-template-columns: 1fr; }
  table { font-size: 14.5px; }
  th, td { padding: var(--s2) var(--s3); }
}