@font-face {
  font-family: "LeeSeoyun";
  src: url("../fonts/LeeSeoyun.ttf") format("truetype");
  font-display: swap;
}

/* 로고 폰트: 와일드각체 */
@font-face {
  font-family: "WildGag";
  src: url("../fonts/WildGag.ttf") format("truetype");
  font-display: swap;
}

/* 테스트 이름 폰트: 페이퍼로지 Bold */
@font-face {
  font-family: "Paperlogy";
  src: url("../fonts/Paperlogy-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Paperlogy";
  src: url("../fonts/Paperlogy-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Paperlogy";
  src: url("../fonts/Paperlogy-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

/* 카테고리별 테스트 폰트 */
@font-face {
  font-family: "UhBeeSehyun";           /* 아기: 어비세현체 */
  src: url("../fonts/UhBeeSehyun.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "MemomentKkukkukk";      /* 엄마아빠: 메모먼트 꾹꾹체 */
  src: url("../fonts/MemomentKkukkukk.ttf") format("truetype");
  font-display: swap;
}

:root {
  --ink: #1d1b1a;
  --ink-soft: #6b6560;
  --line: #ebe8e3;
  --bg: #ffffff;
  --paper: #fbfaf7;
  /* 형광 포인트 */
  --y: #e9ff3b;   /* 형광 연두노랑 */
  --p: #ff6fd1;   /* 형광 핑크 */
  --g: #5cffa8;   /* 형광 민트 */
  --b: #5fdcff;   /* 형광 하늘 */
  --o: #ffb03b;   /* 형광 오렌지 */
  --radius: 20px;
  --font: "LeeSeoyun", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  background-color: var(--bg);
  transition: background-color .4s ease;
  color: var(--ink);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.6;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
mark { background: none; color: inherit; }

.wrap {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 18px 40px;
  min-height: 100vh;
  /* 가운데 내용 영역: 반투명 흰색 박스 (.55 = 불투명도, 높일수록 더 하얗게) */
  background: rgba(255, 255, 255, .55);
}

/* ---------- 바탕 무늬: 흰색 "jiam" 45도 반복 (와일드각체) ----------
   글자는 app.js가 채워 넣어요. 크기 font-size / 간격 word-spacing·line-height / 진하기 color */
.bg-jiam {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 260vmax;
  height: 260vmax;
  margin: -130vmax 0 0 -130vmax;
  transform: rotate(-35deg);   /* 기울기: 수평에서 35도 (세로 기준 55도) */
  z-index: -1;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  font-family: "WildGag", var(--font);
  font-size: 58px;
  line-height: 2.8;            /* 줄 간격 */
  word-spacing: 140px;         /* 단어 간격 */
  color: #fff;
  white-space: nowrap;          /* 줄이 꺾이지 않게 → 규칙적인 무늬 */
}
.bg-jiam span { display: block; }
.bg-jiam span:nth-child(even) { margin-left: -2.7em; }  /* 한 줄씩 반 칸 엇갈리게 (단어 간격 바꾸면 같이 조절) */

/* ---------- 헤더 ---------- */
.top {
  position: sticky;            /* 스크롤해도 맨 위에 고정 */
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  display: flex;
  flex-direction: column;      /* 로고 가운데, 그 아래 '육아 테스트 놀이터' */
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 12px 0;
  text-align: center;
}
/* 테스트 화면의 '← 테스트 목록'은 왼쪽에 작게 (누르기 쉽게 터치 영역은 넉넉히) */
.top .top-home {
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px 8px;
  font-size: 14px;
}
/* 좁은 폰에서는 로고와 겹치지 않게 화살표만 */
@media (max-width: 400px) {
  .top .top-home { font-size: 22px; }
  .top .top-home .lbl { display: none; }
}
/* 상단 바: 화면 가로 전체를 흰색으로 */
.top::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: #fff;
  z-index: -1;
}
.logo {
  font-family: "WildGag", var(--font);
  font-size: 28px;
  text-decoration: none;
  letter-spacing: -0.5px;
}
.logo .heart {
  color: var(--ink);
  font-size: .7em;
  margin: 0 3px;
  vertical-align: .12em;
}
.top-tag { line-height: 1.3; font-size: 14px !important; }
.top-tag, .top-home {
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: none;
}

/* ---------- 형광펜 ---------- */
.hl, .hero h1 mark {
  background: linear-gradient(transparent 52%, var(--hl, var(--y)) 52%, var(--hl, var(--y)) 92%, transparent 92%);
  padding: 0 4px;
}

/* ---------- 홈 히어로 ---------- */
.hero {
  position: relative;
  padding: 26px 0 22px;
}
.hero-small { margin: 0; font-size: 22px; }
.hero h1 {
  margin: 0 0 10px;
  font-size: 44px;
  line-height: 1.25;
  font-weight: normal;
}
.hero-sub { margin: 0; color: var(--ink-soft); font-size: 18px; }
.squiggle {
  color: var(--ink);
  text-decoration: underline wavy var(--p);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* ---------- 탭 ---------- */
.tabs {
  display: flex;
  gap: 8px;
  margin: 8px 0 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs button {
  flex: none;
  border: 2px solid var(--ink);
  background: #fff;
  border-radius: 999px;
  padding: 4px 16px;
  font-size: 17px;
}
.tabs button.on { background: var(--ink); color: var(--y); }

/* ---------- 카드 목록 ---------- */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.card {
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: transform .15s;
}
@media (hover: hover) {  /* 마우스 있는 기기에서만 (폰에서 눌린 채로 남지 않게) */
  .card:not(.soon):hover { transform: translateY(-3px) rotate(-0.6deg); }
}
.card:not(.soon):active { transform: scale(.98); }
.card-art {
  aspect-ratio: 1 / 1;
  background: var(--tint, var(--paper));
  border-bottom: 2px solid var(--ink);
  display: grid;
  place-items: center;
}
.card-body { padding: 10px 12px 14px; }
.card-title { margin: 4px 0 2px; font-size: 19px; line-height: 1.3; }
.card-desc { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.4; }
.chip {
  display: inline-block;
  font-size: 13px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: var(--chip, var(--y));
}
/* ---------- 인기 순위 / 참여 수 ---------- */
.list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
}
.rank-head { margin: 0; font-size: 22px; font-weight: normal; }
/* 인기순 / 최신순 */
.sort {
  flex: none;
  display: flex;
  padding: 3px;
  background: #fff;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.sort button {
  border: 0;
  background: none;
  border-radius: 999px;
  padding: 6px 14px;          /* 손가락으로 누르기 쉬운 크기 */
  font-size: 14px;
  color: var(--ink-soft);
}
.sort button.on { background: var(--y); color: var(--ink); }
.local-note {
  margin: -6px 0 14px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--ink-soft);
  border: 1.5px dashed var(--line);
  border-radius: 12px;
}
.rank {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 0 10px;
  font-size: 15px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--y);
  transform: rotate(-6deg);
}
.rank b { font-weight: normal; font-size: 20px; margin-right: 1px; }
.rank.r2 { background: var(--p); }
.rank.r3 { background: var(--g); }
.plays { margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); }
.plays::before {             /* 참여 수 앞 세모 (▲를 오른쪽으로 90도 돌린 ▶ 모양) */
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  background: var(--tc, var(--p));   /* 테스트 화면: 그림 액자 테두리와 같은 색 */
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: rotate(90deg);
  vertical-align: 1px;
}
.plays.center { text-align: center; margin: -8px 0 40px; font-size: 15px; }  /* 아래 테스트 설명과 간격 */

.chip.ghost { background: #fff; border-style: dashed; color: var(--ink-soft); }
.card.soon { opacity: .55; }
.card.soon .card-art { filter: grayscale(1); }
.stamp {
  position: absolute;
  top: 10px;
  right: 8px;
  font-size: 14px;
  padding: 0 8px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: #fff;
  transform: rotate(8deg);
}
.card.wide { grid-column: 1 / -1; }

/* ---------- 그림 자리 ---------- */
.art { width: 100%; height: 100%; display: grid; place-items: center; }
.art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art svg { width: 62%; height: auto; }

/* ---------- 테스트 화면 카테고리 폰트 ----------
   테스트의 cat 값(baby/parent)에 따라 자동 적용. 로고·홈 화면은 이서윤체 그대로. */
#app.font-baby   { --tfont: "UhBeeSehyun"; }
#app.font-parent { --tfont: "MemomentKkukkukk"; }#app[class*="font-"],
#app[class*="font-"] button,
#app[class*="font-"] .btn {
  font-family: var(--tfont), var(--font);
}

/* ---------- 테스트 공통 ---------- */
.panel { padding-top: 12px; animation: pop .35s ease; }
@keyframes pop {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.intro-art, .result-art {
  aspect-ratio: 1 / 1;
  max-width: 300px;
  margin: 8px auto 18px;
  border: 2px solid var(--ink);
  border-radius: 28px;
  background: var(--tint, var(--paper));
  overflow: hidden;
}
.intro { text-align: center; }
.intro h1 { font-size: 34px; line-height: 1.3; margin: 10px 0 8px; font-weight: normal; }
.intro p { margin: 0 0 6px; color: var(--ink-soft); }
.intro .ask { margin: 46px 0 14px; color: var(--ink); font-size: 20px; }  /* 설명 ↔ '먼저, 누가 하고 있나요?' */
.panel.intro { padding-top: 34px; }  /* 상단 흰 바 ↔ 카테고리 딱지 */

.btn {
  display: block;
  width: 100%;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: #fff;
  padding: 13px 16px;
  font-size: 20px;
  text-align: center;
  text-decoration: none;
  transition: transform .1s, background .15s;
}
.btn:active { transform: scale(.97); }
.btn.fill { background: var(--accent, var(--y)); }
.btn.dark { background: var(--ink); color: #fff; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-row .btn { font-size: 21px; }
.btn small { display: block; font-size: 14px; color: var(--ink-soft); }

/* ---------- 질문 ---------- */
.progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 26px;
}
.bar {
  flex: 1;
  height: 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.bar i {
  display: block;
  height: 100%;
  background: var(--accent, var(--y));
  border-right: 2px solid var(--ink);
  transition: width .3s ease;
}
.count { font-size: 16px; min-width: 46px; text-align: right; }

.q-no { font-size: 18px; color: var(--ink-soft); margin: 0; }
.q-text { font-size: 27px; line-height: 1.4; margin: 4px 0 24px; font-weight: normal; }
.choices { display: grid; gap: 10px; }
.choice {
  text-align: left;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: #fff;
  padding: 12px 16px;
  font-size: 19px;
  line-height: 1.4;
  transition: background .12s, transform .12s;
}
.choice:hover { background: var(--paper); }
.choice.picked { background: var(--accent, var(--y)); transform: scale(.98); }
.choice.age {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 18px;
}
.choice.age b { font-weight: normal; font-size: 24px; }
.choice.age small { font-size: 16px; color: var(--ink-soft); }
.hint { margin: 14px 0 0; font-size: 15px; color: var(--ink-soft); }

/* ---------- 스탯 ---------- */
.stat {
  display: grid;
  grid-template-columns: 6.5em 1fr 2.2em;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 17px;
}
.stat .bar { height: 14px; }
.stat .bar i { transition: width .7s ease; }
.stat b { font-weight: normal; text-align: right; font-size: 16px; }
.stat-note { margin: 12px 0 0; font-size: 17px; }

.back {
  margin-top: 18px;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: 16px;
  padding: 4px 0;
}

/* ---------- 로딩 ---------- */
.loading { text-align: center; padding: 70px 0; }
.loading .art { width: 140px; height: 140px; margin: 0 auto 20px; animation: bounce .6s ease-in-out infinite alternate; }
@keyframes bounce { to { transform: translateY(-14px) rotate(4deg); } }
.loading p { font-size: 22px; margin: 0; }

/* ---------- 결과 ---------- */
.result { text-align: center; }
.r-label { margin: 6px 0 0; color: var(--ink-soft); font-size: 18px; }
.r-grade {
  display: inline-block;
  margin: 10px 0 0;
  padding: 0 12px;
  font-size: 17px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--accent, var(--y));
  transform: rotate(-3deg);
}
.r-title { font-size: 46px; line-height: 1.25; margin: 10px 0 6px; font-weight: normal; }
.r-line { font-size: 22px; margin: 0 0 18px; }
.result-art { max-width: 440px; border-radius: 32px; }

.meter { margin: 0 auto 26px; max-width: 360px; text-align: left; }
.meter-top { display: flex; justify-content: space-between; font-size: 16px; }
.meter .bar { height: 18px; }

.box {
  text-align: left;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0 0 14px;
  background: #fff;
}
.box h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
/* 소제목 좌우 작은 원 */
.box h3::before,
.box h3::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
}
.mission h3::before,
.mission h3::after { background: #fff; border: 1.5px solid var(--ink); }
.box ul { margin: 0; padding-left: 0; list-style: none; }
.box li { position: relative; padding-left: 20px; margin: 0 0 8px; line-height: 1.5; }
.box li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent, var(--y));
  border: 1.5px solid var(--ink);
}
.bubble {
  position: relative;
  background: var(--paper);
  border-style: dashed;
}
.bubble p { margin: 0; font-size: 21px; }
.bubble, .mission { text-align: center; }
.mission { background: var(--accent, var(--y)); }
.mission p { margin: 0; }

.actions { display: grid; gap: 10px; margin-top: 22px; }

/* ---------- 토스트 ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 17px;
  z-index: 10;
}

/* ---------- 푸터 ---------- */
.foot {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 2px dashed var(--line);
  font-size: 15px;
  color: var(--ink-soft);
  text-align: center;
}
.foot p { margin: 0 0 4px; }
.foot b { font-weight: inherit; color: var(--ink); }
.foot-note { font-size: 13px; }
.foot-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 10px !important;
  font-size: 13px;
}
.foot-links a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-soft);
  text-decoration: none;
}
.foot-links a:hover { color: var(--ink); text-decoration: underline; }
.foot-links svg { width: 14px; height: 14px; }

