/* ═══════════════════════════════════════════════════════════
   마인드 로그 — 공통 스타일시트 (style.css)

   디자인 기준
   ├─ 컬러  : design-ref/Color.pdf (Ionic 컬러 토큰)
   ├─ 컴포넌트 : design-ref/*.png (Ionic 컴포넌트 시트)
   ├─ 레이아웃 : design-ref/main-home.jpg (케어해 홈 — 흰 배경 + 라운드 카드)
   └─ 폰트  : Pretendard (jsDelivr 동적 서브셋)
═══════════════════════════════════════════════════════════ */

/* Pretendard 가변 폰트 — 유니코드 구간별 동적 서브셋 (실제 전송량 50~100KB) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');


/* ═══════════════════════════
   디자인 토큰
═══════════════════════════ */
:root {
  /* ── 브랜드 (Color.pdf: Primary / Secondary / Tertiary) ── */
  --c-primary:          #4955E2;
  --c-primary-shade:    #404BC7;
  --c-primary-tint:     #5B66E5;
  --c-secondary:        #3B72FF;
  --c-secondary-shade:  #3464E0;
  --c-secondary-tint:   #4F80FF;
  --c-tertiary:         #6D77E8;

  /* ── 상태 (Color.pdf: Success / Warning / Danger) ── */
  --c-success:          #2ABB75;
  --c-warning:          #FF753A;
  --c-danger:           #F8463B;

  /* ── 뉴트럴 (Color.pdf: Static / Light / Medium / Dark) ── */
  --c-white:            #FFFFFF;
  --c-bg:               #FFFFFF;
  --c-bg-alt:           #F8F8F8;   /* ion-background-alternative */
  --c-light:            #F2F2F2;   /* ion-color-light */
  --c-light-shade:      #D5D5D5;
  --c-medium:           #595959;   /* ion-color-medium */
  --c-medium-tint:      #6A6A6A;
  --c-dark:             #222222;   /* ion-color-dark / ion-text-color */

  /* ── 텍스트 위계 ── */
  --c-text:             #222222;
  --c-text-muted:       #595959;
  --c-text-subtle:      #6E6E73;   /* 흰 배경 대비 5.07 (AA) */
  --c-text-disabled:    #B0B0B0;
  --c-text-on-brand:    #FFFFFF;

  /* ── 보더 / 구분선 ── */
  --c-border:           #E5E5E5;
  --c-border-strong:    #D1D1D6;

  /* ── 서피스 틴트 (main-home.jpg 히어로 카드 계열) ── */
  --c-primary-050:      #EEF0FD;
  --c-primary-100:      #DDE0FA;
  --c-secondary-050:    #EBF1FF;

  /* ═══ 타이포그래피 ═══
     Ionic 컴포넌트 시트의 Title / subtitle / note / overline 위계와
     main-home.jpg의 본문 크기에서 역산한 스케일입니다. */
  --ff: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
        system-ui, Roboto, 'Segoe UI', 'Apple SD Gothic Neo', sans-serif;

  --fs-display:  28px;   /* 앱 타이틀 */
  --fs-h1:       24px;
  --fs-h2:       20px;   /* 화면 제목 */
  --fs-title:    17px;   /* 문항 텍스트 · 카드 제목 */
  --fs-body:     15px;   /* 본문 · 선지 */
  --fs-label:    14px;   /* 폼 라벨 · 버튼 */
  --fs-caption:  13px;   /* 설명문 */
  --fs-note:     12px;   /* 보조 정보 (Ionic note) */
  --fs-overline: 11px;   /* 워터마크 · 라벨 (Ionic overline) */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:    1.3;
  --lh-snug:     1.45;
  --lh-normal:   1.6;
  --lh-relaxed:  1.75;

  --ls-tight:   -0.02em;   /* 큰 제목: 한글은 조금 좁혀야 균형이 맞습니다 */
  --ls-normal:   0;
  --ls-wide:     0.06em;   /* overline */

  /* ═══ 간격 (4px 베이스) ═══ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ═══ 라운드 ═══ */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-full: 999px;

  /* ═══ 그림자 ═══ */
  --sh-card:   0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --sh-raised: 0 4px 16px rgba(0, 0, 0, 0.08);
  --sh-sticky: 0 -4px 16px rgba(0, 0, 0, 0.06);

  /* ═══ 전환 ═══ */
  --tr-fast: 0.15s ease;
  --tr-base: 0.25s ease;
}


