/* Created: 2026-03-16 */

/* ─────────────────────────────────────────
   CSS Custom Properties — Payletter 브랜드
   primary  : #00B7AA (teal)
   secondary: #00284D (navy)
───────────────────────────────────────── */
:root {
  --color-primary:   #00B7AA;
  --color-secondary: #00284D;
  --color-bg:        #F0FAFA;
  --color-card:      #FFFFFF;
  --color-text:      #00284D;
  --color-muted:     #4D7A87;

  --radius-card:  24px;
  --radius-btn:   14px;
  --shadow-card:  0 4px 24px rgba(0, 183, 170, 0.12);
  --shadow-btn:   0 4px 14px rgba(0, 183, 170, 0.28);
  --transition:   0.2s ease;
}

/* ─────────────────────────────────────────
   Reset & Base
───────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 모바일 300ms 탭 딜레이 제거 */
button, a, input, select, textarea,
.btn, .choice-btn, .btn-icon {
  touch-action: manipulation;
}

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

body {
  font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100dvh;
  line-height: 1.6;
}

/* ─────────────────────────────────────────
   Screen 공통 레이아웃
───────────────────────────────────────── */
.screen {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.screen__inner {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* FadeIn 애니메이션 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.screen--active {
  animation: fadeIn 0.35s ease forwards;
}

/* ─────────────────────────────────────────
   인트로 화면
───────────────────────────────────────── */
.intro__logo {
  text-align: center;
}

.logo-text {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.02em;
}

.intro__hero {
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 40px 32px;
  text-align: center;
}

.hero-emoji {
  font-size: 4rem;
  margin-bottom: 16px;
  line-height: 1;
}

.intro__title {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: 12px;
}

.intro__desc {
  font-size: 0.95rem;
  color: var(--color-muted);
  line-height: 1.7;
}

/* ── 닉네임 입력 필드 ────────────────────── */
.intro__name-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.intro__name-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-muted);
}

.intro__name-field input[type="text"] {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid rgba(0, 183, 170, 0.20);
  border-radius: 14px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-card);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.intro__name-field input[type="text"]:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 183, 170, 0.12);
}

.intro__name-error {
  font-size: 0.82rem;
  color: #e53e3e;
  min-height: 18px;
  font-weight: 500;
}

.intro__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ─────────────────────────────────────────
   버튼
───────────────────────────────────────── */
.btn {
  width: 100%;
  padding: 16px 24px;
  border: none;
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  letter-spacing: -0.01em;
}

.btn--primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-btn);
}

.btn--primary:hover {
  background: #009991;
  box-shadow: 0 6px 20px rgba(0, 183, 170, 0.38);
  transform: translateY(-2px);
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-btn);
}

.btn--secondary {
  background: var(--color-secondary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 40, 77, 0.22);
}

.btn--secondary:hover {
  background: #001D3D;
  transform: translateY(-2px);
}

.btn--secondary:active {
  transform: translateY(0);
}

.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  box-shadow: none;
}

.btn--outline:hover {
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-2px);
}

.btn--outline:active {
  transform: translateY(0);
}

.btn--navy {
  background: var(--color-secondary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 40, 77, 0.22);
  border: none;
}

.btn--navy:hover {
  background: #001D3D;
  transform: translateY(-2px);
}

.btn--navy:active {
  transform: translateY(0);
}

.btn-icon {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--color-muted);
  padding: 4px 8px;
  border-radius: 8px;
  transition: color var(--transition), background var(--transition);
}

.btn-icon:hover {
  color: var(--color-text);
  background: rgba(0, 183, 170, 0.10);
}

/* ─────────────────────────────────────────
   질문 화면
───────────────────────────────────────── */

/* 진행 표시 헤더: [카운터] [프로그레스바] */
.question__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.question__counter {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
  min-width: 52px;
  flex-shrink: 0;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(0, 183, 170, 0.14);
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  border-radius: 999px;
  width: 0%;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 슬라이드 래퍼 ─────────────────────── */
.question__slide-wrap {
  position: relative;
  overflow: hidden;
  min-height: 300px;
}

/* ── 질문 카드 ─────────────────────────── */
.question__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 앞으로 이동: 새 카드는 오른쪽에서 등장 */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(52px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* 뒤로 이동: 새 카드는 왼쪽에서 등장 */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-52px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* 앞으로 이동: 이전 카드는 왼쪽으로 퇴장 */
@keyframes slideOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-52px); }
}
/* 뒤로 이동: 이전 카드는 오른쪽으로 퇴장 */
@keyframes slideOutRight {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(52px); }
}

.question__card--enter-forward  { animation: slideInRight  0.28s ease forwards; }
.question__card--enter-backward { animation: slideInLeft   0.28s ease forwards; }
.question__card--exit-forward   { animation: slideOutLeft  0.22s ease forwards; pointer-events: none; }
.question__card--exit-backward  { animation: slideOutRight 0.22s ease forwards; pointer-events: none; }

