*{box-sizing:border-box}
html,body{min-height:100%;background:#f4f6f9}
body{margin:0;font-family:Arial,"Noto Sans KR",sans-serif;color:#172233}
a{text-decoration:none;color:#0b57d0}
button,input,select,textarea{font:inherit}

/* PC 기본 레이아웃 */
.app{display:flex;min-height:100vh;width:100%}
.sidebar{position:sticky;top:0;flex:0 0 220px;width:220px;height:100vh;background:#0b1725;padding:25px 15px;z-index:40;overflow-y:auto}
.sidebar-top{display:flex;align-items:center;justify-content:space-between}
.sidebar a{display:block;color:#dce5ef;padding:12px;border-radius:8px}
.sidebar a:hover{background:#152a40}
.brand{color:#fff;font-size:30px;font-weight:900;margin:0 10px 35px}
.nav-title{color:#8193a9;font-size:12px;padding:25px 12px 8px}
.sidebar-close,.menu-toggle,.sidebar-backdrop{display:none}
main{flex:1 1 auto;min-width:0;width:calc(100% - 220px)}
header{height:64px;background:#fff;display:flex;justify-content:flex-end;align-items:center;gap:15px;padding:0 25px;border-bottom:1px solid #dfe5ec;position:sticky;top:0;z-index:20}
.header-user{display:flex;align-items:center;gap:15px;min-width:0}
.header-user form{margin:0}.header-user button{border:0;background:none;color:#0b57d0;cursor:pointer}
.content{width:100%;padding:28px;max-width:1700px;margin:0 auto}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:18px}
.page-head h1{margin-bottom:5px}.page-head p,.page-description{margin-top:0;color:#687789}
.btn{padding:10px 15px;border:1px solid #d5dde6;background:#fff;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;cursor:pointer}
.primary{background:#0b57d0;color:#fff;border-color:#0b57d0}
.card,.stat{background:#fff;border:1px solid #dfe5ec;border-radius:12px;padding:20px;margin:20px 0}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.stat strong{font-size:30px}.stat p{border-top:1px solid #edf1f5;padding-top:8px}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:11px;border-bottom:1px solid #dfe5ec;white-space:nowrap}.table-wrap,.card{overflow:auto}
input,select,textarea{width:100%;padding:10px;border:1px solid #ccd5df;border-radius:7px;background:#fff}form p{max-width:800px}.actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.login-page{min-height:100vh;display:grid;place-items:center;background:#fff;padding:20px}.login-card{width:min(360px,100%)}.logo{text-align:center;font-size:42px;font-weight:900;letter-spacing:3px;margin-bottom:35px}
.calendar-nav{display:flex;justify-content:center;gap:18px;align-items:center;margin:12px 0 18px}.calendar-nav h2{min-width:170px;text-align:center}.notice{margin:0 0 14px;padding:12px 14px;background:#fff8df;border:1px solid #f3d777;border-radius:10px;color:#6d5511}.calendar-scroll{overflow-x:auto;padding-bottom:6px}.calendar{min-width:980px;background:#fff;border:1px solid #dfe5ec;border-radius:12px;overflow:hidden}.calendar-weekday-head,.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.calendar-weekday-head{background:#0b1725;color:#fff;font-weight:700}.calendar-weekday-head span{text-align:center;padding:10px;border-right:1px solid #26384d}.calendar-weekday-head .saturday{color:#8ec5ff}.calendar-weekday-head .sunday{color:#ff9b9b}.week{border-bottom:1px solid #dfe5ec}.week:last-child{border-bottom:0}.days{background:#f7f9fc}.calendar-day{min-height:64px;padding:8px 9px;border-right:1px solid #dfe5ec;overflow:hidden}.calendar-day:last-child{border-right:0}.day-label{display:flex;justify-content:space-between;align-items:center;gap:4px}.calendar-day.other{color:#aab4c0;background:#fafbfc}.calendar-day.saturday b{color:#1769aa}.calendar-day.sunday b,.calendar-day.holiday b{color:#c62828}.calendar-day.today{box-shadow:inset 0 0 0 2px #0b57d0;background:#eef5ff}.today-badge{font-size:10px;background:#0b57d0;color:#fff;padding:2px 5px;border-radius:999px}.holiday-name{display:block;margin-top:5px;color:#c62828;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.week-grid{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(var(--rows),42px);row-gap:5px;padding:8px 10px;min-height:82px;background:repeating-linear-gradient(to right,transparent 0,transparent calc(14.285714% - 1px),#edf0f4 calc(14.285714% - 1px),#edf0f4 14.285714%)}.event{height:32px;align-self:center;padding:7px 10px;color:#16345e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:0;font-size:12px;box-shadow:0 1px 2px rgba(0,0,0,.08);z-index:2}.event.starts{border-radius:7px 0 0 7px}.event.ends{border-radius:0 7px 7px 0}.event.starts.ends{border-radius:7px}.empty-week{grid-column:1/-1;color:#a0aab5;font-size:12px;align-self:center;text-align:center}

/* 모바일 전용: PC 규칙을 건드리지 않고 900px 이하에서만 적용 */
@media (max-width:900px){
 body.menu-open{overflow:hidden}
 .app{display:block}
 .sidebar{position:fixed;left:0;top:0;width:min(82vw,290px);height:100vh;transform:translateX(-105%);transition:transform .22s ease;box-shadow:8px 0 30px rgba(0,0,0,.25)}
 .menu-open .sidebar{transform:translateX(0)}
 .sidebar-close{display:block;border:0;background:transparent;color:#fff;font-size:30px;line-height:1;cursor:pointer}
 .sidebar-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:35}
 .menu-open .sidebar-backdrop{display:block}
 main{width:100%;min-width:0}
 .menu-toggle{display:block;border:0;background:transparent;font-size:25px;color:#172233;padding:6px 8px;cursor:pointer}
 header{justify-content:space-between;padding:0 14px}
 .header-user{font-size:13px}
 .content{padding:15px}
 .stats{grid-template-columns:1fr}
 .page-head{align-items:flex-start}
 .calendar-nav{gap:10px}.calendar-nav h2{font-size:20px;min-width:150px}
}
@media (max-width:600px){
 .page-head{flex-direction:column}.page-head .btn{width:100%}
 .header-user span{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .card,.stat{padding:15px}.content{padding:12px}.calendar{min-width:840px}
 th,td{padding:9px;font-size:13px}.actions{justify-content:stretch}.actions .btn,.actions button{flex:1}.login-card{width:100%}
}