:root {
    --bg-color: #1a1a1a;
    --board-color: #e3c16f;
    --line-color: #4a3b1d;
    --gold: #d4af37;
    --cell-size: clamp(23px, 6vw, 40px);
    --label-size: 20px;
}

body {
    background-color: var(--bg-color);
    color: white;
    font-family: 'Pretendard', sans-serif;
    margin: 0;
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 10px;
}

.content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
}

@media (min-width: 1024px) {
    .content-wrapper { flex-direction: row; justify-content: center; align-items: flex-start; }
}

.board-wrapper {
    background: #3e2723;
    padding: 12px;
    border-radius: 4px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}

#top-labels { display: flex; margin-left: var(--label-size); height: var(--label-size); }
.top-l { width: var(--cell-size); text-align: center; color: #888; font-size: 11px; line-height: var(--label-size); }
.middle-row { display: flex; }
#left-labels { display: flex; flex-direction: column; width: var(--label-size); }
.left-l { height: var(--cell-size); display: flex; align-items: center; justify-content: center; color: #888; font-size: 11px; }

#board {
    display: grid;
    grid-template-columns: repeat(15, var(--cell-size));
    grid-template-rows: repeat(15, var(--cell-size));
    background-color: var(--board-color);
    border: 2px solid var(--line-color); /* 가장 바깥 테두리 */
}

.cell {
    position: relative;
    width: var(--cell-size);
    height: var(--cell-size);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 격자선 기본 설정 (십자선) */
.cell::before { content: ""; position: absolute; background: var(--line-color); width: 1px; height: 100%; left: 50%; z-index: 1; opacity: 0.6; }
.cell::after { content: ""; position: absolute; background: var(--line-color); height: 1px; width: 100%; top: 50%; z-index: 1; opacity: 0.6; }

/* 실선 테두리 제한 로직 (연장선 제거) */
.cell.row-0::before { height: 50%; top: 50%; }     /* 첫 줄: 위쪽 선 제거 */
.cell.row-14::before { height: 50%; top: 0; }     /* 마지막 줄: 아래쪽 선 제거 */
.cell.col-0::after { width: 50%; left: 50%; }     /* 첫 열: 왼쪽 선 제거 */
.cell.col-14::after { width: 50%; left: 0; }      /* 마지막 열: 오른쪽 선 제거 */

/* 화점 */
.star-point-dot {
    position: absolute; width: 6px; height: 6px; background-color: var(--line-color);
    border-radius: 50%; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%);
}

/* 실제 돌 */
.chip {
    position: absolute;
    width: 90%; height: 90%; 
    border-radius: 50%; z-index: 10;
    display: flex; justify-content: center; align-items: center;
    font-weight: bold; font-size: calc(var(--cell-size) * 0.4);
    box-shadow: 1px 2px 4px rgba(0,0,0,0.4);
}
.p1-chip { background: radial-gradient(circle at 35% 35%, #555, #000 80%); color: white; }
.p2-chip { background: radial-gradient(circle at 35% 35%, #fff, #bbb 85%); color: black; }

/* 고스트 칩 (기존보다 2px 크게) */
.ghost-chip {
    position: absolute;
    width: calc(90% + 2px); 
    height: calc(90% + 2px); 
    border-radius: 50%;
    z-index: 20;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
    display: flex; justify-content: center; align-items: center;
    font-size: calc(var(--cell-size) * 0.35); font-weight: bold;
}
.cell:hover .ghost-chip { opacity: 0.5; }
.ghost-p1 { background-color: rgba(0,0,0,0.4); color: #fff; border: 2px dashed #fff; }
.ghost-p2 { background-color: rgba(255,255,255,0.4); color: #000; border: 2px dashed #000; }

/* 로그 및 컨트롤 */
.log-container {
    width: 100%; max-width: 580px;
    background: #222; border: 1px solid #444; border-radius: 6px;
    padding: 10px; box-sizing: border-box; display: flex; flex-direction: column;
}
@media (min-width: 1024px) {
    .log-container { width: 260px; height: calc(var(--cell-size) * 15 + var(--label-size) + 24px); margin-top: var(--label-size); }
}
#log-list { flex-grow: 1; height: 150px; overflow-y: auto; font-size: 13px; }
.log-entry { padding: 4px 0; border-bottom: 1px solid #333; }
.controls { width: 100%; display: flex; gap: 8px; margin-top: 10px; }
button { flex: 1; padding: 10px; background: #333; color: white; border: 1px solid var(--gold); border-radius: 4px; cursor: pointer; font-weight: bold; }
.reset-btn { border-color: #a52a2a; }