:root { --green:#087f6c; --canvas:#f2f7ff; --text:#1a1c1e; --muted:#5b6166; --line:#dce4e8; }
* { box-sizing:border-box; }
body { margin:0; color:var(--text); background:var(--canvas); font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif; line-height:1.7; }
header, main, footer { width:min(820px,calc(100% - 40px)); margin-inline:auto; }
header { display:flex; align-items:center; justify-content:space-between; padding:24px 0; }
.brand { color:var(--green); font-size:25px; font-weight:800; text-decoration:none; }
nav { display:flex; flex-wrap:wrap; gap:12px; }
nav a, footer a { color:var(--muted); }
main { background:#fff; border:1px solid var(--line); border-radius:20px; padding:clamp(24px,5vw,52px); box-shadow:0 8px 32px rgba(8,127,108,.07); }
h1 { line-height:1.25; margin-top:0; }
h2 { margin-top:2.2em; font-size:1.25rem; }
h3 { margin-top:1.7em; }
.meta,.muted { color:var(--muted); }
.notice { border-left:4px solid var(--green); background:#edf8f5; padding:14px 16px; border-radius:8px; }
.danger { border-left-color:#b3261e; background:#fff2f1; }
table { width:100%; border-collapse:collapse; }
th,td { border-bottom:1px solid var(--line); text-align:left; vertical-align:top; padding:10px 8px; }
.button { display:inline-block; padding:12px 18px; border-radius:12px; background:var(--green); color:#fff; font-weight:700; text-decoration:none; }
footer { padding:28px 0 48px; color:var(--muted); font-size:14px; }
footer p { display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:640px) { header { align-items:flex-start; gap:12px; flex-direction:column; } main { padding:24px 20px; } }