/* ======================================================================
   수능 수학 공부시간 계산기 - style.css
   ----------------------------------------------------------------------
   개발 지식이 없어도 아래 ":root" 안의 색상 코드만 바꾸면
   사이트 전체의 포인트 컬러(브랜드 컬러)를 한 번에 바꿀 수 있습니다.
   ====================================================================== */

:root {
  /* ---- CSM17 브랜드 컬러 : 이 부분의 색상 코드(#000000 형태)만 바꾸면
         버튼, 숫자, 포인트 색상이 전체적으로 함께 바뀝니다. ---- */
  --csm17-primary: #2f5bff;       /* 메인 포인트 컬러 (버튼, 강조 숫자) */
  --csm17-primary-dark: #1c3fd6;  /* 메인 컬러를 눌렀을 때(active) 색상 */
  --csm17-primary-light: #eef1ff; /* 메인 컬러의 연한 배경색 */

  /* ---- 기본 색상 (보통은 수정하지 않아도 됩니다) ---- */
  --csm17-black: #14161a;
  --csm17-gray-900: #2b2e33;
  --csm17-gray-500: #767b85;
  --csm17-gray-200: #e6e8ec;
  --csm17-gray-100: #f5f6f8;
  --csm17-white: #ffffff;
  --csm17-danger: #e0473e;        /* 경고 문구용 색상 */
  --csm17-danger-bg: #fdecec;     /* 경고 문구 배경색 */
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--csm17-white);
  color: var(--csm17-black);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* "N제", "3등급"처럼 영문·숫자와 한글이 붙어 있는 단어가 중간에서
     끊기지 않도록, 사이트 전체에서 단어 단위로만 줄바꿈되게 합니다. */
  word-break: keep-all;
}

.app-container {
  max-width: 480px;   /* 모바일 우선 : 화면이 넓어져도 480px 안쪽으로만 콘텐츠가 보이게 함 */
  margin: 0 auto;
  min-height: 100vh;
  padding: 24px 20px 60px;
}

.hidden {
  display: none !important;
}

/* ---------------------------------------------------------------- */
/* 공통 버튼 스타일 */
/* ---------------------------------------------------------------- */
.btn {
  width: 100%;
  min-height: 52px;   /* 모바일에서 누르기 쉽도록 버튼 높이를 52px 이상으로 고정 */
  border-radius: 14px;
  border: none;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 10px;
  transition: transform 0.05s ease, opacity 0.15s ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--csm17-primary);
  color: var(--csm17-white);
}

.btn-primary:active {
  background: var(--csm17-primary-dark);
}

.btn-secondary {
  background: var(--csm17-primary-light);
  color: var(--csm17-primary);
}

.btn-text {
  background: transparent;
  color: var(--csm17-gray-500);
  font-weight: 500;
  min-height: 44px;
}

.btn-prev {
  display: block;
  margin: 18px auto 0;
  background: none;
  border: none;
  color: var(--csm17-gray-500);
  font-size: 14px;
  cursor: pointer;
  padding: 8px;
}

/* ---------------------------------------------------------------- */
/* ① 시작 화면 */
/* ---------------------------------------------------------------- */
#screen-start {
  min-height: 88vh;
  display: flex;
  align-items: center;
}

.start-content {
  width: 100%;
  text-align: center;
  padding-top: 10vh;
}

.eyebrow {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--csm17-primary);
  margin: 0 0 14px;
}

/* 시작 화면 상징 일러스트 - 크기를 바꾸고 싶다면 width 값만 조절하세요. */
.start-illustration {
  display: block;
  width: 128px;
  height: auto;
  margin: 0 auto 18px;
}

.start-title {
  font-size: 28px;
  line-height: 1.4;
  font-weight: 800;
  margin: 0 0 18px;
  color: var(--csm17-black);
}

.start-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--csm17-gray-500);
  margin: 0 0 36px;
}

/* ---------------------------------------------------------------- */
/* ② 질문 화면 */
/* ---------------------------------------------------------------- */
.progress-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  padding-top: 8px;
}

