@font-face{font-family:Pretendard;src:url('/petdex/ui/fonts/Pretendard.woff2') format('woff2');font-display:swap}
:root{font-family:Pretendard,'Malgun Gothic',sans-serif;color:#293026;background:#f0eee5;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 75% 5%,#d9e6cb,transparent 35%),#f0eee5}
a{color:#41643a}
button,input{font:inherit}
button{cursor:pointer}
.shell{width:min(100% - 32px,1040px);margin:auto}
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid #d4d5ca}
.brand{text-decoration:none;color:#273e2c;font-size:20px;font-weight:900;letter-spacing:-.03em}
.top nav{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.top nav a{text-decoration:none;font-size:14px;font-weight:700}
.top nav a:hover{text-decoration:underline}
.hero{padding:68px 0 38px;max-width:730px}
.eyebrow{margin:0 0 12px;color:#6f7e4c;font-weight:900;letter-spacing:.16em;font-size:12px;text-transform:uppercase}
h1{margin:0;font-size:clamp(34px,6vw,58px);line-height:1.12;letter-spacing:-.05em;color:#263e30}
.intro{font-size:17px;line-height:1.7;color:#586158;max-width:610px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:10px 0 50px}
.card,.panel{border:1px solid #d1d4c6;background:#fbfaf5;border-radius:18px;box-shadow:0 9px 30px #34473010}
.card{display:block;padding:25px;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 13px 30px #34473021}
.card .icon{font-size:28px}
.card h2{font-size:22px;margin:18px 0 8px;color:#263e30}
.card p{line-height:1.55;margin:0;color:#59635a;font-size:14px}
.auth-wrap{display:grid;place-items:center;padding:60px 0}
.panel{width:min(100%,470px);padding:32px}
.panel h1{font-size:32px}
.panel p{line-height:1.55;color:#59635a}
.field{display:grid;gap:7px;margin:17px 0}
.field label{font-weight:700;font-size:14px}
.field input{width:100%;border:1px solid #b9c5b0;border-radius:10px;background:#fff;padding:13px 14px;outline:none}
.field input:focus{border-color:#56844d;box-shadow:0 0 0 3px #5c8e4c2b}
.hint{font-size:12px;color:#6a7269;margin-top:3px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:45px;padding:10px 18px;border:0;border-radius:10px;background:#416f3a;color:#fff;text-decoration:none;font-weight:800}
.button:hover{background:#30572b}
.button.secondary{background:#e7ecdf;color:#30572b}
.button.secondary:hover{background:#dae4d0}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.message{min-height:24px;margin:16px 0 0;font-size:14px;font-weight:700;white-space:pre-wrap}
.message.error{color:#a33027}
.message.success{color:#2d6734}
.code-box{padding:16px;border:1px solid #b9c5b0;border-radius:10px;background:#f2f6ed;margin:16px 0;overflow-wrap:anywhere}
.code-box strong{display:block;margin-bottom:6px;color:#30572b}
.code-box code{font-size:18px;letter-spacing:.06em;user-select:all}
.hidden{display:none!important}
footer{border-top:1px solid #d4d5ca;padding:18px 0 30px;font-size:12px;color:#6a7269}
@media(max-width:700px){.top{align-items:flex-start;flex-direction:column}.cards{grid-template-columns:1fr}.hero{padding:44px 0 22px}.auth-wrap{padding:35px 0}.panel{padding:24px}}