:root{
  --bg: #f3f1fa;
  --panel-purple: #9b8fd6;
  --panel-purple-deep: #8478c4;
  --ink-on-purple: #ffffff;
  --subtitle-on-purple: #e6e1f7;

  --menu-panel-bg: #ffffff;
  --menu-btn-bg: #4a3f91;
  --menu-btn-bg-hover: #5b4eac;
  --menu-btn-bg-active: #6c5ce7;
  --menu-btn-text: #ffffff;
  --menu-label: #7a7488;

  --connector-bg: #d8d0f2;
  --connector-icon: #5b4eac;

  --dark-panel-bg: #16162a;
  --dark-btn-bg: #1f1f38;
  --dark-btn-bg-hover: #2a2a4a;
  --dark-btn-selected: #34346a;
  --dark-btn-selected-ring: #8b7de0;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #5f5f76;

  --status-text: #6a6480;
  --shell-shadow: 0 24px 60px -20px rgba(45, 35, 90, 0.35);
}

*{box-sizing:border-box;}

html, body{
  height: 100%;
  margin: 0;
  overflow: hidden; /* 화면 안에 항상 다 들어오도록 스크롤 자체를 없앤다 */
  background: var(--bg);
  color: #201c33;
  font-family: 'Noto Sans KR', -apple-system, sans-serif;
}

/*
 * 뷰포트 전체를 차지하는 무대. 실제 UI(.stage)는 항상 1000x600 이라는
 * 고정된 "가로로 긴" 크기로 그려지고, JS가 창 크기에 맞춰 scale()만
 * 조정한다. 그래서 데스크탑/태블릿/휴대폰 어디서 보든 레이아웃이
 * 세로로 쌓이지 않고, 화면 밖으로 잘리거나 스크롤이 생기지도 않는다.
 */
.stage-outer{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px;
  box-sizing: border-box;
  background: var(--bg);
}

.stage{
  flex: none;
  width: 1000px;
  height: 600px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  transform-origin: center center;
}

/*
 * "가로 모드로 보기"를 켠 상태에서 실제 기기는 세로일 때, 앱 화면
 * 전체(.stage-outer)를 90도 돌려서 화면을 가득 채운다. 가로 모드
 * 전환 버튼(.rotate-hint)은 이 안에 들어있지 않으므로 실제 기기
 * 방향 그대로 항상 읽기 편하게 남아 있는다.
 * 링크를 눌러 다른 페이지로 이동해도(그 페이지가 이 manager.css/
 * manager.js를 그대로 불러오는 한) localStorage에 저장된 설정
 * 덕분에 가로 모드가 그대로 유지된다. 실제로 기기를 가로로 돌리면
 * (orientation이 landscape가 되면) JS가 이 클래스를 자동으로
 * 떼어내므로 이중으로 돌아가지 않는다.
 */
html.force-landscape .stage-outer{
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 100vh;
  height: 100vw;
  transform-origin: top left;
  transform: rotate(90deg) translateY(-100%);
}

.app-shell{
  flex: 1 1 auto;
  min-height: 0;
  display:flex;
  background: var(--menu-panel-bg);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shell-shadow);
}

/* ---------- 왼쪽 브랜드 패널 ---------- */
.side-panel{
  flex: 0 0 260px;
  background: linear-gradient(175deg, var(--panel-purple), var(--panel-purple-deep));
  color: var(--ink-on-purple);
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 22px;
  padding: 32px 24px;
  text-align:center;
  position: relative;
}

/* 왼쪽 위 구석의 가로 모드 전환/해제 버튼.
   세로(휴대폰 세로 모드)로 보고 있을 때만 뜬다 — 화면에 다 들어오는
   건 JS의 scale 계산이 항상 보장하므로, 이 버튼은 "가로로 크게 보고
   싶을 때"를 위한 보조 기능이다. */
.panel-icon-btn{
  appearance: none;
  border: none;
  position:absolute;
  top: 20px;
  left: 20px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255,255,255,0.16);
  display: none;
  align-items:center;
  justify-content:center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.panel-icon-btn:hover{ background: rgba(255,255,255,0.28); }
.panel-icon-btn:focus-visible{ outline: 2px solid #ffffff; outline-offset: 2px; }
.panel-icon-btn svg{ width:20px; height:20px; }
.panel-icon-btn.is-active{ background: rgba(255,255,255,0.4); }
@media (orientation: portrait){
  .panel-icon-btn{ display:flex; }
}

.board-icon{ width: 128px; height: 128px; filter: drop-shadow(0 10px 18px rgba(20,15,50,0.28)); }

.brand-title{
  font-family: 'Do Hyeon', 'Noto Sans KR', sans-serif;
  font-size: 26px;
  letter-spacing: 0.01em;
  margin: 0;
}

.brand-subtitle{
  font-size: 13px;
  color: var(--subtitle-on-purple);
  margin: -12px 0 0;
  line-height: 1.5;
}

/* ---------- 가운데 메인 메뉴 패널 ---------- */
.menu-panel{
  flex: 1 1 300px;
  min-width: 220px;
  display:flex;
  flex-direction: column;
  transition: flex-grow 0.28s ease, flex-basis 0.28s ease, min-width 0.28s ease;
}
.menu-panel.is-collapsed{
  flex: 0 0 108px;
  min-width: 108px;
}

.menu-view{
  padding: 36px 32px;
  display:flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
}
.menu-view[hidden]{ display:none; }

.menu-panel-label{
  font-size: 13px;
  font-weight: 700;
  color: var(--menu-label);
  margin: 0;
}

.menu-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  align-content: start;
}

