/* =====================================================================
   공통 앱 셸 — §6.3
   톱바 56px, 좌측 네비 240px. border-bottom 1px hair, 그림자 없음.
   강조선 금지. 활성 네비 = 아이콘 accent + accent-tint 알약 배경(네비 알약만 8px 관용).
   ===================================================================== */

.vg-shell {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-app);
}
.vg-shell--fullscreen {
  height: 100dvh;
}

/* ── 톱바 ── */
.vg-topbar {
  flex: 0 0 var(--topbar-h);
  min-width: 0;
  height: var(--topbar-h);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--hair);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: 0 var(--sp-6);
  position: sticky;
  top: 0;
  z-index: 30;
}
.vg-topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
}
.vg-topbar__brand:hover {
  text-decoration: none;
}
.vg-topbar__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
}
.vg-topbar__wm {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-strong);
}
.vg-topbar__wm .v {
  color: var(--accent);
}
/* 역할 컨텍스트 라벨 — mono accent, 조용한 신호. 디바이더는 강조선 아님(셸 구획). */
.vg-topbar__role {
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-accent);
  padding-left: var(--sp-4);
  margin-left: var(--sp-2);
  border-left: 1px solid var(--hair);
}
.vg-topbar__spacer {
  flex: 1;
}
.vg-topbar__actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.vg-topbar__switch {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--bg-surface-2);
}
.vg-topbar__switch-link {
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  border-radius: calc(var(--radius) - 2px);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.vg-topbar__switch-link:active {
  transform: scale(0.95);
}
.vg-topbar__switch-link:hover,
.vg-topbar__switch-link.is-active {
  background: var(--bg-surface);
  color: var(--text-strong);
  text-decoration: none;
}

/* 톱바 아이콘 버튼 (테마/로그아웃) */
.vg-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-spring),
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.vg-iconbtn:active {
  transform: scale(0.92);
}
.vg-iconbtn:hover {
  background: var(--bg-surface-2);
  color: var(--text-strong);
}

/* 사용자 칩 */
.vg-topbar__user {
  min-width: 0;
  max-width: min(320px, 34vw);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 11px 5px 6px;
  border-radius: 100px;
  background: var(--bg-surface-2);
}
.vg-topbar__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex: none;
  overflow: hidden;
}
.vg-topbar__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.vg-topbar__uname {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
}

/* ── 본문 그리드: 좌측 네비 + 메인 ── */
.vg-shell__body {
  /* 현재 네비 폭(브레이크포인트별). 그리드와 구분선이 같은 값을 공유한다. */
  --nav-cur: var(--nav-w);
  display: grid;
  grid-template-columns: var(--nav-cur) 1fr;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  align-items: start;
  /* 전체 높이 사이드바 구분선: sticky 네비(뷰포트 높이)에 의존하지 않고
     본문 그리드 전체 높이를 따라가는 컨테이너 배경 하어라인. */
  background-image: linear-gradient(var(--hair), var(--hair));
  background-repeat: no-repeat;
  background-position: var(--nav-cur) 0;
  background-size: 1px 100%;
}
.vg-shell__body--bare {
  grid-template-columns: 1fr;
  background-image: none; /* 네비 없는 레이아웃엔 구분선 없음 */
}

/* ── 좌측 네비 ── */
.vg-nav {
  position: relative;
  top: auto;
  align-self: start;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--bg-surface);
  /* 구분선은 .vg-shell__body 컨테이너 배경(전체 높이)이 그린다. */
  padding: var(--sp-5) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  overflow-y: auto;
}
.vg-nav__label {
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--sp-2) var(--sp-3) 6px;
}
.vg-nav__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius); /* 네비 알약만 8px 관용 §6.3 */
  font-size: 14px;
  font-weight: 500;
  color: var(--text-body);
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.vg-nav__item:hover {
  background: var(--bg-surface-2);
  color: var(--text-strong);
  text-decoration: none;
}
/* 포커스 가시성 — 보태니컬 is-active 규칙이 box-shadow 를 점유해 전역
   :focus-visible 링이 사라지므로 outline 채널로 링을 보장한다(WCAG 2.4.7). */
