/* 두루미 놀이터 공용 상단 탭바(홈 · 힐러두루미 · 야시장 · 운명남녀) — 모든 구역 페이지가 이 파일 하나와 같은 마크업을 써요
   마크업(복사해서 쓰세요 — 현재 페이지 탭에만 aria-current="page"):
   <nav class="dsn" aria-label="두루미 놀이터 구역">
     <a href="/" aria-current="page"><i aria-hidden="true">🏠</i><span>놀이터</span></a>
     <a href="/healer/#home"><i aria-hidden="true">🌙</i><span>힐러</span></a>
     <a href="/night-market/"><i aria-hidden="true">🏮</i><span>야시장</span></a>
     <a href="/couple/#home"><i aria-hidden="true">💞</i><span>운명남녀</span></a>
   </nav>
   (탭 이름 전체는 각 a 의 title 에: 두루미 놀이터 · 힐러두루미 · 야시장 · 운명남녀 — 줄이 좁아서 화면에는 짧은 이름만 써요)
   규칙
   · 높이 = var(--dsn-h) (기본 48px, 노치 위쪽 안전 영역은 따로 더해져요). 페이지에 sticky/fixed 헤더가 있으면 top 을 var(--dsn-h) 에 안전 영역만큼 더해 내려요: top:calc(var(--dsn-h) + env(safe-area-inset-top,0px))
   · z-index 60: 페이지 안 sticky 헤더(보통 4~20)보다 위, 모달·시트(≥100)보다 아래
   · 390px 에서 4칸이 한 줄(아이콘 + 짧은 이름, 칸마다 44px 이상), 320px 까지 글자 잘림 없음
   · 다크 페이지에서도 읽히게 prefers-color-scheme 과 [data-dsn="dark"](짙은 페이지 강제) 둘 다 지원 */
:root{--dsn-h:48px}
.dsn{position:sticky;top:0;z-index:60;box-sizing:border-box;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;height:calc(var(--dsn-h) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);margin:0;background:rgba(255,248,239,.97);border-bottom:2px solid #2b2336;-webkit-backdrop-filter:saturate(1.2) blur(6px);backdrop-filter:saturate(1.2) blur(6px)}
.dsn a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:44px;min-height:44px;padding:2px 0 0;color:#6f625b;text-decoration:none;font-family:'Jua','Noto Sans KR',-apple-system,'Malgun Gothic',sans-serif;font-size:12.5px;line-height:1.1;letter-spacing:-.03em;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.dsn a i{font-style:normal;font-size:18px;line-height:1}
.dsn a[aria-current="page"]{color:#2b2336;font-weight:700}
.dsn a[aria-current="page"]::after{content:"";position:absolute;left:18%;right:18%;bottom:-2px;height:4px;border-radius:4px 4px 0 0;background:#ff7a59}
.dsn a:active{transform:scale(.96)}
.dsn a:focus-visible{outline:3px solid #7c5cff;outline-offset:-3px;border-radius:10px}
@media (max-width:340px){.dsn a{font-size:11.5px;letter-spacing:-.05em}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dsn{background:rgba(29,24,34,.97);border-bottom-color:#40364a}:root:not([data-theme="light"]) .dsn a{color:#c2b6ad}:root:not([data-theme="light"]) .dsn a[aria-current="page"]{color:#f3ece6}}
.dsn[data-dsn="dark"]{background:rgba(20,16,34,.97);border-bottom-color:#4a3f7a}.dsn[data-dsn="dark"] a{color:#bdb3dd}.dsn[data-dsn="dark"] a[aria-current="page"]{color:#fff}
@media (prefers-reduced-motion:reduce){.dsn a:active{transform:none}}
@media print{.dsn{display:none}}