/* 레이아웃 셸 — 데모 띠·헤더·푸터·하단 탭바·강사 스튜디오
   그누보드: theme/classpick/head.php · tail.php · lms/studio/_head.php */

/* ── 데모 띠 ─────────────────────────── */
.demo-bar{height:var(--demo-h);background:var(--ink-900);color:rgba(255,255,255,.78);font-size:12.5px;font-weight:500;position:relative;z-index:45}
.demo-bar .container{height:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}
.demo-bar .db-msg{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-bar .db-msg b{color:#fff;font-weight:700}
.demo-bar .db-msg .sep{opacity:.35}
.demo-bar .db-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(197,245,48,.18);flex:none}
.demo-bar .db-role{position:relative;flex:none}
.demo-bar .db-role > button{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px 0 10px;border-radius:6px;background:rgba(255,255,255,.1);color:#fff;font-size:12.5px;font-weight:600}
.demo-bar .db-role > button:hover{background:rgba(255,255,255,.16)}
.demo-bar .db-role > button svg{width:14px;height:14px}
.demo-bar .db-role > button .role-now{color:var(--lime)}
.role-menu{position:absolute;right:0;top:calc(100% + 6px);width:248px;background:var(--bg);color:var(--text);border-radius:var(--r-lg);box-shadow:var(--sh-3);border:1px solid var(--border);padding:6px;display:none;z-index:60}
.role-menu.is-open{display:block}
.role-menu .rm-head{padding:8px 10px 6px;font-size:12px;font-weight:600;color:var(--text-3)}
.role-menu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-md);font-size:14px;font-weight:600}
.role-menu a:hover{background:var(--ink-100)}
.role-menu a .rm-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--ink-100);flex:none}
.role-menu a .rm-ic svg{width:16px;height:16px}
.role-menu a small{display:block;font-size:12px;font-weight:500;color:var(--text-3)}
.role-menu a.is-current .rm-ic{background:var(--lime);color:var(--ink-900)}
.role-menu a .rm-check{margin-left:auto;color:var(--lime-ink)}

