/* 공개 화면. --h(사이트 색) 하나로 전체 색을 정한다. 결과 카드는 결과마다 --ch */
:root {
  --bg: hsl(var(--h) 30% 97%); --surface: #fff; --fg: hsl(var(--h) 25% 14%); --muted: hsl(var(--h) 10% 42%);
  --line: hsl(var(--h) 20% 88%); --accent: hsl(var(--h) 65% 45%); --accent-fg: #fff; --soft: hsl(var(--h) 70% 94%);
  --f-body: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --f-card: "Jua", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: hsl(var(--h) 15% 9%); --surface: hsl(var(--h) 12% 13%); --fg: hsl(var(--h) 15% 92%); --muted: hsl(var(--h) 8% 65%);
    --line: hsl(var(--h) 10% 22%); --accent: hsl(var(--h) 70% 68%); --accent-fg: hsl(var(--h) 30% 10%); --soft: hsl(var(--h) 25% 18%); color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 16px; line-height: 1.65; }
a { color: inherit; }
.top { padding: 14px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); background: var(--surface); }
.logo { font-family: var(--f-card); font-size: 20px; text-decoration: none; color: var(--accent); }
.wrap { max-width: 520px; margin: 0 auto; padding: 20px max(16px, env(safe-area-inset-left)) 40px; display: grid; gap: 16px; }
.foot { max-width: 520px; margin: 0 auto; padding: 24px 16px 40px; color: var(--muted); font-size: 13px; text-align: center; }
.home-h { font-family: var(--f-card); font-weight: 400; font-size: 28px; margin: 8px 0 0; }
.home-tag, .muted { color: var(--muted); margin: 0; font-size: 14px; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.item { display: flex; gap: 12px; align-items: center; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.item:hover { border-color: var(--accent); }
.item .ico { font-size: 34px; width: 56px; height: 56px; display: grid; place-items: center; background: var(--soft); border-radius: 14px; flex: none; }
.item .it { display: grid; min-width: 0; }
.item small { color: var(--muted); font-size: 13px; }
.empty { color: var(--muted); text-align: center; padding: 40px 0; }
.intro { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 26px 20px; display: grid; gap: 12px; text-align: center; }
.intro-ico { font-size: 64px; line-height: 1; }
.intro h1 { font-family: var(--f-card); font-weight: 400; font-size: 28px; margin: 0; line-height: 1.3; }
.intro .sub { color: var(--accent); margin: 0; }
.intro p { margin: 0; }
.field { display: grid; gap: 4px; font-size: 13px; color: var(--muted); text-align: left; }
.field input { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; }
.go { font: inherit; font-weight: 700; font-size: 17px; background: var(--accent); color: var(--accent-fg); border: 0; border-radius: 14px; padding: 15px; cursor: pointer; width: 100%; }
.ghost { font: inherit; font-size: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--fg); border-radius: 12px; padding: 10px; cursor: pointer; text-align: center; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.quiz { display: grid; gap: 12px; }
.progress { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--accent); }
.qn { color: var(--accent); font-size: 14px; font-weight: 700; }
.q { font-size: 21px; line-height: 1.45; margin: 4px 0 8px; }
.opt { font: inherit; text-align: left; background: var(--surface); color: var(--fg); border: 1.5px solid var(--line); border-radius: 16px; padding: 16px; cursor: pointer; }
.opt:hover { border-color: var(--accent); background: var(--soft); }
.back { font: inherit; font-size: 13px; color: var(--muted); background: none; border: 0; cursor: pointer; justify-self: start; }
.loading { text-align: center; padding: 120px 0; color: var(--muted); font-size: 18px; }
.rcard { --ch: 200; aspect-ratio: 2 / 3; width: 100%; border-radius: 22px; overflow: hidden; background: hsl(var(--ch) 70% 94%); color: hsl(var(--ch) 45% 18%);
  display: grid; grid-template-rows: auto auto auto 1fr auto auto; gap: 10px; padding: 20px 16px 12px; font-family: var(--f-card); }
.rcard .lab { font-size: 14px; text-align: center; opacity: .75; }
.rcard .who { font-size: 14px; text-align: center; }
.rcard .head { display: grid; justify-items: center; gap: 6px; }
.rcard .em { width: 110px; height: 110px; border-radius: 50%; background: hsl(var(--ch) 75% 84%); display: grid; place-items: center; font-size: 64px; line-height: 1; }
.rcard .pic { width: 150px; height: 150px; object-fit: cover; border-radius: 20px; }
.rcard .nm { font-size: 30px; line-height: 1.2; text-align: center; }
.rcard .one { font-family: var(--f-body); font-size: 14px; text-align: center; line-height: 1.45; }
.rcard .chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-content: start; }
.rcard .chips span { background: #ffffffcc; color: hsl(var(--ch) 45% 22%); border-radius: 999px; padding: 5px 11px; font-family: var(--f-body); font-size: 13px; }
.rcard .mt { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rcard .mt div { background: #ffffffb3; border-radius: 12px; padding: 8px; display: grid; gap: 2px; text-align: center; }
.rcard .mt small { font-family: var(--f-body); font-size: 11px; opacity: .8; }
.rcard .mt b { font-weight: 400; font-size: 15px; }
.rcard .brand { font-size: 11px; text-align: center; opacity: .6; font-family: var(--f-body); }
.body { font-size: 16px; line-height: 1.8; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.toast { font-size: 14px; color: var(--accent); min-height: 1em; }
.all { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.all button { font: inherit; font-size: 14px; text-align: left; background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: 12px; padding: 9px; cursor: pointer; }
.sec { font-size: 15px; margin: 8px 0 0; }
.rank { display: grid; gap: 6px; font-size: 14px; }
.rank > div { display: grid; grid-template-columns: 22px minmax(0, 1fr) 52px; gap: 6px; align-items: center; }
.rank .bar { display: block; height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; margin-top: 3px; }
.rank .bar span { display: block; height: 100%; background: var(--accent); }
.rank .rk { color: var(--accent); font-weight: 700; }
.rank .pc { text-align: right; font-variant-numeric: tabular-nums; }
.share { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ad { min-height: 60px; }
.allres { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; font-size: 14px; }
.allres summary { cursor: pointer; color: var(--muted); }
.allres ul { padding-left: 18px; }

/* ---- 행동 버튼·연락처·로고 ---- */
.cta { display: block; text-align: center; text-decoration: none; box-sizing: border-box; }
.lead { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box, 16px); padding: 18px; display: grid; gap: 10px; }
.lead .sec { margin: 0; }
.agree { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.agree input { width: 18px; height: 18px; }
.agree-t { font-size: 13px; color: var(--muted); }
.agree-t p { margin: 6px 0 0; }
.skip { justify-self: center; }
.top img { height: 30px; width: auto; display: block; }
.rcard .brand img { height: 14px; width: auto; vertical-align: -2px; margin-right: 4px; }

/* ---- 디자인 부품 (functions/_lib/theme.ts). <html data-*> 로 고른다 ---- */
/* 색 분위기 */
[data-tone="vivid"] { --bg: hsl(var(--h) 60% 96%); --accent: hsl(var(--h) 85% 48%); --soft: hsl(var(--h) 90% 92%); }
[data-tone="calm"] { --bg: hsl(var(--h) 12% 96%); --accent: hsl(var(--h) 35% 40%); --soft: hsl(var(--h) 20% 92%); --line: hsl(var(--h) 10% 86%); }
[data-tone="cream"] { --bg: hsl(40 45% 95%); --surface: hsl(40 60% 99%); --accent: hsl(var(--h) 55% 42%); --line: hsl(35 25% 86%); --fg: hsl(30 20% 16%); }
[data-tone="mono"] { --bg: #f5f5f5; --fg: #141414; --muted: #555; --line: #d9d9d9; --soft: #ececec; --accent: hsl(var(--h) 80% 45%); }
[data-tone="dark"] { --bg: hsl(var(--h) 18% 8%); --surface: hsl(var(--h) 14% 13%); --fg: hsl(var(--h) 15% 92%); --muted: hsl(var(--h) 8% 66%);
  --line: hsl(var(--h) 10% 22%); --accent: hsl(var(--h) 75% 66%); --accent-fg: hsl(var(--h) 30% 10%); --soft: hsl(var(--h) 25% 18%); color-scheme: dark; }
/* 배경 무늬 */
[data-bg="dots"] body { background-image: radial-gradient(hsl(var(--h) 40% 50% / .14) 1.2px, transparent 1.4px); background-size: 18px 18px; }
[data-bg="grid"] body { background-image: linear-gradient(hsl(var(--h) 40% 50% / .08) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--h) 40% 50% / .08) 1px, transparent 1px); background-size: 24px 24px; }
[data-bg="grad"] body { background-image: linear-gradient(180deg, hsl(var(--h) 70% 50% / .16), transparent 480px); }
[data-bg="stripe"] body { background-image: repeating-linear-gradient(135deg, hsl(var(--h) 40% 50% / .06) 0 12px, transparent 12px 24px); }
[data-bg="blob"] body { background-image: radial-gradient(circle at 10% 8%, hsl(var(--h) 80% 60% / .16), transparent 220px), radial-gradient(circle at 92% 30%, hsl(calc(var(--h) + 40) 80% 60% / .14), transparent 260px); background-attachment: fixed; }
/* 카드 모양 (목록·시작·본문·결과 카드) */
[data-card="square"] { --r-box: 4px; }
[data-card="square"] .item, [data-card="square"] .intro, [data-card="square"] .body, [data-card="square"] .rcard, [data-card="square"] .allres, [data-card="square"] .item .ico { border-radius: 4px; }
[data-card="shadow"] .item, [data-card="shadow"] .intro, [data-card="shadow"] .body, [data-card="shadow"] .lead { border-color: transparent; box-shadow: 0 6px 22px hsl(var(--h) 30% 20% / .10); }
[data-card="outline"] .item, [data-card="outline"] .intro, [data-card="outline"] .body, [data-card="outline"] .lead, [data-card="outline"] .opt { border: 2px solid var(--fg); }
[data-card="outline"] .rcard { border: 3px solid hsl(var(--ch) 45% 18%); }
[data-card="ticket"] .item, [data-card="ticket"] .intro, [data-card="ticket"] .body, [data-card="ticket"] .lead { border: 2px dashed var(--accent); }
[data-card="ticket"] .rcard { outline: 2px dashed hsl(var(--ch) 45% 40%); outline-offset: -10px; }
/* 버튼 모양 */
[data-btn="pill"] .go, [data-btn="pill"] .ghost, [data-btn="pill"] .opt { border-radius: 999px; }
[data-btn="square"] .go, [data-btn="square"] .ghost, [data-btn="square"] .opt { border-radius: 3px; }
[data-btn="pop"] .go { border: 2px solid var(--fg); box-shadow: 4px 4px 0 var(--fg); border-radius: 10px; }
[data-btn="pop"] .go:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--fg); }
[data-btn="pop"] .opt, [data-btn="pop"] .ghost { border: 2px solid var(--fg); box-shadow: 3px 3px 0 var(--fg); }
/* 목록 배치 */
[data-list="grid"] .list:not(.res-list) { grid-template-columns: 1fr 1fr; }
[data-list="grid"] .item { flex-direction: column; text-align: center; }
[data-list="grid"] .item small { display: none; }
[data-list="big"] .item { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; }
[data-list="big"] .item .ico { width: 100%; height: 120px; font-size: 64px; border-radius: 0; }
[data-list="big"] .item .it { padding: 0 16px 14px; }
[data-list="compact"] .list { gap: 0; }
[data-list="compact"] .item { border-radius: 0; border-width: 0 0 1px; background: transparent; padding: 10px 4px; }
[data-list="compact"] .item .ico { width: 36px; height: 36px; font-size: 22px; }
/* 머리글 */
[data-head="center"] .top { text-align: center; }
[data-head="center"] .top img { margin: 0 auto; }
[data-head="band"] .top { background: var(--accent); border: 0; }
[data-head="band"] .logo { color: var(--accent-fg); }
.gift { display: grid; gap: 8px; text-align: center; }
.gift .go { text-decoration: none; display: block; }

/* 머리글 메뉴·바닥글·내용 페이지 */
.top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.menu { display: flex; gap: 4px 14px; flex-wrap: wrap; font-size: 14px; margin-left: auto; }
.menu a { text-decoration: none; color: var(--fg); padding: 4px 0; }
.menu a:hover { color: var(--accent); }
[data-head="center"] .top { justify-content: center; flex-direction: column; gap: 6px; }
[data-head="center"] .menu { margin-left: 0; justify-content: center; }
[data-head="band"] .menu a { color: var(--accent-fg); }
.foot .links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.foot .links a { color: var(--muted); }
.foot .biz { font-size: 12px; line-height: 1.7; }
.doc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box, 16px); padding: 22px 20px; line-height: 1.8; }
.doc h1 { font-family: var(--f-card); font-weight: 400; font-size: 26px; margin: 0 0 10px; }
.doc h2 { font-size: 17px; margin: 22px 0 6px; }
.doc p { margin: 0 0 10px; }
.doc ul { margin: 0 0 10px; padding-left: 20px; }
.doc .upd { color: var(--muted); font-size: 13px; }

/* 제목 글꼴이 프리텐다드일 때만 굵게 — 주아·도현 같은 장식 글꼴은 굵기 하나뿐이라 400 이 정상 */
:root:has(link[href*="pretendard"]) .intro h1, :root:has(link[href*="pretendard"]) .home-h { font-weight: 800; }