/* reset */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
}

:root {
	--bg-deep: #0d0818;
	--panel-1: #1a1035;
	--panel-2: #2d1b4e;
	--panel-3: #241533;
	--panel-4: #34204a;
	--gold: #d4af37;
	--gold-dim: #7c5e1e;
	--gold-light: #f6e7b0;
	--gold-soft: #e8d9a0;
	--text-primary: #f3e9c9;
	--text-muted: #c9b6e4;
	--text-faint: #a599c2;
	--accent-red: #ff5a5a;
	/* 장식용 세리프는 큰 제목류에만 쓴다 — 작은 본문 글씨에 쓰면 가독성이 크게 떨어짐 */
	--font-display: Georgia, "Times New Roman", serif;
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* 신비로운 점성술/관상학 테마.
   배경 물결무늬는 예전엔 JS 캔버스로 페이지 로드 시점 높이만큼만 한 번 그렸는데, 결과가
   나오면서 페이지가 훨씬 길어지면 그 작은 비트맵이 늘어나 찌그러져 보이는 문제가 있었다.
   CSS의 네이티브 반복 배경(SVG 타일)은 페이지 길이와 무관하게 항상 완벽하게 이어진다.
   진짜 세이가이하(青海波) 문양은 한 행의 부채꼴이 아래 행에서 타일 폭의 절반만큼
   가로로 어긋나고, 세로로도 살짝 겹치며 이어진다. 타일 하나 안에 두 행(위: 타일
   중앙 기준 부채꼴, 아래: 타일 좌우 모서리에 반씩 걸친 부채꼴)을 함께 그려 넣어서
   단순 반복만으로도 그 어긋남이 자동으로 재현되게 했다. */
body {
	font-family: var(--font-body);
	background-color: var(--bg-deep);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='64' viewBox='0 0 80 64'%3E%3Cg fill='none' stroke='%233a2a5c' stroke-width='1'%3E%3Cpath d='M0,40 A40,40 0 0,1 80,40'/%3E%3Cpath d='M12,40 A28,28 0 0,1 68,40'/%3E%3Cpath d='M24,40 A16,16 0 0,1 56,40'/%3E%3Cpath d='M-40,64 A40,40 0 0,1 40,64'/%3E%3Cpath d='M-28,64 A28,28 0 0,1 28,64'/%3E%3Cpath d='M-16,64 A16,16 0 0,1 16,64'/%3E%3Cpath d='M40,64 A40,40 0 0,1 120,64'/%3E%3Cpath d='M52,64 A28,28 0 0,1 108,64'/%3E%3Cpath d='M64,64 A16,16 0 0,1 96,64'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 80px 64px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	min-height: 100vh;
	perspective: 1400px;
}

.container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	background: linear-gradient(165deg, var(--panel-1) 0%, var(--panel-2) 55%, var(--panel-1) 100%);
	border: 2px solid var(--gold);
	border-radius: 20px;
	box-shadow: 0 0 0 1px var(--gold-dim) inset, 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 24px rgba(212, 175, 55, 0.25);
	padding: 30px 20px 20px;
	max-width: 500px;
	width: 100%;
	margin-bottom: 70px;
	z-index: 3;
	/* preserve-3d는 제거함 — 아이들 float 애니메이션은 y 이동뿐이라 자식의 3D 위치를 보존할
	   필요가 없고, 이 3D 렌더링 컨텍스트가 안쪽의 #topMatchShine(mix-blend-mode) 요소와
	   맞물려 일부 안드로이드 GPU에서 카드가 새까맣게 렌더링되는 버그의 요인이 될 수 있다. */
	will-change: transform;
	position: relative;
}

#bootOverlay {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: linear-gradient(165deg, var(--panel-1) 0%, var(--panel-2) 55%, var(--panel-1) 100%);
	border-radius: 18px;
}

#bootOverlay p {
	color: var(--gold-soft);
	font-size: 0.75rem;
	width: auto;
}

#bootSpinner {
	width: 40px;
	height: 40px;
	border: 3px solid rgba(212, 175, 55, 0.25);
	border-top-color: var(--gold);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

.forbes-badge {
	display: inline-block;
	width: auto;
	margin: 8px auto 0;
	padding: 4px 12px;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--gold-light);
	background: rgba(212, 175, 55, 0.12);
	border: 1px solid var(--gold-dim);
	border-radius: 20px;
}

#window {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* #window의 flex 중앙정렬은 "직접 자식"에만 적용된다 — 소개 콘텐츠를 #introSection으로
   한 번 더 감싸면서 그 안의 업로드 사진 박스(300px 고정 폭)가 부모(플레인 div, 기본
   display:block)를 기준으로 왼쪽 정렬돼버리는 문제가 있어, 같은 flex 중앙정렬을 그대로 물려준다. */
#introSection {
	display: flex;
	flex-direction: column;
	align-items: center;
}

