* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:"Pretendard", "Noto Sans KR", "Malgun Gothic", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", sans-serif; line-height:1.65; }
a { color:inherit; }
.site-header { border-bottom:1px solid var(--line); background:rgba(255,255,255,.97); }
.nav-wrap, .container { width:min(960px, calc(100% - 32px)); margin:0 auto; }
.nav-wrap { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { color:var(--ink); text-decoration:none; font-size:19px; font-weight:850; }
.brand small { color:var(--blue); font-size:11px; font-weight:800; }
.desktop-nav { display:flex; align-items:center; gap:6px; }
.desktop-nav a { color:var(--muted); font-size:14px; font-weight:720; text-decoration:none; padding:9px 11px; }
.desktop-nav a:hover, .desktop-nav a:focus-visible, .desktop-nav a[aria-current="page"] { color:var(--blue); background:var(--blue-soft); outline:none; }
.desktop-nav .dashboard-link { color:#fff !important; background:var(--blue); }
.desktop-nav .dashboard-link:hover, .desktop-nav .dashboard-link:focus-visible { background:#0d527a; }
.mobile-nav { display:none; position:relative; }
.mobile-nav summary { list-style:none; cursor:pointer; color:var(--ink); font-size:13px; font-weight:800; padding:8px 10px; border:1px solid var(--line); background:#fff; }
.mobile-nav summary::-webkit-details-marker { display:none; }
.mobile-nav-links { position:absolute; z-index:2; right:0; top:43px; min-width:164px; padding:6px; border:1px solid var(--line); background:#fff; box-shadow:0 8px 20px rgba(21,36,53,.12); }
.mobile-nav-links a { display:block; color:var(--muted); text-decoration:none; font-size:14px; font-weight:720; padding:9px; }
.article-head { padding:50px 0 34px; background:#fff; border-bottom:1px solid var(--line); }
.eyebrow { margin:0 0 10px; color:var(--blue); font-size:13px; font-weight:820; }
h1 { max-width:760px; margin:0; font-size:35px; line-height:1.28; letter-spacing:0; }
.lead { max-width:700px; margin:15px 0 0; color:var(--muted); font-size:16px; }
.meta { margin:16px 0 0; color:#7a8893; font-size:12px; }
.article { padding:34px 0 52px; }
.article h2 { margin:33px 0 9px; font-size:21px; line-height:1.35; letter-spacing:0; }
.article h2:first-child { margin-top:0; }
.article p { margin:0; font-size:15px; }
.article p + h2 { margin-top:34px; }
.guide-figure { margin:24px 0 30px; padding:14px; border:1px solid var(--line); background:#fff; }
.guide-figure img { display:block; width:100%; height:auto; }
.guide-figure figcaption { margin-top:9px; color:var(--muted); font-size:13px; }
.figure-note { color:#687b8b; font-size:13px !important; }
.section { padding:34px 0 52px; }
.guide-list { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.guide-card { min-height:145px; padding:18px; border:1px solid var(--line); background:#fff; text-decoration:none; }
.guide-card:hover, .guide-card:focus-visible { border-color:#9fc8dd; background:#fbfdff; outline:none; }
.guide-card strong { display:block; font-size:17px; }
.tutorial-index { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0 0 30px; }
.tutorial-index a { min-height:92px; padding:14px 15px; border:1px solid var(--line); background:#fff; text-decoration:none; }
.tutorial-index a:hover, .tutorial-index a:focus-visible { border-color:#9fc8dd; background:#fbfdff; outline:none; }
.tutorial-index strong, .tutorial-index span { display:block; }
.tutorial-index strong { color:var(--blue); font-size:14px; }
.tutorial-index span { margin-top:5px; color:var(--muted); font-size:13px; line-height:1.45; }
.tutorial-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:0; margin:20px 0 0; list-style:none; counter-reset:tutorial-step; }
.tutorial-steps li { min-height:92px; padding:13px 14px; border-top:3px solid var(--blue); background:#f8fbfd; counter-increment:tutorial-step; }
.tutorial-steps li::before { content:counter(tutorial-step) ". "; color:var(--blue); font-weight:850; }
.tutorial-steps strong, .tutorial-steps span { display:inline; }
.tutorial-steps span { color:var(--muted); font-size:13px; }
.text-link { display:inline-flex; align-items:center; min-height:36px; margin-left:8px; color:var(--blue); font-size:13px; font-weight:800; }
.guide-card span { display:block; margin-top:6px; color:var(--muted); font-size:14px; }
.callout { margin-top:30px; padding:16px 18px; border-left:3px solid var(--blue); background:var(--blue-soft); }
.callout strong { font-size:14px; }
.callout p { margin-top:4px; color:#344a5c; font-size:14px; }
.article-next-step { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; margin-top:34px; padding:14px 16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fbfdff; }
.article-next-step strong { color:var(--blue); font-size:14px; }
.article-next-step span { color:var(--muted); font-size:13px; }
.article-next-step .action { display:inline-flex; align-items:center; min-height:36px; padding:7px 12px; color:#fff; background:var(--blue); font-size:13px; font-weight:800; text-decoration:none; }
.article-next-step .action:hover, .article-next-step .action:focus-visible { background:#0d527a; outline:none; }
.ad-slot { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:112px; margin:34px 0 0; border:1px dashed #b8c6d0; color:#788793; background:#f9fbfc; font-size:12px; }
.ad-slot strong { color:#536875; font-size:11px; font-weight:800; letter-spacing:.04em; }
.ad-slot small { display:block; margin-top:3px; color:#9aa7b1; text-align:center; }
footer { padding:24px 0 34px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.footer-wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.footer-links { display:flex; flex-wrap:wrap; gap:13px; }
.footer-links a { text-decoration:none; }
.footer-links a:hover { color:var(--blue); text-decoration:underline; }
@media (max-width:600px) { .nav-wrap, .container { width:min(100% - 24px,960px); } .desktop-nav { display:none; } .mobile-nav { display:block; } .article-head { padding:37px 0 28px; } h1 { font-size:27px; } .lead { font-size:15px; } .article { padding:28px 0 40px; } .article h2 { margin-top:29px; font-size:20px; } .article p { font-size:14px; } .guide-list, .tutorial-index, .tutorial-steps { grid-template-columns:1fr; } .article-next-step { grid-template-columns:1fr; gap:5px; } .article-next-step .action { justify-content:center; margin-top:7px; } .footer-wrap { align-items:flex-start; flex-direction:column; } }