/* =====================================================================
    POP 팩 — 밝은 원색 스타일  (html[data-pack="pop"])

    ★ 왜 이 파일이 따로 있나
      "사이버펑크가 어두워서 숫자가 안 보인다" 는 피드백이 나왔습니다.
      이건 취향이 아니라 **게임을 못 하게 만드는 문제**라서 무료로 넣습니다.

    ★ 색만 뒤집으면 안 됩니다 (실제로 겪는 함정)
      사이버펑크의 연출은 전부 '어두운 바탕에 빛나는 것' 입니다.
      밝은 바탕에서 box-shadow 발광은 **아예 안 보입니다.**
      그래서 여기서는 역할을 바꿔 칩니다.

        어두운 팩            →  밝은 팩(POP)
        네온 발광             →  두꺼운 어두운 테두리 + 아래로 떨어지는 그림자
        밝은 글씨/어두운 타일  →  어두운 글씨/흰 타일
        은은한 반투명 패널     →  불투명 흰 카드 + 검은 선

    색 자체(--neon 등)는 공통.js 의 THEMES[].lt 가 넣어 줍니다.
    이 파일은 **모양**만 담당합니다.
   ===================================================================== */

html[data-pack="pop"] {
  --panel:   rgba(255,255,255,.92);
  --panel-2: rgba(255,255,255,.98);
  --line:    rgba(20,20,30,.22);
  --ink:     #16181F;
  --dim:     #5A6070;
  --hot:     #E5484D;
  --bad:     #E5484D;
}

/* ── 바탕은 여기서 건드리지 않습니다 ★ ─────────────────────────
   전에 여기에

     html[data-pack="pop"] .screen { background-image: linear-gradient(...) }

   를 넣었다가 **배경 10종이 전부 안 보였습니다.**
   `body[data-bd="..."] .screen` 과 선택자 우선순위가 같은데(0,2,1)
   팝.css 가 나중에 읽히므로 이쪽이 이겨서 무늬를 통째로 덮었습니다.

   바탕색은 이미 --bg / --bg-2 로 밝게 들어와 있고,
   무늬 색도 --neon-rgb 를 따라 어두워지므로 그냥 두면 알아서 맞습니다. */

/* ── 타일 : 이 팩의 얼굴입니다 ────────────────────────────────────
   흰 바탕 + 두꺼운 어두운 테두리 + 아래 그림자.
   안쪽 그림자(inset)는 밝은 타일을 탁하게 만들어서 없앱니다. */
html[data-pack="pop"] .tile {
  border-width: 2.5px;
  border-radius: 12px;
  font-weight: 900;
  box-shadow: 0 3px 0 rgba(20,20,30,.28);
}
html[data-pack="pop"] .tile:active { transform: translateY(2px) scale(.97); box-shadow: 0 1px 0 rgba(20,20,30,.28); }
html[data-pack="pop"] .grid.n6 .tile,
html[data-pack="pop"] .grid.n7 .tile { border-width: 2px; border-radius: 8px; }
html[data-pack="pop"] .tile.empty { opacity: .2; box-shadow: none; }

/* 다음에 눌러야 할 칸(FORESIGHT) — 발광 대신 색 채움 */
html[data-pack="pop"] .tile.fore-next { box-shadow: 0 0 0 3px var(--neon), 0 3px 0 rgba(20,20,30,.28); }

/* ── 카드·패널 : 반투명을 걷고 또렷한 흰 카드로 ──────────────── */
html[data-pack="pop"] .pad,
html[data-pack="pop"] .card,
html[data-pack="pop"] .shop-item,
html[data-pack="pop"] .pop-box {
  background: var(--panel);
  border-color: rgba(20,20,30,.20);
  box-shadow: 0 2px 0 rgba(20,20,30,.14);
  backdrop-filter: none;
}