/* ── 로고 ─────────────────────────────── */
.logo{display:inline-flex;align-items:center;gap:8px;font-size:20px;font-weight:800;letter-spacing:-.045em;color:var(--ink-900);white-space:nowrap;flex:none}
.logo .mk{width:28px;height:28px;border-radius:8px;background:var(--lime);display:grid;place-items:center;flex:none}
.logo .mk svg{width:11px;height:12px;margin-left:2px;fill:var(--ink-900)}
.logo .logo-sub{font-size:11px;font-weight:800;letter-spacing:.08em;padding:2px 6px;border-radius:4px;background:var(--ink-900);color:var(--lime);margin-left:2px}
.logo-light{color:#fff}

/* ── 헤더 ─────────────────────────────── */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--border)}
.site-header .hd-in{display:flex;align-items:center;gap:28px;height:var(--header-h)}
.gnb{display:flex;align-items:center;gap:2px;height:100%}
.gnb > a,.gnb > .gnb-cat > button{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 12px;border-radius:var(--r-md);font-size:15px;font-weight:600;color:var(--text-2)}
.gnb > a:hover,.gnb > .gnb-cat > button:hover,.gnb .is-active{color:var(--text);background:var(--ink-100)}
.gnb > a.is-active{background:transparent;box-shadow:inset 0 -2px 0 var(--ink-900);border-radius:0;height:var(--header-h)}
.gnb .gnb-cat{position:relative}
.gnb .gnb-cat > button svg{width:15px;height:15px}
.mega{position:absolute;left:0;top:calc(100% + 10px);width:560px;padding:12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-3);display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.gnb-cat.is-open .mega{display:grid}
.mega a{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:var(--r-md)}
.mega a:hover{background:var(--ink-50)}
.mega .mg-ic{width:36px;height:36px;border-radius:9px;background:var(--ink-100);display:grid;place-items:center;flex:none}
.mega a:hover .mg-ic{background:var(--lime)}
.mega b{display:block;font-size:14.5px;font-weight:700}
.mega small{display:block;font-size:12.5px;color:var(--text-3);margin-top:2px}
.hd-search{flex:1;max-width:340px;margin-left:auto;position:relative}
.hd-search input{width:100%;height:40px;border-radius:var(--r-md);border:1px solid transparent;background:var(--ink-100);padding:0 14px 0 38px;font-size:14px}
.hd-search input:focus{outline:0;background:var(--bg);border-color:var(--ink-900)}
.hd-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--text-3)}
.hd-util{display:flex;align-items:center;gap:4px;flex:none}
.hd-util .hd-link{font-size:14px;font-weight:600;color:var(--text-2);padding:0 10px;height:36px;display:inline-flex;align-items:center;border-radius:var(--r-md)}
.hd-util .hd-link:hover{color:var(--text);background:var(--ink-100)}
.icon-btn{position:relative;width:40px;height:40px;border-radius:var(--r-md);display:inline-grid;place-items:center;color:var(--text-2)}
.icon-btn:hover{background:var(--ink-100);color:var(--text)}
.icon-btn svg{width:21px;height:21px}
.icon-btn .nb{position:absolute;top:5px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--lime);color:var(--ink-900);font-size:10.5px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px var(--bg)}
.hd-avatar{margin-left:4px;position:relative}
.hd-avatar > button{display:inline-flex;align-items:center;gap:6px;padding:3px;border-radius:999px}
.hd-avatar > button:hover{background:var(--ink-100)}
.user-menu{position:absolute;right:0;top:calc(100% + 10px);width:260px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:8px;display:none}
.hd-avatar.is-open .user-menu{display:block}
.user-menu .um-head{display:flex;gap:10px;align-items:center;padding:10px 10px 12px;border-bottom:1px solid var(--border);margin-bottom:6px}
.user-menu .um-head b{display:block;font-size:15px}
.user-menu .um-head small{font-size:12.5px;color:var(--text-3)}
.user-menu .um-member{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 2px 6px;padding:10px 12px;border-radius:var(--r-md);background:var(--ink-900);color:#fff;font-size:13px;font-weight:600}
.user-menu .um-member b{color:var(--lime)}
.user-menu a.um-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-md);font-size:14px;font-weight:500;color:var(--text-2)}
.user-menu a.um-item:hover{background:var(--ink-100);color:var(--text)}
.user-menu a.um-item svg{width:17px;height:17px}
.user-menu hr{margin:6px 0}
/* 헤더 종 드롭다운(F15). 프로토타입 시안이 없어 내 메뉴 패널을 그대로 씁니다 — 디자인 확인 전 임시 */
.hd-noti{position:relative}
.hd-noti.is-open .noti-menu{display:block}
.noti-menu{width:340px;max-width:calc(100vw - 32px);padding:0;overflow:hidden}
.noti-menu .nm-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:14px 16px 10px;border-bottom:1px solid var(--border)}
.noti-menu .nm-head b{font-size:15px}
.noti-menu .nm-head span{font-size:12.5px;color:var(--text-3)}
.noti-menu .nm-list{max-height:360px;overflow-y:auto;padding:6px}
.noti-menu .nm-item{display:flex;gap:10px;padding:10px;border-radius:var(--r-md);color:var(--text-2)}
.noti-menu .nm-item:hover{background:var(--ink-100)}
.noti-menu .nm-item.is-unread{background:var(--ink-50)}
.noti-menu .nm-item.is-unread .nm-b b{font-weight:700}
.noti-menu .nm-ic{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--ink-100);color:var(--text-2)}
.noti-menu .nm-ic svg{width:16px;height:16px}
.noti-menu .nm-ic.t-qna{background:var(--info-bg);color:var(--info)}
.noti-menu .nm-ic.t-learn{background:var(--lime-soft);color:var(--lime-deep)}
.noti-menu .nm-ic.t-order{background:var(--success-bg);color:var(--success)}
.noti-menu .nm-ic.t-notice{background:var(--warn-bg);color:var(--warn)}
.noti-menu .nm-b{min-width:0;display:grid;gap:2px}
.noti-menu .nm-b b{font-size:13.5px;color:var(--text)}
.noti-menu .nm-b small{font-size:12.5px;color:var(--text-3)}
.noti-menu .nm-b em{font-style:normal;font-size:11.5px;color:var(--text-3)}
.noti-menu .nm-empty{display:grid;justify-items:center;gap:4px;padding:24px 16px;text-align:center}
.noti-menu .nm-empty svg{width:24px;height:24px;color:var(--text-3);margin-bottom:4px}
.noti-menu .nm-empty b{font-size:14px}
.noti-menu .nm-empty small{font-size:12.5px;color:var(--text-3)}
.noti-menu .nm-all{display:flex;align-items:center;justify-content:center;gap:4px;padding:12px;border-top:1px solid var(--border);font-size:13.5px;font-weight:600;color:var(--text-2)}
.noti-menu .nm-all:hover{background:var(--ink-100);color:var(--text)}
.noti-menu .nm-all svg{width:15px;height:15px}

