.mpc-page {
  background:#0b0c10;
  min-height:100vh;
}

.top {
  text-align:center;
  padding:16px 12px 8px;
}

.title {
  font-size:18px;
  font-weight:800;
}

.subtitle {
  font-size:12px;
  opacity:.7;
}

.wrap {
  max-width:520px;
  margin:0 auto;
  padding:12px;
}

.card {
  background:#12141a;
  border-radius:18px;
  padding:12px;
  margin-bottom:12px;
}

.board {
  position:relative;
  aspect-ratio:300/520;
}

.back {
  width:100%;
  height:100%;
  fill:rgba(255,255,255,.1);
  stroke:rgba(255,255,255,.2);
}

#paintCanvas {
  position:absolute;
  inset:0;
  touch-action:none;
}

.controls {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.btn {
  padding:14px;
  border-radius:14px;
}

.legend {
  grid-column:1/-1;
  text-align:center;
  font-size:12px;
  opacity:.7;
}

.dot {
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
}
.dot.l {background:rgba(255,0,0,.2)}
.dot.m {background:rgba(255,0,0,.4)}
.dot.s {background:rgba(255,0,0,.6)}

.grid {
  position:absolute;
  inset:0;
  display:none;
  background:
    linear-gradient(to right, rgba(255,255,255,.15) 1px, transparent 1px) 0 0 / 11.111% 100%,
    linear-gradient(to bottom, rgba(255,255,255,.15) 1px, transparent 1px) 0 0 / 100% 6.666%;
}
.grid.on {display:block;}

.foot {
  text-align:center;
  font-size:12px;
  opacity:.6;
}

/* =========================
   가독성 강제 보정 (중요)
   ========================= */

/* 이 앱 영역 안의 기본 글자색을 확실한 흰색으로 */
.mpc-page,
.mpc-page * {
  color: #f5f7fb;
}

/* 설명/보조 텍스트는 살짝만 연하게 */
.mpc-page .subtitle,
.mpc-page .legend,
.mpc-page .foot,
.mpc-page .info-p,
.mpc-page .info-list,
.mpc-page .info-tip {
  color: #d6d9e0;
}

/* 제목은 더 선명하게 */
.mpc-page .title,
.mpc-page h3,
.mpc-page .info-title {
  color: #ffffff;
}

/* =========================
   버튼 가독성/시인성 강화
   ========================= */

.mpc-page .btn {
  background: #2a2f3a !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: #ffffff !important;
  font-weight: 700;
}

/* 주요 버튼 (Clear) */
.mpc-page .btn-primary {
  background: #1f6fff !important;
  border-color: #1f6fff !important;
  color: #ffffff !important;
}

/* 버튼 눌림 효과 */
.mpc-page .btn:active {
  transform: scale(0.97);
  filter: brightness(1.1);
}

/* Grid 버튼이 꺼져 있을 때도 안 사라지게 */
.mpc-page .btn#btnToggleGrid {
  opacity: 1 !important;
}

/* =========================
   강도 범례 가독성
   ========================= */

.mpc-page .legend {
  font-weight: 600;
  letter-spacing: 0.2px;
}

.mpc-page .dot.l { background: rgba(255, 80, 80, 0.4); }
.mpc-page .dot.m { background: rgba(255, 50, 50, 0.65); }
.mpc-page .dot.s { background: rgba(255, 0, 0, 0.9); }

/* ✅ Grid 켜도 점 찍히게: grid가 클릭/터치를 절대 가로채지 않게 */
.mpc-page .grid{
  pointer-events: none !important;   /* 핵심 */
  z-index: 3;
}

/* 캔버스는 grid보다 위(또는 같은)라도 상관없지만 명확히 */
.mpc-page #paintCanvas{
  z-index: 4;
}

/* 배경 실루엣은 가장 아래 */
.mpc-page .back{
  z-index: 1;
}

/* 좌표 텍스트 */
.mpc-page .coord{
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .6px;
  color: #ffffff;
  opacity: .92;
}

/* Grid 켜도 점 찍히게(재확인) */
.mpc-page .grid{
  pointer-events: none !important;
  z-index: 3;
}
.mpc-page #paintCanvas{ z-index: 4; }
.mpc-page .back{ z-index: 1; }