/* ══════════════════════════════════════════════════════════════
   skin_game2.css — 캐주얼 게임 스킨 2부 : 로비·덱·도감·상점·팝업 (2026-10-04)
   Macho 「남은 화면도 같은 스킨으로 맞춰」
   skin_game.css(플레이·결과·하단탭) 와 같은 색 변수(--gs-*)를 쓴다.
   · 종이 배경 → 옅은 하늘색
   · 그림 액자 판 → 흰 둥근 판 + 아래 그림자
   · 회색/남색 그림 단추 → 둥근 볼록 단추 (선택 = 파랑)
   되돌리는 법 = index.html 의 이 파일 <link> 한 줄을 지운다
   ══════════════════════════════════════════════════════════════ */

/* ───────── 바탕 ───────── */
body{ background:#CFE9FF }
body .wrap{
  background-color:#D9EEFF;
  background-image:linear-gradient(180deg,#BFE2FF 0%,#DDF0FF 38%,#EAF5FF 100%);
}

/* ───────── 판 : 흰 둥근 카드 ───────── */
body .card, body .stn, body .mapcard, body .spot, body .shopcard, body .mislab, body .certbox,
body .sh-card, body .sh-wallet>div, body .wk-week, body .rl-week, body .cx-box, body .dk-bonus,
body .dk-card, body .tt-mbox, body .warn, body .k-panel, body .sh-res, body .restore{
  border:0; border-image:none; border-radius:18px; padding:12px 12px;
  background:#fff; background-image:none;
  box-shadow:0 4px 0 #A9C8EA, 0 0 0 2px #C9E0F7 inset;
}
body .card{ padding:12px 11px; margin-bottom:11px }
body .stn{ padding:9px 11px; margin-bottom:12px }
body .sh-wallet>div{ padding:8px 4px 8px }
body .sh-card{ padding:10px 12px }
body .warn, body .wk-week, body .sh-res{ background:#FFF6DC; box-shadow:0 4px 0 #E2C98A, 0 0 0 2px #F0DDA6 inset }
body .mislab{ padding:8px 12px }
body .cx-card, body .tt-mcard, body .sh-c, body .cd-bar, body .rs2-box{ background-image:none }
body .sh-c, body .cx-card{ background:#fff; border-color:#C9E0F7; border-radius:14px }

/* 진행 막대 */
body .cx-bar, body .wk-bar, body .prog{ height:14px; border:0; border-radius:999px; background:#C9DDF3; box-shadow:inset 0 2px 0 rgba(20,60,120,.15) }
body .prog i, body .cx-bar i, body .wk-bar i{ background:linear-gradient(180deg,var(--gs-yel1),var(--gs-yel2)); border-radius:999px }

/* 알약 */
body .pill{ background:#E6F1FC; color:#2A3F7A; border:0; border-radius:999px; padding:2px 10px }
body .pill.ok{ background:var(--gs-green2); color:#fff }
body .pill.ch{ background:var(--gs-yel2); color:#5A3A00 }

/* ───────── 단추·탭 ───────── */
body .btn, body .tab, body .bigbtn.sub, body .cx-sw button{
  border:0; border-image:none; border-radius:14px; min-height:44px; padding:9px 12px;
  background:linear-gradient(180deg,#FFFFFF,#DCE6F5); color:#2A3F7A; text-shadow:none; font-size:15px;
  box-shadow:0 4px 0 #9FB1D0, inset 0 2px 0 rgba(255,255,255,.9); filter:none;
}
body .btn:active, body .tab:active, body .bigbtn.sub:active, body .cx-sw button:active{ transform:translateY(3px) !important; box-shadow:0 1px 0 #9FB1D0 }
body .btn.on, body .tab.on, body .cx-sw button.on{
  background:linear-gradient(180deg,var(--gs-blue1),var(--gs-blue2)); color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.2);
  box-shadow:0 4px 0 var(--gs-blue-d), inset 0 2px 0 rgba(255,255,255,.45);
}
body .tab{ font-size:14px; padding:8px 6px }
body .bigbtn.sub{ font-size:17px; color:#2A3F7A }
body .cx-tab, body .cx-chip, body .dk-wc, body .chip{
  border:0; border-radius:999px; background:#fff; color:#2A3F7A; min-height:36px;
  box-shadow:0 3px 0 #A9C8EA, 0 0 0 2px #C9E0F7 inset;
}
body .cx-tab.on, body .cx-chip.on, body .chip.on{
  background:linear-gradient(180deg,var(--gs-blue1),var(--gs-blue2)); color:#fff;
  box-shadow:0 3px 0 var(--gs-blue-d), inset 0 2px 0 rgba(255,255,255,.45);
}
body .mailbtn{
  border:0; border-radius:50%; background:linear-gradient(180deg,#fff,#DCE6F5);
  box-shadow:0 3px 0 #0E2A66, inset 0 2px 0 rgba(255,255,255,.9);
}

/* ───────── 노선도 ───────── */
body .mapbox{ border:0; border-radius:18px; background:#fff; box-shadow:0 4px 0 #A9C8EA, 0 0 0 3px #C9E0F7 inset }
body .zoom button{
  border:0; border-radius:50%; width:44px; height:44px; background:linear-gradient(180deg,#fff,#DCE6F5); color:#2A3F7A;
  box-shadow:0 3px 0 #9FB1D0, inset 0 2px 0 rgba(255,255,255,.9);
}
body .mapcard .tr{ border:0; background:#E6F1FC; color:#2A3F7A; border-radius:999px }
body .hero{ border-radius:20px; box-shadow:0 5px 0 var(--gs-navy-d), 0 0 0 3px var(--gs-navy) }
body .hero .hgo{
  border-radius:16px; background:linear-gradient(180deg,var(--gs-green1),var(--gs-green2)); color:#fff;
  box-shadow:0 4px 0 var(--gs-green-d), inset 0 2px 0 rgba(255,255,255,.45); text-shadow:0 2px 0 rgba(0,0,0,.22);
}
body .hero .hgo:active{ box-shadow:0 1px 0 var(--gs-green-d) }
body .rail:before{ background:var(--gs-blue2) }

/* ───────── 팝업 ───────── */
body .certbox{
  border-radius:24px; padding:20px 16px 12px; background:var(--gs-cream); text-align:center;
  box-shadow:0 0 0 4px #fff, 0 0 0 8px var(--gs-navy), 0 12px 0 4px var(--gs-navy-d), 0 24px 40px rgba(0,0,0,.35);
}
body .certbox h3{ color:#2A3F7A; font-size:21px }
body .certbox .x{ color:#7A6A4A; min-height:44px }
body .toast{
  border:0; border-radius:999px; background:var(--gs-navy-d); color:#fff; padding:10px 18px;
  box-shadow:0 4px 0 rgba(0,0,0,.25), 0 0 0 2px rgba(255,255,255,.35) inset;
}

/* 글자색 — 종이 갈색 → 남색 계열 */
body h3{ color:#22366F }
body .note, body .sub{ color:#5E6F94 }

/* ───────── 2차 : 남은 조각 (2026-10-04) ───────── */
/* 지도/목록 전환 */
body .vtog{ border:0; background:#fff; box-shadow:0 3px 0 #A9C8EA, 0 0 0 2px #C9E0F7 inset; padding:3px }
body .vtog .vt{ color:#5E6F94; min-height:38px; min-width:44px }
body .vtog .vt.on{ background:linear-gradient(180deg,var(--gs-blue1),var(--gs-blue2)); color:#fff; box-shadow:0 2px 0 var(--gs-blue-d) }
/* 상점 안쪽 탭 */
body .sh-t{
  border:0; border-radius:14px; background:linear-gradient(180deg,#FFFFFF,#DCE6F5); color:#2A3F7A;
  font-family:var(--font-t); font-weight:400; font-size:16px;
  box-shadow:0 4px 0 #9FB1D0, inset 0 2px 0 rgba(255,255,255,.9);
}
body .sh-t.on{ background:linear-gradient(180deg,var(--gs-blue1),var(--gs-blue2)); color:#fff;
  box-shadow:0 4px 0 var(--gs-blue-d), inset 0 2px 0 rgba(255,255,255,.45); text-shadow:0 2px 0 rgba(0,0,0,.2) }
body .sh-t:active{ transform:translateY(3px); box-shadow:0 1px 0 #9FB1D0 }
/* 덱 칸 */
body .dk-slot.empty{ border:3px dashed #9CC2EC; background:#EAF5FF; color:#6FA3DC; border-radius:14px }
body .dk-slot.lock{ border:3px dashed #C4CFDD; background:#EEF2F7; border-radius:14px }
/* 도움말 창 */
body .qbox{
  border-radius:24px; background:var(--gs-cream); padding:18px 16px 14px;
  box-shadow:0 0 0 4px #fff, 0 0 0 8px var(--gs-navy), 0 12px 0 4px var(--gs-navy-d), 0 24px 40px rgba(0,0,0,.35);
}
body .qbox h4{ color:#2A3F7A; text-align:center; font-size:21px }
body .qbox .qrow{ border-top-color:#E8D9AE }
body .qbox .qrow b{ color:var(--gs-blue-d) }
body .qbox .qclose, body .qbox .qrow button{
  border:0; border-radius:16px; min-height:48px; font-family:var(--font-t); font-weight:400; font-size:18px;
  background:linear-gradient(180deg,var(--gs-green1),var(--gs-green2)); color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.22);
  box-shadow:0 4px 0 var(--gs-green-d), inset 0 2px 0 rgba(255,255,255,.45);
}
body .qbox .qrow button{ background:linear-gradient(180deg,var(--gs-blue1),var(--gs-blue2)); box-shadow:0 4px 0 var(--gs-blue-d), inset 0 2px 0 rgba(255,255,255,.45) }
body .qbox .qclose:active, body .qbox .qrow button:active{ transform:translateY(3px) }
/* 쪽지함 */
body .ml-box{ background:var(--gs-cream); border-radius:24px 24px 0 0; box-shadow:0 -6px 0 var(--gs-navy), 0 -10px 30px rgba(0,0,0,.25) }
body .ml-h{ color:#2A3F7A; font-family:var(--font-t); font-weight:400; font-size:20px }
body .ml-x{ width:40px; height:40px; min-width:40px; border-radius:50%; color:#fff; line-height:40px;
  background:linear-gradient(180deg,var(--gs-red1),var(--gs-red2)); box-shadow:0 3px 0 var(--gs-red-d), 0 0 0 3px #fff }
/* 첫 카드 만남 창 */
body .tt-mbox{
  border-radius:24px; background:var(--gs-cream); padding:20px 16px 16px;
  box-shadow:0 0 0 4px #fff, 0 0 0 8px var(--gs-navy), 0 12px 0 4px var(--gs-navy-d), 0 24px 40px rgba(0,0,0,.35);
}
body .tt-mbox .k-btn.tt-ok{
  background:linear-gradient(180deg,var(--gs-green1),var(--gs-green2)); color:#fff; font-size:19px; width:100%;
  box-shadow:0 4px 0 var(--gs-green-d), inset 0 2px 0 rgba(255,255,255,.45); text-shadow:0 2px 0 rgba(0,0,0,.22);
}
/* 알림 띠가 하단 탭을 덮지 않게 */
body .toast{ bottom:calc(96px + env(safe-area-inset-bottom,0px)) }
/* 도감 묶음 전환 (계열별/노선별) */
body .cx-ax{
  border:0; border-radius:14px; min-height:44px; background:linear-gradient(180deg,#FFFFFF,#DCE6F5); color:#2A3F7A;
  font-family:var(--font-t); font-weight:400; font-size:16px;
  box-shadow:0 4px 0 #9FB1D0, inset 0 2px 0 rgba(255,255,255,.9);
}
body .cx-ax.on{ background:linear-gradient(180deg,var(--gs-blue1),var(--gs-blue2)); color:#fff;
  box-shadow:0 4px 0 var(--gs-blue-d), inset 0 2px 0 rgba(255,255,255,.45); text-shadow:0 2px 0 rgba(0,0,0,.2) }
/* 도움말 안의 규칙 켜기 — 색을 코드가 직접 넣는다(켜짐 회색·꺼짐 파랑). 그림자만 맞춘다 */
body .qbox .qrow .qclose{ box-shadow:0 4px 0 rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.3) }

/* ───────── 3차 (2026-10-04) ───────── */
/* 카드 상세창 */
body .cp-box{
  border-radius:24px; background:var(--gs-cream); background-image:none;
  box-shadow:0 0 0 4px #fff, 0 0 0 8px var(--gs-navy), 0 12px 0 4px var(--gs-navy-d), 0 24px 40px rgba(0,0,0,.35);
}
body .cp-x{ width:40px; height:40px; min-width:40px; border-radius:50%; color:#fff;
  background:linear-gradient(180deg,var(--gs-red1),var(--gs-red2)); box-shadow:0 3px 0 var(--gs-red-d), 0 0 0 3px #fff }
body .cp-b{ border-radius:16px; min-height:48px; font-family:var(--font-t); font-weight:400; font-size:16px }
body .cp-full{ background:linear-gradient(180deg,#FFFFFF,#DCE6F5); color:#2A3F7A; box-shadow:0 4px 0 #9FB1D0, inset 0 2px 0 rgba(255,255,255,.9) }
body .cp-eq{ background:linear-gradient(180deg,var(--gs-green1),var(--gs-green2)); color:#fff;
  box-shadow:0 4px 0 var(--gs-green-d), inset 0 2px 0 rgba(255,255,255,.45); text-shadow:0 2px 0 rgba(0,0,0,.22) }
body .cp-eq.off{ background:#D5DBE6; color:#7A869C; box-shadow:0 4px 0 #B3BCCB; text-shadow:none }
body .cp-b:active{ transform:translateY(3px) }
/* 판 아래 카드 줄 — 종이색 띠를 걷는다. 카드가 없으면 자리도 안 차지한다 */
body.play .cd-bar{ background:transparent; background-image:none; border:0; box-shadow:none; padding:10px 4px 4px }
body.play .cd-bar:empty{ display:none }
/* 안내 말풍선 */
body .tt-tip{ background:var(--gs-navy-d); border-radius:999px; padding:10px 18px; font-family:var(--font-t); font-weight:400; font-size:16px;
  box-shadow:0 4px 0 rgba(0,0,0,.25), 0 0 0 2px rgba(255,255,255,.4) inset }
/* 도움말의 규칙 켜기 — 코드가 색을 직접 넣어 스킨이 안 먹는다. 꺼짐/켜짐 뜻은 글자가 말한다 */
body .qbox .qrow .qclose{ background:linear-gradient(180deg,var(--gs-blue1),var(--gs-blue2)) !important;
  box-shadow:0 4px 0 var(--gs-blue-d), inset 0 2px 0 rgba(255,255,255,.45) }

/* ───────── 고양이 버전 — 방해물 그림 (2026-10-04) : 부적·닻 대신 자물쇠·바위 ───────── */
/* 2026-10-13 봉인·붙박이는 그림(img/obst)으로 — 이모지 덮어쓰기 없앰 */