/* 공개 화면. --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;
  /* 모서리는 두 가지만: 상자 --r-box, 버튼·입력 --r-btn (디자인 부품이 덮어쓴다) */
  --r-box: 16px; --r-btn: 12px;
}
@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;
  word-break: keep-all; overflow-wrap: break-word; }
h1, h2, h3, .q, .nm, .home-h, .item b, .item strong { text-wrap: balance; }
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: var(--r-box); 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: var(--r-btn); flex: none; }
.item .it { display: grid; min-width: 0; }
.item small { color: var(--muted); font-size: 13px; }
.item .meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.empty { color: var(--muted); text-align: center; padding: 40px 0; }
.intro { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box); padding: 24px 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: var(--r-btn); padding: 12px; min-height: 48px; font-size: 16px; }
.go { font: inherit; font-weight: 700; font-size: 17px; background: var(--accent); color: var(--accent-fg); border: 0; border-radius: var(--r-btn); 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: var(--r-btn); 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: 8px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); border-radius: 999px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .4s cubic-bezier(.2,.8,.2,1); }
.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: var(--r-btn); padding: 16px; cursor: pointer; }
/* 보기: 누르면 살짝 눌리고(K6), 고른 보기는 색이 찬다. 호버는 마우스 기기에서만 — 폰에선 누른 자리에 남는다 */
.opt { transition: transform .15s, background-color .15s, border-color .15s; }
.opt:active { transform: scale(.97); }
.opt.on { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); }
@media (hover: hover) { .opt:hover { border-color: var(--accent); background: var(--soft); } }
/* 다음 문항은 오른쪽에서, 이전 문항은 왼쪽에서 밀려 들어온다(E6) */
.quiz { animation: q-in .35s cubic-bezier(.2,.8,.2,1); }
.quiz.rev { animation-name: q-back; }
@keyframes q-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes q-back { from { opacity: 0; transform: translateX(-24px); } }
.in-quiz .allres { display: none; }
.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: var(--r-box); 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: var(--r-box); }
.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: var(--r-btn); 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: var(--r-box); padding: 18px; }
.btns { display: flex; justify-content: center; gap: 24px; }
.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: var(--r-btn); 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: 999px; 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(auto-fit, minmax(0, 1fr)); gap: 8px; }
/* 결과 화면 공유 칸: 큰 버튼 하나 + 작은 버튼 줄. 행동 버튼(cta)이 따로 있으면 큰 버튼은 테두리만(.line) */
.sharebox { display: grid; gap: 8px; margin-top: 8px; }
.go.line { background: var(--surface); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.go.kakao { background: #fee500; color: #191919; }
/* 이미지 저장·모든 결과·다시 하기는 보조라 글자 버튼으로 낮춘다 */
.btns .ghost { background: none; border-color: transparent; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.btns .ghost:hover { color: var(--fg); }
.go, .ghost { transition: transform .15s, background-color .15s; }
.go:active, .ghost:active { transform: scale(.97); }
.ad { min-height: 60px; }
.allres { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box); 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); 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; --r-btn: 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"] { --r-btn: 999px; }
[data-btn="pill"] .go, [data-btn="pill"] .ghost, [data-btn="pill"] .opt { border-radius: 999px; }
[data-btn="square"] { --r-btn: 3px; }
[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); padding: 24px 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; }
.ghost.kakao { background: #fee500; color: #191919; border-color: #fee500; font-weight: 700; }

/* 움직임 줄이기를 켠 사람에게는 모든 모션을 끈다(웹디자인 패턴 0절) */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---- 홈 목록 (10-30) ---- */
/* 카드 높이를 줄마다 맞추고, 처음 열 때 0.08초 간격으로 차례로 뜬다(E4). 움직임 줄이기면 위 전역 규칙이 끈다 */
.home-list > li { display: grid; animation: card-in .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(16px); } }
@media (hover: hover) {
  .home-list .item { transition: transform .15s, border-color .15s; }
  .home-list .item:hover { transform: translateY(-2px); }
}
/* PC·태블릿에서는 홈만 넓게 펴서 3~4칸으로(I1). 검사 화면은 읽기 좋게 520px 그대로 */
@media (min-width: 768px) {
  .wrap.wide { max-width: 1120px; }
  .wide .home-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
  [data-list="grid"] .wide .home-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  [data-list="big"] .wide .home-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  [data-list="compact"] .wide .home-list { gap: 0 24px; }
  .wide .home-h { font-size: 34px; }
}

/* 홈 큰 문구: 두 줄 대구, 둘째 줄이 약속이라 강조색(O1) */
.home-h.hero { font-size: 32px; line-height: 1.25; letter-spacing: -0.02em; margin: 16px 0 4px; }
.home-h.hero .em { color: var(--accent); }
@media (min-width: 768px) {
  .wide .home-h.hero { font-size: 48px; margin-top: 32px; }
  /* 넓은 홈에서는 로고를 내용 왼쪽 줄에 맞춘다 */
  .is-wide .top { padding-inline: max(16px, calc((100% - 1120px) / 2 + 16px)); }
}

/* ---- 결과 화면 아래: 비슷한 테스트·결과 유형 목록 (10-30) ---- */
/* 비슷한 테스트는 홈 카드와 같은 모양(그림 글자·문항 수). 같은 줄 높이 맞춤 */
.others > li { display: grid; }
.others .item .ico { width: 48px; height: 48px; font-size: 28px; }
[data-list="grid"] .others .item { gap: 8px; padding: 16px 12px; }
/* 결과 유형 목록: 점 목록 대신 그림 글자 칸 + 이름 + 한 줄 설명 */
.allres { padding: 0; }
.allres summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px; color: var(--fg); font-weight: 600; }
.allres summary::-webkit-details-marker { display: none; }
.allres summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; flex: none; margin-top: -4px; }
.allres[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.allres ul { list-style: none; margin: 0; padding: 0 16px 16px; display: grid; gap: 8px; }
.allres li { display: flex; gap: 12px; align-items: center; padding-top: 8px; border-top: 1px solid var(--line); }
.allres li:first-child { border-top: 0; padding-top: 0; }
.allres .re { width: 40px; height: 40px; flex: none; display: grid; place-items: center; font-size: 22px; background: var(--soft); border-radius: var(--r-btn); }
.allres .rt { display: grid; min-width: 0; line-height: 1.45; }
.allres .rt b { font-weight: 600; }
.allres .rt small { color: var(--muted); font-size: 13px; }
/* 결과 화면에서는 결과 유형 줄을 누르면 그 결과로(「모든 결과 보기」를 겸한다) */
.in-result .allres li[data-r] { cursor: pointer; border-radius: var(--r-btn); }
.in-result .allres li[data-r]::after { content: "보기"; margin-left: auto; flex: none; font-size: 12px; color: var(--accent); }
.in-result .allres li[aria-current="true"] .rt b { color: var(--accent); }
.in-result .allres li[aria-current="true"]::after { content: "지금 결과"; color: var(--muted); }
@media (hover: hover) { .in-result .allres li[data-r]:hover .rt b { color: var(--accent); } }

/* ---- 홈 꾸미기 블록 (functions/_lib/blocks.ts, 10-30) ---- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.blk { display: grid; gap: 12px; }
.blk-h { font-size: 20px; margin: 8px 0 0; letter-spacing: -0.02em; }
.blk-hero { gap: 8px; }
.hero-btn { justify-self: start; width: auto; padding: 14px 28px; text-decoration: none; margin-top: 8px; }
/* 분류 칩(B1): 실제 주소 /?cat= 라 로봇도 따라간다. 넘치면 가로로 밀어 본다 */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chips a { flex: none; text-decoration: none; font-size: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); }
.chips a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; }
/* 추천: 같은 카드를 크게 */
.feat .item { padding: 20px; }
.feat .item .ico { width: 64px; height: 64px; font-size: 38px; }
.feat .item b { font-size: 18px; }
/* 배너: 그림 + 글. 그림은 가로로 꽉, 글은 아래 */
.banner { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box); overflow: hidden; gap: 0; text-decoration: none; color: inherit; }
.banner img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.banner .bn-t { display: grid; gap: 4px; padding: 16px 20px; }
.banner .bn-t b { font-size: 18px; }
.banner .bn-t span { color: var(--muted); font-size: 14px; }
.banner .bn-btn { justify-self: start; margin-top: 6px; color: var(--accent) !important; font-weight: 700; font-size: 15px !important; }
@media (hover: hover) { a.banner { transition: transform .15s; } a.banner:hover { transform: translateY(-2px); } }
.tbox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box); padding: 24px 20px; line-height: 1.8; gap: 0; }
.tbox .blk-h { margin: 0 0 8px; }
.tbox h2 { font-size: 17px; margin: 16px 0 4px; }
.tbox p { margin: 0 0 8px; }
.tbox ul { margin: 0 0 8px; padding-left: 20px; }
.contact .row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.contact .go { text-decoration: none; text-align: center; }
@media (min-width: 768px) {
  .wide .tbox, .wide .contact { max-width: 720px; }
  .wide .banner { grid-template-columns: 1.4fr 1fr; align-items: center; }
  .wide .banner img { aspect-ratio: 2 / 1; }
}

