/* =========================================================================
   AllAroundPlay Tools — UI styles (테마 네이비/골드 톤)
   ========================================================================= */
.aap-tool {
	--t-navy: #0b1f33;
	--t-gold: #b3864b;
	--t-gold-d: #9c7338;
	--t-beige: #f4eee3;
	--t-line: #dce1e6;
	max-width: 720px;
	margin: 0 auto;
}
.aap-tool * { box-sizing: border-box; }

.aap-tool-card {
	background: #fff;
	border: 1px solid #eceff2;
	border-radius: 14px;
	padding: 28px;
	box-shadow: 0 12px 34px rgba(11, 31, 51, 0.08);
}
.aap-tool-sub {
	color: #5a6976;
	font-size: 0.95rem;
	margin: 0 0 20px;
}
.aap-field { margin-bottom: 16px; }
.aap-field > label {
	display: block;
	font-weight: 600;
	color: var(--t-navy);
	margin-bottom: 7px;
	font-size: 0.92rem;
}
.aap-tool input[type="text"],
.aap-tool input[type="number"],
.aap-tool select,
.aap-tool textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--t-line);
	border-radius: 9px;
	font-size: 1rem;
	font-family: inherit;
	color: var(--t-navy);
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.aap-tool textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.aap-tool input:focus,
.aap-tool select:focus,
.aap-tool textarea:focus {
	outline: none;
	border-color: var(--t-gold);
	box-shadow: 0 0 0 3px rgba(179, 134, 75, 0.15);
}
.aap-row { display: flex; gap: 12px; flex-wrap: wrap; }
.aap-row > * { flex: 1 1 0; min-width: 0; }

.aap-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 12px 20px;
	border: 1.5px solid var(--t-gold);
	border-radius: 9px;
	background: var(--t-gold);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.aap-btn:hover { background: var(--t-gold-d); border-color: var(--t-gold-d); }
.aap-btn:active { transform: translateY(1px); }
.aap-btn.is-ghost { background: transparent; color: var(--t-gold); }
.aap-btn.is-ghost:hover { background: var(--t-gold); color: #fff; }
.aap-btn.is-navy { background: var(--t-navy); border-color: var(--t-navy); }
.aap-btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

.aap-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 4px 16px 4px 0;
	font-size: 0.95rem;
	color: var(--t-navy);
	cursor: pointer;
}
.aap-check input { width: 18px; height: 18px; accent-color: var(--t-gold); }

.aap-range { display: flex; align-items: center; gap: 14px; }
.aap-range input[type="range"] { flex: 1; accent-color: var(--t-gold); }
.aap-range-val {
	min-width: 52px;
	text-align: center;
	font-weight: 700;
	color: var(--t-gold-d);
	background: var(--t-beige);
	border-radius: 7px;
	padding: 6px 0;
}

.aap-result {
	margin-top: 22px;
	background: var(--t-beige);
	border-radius: 11px;
	padding: 20px 22px;
	color: var(--t-navy);
}
.aap-result-big {
	font-size: 1.7rem;
	font-weight: 800;
	color: var(--t-gold-d);
	word-break: break-all;
}
.aap-out-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-top: 22px;
}
.aap-out-item {
	background: var(--t-beige);
	border-radius: 11px;
	padding: 16px 18px;
}
.aap-out-item .k { font-size: 0.85rem; color: #6a7884; margin-bottom: 4px; }
.aap-out-item .v { font-size: 1.3rem; font-weight: 800; color: var(--t-navy); }
.aap-out-item .v small { font-size: 0.8rem; font-weight: 600; color: #6a7884; margin-left: 3px; }

.aap-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.aap-stat {
	text-align: center;
	background: var(--t-beige);
	border-radius: 11px;
	padding: 16px 8px;
}
.aap-stat .n { font-size: 1.5rem; font-weight: 800; color: var(--t-gold-d); }
.aap-stat .l { font-size: 0.82rem; color: #6a7884; margin-top: 3px; }

.aap-output-box {
	margin-top: 16px;
	background: var(--t-navy);
	color: #f1f4f7;
	border-radius: 10px;
	padding: 16px 18px;
	font-family: "Cascadia Code", Consolas, monospace;
	font-size: 1.05rem;
	word-break: break-all;
	min-height: 54px;
}
.aap-emoji-out {
	margin-top: 16px;
	background: var(--t-beige);
	border-radius: 10px;
	padding: 18px;
	font-size: 1.6rem;
	line-height: 1.8;
	word-break: break-word;
	min-height: 60px;
}
.aap-qr-wrap { display: flex; justify-content: center; margin-top: 20px; }
.aap-qr-wrap > div, .aap-qr-wrap canvas, .aap-qr-wrap img {
	background: #fff; padding: 14px; border-radius: 10px;
	box-shadow: 0 6px 18px rgba(11, 31, 51, 0.12);
}
.aap-note { font-size: 0.85rem; color: #6a7884; margin-top: 12px; }
.aap-error { color: #c0392b; font-size: 0.9rem; margin-top: 10px; }
.aap-swap {
	flex: 0 0 auto;
	min-width: 44px;
	width: 44px;
	height: 44px;
	align-self: end;
	border: 1px solid var(--t-line);
	border-radius: 9px;
	background: #fff;
	cursor: pointer;
	font-size: 1.1rem;
	color: var(--t-navy);
}
.aap-swap:hover { background: var(--t-beige); }

@media (max-width: 600px) {
	.aap-tool-card { padding: 20px; }
	.aap-out-grid { grid-template-columns: 1fr; }
	.aap-stats { grid-template-columns: repeat(2, 1fr); }
	.aap-result-big { font-size: 1.4rem; }
}