/* Test screens — sticker-set look: cream page, white cards, #3A2A22 outlines,
   palette from the stickers (butter, pink, mint, lilac, orange, purple). */

.screen[hidden] { display: none !important; }
.screen { padding: 8px 0 24px; }

/* Cover */
.cover { text-align: center; }
.cover__art { margin: 6px auto 18px; width: 100%; aspect-ratio: 4 / 3; border: 3px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--pop); }
.cover__art img { width: 100%; height: 100%; object-fit: cover; }
.cover__title { font-family: var(--f-hand); font-weight: 700; font-size: 42px; line-height: 1.02; margin: 0 0 8px; }
.cover__sub { margin: 0 auto 6px; font-size: 17px; max-width: 32ch; }
.cover__meta { margin: 0 0 20px; color: var(--muted); font-size: 14px; font-weight: 700; }
.cover__intro { margin: 28px 0 0; text-align: left; color: var(--muted); }
.cover__intro p { margin: 0 0 12px; }

.challenge-banner {
  display: flex; align-items: center; gap: 12px; text-align: left;
  margin: 0 0 18px; padding: 12px 16px;
  background: var(--butter); color: var(--ink);
  border: 3px solid var(--ink); border-radius: var(--r-md); box-shadow: 0 3px 0 var(--ink);
}
.challenge-banner img, .challenge-banner .ph { width: 44px; height: 44px; flex: none; }
.challenge-banner p { margin: 0; font-family: var(--f-hand); font-weight: 700; font-size: 22px; line-height: 1.1; }

/* Progress bar: bar only (no numbers), orange → yellow */
.pbar { height: 16px; margin: 6px 0 22px; border-radius: var(--r-pill); background: #E9E3DC; border: 2.5px solid var(--line); overflow: hidden; }
.pbar__fill { display: block; height: 100%; width: 0; border-radius: var(--r-pill); background: linear-gradient(90deg, #FFB36B, #FFE36E); transition: width .3s ease; }

/* Question card: frame 4:3, text in the safe area */
.qcard { position: relative; width: 100%; aspect-ratio: 4 / 3; margin: 14px 0 18px; }
.qcard__frame { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 22px; }
.qcard__frame.ph { position: absolute; inset: 0; border-radius: 22px; align-items: flex-end; padding-bottom: 10px; }
.qcard__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 2;
  padding: 3px 16px; border: 3px solid var(--ink); border-radius: var(--r-pill);
  background: var(--butter); color: var(--ink);
  font-family: var(--f-hand); font-weight: 700; font-size: 21px; line-height: 1.2;
}
.qcard__text {
  position: absolute; z-index: 1; left: 12%; right: 12%; top: 18%; bottom: 18%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  margin: 0; color: var(--ink);
  font-family: var(--f-hand); font-weight: 700; font-size: clamp(23px, 7.2vw, 30px); line-height: 1.12;
  text-wrap: balance;
}
.stk { position: absolute; z-index: 3; pointer-events: none; }
.stk img, .stk .ph { width: 100%; height: 100%; }
.stk--s { width: 40px; height: 40px; }
.stk--m { width: 56px; height: 56px; }
.stk--l { width: 72px; height: 72px; }
.stk--top-left { top: -18px; left: -6px; }
.stk--top-right { top: -18px; right: -6px; }
.stk--bottom-left { bottom: -14px; left: -6px; }
.stk--bottom-right { bottom: -14px; right: -6px; }
.stk--left { top: 50%; left: -10px; margin-top: -28px; }
.stk--right { top: 50%; right: -10px; margin-top: -28px; }

.qimg { margin: 0 0 18px; border: 3px solid var(--line); border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface); }
.qimg img { width: 100%; height: 100%; object-fit: cover; }

/* Options — raised buttons with a soft offset shadow. No ads on this screen. */
.options { display: grid; gap: 12px; }
.option {
  position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; min-height: 56px; padding: 12px 46px;
  border: 2.5px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--text);
  font-family: var(--f-body); font-weight: 700; font-size: 17.5px; line-height: 1.25;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--line) 28%, transparent), 0 8px 18px -10px rgba(58,42,34,.35);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease, opacity .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.option:active:not([disabled]) { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 28%, transparent); }