.progress-bar-track {
  flex: 1;
  height: 6px;
  background: var(--csm17-gray-200);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  width: 20%;
  background: var(--csm17-primary);
  border-radius: 4px;
  transition: width 0.25s ease;
}

.progress-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--csm17-gray-500);
  white-space: nowrap;
}

.question-title {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.45;
  margin: 0 0 28px;
  color: var(--csm17-black);
}

.option-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.option-btn {
  width: 100%;
  min-height: 56px;   /* 모바일 터치 편의를 위해 52px 이상으로 설정 */
  border-radius: 14px;
  border: 1.5px solid var(--csm17-gray-200);
  background: var(--csm17-white);
  color: var(--csm17-black);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.option-btn:active {
  border-color: var(--csm17-primary);
  background: var(--csm17-primary-light);
}

/* 버튼이 비활성화됐을 때 (예: 공부시간 0분 상태에서 '다음' 버튼) */
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn:disabled:active {
  transform: none;
}

/* ---------------------------------------------------------------- */
/* 하루 평균 공부시간 - 휠(스크롤) 선택기
   아래 --wheel-item-height 값을 바꾸면 휠 한 칸의 높이가 함께 바뀝니다. */
/* ---------------------------------------------------------------- */
.wheel-picker-wrap {
  --wheel-item-height: 44px;
  --wheel-visible-rows: 5;

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  height: calc(var(--wheel-item-height) * var(--wheel-visible-rows));
  margin: 28px 0 6px;
}

/* 가운데 선택 줄을 표시하는 강조 배경 */
.wheel-picker-highlight {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  height: var(--wheel-item-height);
  transform: translateY(-50%);
  background: var(--csm17-primary-light);
  border-radius: 12px;
  pointer-events: none;
  z-index: 0;
}

/* 위/아래 끝부분을 흰색으로 자연스럽게 흐려 보이게 하는 그라데이션 */
.wheel-picker-wrap::before,
.wheel-picker-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--wheel-item-height) * 1.6);
  pointer-events: none;
  z-index: 2;
}

.wheel-picker-wrap::before {
  top: 0;
  background: linear-gradient(to bottom, var(--csm17-white) 15%, rgba(255, 255, 255, 0));
}

.wheel-picker-wrap::after {
  bottom: 0;
  background: linear-gradient(to top, var(--csm17-white) 15%, rgba(255, 255, 255, 0));
}

.wheel-col {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wheel-list {
  list-style: none;
  margin: 0;
  padding: calc((var(--wheel-item-height) * (var(--wheel-visible-rows) - 1)) / 2) 0;
  width: 76px;
  height: calc(var(--wheel-item-height) * var(--wheel-visible-rows));
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  touch-action: pan-y;
  outline: none;
}

.wheel-list::-webkit-scrollbar {
  display: none;
}

.wheel-list.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

/* 24시간을 선택했을 때 분 휠은 0분으로 고정되고 조작이 잠깁니다 */
.wheel-list.is-locked {
  pointer-events: none;
}

.wheel-list li {
  height: var(--wheel-item-height);
  line-height: var(--wheel-item-height);
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--csm17-gray-500);
  scroll-snap-align: center;
  user-select: none;
  will-change: transform, opacity;
}

.wheel-list li.is-center {
  color: var(--csm17-black);
  font-size: 27px;
  font-weight: 800;
}

.wheel-unit {
  font-size: 15px;
  font-weight: 700;
  color: var(--csm17-gray-500);
}

.wheel-warning {
  text-align: center;
  font-size: 13px;
  color: var(--csm17-danger);
  font-weight: 600;
  margin: 4px 0 18px;
}

/* ---------------------------------------------------------------- */
/* ③ 계산 중 화면 (설문 마지막 답변 → 결과 화면 사이에 짧게 보여주는 전환 화면) */
/* ---------------------------------------------------------------- */
#screen-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  /* script.js가 화면을 보여줄 때 is-visible 클래스를 붙여서 서서히 나타나고,
     사라질 때는 이 클래스를 떼어서 서서히 옅어지도록 합니다. */
  opacity: 0;
  transition: opacity 0.25s ease;
}

#screen-loading.is-visible {
  opacity: 1;
}

