/* 엽전 주역 점 (Coin Fortune Telling) — 전 클래스 cft- 접두사, 테마 간섭 방어 */

.cft-wrap {
	--cft-bg: #fdfaf3;
	--cft-fg: #2b2118;
	--cft-muted: #7b6a55;
	--cft-line: #e2d6bf;
	--cft-accent: #8a2c28;
	--cft-gold: #a8813c;

	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 32px 28px 28px;
	background: var(--cft-bg);
	border: 1px solid var(--cft-line);
	border-radius: 16px;
	color: var(--cft-fg);
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Malgun Gothic", sans-serif;
	line-height: 1.6;
}

.cft-wrap *,
.cft-wrap *::before,
.cft-wrap *::after {
	box-sizing: border-box;
}

/* 테마 전역 div/p 마진 간섭 차단.
   :where() 로 감싸 특이도를 (0,1,0) 으로 낮춘다 — 테마의 div{margin}(0,0,1) 은 계속 이기면서,
   뒤에 오는 우리 .cft-xxx{margin} 규칙은 눌러버리지 않는다.
   (일반 자손 선택자로 쓰면 (0,1,1) 이 되어 아래 여백 규칙이 전부 무효화된다 — 실제로 겪은 버그.) */
.cft-wrap :where(div, p, h3, h4, h5, section) {
	margin: 0;
}

.cft-title {
	margin: 0 0 8px;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--cft-fg);
}

.cft-lead {
	margin: 0 0 18px;
	color: var(--cft-muted);
	font-size: 0.95rem;
}

.cft-lead-sub {
	font-size: 0.86rem;
	opacity: 0.85;
}

/* 진행 표시 */
.cft-progress {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 0 0 18px;
}

.cft-step {
	padding: 4px 12px;
	border: 1px solid var(--cft-line);
	border-radius: 999px;
	font-size: 0.78rem;
	color: var(--cft-muted);
	background: #fff;
	transition: all 0.2s ease;
}

.cft-step.is-done {
	background: var(--cft-gold);
	border-color: var(--cft-gold);
	color: #fff;
}

.cft-step.is-active {
	border-color: var(--cft-accent);
	color: var(--cft-accent);
	font-weight: 700;
}

/* 엽전 무대 */
.cft-stage {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 18px;
	padding: 10px 0 6px;
	cursor: pointer;
	outline: none;
	perspective: 900px;
}

.cft-stage:focus-visible {
	border-radius: 12px;
	box-shadow: 0 0 0 3px rgba(168, 129, 60, 0.35);
}

.cft-coin {
	width: 86px;
	height: 86px;
	position: relative;
	/* 그림자는 반드시 여기(회전하지 않는 부모)에 건다.
	   filter 는 그룹핑 속성이라 같은 요소의 transform-style: preserve-3d 를 평면화시켜
	   backface-visibility 를 무력화한다 -> 뒷면 대신 앞면의 거울상이 보이게 된다. */
	filter: drop-shadow(0 6px 8px rgba(60, 40, 10, 0.25));
}

.cft-coin-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.cft-coin.is-back .cft-coin-inner {
	transform: rotateY(180deg);
}

/* 던지는 중: 회전 + 튀어오름 */
.cft-coin.is-tossing .cft-coin-inner {
	animation: cft-toss 0.85s ease-in-out;
}

.cft-coin:nth-child(2).is-tossing .cft-coin-inner {
	animation-delay: 0.08s;
}

.cft-coin:nth-child(3).is-tossing .cft-coin-inner {
	animation-delay: 0.16s;
}

@keyframes cft-toss {
	0%   { transform: translateY(0) rotateY(0deg) rotateZ(0deg); }
	35%  { transform: translateY(-46px) rotateY(720deg) rotateZ(-12deg); }
	70%  { transform: translateY(-14px) rotateY(1260deg) rotateZ(8deg); }
	100% { transform: translateY(0) rotateY(1800deg) rotateZ(0deg); }
}

.cft-face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.cft-face-back {
	transform: rotateY(180deg);
}

