/* chrome.css — 서브페이지 공통 상단바(Home + 4 입학 구분 탭) */
:root{ --chrome-h:48px }

.sitechrome{position:sticky;top:0;z-index:60;height:var(--chrome-h);
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;
  background:#0a1b3f;border-bottom:1px solid #22406e}
.sc-home{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;
  font-weight:800;font-size:15px;letter-spacing:-.3px;transition:opacity .2s}
.sc-home svg{width:20px;height:20px;color:var(--energy-soft)}
.sc-home:hover{opacity:.82}

/* 세그먼트형 탭 — 명확히 "탭"으로 보이도록 테두리+구분선 */
.sc-tabs{display:flex;gap:0;border:1px solid rgba(255,255,255,.28);border-radius:22px;
  overflow:hidden;background:rgba(255,255,255,.05)}
.sc-tab{min-width:148px;display:inline-flex;align-items:center;justify-content:center;
  padding:8px 20px;border:0;border-left:1px solid rgba(255,255,255,.16);background:transparent;
  cursor:pointer;color:rgba(255,255,255,.82);text-decoration:none;font-family:inherit;line-height:1;
  font-size:15px;font-weight:700;white-space:nowrap;transition:background .2s,color .2s}
.sc-tab:first-child{border-left:0}
.sc-tab:hover{color:#fff;background:rgba(255,255,255,.12)}
.sc-tab.is-active{color:#fff;background:linear-gradient(135deg,var(--accent),var(--brand))}

/* full/short 라벨: 기본은 full, 모바일에서 short */
.sc-tab__short{display:none}

@media (max-width:767px){
  /* 헤더 1행: [Home] [학부·대학원·Undergrad·Graduate] [퀵] — 항상 노출 */
  .sitechrome{flex-wrap:nowrap;height:var(--chrome-h);min-height:var(--chrome-h);
    gap:8px;padding:0 10px}
  .sc-home{flex:0 0 auto}
  .sc-home span{display:none}
  .sc-tabs{flex:1 1 auto;min-width:0;border-radius:10px}
  .sc-tab{flex:1 1 0;min-width:0;padding:7px 4px;font-size:12px;white-space:nowrap}
  .sc-tab__full{display:none}
  .sc-tab__short{display:inline}
}
@media (max-width:400px){
  .sc-tab{font-size:11px;padding:7px 3px}
}

/* 헤더 햄버거(전체 메뉴): 모바일 전용. 데스크톱은 좌측 호버 레일 사용 → 숨김. */
.sc-menu{display:none}
@media (max-width:767px){
  .sc-menu{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
    width:38px;height:38px;padding:0;border:1px solid rgba(255,255,255,.28);border-radius:10px;
    background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
  .sc-menu svg{width:22px;height:22px}
  /* 떠다니는 세로 MENU 레일은 모바일에서 숨김(햄버거로 대체) — 가이드라인 전체폭 레이아웃 확보 */
  .sidemenu__tab{display:none !important}
}

/* 좌측 MENU: 데스크톱은 기존 호버 드로어(sidemenu 자체 CSS). 모바일은 전체높이 오버레이. */
.sidemenu__backdrop{display:none}
@media (max-width:767px){
  .sidemenu__backdrop{display:block;position:fixed;inset:0;z-index:70;
    background:rgba(4,12,30,.55);opacity:0;pointer-events:none;transition:opacity .25s}
  .sidemenu.is-open .sidemenu__backdrop{opacity:1;pointer-events:auto}
  .sidemenu__panel{position:fixed;top:0;left:0;height:100dvh;width:85vw;max-width:340px;
    z-index:80;transform:translateX(-100%);transition:transform .28s ease;
    overflow-y:auto;-webkit-overflow-scrolling:touch}
  .sidemenu.is-open .sidemenu__panel{transform:translateX(0)}
  body.sidemenu-open{overflow:hidden}
}

/* 우측 상단 퀵메뉴: 데스크톱 숨김(허브는 별도 레일 사용), 모바일 노출 */
.sc-quickwrap{display:none;position:relative}
.sc-quick{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid rgba(255,255,255,.28);border-radius:10px;background:rgba(255,255,255,.06);
  color:#fff;cursor:pointer}
.sc-quick svg{width:20px;height:20px}
.sc-quicksheet{position:absolute;top:46px;right:0;z-index:85;min-width:200px;
  background:#0c2150;border:1px solid #2b4b83;border-radius:14px;padding:8px;
  box-shadow:0 18px 40px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:4px}
.sc-quicksheet[hidden]{display:none}
.sc-qitem{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;
  color:#dbe6ff;text-decoration:none;font-size:15px;font-weight:600}
.sc-qitem svg{width:20px;height:20px;flex:0 0 auto;color:var(--energy-soft)}
.sc-qitem:hover{background:rgba(255,255,255,.08)}
.sc-qitem.is-primary{background:linear-gradient(135deg,var(--accent),var(--brand));color:#fff}
.sc-qitem.is-primary svg{color:#fff}
@media (max-width:767px){
  .sc-quickwrap{display:block;flex:0 0 auto}
}

/* 모바일 노치 안전영역(viewport-fit=cover 대응) */
@media (max-width:767px){
  .sitechrome{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
}
