:root{color-scheme:light;--ink:#17201c;--muted:#5f6f67;--paper:#f5f2ea;--panel:#fffdf8;--line:#d9d2c4;--red:#b3392f;--amber:#a26500;--green:#297852;--accent:#1f5f47;font-family:Inter,ui-sans-serif,system-ui,sans-serif}
*{box-sizing:border-box}
/* ⚠️ [hidden]는 UA 스타일이라 .row{display:flex} 같은 클래스에 진다 — 실측으로 "구독 없는데
   Cancel subscription이 보이는" 상태가 라이브에 나갔다. 여기서 못 박는다. */
[hidden]{display:none !important}
/* CSP가 style-src 'self' 라 **인라인 style 속성이 적용되지 않는다**(브라우저가 조용히 무시하고
   콘솔에만 남긴다). 간격/굵기는 전부 클래스로 준다 — 인라인 style을 다시 쓰지 말 것. */
.mt-s{margin-top:10px}.mt-m{margin-top:14px}.mt-l{margin-top:40px}
.mb-s{margin-bottom:12px}
.tight{margin:-4px 0 12px}
.strong{font-weight:600}
.check{width:auto;margin:0 8px 0 0}
.checks{display:grid;gap:10px;margin:16px 0}
body{margin:0;background:radial-gradient(circle at 82% 0,#dde8dd 0,transparent 38%),var(--paper);color:var(--ink)}
main{width:min(940px,calc(100% - 32px));margin:0 auto;padding:64px 0}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;font-weight:750;color:var(--accent);margin:0}
h1{font-family:Georgia,serif;font-size:clamp(2.1rem,5vw,3.4rem);line-height:1;max-width:780px;margin:.24em 0}
h2{font-size:1.1rem;margin:34px 0 10px}
h3{font-size:.95rem;margin:0 0 6px}
.lede{font-size:1.05rem;line-height:1.6;max-width:680px;color:var(--muted)}
p{line-height:1.6}
ol,ul{line-height:1.7;color:var(--muted);max-width:720px}
code{background:#00000010;padding:1px 5px;border-radius:4px;font-size:.9em}
a{color:inherit;overflow-wrap:anywhere}
fieldset{border:0;padding:0;margin:0 0 18px}
legend{font-weight:750;font-size:.9rem;padding:0 0 8px}
form.card,section.card{margin:22px 0;padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 34px #4e5f5514}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid.thirds{grid-template-columns:1fr 1fr 1fr}
label{display:block;font-size:.82rem;font-weight:700}
input,select,textarea{display:block;width:100%;margin-top:7px;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:white;font:inherit;color:inherit}
textarea{min-height:84px;resize:vertical}
/* ⚠️ :invalid를 쓰면 **처음 열자마자** 빈 필수 칸이 전부 빨개진다 — 아무것도 안 한 사람에게
   "당신이 틀렸다"고 말하는 화면이 된다(실측). :user-invalid는 사용자가 건드린 뒤에만 걸린다. */
input:user-invalid,select:user-invalid{border-color:var(--red)}
.field{min-width:0}
.field .hint{margin:6px 0 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
button{padding:12px 16px;border:0;border-radius:9px;background:var(--ink);color:white;font-weight:750;cursor:pointer;font-size:.9rem}
button:disabled{opacity:.5;cursor:default}
button.secondary{background:transparent;color:var(--ink);border:1px solid var(--line)}
button.danger{background:var(--red);color:white}
button.small{padding:8px 11px;font-size:.82rem}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.muted,.hint{font-size:.84rem;color:var(--muted)}
.notice,.error,.ok{margin:16px 0;padding:14px 16px;border-radius:11px;font-size:.92rem}
.notice{background:#fff2d6;color:#6c4600;border:1px solid #e5bf70}
.error{background:#ffe3df;color:#7d261f;border:1px solid #dda39d}
.ok{background:#dff0e5;color:#1d5238;border:1px solid #9ec9b1}
.summary{display:flex;gap:18px;flex-wrap:wrap;padding:16px 18px;border-radius:12px;background:var(--panel);border:1px solid var(--line);margin:18px 0}
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:750;text-transform:uppercase;letter-spacing:.06em}
.badge.pending{background:#fff2d6;color:#6c4600}
.badge.approved{background:#dff0e5;color:#1d5238}
.badge.rejected{background:#efe9e2;color:#6b6259}
.badge.sample{background:#e4ecf6;color:#264a72}
.app{border:1px solid var(--line);border-radius:13px;background:var(--panel);padding:18px;margin-bottom:12px}
.app header{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.app dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:12px 0 0;font-size:.88rem}
.app dt{color:var(--muted)}
.app dd{margin:0}
.tier{display:grid;grid-template-columns:1fr 130px auto;gap:10px;align-items:end;margin-bottom:10px}
.linkbox{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.linkbox input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem}
@media(max-width:720px){main{padding:40px 0}.grid,.grid.thirds,.tier{grid-template-columns:1fr}button{width:100%}}