/* 수학여정 공유 껍데기 — 디자인 토큰 + 사이드바 + 헤더 (모든 페이지 공용) */
:root{
  --page:#FCFAF5; --side:#FBF7F0; --card:#ffffff;
  --border:#EFE9DD; --border-soft:#F2ECE0; --border-strong:#E3DBCB;
  --text:#2E2820; --text-2:#4A4335; --muted:#8A8069; --faint:#B5AB96;
  --accent:#DD7350; --accent-hover:#cf6844; --accent-tint:#FDF4EF; --accent-row:#F1E9D9;
  --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(40,35,26,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-logo{width:96px; height:96px; margin:4px auto 0; border-radius:12px; overflow:hidden; display:block;}
.side-logo img{width:150%; height:150%; object-fit:contain; transform:translate(-17%,-17%);}
.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:600;}
.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);}