/* ── 질문 텍스트 ────────────────────────── */
.question__text {
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px 24px;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

/* ── 선택지 ─────────────────────────────── */
.question__choices {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.choice-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-card);
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 16px 20px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 2px 12px rgba(0, 183, 170, 0.08);
  transition:
    border-color var(--transition),
    background   var(--transition),
    transform    var(--transition),
    box-shadow   var(--transition);
}

.choice-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: rgba(0, 183, 170, 0.04);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 183, 170, 0.16);
}

.choice-btn:active:not(:disabled) {
  transform: translateY(0);
  background: rgba(0, 183, 170, 0.08);
}

.choice-btn:disabled {
  cursor: default;
}

/* A / B 키 레이블 */
.choice-btn__key {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 183, 170, 0.12);
  color: var(--color-primary);
  font-size: 0.8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}

.choice-btn__text {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.55;
}

.choice-btn--selected {
  border-color: var(--color-primary);
  background: rgba(0, 183, 170, 0.06);
}

.choice-btn--selected .choice-btn__key {
  background: var(--color-primary);
  color: #fff;
}

/* ── 하단 이전으로 버튼 ─────────────────── */
.btn--ghost {
  background: none;
  border: none;
  color: var(--color-muted);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  padding: 10px;
  border-radius: 10px;
  text-align: center;
  transition: color var(--transition), background var(--transition);
  align-self: center;
}

.btn--ghost:hover:not(:disabled) {
  color: var(--color-text);
  background: rgba(0, 183, 170, 0.08);
}

.btn--ghost:disabled {
  opacity: 0.25;
  cursor: default;
}

/* ─────────────────────────────────────────
   결과 화면 — 동적 컨테이너
───────────────────────────────────────── */
#result-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 1. 헤더 카드 */
.result__header {
  background: linear-gradient(145deg, var(--color-secondary) 0%, #004B6B 100%);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 36px 24px 28px;
  text-align: center;
}

.result__char-img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  margin-bottom: 14px;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.18));
}

.result__emoji {
  font-size: 5rem;
  line-height: 1;
  margin-bottom: 14px;
}

.result__nickname-tag {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.80);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.result__char-name {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin-bottom: 12px;
}

.result__badges {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.badge--type {
  background: rgba(255, 255, 255, 0.20);
  color: #ffffff;
  backdrop-filter: blur(4px);
}

/* 2. 한줄 소개 */
.result__title {
  background: var(--color-card);
  border-radius: 16px;
  padding: 16px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  line-height: 1.65;
  box-shadow: 0 2px 12px rgba(0, 183, 170, 0.08);
  border-left: 4px solid var(--color-primary);
}

/* 3. 설명 텍스트 블록 */
.result__description {
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.result__description p {
  font-size: 0.88rem;
  color: var(--color-text);
  line-height: 1.8;
}

.result__description p:first-child {
  font-weight: 600;
  color: var(--color-primary);
}

/* 4. 축 요약 칩 */
.result__axes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.axis-chip {
  background: var(--color-card);
  border: 1.5px solid rgba(0, 183, 170, 0.28);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 183, 170, 0.08);
  white-space: nowrap;
}

/* 5. 궁합 카드 */
.result__chemistry {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chemistry-card {
  background: var(--color-card);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 2px 12px rgba(0, 183, 170, 0.08);
  border-left: 4px solid transparent;
}

.chemistry-card--best  { border-left-color: #48bb78; }
.chemistry-card--worst { border-left-color: #fc8181; }

.chemistry-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.chemistry-card__icon  { font-size: 1rem; flex-shrink: 0; }

.chemistry-card__label {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.4;
}

.chemistry-card__label strong {
  color: var(--color-text);
  font-weight: 700;
}

.chemistry-card__reason {
  font-size: 0.85rem;
  color: var(--color-muted);
  line-height: 1.7;
  padding-left: 26px;
}

/* 버튼 영역 */
.result__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

/* ─────────────────────────────────────────
   반응형: 태블릿 이상 (540px+)
───────────────────────────────────────── */
@media (min-width: 540px) {
  .intro__title {
    font-size: 2rem;
  }

  .intro__hero {
    padding: 48px 40px;
  }

  .question__text {
    font-size: 1.2rem;
    padding: 32px 32px;
  }

  .question__slide-wrap {
    min-height: 320px;
  }

  /* 결과 화면 — 태블릿 이상 */
  .result__header {
    padding: 44px 40px 36px;
  }

  .result__char-img {
    width: 200px;
    height: 200px;
  }

  .result__emoji {
    font-size: 6rem;
  }

  .result__char-name {
    font-size: 1.75rem;
  }

  .result__description {
    padding: 28px 28px;
  }

  .result__description p {
    font-size: 0.92rem;
  }
}