@charset "utf-8";

h1 {
    color:#7d5a3c;
    margin-bottom:15px;
    font-weight:700;
    letter-spacing:1.5px;
    font-size:2.5em;
    text-align:center;
}

.user-info1 {
    margin:0 auto;
    padding:0;
    max-width:470px; 
}

.user-info {
    margin-bottom:10px;
    padding:15px;
    background:rgba(240, 230, 210, 0.9);
    border-radius:8px;
    text-align:center;
    font-size:16px;
}

.game-info {
    font-size:1.2em;
	text-align:center;
	font-weight:bold;
}

.board-container {
    position:relative;
    margin-top:10px;
}

.board {
    display:grid;
    grid-template-columns:repeat(15, auto);
    grid-template-rows:repeat(15, auto);
    background:#e0c9a6;
    gap:0;
    border-radius:10px;
    border:solid #7d5a3c;
}

/* 오목판의 각 칸 (cell) 스타일 */
.cell {
    width:30px;
    height:30px;
    box-sizing:border-box;
    position:relative;
    cursor:pointer;
}

.cell::before {
    content:"";
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    height:1px;
    background:#5a4632;
}

.cell::after {
    content:"";
    position:absolute;
    left:50%;
    top:0;
    width:1px;
    height:100%;
    background:#5a4632;
}

.stone {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:24px;
    height:24px;
    border-radius:50%;
    z-index:1;
}

.black {
    background:radial-gradient(circle at 35% 35%, #333, #000);
    box-shadow:0 2px 4px rgba(0, 0, 0, 0.3);
}

.white {
    background:radial-gradient(circle at 35% 35%, #fff, #f0f0f0);
    box-shadow:0 2px 4px rgba(0, 0, 0, 0.15);
}

.controls {
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:10px;
}

button {
    padding:10px 18px;
    background:#7d5a3c;
    color:#fff;
    border:none;
    border-radius:4px;
    cursor:pointer;
    font-size:15px;
    font-weight:500;
    letter-spacing:0.5px;
    transition:all 0.2s ease;
}

button:hover {
    background:#8e6b4e;
}

.dot {
    position:absolute;
    width:8px;
    height:8px;
    background:#5a4632;
    border-radius:50%;
    transform:translate(-50%, -50%);
}

.last-move {
    position:absolute;
    width:10px;
    height:10px;
    background:rgba(220, 50, 50, 0.8);
    border-radius:50%;
    transform:translate(-50%, -50%);
    z-index:2;
    box-shadow:0 0 4px rgba(220, 50, 50, 0.5);
}

.news-ad1 {
	border:1px solid #ddd;
    padding:20px;
    border-radius:8px;
    margin-top:10px;
    font-size:14px;
    line-height:1.2;
    max-width:100%;
}

@media (max-width:768px) {
	h1 {
		color:#7d5a3c;
		margin-bottom:15px;
		font-weight:700;
		letter-spacing:1.5px;
		font-size:2em;
		text-align:center;
	}

	.user-info1 {
		margin:0 auto;
		padding:10px;
		max-width:330px; 
	}

	.cell {
		max-width:20px;
		height:20px;
		box-sizing:border-box;
		position:relative;
		cursor:pointer;
	}

	.stone {
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%, -50%);
		width:18px;
		height:18px;
		border-radius:50%;
		z-index:1;
	}
}