/* ══════════════════════════════════════════════════════════════════════════
   츄라희 노래책 — STYLE B · ARCADE  (레트로 아케이드 / Y2K 키치)
   ──────────────────────────────────────────────────────────────────────────
   레퍼런스(F): 스카이 블루 바탕 위 크림색 게임기 콘솔 · 레드 데크 ·
   옐로우 픽셀 타이틀 · 멤피스 장식 · 하드 오프셋 섀도 · 스티커 배지

   사용법 — style.css 대신 이 파일을 style.css 로 쓰거나,
            index.html 의 <link> 를 이 파일로 바꾸면 됩니다.
   클래스 이름은 기존 components.jsx / app.jsx 와 100% 동일합니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 한글 픽셀 폰트 — CDN 후보를 여러 개 등록해 하나라도 뜨면 픽셀 느낌 유지 */
@font-face{font-family:"Galmuri";font-weight:400;font-style:normal;font-display:swap;
  src:url("https://cdn.jsdelivr.net/gh/quiple/galmuri@latest/dist/Galmuri11.woff2") format("woff2"),
      url("https://cdn.jsdelivr.net/gh/quiple/galmuri/dist/Galmuri11.woff2") format("woff2"),
      url("https://cdn.jsdelivr.net/npm/galmuri/dist/Galmuri11.woff2") format("woff2");}
@font-face{font-family:"Galmuri";font-weight:700;font-style:normal;font-display:swap;
  src:url("https://cdn.jsdelivr.net/gh/quiple/galmuri@latest/dist/Galmuri11-Bold.woff2") format("woff2"),
      url("https://cdn.jsdelivr.net/gh/quiple/galmuri/dist/Galmuri11-Bold.woff2") format("woff2");}
/* 예비: Neo둥근모 (한글 픽셀) */
@font-face{font-family:"NeoDunggeunmo";font-weight:400;font-style:normal;font-display:swap;
  src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/NeoDunggeunmo.woff") format("woff"),
      url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/DungGeunMo.woff") format("woff");}
/* v2.39: 아래 두 줄은 index.html 의 <link> 로 옮겼습니다.
   @import 는 style.css 를 다 받은 뒤에야 다음 파일을 찾아가서 첫 화면이 그만큼 늦어집니다. */

/* ══════════════════════════════════════════════════════════════════════════
   TOKENS — LIGHT (아케이드 낮)
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* 바탕 · 콘솔 · 잉크 */
  --sky:        #2B93D1;   /* 페이지 바탕 (스카이 블루) */
  --sky-deep:   #1E7FB8;
  --page:       #E8E2D0;   /* 콘솔 크림 */
  --paper:      #FBFAF3;   /* 내부 패널 */
  --paper-soft: #F1ECDC;
  --ink:        #2E2A26;   /* 소프트 차콜 */
  --ink-soft:   #4A4A4A;
  --muted:      rgba(46,42,38,.58);
  --muted-2:    rgba(46,42,38,.34);
  --line:       rgba(46,42,38,.22);
  --line-strong:rgba(46,42,38,.55);
  --ink-line:   #2E2A26;   /* 3px 픽셀 프레임 */
  --glass:      #FBFAF3;
  --hard-shadow:rgba(46,42,38,.42);
  --overlay:    rgba(20,32,48,.58);

  /* 아케이드 컬러 */
  --red:        #E54524;   /* 데크 · 강조 */
  --yellow:     #F6C11B;   /* 주 버튼 · 타이틀 */
  --pink:       #E87093;   /* 보조 강조 */
  --green:      #4CAF50;
  --accent:     #1E7FB8;
  --accent-fill:#F6C11B;
  --accent-ink: #2E2A26;
  --signal:     #E54524;
  --sun:        #F6C11B;
  --leaf:       #4CAF50;
  --rose:       #E87093;

  --chip-count-bg: rgba(46,42,38,.14);
  --tag-bg:        #FBFAF3;
  --hover-yt:      rgba(229,69,36,.16);
  --hover-soop:    rgba(43,147,209,.16);
  --frame-b:       #F1ECDC;
  --frame-c:       #E8E2D0;
  --dot:           rgba(46,42,38,.16);
  --glow-a:        transparent;
  --glow-b:        transparent;
  --code-bg:       #F1ECDC;
  --cream-line:    rgba(46,42,38,.22);
  --cream-label:   rgba(46,42,38,.6);
  --heart-ink:     #2E2A26;
  --alt-chip-ink:  #1E7FB8;

  /* 활자 — 픽셀 디스플레이 + 본문 산세리프 */
  --font-display: "Galmuri", "NeoDunggeunmo", "Press Start 2P", "IBM Plex Sans KR", system-ui, sans-serif;
  --font-pixel:   "Galmuri", "NeoDunggeunmo", "Press Start 2P", "IBM Plex Sans KR", system-ui, sans-serif;
  --font-sans:    "IBM Plex Sans KR", "Pretendard Variable", Pretendard, -apple-system,
                  BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --fs-display: clamp(30px, 5.6vw, 58px);
  --fs-h1:      clamp(22px, 3vw, 32px);
  --fs-h2:      clamp(18px, 2.2vw, 24px);
  --fs-h3:      16px;
  --fs-body:    15px;
  --fs-caption: 12.5px;
  --fs-micro:   10.5px;

  --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px;
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 104px;

  /* 하드 섀도 (오프셋, 블러 없음) */
  --hd-1: 3px 3px 0 var(--hard-shadow);
  --hd-2: 5px 5px 0 var(--hard-shadow);
  --hd-3: 8px 8px 0 var(--hard-shadow);

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  /* 멤피스 장식 (별 · 삼각형 · 원 · 리본) */
  --shapes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none'%3E%3Cpath d='M40 34l7 20 21 7-21 7-7 21-7-21-21-7 21-7z' fill='%23F6C11B'/%3E%3Cpath d='M300 70l5 14 15 5-15 5-5 15-5-15-15-5 15-5z' fill='%23E87093'/%3E%3Ccircle cx='130' cy='250' r='12' stroke='%23FBFAF3' stroke-width='4'/%3E%3Cpath d='M250 330l26 0-13 24z' fill='%23FBFAF3' fill-opacity='.7'/%3E%3Cpath d='M60 350c14-16 28-16 42 0s28 16 42 0' stroke='%23E54524' stroke-width='5'/%3E%3Ccircle cx='360' cy='240' r='9' fill='%234CAF50'/%3E%3C/g%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════════════════════
   TOKENS — DARK (아케이드 밤 · 딥 네이비)
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  --sky:        #14243A;
  --sky-deep:   #0E1B2C;
  --page:       #1E2F44;
  --paper:      #25384F;
  --paper-soft: #1A2A3E;
  --ink:        #F0EADA;
  --ink-soft:   rgba(240,234,218,.78);
  --muted:      rgba(240,234,218,.56);
  --muted-2:    rgba(240,234,218,.32);
  --line:       rgba(240,234,218,.20);
  --line-strong:rgba(240,234,218,.48);
  --ink-line:   #F0EADA;
  --glass:      #25384F;
  --hard-shadow:rgba(0,0,0,.5);
  --overlay:    rgba(6,12,20,.72);
  --accent:     #7FD1F5;
  --accent-fill:#F6C11B;
  --accent-ink: #14243A;
  --chip-count-bg: rgba(240,234,218,.16);
  --tag-bg:     #25384F;
  --code-bg:    #1A2A3E;
  --alt-chip-ink:#7FD1F5;
  --hd-1: 3px 3px 0 rgba(0,0,0,.5);
  --hd-2: 5px 5px 0 rgba(0,0,0,.5);
  --hd-3: 8px 8px 0 rgba(0,0,0,.5);
}

/* ══════════════════════════════════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }

body {
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  background-color: var(--sky);
  background-image:
    var(--noise),
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.10), transparent 42%),
    radial-gradient(circle at 88% 4%, rgba(246,193,27,.14), transparent 46%);
  background-blend-mode: overlay, normal, normal;
  transition: background-color .3s ease, color .3s ease;
  --focus-ring: rgba(246,193,27,.5);
  overflow-x: hidden;
}

/* 멤피스 장식 레이어 — 화면 전체에 흩뿌림 */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: var(--shapes);
  background-size: 420px 420px;
  opacity: .5;
}
:root[data-theme="dark"] body::before { opacity: .28; }

