@media (max-width: 700px) {
	header {
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 100vw;
    	margin: 0;
    	z-index: 2000;
  	}
  	.header-inner {
    	max-width: 100vw;
    	margin: 0;
    	padding-left: 0.7rem;
    	padding-right: 0.7rem;
  	}
  	body {
    	padding-top: 66px !important;
  	}
      .nav-pc { display: none; }
    .hamburger { display: flex; }
    .nav-sp {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0; left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(255,251,232,0.97);
        z-index: 1200;
        align-items: center;
        justify-content: center;
        gap: 2.2rem;
        font-size: 1.26rem;
        transition: opacity 0.22s;
        pointer-events: none;
        opacity: 0;
    }
    .nav-sp.active {
        opacity: 1;
        pointer-events: auto;
    }
    .hamburger.open span:nth-child(1) {
        transform: translateY(1rem) rotate(45deg);
    }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) {
        transform: translateY(-0.5rem) rotate(-45deg);
    }
    .search-cloud-box {
        min-width: 0;
        width: 90vw;
        padding: 1rem 0.7rem;
    }
    .search-heading { font-size: 1.13rem; white-space: nowrap; letter-spacing: 0.05em; }
    .catch-copy { font-size: 0.98rem; }
    .search-sub { font-size: 0.96rem; }
    .search-chick { height: 110px; }
    .list-li { display: block; }
    .rules-section { padding: 1rem 0.3rem; }
    .rules-heading { font-size: 1.25rem; }
    .rules-summary.card { padding: 0.7rem; font-size: 0.98rem; }
    .rules-details h4 { font-size: 1rem; }
    .rules-details li { font-size: 0.98rem; }
    .rules-section { padding: 1.1rem 0.3rem; }
    .rules-heading { font-size: 1.23rem; margin-bottom: 1.1rem; }
    .rules-summary.card { padding: 0.8rem 0.7rem 0.7rem 0.7rem; font-size: 0.97rem; margin-bottom: 1.5rem; }
    .rules-summary-title { font-size: 1rem; }
    .rules-details h4 { font-size: 1rem; padding-left: 0.35em; }
    .rules-details li, .rules-summary-list { font-size: 0.98rem; }
    .rules-details-box { padding: 1rem 0.4rem; }
    .rules-details h4 { font-size: 1rem; padding-left: 0.32em; }
    .rules-details li { font-size: 0.98rem; }
    .rules-possible-box { flex-direction: column; gap: 1rem; }
    .rules-possible-ok, .rules-possible-ng {
        min-width: 0; max-width: 100%; margin: 0 auto; padding: 0.8rem 0.7rem; font-size: 0.99rem;
    }
    .footer-links-grid {
      	flex-direction: column;
      	gap: 1.2rem;
      	align-items: flex-start;
    }
    .footer-group {
        min-width: 0;
        width: 100%;
        gap: 0.12em;
    }




}

@media (max-width: 900px) {
  	.cloud-card { flex-direction: column; gap:15px; padding: 18px 9px;}
  	.music-thumb { width: 100%; }
  	.thumb-img { width: 100%; height: auto; }
}

@media (max-width: 700px) {
  	.YouTube-contents {
    	flex-direction: column;
    	gap: 1rem;
  	}
  	.YouTube-info,
  	.YouTube-overview {
    	width: 100%;
  	}
}

@media (max-width: 900px) {
  	.recommend-card {
    	flex-direction: column;
    	align-items: stretch;
    	padding: 1rem 0.7rem;
    	gap: 13px;
    	min-height: 0;
  	}
  	.recommend-card .card-thumb {
    	width: 100%;
    	min-width: 0;
    	height: 26vw;
    	max-height: 165px;
    	margin: 0 auto;
  	}
  	.recommend-card .card-thumb lite-youtube {
    	width: 100% !important;
    	height: 100% !important;
    	min-width: 0;
    	max-height: 165px;
  	}
}

@media (max-width:700px) {
  	.cloud-card {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 14px;
		padding: 15px 2vw;
  	}
  	.music-meta {
		width: 100%;
		align-items: center;
		text-align: center;
		margin: 0 auto;
		padding: 0;
 	 }
	.music-title-row,
	.music-info-list,
	.music-controls {
		justify-content: center !important;
		align-items: center !important;
		text-align: center !important;
		gap: 9px;
		flex-wrap: wrap;
	}
	.music-title-row {
		flex-direction: column;
		gap: 8px;
		margin-bottom: 8px;
	}
	.music-category, .music-date {
		margin-left: 0 !important;
		margin-top: 2px;
	}
	.music-description {
		text-align: center;
		margin-bottom: 12px;
	}
}

