/* =============================================================
   test-common.css — 모든 검사 인트로·결과 공통 스타일
   네이비·틸 라이트 테마 (기존 test-animal.css 대체)
   색 토큰은 style.css :root(--index-*)를 그대로 상속
   ============================================================= */

:root{
  --t-bg:        #f1f4f9;
  --t-surface:   #ffffff;
  --t-surf2:     #e9eef6;
  --t-line:      #d8e0ec;
  --t-navy:      #2d517d;
  --t-navy-2:    #3a6395;
  --t-teal:      #4a72a8;
  --t-teal-soft: #e6eef8;
  --t-ink:       #1e2b3d;
  --t-muted:     #6b7789;
  --t-sub:       #52606f;
  --t-shadow:    0 6px 20px rgba(30,55,95,.06);
  --t-shadow-h:  0 14px 34px rgba(30,55,95,.13);
}

/* 페이지 배경 */
body.test-animal,
body.test-common{ background:var(--t-bg); color:var(--t-ink); }

/* ── 인트로 래퍼 ── */
.ta-intro{ padding:40px 0 20px; }
.ta-back-link{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:14px;
  font-size:14px; font-weight:600; color:var(--t-muted); text-decoration:none;
  transition:color .14s;
}
.ta-back-link:hover{ color:var(--t-navy); }
.ta-eyebrow{
  display:inline-flex; align-items:center; min-height:26px; padding:0 12px;
  border:1px solid var(--t-line); border-radius:999px; background:#fff;
  color:var(--t-teal); font-size:11px; font-weight:700; letter-spacing:.12em; margin-bottom:16px;
}
.ta-title{
  font-size:clamp(30px,6vw,46px); font-weight:800; line-height:1.2;
  letter-spacing:-.045em; color:var(--t-ink); margin-bottom:14px;
}
.ta-title em{ color:var(--t-teal); font-style:normal; }
.ta-sub{ font-size:15px; line-height:1.85; color:var(--t-muted); margin-bottom:30px; word-break:keep-all; }

/* 통계 박스 */
.ta-stat-row{ display:flex; gap:24px; flex-wrap:wrap; margin-bottom:26px; }
.ta-stat-box{ text-align:left; }
.ta-stat-num{ font-size:30px; font-weight:800; color:var(--t-teal); line-height:1; letter-spacing:-.02em; }
.ta-stat-lbl{ font-size:11px; color:var(--t-muted); margin-top:5px; letter-spacing:.03em; }

/* 성향 태그 */
.ta-dim-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:30px; }
.ta-dim-tag{
  display:inline-flex; align-items:center; gap:7px; padding:7px 14px;
  border:1px solid var(--t-line); border-radius:999px; background:#fff;
  font-size:13px; color:var(--t-sub);
}
.ta-dim-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* 시작 버튼 — width auto (짧게) */
.ta-btn-start{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:15px 34px; border-radius:12px;
  background:var(--t-navy); color:#fff; font-size:16px; font-weight:800;
  text-decoration:none; box-shadow:0 6px 16px rgba(23,50,77,.22);
  transition:background .15s, transform .15s;
}
.ta-btn-start:hover{ background:#102b43; transform:translateY(-2px); }
.ta-btn-start:active{ transform:translateY(0); }

/* 안내 박스 */
.ta-notice{
  margin-top:22px; padding:16px 18px; border:1px solid var(--t-line);
  border-left:4px solid var(--t-teal); border-radius:12px; background:#fff;
  font-size:13.5px; line-height:1.75; color:var(--t-sub); word-break:keep-all;
}

/* ── 인트로 확장 섹션 (평가·원리·Q&A) ── */
.ta-section{ margin-top:44px; }
.ta-sec-hd{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--t-teal); margin-bottom:6px; font-weight:700; }
.ta-sec-title{ font-size:19px; font-weight:800; color:var(--t-ink); margin-bottom:16px; letter-spacing:-.02em; }

