/* @ichess/board-sdk — base styles
 *
 * 사이트 본체의 보드 시각과 완전히 동일한 모습을 외부 회사가 재현할 수 있도록 한
 * 베이스 스타일. chessboard.js 1.x의 디폴트 CSS를 기반으로 사이트가 그 위에 입히는
 * 추가 룰을 함께 박는다 — A(동작 필수) / B(시각 기본) 계층만. 사이트 picker UI /
 * mask-image 자산 / 사이트 도구 UI 등(C 계층)은 외부 회사 책임으로 제외.
 *
 * z-index는 CSS 변수 fallback 형태로 작성해, 외부가 자기 토큰 시스템에 맞춰 override 가능.
 *
 * 사용법:
 *   import '@ichess/board-sdk/styles';                          // ESM 번들러
 *   <link rel="stylesheet" href=".../dist/board-sdk.css">       // 정적 HTML
 *
 * 외부 회사는 chessboard.js 1.x의 raw CSS(`chessboard-1.0.0.min.css`)를 먼저 import한 뒤
 * 이 파일을 cascade 위에 얹는다 — 사이트 본체와 동일한 import 순서.
 */

/* ---------- 보드 컨테이너 / 기물 베이스 ---------- */

/* chessboard.js 기물 — 화살표/심볼 underlay와의 layering 정합을 위해 명시적 z-index 부여.
 * 사이트의 `#board .piece-417db`를 ID 의존 없이 일반화 (`.piece-417db`는 chessboard.js
 * 1.x가 기물 element에 부여하는 클래스). */
.piece-417db {
    position: relative;
    z-index: var(--z-piece, 200);
}

/* 모바일 드래그: 보드/칸/기물 영역의 터치를 페이지 스크롤이 가로채지 않도록.
 * 이 룰이 없으면 외부 회사가 모바일에서 기물 드래그를 시험할 때 페이지만 스크롤되고
 * 기물이 움직이지 않음. 사이트 `css/base/layout.css`의 동일 룰을 그대로 흡수. */
.board-b72b1,
.square-55d63,
.piece-417db {
    touch-action: none;
}

/* ---------- 워터마크 ---------- */
/*
 * `BoardOptions.watermark`로 활성화 시 `ChessBoard`가 우하단 칸(`h1` 또는 `a8`)에
 * `<div class="watermark">`를 prepend하고 인라인 background-image로 워터마크 이미지를 지정한다.
 * background-image는 ChessBoard가 인라인으로 설정 — 이 룰은 위치/투명도/크기/이벤트만 정의.
 * 사이트 `css/base/layout.css:152-165`과 동일 (background-image만 제외).
 */
.watermark {
    position: absolute;
    z-index: var(--z-watermark, 1);
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.1;
    pointer-events: none;
}

/* ---------- 보드 테마 (사이트와 1:1 동일 색상) ---------- */
/*
 * 사이트의 `#board.theme-{wood|green|blue|gray|red|purple}`를 `.theme-*` 클래스 셀렉터로
 * 일반화 (ID 의존 제거). 외부 회사가 보드 컨테이너 element에 `class="theme-wood"` 등을
 * 붙이면 같은 색상이 적용된다.
 *
 * `.white-1e1d7` / `.black-3c85d`는 chessboard.js 1.x가 칸에 부여하는 클래스. 따라서 raw
 * chessboard.js CSS 위에 덮어쓰는 형태로 동작한다 — 사이트가 이미 그렇게 운영 중이며
 * 6테마 색상값은 `css/base/base.css:36-60`에서 그대로 복사했다.
 */