@media (max-width:700px) {
	.pagination {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		justify-content: center;
		align-items: center;
		gap: 6px;
		padding: 8px 0 8px 0;
		margin: 0 auto 20px auto;
		width: 100vw;
		max-width: 100vw;
		box-sizing: border-box;
		scroll-behavior: smooth;
	}
	.pagination .page-link,
	.pagination .next-page {
		min-width: 2.2em;
		font-size: 1.04em;
		padding: 6px 12px;
		margin: 0 1px;
		border-radius: 9px;
		display: inline-block;
		text-align: center;
		background: #fff;
		color: #2688c7;
		border: 1.5px solid #aad8fa;
		box-shadow: 0 1px 4px #fff4b799;
		transition: background 0.1s;
		flex-shrink: 0;
	}
	.pagination .page-link.active {
		background: #ffe6b6;
		color: #bb8e29;
		border-color: #ffd966;
		font-weight: bold;
	}
}

@media (max-width:700px) {
	.music-controls {
		justify-content: center !important;
		align-items: center !important;
		text-align: center !important;
		width: 100%;
		gap: 12px;
	}
	.main-btn, .detail-btn {
		margin: 0 2px 6px 2px;
		width: auto;
		min-width: 88px;
	}
}

@media (max-width:700px) {
  	.music-thumb {
    	width: 90vw !important;
    	max-width: 420px;
    	margin: 0 auto 10px auto;
    	display: flex;
    	justify-content: center;
  	}
  	.music-thumb img,
  	.music-thumb lite-youtube {
    	width: 100% !important;
    	margin: 0 auto;
    	border-radius: 13px;
    	display: block;
  	}
}


@media (max-width:700px) {
  	html, body, .results-section, .cloud-card {
    	width: 100vw !important;
    	max-width: 100vw !important;
    	overflow-x: hidden !important;
    	box-sizing: border-box !important;
  	}
}

@media (max-width:700px) {
  	.pagination .page-link,
  	.pagination .next-page {
    	min-height: 2.2em;
    	font-size: 1.05em;
    	touch-action: manipulation;
  	}
}
@media (max-width:700px) {
  	.results-section {
    	padding: 0;
    	margin: 0;
    	width: 100vw !important;
    	max-width: 100vw !important;
    	box-sizing: border-box !important;
    	overflow-x: visible !important;
  	}
  	.pagination {
    	width: 100vw !important;
    	max-width: 100vw !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
    	border-radius: 0;
    	padding-left: 0 !important;
    	padding-right: 0 !important;
    	overflow-x: auto !important;
  	}
}
@media (max-width:700px) {
  	body {
    	overflow-x: hidden;
    	width: 100vw;
    	margin: 0;
    	padding: 0;
  	}
}
@media (max-width:700px) {
  	.pagination .page-link, .pagination .next-page {
    	flex-shrink: 0;
    	min-width: 2.6em;
    	text-align: center;
    	margin: 0 3px;
  	}
}


@media (max-width: 600px) {
  	.yt-thumb-custom {
    	width: 100vw;
    	max-width: 100vw;
    	height: auto;
    	aspect-ratio: 16/9;
    	border-radius: 0;
  	}
  	.yt-thumb-custom img,
  	.yt-thumb-custom iframe {
    	border-radius: 0;
  	}
  	.song-action-buttons { flex-direction: column; gap: 20px; }
  	.song-action-buttons button { width: 100%; }
  	.download-list { max-height: 45vh; overflow-y: auto; box-sizing: border-box; }
  	.dl-type-links { flex-direction: column; gap: 8px; }
}

@media (max-width: 700px) {
	song-meta-card {
		padding: 1.1rem 0.4rem;
		margin: 1.2rem 0.2rem;
		max-width: 99vw;
	}
	.song-meta-card h2 {
		font-size: 1rem;
		padding-left: 0.39em;
	}
	.song-meta-card dl {
		grid-template-columns: 100px 1fr;
		font-size: 0.96rem;
	}
	.song-meta-card .lyrics {
		font-size: 0.96rem;
		padding: 0.5em 0.5em;

	}
}