/* ============================================================
   PQLABEL — style.css
   콘셉트: 깊은 블랙 위의 마스터링 노트.
   로고(흑백 워드마크)와 같은 톤 — 묵직하고, 조용하고, 정확하게.
   바이올렛은 섹션 라벨 · 링크 · 시그니처 라인에만 절제해서 사용.
============================================================ */

:root {
  --bg: #08080A;                            /* 깊은 블랙 */
  --bg-elev: #0F0F13;                       /* 카드 표면 */
  --ink: #F4F2EC;                           /* 따뜻한 화이트 텍스트 */
  --title: #FAF9F5;                         /* 제목용 화이트 */
  --muted: #97939E;                         /* 보조 텍스트 */
  --line: rgba(244, 242, 236, 0.10);        /* 헤어라인 */
  --line-strong: rgba(244, 242, 236, 0.18);
  --violet: #8B73FF;                        /* 다크 배경용으로 밝힌 바이올렛 */
  --violet-deep: #5B3DF5;
  --violet-tint: rgba(91, 61, 245, 0.16);   /* 호버 배경용 틴트 */

  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, "Apple SD Gothic Neo", "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Pretendard Variable", Pretendard, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

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

html {
  scroll-behavior: smooth;
  color-scheme: dark;                       /* 스크롤바·폼 컨트롤도 다크로 */
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;            /* 17px */
  line-height: 1.85;
  letter-spacing: -0.011em;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

/* 매트한 필름 그레인 — 검정이 평면으로 죽지 않게 하는 미세 질감 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: rgba(91, 61, 245, 0.5); color: #FFFFFF; }

a {
  color: var(--violet);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }

/* 키보드 포커스 표시 */
:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 2px;
}

img { max-width: 100%; height: auto; }

/* ── 레이아웃: 최대 폭 760px 단일 컬럼 ─────────────────── */
.page {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── 시그니처: 사운드웨이브 라인 ─────────────────────────
   데스크톱(>=880px): 좌측을 따라 흐르는 세로 라인
   모바일(<880px):    페이지 상단을 따라 흐르는 가로 라인
   검정 위에서 은은하게 빛나는 스튜디오 LED 느낌            */
.wave { display: block; }
.wave path,
.wave line {
  fill: none;
  stroke: var(--violet);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wave {
  filter: drop-shadow(0 0 6px rgba(139, 115, 255, 0.35));
}
#wave-top { width: 100%; height: 28px; margin: 18px 0 0; }
#wave-rail {
  display: none;
  position: absolute;
  top: 0;
  left: -48px;
  width: 28px;
  height: 100%;
}
@media (min-width: 880px) {
  #wave-top  { display: none; }
  #wave-rail { display: block; }
}

/* ── ① 히어로 ──────────────────────────────────────────── */
.hero { padding: clamp(88px, 16vh, 176px) 0 88px; }

.hero-logo {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  border: 1px solid var(--line);
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 1.8rem + 5.5vw, 5.25rem);
  letter-spacing: -0.05em;
  line-height: 1.0;
  color: var(--title);
  margin: 28px 0 14px;
}

.hero-sub {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}
.hero-sub .en {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.hero-copy {
  margin: 22px 0 0;
  font-size: 1.155rem;
  font-weight: 500;
  color: var(--ink);
}

/* ── 섹션 공통 ─────────────────────────────────────────── */
.section {
  border-top: 1px solid var(--line);
  padding: clamp(56px, 9vw, 84px) 0;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--violet);
  text-transform: lowercase;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}

.section h2 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: var(--title);
  margin: 0 0 22px;
}

/* 섹션 제목의 영문 병기 */
.h-en {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--muted);
  font-size: 0.74em;
  margin-left: 0.45em;
  letter-spacing: 0;
}
/* 제목 안의 라틴 고유명 (PARQOO) */
.h-latin {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.section p { margin: 0 0 1em; }
.section p:last-child { margin-bottom: 0; }

/* ── ③ PARQOO ──────────────────────────────────────────── */
.parqoo-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px 36px;
  align-items: start;
}

.parqoo-photo {
  width: 160px;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  display: block;
}

.parqoo-meta {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--muted);
  letter-spacing: 0;
  margin-top: 16px;
}

@media (max-width: 639px) {
  .parqoo-grid { grid-template-columns: 1fr; }
}

/* ── ④ Releases ────────────────────────────────────────── */
.release-lead { margin-bottom: 28px; }

.release {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
}
.release:hover { border-color: var(--line-strong); }
.release + .release { margin-top: 18px; }

.release-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--title);
  margin: 0;
  overflow-wrap: anywhere;
}

.release-artist {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink);
  margin: 10px 0 2px;
}

.release-meta {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0;
}

.release-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
}

.release-link {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--violet);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 15px;
  display: inline-block;
}
.release-link:hover {
  border-color: rgba(139, 115, 255, 0.6);
  background: var(--violet-tint);
}

/* 링크가 비어 있으면 버튼을 렌더링하지 않음 (JS 없이도 동작하는 안전장치) */
.release-links li:has(> a[href=""]) { display: none; }

/* ── ⑥ Contact ─────────────────────────────────────────── */
.contact-list {
  margin: 0;
  display: grid;
  gap: 12px;
}
.contact-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
}
.contact-row dt { color: var(--muted); }
.contact-row dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 479px) {
  .contact-row { grid-template-columns: 1fr; gap: 0; }
}

/* ── 푸터 ──────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--line);
  padding: 36px 0 80px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  align-items: baseline;
}
.footer-copy {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
}
.footer-sig {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--violet);     /* 시그니처 라인 */
}

/* ── 모션 최소화 설정 존중 ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}