/* ═══════════════════════════
   리셋 · 기본
═══════════════════════════ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--c-bg);
  min-height: 100vh;
  font-family: var(--ff);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input {
  font-family: inherit;
}


/* ═══════════════════════════
   화면 컨테이너
═══════════════════════════ */
.screen {
  width: 390px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-12) var(--sp-6) var(--sp-10);
  background-color: var(--c-bg);
}


/* ═══════════════════════════
   홈 화면
═══════════════════════════ */

/* 앱 타이틀 */
.title {
  width: 100%;
  text-align: center;
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--c-text);
}

/* 타이틀 로고 — 아래 히어로 카드와 같은 가로 폭 */
.title-logo-wrap {
  display: block;
  width: 100%;
  overflow: hidden;   /* 로고 PNG의 투명 여백을 잘라냄 */
}

/* mindlog_logo.png는 좌우에 각각 약 6.8%의 투명 여백이 있어
   115.8%로 확대하고 절반(7.9%)만큼 왼쪽으로 당겨 글자가 양 끝에 닿게 함 */
.title-logo {
  display: block;
  width: 115.8%;
  margin-left: -7.9%;
}

/* 히어로 카드 — main-home.jpg의 연블루 배너 카드 */
.home-hero {
  width: 100%;
  margin: var(--sp-6) 0;
  /* 상하좌우 동일한 24px 여백 — 메인 이미지의 좌우 여백을 상단 여백과 맞춤 */
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: var(--c-primary-050);
  border-radius: var(--r-lg);
}

.home-hero-img {
  width: 100%;   /* 카드 패딩(24px)만 남기고 가로를 꽉 채움 */
  object-fit: contain;
}

/* 히어로 카드 안내 문구 */
.home-hero-caption {
  margin-top: var(--sp-6);
  text-align: center;
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--c-primary-shade);
}

/* 히어로 카드 보조 설명 (안내 문구 아래, 레귤러 두께 3줄) */
.home-hero-desc {
  margin-top: var(--sp-3);
  text-align: center;
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--c-primary-shade);
}

/* 히어로 카드 검사 안내 박스 — 보조 설명과 동일 디자인, 글씨만 3px 작게 */
.home-hero-notice {
  width: 100%;
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background-color: rgba(255, 255, 255, 0.72);
  border-radius: var(--r-md);
  text-align: center;
  font-size: calc(var(--fs-body) - 3px);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--c-primary-shade);
  word-break: keep-all;
}

.hero-image {
  width: 296px;
  max-width: 90%;
  margin-top: var(--sp-8);
}


/* ═══════════════════════════
   홈 사용자 정보 입력 폼
═══════════════════════════ */
.home-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.form-row {
  display: flex;
  align-items: center;
}

/* 라벨 (Ionic Input 시트의 Fixed label 위계) */
.form-label {
  width: 64px;
  flex-shrink: 0;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

.form-control {
  flex: 1;
  min-width: 0;
}

/* 입력 박스 (닉네임 · 연도) */
.form-input-box {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 var(--sp-4);
  background-color: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}

.form-input-box:focus-within {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(73, 85, 226, 0.12);
}

.form-text-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--c-text);
}

/* 박스 안내 문구 (Ionic helper text) */
.form-hint {
  font-size: var(--fs-note);
  font-weight: var(--fw-regular);
  color: var(--c-text-subtle);
  flex-shrink: 0;
  margin-left: var(--sp-2);
}

/* 성별 라디오 */
.form-gender {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.gender-opt {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--c-text);
}

/* 라디오 (Ionic Radio) — 미선택 시 회색 링, 선택 시 Primary 링 + 내부 점 */
.gender-opt input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--c-border-strong);
  border-radius: 50%;
  background-color: var(--c-white);
  cursor: pointer;
  transition: border-color var(--tr-fast), background-image var(--tr-fast);
}

.gender-opt input[type="radio"]:checked {
  border-color: var(--c-primary);
  background-image: radial-gradient(circle, var(--c-primary) 0 5px, transparent 5px);
}

