@charset "utf-8";
/* CSS Document */

/* Reset */
:root {--primary-color: #0071e3; --secondary-color: #f5f5f7; --background-color: #000; --card-bg-color: #1a1a1a; --text-color-light: #fff ;--text-color-hov: #ffcC00; --text-color-dark: #86868b; --border-color: #333; --font-family-title: 'Oswald', sans-serif; --font-family-body: 'Inter', sans-serif;}
*, *::before, *::after {margin: 0; padding: 0; box-sizing: border-box;}

html {scroll-behavior: smooth; scroll-padding-top: calc(var(56px) + 1rem);}
body {font-family: var(--font-family-body); background-color: var(--background-color); color: var(--text-color-light); line-height: 1.6; overflow-x: hidden;}
a {color: var(--primary-color); text-decoration: none; transition: color 0.3s ease-in-out;}
a:hover {color: var(--text-color-hov);}
h1, h2, h3 {font-family: var(--font-family-title); font-weight: 700; color: var(--text-color-light); line-height: 1.2;}
img {max-width: 100%; height: auto; display: block;}
.container {max-width: 1200px; margin: 0 auto; padding: 0 2rem;}
.site-header {position: fixed; top: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); z-index: 1000; height:56px; display: flex; align-items: center; transition: background 0.3s ease-in-out; padding: 0 15px;}
.header-inner {width: 100%; display: flex; justify-content: space-between; align-items: center;}
.logo {font-size: 1.5rem; letter-spacing: 2px;}
.logo a {color: var(--primary-color); font-weight: 700;}
.logo span {color: var(--text-color-light);}
.main-nav ul {list-style: none; display: flex; gap: 2rem;}
.main-nav a {font-weight: 500; font-size: 0.9rem; color: var(--text-color-light); transition: color 0.3s ease-in-out;}
.main-nav a:hover {color: var(--primary-color);}

main { max-width:1200px; margin:50px auto 0; padding:2rem 1rem; }
section { margin-bottom:4rem; }
.section-title {font-size: clamp(2rem, 6vw, 3rem); text-align: center; margin-bottom: 3rem; color: var(--primary-color);}
.description-box {padding: .5rem; margin: 0 auto 2rem auto; text-align: center;}
.description-box p {font-size: 0.8rem; line-height: 1.6; color: #eee; margin-bottom: 0; padding: 10px; background: #333;}

/* Grid Cards */
.grid { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.card { background:#111; border:1px solid #222; border-radius:8px; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,0.7); transition:transform .3s; }
.card:hover { transform:translateY(-5px); }
.card img { width:100%; height:320px; object-fit:cover; }
.card .info { padding:1rem; text-align:center; }
.card h3 { font-size:1.25rem; margin-bottom:1rem; color:#00B7ED; }
.card audio { width:100%; margin-bottom:.5rem; }
.btn { display:inline-block; padding:.6rem 2.5rem; border-radius:4px; background:#00B7ED; color:#111; font-weight:600; transition:background .3s; }
.btn:hover { background:#444; }
.description-box {padding: .5rem; margin: 0 auto 2rem auto; text-align: center;}

.btn {display: inline-block; padding: 0.75rem 2.5rem; border-radius: 50px; background: var(--primary-color); color: var(--text-color-light); font-weight: 500; transition: background 0.3s ease-in-out, transform 0.2s; font-family: var(--font-family-body);}
.btn:hover {background: #005bb5; transform: translateY(-2px);}
.submit-btn {width: auto; border: none; cursor: pointer;}
.custom-audio-player {display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem;}
.player-controls {display: flex; align-items: center; gap: 1rem;}
.play-pause-btn {width: 44px; height: 44px; background: var(--primary-color); border: none; border-radius: 50%; cursor: pointer; position: relative; transition: transform 0.2s;}
.play-pause-btn::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-35%, -50%); width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 14px; border-color: transparent transparent transparent var(--text-color-light);}
.play-pause-btn.playing::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; background: var(--text-color-light); border-width: 0;}
.play-pause-btn.playing::before, .play-pause-btn.playing::after {content: ''; position: absolute; width: 4px; height: 14px; background-color: var(--text-color-light); top: 50%; transform: translateY(-50%);}
.play-pause-btn.playing::before {left: 35%;}
.play-pause-btn.playing::after {left: 60%;}
.progress-bar-container {flex-grow: 1; height: 4px; background: var(--border-color); border-radius: 2px; position: relative; cursor: pointer;}
.progress-bar-fill {height: 100%; background: var(--primary-color); width: 0; border-radius: 2px;}
.progress-bar-thumb {width: 12px; height: 12px; background: var(--primary-color); border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); left: 0; margin-left: -6px; display: none;}
.player-info {font-size: 0.8rem; color: var(--text-color-dark); text-align:center;}
.play-count {font-size: 0.8rem; color: var(--text-color-dark); text-align: center; display: none; margin-top: 0.5rem;}
.track-name{padding-right:10px;}


#sound {padding: 2rem 1rem; background: #1a1a1a; text-align: center;}
#sound h2 {font-size: 2.5rem; margin-bottom: 2.5rem; color: #00B7ED;}
.sound-content {display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 3rem; max-width: 900px; margin: 0 auto;}
.sound-image{position: sticky; top: 50px;}
.sound-image img {width:400px; height: 400px; object-fit: cover; padding:10px 0 20px;}
audio {width: 100%;}
.lyric-text {max-width: 600px; text-align: left;}
.lyric-text p {line-height: 1.8; margin-bottom: 1.5rem; color: #ccc; white-space: pre-wrap;}

/*profile-text Download Notice */
.download-notice {/*max-width: 800px;*/ margin: 4rem auto 2rem auto; padding: 1.5rem; background: #1a1a1a; border: 1px solid #00B7ED; border-radius: 8px; text-align: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);}
.download-notice p {font-size: 0.8rem; line-height: 1.6; color: #eee; margin-bottom: 0.5rem;}
.download-notice p:last-child {margin-bottom: 0;}

.site-footer {background: var(--background-color); padding: 2rem 1rem; text-align: center; border-top: 1px solid var(--border-color); color: var(--text-color-dark);}
.site-footer p {font-size: 0.9rem;}
.fade-in {opacity: 0; transform: translateY(20px); transition: opacity 1s ease-out, transform 1s ease-out;}
.fade-in.is-visible {opacity: 1; transform: translateY(0);}


@media(max-width:768px){
  html {scroll-padding-top: 100px;}
  main {margin: 50px auto 0;}
  .nav-container {display: block; text-align: center;}
  nav ul {gap:1rem; justify-content: center;}
  section h2 { font-size:1.75rem; }
  .profile-text {text-align: center;}
  .card img { height:200px;}
  .sound-image{position:inherit;}
  .sound-image img {width:100%; height:auto;}
}