.option[disabled] { cursor: default; }
.option.is-correct { background: #C9E89A; color: var(--ink); }
.option.is-wrong { background: #F7A8B8; color: var(--ink); }
.option.is-picked { outline: 3px solid var(--ink); outline-offset: 2px; }
.option.is-dim { opacity: .5; }
.option__mark { position: absolute; right: 10px; top: 50%; width: 30px; height: 30px; margin-top: -15px; }
.option__mark img, .option__mark .ph { width: 100%; height: 100%; }

/* Reaction + one-line explanation */
.tip { margin: 18px 0 0; padding: 14px 18px 18px; background: var(--surface); border: 2.5px solid var(--line); border-radius: var(--r-md); animation: tip-in .22s ease-out; }
.tip__verdict { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-family: var(--f-hand); font-weight: 700; font-size: 27px; line-height: 1.1; }
.tip__verdict img, .tip__verdict .ph { width: 30px; height: 30px; flex: none; }
.tip__text { margin: 0 0 14px; }
@keyframes tip-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.qfoot { margin-top: 30px; text-align: center; }
.qfoot__share { font-size: 15px; color: var(--muted); }

/* Reveal */
.reveal { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.reveal__kernels { display: flex; gap: 10px; margin-bottom: 18px; }
.reveal__kernels span { width: 58px; height: 58px; animation: pop 0.9s cubic-bezier(.3,1.6,.5,1) infinite; }
.reveal__kernels span:nth-child(2) { animation-delay: .15s; }
.reveal__kernels span:nth-child(3) { animation-delay: .3s; }
.reveal__kernels img, .reveal__kernels .ph { width: 100%; height: 100%; }
.reveal__text { font-family: var(--f-hand); font-weight: 700; font-size: 30px; margin: 0; }
@keyframes pop { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-26px) scale(1.12) rotate(-8deg); } }

/* Result cards */
.rcard { position: relative; margin: 16px 0 0; padding: 22px 20px; background: var(--surface); border: 2.5px solid var(--line); border-radius: var(--r-lg); }
.rcard--reveal { margin-top: 10px; padding-top: 0; overflow: hidden; text-align: center; box-shadow: 0 5px 0 var(--line); animation: result-in .45s cubic-bezier(.2,1.4,.4,1); }
.rcard--reveal::before { content: ""; display: block; height: 12px; margin: 0 -20px 20px; background: var(--r-color, var(--accent)); border-bottom: 2.5px solid var(--line); }
@keyframes result-in { from { opacity: 0; transform: scale(.93); } to { opacity: 1; transform: none; } }
.rcard__art { width: min(220px, 66%); aspect-ratio: 1; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; }
.rcard__art img { width: 100%; height: 100%; object-fit: contain; }
.rcard__art .ph { border-radius: 24px; }
.emoji-art { font-size: 120px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.rcard__lead { margin: 0; font-weight: 700; color: var(--muted); }
.rcard__pct { margin: 2px 0 0; font-family: var(--f-hand); font-weight: 700; font-size: 88px; line-height: .95; }
.rcard__pct small { font-size: 48px; }
.rcard__score { margin: 6px 0 0; font-weight: 700; font-size: 15px; color: var(--muted); }
.rcard__name { margin: 14px 0 8px; font-family: var(--f-hand); font-weight: 700; font-size: 40px; line-height: 1.02; color: var(--ink); text-wrap: balance; }
.rcard__tagline { margin: 0 auto; max-width: 30ch; font-weight: 700; font-size: 17.5px; line-height: 1.35; }
.rcard__vs { margin: 16px 0 0; padding: 10px 14px; border-radius: var(--r-md); background: var(--butter); color: var(--ink); font-weight: 700; border: 2px solid var(--ink); }
.rcard--text p { margin: 0 0 12px; }
.rcard--text p:last-child { margin-bottom: 0; }
.rcard__h { margin: 0 0 10px; font-family: var(--f-hand); font-weight: 700; font-size: 28px; }

/* Gauge: 5 segments + marker */
.gauge { margin: 18px 4px 0; }
.gauge__labels { position: relative; height: 28px; margin-top: 8px; }
.gauge__seg { position: absolute; transform: translateX(-50%); font-size: 18px; line-height: 28px; opacity: .45; filter: grayscale(1); }
.gauge__seg.is-on { opacity: 1; filter: none; font-size: 24px; }
.gauge__track { position: relative; height: 20px; border-radius: var(--r-pill); background: #E9E3DC; border: 2.5px solid var(--line); }
.gauge__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: var(--r-pill); transition: width .9s cubic-bezier(.2,.8,.3,1); }
.gauge__tick { position: absolute; top: -2px; bottom: -2px; width: 2.5px; margin-left: -1px; background: var(--line); opacity: .55; }
.gauge__marker { position: absolute; top: 50%; left: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: #FFFFFF; border: 4px solid; box-shadow: 0 0 0 2.5px var(--ink); transition: left .9s cubic-bezier(.2,.8,.3,1); }
.gauge__msg { margin: 6px 0 0; text-align: center; font-weight: 700; }

/* Symptoms */
.symptoms { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.symptoms li { display: flex; gap: 10px; align-items: flex-start; }
.symptoms__dot { flex: none; width: 12px; height: 12px; margin-top: 7px; border-radius: 50%; border: 2px solid var(--ink); }

/* Superpower / weak spot */
.powers { display: grid; gap: 14px; }
.powers__row { display: flex; gap: 12px; align-items: flex-start; }
.powers__icon { flex: none; width: 40px; height: 40px; }
.powers__icon img, .powers__icon .ph { width: 100%; height: 100%; }
.powers p { margin: 0; }
.powers b { display: block; font-family: var(--f-hand); font-size: 22px; line-height: 1.1; }

/* All answers (collapsed) */
.answers { margin: 16px 0 0; background: var(--surface); border: 2.5px solid var(--line); border-radius: var(--r-lg); }
.answers__sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 10px 20px; cursor: pointer; list-style: none; font-family: var(--f-hand); font-weight: 700; font-size: 24px; }
.answers__sum::-webkit-details-marker { display: none; }
.answers__sum::after { content: ""; width: 12px; height: 12px; border-right: 3px solid var(--line); border-bottom: 3px solid var(--line); transform: rotate(45deg); margin-top: -6px; transition: transform .2s ease; }
.answers[open] .answers__sum::after { transform: rotate(225deg); margin-top: 4px; }
.answers__sum small { margin-left: auto; font-family: var(--f-body); font-size: 14px; color: var(--muted); }
.answers ol { list-style: none; margin: 0; padding: 0 14px 14px; display: grid; gap: 10px; }
.answer { padding: 12px 14px; border: 2px solid color-mix(in srgb, var(--line) 25%, transparent); border-radius: var(--r-md); }
.answer__q { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 6px; font-weight: 700; }
.answer__q .mark { flex: none; width: 26px; height: 26px; margin-top: 1px; }
.answer__q .mark img, .answer__q .mark .ph { width: 100%; height: 100%; }
.answer__pick { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.answer__pick b { color: var(--text); }
.answer__exp { margin: 0; font-size: 15px; }

/* Ad slot — kept well away from options and from share/next buttons */
.ad-slot { margin: 40px 0; min-height: 100px; }
.ad-slot--ph { display: flex; align-items: center; justify-content: center; border: 2px dashed color-mix(in srgb, var(--line) 40%, transparent); border-radius: 12px; color: var(--muted); font-size: 13px; }

/* Share (bottom center) */
.share { margin: 22px 0 0; padding: 22px 16px; text-align: center; background: var(--surface); border: 2.5px dashed var(--line); border-radius: var(--r-lg); }
.share__title { margin: 0 0 14px; font-family: var(--f-hand); font-weight: 700; font-size: 28px; line-height: 1.05; }
.share__name { display: block; text-align: left; margin: 0 0 12px; font-weight: 700; font-size: 14px; }
.share__name input { display: block; width: 100%; min-height: 48px; margin-top: 6px; padding: 10px 14px; border: 2.5px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-size: 17px; }
.share__row { display: flex; justify-content: center; gap: 10px; }
.sbtn {
  flex: 1 1 0; max-width: 130px; min-height: 76px; padding: 10px 6px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 2.5px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text);
  font-weight: 700; font-size: 14px; line-height: 1.15; cursor: pointer;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--line) 28%, transparent);
}
.sbtn svg { width: 24px; height: 24px; }
.sbtn:active { transform: translateY(3px); box-shadow: none; }
.sbtn--main { background: var(--butter); color: var(--ink); border-width: 3px; }
.sbtn[disabled] { opacity: .6; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 10px 18px; border-radius: var(--r-pill); background: var(--ink); color: var(--cream);
  font-weight: 700; font-size: 15px; transition: opacity .2s ease, transform .2s ease;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Next test */
.next { margin: 30px 0 0; text-align: center; }
.next__btn { border-radius: var(--r-lg); }
.recs { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; text-align: left; }
.rec__in { display: flex; flex-direction: column; gap: 4px; height: 100%; min-height: 96px; padding: 12px 14px; border: 2.5px solid var(--line); border-radius: var(--r-md); text-decoration: none; color: var(--ink); background: #C9D5FF; }
.rec--B .rec__in { background: #FBCFD9; }
.rec--C .rec__in { background: #D7EFB5; }
.rec.is-soon .rec__in { opacity: .65; border-style: dashed; }
.rec__type { align-self: flex-start; padding: 1px 8px; border: 2px solid var(--ink); border-radius: var(--r-pill); background: #FFFFFF; font-size: 11px; font-weight: 700; }
.rec__title { font-weight: 700; font-size: 15px; line-height: 1.25; }
.rec__meta { margin-top: auto; font-size: 13px; }
.next__retake { margin-top: 12px; min-height: 44px; padding: 8px 16px; border: 0; background: none; color: var(--muted); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* Pick-only mode: no answers shown until the result */
.option.is-selected { background: var(--butter); color: var(--ink); border-width: 3px; transform: translateY(2px); box-shadow: 0 2px 0 color-mix(in srgb, var(--line) 35%, transparent); }
.option.is-selected::after { content: ""; position: absolute; right: 14px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 6px var(--butter), inset 0 0 0 9px var(--ink); }
.qnav { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 22px; }
.qnav__back { min-width: 96px; box-shadow: 0 4px 0 color-mix(in srgb, var(--line) 28%, transparent); }
.qnav__back[hidden] { display: none; }
.qnav__back[hidden] + .qnav__next { grid-column: 1 / -1; }
.qnav__next[disabled] { opacity: .45; box-shadow: none; transform: none; cursor: not-allowed; }

/* Level reveal */
.rcard--level { padding-bottom: 26px; }
.rcard__level { margin: 2px 0 0; font-family: var(--f-hand); font-weight: 700; font-size: 64px; line-height: 1; }
.rcard--level .rcard__name { margin: 8px 0 4px; }
.rcard--level .rcard__score { margin: 0 0 18px; }
.rcard__art--circle { position: relative; width: min(240px, 70%); margin: 0 auto 18px; border-radius: 50%; background: color-mix(in srgb, var(--art-bg) 30%, #FFFFFF); border: 3px solid var(--ink); overflow: visible; }
.rcard__art--circle img { border-radius: 50%; }
.rcard__art--circle .emoji-art { font-size: 110px; }
.rcard__stk { position: absolute; width: 58px; height: 58px; }
.rcard__stk img, .rcard__stk .ph { width: 100%; height: 100%; }
.rcard__stk--a { left: -26px; bottom: 6px; transform: rotate(-12deg); }
.rcard__stk--b { right: -22px; top: 4px; transform: rotate(10deg); width: 50px; height: 50px; }

/* The Korean Cheat Sheet (same on every result) */
.cheat { margin: 30px 0 0; }
.cheat__title { margin: 0; font-family: var(--f-hand); font-weight: 700; font-size: 34px; line-height: 1.05; text-align: center; }
.cheat__sub { margin: 4px 0 16px; text-align: center; color: var(--muted); font-weight: 700; }
.cheat__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .cheat__list { grid-template-columns: 1fr 1fr; } }
.cheat__card { position: relative; padding: 14px 16px 16px; background: var(--surface); border: 2.5px solid var(--line); border-radius: var(--r-md); }
.cheat__mark { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; }
.cheat__mark img, .cheat__mark .ph { width: 100%; height: 100%; }
.cheat__h { margin: 0 30px 6px 0; font-size: 17px; line-height: 1.3; }
.cheat__q { display: inline-block; margin-right: 4px; padding: 0 8px; border: 2px solid var(--ink); border-radius: var(--r-pill); background: var(--butter); color: var(--ink); font-family: var(--f-hand); font-size: 17px; }
.cheat__ans { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.cheat__ans b { color: var(--text); }
.cheat__exp { margin: 0; font-size: 15px; }
.screen-result-end { height: 1px; }
.rcard__art--circle.has-img { border-radius: 24px; background: none; border: 0; }
.rcard__art--circle.has-img img { border-radius: 24px; }
.share__row--wide .sbtn { max-width: 160px; }
/* Cover uses the thumbnail (title = h1 inside it) */
.cover__art { aspect-ratio: 4 / 3; }
.cover__art .thumb { border-radius: inherit; }
.cover__name { margin: 0 0 4px; font-weight: 700; }
.cover__sub { font-size: 18px; font-weight: 700; margin-bottom: 18px; }
.challenge-banner[hidden] { display: none; }
.cover__art .thumb { text-align: left; }
.cover__art .thumb__char img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.thumb--cover .thumb__title { font-size: clamp(24px, 9cqw, 44px); }
.thumb--cover .thumb__hook { font-size: clamp(12px, 3.9cqw, 18px); }
.thumb--cover .thumb__char { width: 44%; height: 88%; }

/* Frames (A popcorn_box · B ticket · C bubble · D polaroid) — clean, cute */
.qcard__frame { border-radius: 0; filter: drop-shadow(0 5px 0 rgba(58,42,34,.12)); }
.qcard--popcorn_box .qcard__text { top: 16%; bottom: 12%; }
.qcard--ticket .qcard__text { left: 14%; right: 14%; }
.qcard--bubble .qcard__text { top: 10%; bottom: 24%; }
.qcard--polaroid .qcard__text { top: 13%; bottom: 26%; left: 13%; right: 13%; transform: rotate(-2deg); }
.qcard--polaroid .qcard__badge { top: -10px; }
/* Pill-shaped answer buttons (matches the frame mockup) */
.option { border-radius: 999px; min-height: 54px; padding: 12px 48px; }
.qcard__text { overflow: hidden; }

/* ---------- Cover (poomang-style) ---------- */
.cover { text-align: left; }
.cover__back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 0 0 6px -4px; padding: 0 6px; color: var(--muted); font-weight: 700; font-size: 15px; text-decoration: none; }
.cover__back svg { width: 20px; height: 20px; }
.cover__head { display: grid; grid-template-columns: 40% 1fr; gap: 16px; align-items: start; }
.cover__thumb { margin: 0; aspect-ratio: 4 / 5; border: 2.5px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.cover__info { display: flex; flex-direction: column; min-width: 0; }
.cover__title { margin: 0 0 10px; font-family: var(--f-body); font-weight: 700; font-size: clamp(20px, 5.6vw, 26px); line-height: 1.25; text-wrap: balance; }
.cover__meta { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; color: var(--muted); font-size: 15px; }
.cover__meta li { display: flex; align-items: center; gap: 8px; }
.cover__meta svg { width: 18px; height: 18px; flex: none; }
.cover__start { margin-top: auto; min-height: 50px; font-size: 17px; }
.cover__desc { margin: 22px 0 0; font-size: 16.5px; line-height: 1.65; }
.cover__desc p { margin: 0 0 14px; }
.cover__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; }
.cover__tags li { padding: 6px 12px; border-radius: 8px; background: color-mix(in srgb, var(--line) 9%, transparent); color: var(--muted); font-weight: 700; font-size: 14px; }
.cover__intro { margin-top: 20px; }
@media (max-width: 340px) { .cover__head { grid-template-columns: 1fr; } .cover__thumb { max-width: 220px; } }
.cover__thumb .thumb__chip { display: none; }

/* ---------- TYPE B result blocks ---------- */
.rcard__name--big { font-size: 44px; margin-top: 6px; }
.stats__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.stats__top { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; font-size: 15px; margin-bottom: 5px; }
.stats__val { color: var(--muted); font-variant-numeric: tabular-nums; }
.stats__bar { height: 14px; border-radius: 999px; background: #EFE8E1; border: 2px solid var(--line); overflow: hidden; }
.stats__fill { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .8s cubic-bezier(.2,.8,.3,1); }
.minicard__label { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.minicard__name { display: block; margin: 0 0 4px; font-family: var(--f-hand); font-weight: 700; font-size: 26px; line-height: 1.1; }
.minicard__why { display: block; margin: 0; font-size: 15px; }
.mate { padding: 0; }
.mate__sum { display: block; padding: 20px 20px 16px; cursor: pointer; list-style: none; }
.mate__sum::-webkit-details-marker { display: none; }
.mate__more { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-top: 10px; padding: 4px 14px; border: 2px solid var(--line); border-radius: 999px; font-weight: 700; font-size: 14px; }
.mate__more::after { content: ""; width: 8px; height: 8px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); margin-top: -4px; transition: transform .2s ease; }
.mate[open] .mate__more::after { transform: rotate(225deg); margin-top: 3px; }
.mate__tagline { margin: 0; padding: 0 20px 20px; font-weight: 700; font-size: 17px; animation: tip-in .22s ease-out; }
.cheat__emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.cheat__card.is-mine { border-width: 3px; }
.cheat__you { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 12px; vertical-align: 2px; }
.rcard__art--circle.has-img { width: min(290px, 82%); aspect-ratio: 1; }

/* Text sticker next to the result art (e.g. "빨리 빨리") — same purple doodle feel as the ㅋㅋ sticker */
.rcard__stk--text { width: auto; height: auto; right: -30px; top: -2px; padding: 0; white-space: nowrap;
  font-family: "Noto Sans KR", var(--f-hand); font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: -.02em;
  color: #7655E8; transform: rotate(12deg); text-shadow: 2px 2px 0 #FFFFFF; }

/* ---------- Themed travel loading ---------- */
.tload { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; overflow: hidden; }
.tload__path { position: absolute; left: -10%; right: -10%; top: 34%; height: 80px; border-top: 3px dashed #CFC4F5; border-radius: 50%; opacity: .7; }
.tload__icon { position: relative; display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin-bottom: 18px; font-size: 64px; line-height: 1; }
.tload__icon img { width: 96px; height: 96px; object-fit: contain; }
.tload__icon.is-pop { animation: tload-pop .45s ease-out; }
.tload__icon.is-fly img, .tload__icon.is-fly { animation: tload-fly .75s ease-in-out; }
@keyframes tload-pop { 0% { transform: translateY(14px) scale(.85); opacity: 0; } 60% { transform: translateY(-8px) scale(1.04); opacity: 1; } 100% { transform: none; } }
@keyframes tload-fly { 0% { transform: translateX(-110px) rotate(-6deg); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(0) rotate(0); } }
.tload__text { min-height: 1.4em; margin: 0 0 16px; font-family: var(--f-hand); font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.tload__bar { width: min(260px, 72%); height: 10px; border: 2px solid var(--line); border-radius: 999px; overflow: hidden; background: #FFFFFF; }
.tload__bar span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #C9B8FF, #F7A8C8); transition: width linear; }
@media (prefers-reduced-motion: reduce) { .tload__icon, .tload__icon img { animation: none !important; } }

/* ---------- Photocard result ---------- */
.pc { text-align: center; }
.pc__lead { margin: 6px 0 14px; font-size: 14px; font-weight: 700; color: var(--muted); }
.pc__card { --mx: 50%; --my: 30%; --rx: 0deg; --ry: 0deg; position: relative; width: min(320px, 78vw); margin: 0 auto 18px; border-radius: 16px; overflow: hidden;
  transform: perspective(900px) rotate(-2deg) rotateX(var(--rx)) rotateY(var(--ry)); box-shadow: 8px 14px 24px -10px rgba(58,42,34,.45); transition: transform .2s ease-out; touch-action: pan-y; }
.pc__img { display: block; width: 100%; height: auto; }
.pc__holo { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .35;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.75), rgba(255,255,255,0) 38%),
              linear-gradient(115deg, rgba(255,0,180,.0) 20%, rgba(255,120,220,.35) 38%, rgba(120,200,255,.35) 52%, rgba(160,255,200,.3) 66%, rgba(255,255,255,0) 80%);
  background-size: 100% 100%, 220% 220%; background-position: center, var(--mx) var(--my); }
@media (prefers-reduced-motion: reduce) { .pc__card { transform: rotate(-2deg); transition: none; } }
.pc__name { margin: 0; font-family: var(--f-hand); font-weight: 800; font-size: 30px; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
.pc__ko { margin: 6px 0 12px; font-size: 13px; color: var(--muted); }
.pc__ko-ko { font-weight: 700; color: var(--ink); }
.pc__status { display: inline-block; margin: 0 0 12px; padding: 5px 12px; border: 2px solid var(--r-color); border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.pc__tag { margin: 0 0 10px; font-weight: 800; font-size: 17px; line-height: 1.4; }
.pc__desc { margin: 0 0 6px; font-size: 16px; line-height: 1.6; text-align: left; }
.pc-share { text-align: center; }
.pc-share__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pc-share__btn { min-height: 48px; padding: 6px 4px; font-size: 14px; }
.pc-share__btn--share { background: #161616; color: #FFFFFF; border-color: #161616; }
.pc-ess__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pc-ess__list li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; }
.pc-ess__check { flex: none; width: 26px; height: 26px; }
.pc-ess__check img { width: 100%; height: 100%; }
.pc-buddies { display: grid; gap: 12px; margin: 16px 0 0; }
@media (min-width: 440px) { .pc-buddies { grid-template-columns: 1fr 1fr; align-items: start; } }
.pc-buddy { border: 2px solid var(--line); border-radius: var(--r-md); background: #FFFFFF; }
.pc-buddy--best { background: #F2FBF5; } .pc-buddy--chaotic { background: #FFF5EE; }
.pc-buddy__sum { display: grid; gap: 4px; padding: 14px 16px; cursor: pointer; list-style: none; }
.pc-buddy__sum::-webkit-details-marker { display: none; }
.pc-buddy__sum::after { content: "Tap to see their vibe ▾"; font-size: 12px; color: var(--muted); }
.pc-buddy[open] .pc-buddy__sum::after { content: "▴"; }
.pc-buddy__label { font-size: 13px; font-weight: 700; color: var(--muted); }
.pc-buddy__who { font-family: var(--f-hand); font-weight: 800; font-size: 18px; }
.pc-buddy__why { font-size: 14.5px; line-height: 1.5; }
.pc-buddy__more { margin: 0; padding: 0 16px 14px; font-weight: 700; font-size: 14.5px; }
.pc-collect__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 12px; }
.pc-collect__card { margin: 0; border-radius: 8px; overflow: hidden; filter: grayscale(1) blur(1.2px); opacity: .55; }
.pc-collect__card.is-me { filter: none; opacity: 1; outline: 3px solid var(--r-color); outline-offset: 2px; }
.pc-collect__card img { display: block; width: 100%; height: auto; }
.pc-collect__text { margin: 0; font-size: 14.5px; text-align: center; }
.pc-decoded__sub { margin: -4px 0 12px; font-size: 14px; color: var(--muted); }
.pc-decoded__item { margin: 10px 0 0; padding: 12px 14px; border: 2px solid #E7E0DA; border-radius: var(--r-md); }
.pc-decoded__t { margin: 0 0 4px; font-weight: 800; }
.pc-decoded__x { margin: 0; font-size: 14.5px; line-height: 1.55; }

/* ---------- Result skins (shared) ---------- */
.skin { text-align: center; }
.skin__lead { margin: 0 0 2px; font-size: 14px; font-weight: 700; color: var(--muted); }
.skin__level { margin: 0 0 14px; font-family: var(--f-hand); font-weight: 800; font-size: 52px; line-height: 1; letter-spacing: -.03em; color: var(--ci); }
.skin__card { --mx: 50%; --my: 40%; --rx: 0deg; --ry: 0deg; position: relative; margin: 0 auto; overflow: hidden; text-align: left;
  transform: perspective(900px) rotate(-2deg) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .2s ease-out; touch-action: pan-y;
  box-shadow: 8px 14px 26px -12px rgba(46,33,27,.5); background-size: 100% 100%; background-repeat: no-repeat; container-type: inline-size; }
.skin__holo { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .3;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.8), rgba(255,255,255,0) 35%),
              linear-gradient(115deg, rgba(255,255,255,0) 22%, rgba(255,130,220,.35) 38%, rgba(130,210,255,.35) 52%, rgba(170,255,210,.3) 66%, rgba(255,255,255,0) 80%);
  background-size: 100% 100%, 220% 220%; background-position: center, var(--mx) var(--my); }
@media (prefers-reduced-motion: reduce) { .skin__card { transform: rotate(-2deg); transition: none; } }
.skin__name { margin: 18px 0 4px; font-family: var(--f-hand); font-weight: 800; font-size: 28px; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
.skin__score { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.skin__tag { margin: 4px 0 0; font-weight: 800; font-size: 16px; line-height: 1.4; color: var(--ci); }
.skin-emo { font-size: 18cqw; line-height: 1; font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }

/* ID card */
.sk-id { width: min(100%, 360px); aspect-ratio: 1.586; border-radius: 16px; border: 2.5px solid var(--line);
  background: repeating-radial-gradient(circle at 78% 120%, color-mix(in srgb, var(--c) 10%, transparent) 0 2px, transparent 2px 9px),
              linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, #FFFFFF), #FFFFFF 55%, color-mix(in srgb, var(--c) 18%, #FFF8EF)); }
.sk-id__band { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 19%; padding: 0 4%; background: var(--c); color: #FFFFFF; }
.sk-id__band b { font-family: var(--f-hand); font-weight: 800; font-size: 4cqw; letter-spacing: .05em; text-transform: uppercase; }
.sk-id__band span { font-family: "Noto Sans KR", sans-serif; font-weight: 700; font-size: 3cqw; }
.sk-id__wm { position: absolute; right: 28%; top: 24%; width: 22%; opacity: .1; pointer-events: none; }
.sk-id__body { position: absolute; left: 0; right: 0; top: 19%; bottom: 15%; display: grid; grid-template-columns: 31% 1fr; gap: 4%; padding: 3.5% 4%; }
.sk-id__photo { position: relative; display: flex; align-items: center; justify-content: center; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--c) 18%, #FFFFFF); container-type: inline-size; }
.sk-id__photo img { width: 100%; height: 100%; object-fit: contain; }
.sk-id__photo .skin-emo { font-size: 60cqw; }
.sk-id__fields { display: grid; align-content: start; gap: .8cqw; min-width: 0; }
.sk-f { display: grid; }
.sk-f small { font-weight: 800; font-size: 2.4cqw; letter-spacing: .08em; color: var(--muted); }
.sk-f strong { font-family: var(--f-hand); font-weight: 800; font-size: 4.2cqw; line-height: 1.12; letter-spacing: -.02em; color: var(--ink); }
.sk-f--name strong { font-size: 4.8cqw; }
.sk-f--small strong { font-size: 3.6cqw; }
.sk-id__row { display: flex; gap: 4cqw; }
.sk-id__seal { position: absolute; right: 5%; bottom: 17%; width: 23%; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 3px solid #D93A3A; border-radius: 50%; color: #D93A3A; transform: rotate(-14deg); opacity: .88; mix-blend-mode: multiply; }
.sk-id__seal::before { content: ""; position: absolute; inset: 7%; border: 1.5px solid #D93A3A; border-radius: 50%; }
.sk-id__seal b { font-family: "Noto Sans KR", sans-serif; font-weight: 900; font-size: 4.8cqw; line-height: 1; }
.sk-id__seal i { font-style: normal; font-weight: 800; font-size: 2.2cqw; letter-spacing: .06em; }
.sk-id__mrz { position: absolute; left: 0; right: 0; bottom: 0; height: 15%; display: flex; align-items: center; padding: 0 4%; overflow: hidden; white-space: nowrap; background: rgba(255,255,255,.65); border-top: 1.5px dashed rgba(58,42,34,.35); font: 700 2.9cqw ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; color: #5A4A42; }

/* Postcard (K-pop Fan) */
.sk-post { width: min(100%, 380px); aspect-ratio: 567 / 265; border-radius: 10px; border: 2px solid var(--line); }
.sk-post__stamp { position: absolute; left: 6.6%; top: 14%; width: 33.6%; height: 72%; display: flex; align-items: center; justify-content: center; background: #FFFFFF; container-type: inline-size; }
.sk-post__stamp img { width: 92%; height: 92%; object-fit: contain; }
.sk-post__stamp .skin-emo { font-size: 55cqw; }
.sk-post__text { position: absolute; left: 45%; right: 4%; top: 10%; bottom: 10%; display: flex; flex-direction: column; justify-content: center; gap: 1.2cqw; }
.sk-post__kicker { margin: 0; font-weight: 800; font-size: 2.6cqw; letter-spacing: .18em; color: #B05A7A; }
.sk-post__title { margin: 0; font-family: var(--f-hand); font-weight: 800; font-size: 7.4cqw; line-height: 1; letter-spacing: -.03em; color: var(--ci); }
.sk-post__name { margin: 0; font-family: var(--f-hand); font-weight: 800; font-size: 4.4cqw; line-height: 1.12; letter-spacing: -.02em; color: var(--ink); }
.sk-post__from { margin: .6cqw 0 0; padding-top: 1.2cqw; border-top: 1.5px dashed rgba(58,42,34,.35); font-size: 2.8cqw; font-weight: 700; color: #6E5D55; }
.sk-post__mark { position: absolute; left: 30%; top: 52%; width: 17%; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid rgba(58,42,34,.55); border-radius: 50%; color: rgba(58,42,34,.7); transform: rotate(-16deg); background: transparent; }
.sk-post__mark::after { content: ""; position: absolute; left: 92%; top: 30%; width: 70%; height: 40%; background: repeating-linear-gradient(180deg, rgba(58,42,34,.45) 0 1.5px, transparent 1.5px 6px); }
.sk-post__mark b { font-weight: 800; font-size: 2.6cqw; letter-spacing: .06em; }
.sk-post__mark i { font-style: normal; font-weight: 800; font-size: 2.4cqw; }

/* Seoul resident card (Which Local) */
.sk-res { width: min(100%, 380px); aspect-ratio: 940 / 540; border-radius: 14px; border: 2px solid var(--line); }
.sk-res__photo { position: absolute; left: 6.9%; top: 19.8%; width: 29.6%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--c) 30%, #FFFFFF); border: 2px solid #FFFFFF; container-type: inline-size; }
.sk-res__photo img { width: 86%; height: 86%; object-fit: contain; }
.sk-res__photo .skin-emo { font-size: 50cqw; }
.sk-res__name { position: absolute; left: 40.5%; right: 14%; top: 27%; margin: 0; font-family: "Silkscreen", var(--f-hand); font-weight: 700; font-size: 5.4cqw; line-height: 1.05; text-transform: uppercase; letter-spacing: .01em;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFB3D9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: .25cqw #2E211B; paint-order: stroke fill; }
.sk-res__home { position: absolute; left: 40.5%; right: 14%; bottom: 20%; margin: 0; font-size: 3.2cqw; font-weight: 800; color: #6E5D55; }

/* 7 days stamp board (Seoul 7 Days) */
.sk-stamp { width: min(100%, 300px); aspect-ratio: 891 / 1260; border-radius: 16px; }
.sk-stamp__level { position: absolute; left: 50%; top: 47.6%; transform: translate(-50%, -50%); margin: 0; font-family: var(--f-hand); font-weight: 800; font-size: 8cqw; letter-spacing: .02em; color: #4F8FE0; white-space: nowrap; }
.sk-stamp__hit { position: absolute; width: 14%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: .9cqw solid #E2457D; border-radius: 50%; color: #E2457D; background: rgba(255,214,231,.55); mix-blend-mode: multiply; }
.sk-stamp__hit b { font-weight: 900; font-size: 2.8cqw; letter-spacing: .04em; }
/* skin tweaks: readable resident name, postmark in the corner, bigger day stamps */
.sk-res__name { top: 30%; right: 15%; font-size: 5cqw; line-height: 1.12; background: none; -webkit-text-stroke: 0; color: #D63F7C; text-shadow: .3cqw .3cqw 0 #FFE0EE; }
.sk-res__home { bottom: 17%; font-size: 3cqw; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sk-post__mark { left: auto; right: 5%; top: 8%; width: 13%; }
.sk-post__mark::after { display: none; }
.sk-post__text { right: 18%; }
.sk-stamp__hit { width: 16%; }

/* resident card: mini Seoul map + home base */
.sk-res__map { position: absolute; left: 40.5%; top: 54%; width: 22%; aspect-ratio: 960 / 840; }
.sk-res__map img { width: 100%; height: 100%; object-fit: contain; }
.sk-res__pin { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); font-size: 6cqw; line-height: 1; filter: drop-shadow(0 .4cqw 0 rgba(0,0,0,.18)); }
.sk-res__home { position: absolute; left: 64%; right: 14.5%; top: 57%; bottom: auto; display: grid; gap: .4cqw; font-size: 3cqw; line-height: 1.25; font-weight: 800; color: #5A4A42; -webkit-line-clamp: unset; }
.sk-res__home small { font-size: 2.2cqw; letter-spacing: .1em; color: #D63F7C; }
.sk-res__home span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* stamp board: result art in the old bubble spot + 7 heart slots */
.sk-stamp__level { display: none; }
.sk-stamp__art { position: absolute; left: 50%; top: 47.4%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #FFFFFF; border: .8cqw solid #2F6FD6; box-shadow: 0 1.4cqw 0 rgba(0,0,0,.12); overflow: hidden; container-type: inline-size; }
.sk-stamp__art img { width: 84%; height: 84%; object-fit: contain; }
.sk-stamp__art .skin-emo { font-size: 58cqw; }
.sk-stamp__heart { position: absolute; width: 11.4%; aspect-ratio: 1; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; }
.sk-stamp__heart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sk-stamp__heart path { fill: #FFFFFF; stroke: #A8A8A8; stroke-width: 5; stroke-dasharray: 8 6; }
.sk-stamp__heart b { position: relative; margin-top: -10%; font-weight: 800; font-size: 2.6cqw; color: #B8B8B8; }
.sk-stamp__heart.is-on path { fill: #FF9BC0; stroke: #E2457D; stroke-dasharray: none; stroke-width: 6; }
.sk-stamp__heart.is-on { transform: translate(-50%, -50%) rotate(-8deg); }
.sk-stamp__heart.is-on b { color: #FFFFFF; font-size: 2.1cqw; letter-spacing: .02em; }

/* resident card: mini Seoul map fills the empty middle */
.sk-res__map { position: absolute; left: 40%; width: 30%; bottom: 7%; opacity: .95; pointer-events: none; }
.sk-res__home { left: 40.5%; right: 15%; bottom: auto; top: 58%; }
/* stamp board: main image where the bubble was, 7 heart slots */
.sk-stamp__art { position: absolute; left: 50%; top: 48%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; background: #FFFFFF; border: .8cqw solid #2C6FC9; border-radius: 50%; overflow: hidden; container-type: inline-size; box-shadow: 0 1.2cqw 0 #2C6FC9; }
.sk-stamp__art img { width: 84%; height: 84%; object-fit: contain; }
.sk-stamp__art .skin-emo { font-size: 55cqw; }
.sk-stamp__heart { position: absolute; width: 11.5%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; }
.sk-stamp__heart svg { width: 100%; height: auto; fill: #FFFFFF; stroke: #8E8E8E; stroke-width: 5; }
.sk-stamp__heart b { position: absolute; top: 34%; font-size: 2.2cqw; font-weight: 900; letter-spacing: .02em; color: #B9B9B9; }
.sk-stamp__heart.is-on svg { fill: #FF8DB7; stroke: #E2457D; }
.sk-stamp__heart.is-on b { color: #FFFFFF; }
.sk-stamp__heart.is-on { transform: translate(-50%, -50%) rotate(-6deg); }
.sk-stamp__art { top: 49.5%; width: 22%; }
/* resident card layout v2: name (≤3 lines) → home line → mini map, no overlaps */
.sk-res__name { top: 28.5%; right: 14%; font-size: 4.4cqw; line-height: 1.12; }
.sk-res__home { top: 55%; bottom: auto; left: 40.5%; right: 14%; font-size: 2.9cqw; -webkit-line-clamp: 2; }
.sk-res__map { left: 44%; width: 24%; bottom: 3%; }
/* resident card layout v3 (matches markup: home = label + name, map = img + pin) */
.sk-res__home { position: absolute; top: 55%; bottom: auto; left: 40.5%; right: 14%; display: grid; gap: .3cqw; margin: 0; font-size: 2.9cqw; line-height: 1.25; color: #6E5D55; -webkit-line-clamp: unset; overflow: visible; }
.sk-res__home small { font-size: 2cqw; font-weight: 900; letter-spacing: .12em; color: #D63F7C; }
.sk-res__home span { font-weight: 800; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sk-res__map { position: absolute; left: 44%; width: 22%; bottom: 3%; top: auto; right: auto; }
.sk-res__map img { display: block; width: 100%; height: auto; }
.sk-res__pin { display: none; }
.sk-res__home { right: 38%; top: 56%; }
.sk-res__home span { -webkit-line-clamp: 3; }
.sk-res__map { left: 63.5%; width: 21%; top: 53%; bottom: auto; }

/* 7 days: square card, big main image top-right, slightly bigger hearts */
.sk-stamp { width: min(100%, 330px); aspect-ratio: 1; }
.sk-stamp__art { left: 75%; top: 22%; width: 34%; border-width: .9cqw; box-shadow: 0 1.2cqw 0 #2C6FC9; }
.sk-stamp__art img { width: 88%; height: 88%; }
.sk-stamp__art .skin-emo { font-size: 62cqw; }
.sk-stamp__heart { width: 12.5%; }
.sk-stamp__heart b { font-size: 2.4cqw; }
/* Which Local resident card: bigger name, bigger home base, map further right */
.sk-res__name { font-size: 5.3cqw; top: 27.5%; }
.sk-res__home { top: 57%; right: 34%; font-size: 3.7cqw; line-height: 1.22; }
.sk-res__home small { font-size: 2.6cqw; }
.sk-res__map { left: 67.5%; width: 18.5%; top: 52%; }

/* resident card v4: single flowing column (no overlaps) */
.sk-res__info { position: absolute; left: 40.5%; right: 14.5%; top: 26%; bottom: 7%; display: flex; flex-direction: column; gap: 2cqw; overflow: hidden; }
.sk-res__info .sk-res__name { position: static; margin: 0; font-size: 5.3cqw; line-height: 1.08; letter-spacing: 0; }
.sk-res__meta { display: flex; align-items: flex-start; gap: 2cqw; }
.sk-res__info .sk-res__home { position: static; flex: 1; min-width: 0; font-size: 3.7cqw; line-height: 1.22; }
.sk-res__info .sk-res__home small { display: block; font-size: 2.6cqw; }
.sk-res__info .sk-res__map { position: static; flex: none; width: 40%; margin-top: -1cqw; margin-right: -2cqw; }
.sk-res__info .sk-res__home span { -webkit-line-clamp: 4; } .sk-res__info .sk-res__map { width: 36%; }

/* cover slideshow: result cards crossfade on a pastel card (like poomang) */
.cover__thumb--rotate { position: relative; background: var(--thumb-bg); }
.cover__thumb--rotate img { position: absolute; inset: 6% 10%; width: 80%; height: 88%; object-fit: contain; opacity: 0; transition: opacity .6s ease; filter: drop-shadow(0 6px 10px rgba(46,33,27,.25)); }
.cover__thumb--rotate img.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cover__thumb--rotate img { transition: none; } }

/* 7 days v3: coupon board drawn in CSS */
.sk-stamp__board { position: absolute; left: 7%; right: 7%; top: 25%; bottom: 6%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2cqw; padding: 6cqw 4cqw 4cqw; background: #FFFFFF; border: 1.2cqw solid #1F6BCB; border-radius: 4cqw; box-shadow: 0 2cqw 0 rgba(31,107,203,.35); }
.sk-stamp__ribbon { position: absolute; left: 50%; top: -3.6cqw; width: 22%; transform: translateX(-50%); }
.sk-stamp .sk-stamp__art { position: static; transform: none; width: 23%; aspect-ratio: 1; border-width: .8cqw; box-shadow: 0 .9cqw 0 #2C6FC9; }
.sk-stamp__name { margin: 0; font-family: var(--f-hand); font-weight: 800; font-size: 6.4cqw; line-height: 1.08; letter-spacing: -.025em; text-align: center; color: #1F3F7A; text-wrap: balance; }
.sk-stamp__row { display: flex; justify-content: center; gap: 2.2cqw; }
.sk-stamp .sk-stamp__heart { position: static; width: 13.5cqw; transform: none; }
.sk-stamp .sk-stamp__heart.is-on { transform: rotate(-6deg); }
.sk-stamp .sk-stamp__heart b { font-size: 2.4cqw; }
.sk-stamp .sk-stamp__heart { position: relative; aspect-ratio: 1; }
.sk-stamp__board { top: 25.5%; }
.sk-stamp .sk-stamp__art { width: 26%; }

/* ---------- Real/Fake quiz: question label + two big buttons ---------- */
.qcard__label { display: block; margin: 0 0 .3em; font-family: var(--f-body); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.options--binary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.options--binary .option { min-height: 64px; font-size: 18px; justify-content: center; text-align: center; }
@media (max-width: 340px) { .options--binary { grid-template-columns: 1fr; } }

/* ---------- Night loading theme ---------- */
.tload--night { margin: 0 -16px; padding: 30px 16px; min-height: 64vh; background: radial-gradient(ellipse at 50% 0%, #2B3A6B 0%, #151D3B 70%); color: #FFFFFF; border-radius: 0 0 24px 24px; }
.tload--night .tload__text { color: #FFFFFF; }
.tload--night .tload__path { display: none; }
.tload--night .tload__bar { border-color: #FFFFFF; background: rgba(255,255,255,.15); }
.tload--night .tload__bar span { background: linear-gradient(90deg, #8FE3C6, #4FD1A5); }
.tload__star { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #FFF6C8; box-shadow: 0 0 6px #FFF6C8; animation: tload-twinkle 1.6s ease-in-out infinite; }
@keyframes tload-twinkle { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .tload__star { animation: none; opacity: .7; } }

/* ---------- Food card skin (convenience store quiz) ---------- */
.sk-food { width: 100%; max-width: 560px; border-radius: 14px; border: 2px solid var(--line); background: linear-gradient(180deg, var(--top) 0%, #FFFFFF 70%); display: grid; grid-template-columns: 1fr; justify-items: center; gap: 4cqw; padding: 6cqw 0 0; text-align: center; transform: perspective(900px) rotate(-1deg) rotateX(var(--rx)) rotateY(var(--ry)); }
.sk-food__text { position: relative; order: -1; width: 100%; display: grid; gap: 2.4cqw; justify-items: center; }
.sk-food__name { justify-self: stretch; margin: 0; padding: 2.4cqw 5cqw; background: var(--band); font-family: var(--f-hand); font-weight: 800; font-size: 8cqw; line-height: 1.12; letter-spacing: -.025em; color: #111111; }
.sk-food__ko { margin: 0; padding: 0 5cqw; font-family: "Noto Sans KR", sans-serif; font-weight: 900; font-size: 6.4cqw; line-height: 1.2; color: #111111; }
.sk-food__frame { width: 62%; aspect-ratio: 268 / 340; border: 2px solid #111111; background: #FFFFFF; }
.sk-food__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sk-food__meta { order: 3; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2cqw; padding: 0 4cqw; }
.sk-food__chip { padding: 1.4cqw 3.2cqw; border: 2px solid #111111; border-radius: 999px; background: #FFFFFF; font-weight: 800; font-size: 3.4cqw; line-height: 1.2; }
.sk-food__score { font-family: var(--f-hand); font-weight: 800; font-size: 5cqw; }
.sk-food__deco { position: absolute; width: 10cqw; pointer-events: none; }
.sk-food__deco--0 { left: 3cqw; top: -5cqw; transform: rotate(-12deg); }
.sk-food__deco--1 { right: 3cqw; top: -5cqw; transform: rotate(10deg); }
.sk-food__foot { justify-self: stretch; display: flex; align-items: center; justify-content: center; gap: 2cqw; margin-top: 2cqw; padding: 2.6cqw 0; background: var(--foot); font-family: "DM Serif Display", Georgia, serif; font-size: 4.2cqw; color: #1A1A1A; }
.sk-food__foot i { width: 14cqw; height: 1.5px; background: #1A1A1A; }
.sk-food__foot span { font-size: 3.2cqw; }
/* mobile order: name band → Korean → illustration → chip + score → footer */
.sk-food__text { display: contents; }
.sk-food__name { order: 1; } .sk-food__ko { order: 2; } .sk-food__frame { order: 3; } .sk-food__meta { order: 4; } .sk-food__foot { order: 5; }
.sk-food__deco { order: 0; }
/* wide card (≥ 520px): horizontal, like the mockup */
@container (min-width: 520px) {
  .sk-food { grid-template-columns: 34% 1fr; grid-template-rows: auto auto auto 1fr auto; justify-items: start; text-align: left; column-gap: 4cqw; row-gap: 1.6cqw; padding: 4cqw 0 0 4cqw; }
  .sk-food__frame { grid-column: 1; grid-row: 1 / span 4; width: 100%; }
  .sk-food__name { grid-column: 2; grid-row: 1; font-size: 4.6cqw; padding: 1.6cqw 3cqw; }
  .sk-food__ko { grid-column: 2; grid-row: 2; font-size: 3.8cqw; padding: 0 3cqw; }
  .sk-food__meta { grid-column: 2; grid-row: 3; justify-content: flex-start; padding: 0 3cqw; }
  .sk-food__chip { font-size: 2cqw; } .sk-food__score { font-size: 3cqw; }
  .sk-food__foot { grid-column: 1 / -1; grid-row: 5; margin-left: -4cqw; font-size: 2.6cqw; padding: 1.6cqw 0; }
  .sk-food__foot span { font-size: 2cqw; }
  .sk-food__deco { width: 6cqw; }
  .sk-food__deco--0 { left: auto; right: 12cqw; top: auto; bottom: 18cqw; }
  .sk-food__deco--1 { right: 4cqw; top: auto; bottom: 14cqw; }
}
.skin--foodcard { container-type: inline-size; }

/* ---------- Compact answers (collapsible) ---------- */
.ans { margin: 16px 0 0; border: 2px solid var(--line); border-radius: var(--r-md); background: #FFFFFF; }
.ans__sum { display: flex; align-items: center; justify-content: center; min-height: 48px; cursor: pointer; font-weight: 800; list-style: none; }
.ans__sum::-webkit-details-marker { display: none; }
.ans__sum::after { content: " \25BE"; margin-left: 6px; }
.ans[open] .ans__sum::after { content: " \25B4"; }
.ans__list { list-style: none; margin: 0; padding: 0 14px 12px; display: grid; gap: 8px; }
.ans__row { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px dashed #E7E0DA; font-size: 14px; line-height: 1.4; }
.ans__q { font-weight: 800; color: var(--muted); }
.ans__chip { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.ans__chip--real { background: #BFEBD8; } .ans__chip--fake { background: #FFD2C8; }
.ans__mark { font-weight: 900; font-size: 16px; } .ans__mark.is-ok { color: #1D8A55; } .ans__mark.is-no { color: #D9472B; }
.cover__thumb--rotate img { transition-duration: .3s; }
.qcard__text { flex-wrap: wrap; align-content: center; }
.qcard__text .qcard__label { flex-basis: 100%; text-align: center; }
.sk-food { max-width: 380px; margin-left: auto; margin-right: auto; }
@container (min-width: 520px) { .sk-food { max-width: 560px; } }

/* ---------- Korean phrase question ---------- */
.qcard__text--phrase { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.qp__sit { display: block; font-family: var(--f-body); font-weight: 700; font-size: 13.5px; line-height: 1.35; color: var(--muted); letter-spacing: 0; }
.qp__ko { display: block; font-family: "Gaegu", "Noto Sans KR", sans-serif; font-weight: 700; font-size: 34px; line-height: 1.1; color: var(--ink); }
.qp__romrow { display: inline-flex; align-items: center; gap: 8px; }
.qp__rom { font-family: var(--f-body); font-weight: 700; font-size: 14px; color: #6E5D55; font-style: italic; letter-spacing: 0; }
.qp__speak { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 2px solid var(--line); border-radius: 50%; background: #FFF4C2; font-size: 20px; cursor: pointer; line-height: 1; }
.qp__speak--sm { width: 36px; height: 36px; font-size: 16px; }
.qnote { margin: 10px 4px 0; font-size: 13px; line-height: 1.45; color: #8A7A72; text-align: center; }

/* ---------- Speech-bubble loading ---------- */
.bload { display: flex; flex-direction: column; justify-content: center; gap: 14px; min-height: 58vh; padding: 0 8px; }
.bload__b { position: relative; align-self: flex-start; max-width: 82%; margin: 0; padding: 12px 18px; background: #FFFFFF; border: 2.5px solid var(--line); border-radius: 22px 22px 22px 6px; font-family: "Gaegu", var(--f-hand); font-weight: 700; font-size: 22px; line-height: 1.2; }
.bload__b--r { align-self: flex-end; border-radius: 22px 22px 6px 22px; background: #FFF4C2; }
.bload__b.is-pop { animation: bload-up .45s ease-out; }
@keyframes bload-up { from { transform: translateY(18px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bload__b.is-pop { animation: none; } }

/* ---------- Food card: reaction bubble variant ---------- */
.sk-food--dark .sk-food__name { color: #FFFFFF; }
.sk-food--dark .sk-food__foot { color: #FFFFFF; } .sk-food--dark .sk-food__foot i { background: #FFFFFF; }
.sk-food__bubble { order: 2; position: relative; width: 84%; padding: 3.4cqw 4cqw; background: #FFFFFF; border: 2px solid var(--line); border-radius: 5cqw; text-align: center; }
.sk-food__bubble::after { content: ""; position: absolute; left: 50%; bottom: -2.4cqw; width: 4cqw; height: 4cqw; margin-left: -2cqw; background: #FFFFFF; border-right: 2px solid var(--line); border-bottom: 2px solid var(--line); transform: rotate(45deg); }
.sk-food__bko { margin: 0; font-family: "Gaegu", "Noto Sans KR", sans-serif; font-weight: 700; font-size: 6.6cqw; line-height: 1.15; color: var(--ink); }
.sk-food__brom { margin: .8cqw 0 0; font-size: 3.2cqw; font-style: italic; color: #7A6A62; }
.sk-food__ben { margin: .8cqw 0 0; font-size: 3.8cqw; font-weight: 800; color: var(--ink); }
.sk-food__frame img { object-fit: contain; padding: 4%; }
@container (min-width: 520px) { .sk-food__bubble { grid-column: 2; grid-row: 2; width: auto; margin: 0 3cqw; text-align: left; } .sk-food__bko { font-size: 4cqw; } .sk-food__brom { font-size: 2cqw; } .sk-food__ben { font-size: 2.3cqw; } .sk-food__bubble::after { left: 12%; } }

/* ---------- Pocket Survival Tip ---------- */
.ptip { margin: 14px 0 0; padding: 12px 14px; border: 2.5px dashed #E0B400; border-radius: var(--r-md); background: #FFF6CC; }
.ptip__title { margin: 0 0 4px; font-weight: 800; font-size: 14px; color: #8A5A00; }
.ptip__row { display: flex; align-items: center; gap: 10px; }
.ptip__text { flex: 1; margin: 0; font-size: 15px; line-height: 1.5; }
.ans__row--phrase { grid-template-columns: 1fr auto auto; }
.ans__ko { font-family: "Noto Sans KR", var(--f-body); }

/* folded reference sections (Cheat Sheet / Decoded) */
.fold { margin: 16px 0 0; border: 2px solid var(--line); border-radius: var(--r-md); background: #FFFFFF; }
.fold__sum { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 14px; cursor: pointer; list-style: none; font-weight: 800; text-align: center; }
.fold__sum::-webkit-details-marker { display: none; }
.fold__sum::after { content: "\25BE"; }
.fold[open] .fold__sum::after { content: "\25B4"; }
.fold > section, .fold > div { margin: 0 !important; border: 0 !important; box-shadow: none !important; }
.fold .fold__hidden-title { display: none; }
.pc-share__row { grid-template-columns: repeat(2, 1fr); }

/* K-pop postcard: the stamp box now covers the template's stamp fully, colored frame, bigger art */
.sk-post__stamp { left: 4.4%; top: 9.5%; width: 38%; height: 81%; border: 1.2cqw solid var(--c); border-radius: 2cqw; background: #FFFFFF; box-shadow: 0 0 0 .5cqw #FFFFFF; }
.sk-post__stamp img { width: 98%; height: 98%; }
.sk-post__text { left: 46%; }
.sk-post__title { font-size: 6.6cqw; white-space: nowrap; }

/* ---------- Travel postcard skin ---------- */
.skin--trippostcard { container-type: inline-size; }
.skin__goldbadge { display: inline-block; margin: 0 0 12px; padding: 6px 14px; border-radius: 999px; background: linear-gradient(135deg, #FFE38A, #F2B33D); border: 2px solid #B07A10; font-weight: 800; font-size: 14px; color: #5A3B00; }
.sk-trip { width: min(100%, 360px); padding: 5cqw 5cqw 4cqw; border-radius: 10px; background: #FFFDF6; border: 2px solid var(--line); outline: 1.4cqw dashed var(--band); outline-offset: -4.4cqw; display: grid; gap: 2.4cqw; text-align: left; }
.sk-trip__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 3cqw; }
.sk-trip__greet { display: grid; gap: .6cqw; min-width: 0; padding: 1.5cqw 0 0 1.5cqw; }
.sk-trip__greet small { font-weight: 700; font-size: 3.4cqw; color: #6E5D55; }
.sk-trip__region { font-family: var(--f-hand); font-weight: 800; font-size: 7.4cqw; line-height: 1.05; letter-spacing: -.025em; color: var(--band); }
.sk-trip__ko { font-family: "Gaegu", "Noto Sans KR", sans-serif; font-weight: 700; font-size: 6cqw; line-height: 1.1; color: var(--ink); }
.sk-trip__stamp { position: relative; flex: none; width: 19cqw; aspect-ratio: 19 / 22; margin: 1.5cqw 1.5cqw 0 0; display: flex; align-items: center; justify-content: center; background: #FFFFFF; border: .8cqw solid var(--band); box-shadow: 0 0 0 1cqw #FFFFFF, 0 0 0 1.3cqw rgba(58,42,34,.25); }
.sk-trip__stampin { font-size: 10cqw; line-height: 1; font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.sk-trip__pm { position: absolute; left: -8cqw; bottom: -6cqw; width: 17cqw; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: .5cqw solid rgba(46,33,27,.6); border-radius: 50%; transform: rotate(-14deg); }
.sk-trip__pm i { font-style: normal; font-weight: 800; font-size: 2.5cqw; color: rgba(46,33,27,.75); }
.sk-trip__art { justify-self: center; width: 70%; aspect-ratio: 1; display: flex; align-items: flex-end; justify-content: center; border-radius: 5cqw; background: color-mix(in srgb, var(--band) 16%, #FFFFFF); overflow: hidden; container-type: inline-size; }
.sk-trip__art img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.sk-trip__art .skin-emo { align-self: center; font-size: 50cqw; }
.sk-trip__band { margin: 0 1cqw; padding: 2.2cqw 3cqw; background: var(--band); color: #FFFFFF; text-align: center; font-family: var(--f-hand); font-weight: 800; font-size: 5.6cqw; line-height: 1.12; letter-spacing: -.02em; }
.sk-trip__layer { margin: 0; text-align: center; font-family: "Noto Sans KR", sans-serif; font-weight: 900; font-size: 4.6cqw; color: var(--ink); }
.sk-trip__to { margin: 0 0 0 2cqw; font-family: "Gaegu", var(--f-hand); font-weight: 700; font-size: 5.6cqw; color: var(--ink); }
.sk-trip__nick { display: grid; gap: 4px; width: min(100%, 360px); margin: 16px auto 0; font-size: 13px; font-weight: 800; color: var(--muted); text-align: left; }
.sk-trip__nick input { min-height: 44px; padding: 0 12px; border: 2px solid var(--line); border-radius: 12px; font: 700 16px var(--f-body); color: var(--ink); background: #FFFFFF; }
.route__day { margin: 10px 0 0; padding: 10px 12px; border: 2px solid #E7E0DA; border-radius: var(--r-md); }
.route__h { margin: 0 0 6px; font-weight: 800; }
.route__stops { margin: 0; padding-left: 20px; display: grid; gap: 3px; font-size: 14.5px; line-height: 1.45; }
.big3__sub { margin: -4px 0 10px; font-size: 14.5px; }
.big3__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.45; }
.big3__tip { margin: 12px 0 0; padding: 10px 12px; border: 2px dashed #E0B400; border-radius: 12px; background: #FFF6CC; font-size: 14px; font-weight: 700; }
.tload--meadow { margin: 0 -16px; padding: 30px 16px; min-height: 60vh; background: #E5F6DD; border-radius: 0 0 24px 24px; }
.tload--meadow .tload__bar span { background: linear-gradient(90deg, #8FD39B, #3FAE5E); }
.sk-trip__stampimg { width: 88%; height: 88%; object-fit: contain; }

/* off-screen frame used to render the saved image */
.snapwrap { position: fixed; left: -10000px; top: 0; z-index: -1; pointer-events: none; }
.snap { position: relative; padding: 22px 18px 18px; background: #FFFFFF; }
.snap > * { margin-left: 0 !important; margin-right: 0 !important; }
.snap .skin__card, .snap .pc__card { transform: rotate(-2deg) !important; }
.snap__foot { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 2px dashed #E7E0DA; font-weight: 800; font-size: 13px; color: #6E5D55; }
.snap__foot img { height: 26px; width: auto; }
.snap__foot span { white-space: nowrap; }
.snap .pc__status { white-space: nowrap; }
.ans__note { margin: 0; padding: 0 14px 12px; font-size: 12px; color: var(--muted); text-align: center; }

.snap--card { padding: 14px; }
.snap--card .skin__card { transform: none !important; box-shadow: none !important; max-width: none !important; margin: 0 !important; }
/* illustration cards: soft white sheen only (the rainbow layer tinted light cards pink) */
.sk-food .skin__holo { mix-blend-mode: soft-light; opacity: .55; background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.9), rgba(255,255,255,0) 40%); background-size: 100% 100%; }
.snap--card .snap__sec { margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
.sk-food__chip, .sk-food__foot b, .sk-food__score { white-space: nowrap; }

/* About this quiz (cover page, below the tags) */
.about { margin: 22px 0 6px; padding: 16px 16px 6px; border-top: 2px dashed #E7E0DA; text-align: left; }
.about__h { margin: 0 0 8px; font-family: var(--f-hand); font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.about p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: #4A3B33; }
.about__sub { margin: 14px 0 6px; font-weight: 800; font-size: 15px; }
.about__faq { margin: 0 0 8px; }
.about__faq dt { font-weight: 800; font-size: 14.5px; margin-top: 8px; }
.about__faq dd { margin: 2px 0 0; font-size: 14.5px; line-height: 1.55; color: #4A3B33; }

/* compact About: small heading, one visible line, the rest behind "Read more" */
.about { margin: 18px 0 4px; padding: 12px 2px 4px; }
.about__h { font-size: 15px; margin: 0 0 4px; color: var(--muted); }
.about .about__lead, .about__more p { font-size: 14px; line-height: 1.55; color: #6E5D55; margin: 0 0 8px; }
.about__more summary { cursor: pointer; font-size: 13.5px; font-weight: 800; color: #6E5D55; list-style: none; min-height: 32px; display: inline-flex; align-items: center; }
.about__more summary::-webkit-details-marker { display: none; }
.about__more summary::after { content: " \25BE"; margin-left: 4px; }
.about__more[open] summary::after { content: " \25B4"; }