/*
 * 공개 사이트(cellflow.kr)의 스타일. 색·글자 값은 docs/design.md 2장의 토큰(apps/web/src/styles/tokens.css)과 같다.
 * 글 위주의 문서 페이지라 본문 글자는 16px이고, 다른 곳의 글꼴·그림을 부르지 않는다(시스템 글꼴로 그린다).
 */
:root {
  --cf-canvas: #f5f6f8;
  --cf-surface: #ffffff;
  --cf-subtle: #fafafb;
  --cf-hair: #ebedf0;
  --cf-line: #e1e4e8;
  --cf-text: #171a1f;
  --cf-text-2: #4b515c;
  --cf-text-3: #646a75;
  --cf-accent: #4c50c8;
  --cf-accent-hover: #4246b5;
  --cf-warn: #8a5a00;
  --cf-warn-bg: #fff7e6;
  --cf-warn-line: #f1e2bf;
  --cf-sans:
    'Pretendard Variable', Pretendard, -apple-system, 'Segoe UI', 'Malgun Gothic', system-ui, sans-serif;
  --cf-w-reg: 420;
  --cf-w-semi: 600;
  --cf-w-bold: 680;
  --cf-r: 6px;
  --cf-r-lg: 10px;

  /* 공개 사이트만의 값: 읽는 글의 크기와 폭 */
  --site-text: 16px;
  --site-small: 14px;
  --site-width: 760px;
  --site-gutter: 20px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cf-canvas);
  color: var(--cf-text);
  font-family: var(--cf-sans);
  font-size: var(--site-text);
  font-weight: var(--cf-w-reg);
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--cf-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--cf-accent-hover);
}

a:focus-visible {
  outline: 2px solid var(--cf-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: var(--site-gutter);
  top: -100px;
  padding: 8px 12px;
  background: var(--cf-surface);
  border: 1px solid var(--cf-line);
  border-radius: var(--cf-r);
}

.skip:focus {
  top: 8px;
}

.site-head,
.site-foot,
main {
  max-width: calc(var(--site-width) + 2 * var(--site-gutter));
  margin: 0 auto;
  padding-left: var(--site-gutter);
  padding-right: var(--site-gutter);
}

.site-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 16px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.brand {
  color: var(--cf-text);
  font-size: 18px;
  font-weight: var(--cf-w-bold);
  text-decoration: none;
}

.brand:hover {
  color: var(--cf-text);
}

/* 따로 선 링크(머리·바닥·목차·링크 목록)는 누를 곳을 넉넉히 둔다. 문장 안의 링크는 글줄 높이 그대로다 */
.brand,
.site-head nav a,
.site-foot a,
.links a,
.toc a {
  display: inline-block;
  padding: 9px 0;
}

main {
  padding-top: 8px;
  padding-bottom: 40px;
}

.sheet {
  background: var(--cf-surface);
  border: 1px solid var(--cf-line);
  border-radius: var(--cf-r-lg);
  padding: 32px 36px 40px;
}

h1 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: var(--cf-w-bold);
  line-height: 1.3;
}

h2 {
  margin: 44px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--cf-hair);
  font-size: 20px;
  font-weight: var(--cf-w-semi);
  line-height: 1.4;
}

h3 {
  margin: 28px 0 8px;
  font-size: 17px;
  font-weight: var(--cf-w-semi);
  line-height: 1.4;
}

p,
ul,
ol {
  margin: 0 0 14px;
}

ul,
ol {
  padding-left: 22px;
}

li {
  margin-bottom: 6px;
}

strong {
  font-weight: var(--cf-w-semi);
}

.effective {
  color: var(--cf-text-2);
}

.lead {
  color: var(--cf-text-2);
  font-size: 18px;
}

.summary {
  margin: 20px 0 0;
  padding: 16px 20px 6px;
  background: var(--cf-subtle);
  border: 1px solid var(--cf-line);
  border-radius: var(--cf-r);
}

.summary h2 {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  font-size: 17px;
}

.notice {
  padding: 12px 16px;
  background: var(--cf-warn-bg);
  border: 1px solid var(--cf-warn-line);
  border-radius: var(--cf-r);
  color: var(--cf-warn);
}

.toc {
  margin-top: 24px;
}

.toc h2 {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  font-size: 17px;
}

.toc ol {
  columns: 2;
  column-gap: 32px;
}

.links {
  list-style: none;
  padding: 0;
  margin-top: 24px;
}

.links li,
.toc li {
  margin-bottom: 0;
}

table {
  width: 100%;
  margin: 0 0 16px;
  border-collapse: collapse;
  font-size: var(--site-text);
}

/* 네 칸 표: 첫 칸(누구의 정보)과 끝 칸(보유 기간·위치)이 너무 좁아지지 않게 폭을 권한다.
   고정 배치(table-layout: fixed)는 쓰지 않는다: 칸이 가장 긴 낱말보다 좁아져 낱말이 중간에서 끊긴다 */
table.stack thead th:first-child {
  width: 19%;
}

table.stack thead th:nth-child(2) {
  width: 36%;
}

table.stack thead th:last-child {
  width: 21%;
}

caption {
  padding: 0 0 8px;
  color: var(--cf-text-2);
  font-weight: var(--cf-w-semi);
  text-align: left;
}

th,
td {
  padding: 10px 12px;
  border: 1px solid var(--cf-line);
  text-align: left;
  vertical-align: top;
}

thead th {
  background: var(--cf-subtle);
  color: var(--cf-text-2);
  font-weight: var(--cf-w-semi);
}

tbody th {
  font-weight: var(--cf-w-semi);
}

.site-foot a {
  padding: 11px 0;
}

.site-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 20px;
  padding-top: 0;
  padding-bottom: 40px;
  color: var(--cf-text-2);
  font-size: var(--site-small);
}

/* 휴대폰 폭: 종이 테두리를 빼고, 표는 행마다 한 묶음으로 쌓는다(가로 스크롤이 생기지 않게) */
@media (max-width: 640px) {
  :root {
    --site-gutter: 16px;
  }

  body {
    background: var(--cf-surface);
  }

  .sheet {
    padding: 8px 0 0;
    border: 0;
    border-radius: 0;
  }

  h1 {
    font-size: 24px;
  }

  .toc ol {
    columns: 1;
  }

  table.stack,
  table.stack tbody,
  table.stack tr,
  table.stack th,
  table.stack td,
  table.stack caption {
    display: block;
  }

  table.stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  table.stack tr {
    margin-bottom: 12px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-r);
  }

  table.stack th,
  table.stack td {
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--cf-hair);
  }

  table.stack tr > :last-child {
    border-bottom: 0;
  }

  table.stack tbody th {
    background: var(--cf-subtle);
    border-radius: var(--cf-r) var(--cf-r) 0 0;
  }

  table.stack td::before {
    content: attr(data-label);
    display: block;
    color: var(--cf-text-3);
    font-size: var(--site-small);
    font-weight: var(--cf-w-semi);
  }
}

/* 인쇄: 본문만 낸다(머리·바닥의 이동 링크와 건너뛰기 링크는 뺀다) */
@media print {
  .site-head,
  .site-foot,
  .skip,
  .toc {
    display: none;
  }

  body {
    background: #ffffff;
  }

  main {
    max-width: none;
    padding: 0;
  }

  .sheet {
    padding: 0;
    border: 0;
  }

  a {
    color: inherit;
  }
}