/* 로비 밝은 스킨(2026-10-15 Macho 「너무 어둡고 빨갛고 무거워, 일러스트는 어쩔 수 없는데 로비까지 이런 스킨이면 좀 그래, 바탕색을 화이트로」)
   일러스트(카드·뽑기·판)는 그대로 두고 로비(#lob)만 한지 흰 바탕 + 먹 글자. 붉은색은 강조(선택된 것·중요한 단추)에만.
   index.html 의 이 파일 link 한 줄을 빼면 예전 어두운 로비로 돌아간다. 창(#sheet)·뽑기(.gx)·판(play.html)은 손대지 않는다 */
html,body{background:#F4EFE6}
#lob{
  --paper:#2B2620; --muted:#8A8175; --ink:#FFFFFF; --ink2:#F7F2E9; --ink3:#EEE6D8;
  --gold:#B57B12;
  background:#F4EFE6;color:#2B2620}
#lob header{background:#FFFDF8;border-bottom:2px solid var(--red);box-shadow:0 2px 10px rgba(80,60,30,.08)}
#lob header h1{color:#2B2620}
#lob .pill{background:#F1EADC;color:#2B2620;box-shadow:inset 0 0 0 1px #E3D9C6}
#lob .pill.hon{color:#C2410C}
#lob .pill.c{color:#2B2620}
#regions{background:#FBF7F0;border-bottom:1px solid #EAE1D1}
#regions button{border-color:#DDD3C1;color:#7A7064;background:#fff}
#regions button.on{background:#2B2620;color:#fff;border-color:#2B2620}

/* 노선도 — 남보라 밤하늘 → 한지 바탕 */
#mapWrap{background:
    radial-gradient(120% 85% at 50% 30%, #FFFDF8 0%, #F6F0E4 55%, #ECE3D2 100%)}
#map .dot.lock .body{fill:#DCD3C2;stroke:#A99E8B}
#map .dot.lock .shine{fill:rgba(255,255,255,.6)}
#map .dot.clear .body{stroke:#fff}
#map text{fill:#5A5046;stroke:#FBF7F0}
#map text.open{fill:#B3261B}
#map text.clear{fill:#1F1B17}
#map .seg.dim{opacity:.32}
.mapBtns button{background:#FFFFFF;color:#2B2620;box-shadow:0 3px 10px rgba(80,60,30,.18),inset 0 0 0 1px #E3D9C6}
.mapStat{background:rgba(255,253,248,.92);color:#7A7064;box-shadow:0 2px 8px rgba(80,60,30,.12)}
.mapStat b{color:#2B2620}

/* 아래 탭 */
#tabs{background:#FFFDF8;border-top:1px solid #E6DCCB;box-shadow:0 -2px 10px rgba(80,60,30,.06)}
#tabs button{color:#9A9084}
#tabs button.on{color:#B3261B}
#tabs button i{filter:grayscale(.2);opacity:.75}
#tabs button.on i{filter:none;opacity:1}

/* 카드 칸 — 그림 위 글자는 흰색 그대로 */
#lob .gc{color:#fff;box-shadow:0 0 0 1.5px var(--gb,#C9BFAE),0 3px 8px rgba(80,60,30,.18)}
#lob .grid .gc{box-shadow:0 0 0 1.5px var(--gb,#C9BFAE)}
#lob .gc.no{background:#E9E1D2;box-shadow:0 0 0 1.5px #D8CEBB}
#lob .gc.no::after{color:#B8AD9A}
#lob .gc[data-bg]{background-color:#E2D9C8}
#lob .chips button{border-color:#DDD3C1;background:#fff;color:#7A7064}
#lob .chips button.on{background:#2B2620;color:#fff;border-color:#2B2620}
/* 상점 큰 탭(10-24 Macho 「내용과 같은 색이라 가독성 부족, 이모지 넣고 고른 단추 색 명확히」) — 흰 칸이 아래 흰 카드와 같아 보였다.
   먹색 띠 하나로 묶어 내용과 떼고, 고른 탭은 금색 바탕 · 안 고른 탭은 띠 위 밝은 글씨 */
#lob .shTabs{gap:4px;padding:4px;border-radius:16px;background:#2B2620;box-shadow:0 2px 6px rgba(43,38,32,.25)}
#lob .shTabs button{border:0;background:transparent;color:#E9E0CF;border-radius:12px}
#lob .shTabs button.on{background:#E8B64C;color:#1B1712;box-shadow:0 2px 0 #A9802C}
#lob .prog .bar{background:#E6DCCB}
#lob .slot3{border-color:#D3C8B4;color:#A79C89}
#lob .slot3.lock{border-color:#DDD3C1;background:repeating-linear-gradient(45deg,#EFE8DB 0 8px,#F6F1E7 8px 16px);color:#A79C89}
#lob .slot3.lock small{color:#9A9084}
#lob .sortBar button{background:#fff;color:#7A7064;box-shadow:inset 0 0 0 1px #E3D9C6}
#lob .sortBar button.on{background:#2B2620;color:#fff;box-shadow:none}
#lob .setNote,#lob .shNote.setNote{background:#FFF8EA}

/* 상점 */
#lob .shWallet span{background:#fff;color:#7A7064;box-shadow:0 2px 8px rgba(80,60,30,.08)}
#lob .shPick{background:linear-gradient(90deg,rgba(232,182,76,.28),transparent);color:#2B2620}
#lob .shBox{background:#fff;box-shadow:0 2px 10px rgba(80,60,30,.1),inset 0 0 0 1px #E8DFCF}
#lob .shBox.premium{background:linear-gradient(160deg,#FFF1EC,#FFFFFF);box-shadow:0 2px 10px rgba(80,60,30,.1),inset 0 0 0 1.5px rgba(211,39,29,.45)}
#lob .shRow{background:#fff;box-shadow:0 2px 8px rgba(80,60,30,.08)}
#lob .shNote.warn{background:#FFF4DA;color:#8A5A08}
#lob .shRow .btn.line,#lob .slots + .btns .btn.line{color:#2B2620;box-shadow:inset 0 0 0 2px rgba(43,38,32,.35)}
#lob .spCard,#lob .spWide{background:#fff;box-shadow:0 3px 10px rgba(80,60,30,.12),inset 0 0 0 1px #E8DFCF}
#lob .spCard .spImg{-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
#lob .spAmt{color:#2B2620;text-shadow:0 1px 0 #fff,0 0 8px #fff}
#lob .spCard.best{box-shadow:0 3px 12px rgba(181,123,18,.3),inset 0 0 0 2px #D9A23A}
#lob .spBuy{background:linear-gradient(#FFFFFF,#F1EADC);color:#2B2620;box-shadow:0 3px 0 #D9CDB8,inset 0 0 0 1px #E3D9C6}
#lob .spBuy small{color:#8A8175}
#lob .spExB{background:linear-gradient(#FFF6F2,#FBE7DF);color:#2B2620;box-shadow:inset 0 0 0 1.5px rgba(211,39,29,.35)}
#lob .spExB b{color:#B3261B}
#lob .spWide.pass{background:linear-gradient(150deg,#EAF2FB,#FFFFFF)}
#lob .spTag{background:#FFF1D6;color:#8A5A08}

/* 랭킹·기타 칸에 박힌 어두운 바탕 */
#lob .secT{color:#2B2620}
#lob .empty{color:#8A8175}

/* 창(#sheet)과 어두운 꾸러미 카드는 로비 안에 있어도 원래 색 변수로 — 로비에서 --paper 를 먹색 글자로 바꿨더니
   창 바탕(var(--paper))까지 먹색이 됐다(10-15 실측). 원래 값으로 되돌린다 */
#lob #sheet,#lob .gx{--paper:#F2EBDD; --muted:#9C958A; --ink:#141317; --ink2:#1E1D23; --ink3:#2A2830; --gold:#E8B64C}

/* 꾸러미 카드도 흰 바탕 · 구입 단추는 흰 단추로 통일(10-15 Macho 「일러스트가 강하니까 버튼이나 박스색을 화이트로, 다른 로비화면들처럼」) */
#lob .spHero,#lob .spHero.starter2{background:#fff;box-shadow:0 3px 12px rgba(80,60,30,.14),inset 0 0 0 1px #E8DFCF}
#lob .spHero .spImg{-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
#lob .spHeroB>b{color:#B3261B;text-shadow:0 1px 0 #fff,0 0 10px #fff}
#lob .spHero.starter2 .spHeroB>b{color:#7B3FB0}
#lob .spGot span{background:#F7F2E9;box-shadow:inset 0 0 0 1px #EDE4D4}
#lob .spGot span b{color:#2B2620}
#lob .spGot span small{color:#8A8175}
#lob .spGot .tk b{color:#B57B12}
#lob .spBuy,#lob .spHero .spBuy{background:#fff;color:#2B2620;box-shadow:0 2px 0 #E0D5C2,inset 0 0 0 1.5px #D9CDB8}

/* 잠긴 지역 칩(10-16) */
#regions button.lock{background:#F1ECE3;color:#B0A699;border-style:dashed}