.loading-content {
  width: 100%;
  text-align: center;
}

/* 도트 스타일 학생 일러스트가 숨쉬듯 살짝 위아래로 움직이는 Idle 애니메이션입니다.
   속도나 움직임 폭을 바꾸고 싶다면 아래 duration(2.2s)이나 translateY 값을 조절하세요. */
@keyframes loading-illustration-idle {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-6px) rotate(-1.5deg);
  }
}

.loading-illustration {
  width: 96px;
  height: auto;
  margin: 0 auto 18px;
  animation: loading-illustration-idle 2.2s ease-in-out infinite;
}

.loading-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--csm17-black);
  margin: 0 0 8px;
}

.loading-desc {
  font-size: 14px;
  color: var(--csm17-gray-500);
  margin: 0 0 28px;
}

.loading-progress-track {
  width: 200px;
  height: 6px;
  margin: 0 auto 16px;
  background: var(--csm17-gray-200);
  border-radius: 4px;
  overflow: hidden;
}

.loading-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--csm17-primary);
  border-radius: 4px;
  /* 채워지는 속도는 script.js에서 재생 시점에 transition-duration을 지정합니다. */
}

.loading-status {
  font-size: 13px;
  font-weight: 700;
  color: var(--csm17-primary);
  min-height: 18px;
  margin: 0;
  opacity: 1;
  transition: opacity 0.15s ease;
}

.loading-status.is-fading {
  opacity: 0;
}

/* ---------------------------------------------------------------- */
/* ④ 결과 화면 */
/* ---------------------------------------------------------------- */

/* 계산 중 화면이 끝난 뒤, 결과 화면이 부드럽게 나타나도록 하는 애니메이션입니다. */
@keyframes result-screen-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.screen-fade-in {
  animation: result-screen-fade-in 0.35s ease;
}

.result-card {
  background: var(--csm17-white);
  border: 1px solid var(--csm17-gray-200);
  border-radius: 18px;
  padding: 22px 20px;
  margin-bottom: 14px;
}

.result-card-dday {
  background: var(--csm17-primary);
  border: none;
}

.result-card-dday .result-label,
.result-card-dday .result-number-lg {
  color: var(--csm17-white);
}

/* 📊 나의 수학 페이스 등급 - 성향 테스트 결과 카드 같은 느낌을 주기 위해
   연한 그라데이션 배경과 중앙 정렬, 조금 더 두꺼운 테두리로 강조합니다. */
.result-card-pace-grade {
  background: linear-gradient(160deg, var(--csm17-primary-light) 0%, var(--csm17-white) 100%);
  border: 1.5px solid var(--csm17-primary-light);
  text-align: center;
  padding: 26px 20px 24px;
}

.result-card-pace-grade .result-label {
  text-align: center;
}

.pace-grade-title {
  font-size: 34px;
  font-weight: 800;
  color: var(--csm17-primary);
  margin: 2px 0 10px;
  line-height: 1.25;
}

.pace-grade-desc {
  font-size: 14px;
  font-weight: 500;
  color: var(--csm17-gray-900);
  line-height: 1.6;
  margin: 0;
  white-space: pre-line; /* 설명 문구의 줄바꿈(\n)을 그대로 반영합니다 */
  text-wrap: balance; /* 지원하는 브라우저에서 줄 길이를 균형 있게 맞춰줍니다 (미지원 브라우저는 그냥 무시됨) */
}

.result-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--csm17-gray-500);
  margin: 0 0 8px;
  text-wrap: balance;
}

/* 숫자는 크고 강하게 강조 */
.result-number-lg {
  font-size: 44px;
  font-weight: 800;
  color: var(--csm17-primary);
  margin: 0;
  line-height: 1.2;
}

.result-number-md {
  font-size: 26px;
  font-weight: 800;
  color: var(--csm17-black);
  margin: 0;
}

