:root{--cream:#FFF5D9;--orange:#E8B061;--brown:#8C3520;--ink:#2B2320;--muted:#6B5D54;--card:#FFFDF7}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:linear-gradient(180deg,var(--cream),var(--orange));min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  color:var(--ink);line-height:1.75;padding:0 16px}
.wrap{max-width:720px;margin:0 auto;padding:48px 0 80px}
header{text-align:center;margin-bottom:36px}
.logo{font-size:15px;letter-spacing:.14em;color:var(--brown);font-weight:700;text-transform:uppercase}
h1{font-size:30px;margin:10px 0 6px;color:var(--brown);letter-spacing:-.02em}
.sub{color:var(--muted);font-size:15px;margin:0}
main{background:var(--card);border-radius:22px;padding:32px 28px;box-shadow:0 10px 34px rgba(110,60,20,.13)}
h2{font-size:20px;margin:34px 0 10px;color:var(--brown);letter-spacing:-.01em}
h2:first-child{margin-top:0}
p,li{font-size:16px}
ul{padding-left:20px}
table{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid rgba(140,53,32,.16);vertical-align:top}
th{color:var(--brown);font-weight:700;white-space:nowrap}
a{color:var(--brown)}
code{background:rgba(140,53,32,.08);padding:2px 6px;border-radius:6px;font-size:14px}
.note{background:rgba(232,176,97,.16);border-left:4px solid var(--orange);padding:14px 16px;border-radius:0 12px 12px 0;margin:18px 0}
nav{margin-top:28px;text-align:center;font-size:15px}
nav a{margin:0 10px;font-weight:600}
footer{margin-top:28px;text-align:center;color:#7a5b3a;font-size:13px}
@media (max-width:520px){h1{font-size:25px}main{padding:24px 20px}th,td{display:block;border:none;padding:2px 0}
  tr{display:block;border-bottom:1px solid rgba(140,53,32,.16);padding:10px 0}}

/* 좁은 화면에서는 표를 세로로 쌓는다. 그때 머리글 줄(항목/내용/보내는 곳)만 남으면
   뜻 없는 단어 세 개가 먼저 보이므로 감춘다. 내용 줄은 그 자체로 읽힌다. */
@media (max-width:520px){table tr:first-child{display:none}}