.vg-nav__item:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.vg-nav__item .vg-nav__ic {
  flex: none;
  color: var(--text-muted);
  display: inline-flex;
}
/* 활성: 아이콘 accent + accent-tint 알약 배경. 3px 강조바 금지. */
.vg-nav__item.is-active {
  background: var(--accent-tint);
  color: var(--accent-deep);
  font-weight: 600;
}
.vg-nav__item.is-active .vg-nav__ic {
  color: var(--accent);
}
.vg-nav__spacer {
  flex: 1;
}
.vg-nav__foot {
  padding: var(--sp-3) var(--sp-3) 0;
  border-top: 1px solid var(--hair);
  margin-top: var(--sp-3);
}
.vg-nav__ethic {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ── 메인 콘텐츠 ── */
.vg-main {
  min-width: 0; /* 그리드 자식 overflow 방지 */
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  padding: var(--sp-7) var(--sp-6) var(--sp-8);
}
.vg-main__inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.vg-main--wide .vg-main__inner {
  max-width: min(1480px, 100%);
}
/* 풀-블리드(세션 화면 등): 패딩/최대폭 없이 셸만 */
.vg-main--bleed {
  padding: 0;
}
.vg-main--bleed .vg-main__inner {
  max-width: none;
}

/* ── 반응형 ── */
@media (max-width: 1024px) {
  .vg-shell__body {
    /* 그리드·구분선이 함께 축소 폭을 따른다 */
    --nav-cur: var(--nav-w-collapsed);
  }
  .vg-shell__body--bare {
    grid-template-columns: 1fr;
  }
  .vg-nav {
    padding: var(--sp-4) var(--sp-2);
  }
  .vg-nav__label,
  .vg-nav__item span:not(.vg-nav__ic),
  .vg-nav__ethic {
    display: none;
  }
  .vg-nav__item {
    justify-content: center;
    padding: 11px;
  }
}
@media (max-width: 720px) {
  html {
    scroll-padding-top: calc(var(--topbar-h) + var(--sp-2));
    scroll-padding-bottom: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom) + var(--sp-4));
  }
  .vg-shell {
    height: 100dvh;
  }
  .vg-shell__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    background-image: none; /* 네비가 하단바로 전환 — 세로 구분선 제거 */
  }
  .vg-shell__body--bare {
    display: flex;
  }
  .vg-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    z-index: 40;
    height: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom));
    padding: 6px max(10px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
    border-right: 0;
    border-top: 1px solid var(--hair);
    border-bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
    background: var(--bg-surface);
    box-shadow: var(--shadow-island);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
  .vg-nav__label,
  .vg-nav__spacer,
  .vg-nav__foot {
    display: none;
  }
  .vg-nav__item {
    flex: 1 1 0;
    min-width: 0;
    max-width: 96px;
    height: 48px;
    min-height: 48px;
    padding: 3px 2px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border-radius: var(--radius);
    text-align: center;
    transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) var(--ease-out);
  }
  .vg-nav__item:active {
    transform: scale(0.93);
  }
  .vg-nav__item .vg-nav__ic {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .vg-nav__item .vg-nav__ic svg {
    width: 20px;
    height: 20px;
  }
  .vg-nav__item .vg-nav__txt,
  .vg-nav__item span:not(.vg-nav__ic) {
    display: block;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .vg-topbar__role {
    display: none;
  }
  .vg-topbar__uname {
    display: none;
  }
  .vg-topbar {
    height: 50px;
    min-height: 50px;
    padding: 0 var(--sp-3);
    gap: var(--sp-2);
  }
  .vg-topbar__brand {
    min-height: 44px;
    gap: 8px;
  }
  .vg-topbar__mark {
    width: 24px;
    height: 24px;
  }
  .vg-topbar__wm {
    font-size: 16px;
  }
  .vg-topbar__user {
    display: none;
  }
  .vg-topbar__actions {
    flex: 0 0 auto;
    gap: 4px;
  }
  .vg-topbar__switch {
    height: 38px;
    padding: 2px;
  }
  .vg-topbar__switch-link {
    min-height: 34px;
    padding: 0 8px;
    font-size: 11.5px;
  }
  .vg-topbar__switch-link span {
    display: inline;
  }
  .vg-iconbtn {
    width: 40px;
    height: 40px;
  }
  .vg-main {
    padding: var(--sp-4) var(--sp-4) calc(var(--bottom-bar-h) + env(safe-area-inset-bottom) + var(--sp-6));
  }
  .vg-main--bleed {
    padding: 0;
  }
}

/* ── Botanical glass canvas ── */
body[data-role] .vg-shell--botanical .vg-shell__body:not(.vg-shell__body--bare) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
body[data-role] .vg-shell--botanical .vg-nav,
body[data-role] .vg-shell--botanical .vg-main {
  position: relative;
  z-index: 1;
}
.vg-shell--botanical .vg-main:not(.vg-main--bleed),
.vg-shell--learner-dashboard .vg-main:not(.vg-main--bleed) {
  background: transparent;
}
/* 학습 대시보드 전용 규칙은 콘텐츠 패딩만 소유한다. 앱 크롬은 아래 SSOT를 그대로 쓴다. */
.vg-shell--learner-dashboard .vg-main:not(.vg-main--bleed) {
  padding: 36px 32px 72px;
  background: transparent;
}
/* ── App chrome authority (파일 최종 우선순위) ── */
.vg-shell--botanical {
  --topbar-h: 64px;
  --nav-w: 230px;
}
body[data-role] .vg-shell--botanical .vg-topbar {
  height: var(--topbar-h);
  background: color-mix(in srgb, var(--bg-surface) 76%, transparent);
  border-bottom-color: var(--botanical-hair);
  color: var(--text-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
[data-theme="dark"] body[data-role] .vg-shell--botanical .vg-topbar {
  background: color-mix(in srgb, var(--bg-app) 76%, transparent);
}
body[data-role] .vg-shell--botanical .vg-topbar__wm,
body[data-role] .vg-shell--botanical .vg-topbar__role,
body[data-role] .vg-shell--botanical .vg-topbar__uname,
body[data-role] .vg-shell--botanical .vg-iconbtn {
  color: var(--text-strong);
}
body[data-role] .vg-shell--botanical .vg-topbar__wm {
  font-size: 19px;
  font-weight: 760;
}
body[data-role] .vg-shell--botanical .vg-topbar__role {
  border-left-color: var(--botanical-hair);
  font-size: 14px;
  letter-spacing: 0;
}
body[data-role] .vg-shell--botanical .vg-topbar__user {
  background: var(--bg-surface-2);
}
body[data-role] .vg-shell--botanical .vg-topbar__avatar {
  background: var(--accent-tint);
  color: var(--accent-deep);
}
body[data-role] .vg-shell--botanical .vg-shell__body:not(.vg-shell__body--bare) {
  --nav-cur: var(--nav-w);
  /* 흰 종이처럼 보이던 불투명 면을 낮추고, 카드가 떠 보이는 옅은 세이지 캔버스로 정리한다. */
  background-color: color-mix(in srgb, var(--glass-canvas) 94%, var(--accent));
  background-image:
    linear-gradient(var(--botanical-hair), var(--botanical-hair)),
    radial-gradient(circle at 68% 18%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34rem),
    radial-gradient(circle at 42% 72%, color-mix(in srgb, var(--botanical-gold) 13%, transparent), transparent 42rem),
    var(--asset-botanical-corner),
    radial-gradient(circle at 76% 10%, var(--botanical-glow), transparent 30rem);
  background-repeat: no-repeat;
  background-position: var(--nav-cur) 0, center top, center bottom, right top, center top;
  background-size: 1px 100%, 100% 52rem, 100% 62rem, min(66vw, 980px) auto, 100% 46rem;
}
body[data-role] .vg-shell--botanical .vg-nav {
  top: auto;
  padding: var(--sp-5) var(--sp-3);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 34%, transparent), color-mix(in srgb, var(--bg-app) 54%, transparent)),
    var(--asset-botanical-sidebar) center bottom / auto 72% no-repeat,
    color-mix(in srgb, var(--bg-surface) 62%, transparent);
  color: var(--text-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
body[data-role] .vg-shell--botanical .vg-nav__label,
body[data-role] .vg-shell--botanical .vg-nav__ethic {
  color: var(--text-muted);
}
body[data-role] .vg-shell--botanical .vg-nav__item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 50px;
  padding: 10px 12px;
  flex-direction: row;
  justify-content: flex-start;
  gap: 11px;
  border: 1px solid transparent;
  color: var(--text-body);
  font-size: 15px;
  text-align: left;
}
body[data-role] .vg-shell--botanical .vg-nav__item:hover {
  border-color: color-mix(in srgb, var(--botanical-gold) 18%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-surface) 86%, var(--bg-tint));
  color: var(--text-strong);
}
body[data-role] .vg-shell--botanical .vg-nav__item.is-active {
  padding-right: 58px;
  border-color: color-mix(in srgb, var(--botanical-gold) 34%, var(--border-subtle));
  background: linear-gradient(
    112deg,
    color-mix(in srgb, var(--bg-surface) 94%, var(--botanical-gold)),
    color-mix(in srgb, var(--bg-surface-2) 78%, transparent)
  );
  color: var(--text-strong);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-surface) 84%, transparent);
}
body[data-role] .vg-shell--botanical .vg-nav__item.is-active .vg-nav__ic {
  color: var(--accent);
}
body[data-role] .vg-shell--botanical .vg-nav__item.is-active::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  width: 58px;
  height: 100%;
  background: var(--asset-botanical-leaf) right -20px bottom -42px / 76px 96px no-repeat;
  opacity: 0.28;
  pointer-events: none;
  display: block;
}
body[data-role] .vg-shell--botanical .vg-nav__foot {
  border-top-color: var(--botanical-hair);
}

