/* emoi 공개 사이트 공통 스타일. 외부 의존성 없이 단독으로 동작한다 */
/* 랜딩(index.html)과 같은 한지 톤 흰 바탕. 법적 문서는 길게 읽는 화면이라 자간과 행간을 넉넉히 둔다 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Gowun+Batang:wght@400;700&family=IBM+Plex+Sans+KR:wght@300;400;500;600&family=Be+Vietnam+Pro:wght@300;400;500&display=swap');

:root {
  --bg: #FBF8F6;
  --surface: #FFFFFF;
  --raise: #F4EDEB;
  --text: #1C1013;
  --muted: #4A3A3E;
  --faint: #7A6469;
  --line: #E7DBD8;
  --line-strong: #D6C6C2;
  --brand: #C73650;
  --brand-mark: #E85D75;
  --nacre: #24756A;
  --todo-bg: rgba(200,155,60,.16);
  --todo-ink: #8A6115;
  --todo-line: rgba(200,155,60,.42);
  --radius: 10px;
  --display: "Cormorant Garamond", "Gowun Batang", Georgia, "Apple SD Gothic Neo", serif;
  --sans: "IBM Plex Sans KR", "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Apple SD Gothic Neo", "Malgun Gothic", Roboto, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.9;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 740px; margin: 0 auto; padding: 0 20px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

/* 헤더 */
.site-head {
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
  background: rgba(251,248,246,.9);
  backdrop-filter: blur(14px);
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 64px; flex-wrap: wrap;
}
.logo {
  font-family: var(--display);
  font-weight: 600; font-size: 27px; letter-spacing: 0.01em; line-height: 1;
  color: var(--text); text-decoration: none;
}
.site-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-nav a {
  color: var(--faint); text-decoration: none; font-size: 13.5px; white-space: nowrap;
  padding: 2px 0; border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] { color: var(--text); font-weight: 500; border-bottom-color: var(--brand); }

/* 본문 */
main { padding: 52px 0 80px; }
h1 { font-family: var(--display); font-size: 42px; font-weight: 700; line-height: 1.28; letter-spacing: -0.005em; margin: 0 0 12px; text-wrap: balance; }
h2 {
  font-family: var(--display);
  font-size: 25px; font-weight: 700; margin: 50px 0 14px; padding-top: 28px;
  border-top: 1px solid var(--line); letter-spacing: 0.005em; text-wrap: balance;
}
h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 34px; }
/* 개러몬드는 숫자를 옛날식으로 그린다. 조항 번호가 한글 옆에서 어색해지므로 라이닝으로 고정한다 */
h1, h2, h3, .logo { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
h3 { font-family: var(--display); font-size: 20px; font-weight: 700; margin: 32px 0 8px; letter-spacing: 0.005em; }
p, li { color: var(--muted); font-weight: 300; }
p strong, li strong { color: var(--text); font-weight: 500; }
a { color: var(--brand); text-underline-offset: 3px; }
.lead {
  color: var(--faint); font-size: 12px; font-weight: 500; margin: 0 0 36px;
  letter-spacing: .2em; text-transform: uppercase;
}
ul, ol { padding-left: 22px; }
li { margin: 7px 0; }
li::marker { color: var(--brand-mark); }
strong { font-weight: 500; }

/* 표 */
.table-scroll { overflow-x: auto; margin: 18px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 460px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--muted); }
tr:last-child td { border-bottom: 0; }
th {
  background: var(--raise); color: var(--faint); font-weight: 500; white-space: nowrap;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}

/* 채워야 할 빈칸 — 배포 전에 반드시 없애야 한다 */
.todo {
  background: var(--todo-bg); color: var(--todo-ink);
  border: 1px solid var(--todo-line);
  padding: 1px 8px; border-radius: 5px; font-weight: 500;
  font-size: 0.92em; white-space: nowrap;
}
.notice {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--brand); border-radius: var(--radius);
  padding: 16px 20px; margin: 26px 0; font-size: 14.5px; color: var(--muted);
}
.notice strong { color: var(--text); font-weight: 500; }

/* 언어 전환 */
.langs { display: flex; gap: 8px; margin: 0 0 30px; }
.langs a {
  font-size: 12.5px; text-decoration: none; color: var(--faint); font-weight: 500;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 15px;
  background: var(--surface);
}
.langs a:hover { color: var(--text); border-color: var(--brand); }
.langs a[aria-current="true"] {
  background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 500;
}

/* 홈 (랜딩을 쓰지 않는 경우의 대체 화면) */
.hero { padding: 72px 0 8px; }
.hero h1 { font-size: 50px; }
.tagline { font-size: 19px; font-weight: 300; color: var(--muted); margin: 0 0 38px; }
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); margin: 38px 0; }
.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; background: var(--surface); text-decoration: none; color: inherit; display: block;
}
.card:hover { border-color: var(--brand); }
.card h3 { margin: 0 0 6px; font-size: 19px; color: var(--text); }
.card p { margin: 0; font-size: 14px; color: var(--faint); line-height: 1.65; }

/* 푸터 */
.site-foot {
  border-top: 1px solid var(--line); padding: 30px 0 60px;
  font-size: 13px; color: var(--faint);
}
.site-foot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-foot a { color: var(--faint); text-decoration: none; margin-right: 18px; }
.site-foot a:hover { color: var(--text); }

@media (max-width: 560px) {
  .hero { padding: 44px 0 4px; }
  .hero h1 { font-size: 36px; }
  h1 { font-size: 31px; }
  main { padding: 36px 0 60px; }
}
@media print {
  .site-head, .site-foot, .langs { display: none; }
  body { font-size: 11pt; background: #fff; }
  p, li, td, th { color: #222; }
  .todo { border: 1px solid #999; }
}