/*
 * home.css
 * home.php (메인/홈) 전용 스타일.
 * 색상·타이포·간격은 tokens.css 의 var(--*) 토큰만 사용하고,
 * 공용 프리미티브(.box, .badge, .grid-list 등)는 components.css 를 재사용한다.
 */

/* ============================================================
 * Layout
 * ============================================================ */
#main-wrap {
  /* report.css 의 --report-padding-x 와 동일 수치 (디자인 좌우 84px) */
  --home-padding-x: clamp(2rem, 11.667vw, 8.4rem);

  background: var(--bg);
}

.home-main .tit-section,
.home-main .main-section {
  /* padding-right: var(--home-padding-x); */
  /* padding-left: var(--home-padding-x); */
}

.home-main .tit-section {
  padding-top: clamp(6rem, 11.111vw, 8rem);
}

.main-section {
  margin-top: clamp(2.8rem, 5.556vw, 4rem);
}

.main-section:last-child {
  padding-bottom: clamp(3.2rem, 6.667vw, 4.8rem);
}

/* ============================================================
 * link-section (#link-section) — 메인 바로가기 그리드
 * ============================================================ */
#link-section {
  margin-top: clamp(1.2rem, 2.222vw, 1.6rem);
}

.link-list {
  gap: clamp(1.2rem, 2.778vw, 2rem);
}

.link-list .box {
  height: 100%;
}

.link-list .box .icon {
  width: clamp(4rem, 7.778vw, 5.6rem);
  height: clamp(4rem, 7.778vw, 5.6rem);
  padding: clamp(0.8rem, 1.389vw, 1rem);
  border-radius: var(--radius-15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-gray);
}

.link-list .box dl {
  margin-top: clamp(1.6rem, 3.333vw, 2.4rem);
}

/* 디자인 스펙: 링크 리스트 dt — 22px / 600 / #191F28 */
.link-list .box dt {
  font-size: var(--fz-22);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

/* 디자인 스펙: 링크 리스트 dd — 17px / 400 / #4E5968 */
.link-list .box dd {
  margin-top: clamp(0.4rem, 1.111vw, 0.8rem);
  font-size: var(--fz-17);
  font-weight: var(--fw-regular);
  color: var(--text-sub);
  word-break: keep-all;
}

/* ============================================================
 * quiz-section (#quiz-section) — 주차 상식 퀴즈
 * ============================================================ */
#quiz-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* 뱃지(18px/700/#3182F6/#E9F1FD/0 3rem/10rem)는 components.css 의 .badge 그대로 사용 */

/* 디자인 스펙: 퀴즈 질문 — 28px / 600 / #191F28 */
.quiz-con .quiz-question {
  margin-top: clamp(1.6rem, 3.333vw, 2.4rem);
  font-size: var(--fz-28);
  font-weight: var(--fw-semibold);
  line-height: var(--line-height-base);
  color: var(--text);
}

/* 보기 폼 — radio 는 sr-only, label 이 실제 보기 버튼 */
.quiz-form {
  margin-top: clamp(3rem, 4.444vw, 4.2rem);
}

.quiz-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.778vw, 2rem);
}

.quiz-options > li {
  display: flex;
}

/* 디자인 스펙: 보기 버튼 텍스트 — 28px / 600 */
.quiz-options label {
  width: 100%;
  min-height: clamp(6rem, 11.111vw, 8rem);
  padding: clamp(1.2rem, 2.222vw, 1.6rem);
  border-radius: var(--radius-15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.222vw, 1.6rem);
  font-size: var(--fz-28);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.quiz-options label .icon {
  width: clamp(2.8rem, 5.556vw, 4rem);
  height: clamp(2.8rem, 5.556vw, 4rem);
}

.quiz-options label .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 그렇다 — #3182F6 / 아니다 — #D93528 */
#answer_yes + label {
  color: var(--primary);
  background: var(--surface-blue);
}

#answer_no + label {
  color: var(--danger);
  background: var(--surface-red);
}

.quiz-options input[type="radio"]:focus-visible + label {
  outline: var(--border-2) solid var(--primary);
  outline-offset: 0.2rem;
}

/* 결과 카드 헤더 (아이콘 + 정답/오답 문구) */
.quiz-result {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.778vw, 2rem);
}

.quiz-result .icon {
  width: clamp(2.8rem, 5.556vw, 4rem);
  height: clamp(2.8rem, 5.556vw, 4rem);
}

.quiz-result__icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* JS 가 hidden 으로 정답/오답을 토글 — reset 의 img{display:block} 을 이겨 확실히 숨김 */
.quiz-result__icon[hidden],
.quiz-result__text[hidden] {
  display: none;
}