/* 연도 선택 (Ionic Select — 클릭 시 아래로 펼쳐지는 목록) */
.year-field {
  position: relative;
}

.year-box {
  width: 100%;
  justify-content: center;
  cursor: pointer;
}

.year-value.form-hint {
  margin-left: 0;
  text-align: center;
}

/* 선택된 연도 */
.year-selected {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--c-text);
}

.year-dropdown {
  position: absolute;
  top: calc(100% + var(--sp-1));
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background-color: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-raised);
  padding: var(--sp-1) 0;
  z-index: 20;
}

.year-option {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  padding: 10px var(--sp-4);
  text-align: center;
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--c-text);
  cursor: pointer;
  transition: background-color var(--tr-fast);
}

.year-option:hover {
  background-color: var(--c-primary-050);
  color: var(--c-primary);
}

/* 개인정보 처리 안내 (나이 박스 아래) */
.form-row-group .rc-disclaimer {
  margin-top: var(--sp-2);
  text-align: left;
}

/* 저장 안내 문구 — home-form의 gap 16px을 음수 마진으로 상쇄 */
.save-hint {
  margin: -2px 0 calc(-1 * var(--sp-2));
  text-align: center;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
}

/* 저장 버튼 (Ionic Button — Small / Contained)
   배경·글자색은 script.js의 setButtonEnabled()가 상태에 따라 지정합니다. */
.btn-home-save {
  align-self: center;
  min-width: 96px;
  height: 40px;
  padding: 0 var(--sp-5);
  border: none;
  border-radius: var(--r-md);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background-color var(--tr-fast), opacity var(--tr-fast);
}

.btn-home-save:not(:disabled):active {
  opacity: 0.8;
}

.btn-home-save:disabled,
.btn-phq:disabled,
.btn-gad:disabled {
  cursor: default;
}

/* 검사 선택 버튼 영역 */
.buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

#view-home .buttons {
  margin-top: var(--sp-8);
}

/* 메인 홈 테스트 공유하기 버튼 — 검사 버튼 사이 간격(12px)과 동일하게 */
#view-home .btn-restart {
  margin-top: var(--sp-3);
}

/* 검사 시작 버튼 (Ionic Button — Large / Contained)
   배경·글자색은 script.js의 setButtonEnabled()가 상태에 따라 지정합니다. */
.btn-phq,
.btn-gad {
  width: 100%;
  height: 56px;
  border: none;
  border-radius: var(--r-md);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background-color var(--tr-fast), opacity var(--tr-fast);
}

.btn-phq:not(:disabled):active,
.btn-gad:not(:disabled):active {
  opacity: 0.85;
}


/* ═══════════════════════════
   문항 / 결과 공통 (서브 화면)
═══════════════════════════ */
.sub-screen {
  align-items: stretch;
  padding: var(--sp-6) var(--sp-6) var(--sp-10);
}

/* 상단 헤더 (Ionic Toolbar) */
.sub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  margin-bottom: var(--sp-4);
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  padding: var(--sp-1) 0;
  line-height: 1;
  transition: color var(--tr-fast);
}

.btn-back:hover {
  color: var(--c-primary);
}

.btn-back:active {
  opacity: 0.6;
}

.progress-label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--c-text-subtle);
  font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════
   진행 바 (Ionic Progress Indicator)
═══════════════════════════ */
.progress-track {
  width: 100%;
  height: 4px;
  background-color: var(--c-light);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-bottom: var(--sp-6);
}

.progress-fill {
  height: 100%;
  border-radius: var(--r-full);
  transition: width 0.35s ease;
}


/* ═══════════════════════════
   문항 영역
═══════════════════════════ */
/* 절취선 상단 (구조 유지용 — 표시하지 않습니다) */
.q-spring {
  display: none;
}

/* 소제목 밴드 */
.q-subtitle-wrap {
  background-color: var(--c-bg-alt);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-3);
}

.q-subtitle {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
  line-height: var(--lh-snug);
  text-align: center;
}

/* 문항 카드 (Ionic Card) */
.q-wrap {
  flex: 1;
  margin-bottom: var(--sp-6);
  background-color: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  padding: var(--sp-6) var(--sp-5);
}

/* 문항별 정사각형 일러스트 */
.q-image {
  display: block;
  height: 134.4px;
  width: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0 auto var(--sp-4);
}