h1 {
	font-family: var(--font-display);
	font-size: 1.4rem;
	color: var(--gold-light);
	text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
	letter-spacing: 0.02em;
}

h2 {
	font-family: var(--font-display);
	margin-top: 20px;
	font-size: 1.7rem;
	color: var(--gold-light);
}

hr {
	margin: 10px auto 10px;
	width: 300px;
	border-color: var(--gold-dim);
}

.tagline {
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--gold-light);
	font-style: italic;
}

#howItWorks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	width: 100%;
	margin-top: 16px;
	padding: 12px 8px;
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid var(--gold-dim);
	border-radius: 10px;
}

#howItWorks .step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 62px;
}

#howItWorks .step-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(212, 175, 55, 0.1);
	border: 1px solid var(--gold-dim);
	color: var(--gold-light);
}

#howItWorks .step-icon svg {
	width: 16px;
	height: 16px;
}

#howItWorks .step-label {
	font-size: 0.62rem;
	font-weight: 700;
	color: var(--text-primary);
	white-space: nowrap;
	margin-top: 3px;
}

#howItWorks .step-arrow {
	display: flex;
	align-items: center;
	color: var(--gold-dim);
	margin: 0 1px;
	align-self: flex-start;
	margin-top: 15px;
}

#howItWorks .step-arrow svg {
	width: 14px;
	height: 14px;
}

.value-prop {
	font-size: 0.75rem;
	color: var(--gold-soft);
	line-height: 1.5;
	margin-top: 10px;
}

.value-prop strong {
	color: var(--gold-light);
}

.fine-print {
	font-size: 0.6rem;
	color: var(--text-faint);
	margin-top: 4px;
}

/* 자동광고가 이 폭 고정 카드 레이아웃 안에서 업로드 영역 한복판까지 큰 광고를 끼워넣는
   문제가 있었다 — 위치를 첫 화면(업로드 전)과 결과 화면(공유 버튼 아래) 두 곳으로 고정하고,
   광고 로드 전후로 레이아웃이 튀지 않도록 min-height를 미리 예약해둔다. */
/* 반응형 광고는 실제로 렌더될 때 컨테이너 전체 폭보다 좁게 나올 수 있다 — .ad-slot이
   그냥 block이면 그 광고(ins)가 왼쪽으로 붙어버려 나머지 중앙정렬된 페이지와 어긋나 보인다.
   ins에 직접 margin:auto를 주는 대신 flex 중앙정렬을 쓰는 이유: 애드센스 스크립트가 로드되면
   ins에 인라인 style(width/height 등)을 직접 써넣는데, 부모의 justify-content는 그 인라인
   스타일과 무관하게 항상 적용된다. */
.ad-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	min-height: 100px;
	margin-top: 14px;
	padding-top: 10px;
	border-top: 1px dashed rgba(212, 175, 55, 0.25);
}

.ad-label {
	display: block;
	margin-bottom: 4px;
	font-size: 0.58rem;
	color: var(--text-faint);
	letter-spacing: 0.05em;
	text-align: center;
}

p {
	margin: 10px auto 0;
	width: 100%;
	font-size: 0.7rem;
	text-align: center;
	color: var(--text-muted);
}

/* 저장(꽉 찬 골드)보다는 확실히 눌러서 주 액션과 안 헷갈리게 하되, 텍스트 링크로는 버튼처럼
   안 보인다는 피드백 — 테두리·배경이 있는 보조 버튼으로 되돌린다. */
.reset-link {
	display: block;
	width: 100%;
	margin: 14px auto 0;
	padding: 10px;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--text-primary);
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid var(--gold-dim);
	border-radius: 8px;
	cursor: pointer;
}

.reset-link:hover {
	background: rgba(212, 175, 55, 0.15);
	transition: transform 0.1s ease;
	transform: scale(0.99);
}

.reset-link:active {
	transform: scale(0.95);
}

/* 저장/공유용 주 액션과 헷갈리지 않도록 작은 필(pill) 토글로 눈에 덜 띄게 두되,
   눌렀을 때 상태(가려짐/안 가려짐)가 라벨과 색으로 바로 구분되게 한다. */
#faceHideToggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: auto;
	margin: 0 auto 10px;
	padding: 6px 14px;
	font-size: 0.68rem;
	color: var(--text-muted);
	border: 1px solid var(--gold-dim);
	border-radius: 20px;
	background: rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

#faceHideToggle .btn-icon {
	width: 14px;
	height: 14px;
}

#faceHideToggle[aria-pressed="true"] {
	color: var(--gold-light);
	border-color: var(--gold);
	background: rgba(212, 175, 55, 0.15);
}

/* 공유 시 얼굴 가리기 토글이 켜지면 매칭 카드의 "나" 사진과 저장용 카드의 사용자 사진
   양쪽에 이 클래스를 건다 — 결과·매칭 정보는 그대로 두고 얼굴만 알아볼 수 없게 흐린다. */
