/* canvatoon.ai 회사 대문 — 공용 스타일
   책의 말투를 빌린다: 가름끈(로고), 덧말(첫 화면 제목), 차례(점선 리더), 판권면(꼬리말).
   본문은 바탕(Gowun Batang), 단추·표·메뉴 같은 화면 글은 고딕(IBM Plex Sans KR).
   색은 :root 토큰만 쓴다. 어두운 화면은 prefers-color-scheme 으로 토큰만 바꾼다. */

:root {
  --paper: #f2f4f3;      /* 종이 */
  --paper-2: #e4e9ec;    /* 덧종이: 코드·표 머리 */
  --ink: #1d2433;        /* 먹 */
  --ink-2: #4a5263;      /* 연먹: 보조 글 */
  --indigo: #2a4a8a;     /* 쪽빛: 링크·가름끈 */
  --indigo-deep: #1f3a70;
  --indigo-soft: #d8e0ef;
  --rule: #c5cbd3;       /* 괘선 */
  --warn: #8e2f2a;       /* 주의 */
  --on-indigo: #f2f4f3;

  --serif: "Gowun Batang", "Noto Serif KR", "AppleMyungjo", "Batang", serif;
  --sans: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "D2Coding", Consolas, monospace;

  --gutter: 16px;
  --measure: 34em;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141922;
    --paper-2: #1d2430;
    --ink: #e3e6eb;
    --ink-2: #a6adba;
    --indigo: #a3b8e6;
    --indigo-deep: #c3d1f0;
    --indigo-soft: #26324d;
    --rule: #323b4b;
    --warn: #f0a39b;
    --on-indigo: #141922;
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.8;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 48em) {
  body { font-size: 1.125rem; }
}

::selection { background: var(--indigo-soft); color: var(--ink); }

a { color: var(--indigo); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--indigo-deep); text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 2px; }

img, svg { max-width: 100%; }

p, li, dd { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

.wrap { width: min(100% - 2 * var(--gutter), 72rem); margin-inline: auto; }

.skip {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 10;
  padding: 0.5rem 0.9rem; background: var(--indigo); color: var(--on-indigo);
  font-family: var(--sans); font-size: 0.9375rem; text-decoration: none;
}
.skip:focus { top: 0.5rem; }

/* ── 머리: 가름끈 + 누리집 이름 ───────────────────────────── */

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }

.ribbon {
  flex: none;
  width: 12px;
  height: 46px;
  background: var(--indigo);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}

.brand-name {
  padding-top: 0.95rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.01em;
}

.masthead nav ul {
  display: flex;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0.95rem 0 0;
  list-style: none;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1;
}
.masthead nav a { color: var(--ink-2); text-decoration: none; }
.masthead nav a:hover { color: var(--indigo); text-decoration: underline; }

/* ── 첫 화면: 덧말 제목 + 차례 ─────────────────────────────── */

.hero {
  display: grid;
  gap: 3rem;
  padding-block: 3.5rem 3.5rem;
}

@media (min-width: 60em) {
  .hero {
    grid-template-columns: minmax(0, 1.55fr) minmax(17rem, 1fr);
    align-items: end;
    column-gap: 5rem;
    padding-block: 7rem 5.5rem;
  }
}

.hero-title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(2.5rem, 1.35rem + 5.6vw, 5.25rem);
  line-height: 1.16;
  letter-spacing: -0.025em;
}

.hero-title .line { display: block; width: fit-content; }
.hero-title .line + .line { margin-top: 0.42em; }

/* 덧말: 어느 제품이 그 줄을 맡는지 줄 위에 단다. 읽기 프로그램에는 숨기고 본문에서 다시 말한다. */
.gloss {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--indigo);
}
.gloss::after {
  content: "";
  flex: 1;
  height: 0.55rem;
  margin-top: 0.45rem;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform-origin: left top;
  animation: gloss-draw 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
}
.hero-title .line + .line .gloss::after { animation-delay: 0.45s; }