.cft-coin-svg {
	display: block;
	width: 100%;
	height: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.cft-coin.is-tossing .cft-coin-inner {
		animation: none;
	}

	.cft-coin-inner {
		transition: none;
	}
}

/* 버튼 */
.cft-actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 6px;
}

.cft-wrap .cft-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 20px;
	border: 1px solid var(--cft-gold);
	border-radius: 999px;
	background: var(--cft-gold);
	color: #fff !important;
	font-size: 0.92rem;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.1s ease;
	text-decoration: none;
	box-shadow: none;
}

.cft-wrap .cft-btn:hover {
	filter: brightness(1.06);
}

.cft-wrap .cft-btn:active {
	transform: translateY(1px);
}

.cft-wrap .cft-btn[disabled] {
	opacity: 0.5;
	cursor: default;
}

/* .cft-btn 의 display:inline-flex 가 브라우저 기본 [hidden]{display:none} 을 이기므로 명시적으로 되돌린다 */
.cft-wrap .cft-btn[hidden] {
	display: none;
}

.cft-wrap .cft-btn-ghost {
	background: transparent;
	color: var(--cft-gold) !important;
}

.cft-status {
	min-height: 22px;
	margin: 4px 0 0;
	font-size: 0.86rem;
	color: var(--cft-muted);
}

/* 던진 기록 (특이도 주의 — 위 리셋을 이기려면 .cft-wrap 을 붙인다) */
.cft-wrap .cft-throws {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 20px 0 0;
}

.cft-throw-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: #fff;
	border: 1px solid var(--cft-line);
	border-radius: 12px;
	font-size: 0.86rem;
}

.cft-throw-chip .cft-chip-idx {
	color: var(--cft-muted);
	font-size: 0.78rem;
}

.cft-throw-chip .cft-chip-sym {
	font-size: 1.15rem;
	line-height: 1;
	color: var(--cft-accent);
}

.cft-throw-chip .cft-chip-coins {
	letter-spacing: 1px;
	color: var(--cft-muted);
	font-size: 0.78rem;
}

.cft-throw-chip.is-moving {
	border-color: var(--cft-accent);
}

/* 결과 카드 — 던진 기록 칩들과 확실히 떨어뜨린다 */
.cft-wrap .cft-result {
	margin-top: 32px;
}

.cft-wrap .cft-card {
	text-align: left;
	background: #fff;
	border: 1px solid var(--cft-line);
	border-radius: 14px;
	padding: 26px 24px;
	animation: cft-fade 0.5s ease;
}

@keyframes cft-fade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.cft-card-head {
	display: flex;
	align-items: center;
	gap: 18px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--cft-line);
}

.cft-hexsymbol {
	flex: 0 0 auto;
	font-size: 3.4rem;
	line-height: 1;
	color: var(--cft-accent);
}

.cft-hexsymbol-sm {
	font-size: 1.4rem;
	color: var(--cft-accent);
	vertical-align: -2px;
}

.cft-hexno {
	display: inline-block;
	font-size: 0.75rem;
	color: var(--cft-muted);
}

.cft-card-title h4 {
	margin: 2px 0 4px;
	font-size: 1.35rem;
	font-weight: 700;
}

.cft-hanja {
	font-size: 0.9rem;
	color: var(--cft-muted);
	font-weight: 400;
}

.cft-keyword {
	color: var(--cft-accent);
	font-size: 0.95rem;
	font-weight: 600;
}

.cft-trigram {
	margin-top: 4px;
	font-size: 0.82rem;
	color: var(--cft-muted);
}

.cft-card-body {
	display: flex;
	gap: 28px;
	padding-top: 24px;
}

