/* 아래 메뉴 다섯 칸(놀이터·역사카드·골든벨·탐험광장·내 예약)의 공통 상단 바 (2026-10-05 사장님 「상단이 너무 다르다 → 이대로」)
   마크업: <header class="… ssam-bar"> 안에 .sb-back(뒤로) · .sb-brand(로고 + .sb-title 제목) · 오른쪽 .sb-act(있을 때만).
   페이지마다 예전 상단 규칙(!important 포함)이 남아 있어 선택자를 일부러 두 번 겹쳐 세기를 올렸다. 이 파일은 각 페이지 CSS 뒤에 싣는다.
   역사카드가 게임랜드 패널 안(cards-embedded)일 때 상단을 숨기는 규칙은 display:none!important 라 그대로 이긴다 — 여기서는 display 에 !important 를 쓰지 않는다. */
html body .ssam-bar.ssam-bar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:flex-start;gap:10px;font-synthesis:weight;
  box-sizing:border-box;min-height:60px;width:100%;max-width:none;margin:0!important;
  padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left))!important;
  background:rgba(255,255,255,.94)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:0!important;border-bottom:1px solid #e7ebee!important;border-radius:0!important;box-shadow:none!important;
  font-family:Pretendard,"Noto Sans KR",system-ui,sans-serif;color:#18202f
}
html body .ssam-bar.ssam-bar .sb-back.sb-back{
  flex:none;width:44px;height:44px;min-width:44px;display:grid;place-items:center;padding:0;margin:0;
  border:0!important;border-radius:12px!important;background:#f1f3f2!important;box-shadow:none!important;
  color:#1f2a37;font-size:20px;line-height:1;cursor:pointer
}
html body .ssam-bar.ssam-bar .sb-back.sb-back svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html body .ssam-bar.ssam-bar .sb-back.sb-back:focus-visible,html body .ssam-bar.ssam-bar .sb-brand.sb-brand:focus-visible,html body .ssam-bar.ssam-bar .sb-act.sb-act:focus-visible{outline:3px solid #e8642c;outline-offset:2px}
html body .ssam-bar.ssam-bar .sb-brand.sb-brand{display:flex;flex-direction:row;align-items:center;gap:8px;flex-shrink:1;line-height:1.3;min-width:0;padding:0;margin:0;text-decoration:none;color:#18202f;background:none;border:0}
html body .ssam-bar.ssam-bar .sb-brand.sb-brand img{width:38px!important;height:38px!important;max-width:none;object-fit:contain;flex:none;margin:0}
html body .ssam-bar.ssam-bar .sb-title.sb-title{display:block;margin:0;padding:0;border:0;font-size:18px!important;font-weight:800!important;line-height:1.3;letter-spacing:-.02em;color:#18202f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .ssam-bar.ssam-bar .sb-act.sb-act{
  margin-left:auto;flex:none;min-height:40px;height:auto;padding:0 14px!important;display:inline-flex;align-items:center;gap:4px;
  border:1px solid #dfe5e8!important;border-radius:12px!important;background:#fff!important;box-shadow:none!important;
  color:#243042!important;font:inherit;font-size:14px!important;font-weight:700;line-height:1.2;white-space:nowrap;text-decoration:none;cursor:pointer;width:auto
}
/* 예전 상단의 빈 칸 늘이개(style="flex:1")는 .sb-act 의 margin-left:auto 가 대신한다 */
html body .ssam-bar.ssam-bar>div[style*="flex:1"]{display:none}
/* 놀이터: 장소 안(게임 목록)에서는 「경복궁 놀이터」 제목이 따로 붙으므로 허브 제목을 숨긴다 */
html body.gameland-tour-list .ssam-bar.ssam-bar .gameland-hub-title{display:none}
html body .ssam-bar.ssam-bar .gameland-topbar-title{font-size:17px;font-weight:800;color:#18202f}
/* 탐험광장: 「내 공간」은 접는 메뉴(details) — 요약줄이 단추 모양 */
html body .ssam-bar.ssam-bar details.sb-act.sb-act{padding:0!important;border:0!important;background:none!important;min-height:0}
html body .ssam-bar.ssam-bar details.sb-act.sb-act>summary{min-height:40px;padding:0 14px;display:inline-flex;align-items:center;border:1px solid #dfe5e8;border-radius:12px;background:#fff;color:#243042;font-size:14px;font-weight:700}
@media (max-width:360px){
  html body .ssam-bar.ssam-bar{gap:8px;padding-inline:max(12px,env(safe-area-inset-left))!important}
  html body .ssam-bar.ssam-bar .sb-title.sb-title{font-size:17px!important}
}
/* 놀이터 장소 안(제목 「경복궁 놀이터」 + 「장소 지도」 + 로그인)은 칸이 빠듯하다 — 오른쪽 단추만 조금 줄인다 */
html body.gameland-tour-list .ssam-bar.ssam-bar .sb-act.sb-act{padding:0 10px!important;font-size:13px!important}
/* 제목은 아래 메뉴(지금 칸이 주황)와 같은 말이라 눈에는 안 보이게 — 화면 읽기용으로만 남긴다 (10/5 사장님 「골든벨·역사카드 이런 말을 뺄까」).
   놀이터 장소 안의 「경복궁 놀이터」(.gameland-topbar-title)는 어느 장소인지 알려 주므로 그대로 보인다. */
html body .ssam-bar.ssam-bar .sb-title.sb-title{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* 오른쪽 접는 메뉴(탐험광장 「내 공간」)의 열림 표시 — 글자 「⌄」가 아래로 처져 「v」처럼 보였다(10/5 사장님 「화살표가 애매」). 선으로 그린 꺾쇠, 열리면 위로 */
html body .ssam-bar.ssam-bar details.sb-act.sb-act>summary{gap:8px;list-style:none;cursor:pointer}
html body .ssam-bar.ssam-bar details.sb-act.sb-act>summary::-webkit-details-marker{display:none}
html body .ssam-bar.ssam-bar details.sb-act.sb-act>summary::after{content:'';margin:0;width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
html body .ssam-bar.ssam-bar details.sb-act.sb-act[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
/* 상단 바가 스크롤해도 붙어 있게 (2026-10-05 사장님 「뒤로 가는 버튼이 있어야」 — 덕수궁 미션 목록을 내리면 바가 같이 올라가 사라졌다).
   감싸는 .app-shell 의 overflow-x:hidden 이 스크롤 상자를 만들어 sticky 가 그 안에서만 붙었다. clip 은 가로로 자르기만 하고 스크롤 상자를 안 만든다. */
@supports (overflow:clip){html body .app-shell:has(>.ssam-bar),html body:has(>.ssam-bar){overflow-x:clip}}