.q-text {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  line-height: var(--lh-snug);
  word-break: keep-all;
  text-align: center;
}


/* ═══════════════════════════
   선지 버튼 (Ionic Button — Outline)
═══════════════════════════ */
.answer-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.btn-answer {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background-color: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: center;
  transition: background-color var(--tr-fast), border-color var(--tr-fast),
              color var(--tr-fast);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--c-text);
}

.btn-answer:hover,
.btn-answer:active {
  /* --accent 는 script.js가 검사별 브랜드 색으로 주입합니다 */
  background-color: var(--c-primary-050);
  background-color: color-mix(in srgb, var(--accent, #4955E2) 8%, #FFFFFF);
  border-color: var(--accent, var(--c-primary));
  color: var(--accent, var(--c-primary));
}

.btn-answer:active {
  opacity: 0.9;
}

/* 선지 점수 숫자 */
.ans-score {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--accent-score, var(--c-primary));
  flex-shrink: 0;
  line-height: 1;
}

.ans-label {
  font: inherit;
  color: inherit;
  line-height: var(--lh-snug);
  word-break: keep-all;
}


/* ═══════════════════════════
   문항 화면 고정 레이아웃 (모바일)
═══════════════════════════ */
#view-question {
  height: 100vh;
  overflow: hidden;
  padding-bottom: 0;
}

#view-question .progress-track {
  margin-bottom: var(--sp-5);
}

#view-question .q-wrap {
  height: auto;
  flex: none;
  overflow-y: visible;
  margin-bottom: 0;
}

/* 화면 하단에 고정되는 선지 영역 */
#view-question .answer-list {
  position: fixed;
  bottom: max(0px, calc(100vh - 690px));
  left: 50%;
  transform: translateX(-50%);
  width: 390px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  background-color: var(--c-bg);
  z-index: 10;
}


/* ═══════════════════════════
   결과 카드 (이미지 캡처 대상)
   배경색은 script.js의 getCardColor()가 점수 단계별로 지정합니다.
═══════════════════════════ */
.result-card {
  padding: var(--sp-6) var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: var(--r-xl);
  margin-bottom: var(--sp-5);
}

/* 카드 헤더 — (좌) 로고 / (우) 평가일 */
.rc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* 로고 — mindlog_logo.png의 좌우 투명 여백(각 약 6.8%)만큼 왼쪽으로 당겨
   카드 좌측 패딩에 글자가 맞닿게 함 */
.rc-logo {
  display: block;
  height: 16px;
  width: auto;
  margin-left: -1.1px;
}

/* 평가일 — 색상은 script.js가 검사별 보조 텍스트 색으로 지정 */
.rc-date {
  font-size: var(--fs-overline);
  font-weight: var(--fw-regular);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rc-main-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--sp-5);
}

/* 프로필 박스 */
.rc-profile-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: transparent;
  border-radius: var(--r-lg);
  flex-shrink: 0;
  overflow: hidden;
}

.rc-profile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-lg);
  display: block;
}

/* 닉네임 ("{닉네임}님의 결과는?") — 색상은 script.js가 검사별로 지정 */
.result-nickname {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-align: center;
  word-break: keep-all;
  margin: var(--sp-4) 0;
}

.result-nickname:empty {
  display: none;
}

/* 검사명 · 총점 · 상태 열 */
.rc-info-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  margin-top: 0;
}

.rc-test-name {
  font-size: var(--fs-note);
  font-weight: var(--fw-medium);
  word-break: keep-all;
  text-align: center;
}

.rc-score-row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--sp-2);
}