::selection { background: var(--yellow); color: #2E2A26; }
svg, img { display: block; }
img { max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
input, select { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: var(--r-sm);
}

/* 픽셀 라벨 공통 */
.mono-chip, .count .sub, .sheet-genre, .memo-label,
.pf-card-head, .side-sec-head, .side-info-head, .pf-month, .pf-count,
.stat .k, .nav-btn, .chip, .pg-btn, .yt-handle, .yt-item-d, .brand-sub, .brand-meta {
  font-family: var(--font-pixel);
  letter-spacing: .02em;
  text-transform: uppercase;
  font-weight: 400;
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT — 콘솔 프레임
   ══════════════════════════════════════════════════════════════════════════ */
.app {
  position: relative; z-index: 1;
  width: min(1264px, calc(100% - 64px));
  margin: clamp(20px,4vw,48px) auto var(--s6);
  padding: clamp(16px, 2.6vw, 30px);
  background: var(--page);
  border: 4px solid var(--ink-line);
  border-radius: var(--r-lg);
  box-shadow: var(--hd-3), inset 0 0 0 2px rgba(255,255,255,.35);
}
.app::after {   /* 콘솔 하단 레드 데크 */
  content: ""; display: block; height: 12px; margin: clamp(16px,2.6vw,30px) calc(clamp(16px,2.6vw,30px) * -1) calc(clamp(16px,2.6vw,30px) * -1);
  background: var(--red);
  border-top: 4px solid var(--ink-line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 8px, transparent 8px 16px);
}
.main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--s3);
  align-items: start;
}
.shell { min-width: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   HERO — 아케이드 타이틀 화면
   ══════════════════════════════════════════════════════════════════════════ */
.hero { position: relative; padding: var(--s2) 0 var(--s4); text-align: center; overflow: hidden; }

/* 상단 내비 = 콘솔 타이틀바 */
.topnav {
  position: relative;
  display: flex; justify-content: flex-end; align-items: center; gap: 6px;
  flex-wrap: wrap;
  padding: 8px 10px;
  margin-bottom: var(--s4);
  background: var(--ink);
  border: 3px solid var(--ink-line);
  border-radius: var(--r-md);
  box-shadow: var(--hd-1);
}
.topnav::before {   /* 신호등 → 아케이드 조작 버튼 3개 */
  content: ""; margin-right: auto; flex: 0 0 auto;
  width: 66px; height: 14px;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle at 7px 50%,  var(--red) 6px, transparent 6.5px),
    radial-gradient(circle at 33px 50%, var(--yellow) 6px, transparent 6.5px),
    radial-gradient(circle at 59px 50%, var(--green) 6px, transparent 6.5px);
}
:root[data-theme="dark"] .topnav { background: #0E1B2C; }

.nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  font-size: var(--fs-micro);
  color: var(--page);
  background: rgba(255,255,255,.10);
  border: 2px solid rgba(255,255,255,.34);
  border-radius: var(--r-pill);
  transition: transform .14s ease, background-color .16s, color .16s, border-color .16s;
  white-space: nowrap;
}
.nav-btn i { font-size: 14px; }
.nav-btn:hover { background: var(--yellow); color: #2E2A26; border-color: var(--ink-line); transform: translateY(-1px); }
.nav-btn.nav-active {
  background: var(--yellow); color: #2E2A26;
  border-color: var(--ink-line);
  box-shadow: 2px 2px 0 rgba(0,0,0,.4);
}
.nav-btn.nav-link { text-decoration: none; }
.nav-btn.nav-yt:hover { background: var(--red); color: #fff; }
.nav-btn.nav-soop:hover { background: #7FD1F5; color: #2E2A26; }
.nav-yt.nav-active { background: var(--red); color: #fff; }
.nav-theme .nav-theme-t { display: inline; }
.nav-login, .nav-logout { background: var(--yellow); color: #2E2A26; border-color: var(--ink-line); }
.nav-user {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 6px 4px 8px;
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.34);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption); color: var(--page);
  font-family: var(--font-pixel);
}
.nav-user b { font-weight: 400; }
.nav-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.6); }
.nav-user .ph-user-circle { font-size: 22px; color: var(--yellow); }
.soop-ico { width: 15px; height: 15px; object-fit: contain; }

.brand { display: grid; justify-items: center; gap: var(--s2); }
/* v2.35: 「츄라희 노래책」을 누르면 메인으로 이동 (로고 + 제목 묶음) */
.brand-home {
  display: grid; justify-items: center; gap: var(--s2);
  padding: 2px 10px; border-radius: var(--r-md);
  cursor: pointer;
  transition: transform .16s ease, background-color .16s;
}
.brand-home:hover { transform: translateY(-2px); }
.brand-home:active { transform: translateY(1px); }
.brand svg { filter: none !important; }
.brand-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 1.16;
  letter-spacing: .01em;
  color: var(--yellow);
  text-shadow:
    3px 3px 0 var(--ink-line),
    4px 4px 0 var(--ink-line),
    6px 6px 0 rgba(46,42,38,.34);
  text-transform: none;
  text-wrap: balance;
}
:root[data-theme="dark"] .brand-title { text-shadow: 3px 3px 0 #0B1420, 6px 6px 0 rgba(0,0,0,.55); }

.brand-sub {
  margin: 0;
  font-size: var(--fs-micro);
  color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.brand-meta {
  margin: var(--s1) 0 0;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-micro);
  color: #2E2A26;
  background: var(--yellow);
  border: 3px solid var(--ink-line);
  border-radius: var(--r-pill);
  padding: 6px 16px;
  box-shadow: var(--hd-1);
}
.brand-meta i { font-size: 13px; }
.heart-inline { font-size: .86em; line-height: 1; display: inline-block; transform: translateY(-.08em); }
.heart-inline.pastel { color: var(--pink); }
.heart-inline.blue { color: #0DC2FA; }
:root[data-theme="dark"] .heart-inline.blue { color: #5BD7FF; }
.heart-inline.black { color: var(--ink); opacity: .5; }
/* ── 히어로 배경 장식 (v2.29) ────────────────────────────────────────────
   장식은 상단 메뉴(.topnav) '아래'에 놓이는 층(.hero-deco)에 들어갑니다.
   예전에는 장식이 히어로 기준 top:34~168px 에 있어, 메뉴가 두 줄로 접히는
   휴대폰 화면에서는 메뉴 바 뒤로 완전히 가려졌습니다. 이제는 어떤 화면 폭에서도
   메뉴 아래에서 시작하므로 잘 보입니다. */
.hero-deco { position: relative; height: 0; z-index: 0; }
.hero-deco > .deco { position: absolute; pointer-events: none; }
.deco { display: block; }
/* 제목·문구는 장식 위에 오도록 (장식은 배경 역할) */
.hero .brand { position: relative; z-index: 1; }

.deco-heart-l { top: 0;    left: -8px; }
.deco-heart-r { top: 18px; right: -18px; }
.deco-note    { top: 0;    right: 13%; }
.deco-phones  { top: 40px; left: 15%; }
.deco-vinyl   { top: 108px; left: 6%; }

/* 브랜드 마크 — 파란 헤드폰 (v2.29: 하트 → 헤드폰)
   · 로고는 아이콘 폰트가 아니라 안에 그린 SVG 라서 항상 보입니다.
   · 히어로에서는 그림자 없이 평평하게(.brand svg 규칙), 로그인 창에서는 은은한 그림자. */
.hero-logo { display: block; }

:root[data-theme="dark"] .hero-deco > svg { opacity: .22 !important; mix-blend-mode: normal !important; }
:root[data-theme="dark"] .hero-deco > i { opacity: .2 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   검색 · 카테고리 · 툴바(레드 데크)
   ══════════════════════════════════════════════════════════════════════════ */
.searchbar {
  display: flex; align-items: center; position: relative;
  background: var(--paper);
  border: 3px solid var(--ink-line);
  border-radius: var(--r-md);
  box-shadow: var(--hd-1);
  margin-bottom: var(--s2);
}
.searchbar input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; color: var(--ink);
  font-family: var(--font-pixel);
  font-size: clamp(14px, 2vw, 20px);
  line-height: 1.4;
  padding: 15px 46px 15px 52px;   /* v2.36: 왼쪽 돋보기 자리 */
}
.searchbar input::placeholder { color: var(--muted-2); }
.searchbar input:focus { outline: none; }
.searchbar .lead {
  /* v2.36: 돋보기를 검색 칸 왼쪽으로 이동 */
  position: absolute; left: 16px; right: auto; top: 50%; transform: translateY(-50%);
  font-size: 22px; color: var(--ink-soft); pointer-events: none;
}
.searchbar:focus-within { border-color: var(--red); }
.searchbar:focus-within .lead { color: var(--red); }

.chip-row { display: flex; gap: var(--s1); flex-wrap: wrap; margin-bottom: var(--s2); }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-micro);
  padding: 7px 14px;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink-line);
  border-radius: var(--r-pill);
  box-shadow: var(--hd-1);
  transition: transform .14s ease, background-color .16s, color .16s;
}
.chip:hover { transform: translateY(-2px); background: var(--paper-soft); }
.chip.active { background: var(--pink); color: #2E2A26; }
.chip-count {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em;
  padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--chip-count-bg); color: inherit;
}
.chip.active .chip-count { background: rgba(46,42,38,.22); }

/* 툴바 — 콘솔 레드 데크 */
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
  background: var(--red);
  border: 3px solid var(--ink-line);
  border-radius: var(--r-md);
  box-shadow: var(--hd-2);
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s3);
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 10px, transparent 10px 20px);
}
.count { display: flex; flex-direction: column; gap: 6px; }
.count strong {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 2.8vw, 30px); line-height: 1.2;
  color: #FFF6DC;
  text-shadow: 2px 2px 0 rgba(46,42,38,.55);
}
.count .sub { display: flex; align-items: center; gap: 8px; font-size: var(--fs-micro); color: rgba(255,246,220,.92); }
.toolbar-actions { display: flex; gap: var(--s1); flex-wrap: wrap; }

.btn-random, .btn-primary {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-pixel);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase;
  padding: 12px 20px;
  color: #2E2A26;
  background: var(--yellow);
  border: 3px solid var(--ink-line);
  border-radius: var(--r-md);
  box-shadow: var(--hd-1);
  transition: transform .14s ease, box-shadow .14s ease, background-color .16s;
}
.btn-random:hover, .btn-primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--hd-2);
  background: #FFD84D;
}
.btn-random:active, .btn-primary:active { transform: translate(2px, 2px); box-shadow: none; }
.btn-random i, .btn-primary i { font-size: 15px; }

/* ══════════════════════════════════════════════════════════════════════════
   곡 목록 — 카트리지 카드
   ══════════════════════════════════════════════════════════════════════════ */
.song-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.song-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 3px solid var(--ink-line);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--hd-2);
  transition: transform .16s ease, box-shadow .16s ease;
}
.song-card::before {   /* 카트리지 상단 스트립 */
  content: ""; display: block; height: 24px; flex: 0 0 24px;
  border-bottom: 3px solid var(--ink-line);
  background-color: var(--page);
  background-image: repeating-linear-gradient(90deg, rgba(46,42,38,.18) 0 6px, transparent 6px 12px);
  background-repeat: no-repeat, repeat;
  background-size: 24px 100%, auto;
}
.song-card:hover { transform: translate(-3px, -3px); box-shadow: var(--hd-3); }
.song-card:active { transform: translate(1px, 1px); box-shadow: var(--hd-1); }

/* v2.35: 곡 카드의 파란 네모(썸네일 .thumb) 카드와 .tag-star 원형 배지는 삭제했습니다.
   · 별표(어려운 노래)는 카드 안 .mono-chip.hard 배지로 표시합니다. */

.info { padding: var(--s2) var(--s2) var(--s3); display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.info .title {
  font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.info .artist { font-size: var(--fs-caption); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: var(--s2); }

.mono-chip {
  display: inline-block;
  font-size: 9.5px;
  padding: 3px 9px;
  color: var(--ink);
  background: var(--paper-soft);
  border: 2px solid var(--ink-line);
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.mono-chip.alt { background: var(--yellow); }

/* v2.35: 별표 곡(어려운 노래) 배지 — 카드 안 장르 · 가격 옆에 표시 */
.mono-chip.hard {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--pink);
}
.mono-chip.hard i { font-size: 10px; }

/* ══════════════════════════════════════════════════════════════════════════
   페이지네이션
   ══════════════════════════════════════════════════════════════════════════ */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; padding-top: var(--s2); }
.pg-btn {
  min-width: 40px; height: 40px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-pixel); font-size: var(--fs-micro);
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink-line);
  border-radius: var(--r-sm);
  box-shadow: var(--hd-1);
  transition: transform .14s ease, background-color .16s;
}
.pg-btn i { font-size: 13px; }
.pg-btn:hover:not(:disabled) { transform: translateY(-2px); background: var(--paper-soft); }
.pg-btn.active { background: var(--yellow); box-shadow: 2px 2px 0 var(--hard-shadow); }
.pg-btn:disabled { opacity: .35; cursor: default; box-shadow: none; }
.pg-gap { font-family: var(--font-pixel); font-size: var(--fs-micro); color: var(--muted); padding: 0 4px; }