/* ---- 결과 카드 템플릿 (<html data-rcard>, 10-30) ----
   저장 그림(html2canvas)에 그대로 나와야 해서 그라데이션·테두리·의사요소만 쓴다. 색은 결과마다 --ch */
/* 포스터: 진한 그라데이션 + 흰 글자 + 큰 이름. 인스타 스토리에 올리기 좋게 */
[data-rcard="poster"] .rcard { background: linear-gradient(160deg, hsl(var(--ch) 70% 44%), hsl(calc(var(--ch) + 40) 65% 30%)); color: #fff; }
[data-rcard="poster"] .rcard .em { background: hsl(0 0% 100% / .18); }
[data-rcard="poster"] .rcard .nm { font-size: 34px; letter-spacing: -0.02em; }
[data-rcard="poster"] .rcard .chips span { background: hsl(0 0% 100% / .16); color: #fff; }
[data-rcard="poster"] .rcard .mt div { background: hsl(0 0% 100% / .14); }
[data-rcard="poster"] .rcard .brand, [data-rcard="poster"] .rcard .lab { opacity: .85; }
/* 폴라로이드: 흰 테두리 + 위쪽 사진 칸 + 해시태그 */
[data-rcard="polaroid"] .rcard { background: #fff; color: #1d1d1f; padding: 14px 14px 16px; border: 1px solid hsl(var(--ch) 20% 86%); box-shadow: 0 10px 28px hsl(var(--ch) 30% 20% / .14); }
[data-rcard="polaroid"] .rcard .head { gap: 10px; }
[data-rcard="polaroid"] .rcard .em, [data-rcard="polaroid"] .rcard .pic { width: 100%; height: 120px; border-radius: 4px; background: hsl(var(--ch) 70% 88%); font-size: 64px; }
[data-rcard="polaroid"] .rcard .lab { order: 0; }
[data-rcard="polaroid"] .rcard .chips span { background: none; padding: 0 4px; color: hsl(var(--ch) 45% 38%); }
[data-rcard="polaroid"] .rcard .chips span::before { content: "#"; }
[data-rcard="polaroid"] .rcard .mt div { background: hsl(var(--ch) 60% 96%); }
/* 성적표: 종이색 + 굵은 테두리 + 왼쪽 정렬 줄 목록 + 도장 */
[data-rcard="report"] .rcard { background: #fffdf6; color: #222; border: 2px solid #222; border-radius: 6px; text-align: left; padding: 18px 18px 14px; gap: 8px; }
[data-rcard="report"] .rcard .lab { text-align: left; font-size: 15px; opacity: 1; padding-bottom: 8px; border-bottom: 3px double #222; }
[data-rcard="report"] .rcard .who { text-align: left; color: #666; }
[data-rcard="report"] .rcard .head { grid-template-columns: auto 1fr; justify-items: start; align-items: center; column-gap: 14px; }
[data-rcard="report"] .rcard .em, [data-rcard="report"] .rcard .pic { grid-row: span 2; width: 76px; height: 76px; border-radius: 8px; font-size: 44px; background: hsl(var(--ch) 70% 90%); }
[data-rcard="report"] .rcard .nm, [data-rcard="report"] .rcard .one { text-align: left; }
[data-rcard="report"] .rcard .nm { font-size: 26px; }
[data-rcard="report"] .rcard .chips { display: grid; gap: 0; justify-content: stretch; }
[data-rcard="report"] .rcard .chips span { background: none; border-radius: 0; padding: 8px 2px; border-bottom: 1px dashed #bbb; color: #222; }
[data-rcard="report"] .rcard .chips span::before { content: "✔ "; color: hsl(var(--ch) 60% 40%); }
[data-rcard="report"] .rcard .mt div { background: none; border: 1px solid #222; border-radius: 4px; }
[data-rcard="report"] .rcard .brand { text-align: right; opacity: .8; }
[data-rcard="report"] .rcard .brand::before { content: "발행 · "; }
/* 관리자 미리 보기에서 방금 바꾼 칸 표시(1.2초) */
.pv-flash { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: var(--r-box); }

/* ---- 큰 카드 목록 다듬기·로고 (10-30 데모 꾸미기) ---- */
.logo { font-weight: 700; letter-spacing: -0.02em; }
/* 큰 카드 테마에서는 추천 카드도 같은 그림 띠로 */
[data-list="big"] .feat .item .ico { width: 100%; height: 150px; font-size: 80px; }
[data-list="big"] .feat .item { padding: 0; }
/* 폰: 추천은 옆으로 넘겨 보기(G3), 전체 목록 큰 카드는 2칸 + 낮은 그림 띠 */
@media (max-width: 767px) {
  .feat { grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 12px; }
  .feat::-webkit-scrollbar { display: none; }
  .feat > li { scroll-snap-align: start; }
  [data-list="big"] .blk-list .home-list, [data-list="big"] .others { grid-template-columns: 1fr 1fr; gap: 10px; }
  [data-list="big"] .blk-list .item .ico, [data-list="big"] .others .item .ico { height: 88px; font-size: 48px; }
  [data-list="big"] .blk-list .item .it, [data-list="big"] .others .item .it { padding: 0 12px 12px; }
  [data-list="big"] .blk-list .item b, [data-list="big"] .others .item b { font-size: 15px; line-height: 1.35; }
  [data-list="big"] .blk-list .item small { display: none; }
}
/* 비슷한 테스트(결과 화면)도 큰 카드 테마면 그림 띠로 */
[data-list="big"] .others .item .ico { width: 100%; height: 110px; font-size: 56px; border-radius: 0; }
[data-list="big"] .others .item { padding: 0; overflow: hidden; }

/* ---- 결과 본문 읽기 쉽게 (player.js bodyHtml, 10-30) ---- */
.rbody { font-size: 16.5px; line-height: 1.85; padding: 24px 20px; display: grid; gap: 16px; }
.rbody p { margin: 0; }
.rbody .r-lead { font-size: 19px; line-height: 1.55; font-weight: 700; letter-spacing: -0.01em; padding-bottom: 16px; border-bottom: 1px dashed var(--line); }
.rbody .r-lead::before { content: "“"; color: var(--accent); font-size: 1.4em; margin-right: 2px; }
.rbody .pi { display: inline-block; margin-right: 8px; font-size: 1.05em; }
.rbody .close { background: var(--soft); border-radius: var(--r-btn); padding: 14px 16px; font-weight: 600; display: flex; gap: 10px; align-items: flex-start; }
.rbody .close span { flex: none; }