/* 경기천년바탕 Bold: 사이트 제목·유형 이름 글자만 잘라 낸 파일 (경기도청 배포 웹폰트에서). 글자를 추가하면 다시 만들어야 함 */
@font-face {
  font-family: "GyeonggiBatang";
  src: url("../fonts/gyeonggi-batang-title-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* 더페이스샵 잉크립퀴드체: 결과 한 줄 문구. 라이선스상 변형(기울기·장평·글자 잘라내기) 금지 → 원본 그대로 사용
   폴더의 파일을 먼저 쓰고, 없으면 눈누 CDN (소스 공유 때는 파일 재배포 금지라 빼고 공유) */
@font-face {
  font-family: "InkLiquid";
  src:
    url("../fonts/ink-liquid.woff") format("woff"),
    url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/InkLipquid.woff") format("woff");
  font-display: swap;
}

:root {
  --ink: #5f5f62;
  --ink-soft: #77767a;
  --line: rgba(255, 255, 255, 0.9);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

/* 스크롤 끝에서 튕길 때 보이는 바탕도 배경과 비슷한 파스텔색 */
html { background: #f4e3ea; }

body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

/* 수채화 배경 (모든 페이지 공통). 이미지 불러오기 전에는 비슷한 색 그라데이션 */
.wash {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
}

.wash::before {
  content: "";
  position: fixed; /* 스크롤해도 배경은 화면에 고정, 내용만 움직임 */
  top: 0;
  left: 0;
  width: 100%;
  /* 휴대폰은 스크롤하면 주소창이 사라져 화면이 길어짐 → 가장 긴 높이(lvh)로 깔아 아래 흰 틈 방지 */
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  background-color: #efd3da;
  background-image: url("../images/bg-1920.jpg");
  background-image: image-set(url("../images/bg-1920.webp") type("image/webp"), url("../images/bg-1920.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
  opacity: 0.8; /* 시안: 이미지 투명도 80% */
}

@media (max-width: 900px) {
  .wash::before {
    background-image: url("../images/bg-1080.jpg");
    background-image: image-set(url("../images/bg-1080.webp") type("image/webp"), url("../images/bg-1080.jpg") type("image/jpeg"));
  }
}

/* 연한 배경: 안쪽 페이지 */
.wash--soft::before { opacity: 0.5; } /* 시안: 안쪽 페이지는 이미지 투명도 50% */

/* ===== 첫 화면 ===== */
.hero {
  padding: 0 10vw;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  column-gap: 8vw;
}


.hero-note {
  position: absolute;
  top: 56px;
  right: 3.4vw;
  font-size: clamp(12px, 0.78vw, 15px);
  line-height: 1.667; /* 15px에서 25px */
  letter-spacing: 0.05em;
  text-align: right;
  font-weight: 200;
  color: #676767;
}

.hero-title {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: center;
  padding-top: 18.05vh; /* 1080에서 195px */
}

.sparkle {
  width: 46px;
  height: 67px;
  margin: 0 0 22px 8px;
  fill: #fff;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
}

/* 별: 반짝이며 살짝 커졌다 작아짐 */
.sparkle { animation: twinkle 3.2s ease-in-out infinite; transform-origin: center; }

@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.9; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8)); }
  45% { transform: scale(1.18) rotate(12deg); opacity: 1; filter: drop-shadow(0 0 14px rgba(255, 255, 255, 1)); }
  60% { transform: scale(0.92) rotate(8deg); opacity: 0.75; }
}

.hero h1 {
  font-family: "GyeonggiBatang", serif;
  font-weight: 700;
  color: #6c6c6c;
  font-size: clamp(48px, 5vw, 96px);
  line-height: 1.354; /* 96px에서 130px */
  letter-spacing: 0.05em;
}

.hero-en {
  margin: 21px 0 0 10px;
  font-size: clamp(12px, 1.04vw, 20px);
  line-height: 2; /* 20px에서 40px */
  letter-spacing: 0.15em;
  font-weight: 200;
  color: #676767;
}

/* 6가지 유형 아이콘 */
.types {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  align-items: center;
  gap: clamp(28px, 2.92vw, 56px);
  list-style: none;
  margin: 56px 0 calc(13vh + 10px) -9px;
}

.types svg {
  display: block;
  width: clamp(64px, 7.5vw, 144px);
  height: auto;
  fill: none;
  stroke: var(--line);
  stroke-width: 1.6;
  overflow: visible;
}

.types li:last-child svg { width: clamp(76px, 8.8vw, 170px); }
.types .dot { fill: #fff; stroke: none; }

/* 도형 움직임: 전체는 천천히 떠다니고, 도형마다 안쪽이 흐른다 */
.types li { animation: float 7s ease-in-out infinite; }
.types li:nth-child(2) { animation-delay: -3.5s; }
.types li:nth-child(3) { animation-delay: -1.2s; }
.types li:nth-child(4) { animation-delay: -4.7s; }
.types li:nth-child(5) { animation-delay: -2.3s; }
.types li:nth-child(6) { animation-delay: -5.8s; }

.types svg * { transform-box: fill-box; transform-origin: center; }

.t-ring .core { animation: breathe 4s ease-in-out infinite; }
.t-wave .flow { animation: flow 3s linear infinite; }
.t-wave .sun { animation: bob 4s ease-in-out infinite; }
.t-pct .a { animation: drift-a 6s ease-in-out infinite; }
.t-pct .b { animation: drift-b 6s ease-in-out infinite; }
.t-sun .rays { animation: burst 3.6s ease-in-out infinite; } /* 회전하면 긴 선이 축에서 벗어나 시안과 달라 보여서 제자리에서 퍼짐 */
.t-grid .dot { animation: blink 3s ease-in-out infinite; }
.t-grid .dot:nth-of-type(2) { animation-delay: -0.6s; }
.t-grid .dot:nth-of-type(3) { animation-delay: -1.2s; }
.t-grid .dot:nth-of-type(4) { animation-delay: -1.8s; }
.t-grid .dot:nth-of-type(5) { animation-delay: -2.4s; }
.t-link .a { animation: meet-a 6s ease-in-out infinite; }
.t-link .b { animation: meet-b 6s ease-in-out infinite; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(16px); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes flow { to { transform: translateX(-30px); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes drift-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(8px, 6px); } }
@keyframes drift-b { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-8px, -6px); } }
@keyframes burst { 0%, 100% { transform: scale(0.94); opacity: 0.85; } 50% { transform: scale(1.05); opacity: 1; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes meet-a { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(12px); } }
@keyframes meet-b { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-12px); } }

@media (prefers-reduced-motion: reduce) {
  .types li, .types svg *, .type-symbol svg *, .sparkle { animation: none !important; }
}

.hero-cta {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  margin: 0 -2.15vw calc(13vh + 3px) 0;
  display: inline-flex;
  flex-direction: column;
  gap: 13px;
  font-size: clamp(15px, 1.46vw, 28px);
  font-weight: 500;
  line-height: 1.43; /* 28px에서 40px */
  letter-spacing: 0.03em;
  color: #676767;
  text-decoration: none;
  padding-left: 8px;
}

.hero-cta .arrow {
  position: relative;
  display: block;
  width: clamp(200px, 15vw, 290px);
  height: 2px;
  margin-left: -8px;
  background: currentColor;
  transition: width 0.4s ease, margin-right 0.4s ease;
}

.hero-cta .arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 9px solid currentColor;
  border-top: 5.5px solid transparent;
  border-bottom: 5.5px solid transparent;
}

