/* ===== 16 Skin-Type Test · 스타일 =====
   디자인 톤: 16types.ai 참조(부드러운 라벤더 그라데이션 + 흰 카드 + 둥근 모서리)
   색은 CSS 변수로 — 결과 화면은 타입 색으로 동적 변경됨 */

:root{
  /* 테스트 사이트 = 중립 톤(제품 판매 사이트와 분리 · 동질성 X) */
  --brand: #45475f;        /* 중립 슬레이트(사이트 UI 기본) */
  --brand-2: #5d6080;      /* 보조 슬레이트 */
  --brand-soft: #ececf1;
  --brand-softer: #f5f5f8;
  --ink: #1b1b2b;
  --ink-soft: #6a6a7e;
  --line: #e8e8f0;
  --bg: #faf9ff;
  --agree: #3db17a;        /* 맞아요(초록) */
  --disagree: #8c6fe6;     /* 아니에요(보라) */
  --radius: 18px;
  --maxw: 540px;
  --type-color: var(--brand);
  --type-ink: var(--brand);
}

*{ box-sizing: border-box; margin: 0; padding: 0; }
html,body{ height: 100%; }
body{
  font-family: "Pretendard", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
  line-height: 1.55;
}
#app{ min-height: 100dvh; display: flex; flex-direction: column; }

/* ---- 화면 전환 ---- */
.screen{
  display: none;
  flex: 1;
  padding: clamp(20px, 6vw, 32px) clamp(16px, 5vw, 22px) calc(clamp(20px, 6vw, 32px) + env(safe-area-inset-bottom));
  animation: fade .35s ease;
}
.screen.is-active{ display: flex; flex-direction: column; }
@keyframes fade{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }

