:root{
  --stage:#0f1b33; --stage-2:#16264a; --panel:#17233f; --panel-2:#1d2d4f;
  --line:#31446b; --gold:#d3ae3e; --gold-2:#f2cb5a;
  --ink:#eef3fb; --mist:#b4c2dc; --dim:#8294b4; --red:#ff8c78; --green:#4fd6bf;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Noto Sans KR",system-ui,-apple-system,sans-serif;background:var(--stage);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.65;padding-bottom:env(safe-area-inset-bottom)}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;z-index:50;background:var(--gold);color:#14100a;padding:8px 14px;border-radius:8px}
a{color:var(--gold-2)}
button{font-family:inherit}

.top{position:sticky;top:0;z-index:20;background:rgba(15,27,51,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-in{max-width:820px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-size:19px;font-weight:900;color:var(--ink);text-decoration:none}
.brand b{color:var(--gold-2)}
.pill{font-size:12px;font-weight:700;color:#0c1830;background:linear-gradient(135deg,var(--gold-2),var(--gold));border-radius:999px;padding:5px 11px;white-space:nowrap}

main{max-width:820px;margin:0 auto;padding:22px 16px 40px}
.intro h1{font-family:"Noto Serif KR","Noto Sans KR",serif;font-weight:900;font-size:clamp(23px,3.4vw,33px);line-height:1.3;margin:4px 0 10px}
.intro h1 span{color:var(--gold-2)}
.lede{color:var(--mist);font-size:15px;line-height:1.75;max-width:52em;word-break:keep-all}
.lede b{color:var(--ink)}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-top:18px}
.form{display:grid;gap:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.f{display:grid;gap:6px;min-width:0}
.f>span{font-size:13.5px;font-weight:700;color:var(--mist)}
.f>span i{color:var(--gold-2);font-style:normal}
.f>span small{font-weight:400;color:var(--dim);font-size:12px}
input,textarea,select{width:100%;background:var(--stage-2);border:1px solid var(--line);border-radius:10px;color:var(--ink);font-size:15px;font-family:inherit;padding:11px 13px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold)}
input::placeholder,textarea::placeholder{color:var(--dim)}
textarea{resize:vertical;line-height:1.7}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238294b4' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px}

.actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:2px}
.ad-hint{font-size:12.5px;color:var(--gold-2)}
.btn{appearance:none;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font-size:14px;font-weight:600;padding:11px 16px;border-radius:10px;cursor:pointer;transition:.12s;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--gold);color:var(--gold-2)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#14100a;border-color:transparent}
.btn.primary:hover{color:#14100a;filter:brightness(1.05)}
.btn.primary:disabled{opacity:.6;cursor:default;filter:none}
.btn.ghost{background:transparent}
.btn.small{font-size:12.5px;padding:7px 12px}

.result-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.engine{font-size:12px;color:var(--green);font-weight:700}
.result-actions{display:flex;gap:8px}
.result-body{font-size:15px;line-height:1.85}
.result-body h2{font-size:16px;color:var(--gold-2);margin:1.1em 0 .4em;border-top:1px solid var(--line);padding-top:.8em}
.result-body h2:first-child{border-top:0;padding-top:0;margin-top:0}
.result-body ul,.result-body ol{margin:.3em 0;padding-left:1.35em}
.result-body li{margin:.25em 0}
.result-body p{margin:.4em 0}
.result-body strong{color:#fff}

.gate{margin-bottom:14px;border-radius:10px;padding:12px 15px;font-size:13.5px;line-height:1.7}
.gate.warn{background:rgba(214,72,60,.12);border:1px solid rgba(255,140,120,.5)}
.gate.ok{background:rgba(79,214,191,.1);border:1px solid rgba(79,214,191,.4);color:#bdeee6}
.gate b{display:block;margin-bottom:4px}
.gate .hit{color:#ffd9d1;font-weight:700}

.obj{margin-top:20px;border-top:1px dashed var(--line);padding-top:16px}
.obj-row{display:flex;gap:8px}
.obj-row input{flex:1}
.obj-result{margin-top:12px;background:var(--stage-2);border:1px solid var(--line);border-radius:10px;padding:12px 15px;font-size:14.5px;line-height:1.8}
.obj-result h2{font-size:14.5px;color:var(--gold-2);margin:.8em 0 .3em}
.obj-result h2:first-child{margin-top:0}

.notice{margin-top:22px;background:rgba(211,174,62,.08);border:1px solid rgba(211,174,62,.35);border-left:4px solid var(--gold);border-radius:10px;padding:16px 18px}
.notice b{color:var(--gold-2);font-family:"Noto Serif KR",serif;font-size:16px;display:block;margin-bottom:6px}
.notice span{font-size:13.5px;line-height:1.75;color:var(--mist);word-break:keep-all}
.notice span b{display:inline;color:var(--ink);font-family:inherit;font-size:inherit}

.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#09152b;border:1px solid var(--line);color:var(--ink);padding:11px 18px;border-radius:999px;font-size:13.5px;z-index:40;box-shadow:0 8px 28px rgba(0,0,0,.4);max-width:90vw;text-align:center}
.toast.err{border-color:var(--red);color:#ffd9d1}

.foot{max-width:820px;margin:0 auto;padding:22px 16px 40px;border-top:1px solid var(--line);color:var(--dim);font-size:12.5px;line-height:1.7}
.foot p{margin:4px 0}

@media (max-width:620px){
  .grid2,.grid3{grid-template-columns:1fr}
  .pill{font-size:11px;padding:4px 9px}
  .actions .btn.primary{width:100%;justify-content:center}
}