/* ═══════════════════════════════════════════════════════════
   떠 있는 유리 네비게이션 + 리퀴드 글래스 버튼 — 첫 화면(index.html)과 하위 페이지 공용 (2026-10-11 분리)
   ★첫 화면에서는 styles.css 뒤에 불러온다(옛 기본 규칙을 이 파일이 덮는 순서 유지).
   ★하위 페이지에서는 page.css 뒤에 불러온다. 동작은 nav.js.
   ═══════════════════════════════════════════════════════════ */
/* ═══════════ 떠 있는 유리 네비게이션 + 리퀴드 글래스 버튼 ═══════════
   원칙 — Apple 처럼 '덜어낸' 유리: 반사광·테두리 빛은 은은하게, 튕김 없이, 가장 강한 색은 실제 스토어 버튼에만.
   ★유리(backdrop-filter)는 막대 자신이 아니라 '.nav-glass' 층에 건다.
     막대 자신에 걸면 그 안의 모바일 메뉴 유리가 막대 안쪽만 비춰서
     뒤 글자가 흐려지지 않고 그대로 비친다(브라우저의 백드롭 루트 규칙).
   ★같은 이유로 유리층의 조상에는 opacity·filter·mask 를 걸지 말 것. */
:root{--glide:cubic-bezier(.2,.8,.2,1);--settle:cubic-bezier(.32,.72,0,1)}

/* ── 네비게이션 막대 ── 스크롤하면 폭·높이가 줄고 유리가 짙어진다 */
.topbar{position:fixed;inset:16px 0 auto;z-index:30;pointer-events:none;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;transition:top .5s var(--glide)}
.topbar.is-scrolled{top:10px}
.nav-in{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:20px;width:calc(100% - 64px);max-width:1184px;height:54px;margin-inline:auto;padding:0 11px 0 18px;border-radius:999px;pointer-events:auto;transition:max-width .55s var(--glide),width .55s var(--glide),height .5s var(--glide)}
.topbar.is-scrolled .nav-in{max-width:1040px;height:50px}
.nav-glass{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;background-color:rgba(18,20,24,.4);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 24px -12px rgba(255,255,255,.08),0 16px 44px -24px rgba(0,0,0,.55);transition:background-color .45s var(--glide),box-shadow .45s var(--glide)}
.topbar.is-scrolled .nav-glass{background-color:rgba(14,15,18,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 24px -12px rgba(255,255,255,.06),0 18px 48px -22px rgba(0,0,0,.7)}
/* 왼쪽 위에서 들어오는 빛(스펙큘러) — 거의 안 보일 만큼만 */
.nav-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 90% at 8% 0%,rgba(255,255,255,.07),transparent 52%)}
/* 가장자리 테두리 — 빛 받는 모서리(왼쪽 위·오른쪽 아래)만 살짝 밝다 */
.nav-glass::after,.glass::after,.nav-links::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;background:var(--rim,linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.08) 30%,rgba(255,255,255,.06) 70%,rgba(255,255,255,.14)));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

.nav-in .brand,.nav-in .nav-cta,.menu-toggle{position:relative;z-index:1}
.nav-in .brand{font-size:15px;flex-shrink:0}.nav-in .brand img{width:28px;height:28px}
/* 정식 명칭 '더 루키: 고교야구선수 키우기' — 부제도 이름과 같은 크기로, 스크롤·모바일에서도 항상 보인다 */
.nav-in .brand>span{display:block;font-size:inherit;margin-left:8px;letter-spacing:-.02em;white-space:nowrap}
.nav-links::before{display:none}