/* ══════════════════════════════════════════════════════════════════════════
   사이드 패널
   ══════════════════════════════════════════════════════════════════════════ */
.side-panel { position: sticky; top: var(--s3); display: grid; gap: var(--s2); align-self: start; }
.mascot-frame {
  background: var(--paper);
  border: 3px solid var(--ink-line);
  border-radius: var(--r-md);
  box-shadow: var(--hd-2);
  padding: 8px;
  background-image:
    radial-gradient(circle at 88% 12%, rgba(246,193,27,.28), transparent 55%),
    radial-gradient(circle at 10% 92%, rgba(232,112,147,.26), transparent 55%);
}
.mascot-img { width: 100%; height: auto; border-radius: var(--r-sm); }

.side-info, .side-sec {
  background: var(--paper);
  border: 3px solid var(--ink-line);
  border-radius: var(--r-md);
  box-shadow: var(--hd-2);
  overflow: hidden;
}
.side-info { padding: var(--s2) var(--s2) var(--s3); }
.side-info-head {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-micro); color: var(--ink);
  border-bottom: 2px solid var(--line); padding-bottom: 10px; margin-bottom: var(--s2);
}
.side-info p { margin: 0 0 10px; font-size: var(--fs-caption); line-height: 1.75; color: var(--muted); }
.side-info p:last-child { margin-bottom: 0; }
.side-info b { color: var(--ink); font-weight: 600; }
.star-notice {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--paper-soft);
  border: 2px solid var(--ink-line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
.star-notice i { color: var(--red); font-size: 13px; margin-top: 3px; flex: 0 0 auto; }
.star-notice span { font-size: var(--fs-caption); color: var(--muted); line-height: 1.6; }
.star-notice b { color: var(--ink); }

.side-sec-head {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-micro); color: #2E2A26;
  background: var(--pink);
  border-bottom: 3px solid var(--ink-line);
  padding: 10px var(--s2);
}
:root[data-theme="dark"] .side-sec-head { color: #14243A; }
.side-sec-head i { font-size: 14px; }
.pf-count {
  margin-left: auto; font-size: 9.5px; padding: 2px 7px;
  background: rgba(46,42,38,.22); border-radius: var(--r-pill);
}
:root[data-theme="dark"] .pf-count { background: rgba(20,36,58,.28); }
.pf-songs { list-style: none; margin: 0; padding: 0; }
.pf-songs li + li { border-top: 2px solid var(--line); }
.pf-song {
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--s2);
  transition: background-color .16s;
}
.pf-song:hover { background: var(--paper-soft); }
.pf-songs.clickable .pf-song { cursor: pointer; }
.pf-song-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-song-text b { font-size: var(--fs-caption); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-song-text em { font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-month { margin-left: auto; flex: 0 0 auto; font-size: 9.5px; color: var(--muted); }
.pf-empty { padding: var(--s3) var(--s2); font-size: var(--fs-caption); color: var(--muted); text-align: center; }

/* ══════════════════════════════════════════════════════════════════════════
   상세 시트 — 아케이드 팝업
   ══════════════════════════════════════════════════════════════════════════ */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: var(--overlay);
  display: grid; place-items: center; padding: var(--s3);
  animation: fade .18s ease;
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.985) } to { opacity: 1; transform: none } }

.sheet {
  position: relative;
  width: min(560px, 100%);
  max-height: min(88vh, 880px);
  overflow-y: auto; overflow-x: hidden;
  background: var(--paper);
  border: 4px solid var(--ink-line);
  border-radius: var(--r-md);
  box-shadow: var(--hd-3);
  animation: pop .22s cubic-bezier(.2,.7,.2,1);
  scrollbar-width: thin;
}
.sheet-close {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 32px; height: 32px; display: grid; place-items: center;
  background: var(--yellow); color: #2E2A26;
  border: 3px solid var(--ink-line);
  border-radius: var(--r-sm);
  box-shadow: 2px 2px 0 rgba(46,42,38,.45);
  font-size: 15px;
}
.sheet-close:hover { background: var(--red); color: #fff; }

.sheet-hero {
  position: relative;
  aspect-ratio: 16 / 7;
  display: grid; place-items: center;
  border-bottom: 4px solid var(--ink-line);
  background-color: var(--sky) !important;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.13) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.13) 75%),
    linear-gradient(45deg, rgba(255,255,255,.13) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.13) 75%),
    repeating-linear-gradient(0deg, rgba(46,42,38,.10) 0 2px, transparent 2px 6px) !important;
  background-size: 16px 16px, 16px 16px, auto !important;
  background-position: 0 0, 8px 8px, 0 0 !important;
}
.sheet-note { font-size: 58px; color: #FFF6DC; filter: drop-shadow(3px 3px 0 rgba(46,42,38,.5)); }
.sheet-tag {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px;
  font-family: var(--font-pixel); font-size: 9.5px; text-transform: uppercase;
  color: #2E2A26; background: var(--yellow);
  border: 3px solid var(--ink-line); border-radius: var(--r-pill);
  box-shadow: 2px 2px 0 rgba(46,42,38,.45);
}
.sheet-tag i { font-size: 12px; }
:root[data-theme="dark"] .sheet-tag { color: #14243A; }

.sheet-body { padding: var(--s3) var(--s3) var(--s4); }
.sheet-genre {
  display: inline-block; font-size: var(--fs-micro);
  color: #2E2A26; background: var(--pink);
  border: 2px solid var(--ink-line); border-radius: var(--r-sm);
  padding: 3px 10px; margin-bottom: 12px;
}
:root[data-theme="dark"] .sheet-genre { color: #14243A; }
.sheet-title {
  margin: 0 0 6px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 3vw, 30px); line-height: 1.28;
  color: var(--ink);
}
.sheet-artist { font-size: var(--fs-caption); color: var(--muted); margin-bottom: var(--s3); }

.sheet-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px; margin-bottom: var(--s3);
}
.stat {
  background: var(--paper-soft);
  border: 3px solid var(--ink-line);
  border-radius: var(--r-sm);
  padding: 11px 12px;
}
.stat .k { font-size: 9.5px; color: var(--muted); margin-bottom: 5px; }
.stat .v { font-family: var(--font-display); font-size: 18px; line-height: 1.3; color: var(--ink); }

.sheet-extra { margin-bottom: var(--s3); }
.media-row { display: flex; gap: var(--s1); flex-wrap: wrap; margin-bottom: var(--s2); }
.media-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px;
  font-family: var(--font-pixel); font-size: 11px; text-transform: uppercase;
  color: var(--ink); background: var(--paper-soft);
  border: 3px solid var(--ink-line); border-radius: var(--r-sm);
  box-shadow: var(--hd-1); text-decoration: none;
  transition: transform .14s ease, background-color .16s;
}
.media-btn i { font-size: 15px; }
.media-btn:hover { transform: translateY(-2px); }
.media-btn.yt:hover { background: var(--red); color: #fff; }
.media-btn.ly:hover { background: var(--sky); color: #FFF6DC; }

.lyric-box {
  margin: 0; padding: var(--s2) var(--s3);
  background: var(--code-bg);
  border: 3px solid var(--ink-line); border-radius: var(--r-sm);
  font-family: var(--font-sans); font-size: 13.5px; line-height: 1.9;
  white-space: pre-wrap; word-break: break-word; color: var(--ink-soft);
  max-height: 300px; overflow-y: auto;
}
.media-hint { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.7; }
.media-hint b { color: var(--ink); }

.sheet-memo {
  background: var(--paper-soft);
  border: 3px solid var(--ink-line);
  border-radius: var(--r-sm);
  padding: var(--s2) var(--s2) var(--s3);
  margin-bottom: var(--s2);
}
.sheet-memo .memo-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 9.5px; color: var(--muted);
  border-bottom: 2px solid var(--line); padding-bottom: 8px; margin-bottom: 10px;
}
.sheet-memo p { margin: 0 0 8px; font-size: var(--fs-caption); line-height: 1.75; color: var(--ink-soft); }
.sheet-memo p:last-child { margin-bottom: 0; }
.sheet-memo b { color: var(--ink); font-weight: 600; }
.sheet-memo .star-notice { margin-top: 10px; background: var(--paper); }
.sheet-actions { display: flex; justify-content: flex-end; gap: var(--s1); margin-top: var(--s3); }
.sheet-actions .btn-primary { width: 100%; justify-content: center; }

/* 로그인 */
.login-sheet { width: min(420px, 100%); }
.login-body { padding: var(--s4) var(--s3) var(--s3); display: grid; justify-items: center; gap: var(--s2); text-align: center; }
.login-logo { display: grid; place-items: center; }
.login-logo svg { filter: none !important; }
.login-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.3; }
.login-note { margin: 0; font-size: var(--fs-caption); color: var(--muted); line-height: 1.7; }
.fld { width: 100%; display: grid; gap: 7px; text-align: left; }
.fld span { font-family: var(--font-pixel); font-size: 9.5px; text-transform: uppercase; color: var(--muted); }
.fld input {
  width: 100%; padding: 11px 12px;
  background: var(--paper-soft); color: var(--ink);
  border: 3px solid var(--ink-line); border-radius: var(--r-sm);
  font-size: 15px;
}
.fld input::placeholder { color: var(--muted-2); }
.fld input:focus { outline: none; border-color: var(--red); }
.login-btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 20px;
  font-family: var(--font-pixel); font-size: 12px; text-transform: uppercase;
  color: #2E2A26; background: var(--yellow);
  border: 3px solid var(--ink-line); border-radius: var(--r-md);
  box-shadow: var(--hd-1);
  transition: transform .14s ease, box-shadow .14s ease;
}
.login-btn.primary:hover:not(:disabled) { transform: translate(-2px,-2px); box-shadow: var(--hd-2); }
.login-btn:disabled { opacity: .4; cursor: default; box-shadow: none; }
.login-btn .soop-ico { width: 16px; height: 16px; }

/* ══════════════════════════════════════════════════════════════════════════
   프로필 탭
   ══════════════════════════════════════════════════════════════════════════ */
