@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

:root{
  --ink:#10312B;
  --pine:#1F6F63;
  --pine-soft:#E3EFEC;
  --paper:#F4F6F2;
  --white:#FFFFFF;
  --amber:#E8A317;
  --amber-soft:#FDF0D4;
  --amber-ink:#8A5D00;
  --violet:#5B4BC4;
  --violet-soft:#ECE9FB;
  --line:#CBD8D4;
  --muted:#5C7A74;
  --danger:#8A3520;
  --danger-soft:#FFF3F1;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:Pretendard,'Noto Sans KR','Apple SD Gothic Neo',sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:860px;margin:0 auto;padding:0 16px}
a{color:inherit}
button{font:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* ── 윗줄 ─────────────────────────── */
.topbar{background:var(--ink);color:var(--white);font-size:15px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.topbar a{text-decoration:none;font-weight:700}
.topbar .who{display:flex;align-items:center;gap:10px;color:#C9E3DD}
.topbar .who button{background:none;border:1px solid #4E6F68;color:#C9E3DD;border-radius:8px;padding:3px 10px;font-size:14px}

/* ── 머리말 ───────────────────────── */
.hero{background:var(--pine);color:var(--white);padding:26px 0 30px}
.hero h1{font-size:27px;font-weight:800;letter-spacing:-.5px;line-height:1.35}
.hero .meta{margin-top:8px;font-size:14px;color:#C9E3DD}
.hero .lead{margin-top:10px;font-size:16px;color:#E3F1EE;line-height:1.55}
.tag{display:inline-block;font-size:13px;font-weight:700;border-radius:6px;padding:2px 8px;background:rgba(255,255,255,.16);color:var(--white);margin-bottom:8px}

/* ── 공통 부품 ────────────────────── */
.btn{
  font-weight:700;font-size:17px;
  background:var(--ink);color:var(--white);
  border:none;border-radius:10px;padding:12px 20px;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{background:#9DB0AB;cursor:not-allowed;transform:none}
.btn.ghost{background:var(--white);color:var(--ink);border:2px solid var(--line)}
.btn.violet{background:var(--violet)}
.btn.small{font-size:15px;padding:7px 13px;border-radius:8px}

.panel{
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
}
.field{
  font:inherit;font-size:17px;color:var(--ink);
  width:100%;
  border:2px solid var(--line);border-radius:10px;
  padding:10px 12px;background:var(--paper);
}
.field:focus{outline:none;border-color:var(--pine);background:var(--white)}
.field::placeholder{color:#8AA29C}
textarea.field{resize:vertical;min-height:96px;line-height:1.55}

.notice{border-radius:var(--radius);padding:14px 16px;font-size:16px}
.notice.err{background:var(--danger-soft);border:1.5px solid #E8B4AC;color:var(--danger)}
.notice.info{background:var(--pine-soft);color:var(--pine)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:480px){
  .hero h1{font-size:23px}
}