/* --pink 은 브랜드 primary(#F43F5E, 앱 src/index.css)와 일치시킨다 — 분홍은 이 한 가지(링크 포함, 디렉터 2026-10-20).
       예전 링크 전용 진한 로즈 --pink-ink(#e11d48)·#d61f4a 는 앱의 진한 핑크와 함께 폐지했다(밝고 신나는 핑크 우선).
       나머지도 앱 토큰과 같은 값(2026-11-10): --ink = on-surface · --muted = on-surface-variant · --bg = background ·
       --card = surface · --line = outline-variant. 예전엔 글자가 차가운 청회색(#1f2733·#5b6675), 바탕·선이 분홍빛(#fff7f8·#ffe1e7)이라
       정적 페이지에서 앱으로 넘어갈 때 색이 달라졌다. 앱 토큰을 바꾸면 이 줄과 HEAD 의 theme-color 도 같이 바꾼다. */
    :root { --pink:#f43f5e; --ink:#1c1718; --muted:#705c5f; --bg:#fdfcfc; --card:#fff; --line:#e8e3e4; }
    * { box-sizing:border-box; }
    * { font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,"Helvetica Neue","Segoe UI","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif; }
    body { margin:0; color:var(--ink); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
    a { color:var(--pink); text-decoration:none; }
    a:hover { text-decoration:underline; }
    header,main,footer { max-width:880px; margin:0 auto; padding:0 20px; }
    /* 🧭 헤더 = 로고 + 전역 내비게이션 바(2026-09-21, 애드센스 7차 반려 안내 answer/10015918 의
       "접근하기 쉬운 내비게이션 바" 요건). 예전엔 height:64px 고정에 로고 1개뿐이었다.
       flex-wrap: 로고 옆에 nav 가 들어가면 한 줄, 길면(라벨이 긴 언어·좁은 화면) 아래 줄로 내려간다. */
    header { display:flex; flex-wrap:wrap; align-items:center; gap:0 16px; min-height:64px; }
    .brand { font-weight:900; font-size:22px; color:var(--pink); letter-spacing:-.5px; }
    .brand-logo { display:inline-flex; align-items:center; height:64px; flex-shrink:0; }
    .brand-logo img { width:170px; height:auto; display:block; }
    /* 내비 링크는 알약. 모바일(<768px)은 로고 아래 한 줄로 **가로 스크롤**(줄바꿈 없음) — 8개 링크를
       세로로 쌓으면 첫 화면이 메뉴로 가득 차 본문이 밀린다. 좌우 -20px 는 header 의 여백(padding)까지
       스크롤 영역을 넓혀 알약이 화면 가장자리에서 잘리게(= 더 있다는 힌트). 데스크탑은 줄바꿈 허용.
       터치 타깃은 44px 높이(≥40px). 스크롤바는 숨긴다(iOS 처럼 스와이프 UI). */
    .site-nav { flex:1 1 100%; display:flex; align-items:center; gap:8px; overflow-x:auto; white-space:nowrap;
                -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 -20px; padding:0 20px 12px; }
    .site-nav::-webkit-scrollbar { display:none; }
    .site-nav a { flex:0 0 auto; display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:999px;
                  background:#fff; border:1px solid var(--line); color:var(--muted); font-size:14px; font-weight:700; line-height:1.25; }
    .site-nav a:hover { border-color:var(--pink); color:var(--pink); text-decoration:none; }
    /* 현재 페이지 링크는 채움색으로 강조(aria-current 가 스타일의 단일 출처 — 별도 클래스 없음). */
    .site-nav a[aria-current="page"] { background:var(--pink); border-color:var(--pink); color:#fff; }
    .site-nav a[aria-current="page"]:hover { color:#fff; opacity:.92; }
    @media (min-width:768px) {
      .site-nav { flex:1 1 auto; flex-wrap:wrap; overflow:visible; white-space:normal; margin:0; padding:8px 0; }
    }
    [dir="rtl"] .site-nav { direction:rtl; }
    .play { display:inline-flex; align-items:center; gap:8px; background:var(--pink); color:#fff; font-weight:800; padding:14px 26px; border-radius:16px; font-size:17px; box-shadow:0 6px 18px rgba(244,63,94,.25); }
    .play:hover { text-decoration:none; opacity:.92; }
    .cover { width:100%; max-width:460px; aspect-ratio:1; object-fit:cover; border-radius:24px; border:1px solid var(--line); display:block; margin:8px auto 20px; }
    /* 🎮 인페이지 플레이어 — 이 페이지에서 게임을 직접 할 수 있게 한다(도어웨이 페이지 신호 해소).
       게임 iframe 은 **항상 마크업에 존재**하고(크롤러가 게임을 볼 수 있어야 함), 그 위에
       커버 이미지 + 재생버튼을 덮어 둔다. 누르면 덮개만 걷힌다(2026-08-10 구조 수정). */
    .gp { position:relative; width:100%; max-width:560px; margin:8px auto 12px; height:min(74vh,700px); min-height:380px;
          border-radius:24px; overflow:hidden; border:1px solid var(--line); background:#0b0b0f; }
    .gp-cover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.55); z-index:1; }
    .gp-start { position:absolute; inset:0; width:100%; height:100%; display:flex; flex-direction:column;
                align-items:center; justify-content:center; gap:10px; border:0; background:transparent; cursor:pointer; padding:0; z-index:2; }
    .gp-badge { display:inline-flex; align-items:center; gap:8px; background:var(--pink); color:#fff; font-weight:800;
                padding:14px 26px; border-radius:16px; font-size:17px; box-shadow:0 6px 18px rgba(0,0,0,.35); }
    .gp-hint { color:#fff; font-size:12px; font-weight:700; opacity:.85; text-shadow:0 1px 3px rgba(0,0,0,.6); }
    .gp iframe, .gp .gp-frame { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:#000; }
    .applink { display:inline-block; font-size:14px; font-weight:700; color:var(--pink); }
    /* 🔥 친구 도전장 띠 — 주소에 ?vs=점수 가 있을 때만 스크립트가 만든다(크롤러·일반 방문엔 없음, 2026-10-20). */
    .vsband { max-width:560px; margin:8px auto 4px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px;
              background:#ffe4ea; border:1px solid rgba(244,63,94,.35); border-radius:18px; padding:12px 14px; }
    .vsband b { color:var(--pink); font-size:12px; font-weight:800; width:100%; }
    .vsband span { flex:1 1 180px; font-size:15px; font-weight:800; color:var(--ink, #1f1f1f); }
    .vsband .vsgo { background:var(--pink); color:#fff; font-weight:800; font-size:14px; padding:9px 16px; border-radius:12px; white-space:nowrap; }
    /* 꿀팁 목록 / 조작 그룹(터치·키보드 나란히, 좁은 화면은 세로) */
    .tips { margin:0; padding-left:2px; list-style:none; }
    .tips li { margin:6px 0; }
    .ctrl { display:grid; gap:10px; grid-template-columns:1fr; }
    @media (min-width:560px) { .ctrl { grid-template-columns:1fr 1fr; } }
    .ctrl-g { background:rgba(0,0,0,.035); border-radius:14px; padding:10px 14px; }
    .ctrl-h { font-weight:800; font-size:13px; margin-bottom:6px; }
    .ctrl-g ul { margin:0; padding-left:2px; list-style:none; }
    .ctrl-g li { font-size:13.5px; color:var(--muted); margin:4px 0; }
    /* 이동경로(breadcrumb) — 홈·컬렉션으로 돌아가는 실제 링크. */
    .crumb { font-size:12px; font-weight:700; color:var(--muted); margin:14px 0 2px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
    .crumb a { color:var(--pink); }
    .crumb span { color:var(--line); }
    .crumb span:last-child { color:var(--muted); }
    /* 게임 사양 카드: 라벨-값 2열. 좁은 화면에서는 자연스럽게 줄바꿈된다. */
    .facts { margin:0; }
    .facts > div { display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
    .facts > div:last-child { border-bottom:0; padding-bottom:0; }
    .facts dt { flex:0 0 132px; color:var(--muted); font-weight:700; font-size:14px; }
    .facts dd { margin:0; flex:1 1 180px; font-weight:600; font-size:14px; }
    .facts dd a { color:var(--pink); font-weight:700; }
    .facts dd i { font-style:normal; color:var(--line); margin:0 6px; }
    /* 개발기록(Dev Log) — 영어 게임 페이지 전용 타임라인. 앱 DevLogModal 과 같은 정보(버전·날짜·제목·변경 줄). */
    .devlog { list-style:none; margin:4px 0 0; padding:0; }
    .devlog > li { position:relative; padding:0 0 16px 20px; border-left:2px solid var(--line); margin-left:5px; }
    .devlog > li:last-child { border-left-color:transparent; padding-bottom:0; }
    .devlog > li::before { content:""; position:absolute; left:-7px; top:5px; width:12px; height:12px; border-radius:50%; background:var(--card); border:2px solid var(--pink); }
    .devlog .dl-head { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; font-size:13px; font-weight:800; color:var(--muted); }
    .devlog .dl-ver { color:var(--pink); }
    .devlog h3 { font-size:16px; font-weight:800; margin:2px 0 4px; }
    .devlog ul { margin:0; padding-left:18px; }
    .devlog ul li { font-size:15px; margin:2px 0; }
    .devlog-more summary { cursor:pointer; font-weight:800; color:var(--pink); margin:4px 0 12px; }
    h1 { font-size:34px; font-weight:900; margin:18px 0 6px; letter-spacing:0; }
    h2 { font-size:20px; font-weight:800; margin:28px 0 8px; }
    p { font-size:16px; margin:0; }
    .card { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:20px 22px; margin:16px 0; }
    .card p + p { margin-top:14px; }
    /* 게임 소개 본문 — 긴 글이라 줄 간격을 넉넉히(앱 상세와 동일한 1.75). 문단 간격은 위 p + p 규칙. */
    .card p.desc { line-height:1.75; }
    .card p.desc + p.desc { margin-top:18px; }
    /* 카드의 첫 요소(보통 h2)는 위쪽 여백 제거 — h2의 margin-top(28px)이 카드 padding 위에 더해져 상단이 휑해지는 것 방지 */
    .card > :first-child { margin-top:0; }
    .tags { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
    .tag { background:#fff; border:1px solid var(--line); color:var(--muted); font-size:13px; font-weight:700; padding:5px 12px; border-radius:999px; }
    /* 링크가 걸린 알약 태그 — 누를 수 있다는 걸 알 수 있게 테두리·글자색만 바뀐다(밑줄 없음). */
    a.tag:hover { border-color:var(--pink); color:var(--pink); text-decoration:none; }
    .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:14px; margin-top:8px; }
    .grid-2rows { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:8px; }
    @media (min-width:600px) {
      .grid-2rows { grid-template-columns:repeat(5,1fr); }
    }
    .gcard { display:block; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
    .gcard img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
    .gcard span { display:block; padding:8px 10px; font-weight:700; font-size:13px; color:var(--ink); }
    footer { color:var(--muted); font-size:13px; padding:30px 20px 54px; border-top:1px solid var(--line); margin-top:30px; }
    .footer-section { display:flex; flex-direction:column; gap:10px; }
    .footer-title { font-size:14px; font-weight:900; color:var(--ink); }
    .footer-langs, .footer-links { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; font-weight:800; }
    .footer-langs a, .footer-links a { color:var(--muted); }
    .footer-langs a.active { color:var(--pink); font-weight:900; }
    .footer-sep { width:1px; height:12px; background:var(--line); display:inline-block; }
    .footer-rule { height:1px; background:var(--line); margin:22px 0; }
    .biz-info { font-size:11px; color:var(--muted); opacity:.65; margin:16px 0 0; line-height:1.7; word-break:break-word; }
    .biz-info a { color:var(--muted); }
    .copyright { font-size:11px; color:var(--muted); opacity:.65; margin:4px 0 0; }
    .footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:14px 18px; flex-wrap:wrap; }
    .footer-social { display:flex; align-items:center; gap:16px; }
    .footer-social a { color:var(--muted); display:inline-flex; }
    .footer-social a:hover { color:var(--pink); text-decoration:none; }
    .footer-social svg { width:20px; height:20px; display:block; fill:currentColor; }
    [dir="rtl"] .footer-langs, [dir="rtl"] .footer-links { direction:rtl; }
    .plan { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:18px 22px; margin:14px 0; position:relative; }
    .plan.featured { border:2px solid var(--pink); }
    .plan .amount { font-size:30px; font-weight:900; color:var(--pink); }
    .plan .period { font-size:14px; color:var(--muted); font-weight:700; }
    .plan .was { color:var(--muted); text-decoration:line-through; font-weight:700; margin-right:8px; font-size:16px; }
    .badge { position:absolute; top:16px; right:18px; background:var(--pink); color:#fff; font-size:12px; font-weight:900; padding:4px 11px; border-radius:999px; }
    .benefits { margin:6px 0 0; padding-left:18px; }
    .benefits li { margin:6px 0; font-weight:600; }
    .statbar { display:flex; flex-wrap:wrap; gap:16px; margin:16px 0 4px; }
    .statbar .s { display:inline-flex; align-items:baseline; gap:6px; font-size:16px; font-weight:800; color:var(--ink); }
    .statbar .s b { color:var(--pink); font-weight:900; font-size:18px; }
    .statbar .s small { color:var(--muted); font-weight:700; font-size:13px; }
    .lb { list-style:none; margin:6px 0 0; padding:0; }
    .lb li { display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--line); font-weight:700; }
    .lb li:last-child { border-bottom:0; }
    .lb .rk { min-width:26px; text-align:center; color:var(--muted); font-weight:900; }
    .lb .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .lb .sc { color:var(--pink); font-weight:900; white-space:nowrap; }
    /* 📢 공지사항 목록 — 종류 배지 색은 앱 배너(NoticeBanner.tsx)의 토큰과 같은 값이다.
       (정적 페이지는 Tailwind 토큰을 못 쓰므로 md/DESIGN.md 의 실제 hex 를 적는다) */
    .notice-meta { display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
    .notice-kind { display:inline-block; font-size:12px; font-weight:900; padding:3px 10px; border-radius:999px; }
    .notice-kind.urgent { background:#fef2f2; color:#7f1d1d; }
    .notice-kind.update { background:#fff1f2; color:var(--pink); }
    .notice-kind.event  { background:#fef3c7; color:#78350f; }
    .notice-kind.ranking { background:#d1fae5; color:#064e3b; }  /* 랭킹 자동 공지 — secondary-container 잎 녹색 */
    .notice-date { color:var(--muted); font-size:13px; font-weight:700; }
    /* 디렉터가 본문에 넣은 줄바꿈을 그대로 살린다(대시보드에서 엔터로 문단을 나눌 수 있게). */
    .notice-body { white-space:pre-line; margin:0; }