.hero-cta:hover,
.hero-cta:focus-visible { font-weight: 600; }
.hero-cta:hover .arrow,
.hero-cta:focus-visible .arrow {
  width: clamp(240px, 18vw, 340px);
  /* 늘어난 만큼 오른쪽으로 삐져나가게 (글자·화살표 시작점은 제자리) */
  margin-right: calc(clamp(200px, 15vw, 290px) - clamp(240px, 18vw, 340px));
}

@media (max-width: 1200px) {
  .hero { grid-template-columns: minmax(0, 1fr) auto; column-gap: 4vw; }
  .hero-cta { margin-right: 0; }
  .types { gap: 2.4vw; }
  .types svg { width: 6vw; }
  .types li:last-child svg { width: 7vw; }
}

/* 모바일: 첫 화면이 한 화면에 다 들어오게, 크기·간격을 화면 높이에 맞춤
   --vh = 실제로 보이는 높이의 1% (js/main.js가 잼. svh는 삼성인터넷·카카오톡 인앱에서 안 됨) */
@media (max-width: 900px) {
  .hero {
    height: calc(var(--vh, 1vh) * 100);
    min-height: 0;
    padding: 0 24px max(calc(var(--vh, 1vh) * 3), env(safe-area-inset-bottom));
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto auto;
    align-content: stretch;
  }
  .hero-note { position: static; grid-row: 1; justify-self: end; margin: calc(var(--vh, 1vh) * 3) 0 0; font-size: min(12px, calc(var(--vh, 1vh) * 1.7)); }
  .hero-title { grid-row: 2; align-self: center; padding-top: 0; }
  .sparkle { width: min(32px, calc(var(--vh, 1vh) * 4)); height: min(47px, calc(var(--vh, 1vh) * 5.8)); margin-bottom: calc(var(--vh, 1vh) * 3); }
  .hero h1 { font-size: min(12.5vw, calc(var(--vh, 1vh) * 6.4)); }
  .hero-en { margin-top: calc(var(--vh, 1vh) * 2.4); margin-left: 4px; font-size: min(12px, calc(var(--vh, 1vh) * 1.6)); }
  .types {
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    gap: calc(var(--vh, 1vh) * 3.4) 16px;
    max-width: 480px;
    margin: 0;
  }
  .types svg, .types li:last-child svg { width: min(22vw, calc(var(--vh, 1vh) * 10.5), 96px); }
  .hero-cta { grid-column: 1; grid-row: 4; justify-self: end; margin: calc(var(--vh, 1vh) * 4) 0 0; gap: calc(var(--vh, 1vh) * 1.6); font-size: min(15px, calc(var(--vh, 1vh) * 2)); }
  .hero-cta .arrow { width: 180px; }
  .hero-cta:hover .arrow, .hero-cta:focus-visible .arrow { width: 180px; margin-right: 0; }
  .is-leaving .hero-cta .arrow { margin-right: calc(180px - 100vw); }
}

