/* Noto Sans KR — SIL Open Font License 1.1 (전문: /OFL.txt)
   원본 https://fonts.google.com/noto/specimen/Noto+Sans+KR 에서
   이 사이트가 실제로 쓰는 글자만 추린 서브셋(가변 폰트, 굵기 100~900). */
@font-face{
  font-family:"Noto Sans KR";
  src:url("noto-sans-kr-subset.woff2?v=20260910h") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#f4f7fb;
  --card:#fff;
  --line:#dfe7f1;
  --text:#253044;
  --muted:#66758b;
  --blue:#3478d4;
  --blue-soft:#edf5ff;
  --green:#74b95f;
  --yellow:#ffbf2f;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",sans-serif;
  line-height:1.75;
}
a{color:var(--blue)}
.page-shell{width:min(860px,calc(100% - 32px));margin:0 auto}
.site-header{
  margin:22px auto 0;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.96);
  box-shadow:0 8px 24px rgba(48,74,110,.07);
}
.brand img{display:block;width:150px;height:auto}
.site-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 16px}
.site-nav a{color:#46566d;text-decoration:none;font-size:14px;font-weight:750}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--blue);text-decoration:underline}
main{margin:22px auto 42px}
.hero,.content-card{
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--card);
  box-shadow:0 10px 30px rgba(48,74,110,.07);
}
.hero{padding:38px 42px;margin-bottom:18px;background:linear-gradient(135deg,#fff 45%,#edf6ff)}
.eyebrow{margin:0 0 6px;color:var(--blue);font-size:13px;font-weight:850;letter-spacing:.06em}
h1{margin:0;font-size:clamp(28px,5vw,42px);line-height:1.25;letter-spacing:-.04em}
.lead{margin:14px 0 0;color:var(--muted);font-size:17px}
.content-card{padding:30px 36px;margin-top:16px}
h2{margin:0 0 12px;font-size:24px;line-height:1.35;letter-spacing:-.02em}
h3{margin:24px 0 8px;font-size:18px}
p{margin:9px 0}
ul,ol{padding-left:22px}
li+li{margin-top:6px}
.steps,.guide-grid{display:grid;gap:12px}
.steps{grid-template-columns:repeat(2,minmax(0,1fr));counter-reset:step}
.step-card{padding:18px;border:1px solid #dbe8f6;border-radius:15px;background:#f8fbff}
.step-card::before{counter-increment:step;content:"STEP " counter(step);display:block;color:var(--blue);font-size:11px;font-weight:900;letter-spacing:.08em}
.step-card strong{display:block;margin:5px 0 4px;font-size:17px}
.guide-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.guide-link{display:block;padding:20px;border:1px solid var(--line);border-radius:15px;color:var(--text);text-decoration:none;background:#fff}
.guide-link:hover{border-color:#9fc6f5;box-shadow:0 7px 18px rgba(52,120,212,.1)}
.guide-link strong{display:block;margin-bottom:5px;color:var(--blue)}
.guide-link span{color:var(--muted);font-size:14px}
.example{margin:16px 0;padding:16px 18px;border-left:4px solid var(--yellow);border-radius:4px 12px 12px 4px;background:#fffaf0}
.note{padding:15px 17px;border-radius:12px;background:var(--blue-soft);color:#40566f}
.cta{display:inline-block;margin-top:12px;padding:11px 17px;border-radius:12px;background:var(--blue);color:#fff;text-decoration:none;font-weight:800}
.site-footer{margin:0 auto 26px;padding:18px 2px;color:var(--muted);font-size:13px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:7px 12px;margin-bottom:6px}
.site-footer a{font-weight:700;text-decoration:none}
.updated{color:#7b8798;font-size:13px}
@media(max-width:680px){
  .site-header{align-items:flex-start;flex-direction:column}
  .site-nav{justify-content:flex-start}
  .hero{padding:28px 24px}
  .content-card{padding:24px 22px}
  .steps,.guide-grid{grid-template-columns:1fr}
}
@media print{
  body{background:#fff}
  .site-header,.site-footer,.cta{display:none!important}
  .page-shell{width:100%}
  main{margin:0}
  .hero,.content-card{box-shadow:none;border-color:#ddd}
}