/* style.css */

/* ------------------------------------------- */
/* --- 전역 스타일 및 기본 레이아웃 --- */
/* ------------------------------------------- */
body {
    background: linear-gradient(to bottom right, #e0f2f7, #c1e4f3);
    font-family: 'Noto Sans KR', sans-serif;
    text-align: center;
    padding: 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

h1 {
    color: #4A4A4A;
    margin-bottom: 25px;
    font-size: 2.5em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

#upload {
    margin-bottom: 25px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    transition: background-color 0.2s;
}
#upload:hover {
    background-color: #f0f0f0;
}

#upload-success-message {
    color: green;
    font-weight: bold;
    margin-top: 10px;
    /* 기타 스타일 */
}


.link {
  transition: transform 0.15s, filter 0.15s;
}

.gallery-link:hover .link {
  transform: translateY(-3px);
  filter: drop-shadow(0 4px 14px rgba(37, 31, 20, 0.4));
}




/* ------------------------------------------- */
/* --- 질문 섹션 스타일 --- */
/* ------------------------------------------- */

#questionnaire {
    display: flex;             /* Flexbox 레이아웃 활성화 */
    flex-direction: column;    /* 자식 요소들을 세로 방향으로 정렬 (질문 블록 + 다음 버튼) */
    align-items: center;       /* 교차축(여기서는 수평) 중앙 정렬 */
    width: 100%;               /* 부모 요소에 맞춰 너비 설정 (필요시) */
}

.question-block {
    display: none; /* JavaScript에서 'flex'로 변경되기 전에는 숨김 */
    margin-bottom: 20px;
    flex-direction: column;
    align-items: center;
}

.question-block p {
    margin-bottom: 15px;
    font-size: 1.2em;
    color: #333;
    font-weight: bold;
}

.options-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 400px;
}

.option-button {
    margin: 5px 0;
    padding: 12px 25px;
    font-size: 17px;
    width: 90%;
    max-width: 350px;
    box-sizing: border-box;
    border-radius: 8px;
    transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
    background-color: #ffffff;
    color: #444;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    cursor: pointer;
}

.option-button:hover {
    background-color: #f0f0f0;
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    border-color: #c0c0c0;
}

/* 기존 잘못된 셀렉터는 삭제하고, 아래 코드로 변경 */
.option-button.selected { /* JavaScript에서 추가하는 'selected' 클래스를 타겟팅 */
    background-color: #FFB7C5; /* !important는 웬만하면 피하는 것이 좋습니다. */
    border-color: #FF708C;
    color: #ffffff;
    font-weight: bold;
    box-shadow: 0 3px 8px rgba(255, 112, 140, 0.4);
}

#navigation-btn, #start-quiz-btn {
    display: block;
    margin: 30px auto 0 auto;
    padding: 12px 30px;
    font-size: 18px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#navigation-btn:hover, #start-quiz-btn:hover {
    background-color: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* ------------------------------------------- */
/* --- 결과 섹션 스타일 --- */
/* ------------------------------------------- */
#result-section {
    display: none; /* JS에서 block으로 변경되기 전 기본값 */
}

#result-card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* 결과 카드 중앙 정렬 + 여백 */
  margin: 30px auto;
  padding: 20px;

  width: 320px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
  text-align: center;
}


/* 캔버스 배경 네모 스타일 */
#result-section > div { 
    position: relative; /* .sparkle-effect의 기준점인데 구현 안됨 */
    width: 300px;
    margin: 20px auto;
    background-color: #fff; /* 흰색 배경 */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    /* display: inline-block; 또는 'block' 'flex' 등 상황에 따라 */
    /* vertical-align: top; 필요시 추가하여 다른 인라인 요소와 정렬 문제 방지 */
    text-align: center; /* 내부 콘텐츠 중앙 정렬 */
}

/* 캔버스 스타일 */
canvas {
    margin-top: 20px; /* 기존 HTML의 인라인 마진과 겹칠 수 있으니 확인 */
    border: 2px solid #888;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(0,0,0,0.3);
    display: block; /* 캔버스를 블록 요소로 만들어 margin auto 작동하도록 */
    margin-left: auto; /* margin auto로 중앙 정렬 */
    margin-right: auto; /* margin auto로 중앙 정렬 */
}