.face-hidden {
	filter: blur(18px);
}

#saveImg {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 100%;
}

#saveImgBtn {
	width: 100%;
}

/* "저장하기"는 확실한 주 액션으로 보이게 꽉 찬 골드 톤으로, 아래 SNS 공유 줄과는 확실히
   다르게 만든다 — 예전엔 저장 버튼과 공유 버튼이 똑같은 회색 사각 버튼이라 구분이 안 된다는
   피드백을 받았다. */
#saveImg button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: #1a1035;
	font-weight: 700;
	width: 100%;
	padding: 12px;
	margin: 5px 0 0;
	border: 1px solid var(--gold);
	border-radius: 8px;
	background: linear-gradient(160deg, var(--gold-light), var(--gold));
	cursor: pointer;
}

.btn-icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

#saveImg button:hover {
	filter: brightness(1.06);
	transition: transform 0.1s ease;
	transform: scale(0.99);
}

#saveImg button:active {
	transform: scale(0.95);
}

/* SNS 공유 줄: 저장 버튼과 확실히 구분되도록 아이콘만 있는 작은 원형 버튼들을 나열한다.
   카카오톡/페이스북/X 공식 공유는 결과 이미지 없이 링크·고정 문구만 보낼 수 있어 의미가
   없다는 피드백으로 제거 — 실제 카드 이미지 파일을 OS 공유 시트로 보내는 두 버튼만 남는다. */

.share-row {
	display: flex;
	justify-content: center;
	gap: 8px;
	width: 300px;
	margin: 0 auto;
}

.share-row button {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	color: var(--text-primary);
	border: 1px solid var(--gold-dim);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	cursor: pointer;
}

.share-row button .btn-icon {
	width: 18px;
	height: 18px;
}

.share-row button:hover {
	background: rgba(212, 175, 55, 0.15);
	border-color: var(--gold);
	transition: transform 0.1s ease;
	transform: scale(0.99);
}

.share-row button:active {
	transform: scale(0.95);
}

#uploadedImageContainer {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 10px 0 10px;
	width: 300px;
	height: 400px;
}

/* 클릭 리스너가 실제로 붙기 전까지는 눌러도 반응 없는 상태를 "로딩 중"으로 분명히 보여준다.
   script.js가 실행되는 즉시(붙일 리스너를 다 붙인 다음) 이 클래스를 제거한다. */
#uploadedImageContainer.is-initializing #uploadedImage {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

#initSpinner {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border: 3px solid rgba(212, 175, 55, 0.25);
	border-top-color: var(--gold);
	border-radius: 50%;
}

#uploadedImageContainer.is-initializing #initSpinner {
	display: block;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* 업로드된 사진 자체에 대한 정보(AI 추정 나이·표정)를 인증 마크처럼 사진 위에 박아서
   사진과 한 덩어리로 보이게 한다. 나이/표정 둘 다 실패할 수 있어(:empty) 그 경우엔 숨긴다. */
#aiInfoBadge {
	position: absolute;
	top: -14px;
	right: -14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: radial-gradient(circle, #000 0%, #1a1035 100%);
	border: 2px solid var(--gold);
	box-shadow: 0 0 16px rgba(212, 175, 55, 0.5), 0 4px 10px rgba(0, 0, 0, 0.5);
	transform: rotate(-8deg);
	z-index: 3;
	pointer-events: none;
}

#aiInfoBadge:empty {
	display: none;
}

.ai-badge-line {
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--gold-light);
	text-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
	line-height: 1.25;
}

.ai-badge-line.ai-badge-sub {
	font-weight: 400;
	font-size: 0.55rem;
	color: var(--text-muted);
	letter-spacing: 0.02em;
}

#uploadedImage {
	width: 100%;
	height: 100%;
	border-radius: 5px;
	border: 2px solid var(--gold);
	background: var(--panel-1);
	box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
	cursor: pointer;
	object-fit: cover;
	transition: opacity 0.25s ease;
}

#uploadedImage:hover {
	transition: transform 0.1s ease;
	transform: scale(0.99);
}

#uploadedImage:active {
	transform: scale(0.95);
}

/* 로딩 오버레이: 화면을 덮고, 그 뒤에서 분석이 진행된 다음 다시 걷히며 결과를 드러낸다.
   예전엔 원(clip-path circle)이 자라나며 화면을 덮는 방식이었는데, 원이 자라는 동안에는
   화면 네 귀퉁이에 원이 아직 닿지 않은 부분으로 몸체 뒤 배경 물결무늬가 계속 보였다 —
   열릴 때 한 번, 닫힐 때 한 번, 총 두 번 "배경이 나타났다 사라지는" 것처럼 보였다는 신고를
   반복해서 받았다. clip-path 대신 화면 전체를 한 번에 균일하게 opacity로 페이드시키면
   특정 영역만 드러나는 순간이 아예 없어서 이 문제가 구조적으로 사라진다. "원이 번지는"
   느낌은 안쪽의 #portalFlash 장식 효과로만 남긴다. */