/* ── 가운데 링크 ── 현재 구역(과 마우스를 올린 링크)으로 알약이 미끄러진다 */
.nav-links{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:2px;width:max-content;font-size:13px}
.nav-links a{position:relative;z-index:1;padding:7px 16px;border-radius:999px;color:#d6d9de;transition:color .25s}
.nav-links a:hover,.nav-links a[aria-current="location"]{color:#fff}
.nav-indicator{position:absolute;left:0;top:0;bottom:0;width:var(--w,0);transform:translateX(var(--x,0));border-radius:999px;pointer-events:none;background:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);opacity:0;transition:transform .45s var(--settle),width .45s var(--settle),opacity .25s var(--glide)}
.nav-indicator.is-on{opacity:1}.nav-indicator.no-slide{transition:opacity .25s var(--glide)}

/* ── 리퀴드 글래스 버튼 ──
   투명 유리(기본) / 색 유리(--tint, 주요 행동). 손가락·마우스가 닿은 자리가 은은하게 밝아진다. */
.glass{
 --fill:rgba(255,255,255,.07);--glow:rgba(255,255,255,.16);--sheen:rgba(255,255,255,.07);
 --rim:linear-gradient(135deg,rgba(255,255,255,.32),rgba(255,255,255,.08) 32%,rgba(255,255,255,.05) 64%,rgba(255,255,255,.18));
 --drop:0 10px 26px -16px rgba(0,0,0,.6);
 position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
 border:0;border-radius:999px;color:#fff;cursor:pointer;text-decoration:none;
 background-color:var(--fill);
 -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 18px -10px rgba(255,255,255,.12),var(--drop);
 transition:transform .3s var(--settle),box-shadow .3s var(--glide),background-color .3s var(--glide),color .25s;
}
.glass::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(70% 130% at var(--shine-x,22%) var(--shine-y,-20%),var(--glow),transparent 62%),linear-gradient(180deg,var(--sheen),transparent 50%);opacity:.8;transition:opacity .3s var(--glide)}
.glass:active{transform:scale(.98);transition-duration:.12s,.3s,.3s,.25s;--glow:rgba(255,255,255,.26)}
.glass:active::before{opacity:1}
/* 색 유리 = 페이지에서 가장 강한 버튼. 실제로 스토어로 나가는 버튼에만 쓴다. */
.glass--tint{color:#132100;font-weight:700;--fill:rgba(200,255,51,.92);--glow:rgba(255,255,255,.22);--sheen:rgba(255,255,255,.14);--rim:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.14) 34%,rgba(255,255,255,.06) 66%,rgba(255,255,255,.3));--drop:0 10px 26px -16px rgba(0,0,0,.6)}
.glass--tint:active{--glow:rgba(255,255,255,.5)}
@media(hover:hover) and (pointer:fine){
 .glass:hover{--fill:rgba(255,255,255,.11);--glow:rgba(255,255,255,.2)}
 .glass:hover::before{opacity:1}
 .glass--tint:hover{--fill:rgba(214,255,112,.96);--glow:rgba(255,255,255,.2)}
}

/* ── 네비 안 버튼 — 작고 조용하게(유리 위에 유리를 또 얹지 않는다) ── */
.nav-in .nav-cta{margin-left:auto;min-height:32px;padding:0 14px;gap:0;font-size:12px;font-weight:600;white-space:nowrap;color:#eef0f3;--fill:rgba(255,255,255,.1);--glow:rgba(255,255,255,.1);--sheen:transparent;--drop:0 0 #0000;-webkit-backdrop-filter:none;backdrop-filter:none}
@media(hover:hover) and (pointer:fine){.nav-in .nav-cta:hover{--fill:rgba(255,255,255,.17)}}

/* ── 모바일 메뉴 버튼(아이콘만) ── */
.menu-toggle{display:none;width:44px;height:44px;flex:none;border:0;border-radius:999px;background:transparent;color:#fff;cursor:pointer;transition:background-color .25s}
.menu-toggle:active{background-color:rgba(255,255,255,.1)}
.menu-toggle span{position:absolute;left:14px;right:14px;height:1.6px;border-radius:2px;background:currentColor;transition:transform .35s var(--settle),top .3s var(--settle)}
.menu-toggle span:first-child{top:17px}.menu-toggle span:last-child{top:25px}
.menu-toggle[aria-expanded="true"] span{top:21px}
.menu-toggle[aria-expanded="true"] span:first-child{transform:rotate(45deg)}.menu-toggle[aria-expanded="true"] span:last-child{transform:rotate(-45deg)}
.nav-scrim{display:none}
@media(max-width:1000px){.nav-in{width:calc(100% - 40px)}.nav-links a{padding-inline:13px}}
/* 태블릿 폭 — 부제까지 보이면 가운데 메뉴와 겹친다 → 메뉴를 버튼 옆으로 흘려 놓는다 */
@media(max-width:860px){.nav-links{position:relative;left:auto;top:auto;transform:none;margin-left:auto}.nav-in .nav-cta{margin-left:0}}
@media(max-width:700px){
 .topbar{top:10px}.topbar.is-scrolled{top:8px}
 .nav-in,.topbar.is-scrolled .nav-in{height:54px}
 .nav-in{width:calc(100% - 24px);padding:0 5px 0 12px;gap:6px}
 .nav-in .brand{font-size:13px;gap:8px}.nav-in .brand img{width:28px;height:28px}
 /* ★보이는 크기는 32px 그대로 두고, 위아래 투명 테두리로 누르는 영역만 44px 로 넓힌다 */
 .nav-in .nav-cta{min-height:44px;padding:0 12px;border-style:solid;border-color:transparent;border-width:6px 0;background-clip:padding-box;font-size:12px}
 .menu-toggle{display:block}
 .nav-indicator{display:none}
 /* 펼침 메뉴 — 막대 아래로 떨어지며 커진다. 닫힐 때도 같은 길로 되돌아간다. */
 .nav-links{position:absolute;margin-left:0;top:calc(100% + 8px);left:0;right:0;width:auto;transform:translateY(-8px) scale(.97);transform-origin:50% 0;flex-direction:column;align-items:stretch;gap:2px;padding:8px;border-radius:26px;font-size:16px;background-color:rgba(20,22,26,.84);-webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 60px -20px rgba(0,0,0,.85);opacity:0;visibility:hidden;transition:opacity .2s var(--glide),transform .3s var(--glide),visibility 0s linear .3s}
 .nav-links::before{display:block;--rim:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.06) 30%,rgba(255,255,255,.04) 70%,rgba(255,255,255,.1))}
 .topbar.menu-open .nav-links{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--glide),transform .4s var(--settle),visibility 0s}
 .nav-links a{padding:14px 18px;border-radius:18px;color:#f1f2f4;opacity:0;transform:translateY(-4px);transition:opacity .2s var(--glide),transform .3s var(--glide),background-color .2s}
 .topbar.menu-open .nav-links a{opacity:1;transform:none}
 .topbar.menu-open .nav-links a:nth-of-type(1){transition-delay:.04s}.topbar.menu-open .nav-links a:nth-of-type(2){transition-delay:.07s}.topbar.menu-open .nav-links a:nth-of-type(3){transition-delay:.1s}
 .nav-links a:active,.nav-links a[aria-current="location"]{background-color:rgba(255,255,255,.08)}
 html:not(.js) .nav-links{display:none}
 .nav-scrim{display:block;position:fixed;inset:0;z-index:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity .3s var(--glide),visibility 0s linear .3s}
 .topbar.menu-open .nav-scrim{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s var(--glide),visibility 0s}
}
@media(max-width:360px){.nav-in .nav-cta{padding-inline:10px}.nav-in .brand{font-size:12px}}
@media(max-width:350px){.nav-in{padding-left:9px;gap:4px}.nav-in .brand{gap:6px}.nav-in .brand img{width:24px;height:24px}.nav-in .brand>span{margin-left:5px}.nav-in .nav-cta{padding-inline:8px;font-size:11px}}
@media(max-width:335px){.nav-in .brand{font-size:11.5px}.nav-in .nav-cta{padding-inline:7px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .nav-glass{background-color:rgba(22,24,28,.94)}.topbar.is-scrolled .nav-glass{background-color:#16181c}
 .glass{--fill:rgba(255,255,255,.1)}.glass--tint{--fill:var(--lime)}
 @media(max-width:700px){.nav-links{background-color:#1a1c21}}
}
/* 기기 설정 '투명도 줄이기'를 켠 사람 — 유리 대신 불투명 배경(이 설정을 읽는 브라우저에서만 동작) */
@media(prefers-reduced-transparency:reduce){
 .nav-glass,.glass,.nav-links{-webkit-backdrop-filter:none;backdrop-filter:none}
 .nav-glass,.topbar.is-scrolled .nav-glass{background-color:#17191d}
 .glass{--fill:#24262b}
 .glass--tint{--fill:var(--lime)}
 .nav-in .nav-cta{--fill:#2b2d33}
 @media(max-width:700px){.nav-links{background-color:#1a1c21}}
}
@media(prefers-reduced-motion:reduce){.nav-glass::before,.glass::before{transition:none}.glass:active{transform:none}}