/* 스팟 menu.v3.css: the phone menu (button in the header + full-screen <dialog>). Shared by every page, home included.
   Self-contained (fallback values in every var()). Dark home: add class "mnav--dark" to the dialog.
   Content is top-aligned so 앱 받기 is always on the first screen, whatever the viewport height. */
.hdr__mbtn{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;padding:0;border:0;border-radius:12px;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.hdr__mbtn svg,.mnav__x svg{display:block;width:20px;height:20px;overflow:visible}
.hdr__mbtn:active,.mnav__x:active{opacity:.55}
@media (min-width:768px){.hdr__mbtn{display:none}}

.mnav{
  --mn-bg:#F5F5F7;--mn-ink:#0D0D0D;--mn-ink2:#5F5F64;--mn-line:rgba(13,13,13,.09);--mn-accent:#D6322A;--mn-btn:#0D0D0D;--mn-btn-ink:#fff;
  position:fixed;inset:0;z-index:100;box-sizing:border-box;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;
  padding:env(safe-area-inset-top) max(20px,env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  border:0;background:var(--mn-bg);color:var(--mn-ink);font-family:var(--font,"Pretendard Variable",-apple-system,system-ui,sans-serif);
  overflow-y:auto;overscroll-behavior:contain;opacity:0;
  transition:opacity .24s cubic-bezier(.23,1,.32,1),overlay .24s allow-discrete,display .24s allow-discrete;
}
.mnav[open]{display:block;opacity:1}
@starting-style{.mnav[open]{opacity:0}}
.mnav::backdrop{background:transparent}
.mnav--dark{--mn-bg:#0A0A0B;--mn-ink:#F5F5F7;--mn-ink2:#A1A1A6;--mn-line:rgba(245,245,247,.14);--mn-btn:#F5F5F7;--mn-btn-ink:#0A0A0B}
html:has(.mnav[open]){overflow:hidden}

.mnav__bar{display:flex;align-items:center;justify-content:space-between;height:60px}
.mnav__home{display:flex;align-items:center;height:44px;margin-left:-6px;padding:0 6px;border-radius:10px;color:var(--mn-ink)}
.mnav__logo{display:block;width:64px;height:22px;overflow:visible}
.mnav__heart{color:var(--mn-accent)}
.mnav__x{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-right:-18px;padding:0;border:0;border-radius:12px;background:none;color:var(--mn-ink);cursor:pointer;touch-action:manipulation}

/* links: big, calm, one hairline between */
.mnav__nav{margin-top:28px}
.mnav__nav ul{margin:0;padding:0;list-style:none}
.mnav__nav li+li{border-top:1px solid var(--mn-line)}
.mnav__a{display:flex;align-items:center;gap:12px;min-height:68px;font-size:30px;font-weight:720;line-height:1.2;letter-spacing:-.028em;color:var(--mn-ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
.mnav__a[aria-current]::after{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--mn-accent)}
.mnav__a:active{opacity:.55}

/* footer area right under the links: the pill, the note, two quiet links */
.mnav__foot{margin-top:40px}
.mnav__dl{display:flex;align-items:center;justify-content:center;width:100%;height:54px;padding:0 22px;border:0;border-radius:999px;background:var(--mn-btn);color:var(--mn-btn-ink);font:650 17px/1 var(--font,"Pretendard Variable",-apple-system,system-ui,sans-serif);letter-spacing:-.01em;cursor:pointer;touch-action:manipulation;transition:transform .1s cubic-bezier(.23,1,.32,1)}
.mnav__dl:active{transform:scale(.98)}
.mnav__soon{display:flex;align-items:center;gap:12px;margin:16px 0 0;font-size:15px;line-height:1.55;color:var(--mn-ink2)}
.mnav__soon[hidden]{display:none}
.mnav__soon img{flex:none;width:40px;height:40px;border-radius:22.5%}
.mnav__q{display:flex;flex-wrap:wrap;gap:0 20px;margin:20px 0 0}
.mnav__q a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:450;color:var(--mn-ink2);text-decoration:none}

/* entrance: rows rise in one after another (opening only) */
.mnav__nav li,.mnav__foot{transition:opacity .34s ease,transform .42s cubic-bezier(.23,1,.32,1)}
@starting-style{.mnav[open] .mnav__nav li,.mnav[open] .mnav__foot{opacity:0;transform:translateY(10px)}}
.mnav[open] .mnav__nav li:nth-child(2){transition-delay:.05s}
.mnav[open] .mnav__foot{transition-delay:.1s}

.mnav :focus-visible{outline:2px solid var(--mn-ink);outline-offset:3px;border-radius:8px}
.mnav__dl:focus-visible{outline-offset:3px;border-radius:999px}
@media (hover:hover) and (pointer:fine){.mnav__a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}.mnav__q a:hover{color:var(--mn-ink)}}
@media (prefers-reduced-motion:reduce){
  .mnav__nav li,.mnav__foot{transition:none}
  @starting-style{.mnav[open] .mnav__nav li,.mnav[open] .mnav__foot{opacity:1;transform:none}}
  .mnav__dl:active{transform:none}
}
@media (min-width:768px){.mnav{display:none!important}}
@media print{.mnav,.hdr__mbtn{display:none}}