.board.svelte-in4f42 {
		display: grid;
		/* 내용(숫자·X 버튼) 유무와 관계없이 9칸 크기를 고정 */
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: repeat(3, minmax(0, 1fr));
		gap: 6px;
		width: 100%;
		aspect-ratio: 1;
		padding: 6px;
		background: var(--primary);
		border-radius: 14px;
	}

	.cell-wrap.svelte-in4f42 {
		position: relative;
		/* 칸 크기에 비례해 숫자 크기를 정하기 위한 기준 */
		container-type: inline-size;
	}

	.cell.svelte-in4f42 {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 3px solid transparent;
		border-radius: 10px;
		background: var(--surface);
		color: var(--text);
		cursor: pointer;
		overflow: hidden;
		transition: border-color 0.15s, background-color 0.15s;
	}

	.cell.selected.svelte-in4f42 {
		border-color: var(--primary-light);
		background: #dbeafe;
		box-shadow: inset 0 0 0 2px var(--primary-light);
	}

	.value.svelte-in4f42 {
		position: relative;
		z-index: 2;
		font-size: clamp(2rem, 12vw, 4.2rem);
		font-size: 55cqw;
		font-weight: 800;
		line-height: 1;
		/* O 표시 위에서도 숫자가 또렷하게 보이도록 흰 테두리 */
		text-shadow:
			0 0 3px #fff,
			0 0 3px #fff,
			0 0 6px #fff;
	}

	.o-mark.svelte-in4f42 {
		position: absolute;
		z-index: 1;
		inset: 10%;
		border: 7px solid rgba(220, 38, 38, 0.7);
		border-radius: 50%;
		pointer-events: none;
	}

	.clear.svelte-in4f42 {
		position: absolute;
		z-index: 3;
		top: 0;
		right: 0;
		/* 칸이 작아지면 ✕도 같이 작아져 숫자를 가리지 않게 함 */
		width: clamp(20px, 30cqw, 32px);
		height: clamp(20px, 30cqw, 32px);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: none;
		background: transparent;
		color: var(--accent);
		font-size: clamp(0.7rem, 15cqw, 1.05rem);
		font-weight: 900;
		line-height: 1;
		cursor: pointer;
	}


	.pad.svelte-1clxxl5 {
		display: grid;
		flex-shrink: 0;
		grid-template-columns: repeat(5, 1fr);
		gap: 6px;
		width: 100%;
	}

	.num.svelte-1clxxl5 {
		min-height: 44px;
		padding: 0;
		border: 2px solid var(--primary);
		border-radius: 10px;
		background: var(--surface);
		color: var(--primary);
		font-size: 1.35rem;
		font-weight: 700;
		cursor: pointer;
		transition: background-color 0.1s, opacity 0.15s;
	}

	.num.svelte-1clxxl5:not(:disabled):active {
		background: var(--primary);
		color: #fff;
	}

	.num.svelte-1clxxl5:disabled {
		cursor: default;
		opacity: 0.45;
	}

	/* 이미 사용한 숫자는 선택 가능 여부와 구분되게 표시 */
	.num.used.svelte-1clxxl5 {
		opacity: 1;
		border-color: var(--border);
		background: var(--disabled);
		color: #94a3b8;
		text-decoration: line-through;
	}

	@media (max-height: 560px) {
		.pad.svelte-1clxxl5 {
			gap: 5px;
		}

		.num.svelte-1clxxl5 {
			min-height: 40px;
			font-size: 1.25rem;
		}
	}


	section.svelte-1p9zoga {
		width: 100%;
		padding: 16px 18px;
		border-radius: 12px;
		background: var(--surface);
	}

	h2.svelte-1p9zoga {
		margin: 0 0 8px;
		font-size: 1rem;
	}

	ol.svelte-1p9zoga {
		margin: 0;
		padding-left: 1.3em;
		color: var(--text-sub);
		line-height: 1.6;
	}

	li.svelte-1p9zoga + li:where(.svelte-1p9zoga) {
		margin-top: 4px;
	}

	.notice.svelte-1p9zoga {
		border: 2px solid #fca5a5;
		background: #fef2f2;
	}

	.notice.svelte-1p9zoga h2:where(.svelte-1p9zoga) {
		color: var(--accent);
	}

	.notice.svelte-1p9zoga p:where(.svelte-1p9zoga) {
		margin: 0;
		color: #991b1b;
		font-weight: 600;
		line-height: 1.5;
	}


	.toggle.svelte-4myszd {
		display: inline-flex;
		padding: 3px;
		border-radius: 999px;
		background: var(--disabled);
	}

	button.svelte-4myszd {
		min-height: 28px;
		padding: 0 10px;
		border: none;
		border-radius: 999px;
		background: transparent;
		color: var(--text-sub);
		font-size: 0.75rem;
		font-weight: 600;
		cursor: pointer;
	}

	button.active.svelte-4myszd {
		background: var(--surface);
		color: var(--primary);
		box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
	}

	@media (max-height: 560px) {
		button.svelte-4myszd {
			min-height: 24px;
		}
	}


	.overlay.svelte-zaoa5g {
		position: fixed;
		z-index: 100;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
		background: rgba(15, 23, 42, 0.45);
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
	}

	.panel.svelte-zaoa5g {
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 100%;
		max-width: 448px;
		max-height: 100%;
		padding: 12px;
		border-radius: 16px;
		background: var(--bg);
		box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
	}

	.panel-top.svelte-zaoa5g {
		display: flex;
		justify-content: flex-end;
	}

	/* 내용이 길면 이 영역만 스크롤되고 확인 버튼은 항상 보이게 함 */
	.panel-body.svelte-zaoa5g {
		display: flex;
		flex-direction: column;
		gap: 10px;
		min-height: 0;
		overflow-y: auto;
	}

	.confirm.svelte-zaoa5g {
		flex-shrink: 0;
		width: 100%;
		min-height: 48px;
		border: none;
		border-radius: 10px;
		background: var(--primary);
		color: #fff;
		font-size: 1.05rem;
		font-weight: 700;
		cursor: pointer;
	}


	/* 화면에 보이는 높이에 맞춰 모든 요소가 스크롤 없이 한 화면에 들어오도록 함 */
	main.svelte-1n46o8q {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		max-width: 480px;
		height: 100vh;
		height: 100dvh;
		margin: 0 auto;
		padding: 8px 16px calc(12px + env(safe-area-inset-bottom));
	}

	.topbar.svelte-1n46o8q {
		display: flex;
		justify-content: flex-end;
		width: 100%;
		margin-bottom: -8px;
	}

	/* 기본은 너비만큼의 정사각형, 화면 높이가 모자라면 그만큼만 줄어듦 (PC처럼 높이가 남아도 늘어나지 않음) */
	.board-area.svelte-1n46o8q {
		flex: 0 1 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		aspect-ratio: 1;
		min-height: 180px;
		container-type: size;
	}

	/* 남은 공간의 너비·높이 중 작은 쪽에 맞춘 정사각형 (구형 브라우저는 vh 기준 계산값 사용) */
	.board-box.svelte-1n46o8q {
		width: min(100%, calc(100vh - 330px));
		width: min(100%, calc(100dvh - 330px));
		width: min(100cqw, 100cqh);
	}

	header.svelte-1n46o8q {
		text-align: center;
	}

	.event.svelte-1n46o8q {
		margin: 0;
		color: var(--primary-light);
		font-size: 0.7rem;
		font-weight: 800;
		letter-spacing: 0.2em;
	}

	/* ? 버튼은 제목 오른쪽에 붙이되 제목 자체는 가운데 정렬 유지 */
	.title-row.svelte-1n46o8q {
		position: relative;
		display: inline-block;
	}

	h1.svelte-1n46o8q {
		margin: 0;
		color: var(--primary);
		font-size: 1.45rem;
		line-height: 1.25;
	}

	.help.svelte-1n46o8q {
		position: absolute;
		top: 50%;
		left: calc(100% + 6px);
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 2px solid var(--primary);
		border-radius: 50%;
		background: var(--surface);
		color: var(--primary);
		font-size: 0.85rem;
		font-weight: 800;
		line-height: 1;
		transform: translateY(-50%);
		cursor: pointer;
	}

	.hint.svelte-1n46o8q {
		width: 100%;
		margin: 0;
		padding: 7px 10px;
		border-radius: 10px;
		background: #e0e7ff;
		color: var(--primary);
		font-size: 0.82rem;
		line-height: 1.35;
		font-weight: 600;
		text-align: center;
	}

	.hint.done.svelte-1n46o8q {
		background: #fee2e2;
		color: #991b1b;
	}

	.submit.svelte-1n46o8q {
		width: 100%;
		flex-shrink: 0;
		min-height: 48px;
		border: none;
		border-radius: 10px;
		background: var(--primary);
		color: #fff;
		font-size: 1.05rem;
		font-weight: 700;
		cursor: pointer;
	}

	.submit.svelte-1n46o8q:disabled {
		background: var(--border);
		color: var(--text-sub);
		cursor: default;
	}

	.submitted.svelte-1n46o8q {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		width: 100%;
		padding: 10px;
		border-radius: 12px;
		background: var(--surface);
		border: 2px solid var(--primary);
	}

	.submitted.svelte-1n46o8q .label:where(.svelte-1n46o8q) {
		color: var(--text-sub);
		font-size: 0.8rem;
		font-weight: 600;
	}

	.submitted.svelte-1n46o8q strong:where(.svelte-1n46o8q) {
		color: var(--primary);
		font-size: 1.2rem;
		font-variant-numeric: tabular-nums;
	}

	/* PC·태블릿처럼 화면이 넓으면 전체 묶음을 세로 가운데에 배치 */
	@media (min-width: 768px) {
		main.svelte-1n46o8q {
			justify-content: center;
		}
	}

	/* 높이가 낮은 화면(작은 폰, 인앱 브라우저)에서는 한 단계 더 촘촘하게 */
	@media (max-height: 560px) {
		main.svelte-1n46o8q {
			gap: 6px;
			padding-top: 6px;
			padding-bottom: calc(8px + env(safe-area-inset-bottom));
		}

		.topbar.svelte-1n46o8q {
			margin-bottom: -4px;
		}

		.event.svelte-1n46o8q {
			font-size: 0.65rem;
		}

		h1.svelte-1n46o8q {
			font-size: 1.3rem;
		}

		.hint.svelte-1n46o8q {
			padding: 5px 8px;
			font-size: 0.78rem;
		}

		.submit.svelte-1n46o8q {
			min-height: 42px;
		}
	}