/* ------------------------------------------------------------------
   설명 문구 줄바꿈 관련 안내
   결과 화면의 긴 설명 문구들은 아래 두 가지를 함께 사용해서, 브라우저가
   아무 데서나 줄을 끊지 않고 최대한 자연스럽게 줄바꿈되도록 했습니다.
   1) text-wrap: balance - 지원 브라우저(최신 크롬/사파리 등)에서 줄
      길이를 알아서 균형 있게 맞춰줍니다. 미지원 브라우저에서는 그냥
      무시되고 기존처럼 보이므로 안전합니다.
   2) 문장이 고정적인 곳(예: "○○ 기준, ~했을 때" 뒤)은 script.js에서
      의미 단위로 <br />를 직접 넣어줍니다.
   ------------------------------------------------------------------ */
.result-sub {
  font-size: 13px;
  color: var(--csm17-gray-500);
  margin: 8px 0 0;
  line-height: 1.5;
  text-wrap: balance;
}

/* 부족한 시간 / 하루 추가 시간처럼, 문장 안에서도 눈에 띄어야 하는 안내문 */
.result-sub-lg {
  font-size: 16px;
  font-weight: 600;
  color: var(--csm17-black);
  margin: 0;
  line-height: 1.6;
  text-wrap: balance;
}

/* 문장 속 숫자만 크고 진하게 강조할 때 사용합니다. (예: 72시간) */
.num-emph {
  font-weight: 800;
  font-size: 1.2em;
  color: var(--csm17-primary);
}

.pace-bar-track {
  margin-top: 14px;
  height: 10px;
  background: var(--csm17-gray-100);
  border-radius: 6px;
  overflow: hidden;
}

.pace-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--csm17-primary);
  border-radius: 6px;
  transition: width 0.4s ease;
}

.result-warning {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--csm17-danger-bg);
  color: var(--csm17-danger);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  border-radius: 10px;
  text-wrap: balance;
}

.result-tip-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--csm17-gray-900);
  margin: 0;
  text-wrap: balance;
}

/* 저장/공유 버튼 위 공유 유도 문구 - 문구를 바꾸고 싶다면 index.html의
   .share-cta 안 텍스트만 수정하세요.
   위/아래 여백을 24px로 똑같이 맞췄습니다. (위쪽 카드의 margin-bottom: 14px,
   아래쪽 .result-actions의 margin-top: 24px보다 크거나 같게 설정해야,
   두 여백이 서로 겹쳐지는 CSS 특성상 실제로 위·아래가 같은 간격으로 보입니다.) */
.share-cta {
  margin: 24px 0;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--csm17-primary);
}

.result-actions {
  margin-top: 24px;
  text-align: center;
}

.copy-feedback {
  font-size: 13px;
  color: var(--csm17-primary);
  font-weight: 700;
  margin: 10px 0 0;
}

/* CSM17 교재 홍보 영역 - 왼쪽 문구 + 오른쪽 정사각 버튼을 한 줄에 나란히 배치합니다. */
.promo-row {
  display: flex;
  align-items: center;
  justify-content: center; /* 텍스트+버튼을 하나의 묶음으로 보고 가운데로 모아서, 양쪽 끝에 여백이 자연스럽게 생기게 합니다 */
  gap: 20px; /* 텍스트와 버튼 사이 간격 (이 값만 줄이면 더 가까워집니다) */
  margin-top: 28px;
  padding: 18px 26px; /* 좌우 여백을 더 넉넉하게 확보 */
  background: var(--csm17-gray-100);
  border: 1px solid var(--csm17-gray-200);
  border-radius: 18px;
}

.promo-text {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--csm17-gray-900);
}

/* 문구 옆에 작게 들어가는 화살표 */
.promo-arrow {
  font-size: 13px;
  font-weight: 700;
  color: var(--csm17-gray-900); /* 옆 문구(.promo-text)와 동일한 색상 */
}

.promo-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  min-height: 52px; /* 모바일 터치 편의를 위한 최소 높이 기준을 정사각 버튼에도 동일하게 적용 */
  border-radius: 16px;
  background: var(--csm17-primary);
  color: var(--csm17-white);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}

.promo-btn:active {
  background: var(--csm17-primary-dark);
}

.disclaimer {
  margin-top: 28px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--csm17-gray-500);
  text-align: center;
  text-wrap: balance;
}