.rc-score-label {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

.rc-score-val {
  font-size: 44px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.rc-level {
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  word-break: keep-all;
  text-align: center;
}

/* 설명 박스 */
.rc-desc-box {
  background-color: rgba(255, 255, 255, 0.72);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-4);
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 권고 문구 박스 — 설명 박스와 동일 디자인, 박스 사이 여백만 추가 */
.rc-advice-box {
  margin-top: var(--sp-3);
}

.rc-help-box {
  margin-top: var(--sp-3);
  background-color: rgba(255, 255, 255, 0.45);
  flex-direction: column;
  align-items: center;
}

.rc-help-last {
  margin-top: var(--sp-5);
  font-weight: var(--fw-semibold);
}

.rc-desc {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--c-text-muted);
  line-height: var(--lh-relaxed);
  word-break: keep-all;
  text-align: center;
}

/* 면책 문구 */
.rc-disclaimer {
  font-size: 10px;
  font-weight: var(--fw-regular);
  color: var(--c-text-subtle);
  line-height: var(--lh-snug);
  word-break: keep-all;
  text-align: center;
  margin-top: var(--sp-3);
}

/* 결과 카드 안에서는 틴트 배경 위에 바로 놓이므로 더 진한 색을 씁니다.
   (가장 진한 단계 배경에서도 대비 5.1 이상) */
.result-card .rc-disclaimer {
  color: #3A3A3C;
}


/* ═══════════════════════════
   결과 하단 버튼
═══════════════════════════ */
.result-actions {
  display: flex;
  gap: var(--sp-2);
}

.btn-action {
  flex: 1;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border: none;
  border-radius: var(--r-md);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  word-break: keep-all;
  transition: background-color var(--tr-fast), opacity var(--tr-fast);
}

.btn-action:active {
  opacity: 0.85;
}

/* 결과 이미지 저장 — 주 액션. 배경·글자색은 script.js가 검사별로 지정 */
.btn-save {
  background-color: var(--c-primary);
  color: var(--c-text-on-brand);
}

/* 보조 액션 (Ionic Button — Light) */
.btn-share {
  background-color: var(--c-light);
  color: var(--c-text);
}

.btn-share:hover {
  background-color: var(--c-light-shade);
}

/* 모든 결과 보기 / 테스트 다시하기 / 테스트 공유하기 */
.btn-restart,
.btn-all-results {
  width: 100%;
  height: 52px;
  margin-top: var(--sp-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background-color: var(--c-white);
  color: var(--c-text);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background-color var(--tr-fast), border-color var(--tr-fast),
              color var(--tr-fast), opacity var(--tr-fast);
}

.btn-restart:hover,
.btn-all-results:hover {
  background-color: var(--c-primary-050);
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.btn-restart:active,
.btn-all-results:active {
  opacity: 0.85;
}

/* 아이콘+텍스트: 텍스트를 버튼 중앙에 두고 아이콘은 텍스트 왼쪽에 절대배치 */
.btn-ico-label {
  position: relative;
  display: inline-block;
}

.btn-ico-label svg {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: var(--sp-2);
}

/* 케어해 배너 */
.btn-health-check-banner {
  display: block;
  margin-top: var(--sp-5);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-card);
}

.btn-health-check-banner img {
  display: block;
  width: 100%;
}


/* ═══════════════════════════
   모든 결과 보기 화면
═══════════════════════════ */
.all-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  text-align: center;
  margin-bottom: var(--sp-5);
}

.all-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* 단계 카드 (Ionic Card) — 배경은 script.js가 단계별로 지정 */
.all-card {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: box-shadow var(--tr-fast);
}

.all-card:hover {
  box-shadow: var(--sh-card);
}

.all-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-md);
  display: block;
}

.all-card-name {
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  text-align: center;
  margin-top: var(--sp-4);
}

/* 단계 상세 설명 — 기본 숨김, 카드 터치 시 펼쳐짐 */
.all-card-desc {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--c-text-muted);
  line-height: var(--lh-relaxed);
  word-break: keep-all;
  text-align: center;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  transition: max-height 0.32s ease, opacity var(--tr-base), margin-top 0.32s ease;
}

.all-card.open .all-card-desc {
  max-height: 600px;
  opacity: 1;
  margin-top: var(--sp-3);
}

.all-actions {
  margin-top: var(--sp-6);
}

/* 테스트 다시하기 (절반 폭) */
.btn-restart-half {
  background-color: var(--c-light);
  color: var(--c-text);
}

.btn-restart-half:hover {
  background-color: var(--c-light-shade);
}


/* ═══════════════════════════
   토스트 (Ionic Toast)
═══════════════════════════ */
.toast {
  position: fixed;
  bottom: var(--sp-10);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background-color: var(--c-dark);
  color: var(--c-white);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  box-shadow: var(--sh-raised);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tr-base), transform var(--tr-base);
  white-space: nowrap;
  z-index: 999;
}

.toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}