/* =========================================================
 * layout.question.v2.css — 몽실몽실 질문 레이아웃 V2
 * ---------------------------------------------------------
 * [코드 절대 규칙]
 * 1) 기존 스타일 삭제·덮어쓰기 최소화.
 * 2) .layout-v2 스코프 안에서만 동작 (옵트인 방식).
 * 3) 색상은 기존 카테고리 테마(style.css)에 위임.
 *    여기서는 레이아웃·여백·폰트 크기 중심으로만 조정.
 * ========================================================= */

/* 
 * 이 파일은 .layout-v2 클래스를 가진 조상 안에서만 작동합니다.
 * 예)
 *  - body.layout-v2 .test ...
 *  - #plant-app.layout-v2 .card-q ...
 */

/* ---------- 공통 래퍼 ---------- */
.layout-v2 .test{
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 12px 80px;
}

/* 메타(진행률 영역) */
.layout-v2 .meta{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 12px;
}
.layout-v2 .meta #stepLabel{
  font-weight: 800;
  min-width: 64px;
}

/* 기존 .bar 스타일은 style.css 것을 활용 (여기서는 보정만) */
.layout-v2 .meta .bar{
  flex: 1;
}

/* ---------- 질문 카드 ---------- */
.layout-v2 .card-q{
  background: #fff;
  border-radius: var(--radius, 18px);
  border: 1px solid var(--line, #5e493d22);
  box-shadow: var(--shadow, 0 6px 18px rgba(0,0,0,.06));
  padding: clamp(14px, 2.4vw, 18px);
  margin-top: 8px;

    /* [추가] V2에서는 카드가 테스트 영역 전체를 쓰도록 */
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* 질문 텍스트 */
.layout-v2 .card-q .q-text{
  font-weight: 800;
  margin: 4px 2px 12px;
  line-height: 1.6;
}

/* 안내 문구 */
.layout-v2 .card-q .note{
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--text-soft, #5e5e5e);
}

/* ---------- 선택지 영역 ---------- */
.layout-v2 .choices{
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 기본 버튼 레이아웃 (색상은 카테고리 테마에서 지정) */
.layout-v2 .choices .choice{
  width: 100%;
  display: block;
  text-align: center;
  border-radius: 14px;
  padding: 13px 14px;
  font-weight: 700;
  border: 1px solid var(--line, #5e493d22);
  background: #ffffff;
  color: var(--text-soft, #5e5e5e);
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  transition:
    background .2s ease,
    transform .06s ease,
    box-shadow .2s ease,
    border-color .2s ease;
  cursor: pointer;
  touch-action: manipulation;
}

/* hover/active는 부드럽게 — 색상은 기존 카테고리 규칙 유지 */
.layout-v2 .choices .choice:hover{
  transform: scale(.995);
}
.layout-v2 .choices .choice:active{
  transform: scale(.99);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* 선택 상태: 색은 기존 .card-q.fun/.love/.mind 규칙을 따르도록
   여기서는 굵기·테두리만 살짝 보정 */
.layout-v2 .choices .choice.selected{
  font-weight: 800;
  border-color: transparent;
}

/* ghost 버튼은 스타일 유지하되, 여백만 보정 */
.layout-v2 .navs{
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.layout-v2 .navs .ghost{
  flex: 1;
  justify-content: center;
}

/* ---------- 결과 카드와의 간격 ---------- */
.layout-v2 #result .result-card{
  margin-top: 12px;
}

/* ---------- 반응형 보정 ---------- */
@media (max-width: 640px){
  .layout-v2 .test{
    padding: 8px 10px 80px;
  }
  .layout-v2 .card-q{
    padding: 14px 12px;
  }
  .layout-v2 .choices .choice{
    padding: 13px 12px;
    font-size: 0.95rem;
  }
  .layout-v2 .navs{
    flex-direction: row;
  }
}

@media (min-width: 641px) and (max-width: 960px){
  .layout-v2 .test{
    padding: 12px 16px 90px;
  }
}

/* 매우 큰 화면에서 카드 폭 제한 */
@media (min-width: 1200px){
  .layout-v2 .test{
    max-width: 880px;
  }
}


/* [추가] Fun 테마용 선택 강조 */
[data-theme="fun"] .choices .choice.selected {
  background: #ffecc2;
  border-color: #fcb84d;
  color: #5e493d;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(252,184,77,0.25);
}

/* [보정] 레이아웃 우선순위 강제 */
body.layout-v2 .card-q {
  position: relative;
  z-index: 2;
}

/* =========================================================
 * [추가] 도파민형 질문 레이아웃 공통 적용
 * - 폭 넓게, 카드가 화면 가운데에 크게 보이도록
 * - 기존 style.css 는 그대로 두고, .layout-v2 에서만 오버라이드
 * ========================================================= */

/* 데스크톱 기준 (도파민 레이아웃 느낌) */
@media (min-width: 900px){
  body.layout-v2 .test{
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 24px 96px;
  }

  body.layout-v2 .meta{
    max-width: 360px;
    margin: 8px 0 20px;
  }

  body.layout-v2 .card-q{
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 720px;          /* ← 질문 카드 폭 */
    padding: 20px 24px;
  }

  body.layout-v2 .choices .choice{
    padding: 14px 18px;
    font-size: 0.97rem;
  }
}

/* 태블릿: 카드가 중앙에 넓게 보이도록 */
@media (min-width: 640px) and (max-width: 899px){
  body.layout-v2 .test{
    max-width: 900px;
    padding: 16px 18px 90px;
  }

  body.layout-v2 .card-q{
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* =========================================================
 * [최종 보정] 레이아웃 V2: 인덱스용 grid 레이아웃 해제
 * - main.test 를 다시 블록 레이아웃으로 되돌림
 * - 질문 카드는 테스트 영역 전체를 쓰도록
 * ========================================================= */

/* 인덱스용 main { display:grid; ... } 덮어쓰기 */
body.layout-v2 main.test {
  display: block;              /* grid → block */
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 24px 96px;
  grid-template-columns: none; /* 혹시 남아있을 grid 설정 무효화 */
}

/* 질문 카드 폭을 테스트 영역 전체로 사용 */
body.layout-v2 main.test > section.card-q {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.mode-card.hidden { display:none !important; }