/* ===== 테스트 안내 (test.html) ===== */
:root {
  --text: #222;
  --text-sub: #666;
  --border: #d3d3d3; /* 피그마 선 0.8px */
  --pink: #f4619f;
  --pink-2: #f490bd;
  --card-shadow: 4.4px 4.4px 22.4px 1.1px rgba(0, 0, 0, 0.05);
}

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 48px 24px;
  color: var(--text);
}

.intro-wrap { width: min(1207.8px, 100%); }

/* 시안(1920×1080)은 가운데보다 살짝 아래: 위 여백을 화면 높이에 비례해 더 줌 (1080에서 시안 위치) */
@media (min-width: 1101px) {
  .test-page .intro { padding-top: calc(48px + 9.26vh); }
  /* 문항: 1080에서 시안 위치, 높이가 모자라면 여백부터 줄여 한 화면에 */
  .question-page .intro { padding-top: clamp(16px, 100vh - 968px, 112px); padding-bottom: clamp(16px, 100vh - 1032px, 48px); }
  .result-page .intro { padding-top: calc(45px + 10vh); padding-bottom: calc(48px + 3.7vh); }
}

/* 높이가 낮은 노트북(1280×720 등): 위 여백을 줄여 카드가 화면 안에 더 들어오게 */
@media (min-width: 1101px) and (max-height: 820px) {
  .test-page .intro, .result-page .intro { padding-top: 32px; padding-bottom: 32px; }
}



.intro-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 35.05px;
}

.test-page .intro-head { padding: 0 3.4px; }

.brand { display: flex; align-items: flex-start; gap: 16.8px; height: 52px; } /* 아래 줄 글은 로고 높이 밖으로 내려와도 됨(시안) */

.brand-mark {
  width: 52px;
  height: 52px;
  border-radius: 14.6px;
  background: linear-gradient(90deg, var(--pink), var(--pink-2));
}

.brand-name { font-size: 22.5px; font-weight: 700; line-height: 27px; letter-spacing: 0.09em; }
.brand-meta { margin-top: 2px; font-size: 15.7px; line-height: 31.4px; font-weight: 300; letter-spacing: 0.09em; color: var(--text-sub); }

.btn-ghost {
  padding: 15.25px 21.6px;
  border: 0.8px solid var(--border);
  border-radius: 15.7px;
  background: #fff;
  font-size: 18px;
  line-height: 22.4px;
  letter-spacing: 0.03em;
  color: #000;
  text-decoration: none;
  transition: background 0.2s;
}