/* ---- 공통 버튼 ---- */
.btn{
  font: inherit; font-weight: 700; cursor: pointer;
  border: none; border-radius: 999px; padding: 16px 22px;
  width: 100%; max-width: var(--maxw); transition: transform .12s ease, opacity .2s ease, box-shadow .2s ease;
}
.btn:active{ transform: scale(.98); }
.btn--primary{ background: var(--brand); color: #fff; box-shadow: 0 10px 26px -8px var(--brand); }
.btn--ghost{ background: #fff; color: var(--brand); border: 1.5px solid var(--brand); }
.btn--text{ background: none; color: var(--ink-soft); font-weight: 600; box-shadow: none; }
.btn--text:hover{ color: var(--ink); }

/* ============================================================
   인트로 = 랜딩 페이지 (스크롤형) — 16types 참조
   ============================================================ */
.screen--intro{ padding: 0; display: none; }
.screen--intro.is-active{ display: block; }   /* 길게 스크롤되도록 block */

.lp__nav{
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: 14px 18px calc(14px);
  background: rgba(250,249,255,.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.lp__logo{ font-weight: 900; letter-spacing: .04em; font-size: 16px; color: var(--brand); }
.lp__logo span{ color: var(--ink-soft); font-weight: 700; font-size: 12px; margin-left: 6px; letter-spacing: 0; }

.lp{ max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(18px, 5vw, 22px) calc(40px + env(safe-area-inset-bottom)); }

/* ===== 히어로 ===== */
.lp__hero{
  text-align: center; padding: clamp(34px, 9vw, 56px) 0 38px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  position: relative;
}
.screen--intro::before{   /* 히어로 배경 그라데이션 */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 60vh; z-index: 0;
  background: radial-gradient(120% 70% at 50% 0%, var(--brand-soft) 0%, var(--bg) 62%);
  pointer-events: none;
}
.lp > *{ position: relative; z-index: 1; }
.lp__eyebrow{
  display: inline-block; font-size: 12.5px; font-weight: 800; color: var(--brand);
  background: #fff; border: 1px solid var(--brand-soft); box-shadow: 0 4px 14px -8px var(--brand);
  padding: 7px 14px; border-radius: 999px; letter-spacing: .01em;
}
.lp__title{
  font-size: clamp(32px, 9.5vw, 44px); font-weight: 900; line-height: 1.22; letter-spacing: -.02em;
}
.lp__title strong{
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp__lead{ color: var(--ink-soft); font-size: 16px; word-break: keep-all; }
.lp__lead b{ color: var(--ink); }
.lp__cta{ margin-top: 6px; }
.lp__cta-sm{ margin-top: 22px; }
.lp__meta{
  list-style: none; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  font-size: 13.5px; color: var(--ink-soft); margin-top: 4px;
}
.lp__meta li{ display: flex; align-items: center; gap: 5px; }
.lp__count{ font-size: 13.5px; color: var(--ink); font-weight: 600; margin-top: 4px;
  background: var(--brand-soft); padding: 8px 16px; border-radius: 999px; }
.lp__count b{ color: var(--brand); font-weight: 800; }
.lp__hero-note{
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; margin-top: 8px;
  padding: 11px 16px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 8px 24px -20px rgba(60,40,140,.6); word-break: keep-all;
}
.lp__hero-note b{ color: var(--brand); font-weight: 800; }

/* 16컬러 캡슐 미리보기 */
.lp__swatches{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 14px; max-width: 420px;
}
.lp__swatch{
  width: 34px; height: 18px; border-radius: 999px; box-shadow: 0 4px 10px -5px rgba(0,0,0,.35);
  animation: pop .5s ease both;
}
@keyframes pop{ from{ opacity:0; transform: scale(.4); } to{ opacity:1; transform: none; } }

/* ===== 섹션 공통 ===== */
.lp__section{ padding: clamp(30px, 8vw, 46px) 0; border-top: 1px solid var(--line); text-align: center; }
.lp__kicker{ font-size: 12.5px; font-weight: 800; letter-spacing: .06em; color: var(--brand); margin-bottom: 8px; }
.lp__h2{ font-size: clamp(23px, 6.6vw, 28px); font-weight: 900; line-height: 1.3; letter-spacing: -.01em; }

/* 소개 3카드 */
.lp__cards{ display: flex; flex-direction: column; gap: 12px; margin-top: 24px; text-align: left; }
.lp__card{
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 20px 18px; box-shadow: 0 10px 30px -22px rgba(60,40,140,.5);
}
.lp__card--accent{ background: linear-gradient(180deg, var(--brand-softer), #fff); border-color: var(--brand-soft); }
.lp__card-ico{
  width: 44px; height: 44px; display: grid; place-items: center; font-size: 22px;
  background: var(--brand-soft); border-radius: 13px; margin-bottom: 12px;
}
.lp__card h3{ font-size: 17px; font-weight: 800; margin-bottom: 5px; }
.lp__card p{ font-size: 14px; color: var(--ink-soft); word-break: keep-all; }

/* 4축 그리드 */
.lp__axisgrid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.lp__axis{
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 14px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  box-shadow: 0 10px 26px -22px rgba(60,40,140,.5);
}
.lp__axis-ico{ font-size: 24px; margin-bottom: 4px; }
.lp__axis b{ font-size: 16px; font-weight: 800; }
.lp__axis em{ font-style: normal; font-size: 12px; font-weight: 700; color: var(--brand); }
.lp__axis p{ font-size: 12.5px; color: var(--ink-soft); word-break: keep-all; margin-top: 2px; }

/* 16타입 그리드 */
.lp__typegrid{ display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 22px; }
.lp__type{
  display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; text-align: left;
}
.lp__type-badge{
  flex: 0 0 auto; width: 42px; height: 26px; border-radius: 8px; color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .04em; display: grid; place-items: center;
}
.lp__type-name{ display: flex; flex-direction: column; line-height: 1.25; word-break: keep-all; }
.lp__type-name b{ font-size: 12.5px; font-weight: 800; color: var(--ink); }
.lp__type-name em{ font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--ink-soft); margin-top: 1px; }

/* 왜 한국인 맞춤인가 */
.lp__why{ display: flex; flex-direction: column; gap: 12px; margin-top: 24px; text-align: left; }
.lp__why-row{
  display: flex; gap: 14px; align-items: flex-start; background: #fff;
  border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 10px 26px -22px rgba(60,40,140,.5);
}
.lp__why-ico{
  flex: 0 0 auto; font-size: 20px; width: 40px; height: 40px; border-radius: 11px;
  background: var(--brand-soft); display: grid; place-items: center;
}
.lp__why-row p{ font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; word-break: keep-all; }
.lp__why-row p b{ display: block; font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 3px; }

/* 진행 방법 스텝 */
.lp__steps{ list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 24px; text-align: left; }
.lp__steps li{
  display: flex; gap: 14px; align-items: flex-start; background: #fff;
  border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px;
}
.lp__step-no{
  flex: 0 0 auto; font-size: 18px; font-weight: 900; color: var(--brand);
  background: var(--brand-soft); width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
}
.lp__steps b{ font-size: 16px; font-weight: 800; display: block; margin-bottom: 2px; }
.lp__steps p{ font-size: 13.5px; color: var(--ink-soft); word-break: keep-all; }

/* 신뢰 포인트 */
.lp__trust{ display: grid; grid-template-columns: 1fr; gap: 12px; }
.lp__trust-item{
  background: linear-gradient(180deg, var(--brand-softer), #fff); border: 1px solid var(--brand-soft);
  border-radius: 16px; padding: 18px 20px;
}
.lp__trust-item b{ font-size: 16px; font-weight: 800; color: var(--brand); }
.lp__trust-item p{ font-size: 14px; color: var(--ink-soft); margin-top: 4px; word-break: keep-all; }

/* 마무리 CTA */
.lp__finalcta{
  text-align: center; margin-top: clamp(30px, 8vw, 46px);
  background: linear-gradient(160deg, var(--brand), var(--brand-2));
  border-radius: 24px; padding: clamp(34px, 9vw, 48px) 24px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.lp__finalcta h2{ color: #fff; font-size: clamp(22px, 6.4vw, 27px); font-weight: 900; line-height: 1.32; }
.lp__finalcta p{ color: rgba(255,255,255,.9); font-size: 14px; margin-bottom: 6px; word-break: keep-all; }
.lp__finalcta .btn--primary{ background: #fff; color: var(--brand); box-shadow: 0 12px 30px -10px rgba(0,0,0,.35); }

/* 푸터 */
.lp__footer{ text-align: center; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.lp__footer .lp__logo{ display: inline-block; margin-bottom: 8px; }
.lp__footer p{ font-size: 12px; color: #a6a6b4; word-break: keep-all; }

/* ===== 프로필(성별/연령) ===== */
.screen--profile{ justify-content: center; align-items: center; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, var(--brand-soft) 0%, var(--bg) 60%); }
.profile__inner{ max-width: var(--maxw); width: 100%; margin: 0 auto; display: flex; flex-direction: column;
  align-items: center; gap: 6px; }
.profile__title{ font-size: clamp(24px, 7vw, 30px); font-weight: 900; margin-top: 4px; }
.profile__sub{ font-size: 13.5px; color: var(--ink-soft); word-break: keep-all; margin-bottom: 14px; line-height: 1.6; }
.profile__group{ width: 100%; text-align: left; margin-top: 14px; }
.profile__label{ font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.profile__opts{ display: flex; gap: 9px; margin-top: 10px; }
.profile__opts--age{ flex-wrap: wrap; }
.chip{ flex: 1 1 auto; min-width: 64px; font: inherit; font-weight: 700; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 10px;
  color: var(--ink); transition: border-color .15s ease, background .15s ease, color .15s ease, transform .1s ease; }
.chip:active{ transform: scale(.97); }
.chip.is-on{ border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.profile__inner .btn--primary{ margin-top: 26px; }
.profile__inner .btn--primary:disabled{ opacity: .45; cursor: default; box-shadow: none; }

/* ===== 설문 ===== */
.quiz__top{ display: flex; align-items: center; gap: 12px; max-width: var(--maxw); width: 100%; margin: 0 auto; }
.quiz__back{ background: none; border: none; font-size: 30px; line-height: 1; color: var(--ink-soft);
  cursor: pointer; width: 30px; opacity: .85; }
.quiz__back:disabled{ opacity: .25; cursor: default; }
.progress{ flex: 1; height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress__bar{ height: 100%; width: 6%; background: var(--brand);
  border-radius: 999px; transition: width .35s cubic-bezier(.4,0,.2,1); }
.quiz__count{ font-size: 13px; font-weight: 700; color: var(--ink-soft); min-width: 48px; text-align: right; }

.quiz__body{ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; max-width: var(--maxw); width: 100%; margin: 0 auto; gap: 14px; }
.quiz__axis{ display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  color: var(--brand); background: var(--brand-soft); padding: 5px 12px; border-radius: 999px; }
.quiz__question{ font-size: clamp(19px, 5.4vw, 24px); font-weight: 700; line-height: 1.4;
  word-break: keep-all; margin: 4px 0 22px; }

/* 문항별 '이전' 버튼 */
.quiz__prev{
  margin-top: 26px; align-self: center; background: none; border: 1.5px solid var(--line);
  color: var(--ink-soft); font: inherit; font-weight: 700; font-size: 14px;
  padding: 10px 20px; border-radius: 999px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, transform .12s ease;
}
.quiz__prev:hover{ border-color: var(--brand); color: var(--brand); }
.quiz__prev:active{ transform: scale(.97); }

/* 7점 원형 척도 (16personalities 스타일) — 모바일: 라벨 위 / 원 한 줄 풀폭 */
.scale{ display: flex; flex-direction: column; gap: 12px; width: 100%; }
.scale__ends{ display: flex; justify-content: space-between; width: 100%; padding: 0 2px; }
.scale__label{ font-size: 13px; font-weight: 700; white-space: nowrap; }
.scale__label--agree{ color: var(--agree); }
.scale__label--disagree{ color: var(--disagree); }
.scale__dots{ display: flex; align-items: center; justify-content: space-between; width: 100%; }
.dot{ border-radius: 50%; border: 2.5px solid; background: transparent; cursor: pointer;
  flex: 0 0 auto; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .12s ease, background .15s ease; }
.dot:hover{ transform: scale(1.1); }
.dot:active{ transform: scale(.9); }
.dot.is-selected{ background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent); }
/* 크기·색: 양 끝이 크고 가운데(중립)가 작다. 화면 폭에 비례(clamp)해 작은 폰에서도 안 넘침 */
.dot[data-i="0"],
.dot[data-i="6"]{ width: clamp(40px, 13vw, 52px); height: clamp(40px, 13vw, 52px); }
.dot[data-i="1"],
.dot[data-i="5"]{ width: clamp(33px, 11vw, 42px); height: clamp(33px, 11vw, 42px); }
.dot[data-i="2"],
.dot[data-i="4"]{ width: clamp(26px, 8.5vw, 32px); height: clamp(26px, 8.5vw, 32px); }
.dot[data-i="3"]{ width: clamp(20px, 6.5vw, 26px); height: clamp(20px, 6.5vw, 26px); }
.dot[data-i="0"], .dot[data-i="1"], .dot[data-i="2"]{ color: var(--disagree); }
.dot[data-i="3"]{ color: #b9b9c6; }
.dot[data-i="4"], .dot[data-i="5"], .dot[data-i="6"]{ color: var(--agree); }

/* ===== 결과 준비(마지막 응답 → 결과) — 진행률·체크리스트 없이 상태 문구만 ===== */
.screen--prep{ justify-content: center; align-items: center; text-align: center;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, #7C5CE6 12%, var(--bg)) 0%, var(--bg) 62%); }
.prep__inner{ max-width: var(--maxw); width: 100%; margin: 0 auto; display: flex; flex-direction: column;
  align-items: center; gap: 12px; padding: 0 4px; }
.prep__mark{ width: 64px; height: 64px; margin-bottom: 10px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; box-shadow: 0 10px 28px -14px #7C5CE6; }
.prep__ring{ width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid color-mix(in srgb, #7C5CE6 18%, #fff); border-top-color: #7C5CE6;
  animation: prepSpin 1.1s linear infinite; }
@keyframes prepSpin{ to{ transform: rotate(360deg); } }
.prep__title{ font-size: clamp(20px, 5.6vw, 24px); font-weight: 800; line-height: 1.4; word-break: keep-all; }
.prep__title:focus{ outline: none; }
/* 단계 목록: 실제 처리 단계만 '… 중' → '… 완료'. 상태문은 화면낭독용(오류일 때만 화면에 표시) */
.prep__steps{ list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 6px; text-align: left; }
.prep__steps:empty{ display: none; }
.prep__step{ display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; line-height: 1.5;
  color: var(--ink-soft); word-break: keep-all; }
.prep__step::before{ content: ""; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box;
  display: grid; place-items: center; font-size: 11px; font-weight: 900; line-height: 1; }
.prep__step.is-doing{ color: var(--ink); }
.prep__step.is-doing::before{ border: 2px solid #7C5CE6; background: color-mix(in srgb, #7C5CE6 16%, #fff); }
.prep__step.is-done::before{ content: "✓"; background: #7C5CE6; color: #fff; }
/* 고정 목록(2026-10-24): 해당 단계 줄을 처음부터 모두 두고 상태만 바꾼다. 대기 = 빈 원, 진행 = 보라 테두리, 완료 = 체크.
   목록 폭을 고정해 '중'·'완료'가 붙어도 줄·제목·버튼이 옆으로 움직이지 않게 한다 */
.prep__steps{ width: 17.5em; max-width: 100%; }
.prep__step::before{ border: 2px solid #d9d5e8; }
.prep__step.is-done::before{ border-color: #7C5CE6; }
.prep__status{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.screen--prep.is-error .prep__status{ position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
  font-size: 15px; font-weight: 600; color: var(--ink-soft); line-height: 1.6; word-break: keep-all; }
.prep__error{ display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; margin-top: 6px; }
.prep__error[hidden]{ display: none; }
.prep__errmsg{ font-size: 14px; color: var(--ink-soft); line-height: 1.6; word-break: keep-all; }
.prep__retry{ background: #7C5CE6; box-shadow: 0 10px 26px -10px #7C5CE6; }
.prep__back{ margin-top: 14px; }
.screen--prep.is-error .prep__mark{ display: none; }
/* 동작 줄이기: 회전·페이드 없이 같은 화면을 정지 상태로 */
@media (prefers-reduced-motion: reduce){
  .screen--prep{ animation: none; }
  .prep__ring{ animation: none; }
}

/* ===== 결과 ===== */
.screen--result{ background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--brand) 18%, var(--bg)) 0%, var(--bg) 55%); }
.result__inner{ max-width: var(--maxw); width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.result__hero{ text-align: center; padding-top: 8px; }
.result__eyebrow{ font-size: 13px; font-weight: 700; color: var(--ink-soft); letter-spacing: .04em; }
.result__badge{ display: inline-block; font-size: 30px; font-weight: 800; letter-spacing: .12em;
  color: #fff; background: var(--type-own-ink, var(--type-ink)); padding: 10px 26px; border-radius: 16px; margin: 10px 0 12px;
  box-shadow: 0 12px 28px -10px var(--type-own-ink, var(--type-ink)); }
.result__title{ font-size: 22px; font-weight: 800; }
.result__tagline{ font-size: 15px; color: var(--ink-soft); margin-top: 10px; word-break: keep-all; }
.result__concern{ display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 700;
  color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, #fff); padding: 8px 14px; border-radius: 999px; }

.result__axes{ display: flex; flex-direction: column; gap: 18px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; }
.axis-row{ display: grid; grid-template-columns: 1fr; gap: 9px; }
.axis-row__head{ display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; gap: 6px; }
.axis-pole{ white-space: nowrap; }
.axis-row__head .muted{ color: #c2c2cf; font-weight: 600; }
.axis-pct{ font-style: normal; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 12.5px; opacity: .95; }
.axis-help{ font: inherit; font-size: 12px; font-weight: 800; color: var(--ink-soft); cursor: pointer;
  background: none; border: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.axis-q{ width: 15px; height: 15px; border-radius: 50%; background: var(--line); color: var(--ink-soft);
  font-size: 10px; font-weight: 900; display: grid; place-items: center; }
.axis-track{ height: 10px; background: #eef0f4; border-radius: 999px; position: relative; }
.axis-mid{ position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1.5px; background: #dcdce6; transform: translateX(-50%); }
.axis-fill{ position: absolute; top: 0; bottom: 0; border-radius: 999px; transition: width .5s ease, left .5s ease; }
.axis-knob{ position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%;
  transform: translate(-50%, -50%); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2);
  transition: left .5s ease; }
.axis-meaning{ display: none; font-size: 12.5px; color: var(--ink-soft); background: #faf9ff;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; word-break: keep-all; }
.axis-row.show-meaning .axis-meaning{ display: block; }
.axis-row.show-meaning .axis-q{ background: var(--brand); color: #fff; }

.result__card{ background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.result__cardTitle{ font-size: 18px; font-weight: 900; margin-bottom: 14px; letter-spacing: -.2px; }
.ingredients{ list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ingredients li{ display: flex; gap: 10px; align-items: baseline; font-size: 15px; }
.ingredients li b{ color: var(--brand); }
.ingredients li .ing-name{ font-weight: 700; }
.ingredients li .ing-desc{ color: var(--ink-soft); font-size: 13px; }
.result__disclaimer{ margin-top: 14px; font-size: 12px; color: #a6a6b4; }

/* 직관 별명(메인) + 4축 부제 + 키워드 + 요약 + 설명 */
.result__title{ font-size: clamp(23px, 6.6vw, 28px); font-weight: 900; letter-spacing: -.01em; }
.result__axisTitle{ font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-top: 5px; word-break: keep-all; }
.result__keys{ display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.keychip{ font-size: 12px; font-weight: 800; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, #fff); padding: 5px 11px; border-radius: 999px; }
.result__summary{ font-size: 15px; font-weight: 800; color: var(--brand); margin-top: 12px; }
.result__desc{ font-size: 14.5px; color: var(--ink); margin-top: 14px; word-break: keep-all; line-height: 1.75;
  text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: 0 10px 30px -22px rgba(60,40,140,.5); }
.result__intro{ font-size: 14.5px; color: var(--ink); text-align: left; line-height: 1.8; word-break: keep-all;
  background: linear-gradient(165deg, var(--brand-softer), #fff); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; }
.result__intro b{ color: var(--brand); font-weight: 800; }

/* [재미] 셀럽상 + 의인화 밈 */
.result__fun{ display: flex; flex-direction: column; gap: 12px; text-align: left; }
.fun__row{ display: flex; align-items: center; gap: 12px; }
.fun__ico{ flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-size: 20px; background: color-mix(in srgb, var(--brand) 12%, #fff); }
.fun__txt{ display: flex; flex-direction: column; }
.fun__lab{ font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.fun__val{ font-size: 16px; font-weight: 800; color: var(--ink); word-break: keep-all; }

/* [재미] 동질감 카운터 + 도감 + 해시태그 */
.result__social{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.social__item{ background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 8px;
  text-align: center; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 10px 24px -22px rgba(60,40,140,.5); }
.social__num{ font-size: 22px; font-weight: 900; color: var(--brand); line-height: 1; word-break: keep-all; }
.social__num small{ font-size: 14px; color: var(--ink-soft); font-weight: 700; }
.social__num--soft{ font-size: 18px; }
.social__lab{ font-size: 11.5px; color: var(--ink-soft); line-height: 1.4; }
.social__tagwrap{ grid-column: 1 / -1; text-align: center; }
.social__tag{ display: inline-block; font-size: 13px; font-weight: 800; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, #fff); border: 1px dashed color-mix(in srgb, var(--brand) 35%, #fff);
  padding: 8px 16px; border-radius: 999px; }

/* 성분 발라보기 시뮬레이션 */
.sim__sub{ font-size: 11px; font-weight: 700; color: var(--brand); margin-left: 6px; }
/* 섹션3: 첨부 사진 제거하고 4축 레이더만(사장님 #122) */
.sim__stage{ display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center; margin-top: 4px; }
.sim__skin{ display: none; }
.sim__radar svg{ max-width: 260px; }
.sim__skin--legacy{ position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.sim__img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sim__img--a{ opacity: 0; transition: opacity .9s ease; }
.sim__skin.is-after .sim__img--a{ opacity: 1; }
/* 실사진 리터칭 캔버스 — 원본(–b) 위에 겹쳐 실제 피부 변화 표시 */
.sim__canvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; }
/* 소프트 글로우(오톤) — 흐린 밝은 사진 복제를 soft-light로 겹쳐 피부만 매끈·촉촉. 이목구비는 선명 유지 */
.sim__glow{ position:absolute; inset:0; background-size:cover; background-position:center;
  filter: blur(7px) brightness(1.28) saturate(1.05); mix-blend-mode: soft-light;
  opacity:0; transition: opacity .8s ease; pointer-events:none; }
.sim__tag{ position: absolute; left: 8px; bottom: 8px; font-size: 11px; font-weight: 800; color: #fff;
  background: rgba(0,0,0,.45); padding: 4px 9px; border-radius: 999px; }
.sim__skin.is-after .sim__tag{ background: var(--brand); }
.sim__radar{ display: flex; justify-content: center; transform-origin:center; }
.sim__radar .radar-svg{ width: 100%; max-width: 185px; }
.sim__radar--pulse{ animation: radarPulse .5s ease; }
@keyframes radarPulse{ 0%{ transform:scale(1); } 42%{ transform:scale(1.07); } 100%{ transform:scale(1); } }
.sim__btn{ margin-top: 14px; }
@media (max-width: 360px){ .sim__stage{ grid-template-columns: 1fr; } }

/* 또래 비교 백분위 */
.rk__hero{ display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 14px; }
.rk__big{ font-size: 17px; font-weight: 800; color: var(--ink); }
.rk__big b{ font-size: 34px; font-weight: 900; color: var(--brand); }
.rk__lab{ font-size: 12.5px; color: var(--ink-soft); }
.rk-row{ display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 8px; }
.rk-row__n{ font-size: 13.5px; font-weight: 700; }
.rk-row b{ font-size: 13.5px; font-weight: 800; }
.rk-row--good{ background: color-mix(in srgb, var(--brand) 7%, #fff); }
.rk-row--good b{ color: var(--brand); }
.rk-row--bad{ background: #fff4f3; border-color: #f3d6d3; }
.rk-row--bad b{ color: #d4546f; }

/* [정보·과학] 내 피부가 이런 이유 */
.result__science{ display: flex; flex-direction: column; gap: 12px; text-align: left; }
.sci{ background: #faf9ff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 15px; }
.sci__head{ display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sci__ico{ font-size: 18px; }
.sci__name{ font-size: 15px; font-weight: 800; color: var(--brand); }
.sci__ax{ font-size: 11px; font-weight: 700; color: #b4b4c2; margin-left: auto;
  background: #fff; border: 1px solid var(--line); padding: 2px 8px; border-radius: 999px; }
.sci__dia{ display: flex; justify-content: center; margin: 4px 0 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.sci-dia{ width: 100%; max-width: 168px; height: auto; }
.sci__text{ font-size: 13.5px; color: var(--ink-soft); line-height: 1.65; word-break: keep-all; }

/* 통합형: 2×2 단면 그림 + 하나의 서술 */
.sci-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sci-cell{ background: #faf9ff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 8px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sci-cell__lab{ display:inline-block; margin-top:6px; padding:4px 12px; border-radius:999px;
  background:#1e1e26; color:#fff; font-size:12px; font-weight:800; letter-spacing:-.2px; word-break:keep-all; }
.sci-narr{ margin-top: 14px; font-size: 14px; color: var(--ink); line-height: 1.75; word-break: keep-all;
  background: #faf9ff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.sci-narr b{ color: var(--brand); font-weight: 800; }
.sci-emp-h, .sci-why-h{ font-size: 13.5px; font-weight: 800; color: var(--ink-soft);
  padding-left: 9px; margin: 0 0 10px; line-height: 1.3; }
.sci-why-h{ margin-top: 22px; }
.sci-emp{ list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.sci-emp li{ position: relative; padding-left: 26px; font-size: 13.5px; color: var(--ink); line-height: 1.55; word-break: keep-all; }
.sci-emp li::before{ content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand); font-size: 11px; font-weight: 900; display: grid; place-items: center; }

/* [설득] 왜 관리해야 하나 + 진화 트리 */
.result__persuade{ background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 14%, #fff), #fff);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, #fff); border-radius: var(--radius);
  padding: 22px; text-align: left; }
.persuade__badge{ display: inline-block; font-size: 12px; font-weight: 800; color: #fff;
  background: var(--brand); padding: 4px 12px; border-radius: 999px; }
.persuade__title{ font-size: 18px; font-weight: 900; margin: 12px 0 8px; word-break: keep-all; }
.persuade__body{ font-size: 14px; color: var(--ink); line-height: 1.7; word-break: keep-all; }
.persuade__body b{ color: var(--brand); }
.evo{ margin-top: 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.evo__lab{ font-size: 12.5px; font-weight: 700; color: var(--ink-soft); flex: 1 1 140px; word-break: keep-all; }
.evo__to{ display: flex; align-items: center; gap: 9px; }
.evo__cap{ width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 20px;
  background: radial-gradient(120% 120% at 35% 25%, color-mix(in srgb, var(--c) 55%, #fff), var(--c));
  box-shadow: 0 8px 16px -8px var(--c); }
.evo__to b{ font-size: 16px; font-weight: 900; letter-spacing: .04em; }
.evo__to span{ font-size: 12.5px; color: var(--ink-soft); }
/* 비포→애프터 캐릭터 */
.evo__ba{ display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; margin-top: 6px; }
.evo__col{ display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.evo__img{ width: 100%; max-width: 110px; aspect-ratio: 1; object-fit: cover; border-radius: 16px;
  border: 1px solid var(--line); }
.evo__col--goal .evo__img{ border: 2px solid var(--brand); box-shadow: 0 10px 24px -12px var(--brand); }
.evo__cap-lab{ font-size: 12px; font-weight: 700; color: var(--ink-soft); text-align: center; word-break: keep-all; }
.evo__col--goal .evo__cap-lab{ color: var(--brand); font-weight: 800; }
.evo__arrow{ flex: 0 0 auto; font-size: 22px; font-weight: 900; color: var(--brand); }
.evo__disc{ font-size: 11px; color: #a6a6b4; margin-top: 10px; width: 100%; text-align: center; }
.evo--keep{ flex-direction: column; align-items: flex-start; gap: 4px; }
.evo__keep{ font-size: 15px; font-weight: 800; color: var(--brand); }
.persuade__tip{ margin-top: 14px; background: #fff; border: 1px dashed color-mix(in srgb, var(--brand) 40%, #fff);
  border-radius: 12px; padding: 12px 14px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; word-break: keep-all; }
.persuade__tip b{ color: var(--ink); font-weight: 700; }

/* 추천 성분 함유 제품 비교(랭킹) */
.result__rank{ display: flex; flex-direction: column; gap: 10px; }
.rank{ width: 100%; font: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 12px; background: #faf9ff;
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; transition: transform .1s ease; }
.rank:active{ transform: scale(.99); }
.rank--ours{ background: linear-gradient(180deg, var(--brand-softer), #fff);
  border: 1.5px solid color-mix(in srgb, var(--brand) 45%, #fff); box-shadow: 0 10px 26px -16px var(--brand); }
.rank__no{ flex: 0 0 auto; font-size: 14px; font-weight: 900; color: var(--brand); width: 34px; text-align: center; }
.rank--ours .rank__no{ color: #d9a300; }
.rank__img{ flex: 0 0 auto; width: 44px; height: 44px; border-radius: 11px; object-fit: cover; }
.rank__ico{ flex: 0 0 auto; width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  font-size: 22px; background: #eef0f4; }
.rank__ico--lux{ background: #f3ecd6; }
.rank__body{ flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rank__name{ font-size: 14.5px; font-weight: 800; word-break: keep-all; }
.rank__tag{ font-size: 10.5px; font-weight: 800; color: #fff; background: var(--brand); padding: 2px 7px; border-radius: 6px; }
.rank__note{ font-size: 12px; color: var(--ink-soft); }
.rank__cnt{ flex: 0 0 auto; font-size: 12px; color: var(--ink-soft); text-align: right; }
.rank__cnt b{ font-size: 20px; font-weight: 900; color: var(--brand); }
.rank--ours .rank__cnt b{ color: #d9a300; }

.result__cardSub{ font-size: 12.5px; color: var(--ink-soft); margin: -6px 0 14px; }

/* [맞춤] 성별·나이 맞춤 제안 */
.result__advice{ background: linear-gradient(165deg, #f3f4fb, #fff); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; text-align: left; }
.advice__tag{ display: inline-block; font-size: 12px; font-weight: 800; color: #fff;
  background: var(--brand); padding: 4px 12px; border-radius: 999px; }
.advice__title{ font-size: 18px; font-weight: 900; margin: 12px 0 6px; }
.advice__age{ font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; word-break: keep-all; }
.advice__hope{ font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.7; margin-top: 12px; word-break: keep-all; }
.advice__why{ font-size: 13.5px; color: var(--ink-soft); line-height: 1.65; margin-top: 8px; word-break: keep-all; }
.advice__care{ margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.care-row{ display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 13px 15px; }
.care-ico{ flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  font-size: 18px; background: var(--brand-soft); }
.care-txt b{ font-size: 14px; font-weight: 800; display: block; margin-bottom: 3px; }
.care-txt b em{ font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.care-txt p{ font-size: 13px; color: var(--ink-soft); line-height: 1.6; word-break: keep-all; }
.advice__disc{ font-size: 11.5px; color: #a6a6b4; margin-top: 10px; word-break: keep-all; }
.advice__do{ margin-top: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.advice__do b{ font-size: 13px; font-weight: 800; color: var(--brand); display: block; margin-bottom: 4px; }
.advice__do p{ font-size: 14px; color: var(--ink); line-height: 1.6; word-break: keep-all; }
.advice__gnote{ margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); }
.result__advice .btn--primary{ margin-top: 16px; }

/* [전환] 제품 TOP3 (클릭 가능) */
.result__products{ display: flex; flex-direction: column; gap: 10px; }
.prod{ display: flex; align-items: center; gap: 12px; background: #faf9ff; border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px; position: relative; width: 100%; text-align: left;
  font: inherit; cursor: pointer; transition: transform .1s ease, border-color .15s ease, box-shadow .2s ease; }
.prod:hover{ border-color: color-mix(in srgb, var(--brand) 45%, #fff); box-shadow: 0 10px 24px -18px var(--brand); }
.prod:active{ transform: scale(.99); }

/* [신뢰] 네이버 검색 칩 */
.result__naver{ display: flex; flex-wrap: wrap; gap: 8px; }
.naver-chip{ display: inline-flex; align-items: center; gap: 7px; font: inherit; font-weight: 700; font-size: 13px;
  cursor: pointer; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 9px 14px;
  color: var(--ink); transition: border-color .15s ease, transform .1s ease; }
.naver-chip:hover{ border-color: #03c75a; }
.naver-chip:active{ transform: scale(.97); }
.naver-chip__n{ width: 18px; height: 18px; border-radius: 5px; background: #03c75a; color: #fff;
  font-weight: 900; font-size: 12px; display: grid; place-items: center; }

/* [광고] 배너 — 테스트 사이트와 분리된 '광고 슬롯' 느낌 (고정 브랜드색) */
.result__banners{ display: flex; flex-direction: column; gap: 10px; }
.adslot{ border: 1px dashed #d6d6e0; border-radius: 18px; padding: 9px; background: #fcfcfe; }
.adslot__tag{ display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em;
  color: #aeaeba; text-transform: uppercase; margin: 1px 4px 8px; }
.adbanner{ position: relative; width: 100%; font: inherit; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 14px; border: none; border-radius: 13px;
  padding: 17px 16px; color: #fff; overflow: hidden;
  background: linear-gradient(120deg, #FF6FA5, #9B5DE5);
  box-shadow: 0 12px 26px -12px rgba(155,93,229,.6);
  transition: transform .1s ease; }
.adbanner:active{ transform: scale(.99); }
.adbanner__ico{ flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.22);
  display: grid; place-items: center; font-size: 26px; }
.adbanner__txt{ flex: 1; display: flex; flex-direction: column; gap: 2px; }
.adbanner__txt b{ font-size: 16px; font-weight: 800; }
.adbanner__txt span{ font-size: 13px; opacity: .92; word-break: keep-all; }
.adbanner__cta{ flex: 0 0 auto; font-size: 13px; font-weight: 800; background: rgba(255,255,255,.25);
  padding: 8px 12px; border-radius: 999px; }

/* (구) 제품 캡슐 썸네일 — 클릭형 버튼에서도 재사용 */
.prod__rank{ flex: 0 0 auto; font-size: 11px; font-weight: 900; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, #fff); padding: 3px 8px; border-radius: 8px; }
.prod__cap{ flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 21px;
  background: radial-gradient(120% 120% at 35% 25%, color-mix(in srgb, var(--c) 55%, #fff), var(--c));
  box-shadow: 0 8px 16px -8px var(--c); }
.prod__body{ flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.prod__name{ font-size: 14.5px; font-weight: 800; word-break: keep-all; }
.prod__ing{ font-size: 12px; color: var(--brand); font-weight: 700; }
.prod__note{ font-size: 11.5px; color: var(--ink-soft); }
.prod__soon{ flex: 0 0 auto; font-size: 10.5px; color: #a6a6b4; text-align: center; line-height: 1.3; }

/* 타입 캐릭터 이미지(AI 일러스트) */
.char-img{ width: 150px; height: 150px; border-radius: 28px; object-fit: cover;
  box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--c) 60%, transparent); }
.lp__type-img{ flex: 0 0 auto; width: 44px; height: 44px; border-radius: 11px; object-fit: cover; }
.rel__img{ width: 46px; height: 46px; border-radius: 50%; object-fit: cover; padding: 0 !important;
  background: none !important; box-shadow: 0 8px 16px -8px rgba(0,0,0,.25); }

/* 타입 캐릭터 얼굴(일러스트 가시화 · 구버전 SVG, 미사용) */
.face{ position: relative; width: 116px; height: 116px; }
.face__svg{ width: 116px; height: 116px; filter: drop-shadow(0 14px 26px color-mix(in srgb, var(--c) 45%, transparent)); }
.face__badge{ position: absolute; right: -2px; bottom: 2px; width: 38px; height: 38px; border-radius: 50%;
  background: #fff; display: grid; place-items: center; font-size: 20px;
  box-shadow: 0 6px 14px -5px rgba(0,0,0,.3); border: 2px solid color-mix(in srgb, var(--c) 30%, #fff); }

/* 캡슐 캐릭터 아바타 (타입 이미지) */
.result__avatar{ display: flex; justify-content: center; margin: 2px 0 6px; }
.capsule{
  width: 104px; height: 104px; border-radius: 50%;
  background: radial-gradient(120% 120% at 35% 25%, color-mix(in srgb, var(--c) 55%, #fff) 0%, var(--c) 70%);
  display: grid; place-items: center; box-shadow: 0 14px 30px -10px var(--c);
  position: relative;
}
.capsule::after{ content:""; position:absolute; top:16px; left:22px; width:22px; height:12px;
  background: rgba(255,255,255,.6); border-radius: 50%; transform: rotate(-25deg); filter: blur(1px); }
.capsule__face{ font-size: 52px; line-height: 1; }

/* 셀럽 캐릭터(재미 요소) */
.result__persona{ margin-top: 12px; }
.result__persona b{ display: block; font-size: 18px; font-weight: 800; color: var(--brand); }
.result__persona span{ font-size: 13.5px; color: var(--ink-soft); word-break: keep-all; }

/* 타입 설명 트레잇 칩 */
.result__traits{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trait{
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
  box-shadow: 0 10px 24px -22px rgba(60,40,140,.5);
}
.trait__ico{ font-size: 24px; }
.trait__name{ font-size: 15px; font-weight: 800; color: var(--brand); }
.trait__hint{ font-size: 12px; color: var(--ink-soft); word-break: keep-all; }

/* 레이더 차트 */
.result__radarCard{ text-align: center; }
.result__radar{ display: flex; flex-direction: column; align-items: center; }
.radar-svg{ width: min(86vw, 300px); height: auto; }
.radar-note{ font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; word-break: keep-all; }
.radar__cap{ font-size:12.5px; color:var(--ink-soft); line-height:1.6; margin-top:12px; max-width:310px; word-break:keep-all; text-align:center; }
.radar__cap b{ color:var(--type-ink); font-weight:800; }
.radar__capsub{ display:block; font-size:11px; color:#a0a0ac; margin-top:3px; }
/* 레이더 해석: 두 줄을 각각 글머리 줄로 분리 */
.radar__caplist{ list-style:none; padding:0; margin-bottom:0; text-align:left; }
.radar__caplist li{ position:relative; padding-left:13px; }
.radar__caplist li + li{ margin-top:5px; }
.radar__caplist li::before{ content:"•"; position:absolute; left:2px; top:0; color:var(--type-ink); font-weight:800; }
.radar-note b{ color: var(--brand); font-weight: 800; }

/* 성분 '왜?' 펼쳐보기 */
.ingredients{ gap: 4px; }
.ing{ display: block; border-bottom: 1px solid var(--line); }
.ing:last-child{ border-bottom: none; }
.ing__head{
  width: 100%; background: none; border: none; cursor: pointer; font: inherit;
  display: flex; align-items: center; gap: 10px; padding: 12px 2px; text-align: left;
}
.ing__head:disabled{ cursor: default; }
.ing__main{ flex: 1; display: flex; flex-direction: column; gap: 1px; }
.ing__toggle{
  flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, #fff); padding: 4px 10px; border-radius: 999px;
  transition: background .15s ease;
}
.ing.is-open .ing__toggle{ background: var(--brand); color: #fff; }
.ing__why{
  max-height: 0; overflow: hidden; opacity: 0; font-size: 13px; color: var(--ink-soft);
  padding: 0 2px; transition: max-height .3s ease, opacity .25s ease, padding .3s ease; word-break: keep-all;
}
.ing.is-open .ing__why{ max-height: 140px; opacity: 1; padding: 0 2px 12px; }

/* 궁합·비교 */
.result__related{ display: flex; flex-direction: column; gap: 10px; }
.rel{ display: flex; align-items: center; gap: 14px; background: #faf9ff;
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.rel__cap{
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-size: 24px; background: radial-gradient(120% 120% at 35% 25%, color-mix(in srgb, var(--c) 55%, #fff), var(--c));
  box-shadow: 0 8px 18px -8px var(--c);
}
.rel__body{ display: flex; flex-direction: column; gap: 1px; }
.rel__label{ font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.rel__code{ font-size: 17px; font-weight: 900; letter-spacing: .06em; color: var(--ink); }
.rel__title{ font-size: 12.5px; color: var(--ink-soft); }

.result__cta{ display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 4px; }

/* 데스크톱: 내용이 양옆으로 퍼지지 않게 가운데 카드 느낌 유지 */
@media (min-width: 600px){
  .quiz__body{ gap: 18px; }
  .result__badge{ font-size: 34px; }
  .lp__cards{ flex-direction: row; }
  .lp__cards .lp__card{ flex: 1; }
}

/* ===== 흥미·공유 요소 (점수 / 운세 / TMI / 궁합) ===== */

/* 피부 종합 점수 + 피부 나이 */
.result__score{ text-align: center; background:
  radial-gradient(120% 90% at 50% 0%, var(--brand-soft) 0%, #fff 60%); }
.score__big{ display: flex; align-items: flex-end; justify-content: center; gap: 2px; margin: 2px 0 4px; }
.score__num{ font-size: 64px; font-weight: 900; line-height: 1; letter-spacing: -2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent; }
.score__unit{ font-size: 22px; font-weight: 800; color: var(--ink-soft); margin-bottom: 8px; }
.score__grade{ font-size: 15px; font-weight: 800; color: var(--brand); margin-bottom: 14px; }
.score__age{ display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px;
  background: var(--brand-softer); border-radius: 999px; }
.score__age-lab{ font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.score__age-val{ font-size: 22px; font-weight: 900; color: var(--ink); }
.score__age-val small{ font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.score__age-line{ margin-top: 12px; font-size: 14.5px; color: var(--ink-soft); word-break: keep-all; }
.score__age-line b{ color: var(--ink); font-weight: 800; }

/* 이번 주 피부 운세 */
.result__fortune{ background: linear-gradient(160deg, #f6f3ff 0%, #fff 55%); }
.fortune__mood{ font-size: 15px; font-weight: 700; color: var(--ink); word-break: keep-all; line-height: 1.6; }
.fortune__alert{ display: flex; gap: 10px; margin-top: 14px; padding: 14px;
  background: #fff5f6; border: 1px solid #ffd9df; border-radius: 14px; }
.fortune__alert-ico{ flex: 0 0 auto; font-size: 18px; }
.fortune__alert-txt b{ font-size: 13px; font-weight: 800; color: #e0567a; }
.fortune__alert-txt p{ margin-top: 3px; font-size: 14px; color: var(--ink); word-break: keep-all; line-height: 1.55; }
.fortune__alert-txt p b{ color: #e0567a; }
.fortune__lucky{ margin-top: 12px; padding: 12px 14px; font-size: 14px; color: var(--ink);
  background: #eefaf0; border: 1px solid #cdeed3; border-radius: 14px; word-break: keep-all; }
.fortune__lucky b{ color: #2f9e54; font-weight: 800; }

/* TMI 카드 */
.tmi__meme{ font-size: 15px; font-weight: 800; color: var(--brand); word-break: keep-all;
  margin-bottom: 12px; line-height: 1.5; }
.tmi__list{ list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tmi__list li{ font-size: 14.5px; color: var(--ink); line-height: 1.55; word-break: keep-all;
  padding: 11px 14px; background: var(--brand-softer); border-radius: 12px; }
.tmi__foot{ margin-top: 14px; text-align: center; font-size: 14px; font-weight: 700; color: var(--ink-soft); }

/* 피부 궁합 (베프·상극) */
.match__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.match__card{ padding: 16px 14px; border: 1px solid var(--line); border-radius: 16px; text-align: center;
  background: var(--brand-softer); }
.match__head{ display: block; font-size: 12.5px; font-weight: 800; color: var(--ink-soft); margin-bottom: 10px; word-break: keep-all; }
.match__type{ display: flex; flex-direction: column; align-items: center; gap: 4px; }
.match__emoji{ width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; }
.match__name{ font-size: 14.5px; font-weight: 900; word-break: keep-all; line-height: 1.3; }
.match__code{ font-size: 11px; font-weight: 700; color: var(--ink-soft); letter-spacing: .06em; }
.match__line{ margin-top: 10px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; word-break: keep-all; }
@media (max-width: 360px){ .match__grid{ grid-template-columns: 1fr; } }

/* 케어 루틴 접이식 */
.advice__more{ margin-top: 4px; border-top: 1px dashed var(--line); padding-top: 4px; }
.advice__more summary{ cursor: pointer; list-style: none; padding: 12px 2px; font-size: 13.5px;
  font-weight: 800; color: var(--brand); }
.advice__more summary::-webkit-details-marker{ display: none; }
.advice__more summary::after{ content: " ▾"; }
.advice__more[open] summary::after{ content: " ▴"; }

/* ===== 내 피부 리포트 강화 요소 (2026-06-26) ===== */

/* 한 줄 정의 (히어로) */
.result__oneline{ margin-top: 10px; font-size: 15.5px; font-weight: 700; color: var(--ink);
  line-height: 1.55; word-break: keep-all; max-width: 30em; margin-left: auto; margin-right: auto; }

/* 퍼스널컬러 포지셔닝 */
.result__positioning{ text-align: center; padding: 20px 18px; border-radius: var(--radius);
  background: linear-gradient(135deg, #f3f0ff 0%, #fff0f6 100%); border: 1px solid #ece6ff; }
.pos__tag{ display: inline-block; font-size: 12.5px; font-weight: 900; color: #fff;
  background: linear-gradient(90deg, var(--brand), #9B5DE5); padding: 6px 14px; border-radius: 999px; }
.pos__body{ margin-top: 12px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; word-break: keep-all; }
.pos__body b{ color: var(--ink); font-weight: 800; }

/* 피부 능력치 카드 */
.stat__grid{ display: flex; flex-direction: column; gap: 9px; }
.stat__row{ display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; background: var(--brand-softer); border-radius: 12px; }
.stat__lab{ font-size: 14px; font-weight: 700; color: var(--ink); }
.stat__stars{ font-size: 16px; letter-spacing: 1px; }
.stat--good .stat__stars{ color: #2f9e54; }
.stat--risk .stat__stars{ color: #e8a33e; }
.stat__off{ color: #d8d8e2; }

/* 찾아야 할 성분 */
.find__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.find__axis{ padding: 12px; border: 1px solid var(--line); border-radius: 14px; }
.find__axhead{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
.find__axhead b{ font-size: 14px; font-weight: 900; }
.find__letter{ font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; letter-spacing: .02em; }
.find__chips{ display: flex; flex-wrap: wrap; gap: 5px; }
.find__chip{ font-size: 12px; font-weight: 600; color: var(--ink); background: var(--brand-softer);
  border-radius: 8px; padding: 5px 9px; word-break: keep-all; }
@media (max-width: 380px){ .find__grid{ grid-template-columns: 1fr; } }

/* 조심해야 할 성분/습관 */
.result__avoid{ background: linear-gradient(160deg, #fff6f6 0%, #fff 60%); }
.avoid__list{ list-style: none; display: flex; flex-direction: column; gap: 8px; }
.avoid__list li{ position: relative; padding: 10px 12px 10px 36px; font-size: 14px; color: var(--ink);
  background: #fff; border: 1px solid #ffe0e0; border-radius: 11px; line-height: 1.5; word-break: keep-all; }
.avoid__list li::before{ content: "🚫"; position: absolute; left: 11px; top: 9px; font-size: 14px; }

/* 관리 우선순위 */
.pri__list{ display: flex; flex-direction: column; gap: 12px; }
.pri__row{ display: flex; align-items: center; gap: 10px; }
.pri__rank{ flex: 0 0 auto; width: 44px; font-size: 12px; font-weight: 900; color: var(--brand);
  background: var(--brand-soft); border-radius: 8px; text-align: center; padding: 6px 0; }
.pri__barwrap{ flex: 1; }
.pri__head{ display: flex; justify-content: space-between; margin-bottom: 5px; }
.pri__head b{ font-size: 13.5px; font-weight: 800; color: var(--ink); }
.pri__pct{ font-size: 13px; font-weight: 900; color: var(--brand); }
.pri__track{ height: 9px; background: var(--brand-soft); border-radius: 999px; overflow: hidden; }
.pri__fill{ height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), #9B5DE5); }

/* 피부 성장 로드맵 */
.road__list{ list-style: none; position: relative; padding-left: 8px; margin: 4px 0 6px; }
.road__list::before{ content: ""; position: absolute; left: 14px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(var(--brand-soft), var(--brand)); }
.road__step{ position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.road__dot{ position: relative; z-index: 1; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--brand-2); margin-left: 6px; }
.road__lab{ font-size: 14px; font-weight: 700; color: var(--ink); }
.road__step--now .road__dot{ border-color: var(--ink-soft); }
.road__step--now .road__lab{ color: var(--ink-soft); }
.road__step--goal .road__dot{ background: var(--brand); border-color: var(--brand); width: 16px; height: 16px; margin-left: 5px; }
.road__step--goal .road__lab{ font-weight: 900; color: var(--brand); font-size: 15px; }

/* 투자 효율 */
.result__invest{ background: linear-gradient(135deg, #f0f6ff 0%, #fff 60%); }
.invest__tag{ display: inline-block; font-size: 13px; font-weight: 900; color: var(--brand);
  background: #fff; border: 1.5px solid var(--brand-soft); padding: 7px 14px; border-radius: 999px; }
.invest__body{ margin-top: 12px; font-size: 14.5px; color: var(--ink); line-height: 1.65; word-break: keep-all; }
.invest__body b{ font-weight: 800; }

/* 공유용 결과 카드 */
.sharecard{ text-align: center; padding: 26px 20px; border-radius: 18px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--c) 16%, #fff) 0%, #fff 60%);
  border: 1.5px solid color-mix(in srgb, var(--c) 24%, #fff); }
.sharecard__label{ font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--ink-soft); }
.sharecard__badge{ width: 96px; height: 96px; margin: 12px auto 10px; border-radius: 50%; color: #fff;
  font-size: 24px; font-weight: 900; display: grid; place-items: center; letter-spacing: .03em; }
.sharecard__title{ font-size: 19px; font-weight: 900; color: var(--ink); }
.sharecard__one{ margin: 8px auto 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5;
  max-width: 24em; word-break: keep-all; }
.sharecard__stats{ display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
.sharecard__stat{ font-size: 11.5px; color: var(--ink-soft); background: var(--brand-softer);
  border-radius: 999px; padding: 5px 10px; }
.sharecard__stat b{ color: #e8a33e; }
.sharecard__ings{ margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.sharecard__ings-lab{ display: block; font-size: 11px; font-weight: 700; color: var(--ink-soft); margin-bottom: 4px; }
.sharecard__ings b{ font-size: 14px; font-weight: 800; color: var(--ink); word-break: keep-all; }
.sharecard__foot{ display: block; margin-top: 16px; font-size: 11px; font-weight: 800; color: var(--brand); letter-spacing: .04em; }
.share__btns{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.share__btns .btn{ flex: 1; min-width: 100px; font-size: 13.5px; padding: 12px 8px; }

/* 친구 찾기 / 이벤트 */
.friends__list{ display: flex; flex-direction: column; gap: 9px; }
.friends__row{ display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px; background: var(--brand-softer); border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
.friends__row--soon{ cursor: default; opacity: .72; }
.friends__ico{ flex: 0 0 auto; font-size: 22px; }
.friends__txt{ flex: 1; display: flex; flex-direction: column; gap: 2px; }
.friends__txt b{ font-size: 14px; font-weight: 800; color: var(--ink); }
.friends__txt span{ font-size: 12px; color: var(--ink-soft); }
.friends__go{ font-size: 18px; color: var(--brand); font-weight: 800; }
.friends__soon{ font-size: 9.5px; font-weight: 900; color: #fff; background: var(--brand-2);
  padding: 4px 7px; border-radius: 6px; letter-spacing: .04em; }

/* 네이버 단일 검색박스 */
.naverbox{ display: flex; align-items: center; gap: 10px; width: 100%; padding: 15px 16px;
  background: #fff; border: 1.5px solid #e3e3ec; border-radius: 14px; cursor: pointer; }
.naverbox__n{ flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px; background: #03c75a;
  color: #fff; font-weight: 900; font-size: 14px; display: grid; place-items: center; }
.naverbox__q{ flex: 1; font-size: 14px; font-weight: 600; color: var(--ink-soft); text-align: left; }
.naverbox__ico{ font-size: 15px; }

/* ===== ChatGPT 평가 반영 v2 (특징·핵심성분·전용루틴) ===== */

/* 피부 특징 3카드 */
.feat__list{ display: flex; flex-direction: column; gap: 10px; }
.feat__card{ display: flex; gap: 12px; padding: 14px; background: var(--brand-softer); border-radius: 14px; }
.feat__no{ flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff;
  font-size: 14px; font-weight: 900; display: grid; place-items: center; }
.feat__txt b{ font-size: 14.5px; font-weight: 800; color: var(--ink); word-break: keep-all; line-height: 1.4; }
.feat__txt p{ margin-top: 4px; font-size: 13px; color: var(--ink-soft); line-height: 1.55; word-break: keep-all; }

/* 핵심 성분 + 이유 */
.key__list{ list-style: none; display: flex; flex-direction: column; gap: 10px; }
.key__row{ display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 13px; }
.key__no{ flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; background: var(--brand-soft);
  color: var(--brand); font-size: 13px; font-weight: 900; display: grid; place-items: center; }
.key__name{ font-size: 14.5px; font-weight: 900; color: var(--ink); }
.key__why{ margin-top: 3px; font-size: 13px; color: var(--ink-soft); line-height: 1.5; word-break: keep-all; }

/* 접이식 (축별 전체 / 과학 상세) */
.find__more, .result__scimore{ }
.find__more summary, .result__scimore summary{ cursor: pointer; list-style: none; padding: 12px 2px;
  font-size: 13.5px; font-weight: 800; color: var(--brand); }
.find__more summary::-webkit-details-marker, .result__scimore summary::-webkit-details-marker{ display: none; }
.find__more summary::after, .result__scimore summary::after{ content: " ▾"; }
.find__more[open] summary::after, .result__scimore[open] summary::after{ content: " ▴"; }
.find__more{ margin-top: 12px; border-top: 1px dashed var(--line); }
.find__more .find__grid{ margin-top: 10px; }

/* 전용 루틴 */
.rt__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rt__col{ padding: 14px; background: var(--brand-softer); border-radius: 14px; }
.rt__head{ font-size: 14px; color: var(--ink); margin-bottom: 10px; }
.rt__head b{ font-weight: 900; }
.rt__steps{ list-style: none; counter-reset: rt; display: flex; flex-direction: column; gap: 8px; }
.rt__steps li{ position: relative; counter-increment: rt; padding-left: 24px; font-size: 13px;
  color: var(--ink); line-height: 1.45; word-break: keep-all; }
.rt__steps li::before{ content: counter(rt); position: absolute; left: 0; top: 1px; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; border: 1.5px solid var(--brand-2); color: var(--brand-2);
  font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.rt__weekly{ margin-top: 12px; padding: 12px 14px; font-size: 13.5px; color: var(--ink);
  background: #eef6ff; border: 1px solid #d4e6ff; border-radius: 12px; word-break: keep-all; }
.rt__weekly b{ font-weight: 800; }
@media (max-width: 360px){ .rt__grid{ grid-template-columns: 1fr; } }

/* 제품 매칭률 안내 */
.result__matchnote{ margin-top: 12px; padding: 11px 13px; font-size: 12.5px; color: var(--ink-soft);
  background: var(--brand-softer); border-radius: 11px; line-height: 1.55; word-break: keep-all; }

/* ===== 과학 인과 화살표 체인 + 병합 시뮬 (2026-06-29) ===== */

/* 화살표 체인 */
.chain{ display: flex; flex-wrap: wrap; align-items: stretch; gap: 7px; margin-top: 14px; }
.chain__node{ display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 9px 12px; background: var(--brand-softer); border: 1px solid var(--line);
  border-radius: 11px; min-width: 0; }
.chain__node b{ font-size: 13px; font-weight: 800; color: var(--ink); word-break: keep-all; line-height: 1.3; }
.chain__node em{ font-style: normal; font-size: 11.5px; color: var(--ink-soft); word-break: keep-all; line-height: 1.3; }
.chain__arr{ display: flex; align-items: center; font-size: 15px; font-weight: 900; color: var(--brand-2); }
.chain__out{ display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 9px 13px; border-radius: 11px; color: #fff; font-size: 13.5px; font-weight: 900;
  background: linear-gradient(90deg, var(--brand), #9B5DE5); word-break: keep-all; line-height: 1.3; }
.chain__out small{ font-size: 10.5px; font-weight: 600; opacity: .92; }

/* 찾아야 할 성분 카드 안에 병합된 시뮬 */
.find__sim{ margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.sim__h{ font-size: 15.5px; font-weight: 900; color: var(--ink); margin-bottom: 4px; }
.sim__h .sim__sub{ font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-left: 4px; }

/* ===== 피부 사주 + 클릭형 성분 시뮬 (2026-06-29) ===== */

/* 피부 사주 (토종비결) */
.result__saju{ background: linear-gradient(165deg, #f5f1ff 0%, #fff 55%); }
.saju__sub{ font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-left: 4px; }
.saju__gijil{ font-size: 15px; font-weight: 800; color: var(--brand); word-break: keep-all; line-height: 1.5; }
.saju__era{ list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 0; }
.saju__row{ display: flex; gap: 12px; padding: 10px 12px; border-radius: 10px; align-items: flex-start; }
.saju__row.is-now{ background: #fff; border: 1px solid #e3d9ff; box-shadow: 0 6px 16px -10px var(--brand); }
.saju__age{ flex: 0 0 64px; font-size: 13px; font-weight: 900; color: var(--ink); }
.saju__age em{ display: inline-block; font-style: normal; font-size: 10px; font-weight: 800; color: #fff;
  background: var(--brand); border-radius: 6px; padding: 1px 5px; margin-left: 2px; }
.saju__txt{ flex: 1; font-size: 13px; color: var(--ink-soft); line-height: 1.5; word-break: keep-all; }
.saju__row.is-now .saju__txt{ color: var(--ink); }
.saju__warn{ margin-top: 14px; padding: 13px 14px; font-size: 14px; color: var(--ink); line-height: 1.55;
  background: #fbf6e9; border: 1px solid #efe2c2; border-radius: 12px; word-break: keep-all; }

/* 클릭형 성분 칩 */
.find__gridh{ margin-top: 18px; margin-bottom: 10px; font-size: 14.5px; font-weight: 900; color: var(--ink); }
.find__gridh span{ font-size: 12px; font-weight: 700; color: var(--brand); }
.find__chip{ font-size: 12px; font-weight: 700; color: var(--ink); background: var(--brand-softer);
  border: 1.5px solid transparent; border-radius: 8px; padding: 6px 10px; cursor: pointer;
  word-break: keep-all; transition: all .15s; font-family: inherit; }
.find__chip:hover{ border-color: var(--brand-2); background: #fff; }
.find__chip.is-sel{ background: var(--brand); color: #fff; border-color: var(--brand); }

/* 시뮬 캡션 / 리셋 */
.sim__cap{ margin-top: 12px; padding: 12px 14px; font-size: 14px; color: var(--ink); line-height: 1.5;
  background: var(--brand-softer); border-radius: 12px; word-break: keep-all; text-align: center; }
.sim__cap b{ font-weight: 900; color: var(--brand); }
.sim__reset{ margin-top: 10px; width: 100%; font-size: 13.5px; padding: 11px; }

/* ============================================================
   메인(인트로) 2026-10-24 — 하늘·민트·청록 랜딩. 모든 규칙은 .screen--intro 안에서만 적용(결과·문항 화면 영향 없음)
   ============================================================ */
.screen--intro{
  --mr-teal: #0b7f7b; --mr-teal-deep: #0d4d4f; --mr-teal-soft: #d8f1ee;
  --mr-sky: #eaf6fd; --mr-mint: #e6f6f1; --mr-yellow: #ffd54a; --mr-ink: #15171f; --mr-ink-soft: #545868;
  --mr-wrap: 1080px;
  background: #fff; color: var(--mr-ink);
}
.screen--intro::before{ display: none; }
.screen--intro .mr__nav{
  display: flex; align-items: center; height: 56px; padding: 0 clamp(18px, 5vw, 40px);
  background: #fff; border-bottom: 1px solid #edf1f4; position: static;
}
.screen--intro .mr__logo{ font-weight: 900; letter-spacing: .04em; font-size: 16px; color: var(--mr-teal-deep); }
.screen--intro .mr__logo span{ color: var(--mr-ink-soft); font-weight: 700; font-size: 12px; margin-left: 6px; letter-spacing: 0; }
.screen--intro .mr{ overflow-x: hidden; }
.screen--intro .mr > section,
.screen--intro .mr > footer{ max-width: var(--mr-wrap); margin: 0 auto; padding-left: clamp(18px, 5vw, 32px); padding-right: clamp(18px, 5vw, 32px); }

/* 버튼(알약) */
.screen--intro .mr__btn{ display: block; width: 100%; max-width: 360px; margin: 0 auto; padding: 17px 26px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.screen--intro .mr__btn--teal{ background: var(--mr-teal); color: #fff; box-shadow: 0 14px 28px -14px rgba(11,127,123,.75); }
.screen--intro .mr__btn--outline{ background: #fff; color: var(--mr-teal); border: 2px solid var(--mr-teal); margin-top: 28px; }
.screen--intro .mr__btn--yellow{ background: var(--mr-yellow); color: var(--mr-ink); box-shadow: 0 14px 28px -14px rgba(0,0,0,.45); margin: 22px 0 0; }
.screen--intro .mr__btn:focus-visible{ outline: 3px solid #f2b400; outline-offset: 3px; }

/* 히어로 */
.screen--intro .mr__hero{
  max-width: none !important; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-top: clamp(36px, 9vw, 72px) !important; padding-bottom: clamp(36px, 8vw, 64px) !important;
  background: linear-gradient(180deg, var(--mr-sky) 0%, #f6fbfe 58%, #fff 100%);
}
.screen--intro .mr__hero-text{ order: 1; max-width: 640px; }
.screen--intro .mr__title{ font-size: clamp(31px, 8.6vw, 54px); font-weight: 900; line-height: 1.2; letter-spacing: -.025em; color: var(--mr-ink); word-break: keep-all; }
.screen--intro .mr__title strong{ color: var(--mr-teal); font-weight: 900; }
.screen--intro .mr__sub{ margin-top: 14px; font-size: clamp(17px, 4.6vw, 22px); font-weight: 800; color: var(--mr-teal); word-break: keep-all; }
.screen--intro .mr__lead{ margin-top: 10px; font-size: clamp(15px, 4vw, 17px); color: var(--mr-ink-soft); line-height: 1.6; word-break: keep-all; }
.screen--intro .mr__hero-cta{ order: 3; width: 100%; margin-top: 26px; }   /* 모바일: 그림 아래 */
.screen--intro .mr__meta{ list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--mr-ink-soft); }
.screen--intro .mr__meta li + li::before{ content: "·"; margin-right: 16px; color: #b6bcc6; }
.screen--intro .mr__hero-art{ order: 2; position: relative; width: 100%; max-width: 420px; height: 210px; margin-top: 28px; }
.screen--intro .mr__isle{ position: absolute; bottom: 14px; width: 96px; text-align: center; }
.screen--intro .mr__isle img{ display: block; width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 12px 22px -12px rgba(13,77,79,.45); }
.screen--intro .mr__isle::after{ content: ""; display: block; width: 104px; height: 22px; margin: -8px auto 0; border-radius: 50%; background: radial-gradient(closest-side, #cfeee6, #bfe5dc 70%, rgba(191,229,220,0)); }
.screen--intro .mr__isle--1, .screen--intro .mr__isle--5{ display: none; }   /* 모바일: 가운데 3명 */
.screen--intro .mr__isle--2{ left: 4%; bottom: 34px; }
.screen--intro .mr__isle--3{ left: 50%; transform: translateX(-50%); bottom: 64px; }
.screen--intro .mr__isle--3 img{ width: 104px; height: 104px; }
.screen--intro .mr__isle--4{ right: 4%; bottom: 24px; }
.screen--intro .mr__cloud{ position: absolute; height: 26px; border-radius: 999px; background: #fff; opacity: .95; box-shadow: 0 6px 14px -10px rgba(13,77,79,.25); }
.screen--intro .mr__cloud::before{ content: ""; position: absolute; left: 22%; top: -12px; width: 46%; height: 30px; border-radius: 50%; background: inherit; }
.screen--intro .mr__cloud--a{ width: 86px; left: 2%; top: 6px; }
.screen--intro .mr__cloud--b{ width: 64px; right: 6%; top: 0; }
.screen--intro .mr__cloud--c{ width: 52px; left: 58%; top: 44px; opacity: .8; }

/* 공통 구역 */
.screen--intro .mr__section{ padding-top: clamp(56px, 12vw, 104px); padding-bottom: 0; text-align: center; }
.screen--intro .mr__kicker{ font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--mr-teal); margin-bottom: 8px; }
.screen--intro .mr__h2{ font-size: clamp(25px, 6.8vw, 36px); font-weight: 900; line-height: 1.28; letter-spacing: -.02em; color: var(--mr-ink); word-break: keep-all; }

/* 혜택 4 */
.screen--intro .mr__benefits{ display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 32px; text-align: left; }
.screen--intro .mr__benefit{ background: #fff; border: 1px solid #e3eef0; border-radius: 20px; padding: 22px 20px; box-shadow: 0 16px 34px -26px rgba(13,77,79,.35); }
.screen--intro .mr__benefit-no{ display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--mr-teal-soft); color: var(--mr-teal); font-weight: 900; font-size: 14px; }
.screen--intro .mr__benefit h3{ margin-top: 12px; font-size: 18px; font-weight: 800; }
.screen--intro .mr__benefit p{ margin-top: 6px; font-size: 14.5px; color: var(--mr-ink-soft); line-height: 1.6; word-break: keep-all; }

/* 비교 */
.screen--intro .mr__compare{ display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-top: 32px; text-align: left; }
.screen--intro .mr__cmp{ border-radius: 20px; padding: 24px 22px; }
.screen--intro .mr__cmp h3{ font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.screen--intro .mr__cmp p{ font-size: 14.5px; line-height: 1.65; color: var(--mr-ink-soft); word-break: keep-all; }
.screen--intro .mr__cmp p + p{ margin-top: 8px; }
.screen--intro .mr__cmp--before{ background: #f3f5f7; }
.screen--intro .mr__cmp--after{ background: var(--mr-mint); border: 2px solid #bfe5dc; }
.screen--intro .mr__cmp--after h3{ color: var(--mr-teal); }
.screen--intro .mr__vs{ position: relative; height: 56px; display: grid; place-items: center; }
.screen--intro .mr__vs::before{ content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dotted #b9c6cc; }
.screen--intro .mr__vs span{ position: relative; background: #fff; color: var(--mr-ink-soft); font-weight: 900; font-size: 13px; padding: 4px 10px; border-radius: 999px; border: 1px solid #dfe6ea; }

/* 민트 패널 · 4축 */
.screen--intro .mr__panel{ position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; background: var(--mr-mint); border-radius: 24px; padding: 34px 20px 28px; text-align: left; }
.screen--intro .mr__dots{ position: absolute; top: 16px; right: 18px; display: flex; gap: 5px; }
.screen--intro .mr__dots i{ width: 7px; height: 7px; border-radius: 50%; background: #9fd6c9; }
.screen--intro .mr__panel-art img{ display: block; width: 132px; height: 132px; border-radius: 50%; object-fit: cover; border: 5px solid #fff; box-shadow: 0 16px 30px -18px rgba(13,77,79,.5); }
.screen--intro .mr__panel-body{ width: 100%; }
.screen--intro .mr__panel-body .mr__kicker, .screen--intro .mr__panel-body .mr__h2{ text-align: center; }
.screen--intro .mr__axes{ list-style: none; display: grid; gap: 10px; margin-top: 22px; }
.screen--intro .mr__axes li{ display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: 16px; padding: 14px 16px; }
.screen--intro .mr__axis-no{ flex: 0 0 auto; font-weight: 900; font-size: 15px; color: var(--mr-teal); min-width: 26px; padding-top: 1px; }
.screen--intro .mr__axes b{ font-size: 16.5px; font-weight: 800; margin-right: 8px; }
.screen--intro .mr__axes em{ font-style: normal; font-size: 13px; font-weight: 700; color: var(--mr-teal); }
.screen--intro .mr__axes p{ font-size: 14px; color: var(--mr-ink-soft); margin-top: 2px; word-break: keep-all; }

/* 타입 미리보기 4 */
.screen--intro .mr__swatches{ display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin: 18px auto 0; max-width: 320px; }
.screen--intro .mr__swatches .lp__swatch{ width: 14px; height: 14px; border-radius: 50%; box-shadow: none; animation: none; }
.screen--intro .mr__types{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0 28px; text-align: left; }
.screen--intro .mr__type{ position: relative; display: flex; flex-direction: column; border-radius: 20px; padding: 16px 14px 0; overflow: hidden; min-width: 0; }
.screen--intro .mr__type-code{ font-size: 12.5px; font-weight: 900; letter-spacing: .08em; }
.screen--intro .mr__type h3{ margin-top: 4px; font-size: 15.5px; font-weight: 800; line-height: 1.3; word-break: keep-all; }
.screen--intro .mr__type p{ margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--mr-ink-soft); word-break: keep-all; }
.screen--intro .mr__type img{ display: block; width: 92px; height: 92px; margin: 14px auto 0; border-radius: 50% 50% 0 0; object-fit: cover; object-position: top; }
.screen--intro .mr__type--violet{ background: #f1ebfa; } .screen--intro .mr__type--violet .mr__type-code{ color: #6b45a8; }
.screen--intro .mr__type--green{ background: #e8f5ec; }  .screen--intro .mr__type--green .mr__type-code{ color: #2f7a48; }
.screen--intro .mr__type--blue{ background: #e8f0fb; }   .screen--intro .mr__type--blue .mr__type-code{ color: #2f5e9e; }
.screen--intro .mr__type--gold{ background: #fbf3dc; }   .screen--intro .mr__type--gold .mr__type-code{ color: #8a6512; }

/* 진단 체계 안내 3 */
.screen--intro .mr__infos{ display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 32px; text-align: left; }
.screen--intro .mr__info{ background: #fff; border: 1px solid #e3eef0; border-radius: 20px; padding: 22px 20px; }
.screen--intro .mr__info h3{ font-size: 17px; font-weight: 800; color: var(--mr-teal-deep); }
.screen--intro .mr__info p{ margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--mr-ink-soft); word-break: keep-all; }

/* 마무리 배너 */
.screen--intro .mr__banner{ position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: clamp(56px, 12vw, 104px) !important;
  background: var(--mr-teal-deep); color: #fff; border-radius: 24px; padding-top: 34px !important; padding-bottom: 0 !important; overflow: hidden; max-width: calc(var(--mr-wrap) - 64px) !important; }
.screen--intro .mr__banner h2{ font-size: clamp(24px, 6.4vw, 32px); font-weight: 900; line-height: 1.3; letter-spacing: -.02em; color: #fff; word-break: keep-all; }
.screen--intro .mr__banner p{ margin-top: 10px; font-size: 14.5px; color: rgba(255,255,255,.88); line-height: 1.6; word-break: keep-all; }
.screen--intro .mr__banner .mr__btn--yellow{ max-width: 300px; }
.screen--intro .mr__banner-art{ align-self: flex-end; }
.screen--intro .mr__banner-art img{ display: block; width: 130px; height: 130px; border-radius: 50% 50% 0 0; object-fit: cover; object-position: top; }

/* 푸터 */
.screen--intro .mr__footer{ text-align: center; padding-top: 40px; padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.screen--intro .mr__footer .mr__logo{ display: inline-block; margin-bottom: 8px; }
.screen--intro .mr__footer p{ font-size: 12.5px; color: #8b919c; word-break: keep-all; }

/* 배너는 좌우 여백 안쪽 카드 */
@media (max-width: 1143px){ .screen--intro .mr__banner{ margin-left: clamp(18px, 5vw, 32px) !important; margin-right: clamp(18px, 5vw, 32px) !important; } }

/* PC: 시작 버튼이 그림 위, 캐릭터 5명, 다단 */
@media (min-width: 900px){
  .screen--intro .mr__hero-cta{ order: 2; margin-top: 30px; }
  .screen--intro .mr__hero-art{ order: 3; max-width: 860px; height: 260px; margin-top: 34px; }
  .screen--intro .mr__isle--1, .screen--intro .mr__isle--5{ display: block; }
  .screen--intro .mr__isle img{ width: 104px; height: 104px; }
  .screen--intro .mr__isle{ width: 124px; }
  .screen--intro .mr__isle::after{ width: 136px; height: 26px; }
  .screen--intro .mr__isle--1{ left: 2%; bottom: 20px; }
  .screen--intro .mr__isle--2{ left: 20%; bottom: 62px; }
  .screen--intro .mr__isle--3{ bottom: 92px; }
  .screen--intro .mr__isle--3 img{ width: 128px; height: 128px; }
  .screen--intro .mr__isle--4{ right: 20%; bottom: 58px; }
  .screen--intro .mr__isle--5{ right: 2%; bottom: 16px; }
  .screen--intro .mr__cloud--a{ left: 8%; top: 18px; width: 120px; }
  .screen--intro .mr__cloud--b{ right: 10%; top: 6px; width: 92px; }
  .screen--intro .mr__cloud--c{ left: 46%; top: 2px; }
  .screen--intro .mr__benefits{ grid-template-columns: repeat(4, 1fr); }
  .screen--intro .mr__compare{ flex-direction: row; align-items: stretch; }
  .screen--intro .mr__cmp{ flex: 1; }
  .screen--intro .mr__vs{ width: 64px; height: auto; }
  .screen--intro .mr__panel{ flex-direction: row; align-items: center; gap: 40px; padding: 48px 56px; }
  .screen--intro .mr__panel-art img{ width: 220px; height: 220px; }
  .screen--intro .mr__panel-body .mr__kicker, .screen--intro .mr__panel-body .mr__h2{ text-align: left; }
  .screen--intro .mr__axes{ grid-template-columns: 1fr 1fr; }
  .screen--intro .mr__types{ grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .screen--intro .mr__type img{ width: 120px; height: 120px; }
  .screen--intro .mr__infos{ grid-template-columns: repeat(3, 1fr); }
  .screen--intro .mr__banner{ flex-direction: row; align-items: flex-end; justify-content: space-between; padding-left: 56px !important; padding-right: 40px !important; padding-top: 0 !important; }
  .screen--intro .mr__banner-text{ padding: 48px 0; }
  .screen--intro .mr__banner-art img{ width: 190px; height: 190px; }
}
@media (prefers-reduced-motion: reduce){
  .screen--intro .mr *{ animation: none !important; transition: none !important; }
}

/* ============================================================
   메인(인트로) 보라 팔레트 2026-10-25 — 이전 청록 팔레트만 대체. 모든 규칙은 .screen--intro 안에서만(문항·결과 화면 영향 없음)
   색은 안쪽 화면에서 실제로 쓰는 값만 재사용: 결과 포인트 #7C5CE6(app.js POINT_COLOR·준비 화면) · 결과 진한 보라 #411cba(--type-ink = inkOf(#7C5CE6))
   · 관리 가이드 제목 #4b3a91 · 문항 화면 배경 #faf9ff(--bg) · 선 #e8e8f0(--line) · 옅은 회색 #f5f5f8(--brand-softer) · 보조 글자 #6a6a7e(--ink-soft) · 준비 단계 테두리 #d9d5e8
   DOM·문구·배치·간격·그림·시작 버튼 동작은 그대로. 타입 카드·스와치의 타입 고유색은 자료 색이라 바꾸지 않는다
   ============================================================ */
.screen--intro{
  --mr-teal: #411cba; --mr-teal-deep: #4b3a91; --mr-teal-soft: color-mix(in srgb, #7C5CE6 14%, #fff);
  --mr-sky: color-mix(in srgb, #7C5CE6 12%, #faf9ff); --mr-mint: color-mix(in srgb, #7C5CE6 7%, #fff); --mr-yellow: #fff;
}
.screen--intro .mr__nav{ border-bottom-color: #e8e8f0; }
.screen--intro .mr__hero{ background: linear-gradient(180deg, var(--mr-sky) 0%, #faf9ff 58%, #fff 100%); }
.screen--intro .mr__btn--teal{ box-shadow: 0 14px 28px -14px color-mix(in srgb, #411cba 75%, transparent); }
.screen--intro .mr__btn--teal:hover{ background: color-mix(in srgb, #411cba 86%, #000); }
.screen--intro .mr__btn--outline:hover{ background: color-mix(in srgb, #7C5CE6 7%, #fff); }
.screen--intro .mr__btn--yellow{ color: #411cba; }
.screen--intro .mr__btn--yellow:hover{ background: color-mix(in srgb, #7C5CE6 10%, #fff); }
.screen--intro .mr__btn:focus-visible{ outline: 3px solid #7C5CE6; outline-offset: 3px; }
.screen--intro .mr__banner .mr__btn:focus-visible{ outline-color: #fff; }
.screen--intro .mr__meta li + li::before{ color: #a6a6b4; }
.screen--intro .mr__isle img{ box-shadow: 0 12px 22px -12px color-mix(in srgb, #4b3a91 45%, transparent); }
.screen--intro .mr__isle::after{ background: radial-gradient(closest-side, color-mix(in srgb, #7C5CE6 16%, #fff), color-mix(in srgb, #7C5CE6 22%, #fff) 70%, color-mix(in srgb, #7C5CE6 0%, transparent)); }
.screen--intro .mr__cloud{ box-shadow: 0 6px 14px -10px color-mix(in srgb, #4b3a91 25%, transparent); }
.screen--intro .mr__benefit{ border-color: #e8e8f0; box-shadow: 0 16px 34px -26px color-mix(in srgb, #4b3a91 35%, transparent); }
.screen--intro .mr__cmp--before{ background: #f5f5f8; }
.screen--intro .mr__cmp--after{ border-color: color-mix(in srgb, #7C5CE6 24%, #fff); }
.screen--intro .mr__vs::before{ border-left-color: #d9d5e8; }
.screen--intro .mr__vs span{ border-color: #e8e8f0; }
.screen--intro .mr__dots i{ background: color-mix(in srgb, #7C5CE6 40%, #fff); }
.screen--intro .mr__panel-art img{ box-shadow: 0 16px 30px -18px color-mix(in srgb, #4b3a91 50%, transparent); }
.screen--intro .mr__info{ border-color: #e8e8f0; }
.screen--intro .mr__footer p{ color: #6a6a7e; }

/* 2026-11-03 사용자 요청: 첫 히어로 그림(characters/ORMY.png 그대로)을 나머지 4개와 같은 원형 디자인으로 통일 —
   2026-11-02 의 첫 그림 전용 둥근 사각·테두리 없음·::after 숨김 규칙을 제거해 공통 .mr__isle 규칙(원형·흰 테두리·그림자·아래 타원)을 그대로 쓴다 */