.modal {
	display: none;
	position: fixed;
	z-index: 50;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: radial-gradient(circle at 50% 50%, var(--panel-2) 0%, var(--panel-1) 55%, #05030a 100%);
	box-shadow: inset 0 0 80px rgba(212, 175, 55, 0.4);
	opacity: 0;
	pointer-events: none;
}

/* 예전엔 밝은 코어가 화면 68% 반경까지 번져서, 열릴 때/닫힐 때 두 번 다 화면 전체가
   하얗게 "번쩍"였다 — 코어를 훨씬 작게, 더 흐리게 줄여서 해결했었다. mix-blend-mode:
   screen도 같이 걸려있었는데, 블렌드 모드 자체가 일부 안드로이드 GPU 컴포지터에서 화면
   전체를 새까맣게(!) 렌더링하는 버그를 일으킨다는 게 실기기 재현으로 확인돼 제거함
   (#topMatchShine의 color-dodge 제거와 동일한 이유). */
#portalFlash {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 50%, #fff8e0 0%, var(--gold-light) 12%, transparent 32%);
	opacity: 0;
	pointer-events: none;
}

.modal-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	background: rgba(13, 8, 24, 0.7);
	border: 1px solid var(--gold);
	padding: 20px;
	width: 80%;
	max-width: 320px;
	border-radius: 8px;
	box-shadow: 0 0 24px rgba(212, 175, 55, 0.4);
	color: var(--text-primary);
	opacity: 0;
}

#processTitle {
	font-size: 1.3rem;
	margin: 0 0 10px;
	color: var(--gold-light);
}

/* 브라우저 기본 alert()는 다크 점성술 테마 한복판에 흰 OS 팝업이 튀어나와 몰입이 완전히
   깨지므로, 같은 자리에 계속 떠 있는 테마 톤 토스트로 대체한다. 업로드 영역이 화면 위쪽에
   있는데 알림이 하단에서만 뜨면 놓치기 쉽다는 피드백으로 뷰포트 상단에 고정. */
#toast {
	position: fixed;
	left: 50%;
	top: 16px;
	transform: translateX(-50%);
	z-index: 999;
	display: flex;
	align-items: center;
	gap: 8px;
	width: max-content;
	max-width: min(90vw, 380px);
	/* 사이트 전체가 어차피 골드 테두리 카드투성이라 토스트도 같은 골드 배경/테두리를 쓰면
	   "그냥 또 다른 카드"로 묻혀서 눈에 안 띈다는 피드백을 받았다. 경고성 알림이니 레이더
	   차트의 "나" 색으로 이미 쓰던 accent-red로 확실히 다른 톤을 준다. */
	background: linear-gradient(160deg, #3a1420 0%, var(--panel-1) 100%);
	border: 1px solid var(--accent-red);
	color: var(--text-primary);
	font-size: 0.82rem;
	line-height: 1.45;
	padding: 12px 16px;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(255, 90, 90, 0.45);
	opacity: 0;
	pointer-events: none;
	cursor: pointer;
}

#toast.show {
	pointer-events: auto;
}

.toast-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--accent-red);
}

/* 분석 자체가 너무 빨리 끝나서(수십ms) 실제 진행률 %로 채우면 0→100이 한 프레임에 튀어
   버벅이는 것처럼 보인다. 그래서 실제 진행률과 무관하게 계속 좌우로 흐르는 "불확정
   (indeterminate)" 바로 바꿔서, 몇 %인지가 아니라 "멈추지 않고 처리 중"이라는 것만 보여준다. */
.progress-bar {
	position: relative;
	width: 100%;
	height: 20px;
	background-color: rgba(0, 0, 0, 0.4);
	border-radius: 10px;
	overflow: hidden;
}

.progress-bar-inner {
	position: absolute;
	top: 0;
	left: -35%;
	width: 35%;
	height: 100%;
	border-radius: 10px;
	background: linear-gradient(90deg, transparent, var(--gold-light), var(--gold), var(--gold-light), transparent);
	animation: indeterminate 1.2s ease-in-out infinite;
}

@keyframes indeterminate {
	0% {
		left: -35%;
	}
	100% {
		left: 100%;
	}
}

.section-divider {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	color: var(--gold-dim);
	font-size: 0.8rem;
	margin: 4px 0;
}

.section-divider span {
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}

#resultRate p {
	width: 100%;
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	font-size: 0.9rem;
	background: linear-gradient(160deg, var(--panel-1) 0%, var(--panel-2) 100%);
	border: 1px solid var(--gold-dim);
	border-radius: 8px;
	padding: 10px;
	text-align: center;
	margin-bottom: 0.5rem;
	color: var(--text-primary);
}

#resultRate p > span {
	background-color: var(--gold);
	color: #1a1035;
	border-radius: 5px;
	padding: 10px 0;
	font-size: 1.2rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	text-align: center;
}

