/* 장기 전용 스타일 (janggi.php 에서만 불러옴)
   장기판·기물 색은 실제 나무판처럼 라이트/다크 모두 같은 색, 나머지는 사이트 공통 토큰 사용 */
.jg-app {
    --jg-han: #c0392b;
    --jg-cho: #1f5f8f;
}
@media screen {
    :root[data-theme="dark"] .jg-app {
        --jg-han: #ff8a7d;
        --jg-cho: #7db4f2;
    }
}
.jg-app { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 360px); gap: 24px; align-items: start; }
.jg-app *, .jg-app *::before, .jg-app *::after { box-sizing: border-box; }
.jg-app button, .jg-app select { font-family: inherit; }

.jg-board-wrap { min-width: 0; }
#jg-board {
    width: 100%; height: auto; display: block; border-radius: 10px;
    box-shadow: 0 1px 0 var(--shadow-color), 0 10px 28px -14px rgba(60, 35, 10, .5);
    user-select: none; -webkit-tap-highlight-color: transparent;
}
.jg-piece { cursor: pointer; }
.jg-piece:focus { outline: none; }
.jg-piece:focus-visible circle:nth-of-type(2) { stroke-width: 4; }

.jg-panel { min-width: 0; display: flex; flex-direction: column; gap: 16px;
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; padding: 18px; }

.jg-status { display: flex; align-items: center; gap: 10px; font-weight: bold; font-size: 18px; }
.jg-status.cho { color: var(--jg-cho); }
.jg-status.han { color: var(--jg-han); }
.jg-dot { width: 14px; height: 14px; border-radius: 50%; border: 3px solid currentColor; background: var(--surface); }
.jg-alert { color: var(--danger-text); font-weight: bold; min-height: 1.5em; margin-top: -8px; }

.jg-lbl { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.jg-app select {
    width: 100%; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line-input);
    border-radius: 6px; background: var(--input-bg); color: var(--input-text);
}

.jg-row { display: flex; flex-wrap: wrap; gap: 8px; }
.jg-row button {
    font-size: 14px; padding: 8px 14px; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--line-input); background: var(--surface); color: var(--text-2);
}
.jg-row button:hover:not(:disabled) { background: var(--hover-bg); border-color: var(--primary); }
.jg-row button.jg-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.jg-row button.jg-primary:hover { background: var(--primary-dark); }
.jg-row button:disabled { opacity: .45; cursor: default; }
.jg-app button:focus-visible, .jg-app select:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

.jg-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jg-score { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.jg-who { font-weight: bold; }
.jg-score.cho .jg-who { color: var(--jg-cho); }
.jg-score.han .jg-who { color: var(--jg-han); }
.jg-pts { font-size: 22px; font-weight: bold; color: var(--text); font-variant-numeric: tabular-nums; }
.jg-cap { min-height: 1.4em; color: var(--muted); word-break: break-all; font-family: "Nanum Myeongjo", "Batang", serif; }

.jg-log {
    list-style: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px 0;
    max-height: 220px; overflow: auto; font-size: 14px; font-variant-numeric: tabular-nums;
}
.jg-log li { display: flex; gap: 10px; padding: 2px 12px; color: var(--text-3); }
.jg-log .jg-n { width: 2.5em; color: var(--faint); }
.jg-log .cho { color: var(--jg-cho); font-weight: bold; }
.jg-log .han { color: var(--jg-han); font-weight: bold; }
.jg-log .jg-empty { color: var(--faint); }

.jg-help { font-size: 13px; color: var(--muted); line-height: 1.6; }

@media (prefers-reduced-motion: no-preference) { .jg-piece { transition: transform .15s; } }

@media (max-width: 920px) {
    .jg-app { grid-template-columns: minmax(0, 520px); }
}