/* 카카오톡 공유 버튼 */
.btn.kakao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fee500;
  color: #191919;
}
.btn.kakao svg { width: 22px; height: 22px; }

/* =====================================================================
   귀여운 테마: 연노랑 바탕 + 파스텔 경계선 + 말랑한 그림자
   (이 블록을 통째로 지우면 예전 흰 바탕·검은 선 디자인으로 돌아가요)
   ===================================================================== */
:root {
  /* 바탕색 컨셉 */
  --bg-main: #fffae4;     /* 메인(홈) = 연노랑 */
  --bg-baby: #fffae4;     /* 아기 = 연노랑 */
  --bg-mom: #fff6fa;      /* 엄마 = 연분홍 (아주 연하게) */
  --bg-dad: #f4f8fd;      /* 아빠 = 연하늘 (채도 낮춤) */
  --bg: var(--bg-main);
  --paper: #fffef8;
  --line: #f3dfa0;
  /* 파스텔 선 색 + 그 아래 그림자 색 */
  --pink: #ff9fcf;   --pink-s: #ffd3e9;
  --mint: #6fd8a6;   --mint-s: #c6f1dc;
  --sky: #7cc5ff;    --sky-s: #cfe9ff;
  --orange: #ffa04a; --orange-s: #ffdcb8;
  --peach: #ffb066;  --peach-s: #ffe0bf;
}

