:root{
  --paper:    #E9EBE5;
  --surface:  #F5F6F2;
  --ink:      #1B2B22;
  --ink-soft: #5C6B61;
  --rule:     #CBD0C6;
  --accent:   #4ADE80;

  --font-ui: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
             'Malgun Gothic', system-ui, sans-serif;
  --gap: clamp(16px, 3vw, 28px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }

body{
  font-family:var(--font-ui);
  background:var(--paper);
  color:var(--ink);
  line-height:1.7;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

a{ color:inherit; }
:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }

.topbar{ border-bottom:1px solid var(--rule); background:var(--surface); }
.topbar-in{
  max-width:1200px; margin:0 auto;
  padding:12px var(--gap);
  display:flex; align-items:baseline; gap:14px;
}
.brand{ font-weight:700; font-size:1rem; letter-spacing:-.01em; text-decoration:none; }
.topbar nav{ margin-left:auto; display:flex; gap:16px; }
.topbar nav a{ font-size:.875rem; color:var(--ink-soft); text-decoration:none; }
.topbar nav a:hover{ color:var(--ink); }

main{ flex:1; width:100%; max-width:760px; margin:0 auto; padding:40px var(--gap) 60px; }

h1{
  font-size:clamp(1.5rem, 4vw, 1.9rem);
  letter-spacing:-.025em;
  margin-bottom:8px;
}
.updated{ font-size:.85rem; color:var(--ink-soft); margin-bottom:36px; }

h2{
  font-size:1.05rem;
  letter-spacing:-.015em;
  margin:34px 0 10px;
  padding-top:18px;
  border-top:1px solid var(--rule);
}
h2:first-of-type{ border-top:none; padding-top:0; margin-top:24px; }

h3{ font-size:.95rem; margin:20px 0 6px; }

p{ margin-bottom:12px; font-size:.94rem; }
ul, ol{ margin:0 0 14px 20px; font-size:.94rem; }
li{ margin-bottom:5px; }

strong{ font-weight:700; }

table{
  width:100%; border-collapse:collapse;
  font-size:.9rem; margin:10px 0 18px;
}
th, td{ text-align:left; padding:9px 8px; border-bottom:1px solid var(--rule); }
th{ font-weight:600; background:var(--surface); }

.callout{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:10px;
  padding:16px 18px;
  margin:18px 0;
  font-size:.94rem;
}
.callout p:last-child{ margin-bottom:0; }

.mail{
  font-size:1.05rem; font-weight:600;
  text-decoration:none;
  border-bottom:2px solid var(--accent);
}

footer{
  border-top:1px solid var(--rule);
  padding:20px var(--gap);
  font-size:.8rem; color:var(--ink-soft);
}
.footer-in{
  max-width:1200px; margin:0 auto;
  display:flex; flex-wrap:wrap; gap:14px;
}
footer a{ text-decoration:none; }
footer a:hover{ text-decoration:underline; }