/* 하위 메뉴가 열렸을 때 가운데 패널에 남는 "뒤로가기" 레일 */
.back-rail{
  padding: 28px 14px;
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 10px;
  text-align:center;
}

.back-btn{
  appearance:none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--menu-btn-bg);
  color: #ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.12s ease;
}
.back-btn:hover{ background: var(--menu-btn-bg-hover); }
.back-btn:active{ transform: translateY(1px); }
.back-btn svg{ width: 20px; height: 20px; }
.back-btn:focus-visible{ outline: 3px solid #b7ade8; outline-offset: 2px; }

.back-rail-label{
  font-size: 12.5px;
  font-weight: 700;
  color: var(--menu-label);
  line-height: 1.4;
}

.menu-btn{
  appearance:none;
  border: none;
  border-radius: 14px;
  background: var(--menu-btn-bg);
  color: var(--menu-btn-text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 18px 16px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  box-shadow: 0 6px 14px -8px rgba(74, 63, 145, 0.6);
}
.menu-btn:hover{ background: var(--menu-btn-bg-hover); }
.menu-btn:active{ transform: translateY(1px); }
.menu-btn.is-active{
  background: var(--menu-btn-bg-active);
  box-shadow: 0 10px 22px -10px rgba(108, 92, 231, 0.7);
}
.menu-btn:focus-visible{ outline: 3px solid #b7ade8; outline-offset: 2px; }

.menu-hint{
  margin-top: auto;
  font-size: 13px;
  color: var(--status-text);
  line-height: 1.6;
}
.menu-hint b{ color: #453d8f; }

.menu-load-error{
  font-size: 13px;
  color: #b3486a;
  line-height: 1.6;
  margin: 0;
}

/* ---------- 연결 화살표 ---------- */
.connector{
  flex: 0 0 56px;
  background: var(--connector-bg);
  display:flex;
  align-items:center;
  justify-content:center;
}
.connector svg{
  width: 22px; height: 22px;
  color: var(--connector-icon);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease 0.05s, transform 0.25s ease 0.05s;
}
.connector.is-open svg{ opacity: 1; transform: translateX(0); }

/* ---------- 오른쪽 하위 메뉴 패널 ---------- */
/* is-open일 때 flex-grow:1로 남는 공간을 직접 채워서, 가운데 패널이
   좁아져도(뒤로가기 레일) 컨테이너 오른쪽에 빈 여백이 생기지 않게 한다. */
.submenu-panel{
  flex: 0 0 0;
  background: var(--dark-panel-bg);
  overflow: hidden;
  transition: flex-grow 0.28s ease, flex-basis 0.28s ease;
}
.submenu-panel.is-open{
  flex: 1 1 300px;
}

.submenu-inner{
  width: 100%;
  max-width: 340px;
  height: 100%;
  padding: 36px 24px;
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.submenu-list{
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.submenu-title{
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
  opacity: 0.75;
}

.sub-btn{
  appearance:none;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--dark-btn-bg);
  color: var(--text-on-dark);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  padding: 16px 18px;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content: space-between;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.sub-btn:hover:not(:disabled):not(.is-disabled){ background: var(--dark-btn-bg-hover); }
.sub-btn.is-selected{
  background: var(--dark-btn-selected);
  border-color: var(--dark-btn-selected-ring);
}
.sub-btn:disabled,
.sub-btn.is-disabled{
  color: var(--text-on-dark-muted);
  cursor: not-allowed;
}
.sub-btn .tag{
  font-size: 11px;
  font-weight: 700;
  color: var(--text-on-dark-muted);
  border: 1px solid var(--text-on-dark-muted);
  border-radius: 999px;
  padding: 2px 8px;
}
.sub-btn:focus-visible{ outline: 2px solid #8b7de0; outline-offset: 2px; }

.submenu-status{
  margin-top: auto;
  font-size: 12.5px;
  color: #a7a2c4;
  line-height: 1.6;
  min-height: 1.6em;
}
.submenu-status b{ color: #ffffff; }

/*
 * 이제 화면 크기에 따라 세로로 쌓이지 않는다 — .stage 전체를
 * script.js가 뷰포트에 맞춰 scale()로 축소/확대해서 항상 같은
 * "가로로 긴" 비율로 화면 안에 들어오게 한다.
 */