/* ── 버튼 : 네온 테두리 → 꽉 찬 색 + 눌리는 느낌 ─────────────── */
html[data-pack="pop"] .btn-neon {
  background: var(--neon);
  color: #FFFFFF;
  border-color: rgba(20,20,30,.35);
  text-shadow: none;
  box-shadow: 0 3px 0 rgba(20,20,30,.30);
}
html[data-pack="pop"] .btn-neon:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(20,20,30,.30); }
html[data-pack="pop"] .btn-ghost {
  background: rgba(255,255,255,.9);
  color: var(--ink);
  border-color: rgba(20,20,30,.28);
}
html[data-pack="pop"] .seg-btn { color: var(--dim); }
html[data-pack="pop"] .seg-btn.active {
  background: var(--neon); color: #FFFFFF; border-color: rgba(20,20,30,.3);
}

/* ── 글자 : 밝은 바탕에서 네온 글자 그림자는 번지기만 합니다 ──── */
html[data-pack="pop"] .hero-title,
html[data-pack="pop"] .topbar-title,
html[data-pack="pop"] .big-time,
html[data-pack="pop"] .sec-h { text-shadow: none; }

/* ── 연출 : 밝은 바탕에서 안 보이는 것들을 살립니다 ────────────
   fx-flash 는 흰 번쩍임이라 흰 타일 위에서 안 보입니다 → 어둡게 뒤집습니다. */
html[data-pack="pop"] .fx-flash { mix-blend-mode: multiply; }
html[data-pack="pop"] .fx-ring,
html[data-pack="pop"] .fx-nova { filter: saturate(1.4) brightness(.82); }
html[data-pack="pop"] .spark,
html[data-pack="pop"] .shard { filter: brightness(.75) saturate(1.5); }

/* 오발 — 화면 가장자리 발광 대신 또렷한 빨간 테두리 */
html[data-pack="pop"] #screen-game.miss-shock::after {
  box-shadow: inset 0 0 0 5px rgba(229,72,77,.85);
}

/* (배경 무늬는 .screen 의 background-image 로 그립니다 — ::before 를 쓰지 않습니다.
    전에 여기 ::before 규칙이 있었지만 아무 일도 하지 않았습니다.) */

/* 상자에서 방금 얻은 칸 — 발광 대신 굵은 테두리 */
html[data-pack="pop"] .shop-item.just-won { animation: justWonPop 2.4s ease-out; }
@keyframes justWonPop {
  0%, 100% { box-shadow: 0 2px 0 rgba(20,20,30,.14); }
  8%, 24%, 40% { box-shadow: 0 0 0 4px var(--neon), 0 2px 0 rgba(20,20,30,.14); }
  16%, 32%, 48% { box-shadow: 0 0 0 1px var(--neon), 0 2px 0 rgba(20,20,30,.14); }
  70% { box-shadow: 0 0 0 3px var(--neon), 0 2px 0 rgba(20,20,30,.14); }
}

/* ── 큰 글씨의 발광 걷어내기 ──────────────────────────────────────
   홈의 기록 숫자와 START 글자는 네온 발광을 쓰는데,
   밝은 바탕에서는 번져서 **오히려 흐려집니다.** 색은 --me / --neon-soft 가
   이미 어둡게 들어오므로(공통.js ink), 여기서는 그림자만 없앱니다. */
html[data-pack="pop"] .hero-time { text-shadow: none; }
html[data-pack="pop"] .engage-txt { text-shadow: none; }
html[data-pack="pop"] .engage {
  background: var(--panel);
  border-color: rgba(20,20,30,.22);
  box-shadow: 0 3px 0 rgba(20,20,30,.18);
}
html[data-pack="pop"] .engage:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(20,20,30,.18); }
html[data-pack="pop"] .tier-badge { box-shadow: none; }
/* 존 카드도 또렷하게 */
html[data-pack="pop"] .zone {
  background: var(--panel); border-color: rgba(20,20,30,.20);
  box-shadow: 0 2px 0 rgba(20,20,30,.12);
}
html[data-pack="pop"] .zone.on { border-color: var(--neon); border-width: 2px; }