/* 원리 설명 */
.ta-detail{ font-size:14.5px; line-height:1.9; color:var(--t-sub); }
.ta-detail p{ margin:0 0 15px; }
.ta-detail h3{ font-size:16px; font-weight:700; color:var(--t-ink); margin:24px 0 10px; }
.ta-detail ul{ margin:0 0 15px; padding-left:20px; }
.ta-detail li{ margin-bottom:7px; }
.ta-detail strong{ color:var(--t-teal); }

/* 평가 요약/목록 */
.ta-rv-summary{ display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--t-line); border-radius:16px; padding:18px 20px; margin-bottom:16px; box-shadow:var(--t-shadow); }
.ta-rv-score{ font-size:38px; font-weight:900; color:#f5a623; line-height:1; }
.ta-rv-stars{ font-size:16px; color:#f5a623; letter-spacing:2px; }
.ta-rv-cnt{ font-size:12px; color:var(--t-muted); margin-top:4px; }
.ta-rv-list{ display:flex; flex-direction:column; gap:10px; }
.ta-rv-item{ background:#fff; border:1px solid var(--t-line); border-radius:14px; padding:14px 16px; box-shadow:var(--t-shadow); }
.ta-rv-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.ta-rv-nick{ font-size:13px; font-weight:700; color:var(--t-ink); }
.ta-rv-item-stars{ font-size:12px; color:#f5a623; letter-spacing:1px; }
.ta-rv-cmt{ font-size:13.5px; color:var(--t-sub); line-height:1.7; }
.ta-rv-empty{ font-size:13.5px; color:var(--t-muted); text-align:center; padding:22px; background:#fff; border:1px solid var(--t-line); border-radius:14px; }

/* Q&A */
.ta-faq{ display:flex; flex-direction:column; gap:9px; }
.ta-faq-item{ background:#fff; border:1px solid var(--t-line); border-radius:12px; overflow:hidden; }
.ta-faq-item[open]{ border-color:#c2ced5; }
.ta-faq-q{ list-style:none; cursor:pointer; padding:15px 44px 15px 16px; font-size:14.5px; font-weight:700; color:var(--t-ink); position:relative; }
.ta-faq-q::-webkit-details-marker{ display:none; }
.ta-faq-q::after{ content:''; position:absolute; right:18px; top:calc(50% - 4px); width:7px; height:7px; border-right:2px solid var(--t-teal); border-bottom:2px solid var(--t-teal); transform:rotate(45deg); transition:transform .2s; }
.ta-faq-item[open] .ta-faq-q::after{ transform:rotate(-135deg); top:calc(50% - 1px); }
.ta-faq-q:hover{ color:var(--t-teal); }
.ta-faq-a{ padding:0 16px 16px; font-size:13.5px; line-height:1.8; color:var(--t-sub); }
.ta-faq-a p{ margin:0 0 10px; } .ta-faq-a p:last-child{ margin:0; }

/* ── 결과지 히어로 ── */
.ta-result-hero{ text-align:center; padding:40px 0 8px; }
.ta-result-date{ font-size:12px; color:var(--t-muted); margin-bottom:14px; }
.ta-result-emoji{ font-size:76px; line-height:1; display:block; margin-bottom:12px; }
.ta-result-ribbon{
  display:inline-block; padding:5px 16px; border-radius:999px;
  background:var(--t-teal-soft); color:var(--t-teal);
  font-size:12px; font-weight:700; letter-spacing:.04em; margin-bottom:14px;
}
.ta-result-name{ font-size:clamp(28px,6vw,40px); font-weight:900; color:var(--t-ink); letter-spacing:-.02em; margin-bottom:8px; }
.ta-result-sub{ font-size:15px; color:var(--t-teal); font-weight:700; margin-bottom:14px; }
.ta-result-desc{ font-size:14.5px; line-height:1.85; color:var(--t-sub); max-width:560px; margin:0 auto; word-break:keep-all; }

/* 결과지 카드 (공통) */
.test-animal .card, .test-common .card{
  background:#fff; border:1px solid var(--t-line); border-radius:16px;
  padding:22px 20px; margin-bottom:14px; box-shadow:var(--t-shadow);
}
.test-animal .card-title, .test-common .card-title{
  font-size:15px; font-weight:800; color:var(--t-ink); margin-bottom:14px; letter-spacing:-.01em;
}

/* 키워드 태그 */
.kw-row{ display:flex; flex-wrap:wrap; gap:8px; }
.kw-tag{ display:inline-block; padding:6px 13px; border-radius:999px; background:var(--t-teal-soft); color:var(--t-teal); font-size:13px; font-weight:600; }

/* 강점/주의 리스트 */
.trait-list{ display:flex; flex-direction:column; gap:11px; }
.trait-item{ display:flex; align-items:flex-start; gap:11px; font-size:14px; color:var(--t-sub); line-height:1.6; }
.trait-dot{ width:8px; height:8px; border-radius:50%; background:var(--t-teal); margin-top:7px; flex-shrink:0; }
.trait-dot.warn{ background:#e08a3c; }

/* MBTI 안내 */
.mbti-notice{ margin-top:14px; padding:14px 16px; border-radius:12px; background:var(--t-surf2); font-size:12.5px; line-height:1.7; color:var(--t-muted); }
.mbti-notice strong{ color:var(--t-navy); }

/* 페이지 하단 여백 */
.page-body{ padding-bottom:60px; }

@media (max-width:600px){
  .ta-stat-row{ gap:18px; }
  .ta-btn-start{ width:100%; }        /* 모바일에선 풀폭이 자연스러움 */
}
@media (prefers-reduced-motion:reduce){
  .ta-btn-start{ transition:none !important; }
}

/* ── 인트로 탭 ── */
.ta-tabs{ margin-top:40px; }
.ta-tab-nav{ display:flex; gap:4px; border-bottom:2px solid var(--t-line); margin-bottom:22px; }
.ta-tab-btn{
  flex:1; padding:13px 8px; border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:700; color:var(--t-muted);
  border-bottom:2px solid transparent; margin-bottom:-2px; transition:color .15s, border-color .15s;
}
.ta-tab-btn:hover{ color:var(--t-ink); }
.ta-tab-btn.on{ color:var(--t-teal); border-bottom-color:var(--t-teal); }
.ta-tab-btn .cnt{ font-size:11px; color:var(--t-muted); font-weight:600; margin-left:3px; }
.ta-tab-btn.on .cnt{ color:var(--t-teal); }
.ta-tab-panel{ display:none; }
.ta-tab-panel.on{ display:block; animation:taFade .2s ease; }
@keyframes taFade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }
.ta-tab-panel .ta-section{ margin-top:0; }
@media (prefers-reduced-motion:reduce){ .ta-tab-panel.on{ animation:none; } }


/* ── 하단 플로팅 시작바 ── */
.ta-float-start{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-top:1px solid var(--t-line);
  transform:translateY(120%); transition:transform .28s ease;
  box-shadow:0 -6px 20px rgba(24,50,75,.08);
}
.ta-float-start.show{ transform:translateY(0); }
.ta-float-start a{
  display:flex; align-items:center; justify-content:center; gap:6px;
  max-width:600px; margin:0 auto; min-height:52px; border-radius:12px;
  background:var(--t-navy); color:#fff; font-size:16px; font-weight:800;
  text-decoration:none; transition:background .15s;
}
.ta-float-start a:hover{ background:#102b43; }
/* 플로팅이 콘텐츠 맨 아래를 가리지 않도록 여백 */
body.has-float-start{ padding-bottom:84px; }
@media(prefers-reduced-motion:reduce){ .ta-float-start{ transition:none; } }