@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* ===== 공통 상단바 (2026-09-28) — 따로 만든 페이지(오늘의 퍼즐·운세)도 사이트 게임 화면과 같은 상단바를 쓴다.
   index.html의 nav(게임 화면: body.ingame)와 같은 높이·버튼·글꼴. 구조는 /assets/topbar.js가 만든다.
   페이지 CSS가 #backHome·#muteBtn·#langSel을 id로 꾸며 두었으므로 여기서는 .mtop을 붙여 이긴다. ===== */
.mtop{position:sticky;top:0;z-index:100;align-self:stretch;width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:.5rem;height:54px;
  padding:0 max(0px,calc((100% - 860px)/2));background:#fff;border-bottom:1px solid #e4e9f2;box-shadow:0 1px 3px rgba(24,34,53,.05);
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;letter-spacing:-.01em}
.mtop #backHome{position:static;flex-shrink:0;display:inline-flex;align-items:center;gap:.15rem;margin:0 0 0 .9rem;padding:.5rem .85rem;min-height:40px;box-sizing:border-box;
  font-family:inherit;font-size:.92rem;font-weight:800;line-height:1;color:#cf2338;background:#ffe9ee;border:1.5px solid #f4a9bb;border-radius:11px;
  box-shadow:0 2px 6px rgba(224,71,90,.18);text-decoration:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.mtop #backHome:hover{background:#ffdbe3}
.mtop #backHome:active{transform:translateY(1px);opacity:1}
.mtop-x{font-size:1.05rem;font-weight:900;line-height:1}
.mtop-logo{display:flex;align-items:center;gap:.35rem;min-width:0;flex:0 1 auto;overflow:hidden;padding-left:.2rem;color:#3367ff;text-decoration:none;white-space:nowrap;line-height:1}
.mtop-logo img{width:32px;height:32px;flex-shrink:0;display:block}
.mtop-brand{font-size:1.15rem;font-weight:800}
.mtop-name{font-size:1.15rem;font-weight:800;margin-left:.4rem;overflow:hidden;text-overflow:ellipsis}
.mtop-right{display:flex;align-items:center;gap:.5rem;flex-shrink:0;margin-right:.9rem}
.mtop #muteBtn{position:static;background:none;border:1px solid #e4e9f2;border-radius:8px;font-size:.9rem;padding:.25rem .4rem;cursor:pointer;line-height:1;color:inherit;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.mtop #langSel{position:static!important;background:#f5f7fb!important;border:1px solid #e4e9f2!important;border-radius:8px!important;padding:.35rem .5rem!important;font-size:.8rem!important;color:#1f2a44!important;font-family:inherit;cursor:pointer;outline:none;backdrop-filter:none;-webkit-backdrop-filter:none}
/* 바 아래 제목은 버튼 자리를 비워 둘 필요가 없어졌다 */
.mtop ~ header{padding-top:10px}
.mtop ~ header .h1row{margin-top:6px}
.mtop ~ header h1{margin-top:6px}
@media (max-width:640px){ .mtop{height:58px} }
/* 좁은 폰: 사이트 게임 화면처럼 로고·Mallow를 감추고 페이지 이름만 */
@media (max-width:480px){ .mtop-logo img,.mtop-brand{display:none} .mtop-name{margin-left:0} .mtop #backHome{margin-left:.55rem} .mtop-right{margin-right:.55rem} .mtop #langSel{max-width:76px} }