/* style250412.css - 최종본 (모달, 버튼 컨테이너 Flexbox 적용) */

/* 기본 리셋 및 body 스타일 */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden; /* 게임 화면에서 스크롤 방지 */
}
*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: sans-serif;
    display: flex; /* 자식 요소(#game-area)가 높이를 채우도록 */
    flex-direction: column;
    background-color: #f4f4f4; /* 기본 배경색 */
    min-height: 100vh;
}

/* --- 게임 영역 스타일 (항상 표시) --- */
#game-area {
    position: relative; /* 내부 absolute/fixed 요소 기준 */
    width: 100%;
    height: 100vh; /* 전체 뷰포트 높이 */
    display: flex; /* 내부 요소(canvas, commentary) 정렬 */
    flex-direction: column;
    margin: 0;
    border: none;
    box-sizing: border-box;
    z-index: 1; /* 모달보다 아래에 있도록 */
}

/* --- 모달 백드롭 스타일 --- */
#modal-backdrop {
    position: fixed; /* 화면에 고정 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* 반투명 검정 배경 */
    z-index: 10; /* 게임 영역 위, 모달 아래 */
    display: none; /* JS로 제어 */
}

/* --- 설정 영역 (모달) 스타일 --- */
#setup-area {
    position: fixed; /* 화면에 고정 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 중앙 정렬 */
    width: 90%; /* 너비 조정 */
    max-width: 450px; /* 최대 너비 설정 */
    background-color: #fff;
    /* 타이틀 추가로 인한 패딩 조정 (상단) */
    padding: 20px 30px 30px 30px; /* 상단 패딩 약간 줄임 */
    border-radius: 10px; /* 둥근 모서리 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* 그림자 효과 */
    z-index: 20; /* 백드롭 위에 표시 */
    display: none; /* JS로 제어 */
    box-sizing: border-box;
    /* 스크롤 기능 */
    max-height: 85vh; /* 뷰포트 높이의 85%로 최대 높이 제한 */
    overflow-y: auto; /* 내용이 max-height를 넘으면 세로 스크롤 자동 생성 */
}

/* --- 좌우 흔들림 애니메이션 정의 --- */
@keyframes sway {
    0% {
        transform: translateX(-10px); /* 시작: 약간 왼쪽 */
    }
    50% {
        transform: translateX(10px);  /* 중간: 약간 오른쪽 */
    }
    100% {
        transform: translateX(-10px); /* 끝: 시작 위치 복귀 */
    }
}

/* 모달 메인 타이틀 스타일 (애니메이션 적용) */
#modal-main-title { /* HTML에서 h2 태그 */
    text-align: center;
    font-size: 1.8rem;  /* 메인 타이틀 크기 */
    color: #4A4A4A;      /* 메인 타이틀 색상 */
    margin-top: 0;       /* 위쪽 마진 제거 */
    margin-bottom: 10px; /* 아래쪽 여백 (h3와의 간격) */
    font-weight: bold;  /* 굵게 */
    position: relative; /* transform 적용 위해 */
    display: block; /* block 요소로 처리 */

    /* 애니메이션 적용 */
    animation-name: sway;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* 설정 부제목 스타일 (h3 태그) */
#setup-area h3 {
    text-align: center;
    margin-top: 5px;     /* 위쪽 여백 (h2와의 간격) */
    margin-bottom: 25px; /* 아래쪽 여백 (설정 내용과의 간격) */
    color: #555;
    font-size: 1.4rem;   /* 메인 타이틀보다 약간 작게 */
}

#setup-area div {
    margin-bottom: 15px; /* 요소 간 간격 */
}

#setup-area label {
    display: inline-block;
    min-width: 90px; /* 레이블 너비 */
    margin-right: 5px;
    color: #555;
}

#setup-area input[type="number"],
#setup-area input[type="text"] {
    padding: 8px; /* 입력 필드 패딩 */
    border: 1px solid #ccc;
    border-radius: 4px;
    width: calc(100% - 100px); /* 레이블 제외한 나머지 너비 */
    max-width: 200px; /* 최대 너비 */
}

#horse-names-inputs label {
    min-width: 70px;
}

