/* ===========================================================
   카톡 답장 유형 테스트 — 메신저 말풍선 테마
   =========================================================== */
:root{
  --bg:#FAF6EE;          /* 부드러운 크림 */
  --bubble:#FFFFFF;
  --ink:#3A3A3A;
  --ink-soft:#6B6B6B;
  --accent:#FFD54A;      /* 카톡 옐로우 */
  --accent-deep:#F6C23E;
  --line:#ECE6D8;
  --radius:24px;
  --shadow:0 6px 22px rgba(80,70,40,.10);
  --maxw:560px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Noto Sans KR',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* 말풍선 패턴 배경 */
  background-image:radial-gradient(circle at 20% 30%, rgba(255,213,74,.06) 0 12px, transparent 12px),
                   radial-gradient(circle at 80% 70%, rgba(157,195,230,.06) 0 14px, transparent 14px);
  background-size:180px 180px, 220px 220px;
}

/* ---- 상단바 ---- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;
  background:rgba(250,246,238,.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{font-family:'Jua',sans-serif;font-size:1.15rem;color:var(--ink);cursor:pointer;letter-spacing:-.3px}
#langSel{display:flex;gap:6px}
#langSel button{
  border:1.5px solid var(--line);background:#fff;color:var(--ink-soft);
  font-size:.82rem;font-weight:700;padding:5px 11px;border-radius:999px;cursor:pointer;
  transition:.15s;min-width:38px;
}
#langSel button.on{background:var(--accent);border-color:var(--accent-deep);color:#5A4500}
#langSel button:hover{border-color:var(--accent)}

/* ---- 레이아웃 ---- */
#app{max-width:var(--maxw);margin:0 auto;padding:22px 18px 60px}