@keyframes gloss-draw {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

.lede {
  max-width: 28em;
  margin: 2.25rem 0 0;
  color: var(--ink-2);
  font-size: 1.1875rem;
  line-height: 1.75;
}

/* 차례: 점선 리더 */
.toc h2 {
  margin: 0 0 0.6rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc a {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.7rem 0;
  color: var(--ink);
  text-decoration: none;
}
.toc .t { font-weight: 700; font-size: 1.1875rem; }
.toc .leader {
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 2px dotted var(--rule);
  transform: translateY(-0.3em);
}
.toc .d { font-family: var(--sans); font-size: 0.9375rem; color: var(--ink-2); }
.toc a:hover .t { color: var(--indigo); text-decoration: underline; text-underline-offset: 0.22em; }
.toc a:hover .leader { border-color: var(--indigo); }

/* ── 장(章): 제품 하나에 장 하나 ───────────────────────────── */

.chapter {
  display: grid;
  gap: 1.5rem 4rem;
  padding-block: 3.5rem;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 1rem;
}

@media (min-width: 60em) {
  .chapter {
    grid-template-columns: 15rem minmax(0, 1fr);
    padding-block: 5rem;
  }
  .chapter-head { position: sticky; top: 2rem; align-self: start; }
}

.chapter-head h2 {
  margin: 0;
  font-weight: 700;
  font-size: clamp(2.125rem, 1.6rem + 2vw, 2.875rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.chapter-head p {
  margin: 0.6rem 0 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.chapter-body { max-width: 42rem; }
.chapter-body > :first-child { margin-top: 0; }

.intro {
  max-width: var(--measure);
  font-size: 1.25rem;
  line-height: 1.7;
}

.chapter-body h3 {
  margin: 2.75rem 0 0.25rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink-2);
}

/* 정의 목록: 이름(고딕) — 설명(명조) */
.defs { margin: 0.5rem 0 0; }
.defs > div {
  display: grid;
  gap: 0.15rem 2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
}
.defs > div:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 40em) {
  .defs > div { grid-template-columns: 10.5rem minmax(0, 1fr); }
}
.defs dt {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.8;
}
.defs dd { margin: 0; }
.defs dd small {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.aside-note {
  max-width: var(--measure);
  margin: 1.5rem 0 0;
  color: var(--ink-2);
  font-size: 1rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.75rem;
  margin-top: 2.25rem;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.4;
}

.button {
  display: inline-block;
  padding: 0.8rem 1.25rem;
  border-radius: 2px;
  background: var(--indigo);
  color: var(--on-indigo);
  font-weight: 600;
  text-decoration: none;
}
.button:hover { background: var(--indigo-deep); color: var(--on-indigo); }

.mail {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.05rem + 2.2vw, 2.25rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

/* ── 판권면: 꼬리말 ───────────────────────────────────────── */

.colophon { margin-top: 2rem; padding-block: 0 3.5rem; }

.colophon-inner {
  border-top: 2px solid var(--ink);
  padding-top: 1.5rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.6;
}

@media (min-width: 48em) {
  .colophon-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem 3rem;
    align-items: start;
  }
}

.colophon-name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.25rem;
}

.colophon dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.3rem 1.5rem;
  margin: 1rem 0 0;
}
.colophon dl div { display: contents; }
.colophon dt { color: var(--ink-2); }
.colophon dd { margin: 0; }

.colophon-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48em) {
  .colophon-links { flex-direction: column; margin-top: 0.25rem; text-align: right; }
}
.colophon-links a { color: var(--ink-2); }
.colophon-links a:hover { color: var(--indigo); }

/* ── 안내서·방침 쪽 ───────────────────────────────────────── */

.doc {
  display: grid;
  gap: 2.5rem 4.5rem;
  padding-block: 3rem 4rem;
}

@media (min-width: 64em) {
  .doc {
    grid-template-columns: 14rem minmax(0, 40rem);
    padding-block: 5rem 5rem;
  }
  .doc-aside { position: sticky; top: 2rem; align-self: start; }
  .doc-head { grid-column: 1 / -1; }
}

.doc-head { max-width: 44rem; }
.doc-head h1 {
  margin: 0;
  font-weight: 700;
  font-size: clamp(2.125rem, 1.45rem + 2.8vw, 3.5rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
}
.doc-sub {
  margin: 1rem 0 0;
  max-width: var(--measure);
  color: var(--ink-2);
  font-size: 1.1875rem;
  line-height: 1.7;
}
.doc-meta {
  margin: 1rem 0 0;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--ink-2);
}

.status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}
.status li { padding: 0.45rem 0.65rem; border: 1px solid var(--ink); border-radius: 2px; }
.status li:first-child { background: var(--ink); color: var(--paper); }

.doc-aside .toc a { padding: 0.45rem 0; }
.doc-aside .toc .t { font-size: 1rem; font-weight: 400; }

.doc-main { min-width: 0; max-width: 40rem; }
.doc-main > :first-child { margin-top: 0; }

.doc-main h2 {
  margin: 3.5rem 0 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  scroll-margin-top: 1.25rem;
}
.doc-main > h2:first-child { margin-top: 0; }

.doc-main h3 {
  margin: 2.25rem 0 0.5rem;
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.5;
  scroll-margin-top: 1.25rem;
}

.doc-main p, .doc-main ul, .doc-main ol { margin: 0.75rem 0; }
.doc-main ul { padding-left: 1.25rem; }
.doc-main li + li { margin-top: 0.3rem; }

/* 차례대로 하는 일에만 번호를 단다 */
ol.steps { padding: 0; list-style: none; counter-reset: step; }
ol.steps > li {
  position: relative;
  padding-left: 2.4rem;
  counter-increment: step;
}
ol.steps > li + li { margin-top: 0.6rem; }
ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.22em;
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid var(--indigo);
  border-radius: 50%;
  color: var(--indigo);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.45rem;
  text-align: center;
}

/* 앱 화면의 단추·항목 이름: 화면 글이라는 것을 고딕 칩으로 보여 준다 */
.ui {
  padding: 0.05em 0.4em;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper-2);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.86em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.note {
  margin: 1.5rem 0;
  padding: 0.1rem 0 0.1rem 1.25rem;
  border-left: 3px solid var(--indigo);
}
.note > :first-child { margin-top: 0; }
.note > :last-child { margin-bottom: 0; }
.note-label {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--indigo);
  margin-right: 0.35rem;
}
.note.warn { border-color: var(--warn); }
.note.warn .note-label { color: var(--warn); }

code, pre { font-family: var(--mono); }
code {
  padding: 0.1em 0.35em;
  border-radius: 3px;
  background: var(--paper-2);
  font-size: 0.86em;
  overflow-wrap: anywhere;
}
pre {
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border-radius: 3px;
  background: var(--paper-2);
  font-size: 0.9rem;
  line-height: 1.6;
  overflow-x: auto;
}
pre code { padding: 0; background: none; font-size: inherit; }

.table-wrap { margin: 1.25rem 0; overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.6;
}
th, td {
  padding: 0.65rem 1rem 0.65rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
thead th { border-bottom: 1.5px solid var(--ink); font-weight: 600; }
td:first-child, th:first-child { white-space: nowrap; }

.endnote {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--ink-2);
}

/* ── 404 ─────────────────────────────────────────────────── */

.lost { padding-block: 5rem 4rem; max-width: 40rem; }
.lost h1 {
  margin: 0;
  font-weight: 700;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .masthead nav, .skip, .actions .button { display: none; }
  body { background: #fff; color: #000; }
}