:root{
  --bg1:#fef6ff; --bg2:#eef7ff; --bg3:#fff9e8; --card:#ffffffee; --text:#24324a; --muted:#5c6b82;
  --line:#dde6f2; --primary:#6d5efc; --primary-dark:#5243dd; --secondary:#ff7ab8; --mint:#4ecdc4;
  --sky:#66bfff; --sun:#ffb703; --grass:#67c66d; --orange:#ff8a4c; --shadow:0 14px 30px rgba(78,90,120,.14);
  --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 16%, rgba(255,214,102,.40), transparent 16%),
    radial-gradient(circle at 88% 10%, rgba(128,196,255,.38), transparent 18%),
    radial-gradient(circle at 84% 82%, rgba(255,122,184,.25), transparent 18%),
    radial-gradient(circle at 20% 78%, rgba(78,205,196,.22), transparent 18%),
    linear-gradient(145deg,var(--bg1),var(--bg2) 48%,var(--bg3));
}
a{text-decoration:none;color:inherit}
.container{max-width:1180px;margin:0 auto;padding:24px 18px 86px;position:relative}
.container:before,.container:after{content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(10px);opacity:.22}
.container:before{width:180px;height:180px;left:-40px;top:120px;background:#ff8abf}
.container:after{width:220px;height:220px;right:-70px;bottom:60px;background:#7cc7ff}
.hero{
  position:relative; overflow:hidden;
  padding:30px 28px; border-radius:32px; background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.76));
  box-shadow:var(--shadow); backdrop-filter: blur(12px); border:1px solid rgba(255,255,255,.9); margin-bottom:20px;
}
.hero:before{content:"⭐ 📚 ✏️ 🎈"; position:absolute; right:18px; top:14px; font-size:24px; opacity:.8; letter-spacing:4px}
.hero:after{content:""; position:absolute; width:220px; height:220px; right:-70px; bottom:-90px; border-radius:50%; background:linear-gradient(135deg,rgba(255,183,3,.22),rgba(109,94,252,.12));}
.hero h1{margin:0 0 8px;font-size:34px;letter-spacing:-.04em;line-height:1.18}
.hero p{margin:6px 0;color:var(--muted);line-height:1.68;font-size:15.5px;max-width:880px}
.hero .lead{font-weight:800;color:#4f46e5}
.hero .chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid #ebf0f8;font-weight:800;font-size:13px;box-shadow:0 6px 16px rgba(86,95,120,.08)}
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); position:relative;
}
.card:before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(124,199,255,.20),rgba(255,122,184,.20)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none}
.card h2,.card h3{margin-top:0;letter-spacing:-.03em}
.card h2{font-size:22px}
.menu-card{transition:.18s;cursor:pointer;padding-top:24px}
.menu-card:hover{transform:translateY(-4px) rotate(-.2deg);box-shadow:0 18px 34px rgba(97,105,139,.16)}
.menu-card .icon{font-size:30px;display:inline-block;margin-bottom:8px}
.menu-card:nth-child(1){background:linear-gradient(180deg,rgba(255,242,208,.82),rgba(255,255,255,.94) 34%)}
.menu-card:nth-child(2){background:linear-gradient(180deg,rgba(225,243,255,.9),rgba(255,255,255,.95) 34%)}
.menu-card:nth-child(3){background:linear-gradient(180deg,rgba(244,233,255,.88),rgba(255,255,255,.95) 34%)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:11px 16px;background:linear-gradient(135deg,var(--primary),#8b7cff);color:#fff;font-weight:800;cursor:pointer;line-height:1.2;box-shadow:0 10px 18px rgba(109,94,252,.22);transition:.15s}
.btn:hover{transform:translateY(-1px);filter:saturate(1.05)}
.btn.secondary{background:linear-gradient(135deg,#ffffff,#eef3ff);color:#344054;box-shadow:0 8px 18px rgba(100,116,139,.1);border:1px solid #e4eaf5}
.btn.secondary:hover{background:linear-gradient(135deg,#ffffff,#e8f0ff)}
.btn.danger{background:linear-gradient(135deg,#ff5d7d,#e11d48)}
.btn.warn{background:linear-gradient(135deg,#ffb347,#ff8a00)}
.btn.ok{background:linear-gradient(135deg,#41d6a4,#16a34a)}
.btn.small{padding:8px 11px;border-radius:12px;font-size:13px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
label{display:block;font-weight:800;margin:10px 0 6px;color:#3d4760}
input,select,textarea{width:100%;border:1px solid #d4ddeb;border-radius:14px;padding:12px 13px;background:#fff;font:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
input:focus,select:focus,textarea:focus{outline:none;border-color:#94b6ff;box-shadow:0 0 0 4px rgba(148,182,255,.20)}
textarea{min-height:110px;resize:vertical;line-height:1.6}
table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:16px;overflow:hidden;border:1px solid #e7edf7}
th,td{border-bottom:1px solid #edf2f8;padding:11px 10px;text-align:left;vertical-align:top}
th{background:linear-gradient(180deg,#f8fbff,#eef5ff);font-size:14px;color:#44506a}
tr:nth-child(even) td{background:rgba(252,253,255,.82)}
tr:hover td{background:#fffef5}
.badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 10px;font-weight:900;font-size:12px;letter-spacing:-.02em}
.badge.missing{background:#edf2f7;color:#4a5568}
.badge.draft{background:#fff4db;color:#b45309}
.badge.submitted{background:#e8f1ff;color:#1d4ed8}
.badge.reviewed{background:#eafbf1;color:#047857}
.badge.revision,.badge.edit_requested{background:#ffe8ef;color:#be123c}
.badge.editing{background:#fff6c2;color:#854d0e}
.notice{padding:13px 15px;border-radius:16px;background:linear-gradient(135deg,#eef5ff,#f8fbff);color:#254185;line-height:1.62;margin:10px 0;border:1px solid #dfe9ff}
.notice.warn{background:linear-gradient(135deg,#fff4e5,#fffaf2);color:#9a3412;border-color:#ffe3bc}
.notice.ok{background:linear-gradient(135deg,#eafbf1,#f4fff8);color:#065f46;border-color:#cceedd}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;padding:12px 14px;border-radius:20px;background:rgba(255,255,255,.76);box-shadow:var(--shadow);backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:12px}
.brand-badge{width:44px;height:44px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#6d5efc,#ff7ab8);color:#fff;font-size:22px;box-shadow:0 10px 18px rgba(109,94,252,.24)}
.brand-title{font-weight:900;letter-spacing:-.03em}
.brand-sub{font-size:12px;color:var(--muted)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tab{border:1px solid #e2e8f5;background:#fff;border-radius:999px;padding:10px 14px;cursor:pointer;font-weight:900;color:#465067;box-shadow:0 6px 14px rgba(109,114,139,.06)}
.tab.active{background:linear-gradient(135deg,var(--secondary),var(--primary));color:#fff;border-color:transparent}
.hidden{display:none!important}
.kpi{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.kpi .card{padding:16px}
.kpi .card:nth-child(1){background:linear-gradient(180deg,#fff5d8,#fff)}
.kpi .card:nth-child(2){background:linear-gradient(180deg,#eaf2ff,#fff)}
.kpi .card:nth-child(3){background:linear-gradient(180deg,#eafff2,#fff)}
.kpi .card:nth-child(4){background:linear-gradient(180deg,#fff4e8,#fff)}
.kpi .card:nth-child(5){background:linear-gradient(180deg,#ffeaf2,#fff)}
.kpi b{display:block;font-size:28px;margin-top:6px;color:#2c3a55}
.muted{color:var(--muted)}
.footer{margin-top:20px;color:var(--muted);font-size:13px;line-height:1.7}
hr.soft{border:0;border-top:1px dashed #d9e3f2;margin:16px 0}
@media(max-width:900px){.grid-3,.grid-2,.kpi{grid-template-columns:1fr}.hero h1{font-size:26px}.container{padding:18px 12px 60px}.topbar{flex-direction:column;align-items:flex-start}}
.print-only{display:none}
@media print{
  body{background:#fff}
  .no-print,.topbar,.actions,.tabs{display:none!important}
  .container{max-width:100%;padding:0}
  .card,.hero{box-shadow:none;border:0;background:#fff}
  .print-only{display:block}
}