/* 탭 */
.tabs button {
  border: 2.5px solid var(--pink);
  box-shadow: 0 3px 0 var(--pink-s);
}
.tabs button.on { background: var(--pink); color: var(--ink); }

/* 홈 카드: 4가지 색이 돌아가며 */
.card { --bc: var(--pink); --bs: var(--pink-s); }
.card:nth-child(4n+2) { --bc: var(--mint); --bs: var(--mint-s); }
.card:nth-child(4n+3) { --bc: var(--sky); --bs: var(--sky-s); }
.card:nth-child(4n+4) { --bc: var(--orange); --bs: var(--orange-s); }
.card {
  border: 2.5px solid var(--bc);
  border-radius: 24px;
  box-shadow: 0 6px 0 var(--bs);
}
.card-art { border-bottom: 2.5px dashed var(--bc); }

/* 홈 목록: 1열 가로형 카드 (왼쪽 그림 / 오른쪽 글) */
.grid { grid-template-columns: 1fr; gap: 16px; }
.card { flex-direction: row; align-items: stretch; }
.card-art {
  flex: none;
  width: 132px;
  aspect-ratio: 1 / 1;
  border-bottom: 0;
  border-right: 2.5px dashed var(--bc);
}
.card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 16px;
}
.card-tags { display: flex; align-items: center; gap: 6px; }
.card-title { font-size: 21px; margin: 6px 0 4px; }
.card-desc { font-size: 15px; }
.rank { top: 8px; left: 8px; }
.stamp { top: 10px; bottom: auto; right: 10px; }  /* 오른쪽 위 (설명 글 안 가리게) */
@media (max-width: 380px) {
  .card-art { width: 108px; }
  .card-title { font-size: 18px; }
}
.chip { border: 0; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .08); padding: 1px 9px; }
.chip.ghost { box-shadow: inset 0 0 0 1.5px var(--line); }
.rank { border: 2.5px solid #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .12); }
.stamp { border: 2px solid var(--orange); color: var(--orange); }
.local-note { border-color: var(--orange-s); background: rgba(255, 255, 255, .5); }

/* 테마 색: 엄마 = 분홍 / 아빠 = 하늘 / 아기 = 노랑 / 고르기 전 = 주황 */
:root { --tc: var(--pink); --tc-s: var(--pink-s); --tc-h: #fff5fa; }
body[data-theme="mom"]  { --tc: var(--pink);  --tc-s: var(--pink-s);  --tc-h: #fff5fa; }
body[data-theme="dad"]  { --tc: var(--sky);   --tc-s: var(--sky-s);   --tc-h: #f4faff; }
body[data-theme="baby"] { --tc: #f2c94c;      --tc-s: #fbe9a8;        --tc-h: #fffbea; }
body[data-theme="main"] { --tc: var(--orange); --tc-s: var(--orange-s); --tc-h: #fff7ef; }

/* 그림 액자: 흰 테두리 + 테마 색 테 + 아래 그림자 */
.intro-art, .result-art {
  border: 6px solid #fff;
  box-shadow: 0 0 0 3px var(--tc), 0 9px 0 3px var(--tc-s);
  margin-bottom: 26px;
}

/* 버튼 */
.btn {
  border: 2.5px solid var(--peach);
  box-shadow: 0 4px 0 var(--peach-s);
  transition: transform .1s, box-shadow .1s, background .15s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--peach-s); }
.btn.dark { border-color: var(--ink); box-shadow: 0 4px 0 #bdb6ad; }
.btn.kakao { border-color: #f0c800; box-shadow: 0 4px 0 #fff0a0; }

/* 질문 보기 */
.choice {
  border: 2.5px solid var(--tc);
  box-shadow: 0 4px 0 var(--tc-s);
  transition: background .12s, transform .12s, box-shadow .12s;
}
.choice:hover { background: var(--tc-h); }
.choice.picked {
  background: var(--y);
  border-color: var(--peach);
  box-shadow: 0 1px 0 var(--peach-s);
  transform: translateY(3px);
}

/* 막대: 민트 테두리 + 줄무늬 채움 */
.bar { border: 2.5px solid var(--mint); }
.bar i {
  border-right: 0;
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .55) 0 5px, transparent 5px 11px);
  background-color: var(--y);
}

.r-grade { border: 2.5px solid var(--peach); box-shadow: 0 3px 0 var(--peach-s); }

/* 결과 박스: 박스마다 다른 색 */
.box { --bc: var(--mint); --bs: var(--mint-s); }
.box.stats { --bc: var(--sky); --bs: var(--sky-s); }
.box.bubble { --bc: var(--orange); --bs: var(--orange-s); }
.box.mission { --bc: var(--peach); --bs: var(--peach-s); }
.box {
  border: 2.5px solid var(--bc);
  border-radius: 24px;
  box-shadow: 0 6px 0 var(--bs);
  margin-bottom: 20px;
}
.box h3::before,
.box h3::after,
.mission h3::before,
.mission h3::after { width: 7px; height: 7px; border: 0; background: var(--bc); }
.box li::before { border: 0; background: var(--bc); }
.stat .bar { border-color: var(--sky); }

/* 속마음: 말풍선 꼬리 */
.bubble { background: #fff; border-style: dashed; }
.bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  background: #fff;
  border-right: 2.5px dashed var(--bc);
  border-bottom: 2.5px dashed var(--bc);
  transform: rotate(45deg);
}
.bubble { margin-bottom: 30px; }

.foot { border-top: 2.5px dashed var(--pink-s); }

/* =====================================================================
   메인(홈) 화면 강조색 = 주황
   ===================================================================== */
body[data-page="home"] {
  --or: #ff9a3c;      /* 주황 */
  --or-l: #ffd3a6;    /* 연주황 (형광펜, 버튼 채움) */
  --or-s: #ffe6cc;    /* 아주 연한 주황 (그림자) */
}
body[data-page="home"] .hl,
body[data-page="home"] .hero h1 mark { --hl: var(--or-l); }
body[data-page="home"] .squiggle { text-decoration-color: var(--or); }
body[data-page="home"] .tabs button {
  border-color: var(--or);
  box-shadow: 0 3px 0 var(--or-s);
}
body[data-page="home"] .tabs button.on { background: var(--or); color: #fff; }
body[data-page="home"] .sort { box-shadow: inset 0 0 0 1.5px var(--or-l); }
body[data-page="home"] .sort button.on { background: var(--or-l); }
body[data-page="home"] .card .plays::before { background: var(--bc); }  /* 홈: 그 카드 테두리 색과 같게 */
body[data-page="home"] .rank { background: var(--or); }
body[data-page="home"] .rank.r2 { background: #ffb36e; }
body[data-page="home"] .rank.r3 { background: var(--or-l); }
body[data-page="home"] .local-note { border-color: var(--or-l); }
body[data-page="home"] .foot { border-top-color: var(--or-s); }

/* 테스트 이름 (홈 카드 제목 + 테스트 시작 화면 제목) = 페이퍼로지 Bold */
.card-title,
#app .intro h1 {
  font-family: "Paperlogy", var(--font);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.card-title { font-size: 19px; }
#app .intro h1 { font-size: 30px; line-height: 1.35; margin-bottom: 26px; }  /* 제목 ↔ 그림 간격 */

/* 목록 제목(이번 주 인기 TOP / 새로 나온 테스트) + 인기순·최신순 = 페이퍼로지 Medium */
.rank-head,
.sort button {
  font-family: "Paperlogy", var(--font);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.rank-head { font-size: 20px; }
.sort button { font-size: 13px; }

/* 참여 수 (○명 참여 / 지금까지 ○명이 해봤어요) = 페이퍼로지 Regular */
.plays,
#app .plays {
  font-family: "Paperlogy", var(--font);
  font-weight: 400;
  letter-spacing: -0.01em;
}

@media (max-width: 380px) {
  .hero h1 { font-size: 38px; }
  .card-title { font-size: 17px; }
  .q-text { font-size: 24px; }
  .r-title { font-size: 38px; }
}