/* 프로그램 공통 틀: 상단 영역 · 모드 버튼 · 계기 메뉴 줄 · 좌측 계기 선택 메뉴 · 중앙 콘텐츠 영역
   Reference 대응: Reference WORK/common/common.css
     12(.top) 13(.logo) 14(.toptools/.toolpill) 16·17(.navrow/.navbtn) 18(.app) 19(.sidebar)
     20(.sideTitle) 21(.sideSection) 22(.sideHead) 23–25(.sideItem/.subtxt) 26(.scenario) 27(.main)
     60·61(반응형 중 공통 틀 부분)
   중앙 콘텐츠의 안쪽 여백(Reference .main padding 8px / ≤650px 4px)은 learning.css의 .lrn이 이미 맡는다.
   아직 WORK에 없는 메뉴는 disabled 버튼으로 두고(.sh-shell button:disabled) 어떤 화면에도 연결하지 않는다. */

.sh-top{height:54px;display:flex;align-items:center;gap:16px;padding:0 14px;border-bottom:1px solid #17344e;background:#06121f;position:sticky;top:0;z-index:50}
.sh-logo{font-weight:900;font-size:20px;white-space:nowrap}
.sh-logo small{font-size:11px;color:#708a9f;font-weight:500;margin-left:14px}
/* min-width/overflow: Reference는 651–1050px에서 버튼 줄이 화면 밖으로 넘친다 → WORK는 버튼 줄 안에서만 가로 스크롤 */
.sh-toptools{margin-left:auto;display:flex;gap:8px;min-width:0;overflow-x:auto;scrollbar-width:thin}
.sh-toolpill{flex:none;border:1px solid #1f4360;border-radius:18px;padding:6px 11px;background:#0b1b2a;color:#cbd8e4;font-size:11px;white-space:nowrap}
.sh-toolpill.is-active{background:#087fff;border-color:#2c9cff;color:#fff}

.sh-navrow{height:48px;display:grid;grid-template-columns:repeat(9,1fr);background:#0a1726;border-bottom:1px solid #17344e;position:sticky;top:54px;z-index:45}
.sh-navbtn{border:0;border-right:1px solid #17344e;background:#0a1726;color:#b8c8d6;font-weight:700;font-size:12px}
.sh-navbtn.is-active{background:#174573;color:#fff;border-bottom:2px solid #28a8ff}

.sh-app{display:grid;grid-template-columns:205px minmax(0,1fr);min-height:calc(100vh - 102px)}
.sh-sidebar{background:#071522;border-right:1px solid #16334c;padding:8px;overflow:auto}
/* Reference의 "×"는 동작이 연결되어 있지 않아 WORK에서는 표시하지 않는다 */
.sh-side-title{height:42px;display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:800;border:1px solid #15334b;border-radius:7px;padding:0 10px;margin-bottom:6px;background:#0a1a29}
.sh-side-section{margin:6px 0}
.sh-side-head{display:flex;align-items:center;gap:8px;padding:8px 7px;color:#c6d4df;font-weight:700;font-size:12px}
.sh-side-item{width:100%;border:1px solid transparent;background:#081724;color:#b7c8d6;border-radius:7px;padding:8px 9px;margin:2px 0;text-align:left;font-size:11px}
.sh-side-item.is-active{background:linear-gradient(180deg,#0c65c6,#0854a8);border-color:#168ffb;color:#fff}
.sh-side-item:not(:disabled):hover{border-color:#245473}
.sh-side-item small{display:block;font-size:9px;color:#6f8da5;margin-top:3px}
.sh-side-item.is-active small{color:#cfe8fb}
.sh-scenario{margin-top:12px;border:1px solid #17354f;border-radius:8px;padding:7px;background:#081827}
.sh-scenario h4{font-size:11px;margin:2px 4px 7px}
.sh-scenario button{width:100%;text-align:left;border:1px solid transparent;border-radius:6px;background:transparent;color:#b7c7d5;padding:7px;font-size:10px}

.sh-main{min-width:0}
/* 실습 화면(PT 실습)이 열리면 학습 영역(좌측 메뉴 포함)을 숨긴다 — Reference openPTPractice: learningApp 숨김 */
.sh-app[hidden]{display:none}

/* 아직 WORK에 없는 메뉴: 흐리게 표시하고 누를 수 없게 한다 */
.sh-shell button:disabled{opacity:.38;cursor:not-allowed}

/* Reference 60행: 1050px 이하에서는 좌측 메뉴를 숨기고 콘텐츠를 전체 폭으로 쓴다.
   (계기 타입 선택은 콘텐츠 안의 타입 탭으로 계속 할 수 있다) */
@media(max-width:1050px){
 .sh-app{grid-template-columns:1fr}
 .sh-sidebar{display:none}
}
/* Reference 61행: 650px 이하에서는 부제목·모드 버튼을 숨기고, 메뉴 줄은 6칸(HOME·시스템 연동 제외)으로 가로 스크롤 */
@media(max-width:650px){
 /* T6 수정: 모드 버튼 줄은 숨기지 않는다 (Reference는 숨겨 모바일에서 실습모드 → TREX로 들어갈 수 없었다).
    로고를 줄이고 버튼 줄은 남은 폭 안에서 가로 스크롤 — 학습모드 · 실습모드 버튼이 처음 화면에 보인다 */
 .sh-logo small{display:none}
 .sh-top{gap:8px;padding:0 8px}
 .sh-logo{font-size:14px}
 .sh-toolpill{padding:6px 9px}
 /* 칸 최소 폭 88px: Reference는 63px 칸에서 "밸브 (Control Valve)"가 3줄이 되어 메뉴 줄 높이(48px) 밖으로 잘린다 → WORK는 2줄 이내로 두고 메뉴 줄 안에서 가로 스크롤 */
 .sh-navrow{grid-template-columns:repeat(6,minmax(88px,1fr));overflow-x:auto;overflow-y:hidden}
 .sh-navbtn{padding:0 4px;line-height:1.2}
 .sh-navbtn:nth-child(1),.sh-navbtn:nth-child(8){display:none}
 /* Reference 106행: 실습용 메뉴 줄에서는 HOME · 시스템 연동 실습도 표시.
    Reference는 6칸 틀에 8칸을 넣어 둘째 줄로 넘어간다 → WORK는 8칸으로 두고 메뉴 줄 안에서 가로 스크롤 */
 .sh-navrow.is-practice{grid-template-columns:repeat(8,minmax(88px,1fr))}
 .sh-navrow.is-practice .sh-navbtn:nth-child(1),.sh-navrow.is-practice .sh-navbtn:nth-child(8){display:block}
}
/* 터치 기기: 좌측 메뉴 항목을 약 44px 높이로 키운다 (CLAUDE.md 45.4) */
@media(pointer:coarse){
 .sh-side-item{min-height:44px}
}