/* 6효 그림 */
.cft-hexlines {
	flex: 0 0 132px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.cft-line {
	display: flex;
	align-items: center;
	gap: 6px;
}

.cft-line-no {
	width: 12px;
	font-size: 0.7rem;
	color: var(--cft-muted);
}

.cft-line-bar {
	display: flex;
	gap: 6px;
	width: 76px;
	height: 12px;
}

.cft-line-bar i {
	display: block;
	height: 100%;
	background: var(--cft-fg);
	border-radius: 2px;
}

.cft-line-yang .cft-line-bar i {
	flex: 1;
}

.cft-line-yang .cft-line-bar i:last-child {
	display: none;
}

.cft-line-yin .cft-line-bar i {
	flex: 1;
}

.cft-line-moving .cft-line-bar i {
	background: var(--cft-accent);
}

.cft-line-tag {
	font-size: 0.68rem;
	color: var(--cft-accent);
}

.cft-readings {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.cft-readings h5 {
	margin: 0 0 4px;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--cft-muted);
	letter-spacing: 0.04em;
}

.cft-readings p {
	font-size: 0.95rem;
	word-break: keep-all;
	/* 카드는 본문 폭 100% 를 채우되, 읽는 줄은 너무 길지 않게 */
	max-width: 74ch;
}

/* 조언: 앞의 '운세 풀이' 와 한 칸 더 띄운다 */
.cft-wrap .cft-advice {
	margin-top: 8px;
}

.cft-wrap .cft-advice p {
	padding: 14px 16px;
	background: #fbf5e9;
	border-left: 3px solid var(--cft-gold);
	border-radius: 0 8px 8px 0;
}

/* 변해 가는 괘: 위쪽 구분선과 넉넉히 떨어뜨린다 */
.cft-wrap .cft-changed {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px dashed var(--cft-line);
}

.cft-wrap .cft-changed h5 {
	margin-bottom: 10px;
}

.cft-wrap .cft-changed-name {
	margin-bottom: 8px;
}

.cft-changed h5 {
	margin: 0 0 6px;
	font-size: 0.8rem;
	color: var(--cft-muted);
	font-weight: 700;
}

.cft-muted {
	color: var(--cft-muted);
	font-weight: 400;
}

.cft-changed-name {
	font-size: 1rem;
	margin-bottom: 4px;
}

.cft-changed-text {
	font-size: 0.92rem;
	color: var(--cft-fg);
	word-break: keep-all;
}

.cft-disclaimer {
	margin-top: 16px;
	font-size: 0.75rem;
	color: var(--cft-muted);
	text-align: center;
}

/* 반응형 */
@media (max-width: 600px) {
	.cft-wrap {
		padding: 20px 14px;
	}

	.cft-coin {
		width: 68px;
		height: 68px;
	}

	.cft-stage {
		gap: 12px;
	}

	.cft-card-body {
		flex-direction: column;
		align-items: center;
	}

	.cft-hexlines {
		flex: 0 0 auto;
	}

	.cft-readings {
		width: 100%;
	}
}

/* 다크모드 (sw-simple-dark-mode: body.dark-mode) */
body.dark-mode .cft-wrap {
	--cft-bg: #23272e;
	--cft-fg: #ececec;
	--cft-muted: #a8a29a;
	--cft-line: #3a3f47;
	--cft-accent: #e2857f;
	--cft-gold: #c9a35b;
	background: var(--cft-bg) !important;
	border-color: var(--cft-line) !important;
}

body.dark-mode .cft-step,
body.dark-mode .cft-throw-chip,
body.dark-mode .cft-card {
	background: #1c2026 !important;
	border-color: var(--cft-line) !important;
}

body.dark-mode .cft-step.is-done {
	background: var(--cft-gold) !important;
	color: #1c2026 !important;
}

body.dark-mode .cft-wrap .cft-btn {
	color: #1c2026 !important;
}

body.dark-mode .cft-wrap .cft-btn-ghost {
	color: var(--cft-gold) !important;
}

body.dark-mode .cft-line-bar i {
	background: #ececec;
}

body.dark-mode .cft-line-moving .cft-line-bar i {
	background: var(--cft-accent);
}

body.dark-mode .cft-advice p {
	background: rgba(201, 163, 91, 0.12) !important;
}

body.dark-mode .cft-title,
body.dark-mode .cft-card-title h4,
body.dark-mode .cft-readings p,
body.dark-mode .cft-changed-text {
	color: var(--cft-fg) !important;
}