/* ── 푸터 ─────────────────────────────── */
.site-footer{background:var(--bg-subtle);border-top:1px solid var(--border);margin-top:auto;font-size:13.5px;color:var(--text-2)}
.site-footer .ft-top{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:32px;padding:48px 0 36px}
.site-footer .ft-brand p{margin-top:12px;line-height:1.7;max-width:300px}
.site-footer h5{font-size:13px;font-weight:700;color:var(--text);margin-bottom:12px}
.site-footer li + li{margin-top:8px}
.site-footer a:hover{color:var(--text)}
.site-footer .ft-bottom{border-top:1px solid var(--border);padding:20px 0 28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;font-size:12.5px;color:var(--text-3);line-height:1.7}
.site-footer .ft-legal{display:flex;gap:16px;font-weight:600;color:var(--text-2)}
.site-footer .ft-legal a:first-child{color:var(--text)}

/* ── 하단 탭바 (모바일) ──────────────── */
.tabbar{display:none}
@media (max-width:768px){
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:50;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--border)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:600;color:var(--text-3);position:relative}
  .tabbar a svg{width:22px;height:22px}
  .tabbar a.is-active{color:var(--ink-900)}
  .tabbar a.is-active::before{content:"";position:absolute;top:0;left:30%;right:30%;height:2px;border-radius:0 0 2px 2px;background:var(--ink-900)}
  .tabbar a .nb{position:absolute;top:7px;left:calc(50% + 6px);min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:var(--lime);color:var(--ink-900);font-size:9.5px;font-weight:800;display:grid;place-items:center}
  body.has-tabbar{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
  body.no-tabbar .tabbar{display:none}
  body.no-tabbar{padding-bottom:0}
}

/* 모바일 헤더 */
.hd-mobile-actions{display:none}
/* 주 메뉴 '커뮤니티'(클래스픽 추가): 1200px 아래에서는 강사 스튜디오 버튼까지 놓이면 검색창이 100px 안팎으로 줄어 먼저 숨깁니다. 푸터 커뮤니티 열로 닿습니다 */
@media (max-width:1199px){ .gnb > a.hide-laptop{display:none} }
@media (max-width:1024px){
  .hd-search{max-width:220px}
  .gnb > a.hide-tablet{display:none}
}
@media (max-width:768px){
  .site-header .hd-in{gap:12px}
  .gnb,.hd-search,.hd-util{display:none}
  .hd-mobile-actions{display:flex;margin-left:auto;gap:2px}
  .demo-bar .db-msg .hide-xs{display:none}
  .site-footer .ft-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px;padding:36px 0 24px}
  .site-footer .ft-brand{grid-column:1 / -1}
}

/* MY 시트 (모바일) */
.sheet-backdrop{position:fixed;inset:0;z-index:80;background:rgba(14,16,15,.45);display:none}
.sheet-backdrop.is-open{display:block}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:81;background:var(--bg);border-radius:20px 20px 0 0;padding:8px 16px calc(20px + env(safe-area-inset-bottom));transform:translateY(100%);visibility:hidden;transition:transform .25s var(--ease),visibility 0s .25s;max-height:85vh;overflow:auto}
.sheet.is-open{transform:none;visibility:visible;transition:transform .25s var(--ease)}
@media (min-width:769px){ .sheet,.sheet-backdrop.is-open{display:none} }
.sheet .grabber{width:40px;height:4px;border-radius:2px;background:var(--ink-300);margin:4px auto 12px}

