/* 새하루 작업실 두 방(하루끝작업실 / · 바이브코딩 집짓기 /buildclub/)의 공통 헤더와 푸터
   색은 --sh-fg / --sh-bg 두 개만 방마다 바꿔 끼운다.
   치수는 workroom 헤더(12px 16px, 14px 알약, 1px 25% 테두리)에 맞췄다.
   방마다 다른 것(위치·색·방 고유 소품)은 이 파일이 아니라 각 방의 CSS에 둔다
   (하루끝작업실 style.css의 "머리:", 집짓기 buildclub/desk.css). */
.sh-bar {
  --sh-fg: #2f2b2c;
  --sh-bg: rgba(255, 255, 255, .86);
  --sh-line: color-mix(in srgb, var(--sh-fg) 25%, transparent);
  position: absolute; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; pointer-events: none;
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  font-size: 14px; font-weight: 500; color: var(--sh-fg);
}
.sh-bar.is-dark { --sh-fg: #efe7dd; --sh-bg: rgba(29, 24, 23, .7); }
.sh-bar > * { pointer-events: auto; }
.sh-left, .sh-right { display: flex; align-items: center; gap: 8px; }

/* 새하루의 집으로 돌아가기: 늘 맨 왼쪽 */
.sh-home {
  display: inline-flex; align-items: center; gap: 6px; height: 34px;
  padding: 0 12px 0 6px; border-radius: 999px; border: 1px solid var(--sh-line);
  background: var(--sh-bg); color: inherit; text-decoration: none;
}
.sh-home img { width: 22px; height: 22px; object-fit: contain; }
.sh-home .ph { width: 18px; height: 18px; display: block; }
.sh-home:has(.ph) { padding: 0 13px 0 11px; gap: 6px; }
.sh-home .arrow { opacity: .55; margin-right: -2px; }
.sh-home:hover { border-color: var(--sh-fg); }

/* 형제 사이트 전환 */
.sh-sites {
  display: inline-flex; height: 34px; padding: 3px; border-radius: 999px;
  border: 1px solid var(--sh-line); background: var(--sh-bg);
}
.sh-sites a { display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; color: inherit; text-decoration: none; opacity: .7; }
.sh-sites a:hover { opacity: 1; }
.sh-sites a[aria-current="page"] { background: var(--sh-fg); color: var(--sh-bg); opacity: 1; }
.sh-bar.is-dark .sh-sites a[aria-current="page"] { color: #1d1817; }

/* 사이트별 도구 + 로그인: 늘 맨 오른쪽 */
.sh-pill {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--sh-line); background: var(--sh-bg);
  color: inherit; text-decoration: none; font: inherit; cursor: pointer;
}
.sh-pill:hover { border-color: var(--sh-fg); }
/* 마이페이지: 글자 없이 사람 아이콘만, 새하루의 집 버튼처럼 동그랗게 */
.sh-pill.is-icon, .sh-bar .sh-pill.is-icon { width: 34px; padding: 0; justify-content: center; }
.sh-pill.is-icon .ph { width: 18px; height: 18px; display: block; }
.sh-pill.is-icon[aria-current="page"] { border-color: var(--sh-fg); }

.sh-bar a, .sh-bar button { white-space: nowrap; }
@media (max-width: 560px) {
  .sh-bar { padding: 10px 10px; gap: 6px; }
  .sh-left, .sh-right { gap: 5px; }
  .sh-pill { padding: 0 10px; }
  .sh-home .arrow { display: none; }
  .sh-home .label { display: none; }
  .sh-home, .sh-home:has(.ph) { padding: 0 8px; justify-content: center; min-width: 34px; }
  .sh-sites a { padding: 0 10px; }
}

/* 가운데 탭 배치: 왼쪽 새하루의 집 · 가운데 사이트 탭 · 오른쪽 도구와 로그인 */
.sh-bar.is-centered { display: grid; grid-template-columns: 1fr auto 1fr; }
.is-centered .sh-left { justify-self: start; }
.is-centered .sh-sites { justify-self: center; }
.is-centered .sh-right { justify-self: end; }
@media (max-width: 680px) {
  /* 휴대폰: 윗줄 = 집·도구, 아랫줄 가운데 = 탭 (이름을 줄이지 않는다) */
  .sh-bar.is-centered { grid-template-columns: 1fr auto; grid-template-areas: "l r" "m m"; row-gap: 8px; }
  .is-centered .sh-left { grid-area: l; }
  .is-centered .sh-right { grid-area: r; }
  .is-centered .sh-sites { grid-area: m; }
}

/* 아이콘만 있는 새하루의 집 버튼은 동그랗게 */
.sh-home:has(.ph):not(:has(.label)) { width: 34px; padding: 0; justify-content: center; }

/* ══ 메뉴형 헤더: 왼쪽 = 집 + 사이트 메뉴, 가운데 = 내가 가진 것(티켓·수강권), 오른쪽 = 도구 + 로그인 ══ */
.sh-bar.is-menu { display: grid; grid-template-columns: 1fr auto 1fr; }
.is-menu .sh-left { justify-self: start; gap: 12px; }
.is-menu .sh-center { justify-self: center; }
.is-menu .sh-right { justify-self: end; }
.sh-menu { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.sh-menu a { color: inherit; text-decoration: none; opacity: .55; }
.sh-menu a:hover { opacity: .85; }
.sh-menu a[aria-current="page"] { opacity: 1; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.sh-menu .dot { opacity: .35; }
.sh-menu-m { display: none; position: relative; }
.sh-menu-m summary, .sh-ticket summary { list-style: none; cursor: pointer; }
.sh-menu-m summary::-webkit-details-marker, .sh-ticket summary::-webkit-details-marker { display: none; }
.sh-menu-m summary { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--sh-line); background: var(--sh-bg); font-size: 14px; }
.sh-menu-m summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .6; }
.sh-menu-pop, .sh-ticket-pop { position: absolute; top: calc(100% + 6px); min-width: 180px; padding: 6px; border-radius: 14px; border: 1px solid var(--sh-line); background: var(--sh-bg); box-shadow: 0 14px 30px -14px rgba(0,0,0,.45); backdrop-filter: blur(8px); }
.sh-menu-pop { left: 0; display: grid; }
.sh-menu-pop a { padding: 8px 10px; border-radius: 9px; color: inherit; text-decoration: none; opacity: .7; }
.sh-menu-pop a[aria-current="page"] { opacity: 1; background: color-mix(in srgb, var(--sh-fg) 10%, transparent); }

/* 가운데 표: 티켓 / 수강권 */
.sh-ticket { position: relative; }
.sh-ticket[hidden] { display: none; }
.sh-ticket summary { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 6px 0 12px; border-radius: 999px; border: 1px solid var(--sh-line); background: var(--sh-bg); font-size: 14px; }
.sh-ticket summary svg { width: 17px; height: 17px; }
.sh-ticket summary b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--sh-fg); color: var(--sh-bg); font-size: 12px; font-weight: 500; }
.sh-bar.is-dark .sh-ticket summary b { color: #1d1817; }
.sh-ticket-pop { left: 50%; transform: translateX(-50%); min-width: 230px; }
.sh-pop-h { margin: 4px 8px 6px; font-size: 12px; opacity: .6; }
.sh-ticket-pop a { display: grid; gap: 1px; padding: 9px 10px; border-radius: 9px; color: inherit; text-decoration: none; }
.sh-ticket-pop a:hover { background: color-mix(in srgb, var(--sh-fg) 8%, transparent); }
.sh-ticket-pop small { font-size: 12px; opacity: .65; }

@media (max-width: 760px) {
  .sh-bar.is-menu { grid-template-columns: auto 1fr auto; gap: 6px; }
  .is-menu .sh-left { gap: 6px; }
  .is-menu .sh-menu { display: none; }
  .is-menu .sh-menu-m { display: block; }
  .is-menu .sh-center { justify-self: center; }
  .is-menu .sh-wide { display: none; }
  .sh-ticket summary span { display: none; }
}

/* 지금 사이트: 밑줄 대신 연한 바탕 칩 */
.sh-menu { gap: 4px; }
.sh-menu .dot { display: none; }
.sh-menu a { padding: 6px 11px; border-radius: 999px; }
.sh-menu a[aria-current="page"] { text-decoration: none; background: var(--sh-bg); box-shadow: inset 0 0 0 1px var(--sh-line); }

/* 가운데: 열려 있는 수업 바로가기 */
.sh-class { gap: 7px; padding: 0 14px 0 11px; }
.sh-class[hidden] { display: none; }
.sh-class svg { width: 17px; height: 17px; }
.sh-class .sh-class-go { opacity: .6; }
.sh-class:hover .sh-class-go { opacity: 1; }
@media (max-width: 760px) {
  .sh-class .sh-class-name { display: none; }
  .sh-class { padding: 0 12px 0 10px; }
}

/* 사이트 메뉴는 화면 크기와 상관없이 "지금 사이트 ▾" 버튼 하나 */
.is-menu .sh-menu { display: none; }
.is-menu .sh-menu-m { display: block; }

/* ══ 공통 푸터 (작업실과 같음): 한 줄, 작고 옅게 ══ */
.sh-foot { --sh-fg: #2f2b2c; position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px;
  padding: 0 12px 10px; font-family: "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; font-size: 11px; font-weight: 500;
  color: color-mix(in srgb, var(--sh-fg) 38%, transparent); }
.sh-foot a { color: inherit; text-decoration: none; }
.sh-foot a:hover { color: var(--sh-fg); }
.sh-foot.is-dark { --sh-fg: #efe7dd; }