/* 신비로운 트레이딩 카드 프레임 */
/* transform-style: preserve-3d를 mix-blend-mode(아래 #topMatchShine)와 같은 요소에 같이
   걸어두면, 일부 안드로이드 기기(삼성 인터넷 등)의 GPU 컴포지터가 이 카드 전체를 새까맣게
   렌더링해버리는 실제 버그가 있다(실기기 영상으로 확인됨). initHoloEffect()의 틸트는
   #topMatch 하나에만 회전을 걸 뿐 자식 요소가 별도의 3D 위치를 가질 필요가 없어서
   preserve-3d 자체가 애초에 불필요했다 — 제거해도 기울임 효과는 동일하게 동작한다. */
#topMatch {
	position: relative;
	width: 100%;
	background: linear-gradient(160deg, var(--panel-1) 0%, var(--panel-2) 45%, var(--panel-1) 100%);
	border: 3px solid var(--gold);
	border-radius: 14px;
	padding: 14px;
	margin-bottom: 0.5rem;
	box-shadow: 0 0 0 1px var(--gold-dim) inset, 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 18px rgba(212, 175, 55, 0.35);
	color: var(--text-primary);
	text-align: center;
	overflow: hidden;
	font-family: var(--font-body);
	transition: transform 0.15s ease-out;
	will-change: transform;
}

/* mix-blend-mode: color-dodge를 썼었는데, preserve-3d를 떼어냈는데도 실기기에서 카드가
   계속 새까맣게 렌더링됐다 — 원인이 preserve-3d와의 조합이 아니라 블렌드 모드 자체였다는
   뜻이라 아예 제거했다. 대신 무지개 색을 직접 알파값으로 조금 더 진하게 줘서(0.55→0.68),
   dodge의 밝아지는 효과 없이도 카드 위에 얹힌 느낌이 나게 보정했다. */
#topMatchShine {
	position: absolute;
	inset: 0;
	border-radius: 11px;
	background: linear-gradient(
		115deg,
		transparent 15%,
		rgba(255, 0, 150, 0.68) 32%,
		rgba(0, 225, 255, 0.68) 41%,
		rgba(255, 240, 0, 0.68) 50%,
		rgba(0, 255, 150, 0.68) 59%,
		transparent 75%
	);
	background-size: 250% 250%;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

#topMatch::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.12), transparent 45%),
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 2px, transparent 2px, transparent 6px);
	pointer-events: none;
}

#topMatchHeader {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	position: relative;
}

#topMatchName {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--gold-light);
	text-shadow: 0 0 6px rgba(212, 175, 55, 0.6);
}

#topMatchTitle {
	font-size: 0.75rem;
	color: var(--text-muted);
	margin-top: 2px;
	position: relative;
}

#topMatchBadges {
	display: flex;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 8px;
	position: relative;
}

#topMatchBadges .badge {
	background-color: rgba(0, 0, 0, 0.4);
	border: 1px solid var(--gold);
	color: var(--text-primary);
	border-radius: 12px;
	padding: 3px 10px;
	font-size: 0.7rem;
	font-weight: 600;
}

/* 결과 카드 안 "나 vs 매칭 인물" 사진 비교 — 텍스트로만 설명하지 말고 실제 얼굴을 바로
   보여달라는 피드백 반영 */
#topMatchPhotos {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 10px;
}

.topMatch-photo-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.topMatch-photo-box img {
	width: 92px;
	height: 112px;
	object-fit: cover;
	border-radius: 8px;
	border: 2px solid var(--gold);
	box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

/* "얼굴 가리기" 토글의 시각 처리 — 사진에 흐림만 걸면 렌더링 오류처럼 보인다는 피드백.
   흐림 정도를 줄이는 대신 어두운 스크림 + 아이콘/라벨을 얹어서 "의도적으로 가려진 상태"라는
   게 한눈에 읽히게 한다. .photo-frame이 사진 실제 렌더 크기(테두리 포함)에 딱 맞으므로
   오버레이를 inset:0으로 겹치면 사진 위에 정확히 포개진다. */
.photo-frame {
	position: relative;
	display: inline-block;
	line-height: 0;
}

/* html2canvas(저장/공유 캡처)가 CSS filter를 안정적으로 렌더링하지 못해, blur만 믿으면
   "가려짐" 아이콘 밑으로 원본 얼굴이 그대로 캡처되는 사고가 난다(실기기 캡처로 확인) —
   그래서 흐림은 화면에서 보는 눈요기일 뿐이고, 실제 가림은 완전 불투명 배경이 담당한다. */
.photo-frame img.face-hidden {
	filter: blur(9px) saturate(0.7) brightness(0.75);
}

.face-hidden-overlay {
	display: none;
	position: absolute;
	inset: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	border-radius: 8px;
	background: linear-gradient(160deg, var(--panel-2) 0%, var(--panel-1) 100%);
}

.photo-frame img.face-hidden + .face-hidden-overlay {
	display: flex;
}

.face-hidden-icon {
	width: 20px;
	height: 20px;
	color: var(--gold-light);
	filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.6));
}

