:root {
  --fs-body: 18px;
  --fs-muted: calc(var(--fs-body) - 2px);
  --fs-title: calc(var(--fs-body) + 2px);
  --fs-today: calc(var(--fs-body) + 4px);
  --lh: 1.7;
  --para-gap: calc(var(--fs-body) * var(--lh) * 3);
  --aubergine: #17141A; /* 글자·테두리. 보라 아님 (Ethan 2026-09-21: 보라 전부 제거) */
  --lilac: var(--ice);
  --sky: #9EB5DD; /* 천사 하늘색 — Ethan 2026-09-21 "보라는 9EB5DD로"·2026-09-26 "컬러는 9EB5DD" */
  --sky-dark: color-mix(in srgb, var(--sky) 65.99%, #000); /* 흰 바탕 작은 글자용, 4.50:1 */
  --gap-s: 8px;
  --gap-m: 16px;
  --gap-l: 28px; /* 마진 기준: 요소 사이 s, 블럭 사이 m, 구역 사이 l */
  --lime: var(--sky); /* 초록 없음 — Ethan 2026-09-26 "색깔은 9EB5DD" (옛 이름만 남김) */
  --butter: var(--sky); /* 노랑 없음 — 같은 이유 */
  --lime-soft: color-mix(in srgb, var(--lime) 45%, #fff);
  --butter-soft: color-mix(in srgb, var(--butter) 45%, #fff);
  --ice: color-mix(in srgb, var(--sky) 45%, #fff);
  --blush: #f9d9e3;
  --pink: #EE267F;
  --red: #EE267F; /* 악마기니는 핫핑크, 천사기니는 선명한 하늘색 */
  --red-bg: #FFF0F6;
  --card-radius: 22px;
  color-scheme: light;
}
* { box-sizing: border-box; }
input, button, textarea { min-width: 0; }
body { overflow-wrap: anywhere; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Pretendard Variable", "Pretendard", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color: var(--aubergine);
  font-size: var(--fs-body);
  line-height: var(--lh);
  letter-spacing: -0.02em;
  /* 점박이 배경 (Ethan 2026-09-22 7차: 격자 줄보다 점박이가 페르소나에 맞다). 핑크 위에 옅은 점을 엇갈려 두 겹. */
  background:
    radial-gradient(circle, #f3d3dc 2.6px, transparent 3.2px) 0 0 / 30px 30px,
    radial-gradient(circle, #f3d3dc 2.6px, transparent 3.2px) 15px 15px / 30px 30px,
    #fbeef2;
  min-height: 100vh;
}
.frame { max-width: 1180px; margin: 0 auto; display: flex; gap: 32px; padding: 24px; align-items: flex-start; }
.side-note { display: none; }
.phone {
  flex: 1;
  min-width: 0;
  background: #fffdf9;
  border-radius: 28px;
  min-height: 80vh;
  box-shadow: 0 18px 46px rgba(23, 20, 26, 0.14);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (min-width: 900px) {
  .frame { padding: 48px 24px; gap: 70px; }
  .side-note { display: flex; flex-direction: column; gap: 22px; flex: 0 0 420px; padding: 70px 8px 24px; }
  .side-note h1 { font-size: calc(var(--fs-body) + 28px); line-height: var(--lh); letter-spacing: -0.02em; margin: 0; white-space: pre-line; }
  .side-note .value { font-size: var(--fs-body); color: #55535B; line-height: var(--lh); margin: 0; max-width: 350px; }
  .side-note .steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .side-note .steps li { display: flex; gap: 10px; align-items: baseline; font-size: var(--fs-body); color: #55535B; }
  .side-note .steps i { font-weight: 800; color: var(--sky-dark); }
  .phone { max-width: 430px; min-height: 800px; margin: 0 auto; }
}
@media (max-width: 599px) { .frame { padding: 0; } .phone { border-radius: 0; min-height: 100dvh; box-shadow: none; } }

.screen { padding: 28px 18px 48px; flex: 1; display: flex; flex-direction: column; gap: var(--gap-m); }
h1 { font-size: var(--fs-title); margin: 2px 0 0; font-weight: 800; line-height: var(--lh); }
h2 { font-size: var(--fs-title); margin: 0 0 8px; font-weight: 800; }
h3 { font-size: var(--fs-title); margin: 0; font-weight: 800; line-height: var(--lh); }
h4 { margin: 0 0 4px; font-size: var(--fs-title); }
p { line-height: var(--lh); margin: 0; }
.muted { color: #6F6A75; font-size: var(--fs-muted); }
ul.plain { margin: 0; padding-left: 18px; }
ul.plain li { margin-bottom: 4px; font-size: var(--fs-body); line-height: var(--lh); }

/* 기니피그 그림. 흰 배경 사진이라 곱하기 혼합으로 바탕에 붙인다. */
.gp { mix-blend-mode: multiply; flex: none; border-radius: 50%; object-fit: cover; }
.gp-hero { width: 128px; height: 128px; }
.hero { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 6px 0 4px; }
.hero .muted { max-width: 300px; }

.button {
  border: none; border-radius: 16px; padding: 14px 18px; font-size: var(--fs-body); font-weight: 700;
  min-height: 48px; cursor: pointer; background: var(--lime); color: #17141A; font-family: inherit; letter-spacing: inherit;
}
.button.secondary { background: #F1F1F4; color: var(--aubergine); }
.button:disabled { opacity: 0.55; cursor: default; }
.button.full { width: 100%; }
textarea:focus, .alias-input:focus, .text-btn:focus-visible, .ox:focus-visible, .tier:focus-visible, .button:focus-visible, .chip:focus-visible, .service-card:focus-visible { outline: 3px solid var(--sky-dark); outline-offset: 2px; }

.composer-area { flex: 1; display: flex; flex-direction: column; gap: 10px; }
textarea {
  flex: 1; min-height: 170px; min-width: 0; width: 100%; border: 2px solid var(--lilac); border-radius: 18px; padding: 14px;
  font: inherit; font-size: var(--fs-body); letter-spacing: inherit; resize: vertical; background: var(--lime-soft);
}

.progress { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; flex: 1; padding: 40px 0; }
.progress .spinner { width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--lilac); border-top-color: var(--sky-dark); animation: spin 0.9s linear infinite; }
/* 바퀴 안 기니피그는 같이 돌지 않는다 */
.progress .spinner.gp-spin { position: relative; width: 56px; height: 56px; }
.progress .spinner.gp-spin img { position: absolute; inset: 4px; width: 40px; height: 40px; animation: spin 0.9s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .progress .spinner { animation: none; } }
.progress.waiting { display: grid; justify-items: center; gap: 12px; padding: 20px 0; }
.progress.waiting .muted { text-align: center; }

.report-opening { background: linear-gradient(135deg, var(--butter-soft), var(--ice)); border-radius: var(--card-radius); padding: 16px; display: flex; gap: 12px; align-items: flex-start; }
.report-opening p { margin-top: 2px; }
.section { background: #fff; border: 1px solid #ECECF0; border-radius: var(--card-radius); }
.section > summary, .section > .section-head { list-style: none; padding: 14px 16px; min-height: 44px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 800; }
.section > .section-head { cursor: default; }
.section > summary::-webkit-details-marker { display: none; }
.section summary::after { content: '+'; margin-left: 8px; }
.section[open] > summary::after { content: '−'; }
.section-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; line-height: var(--lh); overflow-wrap: anywhere; }
.claim-box { background: var(--butter-soft); border-radius: 14px; padding: 10px 12px; }
.claim-box h4 { margin-bottom: 2px; }

/* 종합 판정 점수 막대 */
.bar { display: flex; height: 24px; border-radius: 999px; overflow: hidden; background: #f1e6ee; }
.bar .a { background: var(--sky); }
.bar .d { background: var(--red); }

/* 지지·반박 카드 */
.section.angel { background: var(--ice); } /* 천사 = 하늘 배경 (Ethan 2026-09-22) */
.section.devil { background: var(--red-bg); }
.section h3 { font-size: var(--fs-title); }
.section .say { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-body); line-height: var(--lh); background: #fff; border-radius: 14px; padding: 10px 12px; }
.section .say img { flex: none; border-radius: 50%; object-fit: cover; }
.plan { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: var(--fs-body); line-height: var(--lh); margin: 0; }
.plan dt { font-weight: 800; color: #55535B; }
.plan dd { margin: 0; }
.said { margin: 0; padding: 10px 12px; border-left: 3px solid var(--lime); background: var(--lime-soft); border-radius: 0 12px 12px 0; }
.said p { font-size: var(--fs-body); line-height: var(--lh); }
.link-line { font-size: var(--fs-body); font-weight: 800; color: var(--sky-dark); }

.chatlog { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: #F1F1F4; }
.chat-bubble { border-radius: 14px; padding: 10px 12px; font-size: var(--fs-body); max-width: 88%; line-height: var(--lh); }
.chat-bubble.user { align-self: flex-end; background: var(--lime-soft); }
.chat-bubble.ai { align-self: flex-start; background: #fff; }
.composer-inline { display: flex; gap: 8px; padding: 10px 16px 16px; }
.composer-inline textarea { min-height: 44px; flex: 1; }

.bottom-actions {
  position: sticky; bottom: 0; background: #fffdf9; padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #ECECF0; display: flex; gap: 10px;
}
.error { color: #a4123f; background: #ffe3ea; border-radius: 12px; padding: 10px 12px; font-size: var(--fs-body); }
.safety-box { background: #ffe3ea; border-radius: var(--card-radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.safety-box a { display: block; background: #fff; border-radius: 12px; padding: 10px 12px; text-decoration: none; color: var(--aubergine); font-weight: 700; }

/* 캡처 첨부 */
.shots-block { margin: 0 0 4px; }
.shots-drop {
  display: grid; gap: 4px; padding: 14px; cursor: pointer; text-align: center;
  border: 1.5px dashed rgba(23,20,26,.25); border-radius: 14px; background: var(--lime-soft);
}
.shots-drop.over { border-color: var(--pink); background: rgba(255,79,122,.08); }
.shots-drop .muted { font-size: var(--fs-body); line-height: var(--lh); }
.shots-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.shot { position: relative; margin: 0; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; background: var(--lime-soft); }
.shot:first-child { width: 132px; height: 132px; }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-x {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(23,20,26,.7); color: #fff; font-size: var(--fs-body); line-height: 1;
}
.shot-more {
  width: 84px; height: 132px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--lime-soft); color: var(--aubergine); font-size: var(--fs-title); font-weight: 700;
}

/* 뒤로 가기 */
.back-bar { display: flex; align-items: center; gap: 8px; margin: -4px 0 4px; }
.back-btn { min-width: 44px; min-height: 44px; border: 0; background: transparent; font-size: var(--fs-today); line-height: 1; cursor: pointer; border-radius: 12px; }
.back-btn:hover { background: rgba(23,20,26,.06); }
.back-title { font-size: var(--fs-body); opacity: .7; }

/* 로그인 */
.welcome { align-items: center; text-align: center; }
.welcome .button { max-width: 360px; }
.button.kakao { background: #FEE500; color: #17141A; }
.button.google { background: #fff; color: #17141A; border: 1.5px solid rgba(23,20,26,.2); }
.button.social { display: flex; align-items: center; justify-content: center; gap: 8px; }
.button.social svg { width: 19px; height: 19px; flex: none; }


/* 홈 */
.my-room {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-align: left; width: 100%;
  border: 0; border-radius: 18px; background: var(--lime-soft); cursor: pointer; font: inherit; letter-spacing: inherit; color: inherit;
}
.my-room strong { display: block; }
/* 메인 상품 카드 (Ethan 2026-09-22 7차: 흰 상자는 버튼인지 상품인지 포인트가 없다 → 사주아이 상품 카드처럼).
   파스텔 바탕 + 큰 그림 + 굵은 제목 + 오른쪽 화살표 원. 누르면 살짝 눌린다. */
.product-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; text-align: left; padding: 16px 16px 16px 14px; cursor: pointer; width: 100%;
  border-radius: var(--card-radius); border: 0; background: var(--butter-soft); font: inherit; letter-spacing: inherit; color: inherit;
  box-shadow: 0 8px 22px rgba(23,20,26,.10); transition: transform .12s ease, box-shadow .12s ease;
}
.product-card:active { transform: scale(.985); box-shadow: 0 3px 10px rgba(23,20,26,.10); }
.product-card:focus-visible { outline: 3px solid var(--sky-dark); outline-offset: 2px; }
.product-img { width: 88px; height: 88px; border-radius: 20px; background: #fff; }
.product-text { display: grid; gap: 3px; min-width: 0; }
.product-text strong { font-size: var(--fs-title); line-height: var(--lh); }
.product-text .muted { font-size: var(--fs-body); line-height: var(--lh); }
.product-meta { font-size: var(--fs-body); font-weight: 700; color: var(--aubergine); margin-top: 2px; }
.product-go { width: 36px; height: 36px; border-radius: 50%; background: var(--sky-dark); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: var(--fs-body); flex: none; }
/* 홈 깊이 세 단계: 라이트 · 스탠더드 · 딥. 가격·문항 수는 이름 아래 작게, 줄을 나눠 320px 에서도 안 넘친다. */
.tier-block { display: grid; gap: var(--gap-s); }
/* Lite · Standard · Deep 토글 (Ethan 2026-09-26: 영어, 토글) */
.tier-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 999px; background: #fff; border: 1.5px solid var(--sky); }
.tier { display: grid; justify-items: center; padding: 10px 4px; border: 0; border-radius: 999px; background: #fff; font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; }
.tier strong { font-size: var(--fs-body); }
.tier span { font-size: var(--fs-body); line-height: var(--lh); color: #6F6A75; }
.tier.on { background: var(--sky); color: var(--aubergine); }
.tier-meta { margin: 0; text-align: center; font-size: var(--fs-body); }
.product-card.soon { opacity: .75; }
.tier.on span { color: var(--aubergine); }
.shelf { margin-top: var(--gap-l); }
.shelf h2 { font-size: var(--fs-title); margin: 0 0 12px; }
.shelf h2 .you { font-size: 1.2em; font-weight: 900; }
/* 보기만 하는 선반은 가로로 민다 - 뒤를 못 봐도 손해가 없는 자리다. */
.shelf-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: none; }
.shelf-row::-webkit-scrollbar { display: none; }
/* 릴스 카드: 세로 표지 위에 제목. 누르면 사이트 안 오버레이로 재생 (Ethan 2026-09-26: 인스타로 이동하면 이탈). */
.reel-card { flex: 0 0 138px; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; position: relative; background: #222; scroll-snap-align: start; color: #fff; text-decoration: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; -webkit-appearance: none; text-align: left; }
.reel-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.72)); }
.reel-card:focus-visible { outline: 3px solid var(--sky-dark); outline-offset: 2px; }
.reel-play { position: absolute; top: 8px; right: 8px; z-index: 1; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--aubergine); display: grid; place-items: center; font-size: var(--fs-body); }
.reel-text { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1; }
.reel-text strong { font-size: var(--fs-body); line-height: var(--lh); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reel-text span { font-size: var(--fs-body); opacity: .8; display: block; margin-top: 4px; }
/* 릴스 오버레이: 탭한 카드의 공식 embed만 화면 위에 띄운다. 닫으면 iframe째 지워진다(자원 정리). */
.reel-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.82); display: grid; place-items: center; padding: 16px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.reel-overlay-card { position: relative; width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 10px; }
.reel-overlay-close { position: absolute; top: -40px; right: 0; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--aubergine); font-size: var(--fs-body); cursor: pointer; }
.reel-overlay-frame { width: 100%; height: min(70vh, 580px); border: 0; border-radius: 16px; background: #111; }
.reel-overlay-out { align-self: center; color: #fff; text-decoration: underline; font-size: var(--fs-body); }
@media (prefers-reduced-motion: reduce) { .reel-overlay { animation: none; } }
/* 읽으면 좋을 글: 연두 줄 목록 (릴스는 표지, 글은 제목이 주인공). */
.read-list { display: grid; gap: var(--gap-s); }
.read-row { display: flex; align-items: center; gap: 12px; background: var(--lime-soft); border-radius: 16px; padding: 10px 12px; color: var(--aubergine); text-decoration: none; }
.read-row[hidden] { display: none; }
.read-row:focus-visible { outline: 3px solid var(--sky-dark); outline-offset: 2px; }
.read-mark { width: 40px; height: 40px; flex: none; border-radius: 12px; background: #fff; display: grid; place-items: center; font-weight: 900; font-size: var(--fs-body); }
.read-text { min-width: 0; }
.read-text strong { font-size: var(--fs-body); line-height: var(--lh); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.read-text span { font-size: var(--fs-body); color: #6b6870; }
.read-go { margin-left: auto; font-weight: 900; color: var(--aubergine); }
.read-more { display: block; margin: 10px auto 0; background: none; border: 0; font: inherit; font-weight: 800; font-size: var(--fs-body); color: var(--sky-dark); cursor: pointer; padding: 8px; }
.welcome .back-bar { align-self: flex-start; }

/* 로그인 화면 말풍선 */
.bubble { position: relative; background: #fff; border: 1.5px solid var(--aubergine); border-radius: 999px; padding: 8px 16px; font-weight: 800; font-size: var(--fs-body); margin-bottom: 4px; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 11px; height: 11px; background: #fff; border-right: 1.5px solid var(--aubergine); border-bottom: 1.5px solid var(--aubergine); transform: translateX(-50%) rotate(45deg); }
/* 입력 화면 머리: 기니 사진 옆에서 말하는 말풍선. 꼬리는 왼쪽(기니 쪽). */
.ask-head { display: flex; align-items: center; gap: 12px; }
.ask-head .gp { width: 72px; height: 72px; flex: none; }
.bubble-left { border-radius: 18px; padding: 10px 16px; margin: 0; }
.bubble-left::after { left: -7px; bottom: auto; top: 50%; transform: translateY(-50%) rotate(135deg); }
.bubble-left h1 { font-size: var(--fs-title); margin: 0; word-break: keep-all; }
/* 홈 히어로 = 로고 A 장면형 (Ethan 2026-09-22 확정): 빈 바퀴가 뒤에서 돌고, 그 앞에 배경을 따낸 사진 기니가 크게 서 있다.
   기니 뒤 원판 없음(Ethan: "기니 뒤에 있는 원, 그 배경이 없어져야"). 이름은 장면 아래 24px, 자간 -3%. */
.hero-wheel { position: relative; width: min(280px, 100%); height: 236px; }
.hero-wheel .wheel { position: absolute; left: 0; top: 0; width: 200px; height: 200px; opacity: .9; }
.gp-stand { position: absolute; right: 0; bottom: 0; width: 176px; height: 176px; filter: drop-shadow(0 8px 14px rgba(23,20,26,.14)); }
.bubble-hero { position: absolute; right: 0; top: var(--gap-s); max-width: 100%; font-size: var(--fs-body); padding: var(--gap-s) var(--gap-m); }
.bubble-hero::after { left: 75%; }
.brand-name { font-size: calc(var(--fs-body) + 6px); font-weight: 900; letter-spacing: -0.02em; line-height: var(--lh); margin: 0; }
/* 보내기 버튼 안 천사/악마기니 */
.button.with-gp { display: flex; align-items: center; justify-content: center; gap: 8px; }
.button.with-gp img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
.button.with-gp img + img { margin-left: -14px; }

/* 단일 선택은 가로로 밀고, 이번 일의 복수 선택은 줄바꿈한다. */
.chips-block { display: grid; gap: 10px; }
.chip-group { display: grid; gap: 6px; min-width: 0; }
.chip-label { font-size: var(--fs-body); opacity: .75; }
.chip-row {
  display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 2px 28px 4px 2px; margin-right: -12px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
          mask-image: linear-gradient(to right, #000 85%, transparent 100%);
}
.chip-row::-webkit-scrollbar { display: none; }
.chip-row-multi { flex-wrap: wrap; overflow-x: visible; margin-right: 0; padding-right: 2px; -webkit-mask-image: none; mask-image: none; }
.chip {
  flex: 0 0 auto; scroll-snap-align: start; min-height: 40px; padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  border: 1.5px solid rgba(23,20,26,.18); background: #fff; font: inherit; font-size: var(--fs-body); letter-spacing: inherit; cursor: pointer; color: inherit;
}
.chip.on { background: var(--lime); border-color: var(--lime); color: var(--aubergine); font-weight: 600; }
/* 상대 카드 1쪽 (SCREEN_SPEC 2026-09-26): 그 사람 맞아? O / X 는 크게, 나·상대·우리 관계는 구역마다 카드 한 장. 칩과 같은 테두리를 쓴다. */
.card-page { display: flex; flex-direction: column; gap: var(--gap-m); }
.ox-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-s); }
.ox { min-height: 64px; border: 1.5px solid rgba(23,20,26,.18); border-radius: var(--card-radius); background: #fff; font: inherit; font-size: calc(var(--fs-body) + 10px); font-weight: 900; letter-spacing: inherit; color: inherit; cursor: pointer; }
.ox.on { background: var(--sky); border-color: var(--sky); color: var(--aubergine); }
.text-btn { background: none; border: 0; padding: 0 var(--gap-s); font: inherit; font-size: var(--fs-body); font-weight: 800; letter-spacing: inherit; color: var(--sky-dark); cursor: pointer; }
.alias-input { width: 100%; min-height: 40px; padding: 0 var(--gap-m); border: 1.5px solid rgba(23,20,26,.18); border-radius: 999px; background: #fff; font: inherit; font-size: var(--fs-body); letter-spacing: inherit; color: inherit; }
.known-line { text-align: center; }
/* 캐릭터 기본값. 아래 최신 스타일에서 전체 그림이 보이도록 확장한다. */
.gp2 { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff; }

/* 홈 기니피그: 옆모습으로 하늘색 철망 쳇바퀴를 굴린다 (Ethan 2026-09-22 6차: 정면 사진 튀기기는 짜침 → 시안 C, 캐릭터 무늬 일치).
   그림은 app.js wheelSvg() 인라인 SVG. 살이 시계 방향으로 돌고, 기니는 바닥에서 오른쪽으로 달리며 다리 넷이 엇갈린다. */
.wheel { width: 200px; height: 200px; display: block; }
.wheel .spin { transform-origin: 110px 100px; animation: spin 2.2s linear infinite; }
.wheel .pig { animation: bob .26s ease-in-out infinite alternate; }
.wheel .lf  { transform-origin: 132px 162px; animation: legA .26s ease-in-out infinite alternate; }
.wheel .lb  { transform-origin: 86px 162px;  animation: legB .26s ease-in-out infinite alternate; }
.wheel .lf2 { transform-origin: 122px 162px; animation: legB .26s ease-in-out infinite alternate; }
.wheel .lb2 { transform-origin: 98px 162px;  animation: legA .26s ease-in-out infinite alternate; }
@keyframes bob  { from { transform: translateY(1.5px); } to { transform: translateY(-1.5px); } }
@keyframes legA { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }
@keyframes legB { from { transform: rotate(28deg); } to { transform: rotate(-28deg); } }
@media (prefers-reduced-motion: reduce) { .wheel .spin, .wheel .pig, .wheel .lf, .wheel .lb, .wheel .lf2, .wheel .lb2 { animation: none; } }

/* 답 v4: 출발 생각·구성 명제·단서 (HANDOFF_answer_structure_v4 §1) */
.chips-ro { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-ro span { background: #F1F1F4; border-radius: 999px; padding: 4px 10px; font-size: var(--fs-body); }
.chips-ro span { max-width: 100%; }
.circuit li > span { min-width: 0; }
.chips-ro.feel span { background: var(--butter); }
.circuit { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.circuit li { display: block; font-size: var(--fs-body); line-height: var(--lh); padding: 6px 10px; border-radius: 12px; background: transparent; }
.circuit i { font-style: normal; font-weight: 800; color: var(--sky-dark); flex: none; }
.circuit li.guess { background: var(--butter-soft); }
.circuit .note { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--sky); color: var(--aubergine); font-size: var(--fs-muted); font-weight: 700; vertical-align: middle; }
.prop-chip { display: block; margin: 4px 0; padding: 6px 10px; border-radius: 10px; background: var(--lime-soft); font-size: var(--fs-body); line-height: var(--lh); }
.prop-chip i { font-style: normal; font-weight: 800; color: var(--sky-dark); margin-right: 6px; }
.qa .moves img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 5px; }
.winner { display: flex; gap: 10px; align-items: center; background: var(--lime-soft); border-radius: 14px; padding: 10px 12px; }
.winner img { flex: none; border-radius: 50%; object-fit: cover; }
.qa { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.qa li { font-size: var(--fs-body); line-height: var(--lh); }
.qa li > b.when { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: #F1F1F4; font-size: var(--fs-body); color: #55535B; }
.qa .moves { display: block; font-size: var(--fs-body); color: var(--sky-dark); }
/* 안내 문장이 칸 안에 있으므로 줄바꿈이 살아 있어야 한다 (Ethan 2026-09-22) */
textarea::placeholder { white-space: pre-wrap; }

/* Pink + cup-inspired lime. Whole character illustrations stay visible. */
.gp2 { border-radius: 18px; object-fit: contain; box-shadow: none; }
.section .say { display: grid; grid-template-columns: 72px minmax(0, 1fr); background: var(--lime-soft); }
.section .say img { width: 72px; height: 72px; border-radius: 12px; object-fit: contain; }
.winner { background: var(--lime-soft); }
.winner img { width: 90px; height: 90px; border-radius: 14px; object-fit: contain; }
.chips-ro.fact span { background: var(--lime); }
.link-line { color: var(--sky-dark); font-weight: 600; }
/* Selected artwork: angel variant 3 + devil variant 2; only heart speech bubbles. */
.loading-screen { min-height: 800px; padding: 0; background: linear-gradient(100deg, var(--ice), #f0dcf0 52%, #ffd1d1); }
.screen.loading-screen { padding: 0; }
.loading-screen .progress { width: 100%; padding: 0; gap: 0; text-align: center; }
.loading-scene { position: relative; width: 100%; }
.loading-scene-art { display: block; width: 100%; height: auto; }
.loading-caption { position: absolute; left: 12px; right: 12px; bottom: 4.5%; color: #593d46; }
.loading-caption h1 { font-size: var(--fs-title); margin: 0 0 9px; }
.loading-gauge { max-width: 260px; height: 14px; margin: 14px auto 4px; border-radius: 999px; overflow: hidden; background: #fff; }
.loading-fill { display: block; width: 0; height: 100%; background: var(--sky); transition: width .25s linear; }
.loading-percent { font-size: var(--fs-body); font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 899px) { .loading-screen { min-height: 100dvh; } }
@media (prefers-reduced-motion: reduce) { .loading-fill { transition: none; } }
.bottom-actions { align-items: stretch; }
.bottom-actions #share-result { flex: 1; width: auto; }
.bottom-actions #restart { flex: none; padding-inline: 12px; font-size: var(--fs-body); }
.share-dialog { width: min(460px, calc(100vw - 28px)); max-height: calc(100dvh - 32px); overflow-y: auto; border: 1px solid var(--lime-soft); border-radius: 24px; padding: 20px; background: #fffdf9; color: var(--aubergine); }
.share-dialog::backdrop { background: rgba(35, 22, 31, .4); }
.share-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.share-heading h2 { font-size: var(--fs-title); margin: 0; }
.share-dialog textarea { margin-block: 14px; min-height: 230px; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.share-buttons .button { flex: 1; white-space: nowrap; padding-inline: 12px; }
.share-status { min-height: 24px; margin-top: 12px; }
@media (max-width: 360px) {
  .screen { padding-inline: 12px; }
  .plan { grid-template-columns: 1fr; gap: 3px; }
  .plan dd { margin-bottom: 8px; }
  .section .say { grid-template-columns: 56px minmax(0, 1fr); padding: 10px; }
  .section .say img { width: 56px; height: 56px; }
}

/* 답 v6: 세 개의 접힌 요약을 먼저 읽고 각각 펼친다. */
.report-screen { padding: var(--gap-m); }
.block > summary { gap: var(--gap-s); padding: var(--gap-s) var(--gap-m); font-size: var(--fs-body); line-height: var(--lh); }
.block > summary::after { flex: none; margin: 0; }
.block > summary .gp2 { width: 40px; height: 40px; border-radius: 0; flex: none; }
.block-copy { display: grid; gap: 0; flex: 1; min-width: 0; }
.block-copy > strong, .block-headline { font-size: var(--fs-body); }
.block-headline { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; }
.angel-block .block-headline, .devil-block .block-headline { -webkit-line-clamp: 1; }
.block[open] .block-headline { display: block; }
.block-score { flex: none; max-width: 3em; text-align: right; font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.angel-block .block-score { color: var(--sky-dark); }
.devil-block .block-score { color: #a4123f; }
.block > summary:focus-visible { outline: 3px solid var(--sky-dark); outline-offset: 2px; }
.block[open] > .section-body { padding-top: var(--gap-m); }
.verdict-block .block-copy { gap: var(--gap-s); }
.verdict-block .bar { height: 8px; }
.score-label { font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.ground-weight { font-size: var(--fs-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fixed-chips { margin-bottom: var(--gap-s); }
.report-part { display: grid; gap: var(--gap-s); }
.today .section-body { font-size: var(--fs-today); font-weight: 700; }
.traits-inputs { display: grid; gap: var(--gap-s); min-width: 0; margin: 0; padding: 0; border: 0; }
.traits-inputs legend { margin-bottom: var(--gap-s); }
.section-body { gap: var(--gap-m); }
.bottom-actions { flex-wrap: wrap; }
.composer-inline .button { flex-shrink: 0; }

/* Answer spacing: sections/prose own the three-line gap; labels and rows stay attached. */
.section > summary, .section > .section-head { font-size: var(--fs-title); }
.report-screen { gap: 0; }
.report-screen > * + * { margin-top: calc(var(--gap-l) + var(--para-gap)); }
.report-screen > .back-bar { margin: 0; }
.report-screen > .back-bar + *, .report-screen > [role="status"] + * { margin-top: var(--gap-m); }
/* 처음 열면 제목만 있는 접힌 막대 셋: 종합 판정 → 천사 → 악마 (Ethan 2026-09-26 낮, 그림 시안). */
.report-screen > .block + .block { margin-top: var(--gap-l); }
/* 오늘의 결론이 막대 셋 바로 뒤에 오면 한 화면 안에 보이도록 여백을 좁힌다 (Ethan 2026-09-26). */
.report-screen > .block + .today { margin-top: var(--gap-l); }
.block > summary.bar-title { min-height: 64px; font-size: var(--fs-title); font-weight: 800; }
.block > summary.bar-title::after { content: '▼'; font-size: .9em; }
.block[open] > summary.bar-title::after { content: '▲'; }
.block-lead { font-weight: 700; }
.report-screen .section-body { gap: 0; }
.report-screen .section-body > * { min-width: 0; }
.report-screen .section-body > * + * { margin-top: 0.5em; }
.report-screen .section-body > :is(.report-part, .emotion-circuit, .tip-group, section, div:has(> h4)):not(:first-child),
.report-screen .section-body p + p { margin-top: var(--para-gap); }
.report-screen .report-part { display: block; }
.report-screen .report-part > * + * { margin-top: 0.5em; }
.report-screen .report-part > p + p { margin-top: var(--para-gap); }
.report-screen :is(h3, h4) { margin: 0; }
.report-screen .section-body :is(h3, h4) + *, .report-screen .prop-chip + * { margin-top: 0.4em; }
.report-screen .section-head { padding-bottom: 0; }
.report-screen .section-head + .section-body { padding-top: 0.4em; }
.report-screen .section-body .muted, .report-screen #save-status .muted { margin-top: 0.5em; }
.report-screen .section-body .said p + p { margin-top: 0.75em; }
.report-screen .visually-hidden + textarea { margin-top: 0; }
.report-screen textarea + .button { margin-top: 0.75em; }
.report-screen .ground-weight + .muted { display: block; }
.report-screen .plan { grid-template-columns: minmax(0, 1fr); gap: 0; }
.report-screen .plan dt + dd { margin-top: 0.4em; }
.report-screen .plan dd + dt { margin-top: 0.75em; }
.report-screen .plan dd { margin-bottom: 0; }
.report-screen .plain li { margin-bottom: 0; }
.report-screen .plain li + li { margin-top: 0.75em; }
.report-screen .qa { gap: 0.75em; }
.report-screen .moves { margin-top: 0.5em; }
.report-screen .fixed-chips { margin-bottom: 0.75em; }
.report-screen .plan .prop-chip { margin: 0 0 0.5em; }
.emotion-circuit, .circuit-group { display: block; }
.emotion-circuit > .circuit-group + .circuit-group { margin-top: 1em; }
.circuit { gap: 0.5em; }
.circuit-group > h4 { width: fit-content; padding: 0 6px; border-radius: 6px; }
.fact-group > h4 { background: var(--lime); }
.guess-group > h4 { background: var(--butter); }
.circuit i, .prop-chip i { display: inline-block; padding: 0 4px; border-radius: 4px; background: #fff; color: var(--sky-dark); font-size: var(--fs-muted); white-space: nowrap; }
.ground-weight { color: var(--sky-dark); background: #fff; border-radius: 4px; padding-inline: 4px; }
/* The brightest accessible sky text needs white behind it, including on tinted cards. */
.angel-block .block-score, .text-btn, .read-more, .side-note .steps i { background: #fff; border-radius: 4px; }
:is(.claim-box, .report-opening, .section.angel, .section .say, .winner, .product-card, .read-row, .my-room, .shots-drop) .muted,
.read-text span { color: var(--aubergine); }
textarea { color: var(--aubergine); }
textarea::placeholder { color: var(--aubergine); opacity: 1; }
.circuit .note, .qa li > b.when { font-size: var(--fs-muted); }
.thoughts .claim-box p, .verdict-block .block-headline { font-size: var(--fs-title); }
.chip-row { min-width: 0; max-width: 100%; margin-right: 0; }
.chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.tier span, .read-text span, .reel-text span, .product-meta, .back-title { font-size: var(--fs-muted); }
.block-headline { display: block; }
.bottom-actions .button { flex: 1 1 140px; }
.bottom-actions #restart { flex: 1 1 140px; }
.composer-inline { flex-wrap: wrap; }
.composer-inline textarea { flex-basis: 160px; }
/* 좁은 카드의 제목·점수·가격은 한 줄로 읽도록 보조 글자 크기를 쓴다. */
@media (max-width: 399px) {
  .tier strong, .tier span, .block-score { font-size: var(--fs-muted); }
  .block > summary { padding-inline: 12px; }
}
/* 대기 화면에서 나가도 되는지 한 줄 (Ethan 2026-09-26 낮 "나가도 된다, 나가면 안 된다 같은 글도 적어줘"). */
.loading-leave { margin: 10px 0 0; font-size: var(--fs-body); font-weight: 700; text-align: center; }