.intro-card {
  display: grid;
  grid-template-columns: 660.6fr 547.2fr;
  border: 0.8px solid var(--border);
  border-radius: 22.5px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.intro-main { padding: 32.6px 39px 43.8px; }

.intro-side {
  display: flex;
  flex-direction: column;
  gap: 12.75px;
  padding: 32.6px 25.9px 31.2px 42.4px;
  border-left: 0.8px solid var(--border);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 2.2px;
  padding: 5.2px 10.7px 5.2px 4.7px;
  border: 0.8px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 23.7px;
  letter-spacing: 0.03em;
  color: var(--text-sub);
}

.badge-dot {
  width: 23.7px;
  height: 23.7px;
  border-radius: 50%;
  /* 시안: 큰 원(#f490bd 50%) 위에 작은 원(#f4619f 50%)이 겹침 */
  background: radial-gradient(circle, rgba(244, 97, 159, 0.5) 0 4.85px, transparent 4.85px), rgba(244, 144, 189, 0.5);
}

.intro-title {
  margin-top: 12.8px;
  font-size: 40.4px;
  line-height: 48px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.intro-desc {
  margin-top: 8px;
  font-size: 18px;
  line-height: 31.4px;
  letter-spacing: 0.03em;
  color: var(--text-sub);
}

.intro-desc strong { font-weight: 500; color: #000; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 15.7px;
  list-style: none;
}

.chips li {
  padding: 3.3px 13.4px 3.3px 12.1px;
  border: 0.8px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 15.7px;
  font-weight: 300;
  line-height: 31.4px;
  letter-spacing: 0.03em;
  color: var(--text-sub);
}

@media (min-width: 1101px) {
  .chips li { text-align: center; padding-left: 0; padding-right: 0; }
  .chips li:nth-child(1) { width: 99.1px; }
  .chips li:nth-child(2) { width: 168.4px; }
  .chips li:nth-child(3) { width: 160.9px; }
}

.chips b { margin-right: 0.83em; /* 시안은 띄어쓰기 3칸 */ font-weight: 400; color: #535353; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 203.5px;
  height: 57.3px;
  margin-top: 26.4px;
  border-radius: 14.6px;
  background: linear-gradient(90deg, var(--pink), var(--pink-2));
  font-size: 20.2px;
  letter-spacing: 0.03em;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.25s;
}


.info {
  padding: 15.4px 17.2px 16.4px;
  border: 0.8px solid var(--border);
  border-radius: 16.8px;
  background: #fff;
}

.info h2 { font-size: 18px; font-weight: 500; line-height: 22.4px; letter-spacing: 0.03em; color: #000; }

.info p {
  margin-top: 9.6px;
  font-size: 18px;
  line-height: 24.7px;
  letter-spacing: 0.03em;
  color: var(--text-sub);
}

/* 시안 상자 높이·안쪽 간격 (상자마다 조금씩 다름). 글이 한 줄로 들어가는 넓은 화면에서만 */
@media (min-width: 1101px) {
  .info:nth-child(1) { min-height: 114.8px; }
  .info:nth-child(2) { min-height: 89.4px; padding-top: 18.6px; }
  .info:nth-child(2) p { margin-top: 5.8px; }
  .info:nth-child(3) { min-height: 91.1px; padding-top: 18px; }
  .info:nth-child(3) p { margin-top: 8.6px; }
}

.intro-foot {
  margin-top: 37.1px;
  text-align: center;
  font-size: 13.5px;
  line-height: 22.4px;
  letter-spacing: 0.03em;
  color: var(--text-sub);
}

.mo { display: none; }

@media (max-width: 1100px) {
  .intro-card { grid-template-columns: 1fr; }
  .intro-side { border-left: 0; border-top: 1px solid var(--border); padding: 28px 38px 32px; }
  .pc { display: none; }
}

@media (max-width: 600px) {
  .intro { padding: 28px 16px; place-items: start center; }
  .intro-head { margin-bottom: 24px; }
  .brand { gap: 12px; }
  .brand-mark { width: 42px; height: 42px; border-radius: 12px; }
  .brand-name { font-size: 17px; }
  .brand-meta { font-size: 13px; margin-top: 4px; }
  .btn-ghost { padding: 10px 14px; font-size: 14px; }
  .intro-main { padding: 26px 22px 30px; }
  .intro-side { padding: 22px; }
  .intro-title { font-size: 30px; }
  .intro-desc { font-size: 15px; line-height: 1.75; }
  .intro-desc br { display: none; }
  .chips { gap: 8px; }
  .chips li { font-size: 13px; line-height: 1.5; padding: 7px 12px 7px 10px; }
  .chips b { margin-right: 8px; }
  .btn-primary { width: 100%; height: 52px; font-size: 17px; }
  .info h2, .info p { font-size: 15px; line-height: 1.6; }
  .brand-meta { line-height: 1.6; }
  .intro-foot { margin-top: 28px; font-size: 12px; line-height: 1.6; }
}

/* ===== 페이지 넘김 ===== */
/* 첫 화면: 화살표가 오른쪽 끝까지 뻗고, 나머지는 왼쪽으로 밀리며 사라짐 */
.hero-note, .hero-title, .types, .hero-cta {
  transition: transform 0.6s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.5s ease;
}

.is-leaving .hero-note,
.is-leaving .hero-title,
.is-leaving .types { transform: translateX(-60px); opacity: 0; }
.is-leaving .types { transition-delay: 0.08s; }
.is-leaving .hero-cta { font-weight: 600; opacity: 0; transition-delay: 0.25s; }
.is-leaving .hero-cta .arrow {
  width: 100vw;
  margin-right: calc(clamp(200px, 15vw, 290px) - 100vw);
  transition: width 0.55s cubic-bezier(0.6, 0, 0.3, 1), margin-right 0.55s cubic-bezier(0.6, 0, 0.3, 1);
}

/* 안쪽 페이지: 오른쪽에서 밀려 들어옴 */
.intro-wrap { animation: enter 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

@keyframes enter {
  from { transform: translateX(60px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-wrap { animation: none; }
}

/* ===== 문항 (question.html) ===== */
.quiz-card {
  border: 0.8px solid var(--border);
  border-radius: 22.5px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.progress { padding: 13.3px 23.7px 15.9px 24.8px; border-bottom: 0.8px solid var(--border); }

.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 300;
  line-height: 31.4px;
  letter-spacing: 0.09em;
  color: var(--text-sub);
}

.progress-track {
  height: 11.4px;
  margin-top: -1px;
  border: 0.8px solid #bcbcbc;
  border-radius: 16.8px;
  background: #ebebeb;
  overflow: hidden;
}

.progress-bar {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: #f390c0;
  transition: width 0.4s ease;
}

.quiz-body { padding: 17.2px 28.6px 19.2px 29.9px; transition: transform 0.22s ease, opacity 0.22s ease; }
.quiz-body.is-out-left { transform: translateX(-40px); opacity: 0; }
.quiz-body.is-out-right { transform: translateX(40px); opacity: 0; }
.quiz-body.is-in-right { transform: translateX(40px); opacity: 0; transition: none; }
.quiz-body.is-in-left { transform: translateX(-40px); opacity: 0; transition: none; }

.quiz-num { font-size: 14px; font-weight: 300; line-height: 31.4px; letter-spacing: 0.09em; color: var(--text-sub); }

.quiz-q {
  margin-top: 0.6px;
  font-size: 21px;
  font-weight: 600;
  line-height: 25px;
  letter-spacing: 0.05em;
  color: #000;
  white-space: pre-wrap;
}

.quiz-guide { margin-top: 12.6px; font-size: 16px; font-weight: 300; line-height: 20px; letter-spacing: 0.08em; color: var(--text-sub); }

.options { display: grid; gap: 10.6px; margin-top: 14.8px; }

.option {
  display: block;
  width: 100%;
  min-height: 49.9px;
  padding: 11.65px 16.2px;
  border: 0.8px solid var(--border);
  border-radius: 16.8px;
  background: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: 0.05em;
  text-align: left;
  color: #000;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.option b { font-weight: 900; }

.option[aria-checked="true"] {
  border-color: #f4a3c8;
  box-shadow: 0 0 0 3px rgba(244, 163, 200, 0.22), 0 4px 14px rgba(240, 106, 165, 0.12);
}

.quiz-hint { margin-top: 17.5px; font-size: 15px; font-weight: 300; line-height: 20px; letter-spacing: 0.08em; color: var(--text-sub); }
.quiz-hint.is-warn { color: var(--pink); animation: shake 0.35s; }

@keyframes shake {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.quiz-foot {
  display: flex;
  justify-content: space-between;
  padding: 13px 28.6px 18.3px 29.9px;
  border-top: 0.8px solid var(--border);
}

.quiz-foot-right { display: flex; gap: 12px; }
@media (min-width: 601px) { #btn-clear { padding-left: 13.6px; padding-right: 13.6px; } }

.quiz-foot .btn-ghost { padding: 12.25px 15.2px; border-radius: 12px; font: inherit; font-size: 17px; line-height: 22.4px; letter-spacing: 0.03em; color: #000; cursor: pointer; }

.btn-next {
  width: auto;
  height: auto;
  margin: 0;
  padding: 13.5px 23.4px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-size: 18px;
  line-height: 21.5px;
  letter-spacing: 0.03em;
  font-weight: 700;
  cursor: pointer;
}

.question-page .intro-wrap { width: min(1088px, 100%); }

/* 안쪽 페이지 → 다음 페이지 넘어갈 때 */
.is-leaving .intro-wrap {
  transform: translateX(-60px);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.5s ease;
}

@media (max-width: 600px) {
  .progress { padding: 16px 18px 14px; }
  .quiz-body { padding: 22px 18px 16px; }
  .quiz-q { font-size: 18px; }
  .option { font-size: 15px; }
  .quiz-foot { padding: 12px 18px 16px; }
  .quiz-foot .btn-ghost, .btn-next { padding: 10px 13px; font-size: 14px; }
  .quiz-foot-right { gap: 8px; }
}

/* ===== 결과 (result.html) ===== */
.result-page .intro-wrap { width: min(1088px, 100%); }

.result-top { padding: 47.1px 49.2px 48.7px; }

.result-eyebrow {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  line-height: 33px;
  letter-spacing: 0.09em;
  color: #222;
}

.result-tie {
  width: fit-content;
  margin: 11px auto 0;
  padding: 4px 13px;
  border-radius: 1079px;
  background: #fde7f1;
  font-size: 14px;
  font-weight: 600;
  color: #d94f8c;
}

.result-box {
  --c: #c4b4a2;
  --tint: #ebe6e1;
  margin-top: 23.2px;
  border: 0.8px solid var(--border);
  border-radius: 22.5px;
  background: #fff;
  box-shadow: 4.4px 4.4px 22.4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.result-head {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 13px 69px;
  padding: 16px 0 0 17.2px; /* 시안은 가운데보다 8.6px 오른쪽 */
}

.type-title { text-align: center; }
.type-en { font-size: 13px; font-weight: 200; line-height: 25px; letter-spacing: 0.03em; color: #484848; }

.type-name {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 24px;
  margin-top: 12px;
  font-family: "GyeonggiBatang", serif;
  font-size: 64px;
  line-height: 64px;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--c);
}

.type-slogan { margin-top: 27.3px; font-size: 15px; line-height: 25px; letter-spacing: 0.03em; color: #484848; }

/* 수채화 점: 시안 이미지 (images/dot-a~f.webp, 유형 키 소문자, 82×71 안에 점 약 73px) */
.type-dot {
  flex: none;
  width: 1.28em;
  height: 1.11em;
  margin: 0 -0.09em 0 -0.11em;
  background: center / contain no-repeat;
}

/* 시안: 유형 이름 글자를 가운데 두고 점은 왼쪽에 걸침 */
.type-name .type-dot {
  position: absolute;
  right: 100%;
  top: 50%;
  margin: 0 16.2px 0 0;
  transform: translateY(-50%);
}

.result-symbols {
  display: flex;
  justify-content: center;
  gap: 52px;
  padding: 51.4px 0 53.7px; /* 시안 그림(330px)보다 SVG 상자가 10px 커서 위아래 5px씩 뺌 */
}

.type-symbol svg {
  display: block;
  width: 340px;
  height: auto;
  fill: none;
  stroke: var(--c);
  stroke-width: 1.2;
  overflow: visible;
}

/* 시안: 유형마다 그림 크기가 다름 (가운데 정렬, 아래 키워드 위치는 고정) */
@media (min-width: 761px) {
  .result-symbols { box-sizing: border-box; height: 445.1px; align-items: center; padding: 0; }
  .type-symbol.t-wave svg { width: 352px; }
  .type-symbol.t-sun svg { width: 336px; }
  .type-symbol.t-link svg { width: 422px; }
  .type-symbol.t-pct svg { width: 373px; }
  .type-symbol.t-grid svg { width: 344px; }
}

.type-symbol svg * { transform-box: fill-box; transform-origin: center; }
.type-symbol .dot { fill: var(--c); stroke: none; }

.result-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 11px;
  padding: 30px 26px 0;
}

.result-tabs:not([hidden]) + .result-head { padding-top: 35px; }

.result-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 17px;
  border: 1px solid var(--border);
  border-radius: 1079px;
  background: #fff;
  font: inherit;
  font-size: 16px;
  color: var(--text-sub);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.result-tab .type-dot { width: 21px; height: 18px; margin: 0 -2px; }
.result-tab:hover { border-color: var(--c); color: var(--text); }
.result-tab[aria-selected="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--text); font-weight: 600; }

.keywords {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px 43.6px;
  padding: 0 35px 37.7px;
  list-style: none;
}

.keywords li {
  min-width: 130px;
  height: 53px;
  white-space: nowrap;
  padding: 6.5px 22px;
  border-radius: 150px;
  background: var(--tint);
  text-align: center;
  font-size: 19px;
  line-height: 40px;
  color: #595959;
}

.result-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 0.8px solid var(--border);
}

.result-traits { display: flex; flex-direction: column; align-items: center; margin: 20px 0; padding: 38.6px 4px 32.6px 0; /* 시안: 문구와 특징 묶음을 왼쪽 칸 가운데에 */ border-right: 0.8px solid var(--border); }

.quote {
  text-align: center;
  font-family: "InkLiquid", cursive;
  font-size: 40px;
  line-height: 45px;
  letter-spacing: 0.01em;
  -webkit-text-stroke: 0.2px var(--c); /* 시안: 같은 색 0.2px 외곽선으로 살짝 굵게 */
  color: var(--c);
}

.traits { margin-top: 25.1px; padding-left: 13px; list-style: none; }

.traits li {
  position: relative;
  padding-left: 19px;
  font-size: 20px;
  line-height: 40px;
  color: var(--text-sub);
}

.traits li::before { content: "•"; position: absolute; left: 0; }
.traits strong { font-weight: 500; color: #000; }

.result-match {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 45.6px;
  padding: 32px 35px 32px 37.7px;
}

.match-row { display: flex; align-items: center; gap: 20px; }

.match-tag {
  flex: none;
  width: 112.3px;
  height: 42.9px;
  text-align: center;
  white-space: nowrap;
  padding: 8px 0;
  border-radius: 17.9px;
  background: #fff;
  box-shadow: 0 0 3.5px rgba(0, 0, 0, 0.15);
  font-size: 17.9px;
  font-weight: 700;
  line-height: 26.7px;
  color: #000;
}

.match-row p { font-size: 18px; line-height: 30px; color: #595959; }
.match-row strong { font-weight: 500; color: #000; }

.result-bottom { padding: 39.9px 29.9px 38.1px; border-top: 0.8px solid var(--border); }

.score-guide { font-size: 16px; font-weight: 300; line-height: 20px; letter-spacing: 0.08em; color: var(--text-sub); }

.scores { display: grid; gap: 10.5px; margin-top: 14.8px; list-style: none; }

.scores li {
  display: flex;
  justify-content: space-between;
  padding: 11.65px 19.7px 11.65px 16.2px;
  border: 0.8px solid var(--border);
  border-radius: 16.8px;
  background: #fff;
  font-size: 17px;
  line-height: 25px;
  letter-spacing: 0.05em;
  color: #484848;
}

.scores li > span:last-child { font-weight: 500; letter-spacing: 0.03em; color: var(--text-sub); }
.scores b { font-weight: 500; color: #000; }

.result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; margin-top: 27.3px; }

.result-actions .btn-primary {
  width: auto;
  height: auto;
  margin: 0 0 0 auto;
  width: 150px;
  height: 48.5px;
  padding: 0;
  border-radius: 12px;
  font-size: 18px;
}

.result-actions .btn-ghost { width: 109.8px; padding: 12.25px 0; border-radius: 12px; font: inherit; font-size: 17px; line-height: 22.4px; letter-spacing: 0.03em; color: #000; text-align: center; cursor: pointer; }
.copy-msg { font-size: 15px; color: #d94f8c; }

.result-note { margin-top: 14.8px; font-size: 15px; font-weight: 300; line-height: 20px; letter-spacing: 0.08em; color: var(--text-sub); }

@media (max-width: 900px) {
  .result-detail { grid-template-columns: 1fr; }
  .result-traits { margin: 0; padding: 32px 40px; border-right: 0; border-bottom: 1px solid var(--border); }
  .result-match { gap: 24px; padding: 30px 40px; }
}

@media (max-width: 760px) {
  .result-top { padding: 28px 16px 24px; }
  .result-eyebrow { font-size: 20px; }
  .result-head { padding-top: 32px; }
  .result-tabs { gap: 8px; padding: 22px 12px 0; }
  .result-tab { padding: 7px 12px; font-size: 14px; }
  .type-name { font-size: 44px; gap: 14px; }
  .result-symbols { gap: 20px; padding: 36px 0; }
  .type-symbol svg { width: 200px; }
  .keywords { gap: 10px; padding: 0 16px 28px; }
  .keywords li { min-width: 0; height: auto; padding: 9px 16px; font-size: 14px; line-height: 1.5; }
  .result-detail { grid-template-columns: 1fr; }
  .result-traits { margin: 0; padding: 28px 22px; border-right: 0; border-bottom: 1px solid var(--border); }
  .quote { font-size: 28px; }
  .traits li { font-size: 15px; line-height: 1.9; }
  .result-match { gap: 22px; padding: 26px 22px; }
  .match-tag { width: 98px; font-size: 14px; padding: 8px 0; }
  .match-row p { font-size: 14px; }
  .result-bottom { padding: 28px 16px; }
  .scores li { font-size: 14px; }
  .result-actions .btn-primary, .result-actions .btn-ghost { padding: 10px 14px; font-size: 14px; }
  .result-actions .btn-primary { order: 1; flex-basis: 100%; margin-left: 0; padding: 13px 14px; font-size: 15px; }
}

/* ===== 버튼 hover (공통) ===== */
.btn-ghost, .btn-primary, .option {
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, opacity 0.25s, transform 0.15s;
}

/* 흰 버튼: 연한 분홍 배경 + 분홍 테두리 */
.btn-ghost:hover {
  background: #fff5f9;
  border-color: #f6c3da;
  color: #d94f8c;
}

/* 분홍 버튼: 시안대로 연해짐 */
.btn-primary:hover { opacity: 0.45; }

/* 선택지: 테두리만 살짝 분홍 */
.option:hover { border-color: #f6c3da; background: #fffafc; }

/* 누를 때 살짝 눌림 */
.btn-ghost:active, .btn-primary:active, .option:active { transform: scale(0.98); }

/* 키보드(Tab) 이동 표시 */
.btn-ghost:focus-visible, .btn-primary:focus-visible, .option:focus-visible, .hero-cta:focus-visible {
  outline: 2px solid #f390c0;
  outline-offset: 3px;
}

/* 휴대폰: 누른 뒤 hover 색이 남지 않게 */
@media (hover: none) {
  .btn-ghost:hover { background: #fff; border-color: var(--border); color: var(--text); }
  .btn-primary:hover { opacity: 1; }
  .option:hover { border-color: var(--border); background: #fff; }
  .option[aria-checked="true"]:hover { border-color: #f4a3c8; }
}

/* 높이가 낮은 화면: 문항 화면 간격을 줄여 스크롤 없이 (파일 끝에 둬야 위 규칙을 덮음) */
@media (max-height: 860px) {
  .question-page .intro { padding-top: 16px; padding-bottom: 16px; }
  .question-page .intro-head { margin-bottom: 16px; }
  .question-page .intro-foot { margin-top: 14px; }
  .question-page .progress { padding-top: 6px; padding-bottom: 10px; }
  .question-page .quiz-body { padding-top: 10px; padding-bottom: 12px; }
  .question-page .quiz-guide { margin-top: 8px; }
  .question-page .options { gap: 7px; margin-top: 12px; }
  .question-page .option { min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  .question-page .quiz-hint { margin-top: 10px; }
  .question-page .quiz-foot { padding-top: 10px; padding-bottom: 12px; }
}
@media (max-height: 740px) {
  .question-page .intro-head { margin-bottom: 12px; }
  .question-page .progress-label { line-height: 24px; }
  .question-page .quiz-num { line-height: 22px; }
  .question-page .options { gap: 6px; margin-top: 10px; }
  .question-page .option { padding-top: 6px; padding-bottom: 6px; }
  .question-page .quiz-hint { margin-top: 8px; line-height: 16px; } /* 선택 안 했을 때 경고가 여기 나와서 숨기지 않음 */
}

/* 결과 화면: 30초 미사용 → 처음으로, 마지막 10초 안내 띠 */
.idle-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 10;
  padding: 14px 26px;
  border: 0.8px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--card-shadow);
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.03em;
  color: var(--text-sub);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 16px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.idle-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.idle-toast b { display: inline-block; min-width: 1.2em; font-weight: 700; color: var(--pink); text-align: right; }

@media (max-width: 600px) {
  .idle-toast { bottom: 16px; width: calc(100% - 32px); padding: 12px 16px; border-radius: 16px; font-size: 14px; white-space: normal; text-align: center; }
  .idle-sep { display: none; }
  .idle-sub { display: block; margin-top: 2px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .idle-toast { transition: none; }
}