.profile-page { display: grid; gap: var(--s2); }
.pf-hero {
  position: relative;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr);
  align-items: center; gap: var(--s3);
  background: var(--paper);
  border: 4px solid var(--ink-line);
  border-radius: var(--r-md);
  box-shadow: var(--hd-2);
  padding: var(--s4) var(--s3);
  overflow: hidden;
  background-image:
    radial-gradient(circle at 82% 6%, rgba(246,193,27,.34), transparent 52%),
    radial-gradient(circle at 4% 96%, rgba(232,112,147,.28), transparent 52%);
}
.pf-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.pf-deco { position: absolute; color: var(--sky); opacity: .3; }
.pf-hero-text { position: relative; z-index: 1; }
.pf-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-pixel); font-size: var(--fs-micro); text-transform: uppercase;
  color: #2E2A26; background: var(--yellow);
  border: 3px solid var(--ink-line); border-radius: var(--r-pill);
  box-shadow: 2px 2px 0 rgba(46,42,38,.42);
  padding: 5px 14px; margin-bottom: var(--s2);
}
:root[data-theme="dark"] .pf-chip { color: #14243A; }
.pf-chip i { font-size: 12px; }
.pf-name {
  margin: 0 0 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 4.6vw, 50px); line-height: 1.2;
  color: var(--yellow);
  text-shadow: 3px 3px 0 var(--ink-line), 5px 5px 0 rgba(46,42,38,.32);
}
:root[data-theme="dark"] .pf-name { text-shadow: 3px 3px 0 #0B1420, 5px 5px 0 rgba(0,0,0,.5); }
.pf-tagline { margin: 0 0 var(--s2); font-size: var(--fs-caption); color: var(--muted); }
.pf-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--s2); }
.pf-tag {
  font-family: var(--font-pixel); font-size: 9.5px; text-transform: uppercase;
  padding: 5px 12px; color: var(--ink);
  background: var(--paper-soft);
  border: 3px solid var(--ink-line); border-radius: var(--r-pill);
}
.pf-tag.sky  { background: var(--sky); color: #FFF6DC; }
.pf-tag.mint { background: var(--green); color: #FFF6DC; }
.pf-tag.rose { background: var(--pink); color: #2E2A26; }
:root[data-theme="dark"] .pf-tag.sky,
:root[data-theme="dark"] .pf-tag.mint { color: #14243A; background: #7FD1F5; }
:root[data-theme="dark"] .pf-tag.mint { background: #7FD9A8; }
.pf-links { display: flex; gap: var(--s1); flex-wrap: wrap; }
.pf-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  font-family: var(--font-pixel); font-size: 11px; text-transform: uppercase;
  color: var(--ink); background: var(--paper-soft);
  border: 3px solid var(--ink-line); border-radius: var(--r-sm);
  box-shadow: var(--hd-1); text-decoration: none;
  transition: transform .14s ease, background-color .16s;
}
.pf-link i { font-size: 15px; }
.pf-link:hover { transform: translateY(-2px); }
.pf-link.yt:hover { background: var(--red); color: #fff; }
.pf-link.soop:hover { background: var(--sky); color: #FFF6DC; }
.pf-art { position: relative; z-index: 1; display: grid; place-items: end center; }
.pf-art img { width: min(300px, 100%); height: auto; }

.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s2); }
.pf-card {
  background: var(--paper);
  border: 3px solid var(--ink-line);
  border-radius: var(--r-md);
  box-shadow: var(--hd-2);
  overflow: hidden;
}
.pf-card.wide { grid-column: 1 / -1; }
.pf-card-head {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-micro); color: #2E2A26;
  background: var(--yellow);
  border-bottom: 3px solid var(--ink-line);
  padding: 10px var(--s2);
}
:root[data-theme="dark"] .pf-card-head { color: #14243A; }
.pf-card-head i { font-size: 14px; }
.pf-basic { list-style: none; margin: 0; padding: 0; }
.pf-basic li {
  display: grid; grid-template-columns: 26px 96px minmax(0,1fr);
  align-items: baseline; gap: 10px;
  padding: 11px var(--s2);
}
.pf-basic li + li { border-top: 2px solid var(--line); }
.pf-basic-ico { color: var(--red); font-size: 15px; }
.pf-basic-k { font-family: var(--font-pixel); font-size: 9.5px; text-transform: uppercase; color: var(--muted); }
.pf-basic-v { font-size: var(--fs-caption); color: var(--ink); }
.pf-basic-v em { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 2px; }
.pf-list { list-style: none; margin: 0; padding: var(--s2); display: grid; gap: 9px; }
.pf-list.two { grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 10px var(--s3); }
.pf-list li { position: relative; padding-left: 18px; font-size: var(--fs-caption); color: var(--ink-soft); line-height: 1.6; }
.pf-list li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 7px; height: 7px; background: var(--red);
  border: 2px solid var(--ink-line);
}
.pf-tiers { list-style: none; margin: 0; padding: var(--s3) var(--s2); display: grid; grid-template-columns: repeat(auto-fit, minmax(96px,1fr)); gap: var(--s2); }
.pf-tiers li { display: grid; justify-items: center; gap: 9px; }
.pf-tier-ico {
  width: 66px; height: 66px; display: grid; place-items: center;
  background: var(--paper-soft);
  border: 3px solid var(--ink-line);
  border-radius: var(--r-pill);
  box-shadow: var(--hd-1);
  overflow: hidden;
}
.pf-tier-ico img { width: 100%; height: 100%; object-fit: contain; }
.pf-tier-m { font-family: var(--font-pixel); font-size: 9.5px; text-transform: uppercase; color: var(--muted); }

/* ══════════════════════════════════════════════════════════════════════════
   유튜브 탭
   ══════════════════════════════════════════════════════════════════════════ */
.yt-page { display: grid; gap: var(--s3); }
.yt-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s2); flex-wrap: wrap;
  background: var(--red);
  border: 3px solid var(--ink-line);
  border-radius: var(--r-md);
  box-shadow: var(--hd-2);
  padding: var(--s2) var(--s3);
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 10px, transparent 10px 20px);
}
.yt-head-t { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.yt-head-ico { font-size: 30px; color: #FFF6DC; }
.yt-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(20px,3vw,30px); line-height: 1.25; color: #FFF6DC; text-shadow: 2px 2px 0 rgba(46,42,38,.5); }
.yt-handle {
  font-size: var(--fs-micro); color: #2E2A26; background: var(--yellow);
  border: 2px solid var(--ink-line); border-radius: var(--r-pill); padding: 4px 11px;
}
.yt-golink {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-pixel); font-size: var(--fs-micro); text-transform: uppercase;
  color: #2E2A26; background: #FFF6DC;
  border: 3px solid var(--ink-line); border-radius: var(--r-sm);
  box-shadow: 2px 2px 0 rgba(46,42,38,.5);
  padding: 9px 15px; text-decoration: none;
  transition: transform .14s ease, background-color .16s;
}
.yt-golink:hover { transform: translateY(-2px); background: var(--yellow); }
.yt-frame {
  border: 4px solid var(--ink-line);
  border-radius: var(--r-md);
  box-shadow: var(--hd-3);
  overflow: hidden; background: #000; aspect-ratio: 16 / 9;
}
.yt-frame iframe { width: 100%; height: 100%; border: 0; }
.yt-hint { margin: 0; font-size: var(--fs-caption); color: var(--muted); }
.yt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px,1fr)); gap: var(--s2); }
.yt-item {
  text-align: left; display: grid; gap: 0;
  background: var(--paper);
  border: 3px solid var(--ink-line);
  border-radius: var(--r-md);
  box-shadow: var(--hd-2);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}