/* ⭐️ 새로 추가하거나 수정할 랭킹 디스플레이 스타일 ⭐️ */
#ranking-display {
    display: none; /* JS에서 'block'으로 변경되기 전에는 숨김 */
    margin: 30px auto; /* 위아래 여백을 주고 중앙 정렬 */
    padding: 20px;
    width: 320px; /* 결과 카드 컨테이너와 동일한 너비로 맞춤 */
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    text-align: center; /* 내부 텍스트 중앙 정렬 */
    color: #4A4A4A; /* 제목 색상과 비슷하게 설정 */
}

#ranking-display h3 {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: #333; /* 좀 더 진한 색상으로 */
}

#ranking-display ol {
    list-style-position: inside; /* 숫자를 목록 아이템 안쪽으로 이동 */
    padding-left: 0;             /* 기본 패딩 제거 */
    text-align: center;          /* 목록 전체를 중앙 정렬 */
    margin-top: 0;               /* 상단 기본 마진 제거 */
}

#ranking-display li {
    list-style-type: decimal;    /* 숫자를 명시적으로 지정 (없어도 되지만 확실하게) */
    text-align: center;          /* 각 리스트 아이템의 텍스트 중앙 정렬 */
    margin-bottom: 8px;          /* 각 랭킹 항목 간 간격 */
    font-size: 1.1em;
    color: #555;
    /* 'display: list-item;'은 기본값이므로 굳이 다시 지정할 필요는 없습니다. */
}








/* 결과 섹션 내 버튼 스타일 (포카 다운로드 버튼) */
#result-section button {
    margin-top: 15px;
    padding: 12px 25px;
    font-size: 17px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border: none;
    color: white;
    background-color: #007bff;
}

#result-section button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

/* 다시하기 버튼 컨테이너 및 버튼 스타일 */
#restart-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px; /* 원하는 만큼 버튼 사이 띄우기 */
    margin-top: 40px;
    margin-bottom: 50px;
    text-align: center; /* flex에선 큰 의미 없음, 있어도 무해 */
}


#copy-btn {
    padding: 15px 40px;
    font-size: 20px;
    background-color: #e4a6e4;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);

    flex: 1 1 0;
    min-width: 120px;
    max-width: 200px;



}

#copy-btn:hover {
    background-color: #c169e4;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}








#restart-btn {
    padding: 15px 40px;
    font-size: 20px;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);

    flex: 1 1 0;
    min-width: 120px;
    max-width: 200px;




}

#restart-btn:hover {
    background-color: #c82333;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

#result-text {
    font-size: 1.3em;
    color: #333;
    margin-top: 15px;
    margin-bottom: 8px;
    font-weight: bold;
}

/* ------------------------------------------- */
/* --- 미디어 쿼리: 모바일 최적화 (예시) --- */
/* ------------------------------------------- */
@media (max-width: 768px) { /* 태블릿 및 모바일 기기 */
    body {
        padding: 10px; /* 모바일에서 전체 패딩을 줄임 */
    }

    h1 {
        font-size: 2em; /* 모바일에서 제목 글씨 크기를 줄임 */
        margin-bottom: 20px;
    }

    .option-button {
        padding: 10px 20px; /* 모바일에서 버튼 패딩을 줄임 */
        font-size: 16px;
    }

    #navigation-btn,
    #restart-btn,
    #result-section button {
        padding: 10px 20px; /* 버튼 패딩 조정 */
        font-size: 16px; /* 버튼 글씨 크기 조정 */
    }

    #result-card-container,
    canvas {
        width: 280px; /* 모바일 화면에 맞게 캔버스 너비 약간 줄이기 (300px이 이미 작아서 조심) */
        /* height: auto; 비율 유지를 위해 높이도 조정 필요 (캔버스 그리기 코드와 연관) */
    }

    #result-card-container {
        padding: 15px; /* 모바일에서 결과 컨테이너 패딩 조절 */
    }
}

@media (max-width: 768px) {
    #restart-section {
        flex-direction: row;
        gap: 12px;
    }
    #copy-btn,
    #restart-btn {
        font-size: 16px;
        min-width: 100px;
        padding: 10px 18px;
    }
}