.theme-wood   .white-1e1d7 { background-color: #f0d9b5; }
.theme-wood   .black-3c85d { background-color: #b58863; }

.theme-green  .white-1e1d7 { background-color: #ECEDD4; }
.theme-green  .black-3c85d { background-color: #7F945F; }

.theme-blue   .white-1e1d7 { background-color: #dee3e6; }
.theme-blue   .black-3c85d { background-color: #8FB6DE; }

.theme-gray   .white-1e1d7 { background-color: #F4F4F4; }
.theme-gray   .black-3c85d { background-color: #B4B4B4; }

.theme-red    .white-1e1d7 { background-color: #FBF3FC; }
.theme-red    .black-3c85d { background-color: #D84A28; }

.theme-purple .white-1e1d7 { background-color: #E7D4EE; }
.theme-purple .black-3c85d { background-color: #A97DD1; }

/* ---------- HighlightLayer ----------
 *
 * `.highlight-selected` / `.highlight-last-move`의 box-shadow를 element 자체가 아닌
 * `::before` pseudo-element에 둔다. 사유: `.symbol-on-board { position:absolute;
 * width/height:100%; z-index:var(--z-symbol-{underlay|overlay}) }` child가 칸 안을
 * 통째로 덮어 element의 `inset box-shadow`를 가리는 stacking 결함을 회피.
 * pseudo-element에 명시 z-index(`--z-highlight, 202`)를 부여해 symbol-overlay(201)와
 * piece(200) 위, text-symbol(403) 아래에 안정적으로 페인트되도록 한다.
 *
 * `::after`는 `.highlight-move`(합법수 점)가 사용 중이라 `::before`로 분리. 한 칸에
 * `.highlight-selected`와 `.highlight-last-move`가 동시 적용된 경우 같은 pseudo를
 * 공유해 cascade로 한쪽만 보이는 기존 동작은 유지된다 (사이트와 동일).
 */

.highlight-move,
.highlight-selected,
.highlight-last-move {
    position: relative;
}

.highlight-move::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: var(--z-symbol-overlay, 201);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.15);
    transform: translate(-50%, -50%);
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

.highlight-selected::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    z-index: var(--z-highlight, 202);
    pointer-events: none;
    box-shadow: inset 0 0 25px #ff0;
}

.highlight-last-move::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    z-index: var(--z-highlight, 202);
    pointer-events: none;
    box-shadow: inset 0 0 0 5px rgba(255, 215, 0, 0.7);
}

/* ---------- SymbolLayer ---------- */

.symbol-on-board {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: none;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    user-select: none;
    box-sizing: border-box;
}

.symbol-underlay {
    z-index: var(--z-symbol-underlay, 199);
    opacity: 0.8;
}

.symbol-overlay {
    z-index: var(--z-symbol-overlay, 201);
}

/* underlay fill 변형 — SymbolLayer가 'fill-{color}' 형태 클래스를 붙일 때 시각화 */
.symbol-fill-red {
    background-color: rgba(217, 4, 41, 0.8);
}
.symbol-fill-green {
    background-color: rgba(46, 204, 113, 0.8);
}
.symbol-fill-blue {
    background-color: rgba(58, 134, 255, 0.8);
}
.symbol-fill-purple {
    background-color: rgba(155, 89, 182, 0.8);
}

/* underscore 변형 — 사이트가 'fill_green' 형태로 넘기는 케이스 호환 */
.symbol-fill_green {
    background-color: #2ecc71;
}

/* underlay border 변형 — 'border-{color}' */
.symbol-border-red,
.symbol-border-green,
.symbol-border-blue,
.symbol-border-purple {
    border-style: solid;
    border-width: 6px;
}

.symbol-border-red {
    border-color: rgba(217, 4, 41, 0.8);
}
.symbol-border-green {
    border-color: rgba(46, 204, 113, 0.8);
}
.symbol-border-blue {
    border-color: rgba(58, 134, 255, 0.8);
}
.symbol-border-purple {
    border-color: rgba(155, 89, 182, 0.8);
}

/* text-symbol — eval / number 라벨 베이스.
 * 수직 정렬은 flex로 잡는다. line-height + border-box 조합은 border 두께(1px)만큼
 * line-box가 컨텐츠 영역을 아래로 넘쳐 글자가 1px 아래로 치우치므로 사용하지 않는다. */
.text-symbol {
    position: absolute;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    font-weight: bold;
    text-align: center;
    user-select: none;
    pointer-events: none;
    z-index: var(--z-text-symbol, 403);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* number 라벨 기본 색 (eval-bg-default) */
.text-symbol.eval-bg-default {
    background-color: #ffbf00;
    color: #d90429;
}

/* eval 라벨 배경 색 — EVAL_STYLE_MAP과 1:1 대응 */
.eval-bg-blue   { background-color: rgba(46, 134, 195, 1); }
.eval-bg-green  { background-color: rgba(0, 153, 0, 1); }
.eval-bg-orange { background-color: rgba(231, 76, 60, 1); }
.eval-bg-red    { background-color: rgba(255, 0, 0, 1); }
.eval-bg-yellow { background-color: rgba(191, 191, 0, 1); }
.eval-bg-purple { background-color: rgba(128, 0, 128, 1); }
.eval-bg-white  { background-color: rgba(0, 0, 0, 1); }
.eval-bg-pink   { background-color: rgba(255, 105, 180, 1); }

/* eval 라벨 텍스트 색 */
.eval-text-white { color: #ffffff; }
.eval-text-red   { color: #d90429; }
.eval-text-black { color: #000000; }

/* 라벨 위치 */
.position-top-left {
    top: 1px;
    left: 1px;
}

.position-top-right {
    top: 1px;
    right: 1px;
}

/* ---------- CapturedPieces ---------- */

.piece-group {
    display: inline-flex;
    align-items: center;
}

.material-advantage {
    font-weight: bold;
}

/* ---------- MoveListPanel ----------
 *
 * 사이트의 PC 기보 패널(`_move_history_table.php` + `css/components/pgn-navigator.css`)과
 * 모바일 가로 스크롤 strip(`_game_info_panel.php` + `css/base/responsive.css:140-207`)의
 * 외관을 1:1로 재현. id 셀렉터(`#move-history-table`/`#mobile-move-history` 등)는 모두
 * 클래스로 일반화 — 한 페이지 여러 인스턴스 가능. 네비 버튼은 사이트 `.btn.btn--light`를
 * 패키지 전용 `.move-list-nav-btn`로 prefix화 (외부의 다른 `.btn` 시스템과의 충돌 방지).
 *
 * 사이트 CSS 변수(`--color-bg-page`/`--spacing-md` 등)는 fallback 값을 박아 외부가 자기
 * 토큰 시스템에 맞춰 override할 수 있게 했다 (board 색상 변수와 동일 패턴).
 */

.move-list-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pgn-scroll-area {
    flex-grow: 1;
    flex-basis: 0;
    min-height: 0;
    overflow-y: auto;
    margin-bottom: var(--spacing-md, 10px);
    scrollbar-gutter: stable;
}

.move-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    table-layout: fixed;
    flex-grow: 1;
}

.move-history-table th,
.move-history-table td {
    padding: 6px 4px;
    text-align: left;
    border-bottom: 1px solid var(--color-bg-page, #f0f0f0);
}

.move-history-table th {
    font-weight: bold;
    color: var(--color-text-secondary, #555);
}

.move-history-table tbody tr:last-child td {
    border-bottom: none;
}

.move-history-table td:first-child {
    color: var(--color-text-muted, #888);
}

.move-history-table td:nth-child(2),
.move-history-table td:nth-child(3) {
    font-weight: 500;
}

.move-history-table td.current-move {
    background-color: #d4edda !important;
    font-weight: bold;
}

.move-history-table td[data-fen] {
    cursor: pointer;
}

.move-history-table tbody td[data-fen]:hover {
    background-color: #e9e9e9;
}

.pgn-controls {
    display: flex;
    gap: var(--spacing-sm, 8px);
    flex-shrink: 0;
}

.move-list-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    border: 1px solid var(--color-border, #ccc);
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
    user-select: none;
    white-space: nowrap;
    background-color: var(--color-bg-subtle, #f8f9fa);
    color: var(--color-text-primary, #333);
}

.move-list-nav-btn:hover:not(:disabled) {
    background-color: #e9ecef;
    border-color: #bbb;
}

.move-list-nav-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.pgn-controls .move-list-nav-btn {
    flex-basis: calc((100% - 24px) / 4);
    flex-grow: 0;
    flex-shrink: 0;
    padding: 6px 0;
}

/* 모바일 가로 스크롤 strip. 사이트의 미디어 쿼리 안 룰을 패키지에선 항상 적용 —
 * 외부가 자기 컨테이너를 모바일에서만 노출하는 책임을 진다 (사이트도 `lg:hidden`으로 동일). */
.mobile-move-history {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm, 8px);
    overflow-x: auto;
    white-space: nowrap;
    height: 44px;
    padding: 0 8px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.mobile-move-history::-webkit-scrollbar {
    display: none;
}

.mobile-move-group {
    display: inline-flex;
    align-items: center;
    margin-right: var(--spacing-sm, 8px);
    padding: 2px 4px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    flex-shrink: 0;
}

.mobile-move-number {
    color: #888;
    margin-right: var(--spacing-xs, 4px);
    font-size: 0.8em;
    font-weight: 600;
    width: 34px;
    text-align: left;
    display: inline-block;
}

.mobile-move-item {
    width: 60px;
    text-align: left;
    display: inline-block;
    padding: 2px 4px;
    border-radius: 3px;
    cursor: pointer;
    color: #333;
    font-size: 0.95em;
    font-weight: 500;
    transition: background-color 0.1s;
}

.mobile-move-item:hover {
    background-color: #e2e6ea;
}

.mobile-move-item.current-move {
    background-color: #d4edda;
    color: #155724;
    font-weight: bold;
}

.mobile-move-spacer {
    min-width: 8px;
    height: 1px;
    flex-shrink: 0;
}

.mobile-pgn-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs, 4px);
    padding: 8px;
}

.mobile-pgn-controls .move-list-nav-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 0;
}