:root{
  --ink:#16202e; --muted:#54617a; --faint:#8590a6;
  --blue:#1d5cd6; --blue-soft:#e9f0fd; --blue-line:#b5cbf3;
  --amber:#8a5307; --amber-soft:#fdf5e6; --amber-line:#e8c98e;
  --green:#136b45; --green-soft:#e7f5ee;
  --rail:#f4f7fb; --line:#dfe5ee; --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  font-size:16.5px; line-height:1.85; word-break:keep-all;
}
a{color:var(--blue)}
img{max-width:100%; display:block}

.masthead{border-bottom:1px solid var(--line); background:var(--rail)}
.masthead .in{max-width:1120px; margin:0 auto; padding:54px 28px 42px}
.brand{display:inline-block; font-weight:700; font-size:14.5px;
  background:var(--blue); color:#fff; padding:5px 13px; border-radius:7px}
h1{margin:20px 0 10px; font-size:37px; line-height:1.3; font-weight:800; letter-spacing:-.03em}
.lede{margin:0; color:var(--muted); font-size:17.5px; max-width:58ch}
.meta{margin-top:22px; color:var(--faint); font-size:14px}

.flow{display:flex; flex-wrap:wrap; gap:8px; margin-top:32px}
.flow div{flex:1 1 118px; background:#fff; border:1px solid var(--blue-line);
  border-radius:9px; padding:12px 14px; font-size:14.5px; font-weight:600;
  text-align:center; color:var(--blue)}
.flow div span{display:block; font-weight:400; color:var(--faint); font-size:12.5px; margin-top:2px}

.wrap{max-width:1120px; margin:0 auto; padding:0 28px; display:flex; gap:50px; align-items:flex-start}
nav{position:sticky; top:0; width:200px; flex:none; padding:44px 0; font-size:14.5px}
nav p{margin:0 0 12px; font-weight:700; font-size:13px; color:var(--faint)}
nav ol{list-style:none; margin:0; padding:0; counter-reset:n}
nav li{counter-increment:n; margin-bottom:3px}
nav a{display:block; padding:5px 10px 5px 30px; border-radius:7px; text-decoration:none;
  color:var(--muted); position:relative; line-height:1.5}
nav a::before{content:counter(n); position:absolute; left:10px; color:var(--faint); font-size:12.5px}
nav a:hover{background:var(--blue-soft); color:var(--blue)}
main{flex:1; min-width:0; padding:44px 0 100px; max-width:720px}

section{padding-top:26px; margin-bottom:50px}
section+section{border-top:1px solid var(--line); padding-top:44px}
h2{font-size:26px; font-weight:800; letter-spacing:-.02em; margin:0 0 6px; line-height:1.35}
h2 em{font-style:normal; color:var(--faint); font-weight:600; font-size:15px; display:block; margin-bottom:4px}
h3{font-size:18px; font-weight:700; margin:34px 0 8px; letter-spacing:-.01em}
p{margin:0 0 15px}
ul{margin:0 0 15px; padding-left:20px}
li{margin-bottom:6px}
code{background:var(--rail); border:1px solid var(--line); border-radius:5px;
  padding:1px 6px; font-size:14px; font-family:ui-monospace,"SF Mono",Consolas,monospace}

figure{margin:24px 0 28px}
figure img{border:1px solid var(--line); border-radius:9px; background:var(--rail); margin:0 auto}
figcaption{margin-top:9px; font-size:13.5px; color:var(--faint); line-height:1.6}

.steps{list-style:none; counter-reset:s; padding:0; margin:0}
.steps>li{counter-increment:s; position:relative; padding-left:44px; margin-bottom:34px}
.steps>li::before{content:counter(s); position:absolute; left:0; top:1px;
  width:29px; height:29px; border-radius:50%; background:var(--blue); color:#fff;
  font-size:14.5px; font-weight:700; display:flex; align-items:center; justify-content:center}
.steps h3{margin:0 0 7px; font-size:19px}

.note,.warn,.good{border-radius:9px; padding:15px 19px; margin:22px 0; font-size:15.5px}
.note{background:var(--blue-soft); border-left:3px solid var(--blue)}
.warn{background:var(--amber-soft); border-left:3px solid var(--amber-line); color:var(--amber)}
.good{background:var(--green-soft); border-left:3px solid var(--green); color:var(--green)}
.note :last-child,.warn :last-child,.good :last-child{margin-bottom:0}
.warn strong{color:#6f4204} .good strong{color:#0d5133}

table{width:100%; border-collapse:collapse; margin:20px 0; font-size:15.5px}
th,td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top}
th{background:var(--rail); font-weight:700; font-size:14.5px; width:28%}
.tag{display:inline-block; font-size:12.5px; font-weight:700; padding:2px 8px;
  border-radius:5px; background:var(--blue-soft); color:var(--blue); vertical-align:2px}

footer{border-top:1px solid var(--line); background:var(--rail); margin-top:20px}
footer .in{max-width:1120px; margin:0 auto; padding:30px 28px; color:var(--faint); font-size:14px}

@media(max-width:900px){
  .wrap{display:block; padding:0 20px}
  nav{position:static; width:auto; padding:26px 0 0; border-bottom:1px solid var(--line)}
  nav ol{columns:2; column-gap:16px}
  main{padding:26px 0 70px; max-width:none}
  h1{font-size:28px} .masthead .in{padding:38px 20px 32px}
  footer .in{padding:26px 20px}
}
@media print{
  nav,.flow{display:none} .wrap{display:block} a{color:var(--ink)}
  section{break-inside:avoid} figure{break-inside:avoid}
}

/* ── 아래는 시스템이 덧붙인 것 (2026-09-06) — 위는 사용자가 만든 설명서의 스타일 그대로 ──
   맨 위 띠: 돌아가는 링크, 처음 온 사람에게 하는 인사. 설명서 본문 스타일과 부딪히지 않게 fg- 접두. */
.fg-topbar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  padding:10px 28px;background:#f3f6fc;border-bottom:1px solid #d9e1f2;font-size:14px;line-height:1.6}
.fg-topbar a{color:#1d5cd6;text-decoration:none;font-weight:700}
.fg-topbar a:hover{text-decoration:underline}
.fg-welcome{background:#fdf5e6;border-bottom-color:#e8c98e}
.fg-hello{color:#5a4a23}
.fg-hello a{color:#8a5307;text-decoration:underline}