/* 설정 영역 내 버튼 컨테이너 스타일 */
.setup-buttons-container {
    display: flex;           /* Flexbox 사용하여 버튼 가로 배치 */
    justify-content: center; /* 버튼들을 컨테이너 ★중앙★에 정렬 */
    gap: 30px;               /* 버튼 ★사이의 간격★을 15px로 설정 */
    margin-top: 25px;        /* 위쪽 요소와의 간격 */
    flex-wrap: wrap;         /* 화면 좁아지면 버튼 줄바꿈 허용 */
}

/* 컨테이너 내 버튼 공통 스타일 */
.setup-buttons-container button {
    /* 개별 버튼의 위치 관련 스타일(margin auto 등)은 제거 */
    margin: 0;

    /* 나머지 공통 스타일 */
    padding: 10px 18px;
    font-size: 1rem;
    cursor: pointer;
    color: white;
    border: none;
    border-radius: 5px;
    transition: background-color 0.2s;
    flex-grow: 0; /* 버튼이 남는 공간을 차지하지 않도록 */
}

/* (각 버튼의 배경색 등 개별 스타일은 그대로 유지) */
#shuffle-button {
    background-color: #6c757d;
    color: white;
}
#shuffle-button:hover {
    background-color: #5a6268;
}
#start-button {
    background-color: #007bff;
}
#start-button:hover {
    background-color: #0056b3;
}

/* 경주 캔버스 */
#race-canvas {
    width: 100%;
    height: 0; /* flex-grow 계산 위해 */
    flex-grow: 1; /* 사용 가능한 모든 세로 공간 차지 */
    display: block;
    box-sizing: border-box;
    object-fit: contain;
    min-height: 150px;
    background-color: #eee; /* 로딩 중 또는 빈 배경색 */
}

/* 정보 패널 (숨김) */
#info-panel {
    display: none;
}

/* 해설 박스 (게임 화면 하단) */
#commentary-box {
    width: 100%;
    min-height: auto;
    background-color: rgba(248, 249, 250, 0.9);
    border-top: 1px solid rgba(200, 200, 200, 0.8);
    padding: 5px 10px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-shrink: 0;
}

/* 해설 텍스트 스타일 */
#commentary-box p {
    margin: 1px 0;
    padding: 0;
    font-size: 0.85rem;
    line-height: 1.3;
    color: #222;

    /* --- <<< 한 줄 처리 및 말줄임표 적용 >>> --- */
    white-space: nowrap;     /* 텍스트 줄바꿈 방지 */
    overflow: hidden;        /* 요소 너비를 넘어가는 텍스트 숨김 */
    text-overflow: ellipsis; /* 숨겨진 텍스트 대신 말줄임표(...) 표시 */
    /* --- <<< 수정 끝 >>> --- */
}

/* 전체화면 버튼 컨트롤 */
#fullscreen-controls {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1000; /* 다른 UI 요소 위에 오도록 */
}

#fullscreen-button {
    padding: 5px 10px;
    font-size: 0.8rem;
    cursor: pointer;
    background-color: rgba(240, 240, 240, 0.8);
    color: #333;
    border: 1px solid rgba(204, 204, 204, 0.8);
    border-radius: 4px;
}
#fullscreen-button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}


/* --- <<< 하단 버튼 컨테이너 스타일 (Flexbox 적용) >>> --- */
#bottom-button-container {
    position: fixed;      /* 컨테이너를 화면 하단에 고정 */
    bottom: 15px;         /* 하단에서의 여백 */
    left: 50%;            /* 수평 중앙 정렬 */
    transform: translateX(-50%);
    width: auto;          /* 내용(버튼)에 맞게 너비 자동 조절 */
    max-width: 98%;       /* 화면 너비 초과 방지 */
    z-index: 1001;        /* 전체화면 버튼보다 위에 오도록 */

    display: flex;        /* Flexbox 레이아웃 사용 */
    gap: 10px;            /* 버튼 사이의 간격 */
    justify-content: center; /* 버튼들을 컨테이너 중앙에 정렬 */
    align-items: center;     /* 버튼들을 수직 중앙 정렬 */
    pointer-events: none; /* 컨테이너 자체는 클릭 이벤트 무시 */
}