@media (max-width: 1024px) {
  body[data-role] .vg-shell--botanical .vg-shell__body:not(.vg-shell__body--bare) {
    --nav-cur: var(--nav-w-collapsed);
  }
  body[data-role] .vg-shell--botanical .vg-nav {
    padding: var(--sp-4) var(--sp-2);
    background-image: none;
  }
  body[data-role] .vg-shell--botanical .vg-nav__item,
  body[data-role] .vg-shell--botanical .vg-nav__item.is-active {
    min-height: 46px;
    justify-content: center;
    padding: 11px;
  }
  body[data-role] .vg-shell--botanical .vg-nav__item.is-active::after {
    display: none;
  }
}

@media (max-width: 720px) {
  body[data-role] .vg-shell--botanical .vg-shell__body:not(.vg-shell__body--bare) {
    display: flex;
    flex-direction: column;
    background-image:
      radial-gradient(circle at 74% 12%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 22rem),
      radial-gradient(circle at 18% 82%, color-mix(in srgb, var(--botanical-gold) 14%, transparent), transparent 28rem),
      var(--asset-botanical-corner);
    background-repeat: no-repeat;
    background-position: right top, left bottom, right -140px bottom -80px;
    background-size: 100% 34rem, 100% 38rem, 430px auto;
  }
  body[data-role] .vg-shell--botanical .vg-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    z-index: 40;
    height: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom));
    padding: 6px max(10px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
    border-top: 1px solid var(--botanical-hair);
    border-bottom: 0;
    border-right: 0;
    border-left: 0;
    background: color-mix(in srgb, var(--bg-surface) 86%, transparent);
    box-shadow: var(--shadow-island);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  body[data-role] .vg-shell--botanical .vg-nav__item,
  body[data-role] .vg-shell--botanical .vg-nav__item.is-active {
    flex: 1 1 0;
    min-width: 0;
    max-width: 96px;
    height: 48px;
    min-height: 48px;
    padding: 3px 2px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border-radius: var(--radius);
    text-align: center;
    border: 1px solid transparent;
  }
  body[data-role] .vg-shell--botanical .vg-nav__item.is-active {
    padding-right: 2px;
    background: linear-gradient(
      112deg,
      color-mix(in srgb, var(--bg-surface) 92%, var(--botanical-gold)),
      color-mix(in srgb, var(--bg-surface-2) 80%, transparent)
    );
    border-color: color-mix(in srgb, var(--botanical-gold) 34%, var(--border-subtle));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-surface) 84%, transparent);
  }
  body[data-role] .vg-shell--botanical .vg-nav__item.is-active::after {
    display: none;
  }
  body[data-role] .vg-shell--botanical .vg-nav__item .vg-nav__ic svg {
    width: 20px;
    height: 20px;
  }
  body[data-role] .vg-shell--botanical .vg-nav__item .vg-nav__txt,
  body[data-role] .vg-shell--botanical .vg-nav__item span:not(.vg-nav__ic) {
    display: block;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-role="learner"] .vg-shell--botanical .vg-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    overflow-x: visible;
  }
  body[data-role="learner"] .vg-shell--botanical .vg-nav__item,
  body[data-role="learner"] .vg-shell--botanical .vg-nav__item.is-active {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 48px;
    padding: 3px 2px;
  }
}