/* 디자인 스펙: 결과 타이틀 — 28px / 600, 틀렸어요! #D93528 / 정답이에요! #3182F6 */
.quiz-result b {
  font-size: var(--fz-28);
  font-weight: var(--fw-semibold);
}

.quiz-result-con.is-wrong .quiz-result b {
  color: var(--danger);
}

.quiz-result-con.is-correct .quiz-result b {
  color: var(--primary);
}

/* 해설 영역 — 정답/오답에 따라 bg 색상만 분기 (정답: 연블루 / 오답: 연레드) */
.quiz-answer {
  margin-top: clamp(2rem, 4.444vw, 3.2rem);
  padding: clamp(1.6rem, 3.333vw, 2.4rem);
  border-radius: var(--radius-15);
  display: flex;
  align-items: flex-start;
  gap: clamp(1.2rem, 2.778vw, 2rem);
  background: var(--bg);
}

.quiz-answer .icon {
  flex: 0 0 clamp(2.4rem, 4.444vw, 3.2rem);
  width: clamp(2.4rem, 4.444vw, 3.2rem);
  height: clamp(2.4rem, 4.444vw, 3.2rem);
}

.quiz-answer .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 디자인 스펙: 결과 description — 22px / 500 / #4E5968 */
.quiz-answer p {
  font-size: var(--fz-22);
  font-weight: var(--fw-medium);
  line-height: 1.8;
  color: var(--text-sub);
}

.quiz-result-con.is-correct .quiz-answer {
  background: var(--surface-blue);
}

.quiz-result-con.is-wrong .quiz-answer {
  background: var(--surface-red);
}

/* 디자인 스펙: 다시 풀기 버튼 — 23px / 600 / #4E5968 */
.quiz-result-con .btn {
  margin-top: clamp(2rem, 4.444vw, 3.2rem);
}

.quiz-result-con .quiz-retry {
  width: 100%;
  min-height: clamp(6rem, 11.111vw, 8rem);
  border-radius: var(--radius-10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fz-23);
  font-weight: var(--fw-semibold);
  color: var(--text-sub);
  background: #ededed;
  cursor: pointer;
}

/* ============================================================
 * fact-section (#fact-section) — 루머 팩트체크 아코디언
 * ============================================================ */

/* 디자인 스펙: 팩트체크 타이틀 — 25px / 600 / #191F28 */
#fact-section h3 {
  margin-bottom: clamp(3rem, 5.556vw, 4rem);
  font-size: var(--fz-25);
  font-weight: var(--fw-semibold);
  line-height: var(--line-height-base);
  color: var(--text);
}

.accordion-list {
  display: flex;
  flex-direction: column;
}

/* 항목 사이 구분선은 아이콘 칼럼까지 포함한 전체 폭 */
.accordion-item {
  padding: clamp(2rem, 4.444vw, 3.2rem) 0;
  border-bottom: var(--border-1) solid var(--line-strong);
  display: flex;
  align-items: flex-start;
  gap: clamp(1.2rem, 2.778vw, 2rem);
}

.accordion-item:first-child {
  padding-top: 0;
}

.accordion-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.accordion-item > .icon {
  flex: 0 0 clamp(2.8rem, 5.556vw, 4rem);
  width: clamp(2.8rem, 5.556vw, 4rem);
  height: clamp(2.8rem, 5.556vw, 4rem);
}

.accordion-item > .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.accordion-con {
  flex: 1 1 auto;
  min-width: 0;
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
}

/* 디자인 스펙: 팩트 질문 — 24px / 500 / #191F28 */
.accordion-header b {
  font-size: var(--fz-24);
  font-weight: var(--fw-medium);
  line-height: 1.8;
  color: var(--text);
}

.accordion-header .icon {
  flex: 0 0 clamp(1.6rem, 2.778vw, 2rem);
  width: clamp(1.6rem, 2.778vw, 2rem);
  height: clamp(1.6rem, 2.778vw, 2rem);
}

.accordion-header .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* 열고 닫히는 영역 — display 는 JS(slideDown/slideUp)가 인라인으로 제어.
   초기 깜빡임 방지를 위해 기본은 닫힘 상태. */
.accordion-panel {
  display: none;
  overflow: hidden;
}

/* 디자인 스펙: 팩트 답 — 21px / 400 / #4E5968 */
.accordion-panel p {
  padding-top: clamp(1.6rem, 3.333vw, 2.4rem);
  font-size: var(--fz-21);
  font-weight: var(--fw-regular);
  line-height: 1.8;
  color: var(--text-sub);
}

/* 열린 상태 — 화살표 회전 */
.accordion-item.is-open .accordion-header .icon img {
  transform: rotate(90deg);
}