/* ---- 허브(홈) ---- */
.hub-hero{text-align:center;padding:18px 0 26px}
.hub-banner{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:14px;background:#fff}
.hub-banner img{width:100%;height:auto;display:block}
.hub-title{font-family:'Jua',sans-serif;font-size:2.6rem;letter-spacing:-1px;color:var(--ink)}
.hub-sub{font-size:1rem;color:var(--ink-soft);margin-top:6px}
.test-list{display:flex;flex-direction:column;gap:16px}
.test-card{
  display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;
  background:var(--bubble);border:2px solid var(--line);border-radius:var(--radius);
  padding:14px;box-shadow:var(--shadow);transition:.15s;position:relative;overflow:hidden;
}
.test-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.test-thumb{flex:0 0 96px;width:96px;height:96px;border-radius:16px;overflow:hidden;background:#fff}
.test-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.test-info{flex:1;min-width:0}
.test-emoji{font-size:1.1rem}
.test-name{font-family:'Jua',sans-serif;font-size:1.2rem;line-height:1.3;margin:2px 0;color:var(--ink)}
.test-desc{font-size:.86rem;color:var(--ink-soft);line-height:1.4}
.test-go{flex:0 0 auto;font-size:.82rem;font-weight:700;color:var(--accent-deep);align-self:flex-end}

/* ---- 뒤로가기 ---- */
.back-link{display:inline-block;color:var(--ink-soft);text-decoration:none;font-size:.9rem;font-weight:700;margin-bottom:14px}
.back-link:hover{color:var(--ink)}

/* ---- 히어로 ---- */
.hero{text-align:center}
.hero-art{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:22px;background:#fff}
.hero-art img{width:100%;height:auto;display:block}
.hero-title{font-family:'Jua',sans-serif;font-size:2rem;line-height:1.2;margin-bottom:8px;letter-spacing:-.5px}
.hero-tagline{font-size:1.08rem;font-weight:700;color:var(--ink);margin-bottom:6px}
.hero-sub{font-size:.96rem;color:var(--ink-soft);margin-bottom:24px;padding:0 8px}

.btn-primary{
  font-family:'Jua',sans-serif;font-size:1.25rem;
  background:var(--accent);color:#5A4500;border:none;
  padding:16px 48px;border-radius:999px;cursor:pointer;
  box-shadow:0 6px 0 var(--accent-deep);
  transition:transform .1s, box-shadow .1s;
}
.btn-primary:active{transform:translateY(4px);box-shadow:0 2px 0 var(--accent-deep)}

/* ---- 유형 미리보기 칩 ---- */
.type-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:34px}
.chip{text-align:center}
.chip img{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center top;
  border-radius:18px;display:block;
  border:3px solid var(--c,#eee);box-shadow:var(--shadow);background:#fff;
}
.chip span{display:block;font-size:.72rem;font-weight:700;margin-top:6px;color:var(--ink-soft);line-height:1.3}

/* ---- 퀴즈 ---- */
.quiz{padding-top:8px}
.qbar{height:10px;background:#fff;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;margin-bottom:10px}
.qbar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-deep));transition:width .3s}
.qcount{font-size:.85rem;font-weight:700;color:var(--ink-soft);text-align:center;margin-bottom:24px}
.qtext{
  font-family:'Jua',sans-serif;font-size:1.45rem;line-height:1.4;text-align:center;
  margin-bottom:28px;min-height:2.6em;display:flex;align-items:center;justify-content:center;
}
.answers{display:flex;flex-direction:column;gap:12px}
.answer{
  background:var(--bubble);border:2px solid var(--line);
  font-family:inherit;font-size:1.02rem;font-weight:500;color:var(--ink);
  padding:18px 20px;border-radius:18px;cursor:pointer;text-align:left;
  box-shadow:var(--shadow);transition:.15s;
  position:relative;
}
.answer:hover{border-color:var(--accent);transform:translateY(-2px)}
.answer:active{transform:translateY(0)}

/* ---- 결과 ---- */
.result{text-align:center}
.result-label{font-size:1rem;font-weight:700;color:var(--ink-soft);margin-bottom:14px}
.result-card{
  background:var(--c,#fff);border-radius:var(--radius);padding:18px;
  box-shadow:var(--shadow);margin-bottom:20px;
}
.result-img{width:100%;max-width:340px;height:auto;border-radius:18px;display:block;margin:0 auto 14px}
.result-name{font-family:'Jua',sans-serif;font-size:1.9rem;color:var(--ink);margin-bottom:4px}
.result-tag{font-size:1rem;font-weight:700;color:var(--ink);opacity:.7}
.result-desc{
  background:#fff;border:1.5px solid var(--line);border-radius:18px;
  padding:20px;font-size:1rem;text-align:left;margin-bottom:20px;box-shadow:var(--shadow);
}
.match{display:flex;gap:10px;margin-bottom:22px}
.match-item{flex:1;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:14px 10px;box-shadow:var(--shadow)}
.match-label{display:block;font-size:.78rem;color:var(--ink-soft);margin-bottom:6px}
.match-item span:last-child{font-weight:700;font-size:.92rem}
.match-item.best{border-color:#FFB3C7}
.match-item.worst{border-color:#9DC3E6}

.card-maker{
  background:#fff;border:1.5px solid var(--line);border-radius:18px;
  padding:18px;margin-bottom:18px;box-shadow:var(--shadow);text-align:center;
}
.card-maker-label{font-size:.9rem;color:var(--ink-soft);margin-bottom:12px}
.card-maker #nick{
  width:100%;border:2px solid var(--line);border-radius:14px;
  padding:13px 16px;font-size:1rem;font-family:inherit;text-align:center;margin-bottom:10px;
}
.card-maker #nick:focus{outline:none;border-color:var(--accent)}
.btn-make{
  width:100%;font-family:'Jua',sans-serif;font-size:1.05rem;
  background:var(--accent);color:#5A4500;border:none;
  padding:14px;border-radius:14px;cursor:pointer;
  box-shadow:0 4px 0 var(--accent-deep);transition:.1s;
}
.btn-make:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-deep)}

.nick-row{display:flex;gap:8px;margin-bottom:14px}
#nick{flex:1;border:2px solid var(--line);border-radius:14px;padding:13px 16px;font-size:1rem;font-family:inherit}
#nick:focus{outline:none;border-color:var(--accent)}

#cardCanvas{width:100%;max-width:320px;height:auto;border-radius:18px;margin:0 auto 18px;box-shadow:var(--shadow)}

.share-row{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.btn-share{font-family:'Jua',sans-serif;font-size:1.08rem;border:none;padding:15px;border-radius:14px;cursor:pointer;transition:.15s;color:#fff}
.btn-share:active{transform:scale(.98)}
.btn-share.share{background:#5B8DEF}
.btn-share.link{background:#7C8AED}
.btn-share.save{background:#5BC4A8}

.result-actions{display:flex;gap:10px;justify-content:center}
.btn-ghost{
  background:#fff;border:2px solid var(--line);color:var(--ink-soft);
  font-family:inherit;font-weight:700;font-size:.95rem;
  padding:12px 22px;border-radius:14px;cursor:pointer;transition:.15s;
}
.btn-ghost:hover{border-color:var(--accent)}

/* ---- 광고 자리 ---- */
/* ---- 광고 자리 ----
   승인 전에는 비어 있으므로 숨김(빈 박스 노출 방지).
   AdSense 승인 후 .ad-slot 안에 <ins class="adsbygoogle"> 코드를 넣으면
   자동으로 표시됩니다. (ins가 들어가면 :empty가 아니게 되어 보임)            */
.ad-slot{margin:28px auto 0;max-width:336px;text-align:center}
.ad-slot:empty{display:none}
.ad-slot::before{content:'광고';display:block;font-size:.7rem;color:#bbb;margin-bottom:4px;letter-spacing:1px}
.ad-slot:empty::before{display:none}

/* ---- 푸터 ---- */
.footer{max-width:var(--maxw);margin:0 auto;padding:30px 18px 40px;text-align:center;border-top:1px solid var(--line)}
.footer-nav{display:flex;gap:18px;justify-content:center;margin-bottom:12px}
.footer-nav a{color:var(--ink-soft);font-size:.88rem;text-decoration:none}
.footer-nav a:hover{color:var(--ink);text-decoration:underline}
.footer-note{font-size:.78rem;color:#aaa}

/* ---- 토스트 ---- */
#toast{
  position:fixed;left:50%;bottom:40px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:12px 24px;border-radius:999px;
  font-size:.92rem;opacity:0;pointer-events:none;transition:.25s;z-index:100;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- 반응형 ---- */
@media(max-width:380px){
  .type-preview{grid-template-columns:repeat(2,1fr)}
  .hero-title{font-size:1.7rem}
}
@media(min-width:561px){
  .hero-title{font-size:2.3rem}
}

/* ---- 접근성: 모션 줄이기 ---- */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}
:focus-visible{outline:3px solid var(--accent-deep);outline-offset:2px}