.face-hidden-overlay span {
	font-size: 0.6rem;
	font-weight: 700;
	color: var(--gold-light);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.topMatch-photo-box span {
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--text-primary);
}

/* "나 vs 매칭인물" 사진 사이에 일치율 %를 직접 박아서, 뱃지로 따로 떨어져 있던 예전보다
   "이 둘이 몇 % 닮았다"는 뜻이 사진 사이 공간에서 바로 읽히게 한다. */
.topMatch-percent {
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--gold-light);
	text-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
	line-height: 1.1;
	white-space: nowrap;
	position: relative;
}

#radarChart {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 8px 0;
}

#radarLegend {
	display: flex;
	gap: 12px;
	font-size: 0.65rem;
	margin-top: 2px;
}

#radarLegend .legend-user {
	color: #ff8a8a;
}

#radarLegend .legend-match {
	color: var(--gold-soft);
}

/* #radarNote는 #resultRate p의 기본 박스 스타일을 그대로 쓴다(등급 판정을 위해 별도
   금색 박스를 또 만들지 않기 위함) — 등급 이름만 강조색으로 구분한다. */
#radarNote strong {
	color: var(--gold-light);
}

/* #resultRate 접두를 붙여 상위의 `#resultRate p` 규칙이
   카드 안 텍스트에 별도 박스 배경을 씌우지 않도록 명시적으로 이긴다 */
#resultRate #topMatchAchievement {
	display: block;
	background-color: transparent;
	border: none;
	margin-top: 4px;
	padding: 0;
	font-size: 0.75rem;
	color: var(--gold-soft);
	text-align: center;
	position: relative;
}

#resultRate #topMatchCredit {
	display: block;
	background-color: transparent;
	border: none;
	margin-top: 6px;
	padding: 0;
	font-size: 0.6rem;
	color: var(--text-faint);
	text-align: center;
	position: relative;
}

#topMatchCredit a {
	color: var(--text-muted);
	text-decoration: underline;
}

/* AI 관상 풀이 (재벌 표본과의 비교 해석) */
#readingScroll {
	width: 100%;
	background: linear-gradient(160deg, var(--panel-3) 0%, var(--panel-4) 100%);
	border: 1px solid var(--gold-dim);
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 0.5rem;
	text-align: left;
	font-family: var(--font-body);
	color: var(--gold-soft);
}

#readingScroll h4 {
	font-family: var(--font-display);
	text-align: center;
	font-size: 0.85rem;
	color: var(--gold-light);
	margin-bottom: 2px;
	letter-spacing: 0.02em;
}

/* 위쪽 헤드라인(종합 1위 매칭)과 여기 부위별 매칭이 다른 사람일 수 있다는 걸 미리 설명해서
   "왜 이름이 다르지?" 하는 혼란을 없앤다. */
/* 한 문장으로 붙여서 가운데정렬했더니, 좁은 화면에서 "="와 "·" 앞뒤로 줄이 꺾이면서 마치
   메뉴 항목이 뚝뚝 끊겨 쌓인 것처럼 보였다 — 짧은 두 줄로 완전히 분리하고 왼쪽 정렬해서
   각 줄이 그 자체로 안 끊기는 한 덩어리가 되게 한다. */
.reading-legend {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	margin-bottom: 10px;
}

.reading-legend-item {
	font-size: 0.65rem;
	color: var(--text-faint);
	white-space: nowrap;
}

.reading-legend-item strong {
	color: var(--gold-soft);
	font-weight: 700;
}

.reading-item {
	padding: 6px 0;
	border-top: 1px dashed rgba(212, 175, 55, 0.3);
}

.reading-item:first-of-type {
	border-top: none;
}

.reading-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 4px 6px;
}

.reading-label {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--text-primary);
}

.trait-icon {
	width: 14px;
	height: 14px;
	color: var(--gold);
	flex-shrink: 0;
}

/* 라벨("이마 · 초년운" 등)만으로는 정확히 뭘 재는 비율인지 알기 어렵다는 피드백 — ⓘ
   버튼에 호버(데스크톱)/탭(터치, JS로 .show 토글)하면 측정 기준 설명이 뜬다. */
.reading-info-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px;
	background: none;
	border: none;
	color: var(--text-faint);
	cursor: pointer;
}

.reading-info-btn:hover,
.reading-info-btn:focus-visible {
	color: var(--gold-light);
}

.reading-info-icon {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
}

.reading-tooltip {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 5;
	width: 220px;
	max-width: 70vw;
	background: linear-gradient(160deg, var(--panel-1) 0%, var(--panel-2) 100%);
	border: 1px solid var(--gold);
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 0.65rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--gold-soft);
	text-align: left;
	white-space: normal;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