/* ── 상단 바 ─────────────────────────────────────────────────────
   ★ 여기가 POP 에서 제일 안 보이던 곳입니다.
     .topbar 가 **어두운 그러데이션**(rgba(6,8,15,.94))인데
     POP 에서는 글자색(--ink)도 어두워서 어두운 바에 어두운 글씨가 됩니다.
     칩 배경도 rgba(255,255,255,.04) 라 밝은 바탕에서는 없는 것과 같습니다.
     → 바를 밝게 깔고, 칩은 **불투명 흰색 + 진한 테두리**로 바꿉니다. */
html[data-pack="pop"] .topbar {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.78));
  border-bottom: 1.5px solid rgba(20,20,30,.22);
}
html[data-pack="pop"] .chip,
html[data-pack="pop"] .back-btn {
  background: #FFFFFF;
  border: 1.5px solid rgba(20,20,30,.30);
  color: var(--ink);
  box-shadow: 0 2px 0 rgba(20,20,30,.16);
}
html[data-pack="pop"] .chip:active,
html[data-pack="pop"] .back-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(20,20,30,.16); }

/* 크레딧 — 밝은 원색 바탕에서 주황빛은 2.3:1 밖에 안 나옵니다. 진한 색으로. */
html[data-pack="pop"] { --hot: #8C1D18; }
html[data-pack="pop"] .chip.credits {
  color: var(--hot); border-color: rgba(140,29,24,.45);
}

/* 진행 막대 바탕 — 흰 반투명이라 밝은 바탕에서 안 보입니다 */
html[data-pack="pop"] .pbar { background: rgba(20,20,30,.16); }
html[data-pack="pop"] .pbar-fill { box-shadow: none; }

/* 게임 화면 상단의 존 이름·타이머 */
html[data-pack="pop"] .zone-tag { color: var(--ink); border-color: rgba(20,20,30,.28); background: #FFFFFF; }
html[data-pack="pop"] .hud-timer { color: var(--ink); text-shadow: none; }

/* 아래 메뉴 글자 (대결/상점/랭킹 밑의 작은 글씨) */
html[data-pack="pop"] .menu-btn em { color: #4A5060; }

/* ── 게임 상단 NEXT / LEFT ────────────────────────────────────────
   ★ 처음에 .hud 를 흰 카드 목록에 넣었는데 잘못이었습니다.
     .hud 는 padding 이 0 이고 justify-content:space-between 이라,
     카드로 만들면 **글자가 양 끝에 붙고 가운데가 텅 빈 상자**가 됩니다.
     "두 칸이 따로 노는" 느낌의 원인이었습니다.

     사이버 팩에서는 원래 배경 없는 줄입니다. POP 도 똑같이 두되,
     밝은 바탕에서 글자만 확실히 읽히게 합니다. */
html[data-pack="pop"] .hud {
  background: none; border: 0; box-shadow: none;
}
html[data-pack="pop"] .hlabel { color: #4A5060; }
html[data-pack="pop"] .hnext { color: var(--ink); text-shadow: none; }
html[data-pack="pop"] .hleft { color: #3E4453; }

/* ── 상점에서 '고른 것' 표시 ──────────────────────────────────────
   ★ 위쪽에서 .shop-item 에 테두리·그림자를 새로 준 규칙이
     기본 CSS 의 .shop-item.sel 보다 **선택자 우선순위가 높아서**
     고른 칸의 네온 테두리를 덮어버렸습니다.
     밝은 팩에서도 무엇을 골랐는지 보이게 여기서 다시 세게 줍니다. */
html[data-pack="pop"] .shop-item.sel {
  border: 2.5px solid var(--neon);
  box-shadow: 0 3px 0 rgba(20,20,30,.22);
}
html[data-pack="pop"] .shop-item.boxonly { border-style: dashed; border-color: rgba(140,29,24,.5); }
html[data-pack="pop"] .shop-item.seasonal { border-color: rgba(200,90,0,.55); }
html[data-pack="pop"] .shop-item.locked { opacity: .78; }

/* 태그 칩 — 어두운 팩 기준 색이라 밝은 바탕에서 안 읽힙니다 */
html[data-pack="pop"] .tag.on  { background: var(--neon); color: #FFFFFF; }
html[data-pack="pop"] .tag.own { background: rgba(20,20,30,.10); color: #3E4453; }
html[data-pack="pop"] .tag.buy { background: rgba(20,20,30,.06); color: var(--ink); }
html[data-pack="pop"] .tag.box { background: rgba(140,29,24,.12); color: var(--hot); }

/* 존 카드에서 고른 것 */
html[data-pack="pop"] .zone.sel { border: 2.5px solid var(--neon); }


/* ---------------------------------------------------------------------
    토스트 — 밝은 팩에서 안 보이던 것 (2026-08-24 제보)

    .toast 는 배경이 rgba(6,10,20,.95) 로 **박혀 있습니다.**
    어두운 팩에서는 맞지만 POP 에서는 글씨(--ink #16181F)까지 어두워
    검은 바탕에 검은 글씨가 됩니다.

    이 파일의 규칙대로 **불투명 흰 카드 + 검은 선 + 떨어지는 그림자**로 바꿉니다.
   --------------------------------------------------------------------- */
html[data-pack="pop"] .toast {
  background: #FFFFFF;
  color: var(--ink);
  border: 2px solid rgba(20,20,30,.28);
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: 0 3px 0 rgba(20,20,30,.16), 0 10px 24px rgba(20,20,30,.14);
}

/*  ── 밝은 화면(POP)에서 공지가 안 보이던 것 (2026-09-03) ───────────────
    ★ 무슨 일이었나
      공지 색을 **어두운 배경만 보고** 정했습니다. 연한 형광 글씨라
      POP 처럼 밝은 바탕에서는 대비가 1.1 밖에 안 나옵니다
      (읽히려면 4.5 는 넘어야 합니다). 제보대로 **아예 안 보였습니다.**
        .banner.warn      1.09
        .banner.good      1.25
        .update-bar       1.25   ← 새 판 알림. 이게 제보된 것입니다
        .update-bar.must  1.09
      info 만 멀쩡했던 건 그것만 변수(--neon-soft)를 써서
      POP 이 이미 바꿔주고 있었기 때문입니다.

    ★ 여기서는 변수를 안 쓰고 값을 박습니다.
      공지는 못 읽으면 없는 것과 같아서, 테마 색보다 '읽힌다' 가 먼저입니다.
      POP 은 테두리를 굵게 쓰는 디자인이라 2px 로 맞췄습니다.               */
html[data-pack="pop"] .banner      { border-width: 2px; }
html[data-pack="pop"] .banner.info { border-color: #0B7A8C; background: #E6FBFF; color: #06333D; }
html[data-pack="pop"] .banner.warn { border-color: #A96F00; background: #FFF4DA; color: #5A3B00; }
html[data-pack="pop"] .banner.good { border-color: #2C7D2C; background: #E9FAE5; color: #1B4E1B; }

html[data-pack="pop"] .update-bar {
  border-width: 2px; border-color: #2C7D2C; background: #E9FAE5; color: #123A12;
}
html[data-pack="pop"] .update-bar.must { border-color: #A96F00; background: #FFF4DA; color: #4A3000; }
html[data-pack="pop"] .update-bar .ub-note      { opacity: 1; color: #3E5A3E; }
html[data-pack="pop"] .update-bar.must .ub-note { color: #6B4A00; }
html[data-pack="pop"] .update-bar .ub-x         { opacity: .75; }
html[data-pack="pop"] .update-bar .ub-go        { box-shadow: 0 2px 0 rgba(20,20,30,.22); }

/*  ★ 이름이 가려졌다는 띠 — 흰 카드 위에 --hot(#E5484D) 이라 대비가 3.9 였습니다.
    "자세히" 는 눌러야 하는 단추라 흐릿하면 안 됩니다. 조금 더 진하게.  */
html[data-pack="pop"] .home-notice .hn-ico,
html[data-pack="pop"] .home-notice .hn-go { color: #B3252A; }