/* ── 강사 스튜디오 셸 ────────────────── */
body[data-layout="studio"]{background:var(--bg-subtle)}
.studio{display:grid;grid-template-columns:var(--studio-side) minmax(0,1fr);min-height:100vh}
.st-main .demo-bar .container{max-width:none;padding:0 32px}
.st-side{position:sticky;top:0;height:100vh;background:var(--ink-900);color:rgba(255,255,255,.72);display:flex;flex-direction:column;padding:18px 12px 14px;overflow-y:auto}
.st-side .logo{color:#fff;padding:2px 8px 18px}
.st-new{margin:0 4px 16px}
.st-nav .st-group{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.38);padding:14px 10px 6px}
.st-nav a{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border-radius:var(--r-md);font-size:14.5px;font-weight:500}
.st-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.st-nav a.is-active{background:rgba(255,255,255,.1);color:#fff;font-weight:700}
.st-nav a.is-active svg{color:var(--lime)}
.st-nav a svg{width:18px;height:18px}
.st-nav a .cnt{margin-left:auto;min-width:22px;height:20px;padding:0 6px;border-radius:10px;background:var(--lime);color:var(--ink-900);font-size:11.5px;font-weight:800;display:grid;place-items:center}
.st-side .st-foot{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:4px}
.st-side .st-me{display:flex;align-items:center;gap:10px;padding:8px 10px}
.st-side .st-me b{display:block;color:#fff;font-size:14px}
.st-side .st-me small{font-size:12px;color:rgba(255,255,255,.5)}
.st-side .st-back{display:flex;align-items:center;gap:8px;height:38px;padding:0 10px;border-radius:var(--r-md);font-size:13.5px;font-weight:500}
.st-side .st-back:hover{background:rgba(255,255,255,.06);color:#fff}
.st-side .st-back svg{width:16px;height:16px}
.st-main{min-width:0;display:flex;flex-direction:column}
.st-top{position:sticky;top:0;z-index:30;height:64px;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 32px}
.st-top .st-title{font-size:18px;font-weight:800;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-top .st-crumb{font-size:13px;color:var(--text-3);font-weight:500;display:flex;align-items:center;gap:4px}
.st-top .st-crumb svg{width:14px;height:14px}
.st-top .st-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.st-menu-btn{display:none}
.st-backdrop{position:fixed;inset:0;z-index:84;background:rgba(14,16,15,.45);display:none}
.st-backdrop.is-open{display:block}
.st-body{padding:28px 32px 64px;width:100%;max-width:calc(1200px + 64px)}
@media (max-width:1024px){
  .studio{grid-template-columns:minmax(0,1fr)}
  .st-side{position:fixed;left:0;top:0;bottom:0;width:272px;z-index:85;transform:translateX(-100%);transition:transform .25s var(--ease)}
  .st-side.is-open{transform:none}
  .st-menu-btn{display:inline-grid}
  .st-top{padding:0 16px 0 8px}
  .st-main .demo-bar .container{padding:0 16px}
  .st-body{padding:20px 16px 48px}
}
@media (max-width:768px){
  .st-top .st-actions .btn:not(.keep-mobile){display:none}
}

/* ── 레이아웃 공통 ───────────────────── */
body{min-height:100vh;display:flex;flex-direction:column}
body > main{flex:1 0 auto}
body[data-layout="studio"] > .studio{flex:1 0 auto}

/* ── MY 페이지 셸: main.my-page > .container.my-wrap > aside.my-nav[data-my-nav] + .my-body ── */
.my-page{background:var(--bg-subtle)}
.my-wrap{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;align-items:start;padding-top:32px;padding-bottom:64px}
.my-nav{position:sticky;top:calc(var(--header-h) + 16px);background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:8px}
.my-nav .mn-head{display:flex;gap:10px;align-items:center;padding:10px 10px 12px;border-bottom:1px solid var(--border);margin-bottom:6px;min-width:0}
.my-nav .mn-head > div{min-width:0}
.my-nav .mn-head b{display:block;font-size:15px}
.my-nav .mn-head small{display:block;font-size:12.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.my-nav .mn-member{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 2px 6px;padding:10px 12px;border-radius:var(--r-md);background:var(--ink-900);color:#fff;font-size:13px;font-weight:600}
.my-nav .mn-member b{color:var(--lime)}
.my-nav .mn-group{padding:12px 10px 4px;font-size:12px;font-weight:700;color:var(--text-3)}
.my-nav nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-md);font-size:14px;font-weight:500;color:var(--text-2)}
.my-nav nav a:hover{background:var(--ink-100);color:var(--text)}
.my-nav nav a.is-active{background:var(--ink-900);color:#fff;font-weight:600}
.my-nav nav a svg{width:17px;height:17px;flex:none}
.my-nav nav a .cnt{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--lime);color:var(--ink-900);font-size:11.5px;font-weight:700;display:inline-grid;place-items:center}
.my-body{min-width:0}
.my-body > .page-head:first-child{margin-top:0}
@media (max-width:1024px){
  .my-wrap{grid-template-columns:minmax(0,1fr);gap:16px;padding-top:0}
  .my-nav{position:static;margin:0 calc(var(--gutter) * -1);border:0;border-bottom:1px solid var(--border);border-radius:0;padding:10px var(--gutter);overflow-x:auto;scrollbar-width:none}
  .my-nav::-webkit-scrollbar{display:none}
  .my-nav .mn-head,.my-nav .mn-member,.my-nav .mn-group{display:none}
  .my-nav nav{display:flex;gap:6px;width:max-content}
  .my-nav nav a{height:36px;padding:0 14px;border:1px solid var(--border);border-radius:999px;background:var(--bg);font-size:13.5px;white-space:nowrap}
  .my-nav nav a svg{display:none}
  .my-nav nav a .cnt{margin-left:2px}
}