.yt-item:hover { transform: translate(-3px,-3px); box-shadow: var(--hd-3); }
.yt-item.active { background: var(--paper-soft); box-shadow: var(--hd-1); }
.yt-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 3px solid var(--ink-line); }
.yt-item-t {
  padding: 11px var(--s2) 4px;
  font-size: var(--fs-caption); font-weight: 600; line-height: 1.5; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.yt-item-d { padding: 0 var(--s2) 12px; font-size: 9.5px; color: var(--muted); }

/* ══════════════════════════════════════════════════════════════════════════
   빈 상태 · 로딩
   ══════════════════════════════════════════════════════════════════════════ */
.empty { padding: var(--s5) var(--s3); text-align: center; }
.empty .empty-t { margin-top: var(--s2); font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.4; color: var(--ink); }
.empty .empty-s { margin-top: 6px; font-size: var(--fs-caption); color: var(--muted); }
.spin { animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════════════
   반응형
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .main-grid { grid-template-columns: minmax(0,1fr) 272px; }
  .song-grid { grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); }
}
@media (max-width: 900px) {
  .main-grid { grid-template-columns: minmax(0,1fr); }
  .side-panel { position: static; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
  .mascot-frame { display: none; }
  .pf-hero { grid-template-columns: minmax(0,1fr); }
  .pf-art { justify-items: center; }
  .pf-art img { width: min(220px, 70%); }
  .pf-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 720px) {
  .app { width: calc(100% - 16px); margin: var(--s2) auto var(--s4); border-width: 3px; padding: 12px; }
  .topnav::before { display: none; }
  .topnav { justify-content: flex-start; }
  .nav-theme-t { display: none; }
  .song-grid { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; }
  .info { padding: 11px 11px 14px; }
  .info .title { font-size: 13.5px; }
  .sheet-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .pf-basic li { grid-template-columns: 22px minmax(0,1fr); }
  .pf-basic-v { grid-column: 2; }
  .toolbar { flex-direction: column; align-items: flex-start; }
  .btn-random { width: 100%; justify-content: center; }
  .yt-list { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK 가독성 보정 (v2.15 적용판)
   — 다크 모드에서 배경과 대비가 낮아 읽히지 않던 요소들을 끌어올림
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  --ink-soft:      rgba(240,234,218,.86);
  --muted:         rgba(240,234,218,.82);
  --muted-2:       rgba(240,234,218,.55);
  --line:          rgba(240,234,218,.34);
  --line-strong:   rgba(240,234,218,.68);
  --tag-bg:        #2F4663;
  --chip-count-bg: rgba(240,234,218,.22);
  --code-bg:       #22354C;
}
/* 가수명 · 안내문 · 페이지 구분자 */
:root[data-theme="dark"] .info .artist,
:root[data-theme="dark"] .sheet-artist,
:root[data-theme="dark"] .pg-gap { color: rgba(240,234,218,.84); }
:root[data-theme="dark"] .side-info p,
:root[data-theme="dark"] .star-notice span { color: rgba(240,234,218,.80); }
:root[data-theme="dark"] .searchbar input::placeholder { color: rgba(240,234,218,.50); }
/* 비활성 페이지 버튼 · 이동 화살표 */
:root[data-theme="dark"] .pg-btn:disabled {
  opacity: .62; color: rgba(240,234,218,.90); border-color: rgba(240,234,218,.44);
}
/* 칩 · 태그 — 활성(노랑/핑크) 상태는 어두운 글씨 유지 */
:root[data-theme="dark"] .chip:not(.active) { color: rgba(240,234,218,.90); border-color: rgba(240,234,218,.42); }
:root[data-theme="dark"] .mono-chip:not(.alt) { color: rgba(240,234,218,.90); border-color: rgba(240,234,218,.48); }
:root[data-theme="dark"] .nav-btn:not(:hover):not(.nav-login):not(.nav-logout) {
  color: rgba(240,234,218,.90); border-color: rgba(240,234,218,.42);
}
:root[data-theme="dark"] .topnav { background: #12233A; }

/* ══════════════════════════════════════════════════════════════════════════
   배지 위 글씨 대비 — 라이트 전용 보정
   (다크에서는 아래 DARK 전용 규칙이 대신 처리합니다)
   ══════════════════════════════════════════════════════════════════════════ */
:root:not([data-theme="dark"]) .count strong,
:root:not([data-theme="dark"]) .sheet-note,
:root:not([data-theme="dark"]) .media-btn.ly:hover,
:root:not([data-theme="dark"]) .pf-tag.sky,
:root:not([data-theme="dark"]) .pf-tag.mint,
:root:not([data-theme="dark"]) .pf-link.soop:hover,
:root:not([data-theme="dark"]) .yt-head-ico,
:root:not([data-theme="dark"]) .yt-title { color: #2E2A26; }

/* ── 다크 전용: 상세 창 · 프로필 탭 대비 보정 ───────────────────────── */
/* 상세 창 — 파스텔 그라데이션 위 아이콘은 어두운 잉크로 */
:root[data-theme="dark"] .sheet-note { color: #2E2A26; }
/* 상세 창 — 가사 박스 / 안내문 */
:root[data-theme="dark"] .lyric-box {
  background: #22354C; color: rgba(240,234,218,.90); border-color: rgba(240,234,218,.55);
}
:root[data-theme="dark"] .media-hint { color: rgba(240,234,218,.82); }
:root[data-theme="dark"] .sheet-memo p { color: rgba(240,234,218,.88); }
:root[data-theme="dark"] .stat .k { color: rgba(240,234,218,.82); }
:root[data-theme="dark"] .memo-label { color: rgba(240,234,218,.86); }
/* 다크에서 --sky 는 어두운 남색 → 호버 시 밝은 하늘색으로 뒤집기 */
:root[data-theme="dark"] .media-btn.ly:hover,
:root[data-theme="dark"] .pf-link.soop:hover,
:root[data-theme="dark"] .nav-btn.nav-soop:hover { background: #7FD1F5; color: #2E2A26; }
:root[data-theme="dark"] .media-btn.yt:hover,
:root[data-theme="dark"] .pf-link.yt:hover { background: #FF6B4A; color: #1A120E; }
/* 프로필 — '최근 업데이트 곡' 머리글과 곡 수 배지 */
:root[data-theme="dark"] .side-sec-head { color: #2E2A26; }
:root[data-theme="dark"] .pf-count {
  background: rgba(46,42,38,.30); color: #2E2A26;
}
:root[data-theme="dark"] .pf-card-head { color: #2E2A26; }
:root[data-theme="dark"] .pf-chip { color: #2E2A26; }
/* 프로필 — 인물 아트가 어두운 배경에 묻히지 않도록 은은한 테두리 */
:root[data-theme="dark"] .pf-art img {
  filter: drop-shadow(0 0 1px rgba(240,234,218,.85)) drop-shadow(0 6px 18px rgba(0,0,0,.55));
}
:root[data-theme="dark"] .pf-tag.rose { background: #F08CA8; color: #2E2A26; }
:root[data-theme="dark"] .pf-list li { color: rgba(240,234,218,.88); }

/* ── 다크 전용: 최종 대비 상향 (가수명 · 통계 라벨 · 가사 · 태그라인) ── */
:root[data-theme="dark"] .sheet-artist,
:root[data-theme="dark"] .pf-tagline,
:root[data-theme="dark"] .stat .k,
:root[data-theme="dark"] .memo-label,
:root[data-theme="dark"] .pf-basic-k,
:root[data-theme="dark"] .pf-tier-m,
:root[data-theme="dark"] .pf-month,
:root[data-theme="dark"] .pf-empty,
:root[data-theme="dark"] .media-hint,
:root[data-theme="dark"] .pg-gap { color: rgba(240,234,218,.92); }
:root[data-theme="dark"] .lyric-box { color: rgba(240,234,218,.95); }
:root[data-theme="dark"] .stat .k { font-weight: 700; }
:root[data-theme="dark"] .pf-basic-v em { color: rgba(240,234,218,.80); }
:root[data-theme="dark"] .pf-song-text em { color: rgba(240,234,218,.86); }

/* ══════════════════════════════════════════════════════════════════════════
   사진을 카드 아래 끝에 붙임 — 아래 여백 제거
   ══════════════════════════════════════════════════════════════════════════ */
/* 마스코트 프레임 — 아래쪽 패딩만 제거하고 이미지를 테두리 안쪽 끝에 붙임 */
.mascot-frame { padding: 8px 8px 0; overflow: hidden; }
.mascot-img { border-radius: var(--r-sm) var(--r-sm) 0 0; }
/* 프로필 카드 — 아래쪽 패딩을 글자 쪽으로 옮겨 사진을 카드 끝에 붙임 */
.pf-hero { padding-bottom: 0; }
.pf-hero-text { padding-bottom: var(--s4); }

/* 프로필 사진이 카드 높이를 꽉 채우고 아래 끝에 붙도록 */
.pf-art { align-self: stretch; }

/* ── 유튜브 탭 — 다크 대비 보정 ─────────────────────────────────────────── */
:root[data-theme="dark"] .yt-item-d { color: rgba(244,239,226,.96); }
:root[data-theme="dark"] .yt-item-t { color: #F4EFE2; }
:root[data-theme="dark"] .yt-hint { color: rgba(240,234,218,.94); }
/* 재생 중인 카드 — 다크에서는 눌린 느낌만으로는 구분이 약해 노란 왼쪽 띠를 더함 */
:root[data-theme="dark"] .yt-item.active { box-shadow: var(--hd-1); border-color: #F6C11B; }
:root[data-theme="dark"] .yt-item.active .yt-item-d { color: #F6C11B; }

/* ── 로그인 모달 — 다크 대비 보정 ─────────────────────────────────────── */
:root[data-theme="dark"] .fld span { color: rgba(240,234,218,.92); }
:root[data-theme="dark"] .fld input::placeholder { color: rgba(240,234,218,.66); }
/* 사용할 수 없는 버튼: 반투명으로 흐려지는 대신 또렷한 회색 면으로 */
:root[data-theme="dark"] .login-btn:disabled {
  opacity: 1;
  background: rgba(240,234,218,.16);
  color: rgba(240,234,218,.82);
  border-color: rgba(240,234,218,.42);
  box-shadow: none;
}
:root[data-theme="dark"] .login-btn:disabled .soop-ico { opacity: .72; }

/* ══════════════════════════════════════════════════════════════════════════
   v2.24 — 곡 찾기 편의 기능 (정렬 · 어려운 노래만 · 가수별 보기 · 최근 검색어 · 통계)
   ══════════════════════════════════════════════════════════════════════════ */

/* 키보드로 이동할 때 지금 위치가 또렷하게 보이도록 (접근성) */
:where(button, a, input, select, [role="button"]):focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

/* 검색어 하이라이트 */
.hl { background: var(--yellow); color: #2E2A26; padding: 0 2px; border-radius: 3px; }

/* 검색창 — 입력 지우기 버튼 */
.searchbar .clr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-right: 6px; flex: none;
  font-size: 13px; color: var(--ink);
  background: var(--paper-soft);
  border: 2px solid var(--ink-line); border-radius: var(--r-pill);
  box-shadow: 2px 2px 0 var(--hard-shadow);
}
.searchbar .clr:hover { background: var(--yellow); }

/* 최근 검색어 */
.recent-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: -6px 0 var(--s2); }
.recent-label { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-micro); color: var(--muted); }
.recent-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-micro); padding: 4px 10px;
  color: var(--ink); background: var(--paper-soft);
  border: 2px solid var(--line); border-radius: var(--r-pill);
  transition: transform .14s ease, background-color .16s, border-color .16s;
}
.recent-chip:hover { transform: translateY(-1px); border-color: var(--ink-line); background: var(--paper); }
.recent-chip i { font-size: 11px; color: var(--muted); }
.recent-clear {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-micro); padding: 4px 9px;
  color: var(--muted); background: transparent;
  border: 2px dashed var(--line); border-radius: var(--r-pill);
}
.recent-clear:hover { color: var(--ink); border-color: var(--line-strong); }

/* 툴바 — 보기 방식 · 정렬 · 어려운 노래만 */
.seg { display: inline-flex; border: 3px solid var(--ink-line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--hd-1); }
.seg-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-pixel); font-size: 11.5px; font-weight: 700;
  padding: 10px 14px; color: var(--ink); background: var(--paper); border: 0;
}
.seg-btn + .seg-btn { border-left: 3px solid var(--ink-line); }
.seg-btn.active { background: var(--yellow); }
.sel {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 10px;
  background: var(--paper); border: 3px solid var(--ink-line);
  border-radius: var(--r-md); box-shadow: var(--hd-1);
}
.sel i { font-size: 14px; color: var(--ink); }
.sel select {
  font-family: var(--font-pixel); font-size: 11.5px; font-weight: 700;
  padding: 11px 2px; color: var(--ink); background: transparent; border: 0;
  -webkit-appearance: none; appearance: none;
}
.btn-hard {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-pixel); font-size: 11.5px; font-weight: 700;
  padding: 11px 14px; color: var(--ink); background: var(--paper);
  border: 3px solid var(--ink-line); border-radius: var(--r-md); box-shadow: var(--hd-1);
  transition: transform .14s ease, box-shadow .14s ease, background-color .16s;
}
.btn-hard:hover { transform: translate(-2px, -2px); box-shadow: var(--hd-2); }
.btn-hard.on { background: var(--yellow); }
.btn-hard i { font-size: 13px; color: #B58A0B; }
.btn-hard.on i { color: #2E2A26; }
.btn-hard-n {
  font-family: var(--font-mono); font-size: 11px; padding: 1px 6px;
  background: var(--chip-count-bg); border-radius: var(--r-pill);
}

/* 가수 필터 칩 */
.filter-row { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; margin: 0 0 var(--s2); }
.filter-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-caption); font-weight: 600;
  padding: 6px 8px 6px 12px; color: #2E2A26; background: var(--yellow);
  border: 3px solid var(--ink-line); border-radius: var(--r-pill); box-shadow: var(--hd-1);
}
.filter-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; font-size: 11px; color: #2E2A26;
  background: var(--paper); border: 2px solid var(--ink-line); border-radius: var(--r-pill);
}
.filter-x:hover { background: var(--red); color: #FBFAF3; }
.filter-hint { font-size: var(--fs-micro); color: var(--muted); }

/* 가수별 보기 */
.artist-index {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s1); margin-bottom: var(--s4);
}
.artist-card {
  display: grid; gap: 4px; text-align: left;
  padding: 12px 14px; color: var(--ink); background: var(--paper);
  border: 3px solid var(--ink-line); border-radius: var(--r-md); box-shadow: var(--hd-1);
  transition: transform .14s ease, box-shadow .14s ease, background-color .16s;
}
.artist-card:hover { transform: translate(-2px, -2px); box-shadow: var(--hd-2); background: var(--paper-soft); }
.artist-card:active { transform: translate(1px, 1px); box-shadow: var(--hd-1); }
.artist-name { font-weight: 700; font-size: 14px; }
.artist-meta { font-size: var(--fs-micro); color: var(--muted); }
.artist-meta b { color: var(--ink); font-family: var(--font-mono); }

/* 프로필 — 노래책 통계 */
.pf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s1); padding: var(--s2) var(--s2) 4px; }
.pf-stat { padding: 12px 14px; background: var(--paper-soft); border: 2px solid var(--line); border-radius: var(--r-sm); }
.pf-stat .k { font-size: var(--fs-micro); color: var(--muted); }
.pf-stat .v { font-family: var(--font-display); font-size: 24px; line-height: 1.25; }
.pf-stat .v em { font-style: normal; font-size: 12px; margin-left: 3px; color: var(--muted); }
.pf-bars { display: grid; gap: 7px; padding: var(--s2); }
.pf-bar-row { display: grid; grid-template-columns: 74px 1fr 40px; align-items: center; gap: 10px; font-size: var(--fs-caption); }
.pf-bar-k { color: var(--ink); font-weight: 600; }
.pf-bar { height: 14px; background: var(--paper-soft); border: 2px solid var(--ink-line); border-radius: var(--r-pill); overflow: hidden; }
.pf-bar-fill { display: block; height: 100%; background: repeating-linear-gradient(45deg, var(--sky) 0 6px, var(--accent) 6px 12px); }
.pf-bar-n { text-align: right; font-family: var(--font-mono); color: var(--muted); }
.pf-top { padding: 0 var(--s2) var(--s2); }
.pf-top-h { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-pixel); font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.pf-top-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pf-top-list li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; padding: 7px 10px; background: var(--paper-soft); border: 2px solid var(--line); border-radius: var(--r-sm); }
.pf-top-r { font-family: var(--font-pixel); font-size: 12px; line-height: 1.7; text-align: center; color: #2E2A26; background: var(--yellow); border: 2px solid var(--ink-line); border-radius: var(--r-pill); }
.pf-top-n { font-weight: 600; }
.pf-top-c { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--muted); }

/* 곡 목록 로딩 실패 안내 */
.empty.error .btn-primary { margin-top: var(--s2); }

/* 다크 모드 보정 */
:root[data-theme="dark"] .seg-btn,
:root[data-theme="dark"] .sel select,
:root[data-theme="dark"] .btn-hard,
:root[data-theme="dark"] .searchbar .clr { color: var(--ink); background: var(--paper); }
:root[data-theme="dark"] .seg-btn.active,
:root[data-theme="dark"] .btn-hard.on { background: var(--yellow); color: #2E2A26; }
:root[data-theme="dark"] .btn-hard i { color: #F6C11B; }
:root[data-theme="dark"] .btn-hard.on i { color: #2E2A26; }
:root[data-theme="dark"] .recent-chip { background: var(--paper); border-color: var(--line-strong); }
:root[data-theme="dark"] .recent-label,
:root[data-theme="dark"] .filter-hint { color: rgba(240,234,218,.80); }
:root[data-theme="dark"] .recent-clear { color: rgba(240,234,218,.72); border-color: var(--line-strong); }
:root[data-theme="dark"] .pf-bar-fill { background: repeating-linear-gradient(45deg, var(--accent) 0 6px, var(--sky) 6px 12px); }

/* 좁은 화면 — 툴바 버튼이 꽉 차게 */
@media (max-width: 560px) {
  .toolbar-actions { width: 100%; }
  .seg, .sel, .btn-hard { flex: 1 1 auto; justify-content: center; }
  .artist-index { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .pf-bar-row { grid-template-columns: 62px 1fr 34px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   v2.29 — 휴대폰(좁은 화면) 장식 보정
   메뉴가 여러 줄로 접혀도 장식이 메뉴 뒤로 숨지 않고, 제목과도 과하게
   겹치지 않도록 크기·위치를 줄입니다.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .deco-heart-l { top: 2px;  left: -14px;  width: 112px !important; }
  .deco-heart-r { top: 14px; right: -18px; width: 132px !important; }
  .deco-note    { top: 2px;  right: 5%;     font-size: 62px !important; }
  .deco-phones  { top: 34px; left: 20%;     font-size: 46px !important; }
  .deco-vinyl   { top: 96px; left: 2%;      font-size: 74px !important; }
}
@media (max-width: 420px) {
  .deco-heart-l { width: 96px !important; }
  .deco-heart-r { width: 112px !important; }
  .deco-note    { font-size: 54px !important; right: 3%; }
  .deco-phones  { font-size: 42px !important; left: 18%; }
  .deco-vinyl   { font-size: 66px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   v2.36 — 오늘 부른 곡 (상단 메뉴 탭 · 전체 화면) + 방송 클립 창
   · v2.33 의 오른쪽 패널 목록 · v2.35 의 탭(.hs-*)은 사용하지 않습니다.
   ══════════════════════════════════════════════════════════════════════ */
.today-page { display: grid; gap: var(--s2); }

.today-head {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  background: var(--paper); border: 3px solid var(--ink-line);
  border-radius: var(--r-md); box-shadow: var(--hd-1); padding: var(--s2);
}
.today-head-t { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.today-head-ico { font-size: 24px; color: var(--red); }
.today-title { margin: 0; font: 700 var(--fs-h2) var(--font-pixel); color: var(--ink); }
.today-date { font-size: var(--fs-caption); color: var(--muted); }
.today-stats { display: flex; flex-wrap: wrap; gap: var(--s1); }
.today-stat {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; border: 3px solid var(--ink-line); border-radius: var(--r-pill);
  background: var(--paper-soft); font: 700 var(--fs-micro) var(--font-pixel); color: var(--ink);
}
.today-stat b { font-size: 13px; }

.today-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.today-item {
  display: flex; align-items: center; gap: var(--s2);
  background: var(--paper); border: 3px solid var(--ink-line);
  border-radius: var(--r-md); box-shadow: var(--hd-1);
  padding: 12px 14px; cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease;
}
.today-item:hover { transform: translate(-1px,-1px); box-shadow: var(--hd-2); }
.today-at {
  flex: 0 0 auto; min-width: 46px;
  font: 700 12px var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums;
}
.today-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; text-align: left; }
.today-text b { font: 700 var(--fs-body) var(--font-sans); color: var(--ink); word-break: keep-all; }
.today-text em { font-style: normal; font-size: var(--fs-caption); color: var(--muted); }
.today-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.today-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex: 0 0 auto; }
.today-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px; text-decoration: none;
  border: 2px solid var(--ink-line); border-radius: var(--r-sm);
  background: var(--paper-soft); color: var(--ink);
  font: 700 var(--fs-micro) var(--font-sans); cursor: pointer;
}
.today-btn:hover { background: var(--yellow); color: #2E2A26; }
.today-btn.book { background: var(--yellow); color: #2E2A26; }
.today-btn.clip { background: var(--pink); color: #2E2A26; }
.today-btn.yt   { background: var(--red); color: #fff; }
:root[data-theme="dark"] .today-btn.book,
:root[data-theme="dark"] .today-btn.clip { color: #14243A; }

.today-note {
  padding: var(--s2); background: var(--paper-soft);
  border: 3px solid var(--ink-line); border-radius: var(--r-md);
  font-size: var(--fs-caption); line-height: 1.85; color: var(--muted);
}
.today-note b { color: var(--ink); }

/* ── 방송 클립 창 ─────────────────────────────────────────────────────── */
.clip-overlay {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: var(--overlay); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.clip-box {
  width: min(96vw, 1000px); max-height: 92vh;
  display: flex; flex-direction: column;
  background: var(--paper); border: 3px solid var(--ink-line);
  border-radius: var(--r-md); box-shadow: var(--hd-3); overflow: hidden;
}
.clip-head {
  display: flex; align-items: center; gap: var(--s2);
  padding: 12px 14px; background: var(--paper-soft); border-bottom: 3px solid var(--ink-line);
}
.clip-head-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; }
.clip-head-text b { font: 700 var(--fs-body) var(--font-sans); color: var(--ink); word-break: keep-all; }
.clip-head-text em { font-style: normal; font-size: var(--fs-caption); color: var(--muted); }
.clip-x {
  flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  background: var(--yellow); color: var(--ink);
  border: 3px solid var(--ink-line); border-radius: var(--r-sm); box-shadow: var(--hd-1);
  font: 700 15px/1 var(--font-sans);
}
.clip-x:hover { transform: translate(-1px,-1px); box-shadow: var(--hd-2); }
.clip-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.clip-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.clip-fallback {
  display: grid; justify-items: center; gap: 10px;
  padding: var(--s4) var(--s2); text-align: center; color: var(--muted);
}
.clip-fallback i { font-size: 40px; color: var(--muted-2); }
.clip-fallback p { margin: 0; font-size: var(--fs-caption); line-height: 1.8; }
.clip-foot {
  display: flex; flex-wrap: wrap; gap: var(--s1);
  padding: 12px 14px; background: var(--paper-soft); border-top: 3px solid var(--ink-line);
}
.clip-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px; text-decoration: none; cursor: pointer;
  background: var(--yellow); color: #2E2A26;
  border: 3px solid var(--ink-line); border-radius: var(--r-sm); box-shadow: var(--hd-1);
  font: 700 var(--fs-caption) var(--font-sans);
}
.clip-btn.ghost { background: var(--paper); color: var(--ink); }
.clip-btn:hover { transform: translate(-1px,-1px); box-shadow: var(--hd-2); }
:root[data-theme="dark"] .clip-btn { color: #14243A; }
:root[data-theme="dark"] .clip-btn.ghost { color: var(--ink); }

@media (max-width: 900px) {
  .today-item { flex-wrap: wrap; }
  .today-acts { width: 100%; justify-content: flex-start; }
  .today-text { flex: 1 1 100%; order: 2; }
  .today-at { order: 1; }
}
@media (max-width: 720px) {
  .today-head { padding: var(--s1) var(--s2); }
  .clip-box { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   v2.34 — 제목 줄바꿈 보정 (2026-09-20)
   · 한국어 제목이 단어 중간에서 잘리던 문제 수정 → word-break: keep-all
     (예: "사랑은 은하수 다방에 / 서"  →  "사랑은 은하수 / 다방에서")
   · 곡 카드 제목은 최대 2줄 고정 (넘치는 부분은 … 처리) → 카드 높이 정렬
   · 아주 긴 영문·숫자 덩어리는 overflow-wrap: anywhere 로 화면 밖으로 넘치지 않게 처리
   ══════════════════════════════════════════════════════════════════════ */
.song-card .info .title,
.song-card .info .artist,
.sheet-title, .sheet-artist, .sheet-extra, .sheet-memo,
.artist-name, .artist-meta,
.yt-item-t, .yt-title, .yt-handle, .yt-hint,
.pf-song-text, .pf-name, .pf-tagline, .pf-empty, .pf-link,
.recent-label, .recent-row,
.empty-t, .empty-s, .star-notice {
  word-break: keep-all;      /* 한국어는 단어 단위로만 줄바꿈 */
  overflow-wrap: anywhere;   /* keep-all 로 안 끊기는 긴 영문/숫자는 필요할 때만 넘김 */
}

/* 곡 카드 제목 — 최대 두 줄 */
.song-card .info .title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════
   v2.37 — 검색어 자동완성 · 상세 창 유튜브 재생 · 기록·랭킹 · 오늘 탭
   ══════════════════════════════════════════════════════════════════════════ */

/* 검색창 위에 드롭다운을 겹치기 위해 필요 */
.searchbar{position:relative}

/* ── 검색어 자동완성 드롭다운 ─────────────────────────────────────────── */
.suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:80;
  display:flex;flex-direction:column;gap:2px;padding:6px;
  background:var(--paper);border:3px solid var(--ink-line);border-radius:12px;
  box-shadow:6px 6px 0 var(--hard-shadow);overflow:hidden}
.suggest-item{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;margin:0;
  border:0;border-radius:8px;background:transparent;cursor:pointer;text-align:left;
  font:600 13px/1.3 var(--font-sans);color:var(--ink)}
.suggest-item .ph{flex:0 0 auto;color:var(--accent);font-size:15px}
.suggest-item.active{background:var(--paper-soft)}
.suggest-item .suggest-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest-item .suggest-a{flex:0 0 auto;max-width:36%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:11.5px;color:var(--muted)}
.suggest-item.plain{border-top:2px solid var(--line);border-radius:0 0 8px 8px;color:var(--accent)}
.suggest-item mark.hl{background:var(--yellow);color:var(--ink);padding:0 1px}

/* ── 상세 창 유튜브 바로 재생 ─────────────────────────────────────────── */
.sheet-yt{position:relative;width:100%;aspect-ratio:16/9;margin-bottom:10px;overflow:hidden;
  background:#160b10;border:3px solid var(--ink-line);border-radius:10px;box-shadow:4px 4px 0 var(--hard-shadow)}
.sheet-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.media-btn.ext{flex:0 0 auto;align-self:stretch;width:46px;padding:0;display:grid;place-items:center;
  border:3px solid var(--ink-line);border-radius:10px;background:var(--paper);
  box-shadow:3px 3px 0 var(--hard-shadow);color:var(--ink);text-decoration:none;font-size:16px}
.media-btn.ext:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--hard-shadow)}

/* ── 「오늘 부른 곡」 하위 탭 (오늘 / 기록·랭킹) ─────────────────────── */
.today-tabs{display:flex;gap:8px;margin:16px 0 4px;flex-wrap:wrap}
.today-tab{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;cursor:pointer;
  border:3px solid var(--ink-line);border-radius:999px;background:var(--paper);
  font:700 13px var(--font-sans);color:var(--ink-soft);box-shadow:3px 3px 0 var(--hard-shadow)}
.today-tab .ph{font-size:15px}
.today-tab.active{background:var(--yellow);color:var(--ink)}
.today-tab:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--hard-shadow)}

/* ── 기록 · 랭킹 (RecordPage) ─────────────────────────────────────────── */
.rec-periods{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.rec-period{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;cursor:pointer;
  border:3px solid var(--ink-line);border-radius:999px;background:var(--paper);
  font:700 12.5px var(--font-sans);color:var(--ink-soft);box-shadow:3px 3px 0 var(--hard-shadow)}
.rec-period.active{background:var(--yellow);color:var(--ink)}
.rec-period-n{display:inline-grid;place-items:center;min-width:20px;padding:1px 5px;border-radius:999px;
  background:var(--chip-count-bg);font-size:10.5px}
.rec-card{background:var(--paper);border:3px solid var(--ink-line);border-radius:14px;
  box-shadow:6px 6px 0 var(--hard-shadow);padding:14px 16px;margin-bottom:14px}
.rec-card-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;
  font:700 14px var(--font-pixel);color:var(--ink)}
.rec-card-h .ph{font-size:17px;color:var(--accent)}
.rec-hint{font:500 11.5px var(--font-sans);color:var(--muted)}
.rec-empty{font:600 13px var(--font-sans);color:var(--muted);padding:8px 2px}

/* 랭킹 TOP 10 */
.rec-ranks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.rec-rank{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border:0;border-radius:9px;
  background:transparent;cursor:pointer;text-align:left;font-family:var(--font-sans)}
.rec-rank:hover{background:var(--paper-soft)}
.rec-rank-n{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border:2px solid var(--ink-line);
  border-radius:8px;background:var(--paper-soft);font:700 12px var(--font-pixel);color:var(--ink)}
.rec-rank-n.top{background:var(--yellow)}
.rec-rank-t{flex:0 1 auto;min-width:0;max-width:45%}
.rec-rank-t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--ink)}
.rec-rank-t em{display:block;font-style:normal;font-size:11px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-rank-bar{flex:1 1 auto;height:10px;border:2px solid var(--ink-line);border-radius:999px;
  background:var(--paper-soft);overflow:hidden}
.rec-rank-bar span{display:block;height:100%;background:var(--mint-400);border-radius:999px}
.rec-rank-c{flex:0 0 auto;font:700 12px var(--font-pixel);color:var(--accent)}

/* 이 기간에 안 부른 노래 */
.rec-none{display:flex;flex-wrap:wrap;gap:6px;max-height:200px;overflow:auto;padding:2px}
.rec-none-chip{padding:6px 10px;border:2px solid var(--line-strong);border-radius:999px;background:var(--paper-soft);
  font:600 12px var(--font-sans);color:var(--ink);cursor:pointer}
.rec-none-chip:hover{background:var(--yellow)}
.rec-more{align-self:center;font:600 12px var(--font-sans);color:var(--muted)}

/* 날짜별 기록 */
.rec-date{margin-top:6px}
.rec-date-h{display:flex;align-items:center;gap:8px;margin:12px 0 6px;
  font:700 13px var(--font-pixel);color:var(--ink-soft)}
.rec-date-n{font:600 11px var(--font-sans);color:var(--muted)}
.rec-date .today-list{margin:0}

/* ══════════════════════════════════════════════════════════════════════
   v2.38 — 가사 활용 · 재생 부드럽게 · 방송용 가사 창
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1) 방송 클립이 끊기지 않게 ────────────────────────────────────────
   · 배경 흐림(backdrop-filter)은 동영상 위에서 매 프레임 다시 계산됩니다 → 클립 재생 중엔 끔
   · 홈 장식 애니메이션도 함께 멈춰 GPU 를 영상에 넘겨줍니다
   · iframe 을 합성 레이어로 올리고 레이아웃 재계산 범위를 좁힙니다 */
html.clip-open .clip-overlay {
  background: rgba(18, 22, 30, .92);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.clip-open #root > *:not(.clip-overlay),
html.clip-open #root > *:not(.clip-overlay) * {
  animation-play-state: paused !important;
}
.clip-frame {
  contain: strict;              /* 프레임 안쪽 변화가 바깥 레이아웃을 건드리지 않게 */
  isolation: isolate;
}
.clip-frame iframe {
  transform: translateZ(0);     /* GPU 합성 레이어 */
  backface-visibility: hidden;
  contain: strict;
  will-change: transform;
}

/* ── 2) 가사 상자 도구 줄 (크게 보기 · 복사 · 방송용) ────────────────── */
.ch-lyric-tools {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: var(--s2) 0 6px;
}
.ch-lyric-tools button {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 7px 11px; font: 700 12px var(--font-sans); color: var(--ink);
  background: var(--paper-soft); border: 2px solid var(--ink-line);
  border-radius: var(--r-sm); box-shadow: 2px 2px 0 var(--ink-line);
}
.ch-lyric-tools button:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink-line); }
.ch-lyric-tools button:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink-line); }

/* ── 3) 가사에서 찾은 곡 패널 ──────────────────────────────────────── */
.ch-ls-panel {
  position: fixed; z-index: 9700;
  background: var(--paper); border: 3px solid var(--ink-line);
  border-radius: var(--r-md); box-shadow: var(--hd-3);
  overflow: hidden; font-family: var(--font-sans);
}
.ch-ls-head {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px; background: var(--paper-soft);
  border-bottom: 2px solid var(--ink-line);
}
.ch-ls-head b { flex: 1 1 auto; font-size: 13px; color: var(--ink); }
.ch-ls-head i { color: var(--sky); }
.ch-ls-x {
  cursor: pointer; padding: 0 4px; font-size: 13px; color: var(--muted);
}
.ch-ls-body { max-height: 46vh; overflow-y: auto; }
.ch-ls-item {
  position: relative; padding: 9px 12px 10px; cursor: pointer;
  border-bottom: 1px dashed var(--ink-line);
}
.ch-ls-item:last-child { border-bottom: 0; }
.ch-ls-item:hover { background: var(--code-bg); }
.ch-ls-t { display: flex; align-items: baseline; gap: 6px; }
.ch-ls-t b { font-size: 13.5px; color: var(--ink); }
.ch-ls-t em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.ch-ls-line {
  margin-top: 3px; padding-right: 60px;
  font-size: 12.5px; line-height: 1.6; color: var(--ink-soft);
  word-break: break-word;
}
.ch-ls-line mark { background: var(--yellow); color: #2E2A26; padding: 0 2px; border-radius: 3px; }
.ch-ls-view {
  position: absolute; right: 10px; top: 9px; cursor: pointer;
  padding: 4px 8px; font: 700 11px var(--font-sans); color: #2E2A26;
  background: var(--yellow); border: 2px solid var(--ink-line); border-radius: var(--r-sm);
}
.ch-ls-foot {
  padding: 8px 12px; font-size: 11.5px; color: var(--muted);
  background: var(--paper-soft); border-top: 2px solid var(--ink-line);
}
.ch-ls-foot b { color: var(--ink); }
.ch-ls-exp { cursor: pointer; color: var(--sky); text-decoration: underline; }
.ch-ls-ok { display: block; margin-bottom: 5px; color: var(--ink); }
.ch-ls-empty { margin: 0; padding: 14px 12px; font-size: 12.5px; line-height: 1.7; color: var(--muted); }

/* ── 4) 무대 모드 (가사 크게 보기) ──────────────────────────────────── */
.ch-stage {
  position: fixed; inset: 0; z-index: 9800;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(18, 22, 30, .94);
}
.ch-stage[hidden] { display: none; }
.ch-stage-box {
  width: min(96vw, 900px); max-height: 92vh; overflow-y: auto;
  background: var(--paper); border: 3px solid var(--ink-line);
  border-radius: var(--r-md); box-shadow: var(--hd-3);
}
.ch-stage-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  padding: 10px 12px; background: var(--paper-soft); border-bottom: 3px solid var(--ink-line);
}
.ch-stage-t { flex: 1 1 auto; font-size: 14px; color: var(--ink); }
.ch-stage-tools { display: flex; flex-wrap: wrap; gap: 5px; }
.ch-stage-tools button {
  cursor: pointer; padding: 6px 10px; font: 700 12px var(--font-sans); color: var(--ink);
  background: var(--paper); border: 2px solid var(--ink-line); border-radius: var(--r-sm);
}
.ch-stage-tools button:hover { background: var(--yellow); color: #2E2A26; }
.ch-stage-text {
  margin: 0; padding: var(--s3);
  font: 700 30px/1.8 var(--font-sans); color: var(--ink);
  white-space: pre-wrap; word-break: keep-all;
}
:root[data-theme="dark"] .ch-stage-text { color: rgba(240, 234, 218, .95); }
:root[data-theme="dark"] .ch-ls-panel { background: #22354C; }

/* ══════════════════════════════════════════════════════════════════════
   v2.44 · v2.45 — 듀엣곡 표시 · 듀엣곡 필터 버튼
   ══════════════════════════════════════════════════════════════════════ */

/* ── 곡 카드 · 곡명 위 빈 칸 (듀엣곡 자리) ──────────────────────────────
   · 듀엣곡이 아니어도 칸 높이를 잡아 두어 카드 높이가 서로 어긋나지 않습니다. */
.song-flag {
  display: flex; align-items: center; min-height: 21px; margin-bottom: 2px;
}
.duet-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px;
  font-size: var(--fs-micro); font-weight: 600; line-height: 1.5;
  color: #2E2A26; background: #d9d0ee;         /* 라벤더 — 어려운 노래(노랑)와 구분 */
  border: 2px solid var(--ink-line); border-radius: var(--r-pill);
  box-shadow: 1.5px 1.5px 0 var(--hard-shadow);
}
.duet-chip i { font-size: 11px; }
:root[data-theme="dark"] .duet-chip { color: #14243A; background: #b9aee0; }

/* 상세 창 — 듀엣 배지(오른쪽 아래) · 안내문 */
.sheet-tag.duet { left: auto; right: 12px; background: #d9d0ee; }
:root[data-theme="dark"] .sheet-tag.duet { color: #14243A; background: #b9aee0; }
.duet-notice {
  margin-top: 8px; display: flex; align-items: flex-start; gap: 7px;
  font-size: 12px; color: var(--ink); line-height: 1.5;
}
.duet-notice i { font-size: 14px; color: #7a63c8; margin-top: 2px; }
:root[data-theme="dark"] .duet-notice i { color: #b9aee0; }

/* ── v2.45 · v2.45a: 「듀엣곡만」 필터 버튼 + 듀엣곡 개수 숫자 ──────────
   · 버튼 안 오른쪽에 듀엣곡 개수가 라벤더 배지로 표시됩니다.
   · 배지 숫자는 지금 조건(장르 · 가수 · 검색어)의 듀엣곡 수입니다. */
.btn-duet {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-pixel); font-size: 11.5px; font-weight: 700;
  padding: 11px 14px; color: var(--ink); background: var(--paper);
  border: 3px solid var(--ink-line); border-radius: var(--r-md); box-shadow: var(--hd-1);
  transition: transform .14s ease, box-shadow .14s ease, background-color .16s;
}
.btn-duet:hover { transform: translate(-2px, -2px); box-shadow: var(--hd-2); }
.btn-duet.on { background: #d9d0ee; }
.btn-duet i { font-size: 13px; color: #7a63c8; }
.btn-duet.on i { color: #2E2A26; }
:root[data-theme="dark"] .btn-duet.on { color: #14243A; background: #b9aee0; }
/* 듀엣곡 개수 숫자 — 라벤더 배지 (어려운 노래만의 회색 배지와 구분) */
.btn-duet .btn-hard-n {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  padding: 2px 8px; color: #4A3B7A;
  background: #ede7fb; border: 2px solid var(--ink-line); border-radius: var(--r-pill);
}
.btn-duet.on .btn-hard-n { background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] .btn-duet .btn-hard-n { color: #EDE7FB; background: #4A3B7A; }
@media (max-width: 560px) {
  .btn-duet, .btn-duet .btn-hard-n { font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════════════════
   v2.46 — 찜하기 · 부른 횟수 배지 · 신청곡 탭
   ══════════════════════════════════════════════════════════════════════ */
/* 「찜한 곡만」 토글 (툴바) */
.btn-fav {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-pixel); font-size: 11.5px; font-weight: 700;
  padding: 11px 14px; color: var(--ink); background: var(--paper);
  border: 3px solid var(--ink-line); border-radius: var(--r-md); box-shadow: var(--hd-1);
  transition: transform .14s ease, box-shadow .14s ease, background-color .16s;
}
.btn-fav:hover { transform: translate(-2px, -2px); box-shadow: var(--hd-2); }
.btn-fav.on { background: #F6C9D8; }
.btn-fav i { font-size: 13px; color: #C4477B; }
.btn-fav.on i { color: #8C2D53; }
.btn-fav.on .btn-hard-n { background: var(--paper); color: var(--ink); }
::root[data-theme="dark"] .btn-fav i { color: #F3A7C6; }
::root[data-theme="dark"] .btn-fav.on { background: #7C3D5C; color: #FBECF2; }
::root[data-theme="dark"] .btn-fav.on i { color: #FBECF2; }

/* 곡 카드 ♡ 버튼 (오른쪽 위) */
.fav-btn {
  position: absolute; top: 30px; right: 8px; z-index: 2;
  width: 32px; height: 32px; display: grid; place-items: center;
  font-size: 16px; color: var(--muted); background: var(--paper);
  border: 2px solid var(--ink-line); border-radius: 999px;
  box-shadow: 2px 2px 0 var(--hard-shadow); cursor: pointer;
  transition: transform .12s ease, color .12s ease, background-color .12s ease;
}
.fav-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--hard-shadow); color: #C4477B; }
.fav-btn.on { color: #fff; background: #E9699B; border-color: #8C2D53; }
.fav-btn.on i { color: #fff; }
::root[data-theme="dark"] .fav-btn { background: var(--paper-soft); }

/* 이번 달 부른 횟수 배지 */
.sung-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font: 700 10px/1 var(--font-mono); color: #B4470F;
  background: #FDE3CF; border: 2px solid #E8A271; border-radius: var(--r-pill); padding: 3px 8px;
}
.sung-chip i { font-size: 10px; color: #E0691E; }
::root[data-theme="dark"] .sung-chip { color: #FFD9BC; background: #5A3418; border-color: #8A5A2C; }
::root[data-theme="dark"] .sung-chip i { color: #F6A34A; }

/* 상세 창 [찜하기] 버튼 */
.fav-toggle { background: #FBE0EA; color: #8C2D53; border-color: #8C2D53; }
.fav-toggle i { color: #D14B85; }
::root[data-theme="dark"] .fav-toggle { background: #5C2B41; color: #F8C6DB; border-color: #A05070; }
::root[data-theme="dark"] .fav-toggle i { color: #F8C6DB; }

/* 신청곡 탭 */
.req-head-t { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.req-head-ico { font-size: 24px; color: #C4477B; }
::root[data-theme="dark"] .req-head-ico { color: #F3A7C6; }
.req-note { margin: var(--s2) 0; }
.req-form {
  background: var(--paper-soft); border: 3px solid var(--ink-line); border-radius: var(--r-md);
  padding: 12px; display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--s2); box-shadow: var(--hd-1);
}
.req-row { display: flex; gap: 8px; flex-wrap: wrap; }
.req-input {
  flex: 1 1 150px; padding: 10px 12px; font: 500 13px var(--font-sans); color: var(--ink);
  background: var(--paper); border: 2px solid var(--ink-line); border-radius: 10px; outline: none; min-width: 0;
}
.req-input:focus { border-color: var(--mint-400); box-shadow: 0 0 0 3px rgba(13, 194, 250, .15); }
.req-input-title { flex: 2 1 220px; font-weight: 700; }
.req-send { align-self: flex-start; }
.req-send[disabled] { opacity: .6; cursor: wait; }
.req-msg { display: flex; align-items: center; gap: 6px; font: 600 12px var(--font-sans); margin: 0; }
.req-msg.ok { color: #1D7A46; }
.req-msg.err { color: var(--red); }
::root[data-theme="dark"] .req-msg.ok { color: #7FD8A6; }
.req-card {
  background: var(--paper); border: 3px solid var(--ink-line); border-radius: var(--r-md);
  box-shadow: var(--hd-1); padding: 14px; margin-bottom: var(--s2);
}
.req-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.req-item-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left;
  padding: 9px 12px; background: var(--paper-soft); border: 2px solid var(--ink-line);
  border-radius: 10px; cursor: pointer; color: var(--ink);
}
.req-item-text { min-width: 0; }
.req-item-text b { display: block; font: 700 13.5px var(--font-sans); }
.req-item-text em { display: block; font: 500 11.5px var(--font-sans); font-style: normal; color: var(--muted); margin-top: 2px; }
.req-item-side { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.req-item-date { font: 500 10.5px var(--font-mono); color: var(--muted); }
.req-status { font: 700 10px/1 var(--font-sans); padding: 5px 8px; border-radius: var(--r-pill); border: 2px solid var(--ink-line); }
.req-status.wait { background: var(--yellow); color: var(--ink); }
.req-status.done { background: #D8F2E1; color: #1D7A46; }
::root[data-theme="dark"] .req-status.done { background: #1F4D33; color: #9FE6BE; }
@media (max-width: 900px) {
  .btn-fav, .btn-fav .btn-hard-n { font-size: 11px; }
}

/* v2.47-8: 다크에서 브랜드 제목이 이중으로 보이던 그림자 제거 */
.brand-title, .brand-sub, .brand-meta { text-shadow: none !important; }
:root[data-theme="dark"] .brand-title { text-shadow: none !important; }