예제 소스

GoBoard.module.css

.frame {
  width: 100%;
  aspect-ratio: 1;
  padding: 2.5%;
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 40%),
    linear-gradient(180deg, #e2c49a, #c9a574 55%, #b8955f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 24px rgba(0, 0, 0, 0.35);
}

.grid {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(19, 1fr);
  grid-template-rows: repeat(19, 1fr);
}

.lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lines line {
  stroke: #5a4430;
  stroke-width: 0.04;
}

.cell {
  position: relative;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  z-index: 1;
  /* 모바일에서 탭 영역이 교차점에 맞게 잡히도록 */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.cell:disabled {
  cursor: default;
  pointer-events: none;
}

.star {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18%;
  height: 18%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #3d2e1f;
}

.stone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 86%;
  height: 86%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.black {
  background: radial-gradient(circle at 35% 30%, #555, #111 55%, #000);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.white {
  background: radial-gradient(circle at 35% 30%, #fff, #e8e8e8 55%, #cfcfcf);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72%;
  height: 72%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: rgba(201, 154, 107, 0.25);
  box-shadow: 0 0 0 1px rgba(42, 32, 24, 0.2);
}

.mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22%;
  height: 22%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #c0392b;
  z-index: 2;
  pointer-events: none;
}

.own {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}