.reading-info-btn:hover + .reading-tooltip,
.reading-info-btn:focus-visible + .reading-tooltip,
.reading-tooltip.show {
	opacity: 1;
	visibility: visible;
}

/* 표본 백분위(막대)와 매칭 인물 근접도(아래 .reading-match)는 계산 자체가 다른 별개의
   지표다 — 막대는 47명 안에서의 내 위치, .reading-match는 가장 가까운 한 명과의 근접도.
   둘 다 %라 옆에 붙여두면 "왜 숫자가 다르냐"는 혼란을 주므로, 막대에는 그 숫자가 뭘
   뜻하는지 보이는 캡션을 붙이고 줄 자체를 분리한다. */
.reading-bar-row {
	margin: 6px 0 2px;
}

.reading-bar-caption {
	display: block;
	font-size: 0.62rem;
	color: var(--text-faint);
	margin-bottom: 3px;
}

/* 50% 지점의 세로선은 재벌 표본 평균 위치 — 이 선을 기준으로 내가 위/아래 어느 쪽인지
   한눈에 보이게 한다. */
.reading-bar {
	position: relative;
	width: 100%;
	height: 5px;
	background: rgba(0, 0, 0, 0.35);
	border-radius: 3px;
	overflow: hidden;
}

.reading-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--gold-dim), var(--gold));
	border-radius: 3px;
}

.reading-bar-marker {
	position: absolute;
	top: -1px;
	left: 50%;
	width: 1px;
	height: 7px;
	background: var(--text-faint);
}

/* .reading-item p 규칙보다 확실히 이기도록 클래스 하나를 더 겹쳐 명시도를 올린다
   (소스 순서에 기대지 않기 위함). */
#resultRate .reading-item .reading-match {
	display: flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: none;
	padding: 0;
	margin: 4px 0 0;
	font-size: 0.68rem;
	color: var(--gold-soft);
	text-align: left;
}

#resultRate .reading-item .reading-match p {
	margin: 0;
	font-size: inherit;
	line-height: 1.4;
	color: inherit;
}

#resultRate .reading-item .reading-match strong {
	color: var(--gold-light);
}

.reading-match-thumb {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: cover;
	border: 1.5px solid var(--gold);
}

#resultRate .reading-item p {
	display: block;
	margin: 3px 0 0;
	padding: 0;
	background-color: transparent;
	border: none;
	font-size: 0.72rem;
	line-height: 1.4;
	color: #d9cba0;
	text-align: left;
}

/* "당신은 OO형" 정체성 배지 — 등급 박스(금색 필)와는 다른 톤(어두운 패널 + 얇은 금테)으로
   구분해서, 이게 "등급"이 아니라 "나만의 타입"이라는 걸 시각적으로도 다르게 느끼게 한다.
   MBTI류 성향 테스트에서 사람들이 숫자보다 유형명을 훨씬 더 기억하고 공유하는 패턴을 따른다. */
#archetypeBadge {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	margin-top: 10px;
	padding: 14px;
	background: linear-gradient(160deg, var(--panel-3) 0%, var(--panel-4) 100%);
	border: 1.5px solid var(--gold);
	border-radius: 10px;
	box-shadow: 0 0 14px rgba(212, 175, 55, 0.25);
}

#archetypeEyebrow {
	font-size: 0.65rem;
	color: var(--text-faint);
	letter-spacing: 0.05em;
}

#archetypeName {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--gold-light);
	text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
}

.archetype-icon {
	width: 20px;
	height: 20px;
	color: var(--gold);
	flex-shrink: 0;
}

#resultRate #archetypeDesc {
	display: block;
	background: transparent;
	border: none;
	padding: 0;
	margin-top: 4px;
	font-size: 0.72rem;
	color: var(--text-primary);
	text-align: center;
}

.pending-reveal {
	opacity: 0;
	transform: scale(0.6) rotateY(90deg);
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pending-reveal.revealed {
	opacity: 1;
	transform: scale(1) rotateY(0deg);
}

#resultsContainer {
	/* 투명이면 공유 이미지 캡처 시(html2canvas) 배경이 흰색으로 떨어져 반투명 박스들이
	   깨져 보이므로, 항상 불투명한 테마 배경을 명시한다 */
	background: linear-gradient(165deg, var(--panel-1) 0%, var(--panel-2) 55%, var(--panel-1) 100%);
	border-radius: 12px;
	padding: 12px 4px;
}

/* 저장/공유 전용 카드. 화면엔 절대 안 보이고 캡처될 때만 쓰인다(고정 픽셀 폭 + 화면 밖
   위치라야 html2canvas가 항상 같은 결과물을 뽑는다). 예전엔 인스타그램 피드(4:5) 비율에
   맞춰 높이도 고정(450px)이었는데, 저장한 이미지에 육각 레이더 차트도 담아달라는 피드백으로
   내용물 기준으로 높이가 자연스럽게 늘어나게 바꿨다(scale:3 캡처 시 실제 폭 1080px). */