/* <<< 컨테이너 내 버튼 공통 스타일 >>> */
#bottom-button-container button {
    /* 개별 버튼의 고정 위치 관련 스타일 제거 */
    position: static; /* 고정 해제 */
    transform: none;  /* 변환 해제 */
    left: auto;
    bottom: auto;
    margin: 0; /* 자동 마진 제거 */

    /* 공통 스타일 */
    padding: 8px 10px;
    font-size: 0.9rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: none; /* JS로 제어 (초기 숨김) */
    pointer-events: auto; /* 버튼은 클릭 가능하도록 설정 */
    flex-shrink: 0; /* 버튼 내용 길어져도 줄어들지 않음 */
    white-space: nowrap; /* 버튼 텍스트 줄바꿈 방지 */
}

/* 각 버튼별 배경색 등 개별 스타일 */
#restart-button { background-color: rgba(91, 192, 222, 0.9); color: white; order: 1; }
#restart-button:hover { background-color: #31b0d5; }

#share-button { background-color: rgba(255, 193, 7, 0.9); color: #333; order: 2; }
#share-button:hover { background-color: #e0a800; }

#share-rankings-button { background-color: rgba(40, 167, 69, 0.9); color: white; order: 3; }
#share-rankings-button:hover { background-color: #218838; }

/* <<< 녹화 영상 공유 버튼 스타일 >>> */
#share-recording-button {
    background-color: rgba(220, 53, 69, 0.9); /* 빨간색 계열 */
    color: white;
    order: 4;
}
#share-recording-button:hover { background-color: #c82333; }


/* 미디어 쿼리 (좁은 화면) */
@media (max-width: 700px) { /* 4개 버튼이 나란히 있기 힘든 지점 */
    #bottom-button-container {
        flex-direction: column; /* 세로 쌓기 */
        gap: 8px;
        bottom: 10px;
        width: 60%;
        max-width: 250px;
    }
    #bottom-button-container button {
        width: 100%;
        font-size: 0.9rem;
        padding: 10px 5px;
        white-space: normal;
        order: 0; /* 세로 시 순서 초기화 또는 재지정 */
    }
    /* 필요시 세로 순서 재지정 */
     #restart-button { order: 4; } /* 다시 시작을 맨 아래로? */
     #share-button { order: 1; }
     #share-rankings-button { order: 2; }
     #share-recording-button { order: 3; }
}

/* 미디어 쿼리 내 해설 텍스트 스타일 (기존 유지) */
@media (max-width: 600px) {
    #commentary-box p {
        font-size: 0.75rem;
        line-height: 1.2;
        /* white-space, overflow, text-overflow 속성은 상속받아 적용됨 */
    }
}

@media (max-width: 400px) {
     /* 더 좁은 화면에서 추가 조정이 필요하다면 여기에 작성 */
     #bottom-button-container {
          width: 70%;
     }
.setup-buttons-container {
        gap: 10px;
    }
    .setup-buttons-container button {
        font-size: 0.9rem;
        padding: 8px 12px;
        /* 필요시 flex-basis: 100%; 등으로 세로 배치 */
    }
}


/* --- 전체화면 시 적용될 스타일 --- */
#game-area:fullscreen { /* 이제 documentElement가 전체화면이지만, game-area 스타일 유지 */
    /* 전체화면 시 game-area 자체의 스타일 변경이 필요하다면 여기에 추가 */
}

/* 벤더 프리픽스 포함 전체화면 스타일 */
#game-area:-webkit-full-screen { background-color: #000; width: 100% !important; height: 100% !important; max-width: none; max-height: none; margin: 0; border: none; }
#game-area:-moz-full-screen { background-color: #000; width: 100% !important; height: 100% !important; max-width: none; max-height: none; margin: 0; border: none; }
#game-area:-ms-fullscreen { background-color: #000; width: 100% !important; height: 100% !important; max-width: none; max-height: none; margin: 0; border: none; }

/* 루트 요소 전체화면 스타일 */
:root:fullscreen {
    background-color: #000; /* 전체 배경 검게 */
}
:root:-webkit-full-screen { background-color: #000; }
:root:-moz-full-screen { background-color: #000; }
:root:-ms-fullscreen { background-color: #000; }