/* 수학여정 공유 껍데기 — 디자인 토큰 + 사이드바 + 헤더 (모든 페이지 공용) */
:root{
  --page:#FAFBFC; --side:#F6F7F9; --card:#FFFFFF;
  --border:#E3E7EB; --border-soft:#EEF1F4; --border-strong:#C7CDD6;
  --text:#14202E; --text-2:#55606B; --muted:#8A94A6; --faint:#B7BFC9;
  --accent:#185FA5; --accent-hover:#0C447C; --accent-tint:#E6F1FB; --accent-row:#F1F3F5;
  --shadow-rgb:20,32,46;
  --sidew:250px;
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{background:var(--page); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;}
button{font-family:inherit; cursor:pointer;}

/* 사이드바 */
.sidebar{position:fixed; top:0; left:0; bottom:0; width:var(--sidew); background:var(--side);
  border-right:0.5px solid var(--border); transform:translateX(-100%); transition:transform .24s ease;
  z-index:40; padding:18px 16px; overflow-y:auto; display:flex; flex-direction:column;}
.side-logout{margin-top:auto; display:flex; align-items:center; gap:10px; padding:10px; border-radius:8px; font-size:14px; color:var(--muted); text-decoration:none; cursor:pointer;}
.side-logout:hover{background:var(--border-soft);}
.side-logout svg{width:18px; height:18px; flex-shrink:0;}
.sidebar.open{transform:translateX(0);}
.backdrop{position:fixed; inset:0; background:rgba(var(--shadow-rgb),0.28); opacity:0; visibility:hidden;
  transition:opacity .24s ease; z-index:30;}
.backdrop.show{opacity:1; visibility:visible;}
.main{transition:margin-left .24s ease;}
@media (min-width:768px){ .main.pushed{margin-left:var(--sidew);} .backdrop{display:none;} }

.brand{display:flex; align-items:center; gap:8px; margin-bottom:22px; cursor:pointer;}
.side-wordmark{position:relative; width:100%; height:92px; border-radius:12px; overflow:hidden; margin:2px 0 2px;}
.swm-bg{position:absolute; inset:0; background:linear-gradient(150deg,#0F2E52 0%,#123A63 52%,#185FA5 100%);}
.swm-glow{position:absolute; inset:0; background:radial-gradient(ellipse 60% 55% at 78% 18%, rgba(120,175,235,0.28), rgba(120,175,235,0) 60%);}
.swm-arc{position:absolute; inset:0; width:100%; height:100%;}
.swm-txt{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#fff;}
.swm-ko{font-family:'Noto Sans KR',sans-serif; font-size:26px; font-weight:800; letter-spacing:0.04em; padding-left:0.04em; line-height:1;}
.swm-en{font-family:'Poppins','Segoe UI',sans-serif; font-size:9.5px; font-weight:500; letter-spacing:0.36em; padding-left:0.36em; opacity:0.86;}
.brand-logo-wrap{justify-content:center;}
.brand .spark{color:var(--accent); font-size:19px; display:inline-flex;}
.spark-ic{width:18px; height:18px;}
.brand .name{font-size:15px; font-weight:600;}
.nav{display:flex; flex-direction:column; gap:2px;}
.nav a{display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:8px;
  font-size:14px; color:var(--text-2); text-decoration:none; cursor:pointer;}
.nav a i{font-size:18px; width:20px; text-align:center;}
.nav-ic{width:18px; height:18px; flex-shrink:0;}
.nav a.active .nav-ic{color:var(--accent);}
.nav a:hover{background:var(--border-soft);}
.nav a.active{background:var(--accent-row);}
.nav a.active i{color:var(--accent);}
.nav .div{height:1px; background:var(--border); margin:8px 6px;}

/* 헤더 */
.header{display:flex; align-items:center; justify-content:space-between; padding:14px 20px;
  border-bottom:0.5px solid var(--border-soft); position:sticky; top:0; background:var(--page); z-index:20;}
.header-left{display:flex; align-items:center; gap:12px;}
.icon-btn{display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border:0.5px solid var(--border-strong); background:var(--card); color:var(--text-2);
  border-radius:9px; font-size:18px;}
.icon-btn:hover{background:var(--border-soft);}
.menu-ic{width:20px; height:20px; display:block;}
.brand-top{display:flex; align-items:center; gap:7px; cursor:pointer;}
.brand-top .spark{color:var(--accent); font-size:17px;}
.brand-top .name{font-size:15px; font-weight:700; letter-spacing:0.02em;}
.brand-top .name-en{font-family:'Poppins','Segoe UI',sans-serif; font-size:10px; font-weight:500; letter-spacing:0.1em; padding-left:0.1em; color:var(--muted); position:relative; top:3px;}
.login-btn{border:0.5px solid var(--border-strong); background:var(--card); color:var(--text-2);
  border-radius:9px; padding:8px 10px; font-size:13.5px; font-weight:500; display:inline-flex; align-items:center; justify-content:center;}
.login-btn:hover{background:var(--border-soft);}
.login-ic{width:20px; height:20px; display:block;}
.login-btn.logged-in{background:var(--accent-tint); border-color:var(--accent); color:var(--accent);}

/* 공용 보기전환 토글 (도서관·강의실·마이페이지 공용) */
.view-toggle{display:flex; border:0.5px solid var(--border-strong); border-radius:9px; overflow:hidden;}
.view-toggle button{border:none; padding:7px 10px; cursor:pointer; background:var(--card); color:var(--muted);}
.view-toggle button.on{background:var(--accent-row); color:var(--accent);}