#shareCard {
	position: fixed;
	left: -9999px;
	top: 0;
	width: 360px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 18px;
	background: radial-gradient(circle at 50% 20%, var(--panel-2) 0%, var(--panel-1) 60%, #05030a 100%);
	border: 3px solid var(--gold);
	color: var(--text-primary);
	font-family: var(--font-body);
}

.share-card-brand {
	text-align: center;
	font-size: 0.6rem;
	letter-spacing: 0.05em;
	color: var(--gold-dim);
}

.share-card-headline {
	font-family: var(--font-display);
	text-align: center;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--gold-light);
	line-height: 1.35;
	margin: 8px 0 12px;
	text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
}

.share-card-photos {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.share-card-photo-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}

.share-card-photo-box img {
	width: 128px;
	height: 160px;
	object-fit: cover;
	border-radius: 10px;
	border: 2px solid var(--gold);
	box-shadow: 0 0 14px rgba(212, 175, 55, 0.3);
}

.share-card-photo-box .face-hidden-overlay {
	border-radius: 10px;
}

.share-card-photo-box .face-hidden-icon {
	width: 26px;
	height: 26px;
}

.share-card-photo-box .face-hidden-overlay span {
	font-size: 0.72rem;
}

.share-card-photo-box span {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--text-primary);
}

.share-card-vs {
	font-family: var(--font-display);
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--gold);
}

#shareCardBadges {
	display: flex;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 12px;
}

#shareCardBadges .badge {
	background-color: rgba(0, 0, 0, 0.4);
	border: 1px solid var(--gold);
	color: var(--text-primary);
	border-radius: 12px;
	padding: 3px 10px;
	font-size: 0.68rem;
	font-weight: 600;
}

#shareCardTier {
	text-align: center;
	font-size: 0.82rem;
	font-weight: 700;
	color: #1a1035;
	background: var(--gold);
	border-radius: 6px;
	padding: 7px;
	margin-top: 12px;
}

.share-card-cta {
	text-align: center;
	margin-top: 10px;
}

.share-card-cta-hook {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--gold-soft);
	margin-bottom: 2px;
}

.share-card-cta-url {
	font-size: 0.65rem;
	color: var(--text-faint);
}

/* 저장 이미지에 포함되는 육각 레이더 차트 — #radarChart/#radarLegend 등 온페이지 카드와
   같은 id/class를 재사용해 같은 스타일을 그대로 물려받는다(캡처 전용 요소라 문서 안에서
   id가 중복돼도 실제 기능상 충돌은 없음). */
#shareCardRadar {
	display: flex;
	justify-content: center;
	margin-top: 8px;
}

footer {
	color: var(--text-faint);
	position: fixed;
	bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 0.7rem;
	width: 500px;
	height: 30px;
	margin: 1rem;
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid var(--gold-dim);
	background: rgba(26, 16, 53, 0.9);
	z-index: 2;
}

footer:hover {
	transition: background-color 0.1s ease;
	background-color: rgba(45, 27, 78, 0.9);
}

footer:active {
	transform: scale(0.98);
}

.footer-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#pText {
	margin: 0;
	color: var(--text-faint);
}

#privacyNote {
	margin: 14px auto 0;
	max-width: 320px;
	font-size: 0.62rem;
	line-height: 1.5;
	color: var(--text-faint);
	opacity: 0.75;
	text-align: center;
}

@media (max-width: 600px) {
	.container {
		padding: 30px 5px 20px;
		max-width: 480px;
	}

	#window {
		width: 95%;
	}
	#resultsContainer {
		width: 100%;
	}

	#averageResult {
		width: 100%;
	}

	#resultRate {
		width: 100%;
	}

	footer {
		width: 95%;
	}
}

[hidden] { display: none !important; }
.share-disclaimer { font-size: 10px; line-height: 1.5; color: var(--text-muted); text-align: center; margin: 10px 8px; }
#uploadedImage:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 4px; }
.step-label { white-space: normal; }
#privacyNote { line-height: 1.6; }

.culture-note { text-align: left; margin: 18px 0; padding: 14px; border: 1px solid var(--gold-dim); border-radius: 12px; }
.culture-note summary { cursor: pointer; color: var(--gold-light); font-size: 14px; }
.culture-note p { font-size: 12px; line-height: 1.7; margin-top: 10px; color: var(--text-muted); width: auto; }
#howItWorks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#howItWorks .step { min-width: 0; }
#howItWorks .step-label { white-space: normal; }
#howItWorks .step-arrow { display: none; }
.reading-legend-item { white-space: normal; line-height: 1.5; }
.reading-match { flex-wrap: nowrap; align-items: center; text-align: left; }
.reading-match p { min-width: 0; }
#shareCard .reading-match { display: flex; gap: 6px; margin: 6px 0; }
#shareCard .reading-match p { margin: 0; font-size: 11px; line-height: 1.5; }