:root {
  --body-bg: #f6f0e7;
  --header-bg: #2d241f;
  --button-bg: #7a4d35;
  --card-bg: #fffaf4;
  --text-color: #2f2924;
  --hero-text-color: #ffffff;
  --nav-text-color: #f8eee3;
  --base-font-size: 16px;
  --hero-title-size: 46px;
  --hero-desc-size: 20px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Noto Sans KR", Arial, sans-serif;
  background: var(--body-bg) !important;
  color: var(--text-color) !important;
  font-size: var(--base-font-size) !important;
}

.site-header {
  min-height: 82px;
  padding: 0 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--header-bg) !important;
  color: var(--nav-text-color);
  position: sticky;
  top: 0;
  z-index: 10;
}

.logo { font-size: 24px; font-weight: 700; cursor: pointer; }
.logo small { display: block; font-size: 12px; color: var(--nav-text-color); opacity: .85; }

nav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
nav button {
  border: 0;
  background: transparent;
  color: var(--nav-text-color) !important;
  padding: 9px 12px;
  cursor: pointer;
  border-radius: 8px;
  font-weight: 700;
}
nav button:hover { background: rgba(255,255,255,.08); }

button {
  border: none;
  background: var(--button-bg) !important;
  color: white;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
}

.secondary-btn { opacity: .9; }
.hidden { display: none !important; }

.auth-area { display: flex; gap: 8px; align-items: center; color: var(--nav-text-color); font-weight: 700; }

main { max-width: 1240px; margin: 0 auto; min-height: 720px; padding: 36px 24px; }

.page { display: none; }
.page.active { display: block; }

.hero {
  min-height: 380px;
  background-color: #5e4433;
  background-image: linear-gradient(135deg, #3c3029, #8a674d);
  background-size: cover;
  background-position: center center;
  color: var(--hero-text-color) !important;
  border-radius: 28px;
  padding: 80px 70px;
  margin-bottom: 42px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(45,36,31,.16);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20,12,8,.18);
}
.hero h1, .hero p, .hero div { position: relative; z-index: 1; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.hero h1 { font-size: var(--hero-title-size) !important; margin: 0 0 16px; color: var(--hero-text-color) !important; }
.hero p { font-size: var(--hero-desc-size) !important; color: var(--hero-text-color) !important; margin: 0 0 26px; }

.content-section, .page-title, .auth-page, .admin-form, .list-box {
  background: var(--card-bg) !important;
  border: 1px solid #e4d4c2;
  border-radius: 22px;
  padding: 28px;
  margin-bottom: 28px;
  color: var(--text-color) !important;
}
.page-title h1 { margin: 0 0 8px; font-size: 34px; color: var(--text-color) !important; }
.page-title p { margin: 0; }

.toolbar { display: flex; gap: 12px; margin-bottom: 24px; }
.toolbar select, input, textarea, select {
  width: 100%;
  padding: 13px;
  border: 1px solid #d5c0aa;
  border-radius: 10px;
  background: white;
  color: var(--text-color) !important;
}
textarea { min-height: 130px; resize: vertical; }

.inline-field { display: grid; grid-template-columns: 1fr 110px; gap: 10px; width: 100%; }
.helper-text, .check-message { font-size: 14px; color: #6e5d50; }
.check-message.ok { color: #197b30; }
.check-message.error { color: #b3261e; }

.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.card {
  background: var(--card-bg) !important;
  border: 1px solid #e2d0bc;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(60,48,41,.08);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover, .list-item:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(60,48,41,.16); }
.card img, .card iframe, .card video {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border: 0;
  display: block;
  background: #201914;
}
.card audio { width: 100%; padding: 10px; }
.card-placeholder { height: 190px; display: flex; align-items: center; justify-content: center; background: #e8d8c7; }
.card-body { padding: 16px; }
.card-body h3 { margin: 0 0 8px; font-size: 18px; color: var(--text-color) !important; }
.card-body p { margin: 5px 0; font-size: 14px; }

.list-item {
  padding: 18px 0;
  border-bottom: 1px solid #e5d5c4;
  cursor: pointer;
}
.list-item.with-image { display: grid; grid-template-columns: 180px 1fr; gap: 20px; }
.list-item img { width: 180px; height: 130px; object-fit: cover; border-radius: 12px; }

.auth-page { max-width: 520px; margin: 40px auto; display: none; flex-direction: column; gap: 14px; }
.auth-page.active { display: flex; }

.admin-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.admin-form { display: flex; flex-direction: column; gap: 14px; }
.admin-list { display: flex; flex-direction: column; gap: 12px; }
.admin-row {
  background: white;
  border: 1px solid #e2d0bc;
  border-radius: 14px;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
.admin-row-actions { display: flex; gap: 8px; }
.delete-btn { background: #a53d2d !important; }

.category-badge {
  display: inline-block;
  margin: 6px 0 8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #ead8c6;
  color: #4b3528;
  font-size: 12px;
  font-weight: 700;
}
.category-list { display: flex; flex-wrap: wrap; gap: 8px; }
.category-chip { display: inline-flex; align-items: center; gap: 8px; background: white; border: 1px solid #e2d0bc; border-radius: 999px; padding: 8px 12px; }

.design-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 14px; }
.design-grid label { display: flex; flex-direction: column; gap: 8px; font-weight: 700; }
.design-grid input[type="color"] { height: 46px; padding: 4px; }

.content-page.template-gallery .card-grid { grid-template-columns: repeat(3, 1fr); }
.content-page.template-gallery .card img, .content-page.template-gallery .card iframe, .content-page.template-gallery .card video { height: 260px; }
.content-page.template-list .card-grid { display: block; }
.content-page.template-list .card { display: grid; grid-template-columns: 280px 1fr; margin-bottom: 18px; }
.content-page.template-timeline .page-title, .content-page.template-timeline .list-item, .content-page.template-timeline .card { border-left: 10px solid var(--button-bg); }

.detail-modal {
  position: fixed;
  inset: 0;
  background: rgba(23,18,15,.72);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.detail-modal.hidden { display: none !important; }
.detail-modal-inner {
  width: min(1080px, 96vw);
  max-height: 92vh;
  overflow: auto;
  background: var(--card-bg);
  color: var(--text-color);
  border-radius: 24px;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  padding: 26px;
}
.detail-close-btn { float: right; border-radius: 999px; margin-bottom: 12px; }
.detail-media-area { clear: both; margin-bottom: 22px; }
.detail-media-area img { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 18px; background: #201914; }
.detail-media-area iframe, .detail-media-area video { width: 100%; aspect-ratio: 16/9; min-height: 360px; border: 0; border-radius: 18px; background: #201914; }
.detail-media-area audio { width: 100%; margin-top: 14px; }
#detailDescription { margin-top: 18px; line-height: 1.8; white-space: pre-wrap; }

footer {
  text-align: center;
  padding: 36px;
  background: var(--header-bg) !important;
  color: var(--nav-text-color);
  font-size: 14px;
}

@media (max-width: 1100px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .site-header { height: auto; flex-direction: column; gap: 14px; padding: 20px; }
  .list-item.with-image, .content-page.template-list .card { display: block; }
}
@media (max-width: 760px) {
  .card-grid, .design-grid { grid-template-columns: 1fr; }
  .hero { padding: 48px 28px; }
  .detail-media-area iframe, .detail-media-area video { min-height: 220px; }
}


/* v28: 미디어 다운로드 버튼 숨김 및 저장 방지 보조 */
audio,
video {
  -webkit-user-select: none;
  user-select: none;
}

video::-internal-media-controls-download-button,
audio::-internal-media-controls-download-button {
  display: none;
}

video::-webkit-media-controls-enclosure,
audio::-webkit-media-controls-enclosure {
  overflow: hidden;
}

.no-download-note {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 6px;
}


/* v29: 라디오/음원 카드 폭 축소 */
#radioList,
#songList {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

#radioList .content-card,
#songList .content-card {
  width: fit-content;
  max-width: 520px;
  min-width: 320px;
}

#radioList .content-body,
#songList .content-body {
  width: 100%;
}

#radioList audio,
#songList audio {
  width: 280px;
  max-width: 100%;
}


/* v30: 라디오/음원 카드 더 작고 단정하게 */
#radioList,
#songList {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

#radioList .content-card,
#songList .content-card,
#radioList .list-item,
#songList .list-item {
  width: fit-content;
  max-width: 420px;
  min-width: 280px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid #e0cdb9;
  box-shadow: 0 3px 10px rgba(60, 48, 41, 0.07);
  background: var(--card-bg, #fffaf4) !important;
}

#radioList .content-card:hover,
#songList .content-card:hover,
#radioList .list-item:hover,
#songList .list-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(60, 48, 41, 0.11);
}

#radioList .content-body,
#songList .content-body,
#radioList .list-item > div,
#songList .list-item > div {
  width: 100%;
}

#radioList h3,
#songList h3 {
  font-size: 17px;
  line-height: 1.35;
  margin: 0 0 10px 0;
}

#radioList p,
#songList p {
  font-size: 14px;
  line-height: 1.55;
  margin: 6px 0;
}

#radioList audio,
#songList audio {
  width: 250px;
  max-width: 100%;
  margin: 8px 0 10px 0;
}

#radioList img,
#songList img {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 12px;
}

#radioList .category-badge,
#songList .category-badge {
  font-size: 11px;
  padding: 3px 8px;
  margin: 4px 0 6px;
}

@media (max-width: 760px) {
  #radioList .content-card,
  #songList .content-card,
  #radioList .list-item,
  #songList .list-item {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #radioList audio,
  #songList audio {
    width: 100%;
  }
}


/* v31: 작은 카드 + 미디어 다운로드 방지 재적용 */
audio,
video {
  -webkit-user-select: none;
  user-select: none;
}

video::-internal-media-controls-download-button,
audio::-internal-media-controls-download-button {
  display: none !important;
}

video::-webkit-media-controls-enclosure,
audio::-webkit-media-controls-enclosure {
  overflow: hidden;
}

#radioList audio,
#songList audio {
  width: 250px;
  max-width: 100%;
}

#radioList .list-item,
#songList .list-item,
#radioList .content-card,
#songList .content-card {
  max-width: 420px;
  min-width: 280px;
}


/* v32: PC 전용 느낌 강화 레이아웃 */
body {
  min-width: 1180px;
}

.site-header {
  min-width: 1180px;
  height: 86px;
  padding: 0 44px;
  flex-direction: row !important;
  gap: 24px;
}

.logo {
  min-width: 190px;
}

nav {
  flex: 1;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 8px;
}

nav button {
  white-space: nowrap;
  padding: 10px 14px;
  font-size: 14px;
}

.auth-area {
  min-width: 210px;
  justify-content: flex-end;
  white-space: nowrap;
}

main {
  max-width: 1280px;
  min-width: 1040px;
  padding: 42px 32px;
}

.hero {
  min-height: 390px;
  padding: 82px 72px;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

.content-section,
.page-title,
.auth-page,
.admin-form,
.list-box {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

.card-grid {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.content-page.template-gallery .card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.content-page.template-list .card-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.content-page.template-list .card {
  width: 100%;
  display: grid;
  grid-template-columns: 300px 1fr;
}

.toolbar {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

.admin-tabs {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

/* PC 화면에서 라디오/음원 카드는 작은 박스형 유지 */
#radioList,
#songList {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  align-items: flex-start;
}

#radioList .list-item,
#songList .list-item,
#radioList .content-card,
#songList .content-card {
  width: 420px;
  max-width: 420px;
  min-width: 420px;
}

#radioList audio,
#songList audio {
  width: 250px;
}

/* 관리자 입력 화면 PC 폭 정리 */
.admin-form input,
.admin-form textarea,
.admin-form select {
  max-width: 100%;
}

.design-grid {
  grid-template-columns: repeat(3, minmax(220px, 1fr));
}

/* 상세창 PC형 */
.detail-modal-inner {
  width: 980px;
  max-width: 980px;
}

.detail-media-area iframe,
.detail-media-area video {
  min-height: 480px;
}

/* PC 버전에서는 모바일 반응형 축소 규칙을 덜 강하게 */
@media (max-width: 1180px) {
  body {
    min-width: 1180px;
  }

  .site-header {
    min-width: 1180px;
  }

  main {
    min-width: 1040px;
  }
}


/* v33: 라디오/음원 목록 정돈형 레이아웃 */
#radioList.list-box,
#songList.list-box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 22px;
  display: grid !important;
  grid-template-columns: repeat(2, 420px);
  gap: 18px;
  align-items: start;
  justify-content: start;
}

#radioList .list-item,
#songList .list-item {
  display: block !important;
  width: 420px !important;
  max-width: 420px !important;
  min-width: 420px !important;
  padding: 22px 24px !important;
  margin: 0 !important;
  border: 1px solid #e0cdb9 !important;
  border-radius: 18px !important;
  background: var(--card-bg, #fffaf4) !important;
  box-shadow: 0 4px 14px rgba(60, 48, 41, 0.08) !important;
  cursor: pointer;
}

#radioList .list-item:hover,
#songList .list-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(60, 48, 41, 0.13) !important;
}

#radioList .list-item > div,
#songList .list-item > div {
  width: 100%;
  max-width: 100%;
}

#radioList h3,
#songList h3 {
  margin: 0 0 12px 0 !important;
  font-size: 18px !important;
  line-height: 1.42 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: var(--text-color, #2f2924) !important;
}

#radioList p,
#songList p {
  margin: 7px 0 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  word-break: keep-all;
  overflow-wrap: break-word;
  color: var(--text-color, #2f2924) !important;
}

#radioList p:first-of-type,
#songList p:first-of-type {
  margin-bottom: 14px !important;
}

#radioList strong,
#songList strong {
  font-weight: 800;
}

#radioList audio,
#songList audio {
  width: 270px !important;
  max-width: 100%;
  display: block;
  margin: 14px 0 18px 0 !important;
}

#radioList img,
#songList img {
  width: 100%;
  max-width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 14px;
}

#radioList .category-badge,
#songList .category-badge {
  display: inline-block;
  margin: 0 0 10px 0 !important;
  font-size: 12px;
  padding: 4px 9px;
}

/* 기존 v29/v30/v31/v32에서 남은 폭 강제값 보정 */
#radioList .content-card,
#songList .content-card {
  width: 420px !important;
  max-width: 420px !important;
  min-width: 420px !important;
}

/* PC 화면에서 빈 박스처럼 보이지 않도록 부모 높이 자동화 */
#radioList:empty::before,
#songList:empty::before {
  content: "등록된 자료가 없습니다.";
  display: block;
  background: var(--card-bg, #fffaf4);
  border: 1px solid #e0cdb9;
  border-radius: 18px;
  padding: 22px 24px;
  width: 420px;
}

/* 화면 하단에 쌓이는 버전 표시 숨김 */
body > div[style*="v25"],
body > div[style*="v26"],
body > div[style*="v27"],
body > div[style*="v28"],
body > div[style*="v29"],
body > div[style*="v30"],
body > div[style*="v31"],
body > div[style*="v32"] {
  display: none !important;
}

@media (max-width: 1180px) {
  #radioList.list-box,
  #songList.list-box {
    grid-template-columns: repeat(2, 420px);
  }
}


.version-marker {
  text-align: center;
  font-size: 11px;
  opacity: 0.45;
  padding: 8px;
}


/* v34: 깔끔한 프레임형 라디오/음원 레이아웃 */
#radioList.list-box,
#songList.list-box {
  background: #f8f4ef !important;
  border: 1px solid #dbcab8 !important;
  border-radius: 28px !important;
  box-shadow: none !important;
  padding: 42px 44px !important;
  margin-top: 24px !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(420px, 420px));
  gap: 28px !important;
  align-items: start;
  justify-content: start;
  width: 100%;
  min-height: 260px;
}

#radioList .list-item,
#songList .list-item,
#radioList .content-card,
#songList .content-card {
  width: 420px !important;
  max-width: 420px !important;
  min-width: 420px !important;
  background: #fcfaf7 !important;
  border: 1px solid #dcccbc !important;
  border-radius: 24px !important;
  box-shadow: 0 2px 8px rgba(53, 42, 34, 0.04) !important;
  padding: 34px 40px 30px !important;
  margin: 0 !important;
  overflow: hidden;
  align-self: start;
}

#radioList .list-item:hover,
#songList .list-item:hover,
#radioList .content-card:hover,
#songList .content-card:hover {
  transform: none !important;
  box-shadow: 0 4px 12px rgba(53, 42, 34, 0.06) !important;
}

#radioList .list-item > div,
#songList .list-item > div,
#radioList .content-body,
#songList .content-body {
  width: 100%;
}

#radioList h3,
#songList h3 {
  margin: 0 0 22px 0 !important;
  padding-bottom: 18px;
  border-bottom: 1px solid #e4d8cc;
  font-size: 20px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
  color: #221d19 !important;
}

#radioList p,
#songList p {
  margin: 0 0 10px 0 !important;
  font-size: 15px !important;
  line-height: 1.72 !important;
  color: #2d2723 !important;
  word-break: keep-all;
  overflow-wrap: break-word;
}

#radioList p:first-of-type,
#songList p:first-of-type {
  margin-bottom: 20px !important;
}

#radioList audio,
#songList audio {
  display: block;
  width: 290px !important;
  max-width: 100%;
  margin: 22px 0 24px 0 !important;
}

#radioList img,
#songList img {
  width: 100%;
  max-width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 18px;
}

#radioList .list-item p:nth-last-child(-n+2),
#songList .list-item p:nth-last-child(-n+2),
#radioList .content-card p:nth-last-child(-n+2),
#songList .content-card p:nth-last-child(-n+2) {
  margin-bottom: 8px !important;
}

#radioList .list-item::after,
#songList .list-item::after,
#radioList .content-card::after,
#songList .content-card::after {
  content: "";
  display: block;
  margin-top: 28px;
  border-bottom: 1px solid #e4d8cc;
}

#radioList strong,
#songList strong {
  font-weight: 800;
  color: #1f1a16;
}

#radioList .category-badge,
#songList .category-badge {
  display: inline-block;
  margin: 0 0 14px 0 !important;
  padding: 5px 10px;
  border-radius: 999px;
  background: #efe3d3;
  font-size: 12px;
  color: #6a4a33;
}

/* 하단 버전 문구 숨김 */
.version-marker {
  display: none !important;
}

/* Radios / Songs 페이지 상단 설명 박스도 더 정돈 */
#radiosPage .page-title,
#songsPage .page-title {
  border-radius: 24px;
  padding: 28px 34px;
}

#radiosPage .page-title h2,
#songsPage .page-title h2 {
  margin-bottom: 10px;
  font-size: 34px;
}

#radiosPage .page-title p,
#songsPage .page-title p {
  font-size: 15px;
  line-height: 1.65;
}

@media (max-width: 1400px) {
  #radioList.list-box,
  #songList.list-box {
    grid-template-columns: repeat(2, 420px);
  }
}

/* v43: 안정형 회원/검색/최신자료 UI */
.latest-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 20px;
}
.latest-category-box {
  border: 1px solid #e0cdb9;
  border-radius: 20px;
  background: rgba(255, 250, 244, 0.82);
  padding: 20px;
  min-height: 190px;
}
.latest-category-box h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  border-bottom: 1px solid #e6d8ca;
  padding-bottom: 10px;
}
.latest-mini-card { cursor: pointer; }
.latest-mini-card strong {
  display: block;
  font-size: 15px;
  line-height: 1.45;
  margin-bottom: 8px;
}
.latest-mini-card p {
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.9;
}
.page-search-input {
  min-width: 320px;
  flex: 1;
}
.login-required-page,
.mypage-page {
  max-width: 620px;
}
.login-required-page { text-align: center; }
.login-required-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 22px;
}
.mypage-page label {
  font-weight: 800;
  margin-top: 8px;
}
.warning-text { color: #9b3d2c; }
#mypageBtn {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.22);
}
.login-lock-note {
  margin-top: 10px !important;
  padding: 7px 10px;
  border-radius: 999px;
  background: #efe3d3;
  color: #7a4d35;
  font-size: 12px !important;
  font-weight: 800;
  display: inline-block;
}

/* v44: 우클릭/F12/드래그/선택 방지 */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input,
textarea,
select,
option {
  -webkit-user-select: text;
  user-select: text;
}

img,
audio,
video {
  -webkit-user-drag: none;
  user-drag: none;
}

/* v45: 상세창 미디어 표시 오류 수정 */
.detail-media-box {
  width: 100%;
  margin: 0 0 22px 0;
}

.detail-media-box img {
  display: block;
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: 18px;
  background: #f4eee7;
}

.detail-media-box video,
.detail-media-box iframe {
  width: 100%;
  min-height: 420px;
  border: 0;
  border-radius: 18px;
  background: #111;
}

.detail-audio-box {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 24px 0;
  padding: 18px 20px;
  border: 1px solid #e0cdb9;
  border-radius: 999px;
  background: #f8f4ef;
}

.detail-audio-box audio {
  width: 320px;
  max-width: 100%;
  display: block;
}

.detail-text-box h2 {
  margin-top: 0;
  margin-bottom: 18px;
  font-size: 26px;
  line-height: 1.38;
}

.detail-meta {
  margin: 8px 0;
  line-height: 1.6;
}

.detail-body-text {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #e2d3c4;
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.detail-cover-only img[src=""],
.detail-media-box img:not([src]) {
  display: none !important;
}

/* v46: 홈 화면 김광석 육성 오디오 */
.home-voice-section {
  max-width: 1120px;
  margin: 28px auto;
}

.home-voice-card {
  border: 1px solid #dfcdbb;
  border-radius: 24px;
  background: rgba(255, 250, 244, 0.86);
  padding: 28px 34px;
  box-shadow: 0 6px 20px rgba(60, 48, 41, 0.06);
}

.home-voice-kicker {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #efe3d3;
  color: #704c35;
  font-size: 12px;
  font-weight: 800;
}

.home-voice-card h2 {
  margin: 0 0 10px 0;
  font-size: 24px;
  line-height: 1.4;
}

.home-voice-card p {
  margin: 0 0 18px 0;
  line-height: 1.65;
}

.home-voice-card audio {
  width: 360px;
  max-width: 100%;
}

/* v47: 홈 화면 육성 자동재생 */
.home-voice-section {
  max-width: 1120px;
  margin: 0 auto;
}

#homeVoiceAudio {
  display: none !important;
}

.home-voice-notice {
  margin: 18px auto 0;
  width: fit-content;
  max-width: 90%;
  padding: 10px 16px;
  border: 1px solid #dfcdbb;
  border-radius: 999px;
  background: rgba(255, 250, 244, 0.9);
  color: #704c35;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(60, 48, 41, 0.06);
}

/* v50: 홈 큰 사진 hover 시 육성 재생, 화면 요소 제거 */
#homeVoiceAudio,
.home-voice-hidden-audio {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  appearance: none !important;
}

.home-voice-section,
.home-voice-card,
.home-voice-kicker,
.home-voice-notice,
#homeVoiceSection,
#homeVoiceNotice {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

#home .hero {
  cursor: pointer;
}

/* v51: 상세정보 클릭/표시 복구 */
.detail-media-area.hidden {
  display: none !important;
}

.detail-media-area {
  width: 100%;
  margin: 0 0 22px 0;
}

.detail-media-area img {
  display: block;
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: 18px;
  background: #f4eee7;
}

.detail-media-area video,
.detail-media-area iframe {
  width: 100%;
  min-height: 420px;
  border: 0;
  border-radius: 18px;
  background: #111;
}

.detail-audio-box {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 22px 0;
  padding: 18px 20px;
  border: 1px solid #e0cdb9;
  border-radius: 999px;
  background: #f8f4ef;
}

.detail-audio-box audio {
  width: 320px;
  max-width: 100%;
  display: block;
}

.detail-text-area h2 {
  margin-top: 0;
  margin-bottom: 18px;
  font-size: 26px;
  line-height: 1.38;
}

#detailCategory,
#detailMeta {
  margin: 8px 0;
  line-height: 1.6;
}

#detailDescription {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #e2d3c4;
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* v52: 홈 큰 사진 hover 재생/이탈 일시정지 */
#homeVoiceAudio,
.home-voice-hidden-audio {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  appearance: none !important;
}

.home-voice-section,
.home-voice-card,
.home-voice-kicker,
.home-voice-notice,
#homeVoiceSection,
#homeVoiceNotice {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

#home .hero {
  cursor: pointer;
}

/* v53: 자료 목록 6개 단위 페이지네이션 / 정렬 / 등록일 표시 */
.page-sort-select {
  min-width: 130px;
  padding: 11px 12px;
  border: 1px solid #d8c2ad;
  border-radius: 10px;
  background: #fffaf4;
  font-weight: 700;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 28px 0 8px;
  flex-wrap: wrap;
}

.pagination button {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #d8c2ad;
  border-radius: 10px;
  background: #fffaf4;
  color: #5a3826;
  font-weight: 800;
  cursor: pointer;
}

.pagination button:hover,
.pagination button.active {
  background: #8a5235;
  color: #fff;
  border-color: #8a5235;
}

.created-date {
  margin-top: 6px !important;
  font-size: 13px !important;
  opacity: 0.88;
}

/* v54: 업로드 날짜+시간 표시 */
.created-date {
  letter-spacing: -0.01em;
}

/* v55: Stories 목록 본문 미리보기 */
.text-preview {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.story-preview-card .text-preview {
  -webkit-line-clamp: 4;
  max-height: 6.6em;
}

.read-more-hint {
  margin-top: 8px !important;
  font-size: 13px !important;
  font-weight: 800;
  color: #8a5235;
}

/* v56: 상세보기 업로드 날짜/시간 */
#detailMeta,
.detail-meta {
  line-height: 1.75;
}

#detailMeta strong,
.detail-meta strong {
  font-weight: 800;
}

/* v57: About Seok 소개글 전용 페이지 */
.about-article {
  max-width: 1120px;
  margin: 24px auto 0;
  border: 1px solid #dfcdbb;
  border-radius: 24px;
  background: rgba(255, 250, 244, 0.9);
  padding: 34px 40px;
  line-height: 1.8;
}

.about-article h2 {
  margin: 0 0 14px 0;
  font-size: 30px;
  line-height: 1.35;
}

.about-article-meta {
  margin: 0 0 22px 0;
  font-size: 14px;
  color: #7a5a43;
}

.about-article-body {
  font-size: 16px;
  line-height: 1.9;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.about-article-image {
  display: block;
  max-width: 100%;
  max-height: 460px;
  object-fit: contain;
  border-radius: 18px;
  margin-bottom: 24px;
  background: #f4eee7;
}

#about .toolbar,
#aboutSearchInput,
#aboutSortSelect,
#aboutCategoryFilter,
#aboutPagination,
#aboutList {
  display: none !important;
}

/* v58: 사진 상세보기 확대/축소 툴 */
.photo-zoom-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px 0;
  flex-wrap: wrap;
}

.photo-zoom-toolbar button {
  border: 1px solid #d8c2ad;
  border-radius: 10px;
  background: #fffaf4;
  color: #5a3826;
  padding: 8px 12px;
  font-weight: 800;
  cursor: pointer;
}

.photo-zoom-toolbar button:hover {
  background: #8a5235;
  color: #fff;
}

#detailZoomPercent {
  font-size: 13px;
  font-weight: 800;
  color: #6b4a36;
}

.photo-zoom-viewer {
  width: 100%;
  max-height: 520px;
  overflow: hidden;
  border-radius: 18px;
  background: #f4eee7;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
}

.photo-zoom-viewer img {
  max-width: 100%;
  max-height: 520px;
  object-fit: contain;
  transition: transform 0.12s ease;
  transform-origin: center center;
  user-select: none;
}

.photo-zoom-viewer img.dragging {
  cursor: grabbing;
  transition: none;
}

/* v58: 캡처/인쇄/화면이탈 억제 보조 */
.screen-protect-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(36, 28, 22, 0.92);
  color: #fffaf4;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.screen-protect-overlay.hidden {
  display: none !important;
}

body.screen-protect-blur main,
body.screen-protect-blur header,
body.screen-protect-blur footer {
  filter: blur(18px);
}

@media print {
  body * {
    visibility: hidden !important;
  }

  #screenProtectOverlay,
  #screenProtectOverlay * {
    visibility: visible !important;
  }
}

/* v59: About Seok 라우팅 복구 */
#about .toolbar,
#aboutSearchInput,
#aboutSortSelect,
#aboutCategoryFilter,
#aboutPagination,
#aboutList {
  display: none !important;
}

.about-article {
  max-width: 1120px;
  margin: 24px auto 0;
  border: 1px solid #dfcdbb;
  border-radius: 24px;
  background: rgba(255, 250, 244, 0.9);
  padding: 34px 40px;
  line-height: 1.8;
}

.about-article h2 {
  margin: 0 0 14px 0;
  font-size: 30px;
  line-height: 1.35;
}

.about-article-body {
  font-size: 16px;
  line-height: 1.9;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* v60: 전역 오늘의 추천곡 미니 플레이어 */
.daily-player {
  position: fixed;
  left: 24px;
  top: 180px;
  z-index: 9990;
  width: 190px;
  pointer-events: none;
}

.daily-player.hidden {
  display: none !important;
}

.daily-player-card {
  pointer-events: auto;
  width: 100%;
  border-radius: 22px;
  padding: 18px 16px;
  background: linear-gradient(145deg, #6d315f, #a4496f 52%, #e87535);
  color: #fff;
  box-shadow: 0 18px 42px rgba(42, 29, 23, 0.22);
  user-select: none;
}

.daily-player-label {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.daily-player-title {
  font-size: 17px;
  font-weight: 900;
  line-height: 1.3;
  min-height: 44px;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.daily-player-sub {
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.35;
  opacity: 0.82;
}

.daily-player-controls {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 18px;
}

.daily-play-btn {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #8a3e62;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

.daily-player-time {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex: 1;
  font-size: 10px;
  opacity: 0.9;
}

.daily-player-progress {
  width: 100%;
  margin-top: 12px;
  accent-color: #fff;
  cursor: pointer;
}

#dailyPlayerAudio {
  display: none !important;
}

@media (max-width: 1380px) {
  .daily-player {
    left: 12px;
    width: 160px;
  }

  .daily-player-card {
    padding: 15px 13px;
  }

  .daily-player-title {
    font-size: 15px;
  }
}

@media (max-width: 1120px) {
  .daily-player {
    position: static;
    width: min(420px, calc(100% - 32px));
    margin: 18px auto 0;
  }
}

/* v61: About Seok 문서형/연보형 페이지 */
#about .toolbar,
#aboutSearchInput,
#aboutSortSelect,
#aboutCategoryFilter,
#aboutPagination,
#aboutList,
#aboutArticle {
  display: none !important;
}

.about-document {
  max-width: 1120px;
  margin: 24px auto 0;
  border: 1px solid #dfcdbb;
  border-radius: 24px;
  background: rgba(255, 250, 244, 0.92);
  padding: 36px 44px;
  line-height: 1.85;
}

.about-document-entry {
  padding: 26px 0 30px;
  border-bottom: 1px solid #dcc9b6;
}

.about-document-entry:first-child {
  padding-top: 0;
}

.about-document-entry:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.about-document-entry h2 {
  margin: 0 0 14px 0;
  font-size: 25px;
  line-height: 1.38;
  letter-spacing: -0.03em;
}

.about-document-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 18px;
  font-size: 14px;
  color: #7a5a43;
}

.about-document-body {
  font-size: 16px;
  line-height: 1.95;
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;
}

.about-document-image {
  display: block;
  max-width: 100%;
  max-height: 460px;
  object-fit: contain;
  border-radius: 18px;
  margin-bottom: 22px;
  background: #f4eee7;
}

/* v62: 추천곡 없을 때도 플레이어 유지 */
.daily-play-btn.disabled,
.daily-play-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.daily-player-progress:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.daily-player-title {
  word-break: keep-all;
}

/* v63: 오른쪽 고정형 오늘의 추천곡 플레이어 */
#dailyRecommendPlayer.daily-player {
  position: fixed !important;
  top: 155px !important;
  right: 34px !important;
  left: auto !important;
  width: 210px !important;
  max-width: 210px !important;
  z-index: 9000 !important;
  pointer-events: none !important;
  margin: 0 !important;
  display: block !important;
}

#dailyRecommendPlayer.daily-player.hidden {
  display: block !important;
}

#dailyRecommendPlayer .daily-player-card {
  pointer-events: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 22px !important;
  padding: 18px 16px !important;
  background: linear-gradient(145deg, #6b315f, #bd3f77 55%, #ee7a2f) !important;
  color: #fff !important;
  box-shadow: 0 18px 42px rgba(42, 29, 23, 0.24) !important;
  user-select: none !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}

#dailyRecommendPlayer .daily-player-label {
  display: inline-block !important;
  margin-bottom: 12px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.17) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: #fff !important;
}

#dailyRecommendPlayer .daily-player-title {
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  min-height: 46px !important;
  color: #fff !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}

#dailyRecommendPlayer .daily-player-sub {
  margin-top: 6px !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
  opacity: 0.86 !important;
  color: rgba(255,255,255,0.88) !important;
}

#dailyRecommendPlayer .daily-player-controls {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  margin-top: 18px !important;
}

#dailyRecommendPlayer .daily-play-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #9b3f68 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18) !important;
}

#dailyRecommendPlayer .daily-play-btn.disabled,
#dailyRecommendPlayer .daily-play-btn:disabled {
  opacity: 0.48 !important;
  cursor: not-allowed !important;
}

#dailyRecommendPlayer .daily-player-time {
  display: flex !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex: 1 !important;
  font-size: 10px !important;
  opacity: 0.9 !important;
  color: rgba(255,255,255,0.9) !important;
}

#dailyRecommendPlayer .daily-player-progress {
  width: 100% !important;
  height: 4px !important;
  margin-top: 13px !important;
  accent-color: #fff !important;
  cursor: pointer !important;
}

#dailyRecommendPlayer .daily-player-progress:disabled {
  opacity: 0.48 !important;
  cursor: not-allowed !important;
}

#dailyRecommendPlayer #dailyPlayerAudio {
  display: none !important;
}

@media (max-width: 1500px) {
  #dailyRecommendPlayer.daily-player {
    right: 16px !important;
    width: 184px !important;
    max-width: 184px !important;
  }

  #dailyRecommendPlayer .daily-player-title {
    font-size: 15px !important;
  }
}

@media (max-width: 1180px) {
  #dailyRecommendPlayer.daily-player {
    position: fixed !important;
    right: 12px !important;
    top: 130px !important;
    width: 168px !important;
    max-width: 168px !important;
  }
}

@media (max-width: 760px) {
  #dailyRecommendPlayer.daily-player {
    right: 10px !important;
    bottom: 14px !important;
    top: auto !important;
    width: 158px !important;
    max-width: 158px !important;
  }
}

/* v64: 오늘의 추천곡 볼륨/음소거 */
#dailyRecommendPlayer .daily-volume-row {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin-top: 10px !important;
}

#dailyRecommendPlayer .daily-mute-btn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.9) !important;
  color: #8a3e62 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#dailyRecommendPlayer .daily-volume-slider {
  width: 100% !important;
  height: 4px !important;
  accent-color: #fff !important;
  cursor: pointer !important;
}

/* v65: 볼륨 조절 UI 소형화 */
#dailyRecommendPlayer .daily-volume-row,
#dailyRecommendPlayer .compact-volume-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  margin-top: 8px !important;
  width: 96px !important;
  max-width: 96px !important;
  height: 20px !important;
}

#dailyRecommendPlayer .daily-mute-btn {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#dailyRecommendPlayer .daily-volume-slider {
  width: 68px !important;
  max-width: 68px !important;
  min-width: 68px !important;
  height: 3px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  accent-color: #ffffff !important;
  cursor: pointer !important;
}

/* Chrome / Edge */
#dailyRecommendPlayer .daily-volume-slider::-webkit-slider-runnable-track {
  height: 3px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.38) !important;
}

#dailyRecommendPlayer .daily-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  margin-top: -4px !important;
  border: 0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25) !important;
}

/* Firefox */
#dailyRecommendPlayer .daily-volume-slider::-moz-range-track {
  height: 3px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.38) !important;
}

#dailyRecommendPlayer .daily-volume-slider::-moz-range-thumb {
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25) !important;
}

#dailyRecommendPlayer .daily-volume-slider:disabled {
  opacity: 0.42 !important;
  cursor: not-allowed !important;
}

/* v66: 볼륨 UI 강제 소형화 - id 기준 최종 override */
#dailyRecommendPlayer #dailyPlayerMuteBtn {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.22) !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

#dailyRecommendPlayer #dailyPlayerVolume {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 54px !important;
  max-width: 54px !important;
  min-width: 54px !important;
  height: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  accent-color: #ffffff !important;
  display: inline-block !important;
  flex: 0 0 54px !important;
}

#dailyRecommendPlayer .daily-volume-row,
#dailyRecommendPlayer .compact-volume-row {
  width: 78px !important;
  max-width: 78px !important;
  min-width: 78px !important;
  height: 18px !important;
  max-height: 18px !important;
  margin-top: 6px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  overflow: visible !important;
}

/* Chrome / Edge / Safari */
#dailyRecommendPlayer #dailyPlayerVolume::-webkit-slider-runnable-track {
  -webkit-appearance: none !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.36) !important;
  border: 0 !important;
}

#dailyRecommendPlayer #dailyPlayerVolume::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 0 !important;
  margin-top: -3px !important;
  box-shadow: none !important;
}

/* Firefox */
#dailyRecommendPlayer #dailyPlayerVolume::-moz-range-track {
  height: 2px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.36) !important;
  border: 0 !important;
}

#dailyRecommendPlayer #dailyPlayerVolume::-moz-range-thumb {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
}

#dailyRecommendPlayer #dailyPlayerVolume::-ms-track {
  width: 54px !important;
  height: 2px !important;
  background: transparent !important;
  border-color: transparent !important;
  color: transparent !important;
}

#dailyRecommendPlayer #dailyPlayerVolume::-ms-thumb {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 0 !important;
}


/* v67: 라디오 전용 흑백 커스텀 플레이어 */
.radio-mono-player {
  width: 290px;
  max-width: 100%;
  margin: 14px 0 12px;
}

.radio-mono-player audio {
  display: none !important;
}

.radio-mono-controls {
  display: grid;
  grid-template-columns: 34px auto 1fr 26px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 999px;
  background: #efefef;
  border: 1px solid #e0e0e0;
}

.radio-mono-play,
.radio-mono-mute {
  appearance: none;
  border: 0;
  background: transparent;
  color: #111;
  cursor: pointer;
  padding: 0;
  margin: 0;
  font-size: 18px;
  line-height: 1;
}

.radio-mono-play {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #d4d4d4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.radio-mono-play:hover,
.radio-mono-mute:hover {
  opacity: 0.8;
}

.radio-mono-time {
  min-width: 66px;
  font-size: 13px;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
}

.radio-mono-divider {
  opacity: 0.5;
}

.radio-mono-progress,
.radio-mono-volume {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.radio-mono-progress::-webkit-slider-runnable-track,
.radio-mono-volume::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: #bdbdbd;
}

.radio-mono-progress::-webkit-slider-thumb,
.radio-mono-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #111;
  margin-top: -4px;
  border: 0;
}

.radio-mono-progress::-moz-range-track,
.radio-mono-volume::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: #bdbdbd;
}

.radio-mono-progress::-moz-range-thumb,
.radio-mono-volume::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #111;
  border: 0;
}

.radio-mono-volume-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding-left: 10px;
}

.radio-mono-volume-label {
  min-width: 28px;
  font-size: 11px;
  font-weight: 700;
  color: #666;
  letter-spacing: 0.04em;
}

.radio-mono-volume {
  width: 86px;
  max-width: 86px;
}

#radioList .list-item .radio-mono-player {
  margin-top: 14px;
}

#radioList .list-item .radio-mono-controls {
  width: 290px;
  max-width: 100%;
}

.detail-radio-audio-box {
  width: 100%;
  max-width: 320px;
  padding: 0;
  margin: 0 0 24px 0;
  border: 0;
  background: transparent;
}

.detail-radio-audio-box .radio-mono-player {
  width: 320px;
  max-width: 100%;
  margin: 0;
}

.detail-radio-audio-box .radio-mono-controls {
  grid-template-columns: 38px auto 1fr 28px;
  gap: 14px;
  padding: 13px 16px;
  background: #f0f0f0;
  border: 1px solid #dddddd;
}

.detail-radio-audio-box .radio-mono-play {
  width: 38px;
  height: 38px;
}

.detail-radio-audio-box .radio-mono-time {
  font-size: 14px;
}

.detail-radio-audio-box .radio-mono-volume-row {
  margin-top: 10px;
  padding-left: 12px;
}

/* v71: 오늘의 추천곡 닫기 버튼 */
#dailyRecommendPlayer.closed {
  display: none !important;
}

#dailyRecommendPlayer .daily-player-card {
  position: relative !important;
}

#dailyRecommendPlayer .daily-player-close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 22px !important;
  height: 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: none !important;
}

#dailyRecommendPlayer .daily-player-close:hover {
  background: rgba(255, 255, 255, 0.32) !important;
}

/* v75: 링크 입력 방식 안내 */
.link-only-notice {
  margin: 16px 0 20px;
  padding: 14px 16px;
  border: 1px solid #d8c2ad;
  border-radius: 14px;
  background: #fff7ed;
  color: #5a3826;
  line-height: 1.6;
  font-size: 14px;
}

.link-only-notice strong {
  font-weight: 900;
}

/* v76: 구글드라이브 링크 안내 */
.drive-link-notice {
  margin: 12px 0 16px;
  padding: 13px 15px;
  border: 1px solid #cfcfcf;
  border-radius: 14px;
  background: #f6f6f6;
  color: #333;
  line-height: 1.65;
  font-size: 14px;
}

.drive-link-notice strong {
  font-weight: 900;
}

.drive-link-notice code {
  font-size: 12px;
  background: #e9e9e9;
  padding: 2px 5px;
  border-radius: 5px;
}

/* v77: URL 입력칸 인식 보강 안내 */
.url-read-fix-notice {
  margin: 12px 0 16px;
  padding: 13px 15px;
  border: 1px solid #bbb;
  border-radius: 14px;
  background: #f3f3f3;
  color: #222;
  line-height: 1.65;
  font-size: 14px;
}

.url-read-fix-notice strong {
  font-weight: 900;
}

.url-read-fix-notice code {
  font-size: 12px;
  background: #e5e5e5;
  padding: 2px 5px;
  border-radius: 5px;
}

/* v78: Songs도 Radios와 같은 흑백 플레이어 UI 적용 */
#songList .list-item .radio-mono-player,
#radioList .list-item .radio-mono-player {
  width: 290px;
  max-width: 100%;
  margin-top: 14px;
}

#songList .list-item .radio-mono-controls,
#radioList .list-item .radio-mono-controls {
  width: 290px;
  max-width: 100%;
}

#songList .list-item audio:not(.native-audio),
#radioList .list-item audio:not(.native-audio) {
  display: none !important;
}

#songList .list-item .radio-mono-player audio,
#radioList .list-item .radio-mono-player audio {
  display: none !important;
}

#songList .radio-mono-controls,
#radioList .radio-mono-controls {
  background: #efefef;
  color: #111;
}

#songList .radio-mono-play,
#songList .radio-mono-mute,
#radioList .radio-mono-play,
#radioList .radio-mono-mute {
  color: #111;
}

/* v79: Songs/Radios album jackets should not be cropped */
#songList img,
#radioList img {
  height: 220px !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #f4eee7 !important;
}

@media (max-width: 760px) {
  #songList img,
  #radioList img {
    height: 190px !important;
  }
}


/* v82: Songs / Radios archive layout refresh */
#songList.list-box,
#radioList.list-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  align-items: stretch;
}

#songList .list-item.audio-archive-card,
#radioList .list-item.audio-archive-card {
  padding: 24px;
  border-radius: 28px;
  background: #fcfaf7;
  border: 1px solid #d9c7b8;
  box-shadow: 0 10px 28px rgba(76, 52, 35, 0.08);
}

#songList .list-item.audio-archive-card > img,
#radioList .list-item.audio-archive-card > img {
  display: none !important;
}

.audio-archive-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 100%;
}

.audio-archive-top {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.audio-archive-cover {
  width: 132px;
  height: 132px;
  border-radius: 18px;
  overflow: hidden;
  background: #f2ebe2;
  border: 1px solid #d7c4b3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.audio-archive-cover img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: contain !important;
  object-position: center center !important;
  background: #f2ebe2 !important;
}

.audio-archive-cover-placeholder span {
  color: #8a6b57;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  letter-spacing: 0.05em;
}

.audio-archive-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: stretch;
}

#songList .audio-archive-meta h3,
#radioList .audio-archive-meta h3 {
  margin: 0;
  font-size: 28px;
  line-height: 1.26;
  color: #241711;
  word-break: keep-all;
}

#songList .audio-archive-meta .category-badge,
#radioList .audio-archive-meta .category-badge {
  align-self: flex-start;
  margin: 0;
}

.audio-archive-summary {
  margin: 0;
  color: #5a473a;
  font-size: 14px;
  line-height: 1.68;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.audio-archive-summary.empty {
  color: #857162;
}

.audio-archive-player-row {
  margin-top: 2px;
}

#songList .audio-archive-player-row .radio-mono-player,
#radioList .audio-archive-player-row .radio-mono-player {
  width: 100%;
  max-width: none;
  margin-top: 0;
}

#songList .audio-archive-player-row .radio-mono-controls,
#radioList .audio-archive-player-row .radio-mono-controls {
  width: 100%;
  max-width: none;
  min-height: 62px;
  border-radius: 18px;
  padding: 0 16px;
  background: #ece8e3;
}

#songList .audio-archive-player-row .radio-mono-play,
#radioList .audio-archive-player-row .radio-mono-play {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #6f442c;
  color: #fff;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#songList .audio-archive-player-row .radio-mono-mute,
#radioList .audio-archive-player-row .radio-mono-mute {
  font-size: 19px;
}

#songList .audio-archive-player-row .radio-mono-progress,
#radioList .audio-archive-player-row .radio-mono-progress {
  flex: 1;
}

#songList .audio-archive-player-row .radio-mono-time,
#radioList .audio-archive-player-row .radio-mono-time {
  min-width: 84px;
}

.audio-archive-info-row {
  border-top: 1px solid #e6dbd1;
  padding-top: 14px;
  display: grid;
  gap: 8px;
}

#songList .audio-archive-info-row p,
#radioList .audio-archive-info-row p {
  margin: 0;
  font-size: 14px;
  color: #4f3d32;
}

#songList .audio-archive-info-row .created-date,
#radioList .audio-archive-info-row .created-date {
  color: #6b584d;
}

@media (max-width: 760px) {
  #songList.list-box,
  #radioList.list-box {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  #songList .list-item.audio-archive-card,
  #radioList .list-item.audio-archive-card {
    padding: 18px;
    border-radius: 22px;
  }

  .audio-archive-top {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
  }

  .audio-archive-cover {
    width: 96px;
    height: 96px;
    border-radius: 14px;
  }

  #songList .audio-archive-meta h3,
  #radioList .audio-archive-meta h3 {
    font-size: 22px;
  }

  #songList .audio-archive-player-row .radio-mono-controls,
  #radioList .audio-archive-player-row .radio-mono-controls {
    padding: 0 12px;
    gap: 10px;
  }
}


/* v82 override tuning */
#songList.list-box,
#radioList.list-box {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  justify-content: stretch !important;
  padding: 36px !important;
  min-height: auto !important;
}

#songList .list-item.audio-archive-card,
#radioList .list-item.audio-archive-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

#songList .list-item.audio-archive-card::after,
#radioList .list-item.audio-archive-card::after {
  content: none !important;
  display: none !important;
}

#songList .audio-archive-meta h3,
#radioList .audio-archive-meta h3 {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

#songList .audio-archive-summary,
#radioList .audio-archive-summary,
#songList .audio-archive-info-row p,
#radioList .audio-archive-info-row p {
  margin: 0 !important;
}

#songList .audio-archive-cover img,
#radioList .audio-archive-cover img {
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}


/* v83: center Songs/Radios cards evenly inside the frame */
#songList.list-box,
#radioList.list-box {
  grid-template-columns: repeat(auto-fit, minmax(420px, 420px)) !important;
  justify-content: center !important;
  justify-items: center !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#songList .list-item,
#radioList .list-item,
#songList .content-card,
#radioList .content-card {
  margin-left: auto !important;
  margin-right: auto !important;
}

#songList .list-item.audio-archive-card,
#radioList .list-item.audio-archive-card {
  width: 420px !important;
  max-width: 420px !important;
}

@media (max-width: 760px) {
  #songList.list-box,
  #radioList.list-box {
    grid-template-columns: 1fr !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
  }

  #songList .list-item.audio-archive-card,
  #radioList .list-item.audio-archive-card,
  #songList .list-item,
  #radioList .list-item {
    width: 100% !important;
    max-width: none !important;
  }
}


/* v84: radio cards without cover, songs detail with cover */
.audio-archive-top.no-cover {
  display: block;
}

.audio-archive-shell.no-cover .audio-archive-meta {
  gap: 12px;
}

#songList .audio-archive-shell.no-cover,
#radioList .audio-archive-shell.no-cover {
  gap: 16px;
}

.detail-song-audio-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.detail-song-cover-box {
  width: 260px;
  height: 260px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #d8c6b7;
  background: #f5efe7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-song-cover-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: #f5efe7;
}

.detail-song-player-box {
  margin: 0;
}

.detail-song-player-box .radio-mono-player {
  width: 100%;
  max-width: none;
}

.detail-song-player-box .radio-mono-controls {
  width: 100%;
  max-width: none;
}

@media (max-width: 760px) {
  .detail-song-audio-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .detail-song-cover-box {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}


/* v88: 오늘의 추천곡에 곡 앨범/분류 표시 */
#dailyRecommendPlayer .daily-hide-options {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  margin-top: 10px !important;
}

#dailyRecommendPlayer .daily-hide-option-btn {
  border: 0 !important;
  border-radius: 999px !important;
  padding: 6px 7px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

#dailyRecommendPlayer .daily-hide-option-btn:hover {
  background: rgba(255, 255, 255, 0.32) !important;
}

.detail-song-cover-zoom-trigger,
.detail-cover-zoom-trigger {
  border: 1px solid #d8c6b7;
  padding: 0;
  cursor: zoom-in;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
}

.detail-song-cover-zoom-trigger:hover,
.detail-cover-zoom-trigger:hover {
  box-shadow: 0 10px 28px rgba(58, 43, 32, 0.18);
  transform: translateY(-1px);
}

.cover-zoom-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(14, 10, 8, 0.82);
}

.cover-zoom-modal.hidden {
  display: none !important;
}

.cover-zoom-inner {
  position: relative;
  width: min(92vw, 920px);
  max-height: 92vh;
  border-radius: 24px;
  padding: 48px 22px 22px;
  background: #17110e;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.45);
  text-align: center;
}

.cover-zoom-close {
  position: absolute;
  top: 14px;
  right: 14px;
  border: 0;
  border-radius: 999px;
  padding: 8px 13px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.cover-zoom-close:hover {
  background: rgba(255, 255, 255, 0.24);
}

#coverZoomImage {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(92vh - 120px);
  margin: 0 auto;
  object-fit: contain;
  border-radius: 16px;
  background: #f5efe7;
}

.cover-zoom-caption {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 1.5;
  word-break: keep-all;
}

@media (max-width: 760px) {
  #dailyRecommendPlayer .daily-hide-options {
    grid-template-columns: 1fr !important;
  }

  .cover-zoom-modal {
    padding: 14px;
  }

  .cover-zoom-inner {
    width: 96vw;
    padding: 46px 12px 16px;
  }
}


/* v88: 오늘의 추천곡 앨범/분류 정보 가독성 */
#dailyRecommendPlayer .daily-player-sub {
  line-height: 1.35 !important;
  word-break: keep-all !important;
}

/* v89: 업로드 영상 비율 고정 - 카드/상세/전체화면에서 원본 종횡비 유지 */
.card video,
.detail-media-box video,
.detail-media-area video {
  object-fit: contain !important;
  object-position: center center !important;
  background: #000 !important;
}

/* 카드에서는 고정 높이 안에서 자르지 않고 검은 여백으로 원본 비율 유지 */
.card video {
  height: 190px !important;
}

.content-page.template-gallery .card video {
  height: 260px !important;
}

/* 상세보기에서는 강제 min-height/aspect-ratio 때문에 영상이 늘어나는 것을 차단 */
.detail-media-box video,
.detail-media-area video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(92vh - 180px) !important;
  aspect-ratio: auto !important;
  border-radius: 18px;
}

/* 브라우저 전체화면에서도 화면에 맞추되 영상 자체는 늘리지 않음 */
video:fullscreen,
video:-webkit-full-screen,
video:-moz-full-screen,
video:-ms-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #000 !important;
}


/* v90: 사이트 안내 페이지 */
.site-info-page .page-title {
  margin-bottom: 24px;
}

.site-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 1120px;
  margin: 0 auto 32px;
}

.site-guide-card {
  background: rgba(255, 250, 244, 0.94);
  border: 1px solid #dfcdbb;
  border-radius: 22px;
  padding: 26px 28px;
  box-shadow: 0 8px 20px rgba(60, 48, 41, 0.06);
  line-height: 1.78;
}

.site-guide-card-wide {
  grid-column: 1 / -1;
}

.site-guide-card h2 {
  margin: 0 0 14px;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.03em;
}

.site-guide-card p {
  margin: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.site-guide-card ul {
  margin: 0;
  padding-left: 20px;
}

.site-guide-card li {
  margin: 6px 0;
}

.notice-card {
  background: rgba(255, 246, 236, 0.98);
}

@media (max-width: 760px) {
  .site-guide-grid {
    grid-template-columns: 1fr;
  }

  .site-guide-card {
    padding: 22px 20px;
  }
}


/* v92: Oneum 김광석 답글 동시 등록/표시 */
.checkbox-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: #3a261d;
}

.checkbox-line input[type="checkbox"] {
  width: auto;
  max-width: none;
}

.oneum-reply-fields {
  border: 1px solid #e2d3c4;
  border-radius: 16px;
  padding: 18px;
  background: #fffaf5;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.oneum-reply-fields h3 {
  margin: 0;
  font-size: 18px;
}

.oneum-kks-reply-box {
  margin-top: 26px;
  padding: 20px;
  border: 1px solid #d8b896;
  border-radius: 18px;
  background: #fff8ee;
}

.oneum-kks-reply-label {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #8b5436;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.oneum-kks-reply-box h3 {
  margin: 0 0 12px;
  font-size: 20px;
}

.oneum-kks-reply-body {
  margin: 14px 0;
  line-height: 1.8;
  white-space: pre-wrap;
}

.oneum-reply-badge {
  background: #f1d5bd;
  color: #6f3f28;
}

/* v95: Oneum uploader nickname + real name fields */
.form-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}
.form-two-col input {
  width: 100%;
}
@media (max-width: 720px) {
  .form-two-col {
    grid-template-columns: 1fr;
  }
}

/* v97: Stories/Oneum을 Photos와 같은 카드형 UI로 정리 */
#storyList.text-archive-grid,
#oneumList.text-archive-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

#storyList .text-archive-card,
#oneumList .text-archive-card {
  padding: 0;
  border-bottom: 0;
  background: var(--card-bg) !important;
  border: 1px solid #e2d0bc;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(60,48,41,.08);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

#storyList .text-archive-card:hover,
#oneumList .text-archive-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(60,48,41,.16);
}

#storyList .text-archive-card img,
#oneumList .text-archive-card img,
#storyList .text-card-placeholder,
#oneumList .text-card-placeholder {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: linear-gradient(135deg, #ead8c2, #f7eadb);
  color: #7a4a2c;
  font-weight: 900;
  letter-spacing: -0.02em;
}

#storyList .text-archive-card-body,
#oneumList .text-archive-card-body {
  padding: 16px;
}

#storyList .text-archive-card-body h3,
#oneumList .text-archive-card-body h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--text-color) !important;
}

#storyList .text-archive-card-body p,
#oneumList .text-archive-card-body p {
  margin: 5px 0;
  font-size: 14px;
}

#storyList .text-preview,
#oneumList .text-preview {
  -webkit-line-clamp: 3;
  min-height: 4.9em;
}

#oneumList .oneum-meta p,
#oneumList .oneum-meta {
  font-size: 14px;
}

@media (max-width: 1100px) {
  #storyList.text-archive-grid,
  #oneumList.text-archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #storyList.text-archive-grid,
  #oneumList.text-archive-grid {
    grid-template-columns: 1fr;
  }
}

/* v98: PC/모바일 자동 전환 반응형 레이아웃 */
.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

body.is-mobile-site {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.is-mobile-site img,
body.is-mobile-site video,
body.is-mobile-site iframe {
  max-width: 100%;
}

@media (max-width: 820px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    font-size: 15px !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .site-header {
    min-height: auto;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 12px;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .logo {
    min-width: 0;
    font-size: 20px;
    line-height: 1.2;
  }

  .logo small {
    font-size: 11px;
    margin-top: 2px;
  }

  .mobile-menu-toggle {
    display: inline-flex;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 999px;
    font-size: 14px;
  }

  .site-header nav,
  .site-header .auth-area {
    grid-column: 1 / -1;
  }

  .site-header nav {
    display: none;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 0 4px;
    border-top: 1px solid rgba(255,255,255,.14);
  }

  body.mobile-nav-open .site-header nav {
    display: grid;
  }

  .site-header nav button {
    width: 100%;
    min-height: 42px;
    padding: 10px 8px;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.1);
    font-size: 13px;
  }

  .site-header .auth-area {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: stretch;
    font-size: 13px;
  }

  .site-header .auth-area #userStatus {
    grid-column: 1 / -1;
    opacity: .9;
    line-height: 1.4;
  }

  .site-header .auth-area button {
    width: 100%;
    min-height: 40px;
    padding: 9px 8px;
    font-size: 13px;
  }

  main {
    width: 100%;
    max-width: 100%;
    padding: 18px 12px 28px;
    min-height: 0;
  }

  .hero {
    min-height: 260px;
    border-radius: 20px;
    padding: 44px 24px;
    margin-bottom: 22px;
  }

  .hero h1 {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.18;
  }

  .hero p {
    font-size: clamp(15px, 4.5vw, 19px) !important;
    line-height: 1.55;
  }

  .hero div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .hero button,
  button {
    min-height: 42px;
  }

  .content-section,
  .page-title,
  .auth-page,
  .admin-form,
  .list-box,
  .about-document,
  .site-guide-card {
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 18px;
  }

  .page-title h1 {
    font-size: 27px;
    line-height: 1.22;
  }

  .toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-bottom: 16px;
  }

  .toolbar input,
  .toolbar select,
  input,
  textarea,
  select {
    min-height: 44px;
    font-size: 16px;
  }

  .card-grid,
  .latest-category-grid,
  .site-guide-grid,
  .text-archive-grid,
  .content-page.template-gallery .card-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .card,
  .text-archive-card,
  .latest-category-card {
    border-radius: 16px;
  }

  .card img,
  .card iframe,
  .card video,
  .content-page.template-gallery .card img,
  .content-page.template-gallery .card iframe,
  .content-page.template-gallery .card video,
  .text-archive-cover,
  .text-archive-cover img {
    height: auto !important;
    min-height: 0 !important;
    max-height: 62vh;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  #videoList .card video,
  .detail-media-area video,
  .detail-media-area iframe {
    aspect-ratio: 16 / 9;
    object-fit: contain !important;
    background: #111;
  }

  .list-item,
  .list-item.with-image,
  .content-page.template-list .card,
  #radioList .content-card,
  #songList .content-card,
  #radioList .list-item,
  #songList .list-item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: block !important;
    padding: 16px !important;
  }

  .list-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin-bottom: 12px;
  }

  #radioList audio,
  #songList audio,
  .daily-player audio,
  audio {
    width: 100% !important;
    max-width: 100% !important;
  }

  .detail-modal {
    padding: 8px;
    align-items: stretch;
  }

  .detail-modal-inner {
    width: 100%;
    max-height: calc(100vh - 16px);
    border-radius: 18px;
    padding: 16px;
  }

  .detail-close-btn {
    width: 100%;
    float: none;
    margin: 0 0 12px;
  }

  .detail-media-area iframe,
  .detail-media-area video {
    width: 100%;
    min-height: 0 !important;
  }

  .detail-media-area img {
    max-height: 72vh;
  }

  .cover-zoom-modal {
    padding: 10px;
  }

  .cover-zoom-inner {
    width: 100%;
    max-width: 100%;
    padding: 12px;
    border-radius: 18px;
  }

  .cover-zoom-inner img {
    max-height: 72vh;
    object-fit: contain;
  }

  .daily-player {
    left: 10px;
    right: 10px;
    bottom: 10px;
    top: auto;
    width: auto;
    max-width: none;
    transform: none;
    z-index: 999;
  }

  .daily-player-card {
    width: 100%;
    max-width: 100%;
    border-radius: 18px;
    padding: 13px 14px;
  }

  .daily-player-title {
    font-size: 15px;
  }

  .daily-hide-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .daily-hide-option-btn {
    width: 100%;
    min-height: 32px;
    font-size: 12px;
  }

  .form-two-col,
  .design-grid,
  .inline-field,
  .admin-row {
    grid-template-columns: 1fr !important;
  }

  .admin-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .admin-tabs button,
  .admin-row-actions button {
    width: 100%;
  }

  .admin-row-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  footer {
    padding: 28px 16px 118px;
    font-size: 13px;
  }
}

@media (min-width: 821px) {
  body.mobile-nav-open .site-header nav {
    display: flex;
  }
}

/* v99: 모바일에서 PC 고정폭(min-width) 강제 해제 */
@media (max-width: 820px) {
  html,
  body {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .site-header {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    flex-direction: initial !important;
  }

  main,
  .hero,
  .content-section,
  .page-title,
  .auth-page,
  .admin-form,
  .list-box,
  .toolbar,
  .admin-tabs,
  .card-grid,
  .content-page.template-gallery .card-grid,
  .content-page.template-list .card-grid,
  #radioList,
  #songList,
  #photoList,
  #videoList,
  #storyList,
  #oneumList {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .content-page.template-list .card,
  #radioList .list-item,
  #songList .list-item,
  #radioList .content-card,
  #songList .content-card {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    box-sizing: border-box !important;
  }

  .detail-modal-inner,
  .cover-zoom-inner {
    min-width: 0 !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box !important;
  }
}

/* v100: Z Flip 등 좁은 모바일 화면 전용 사용성 보정 */
@media (max-width: 820px) {
  :root {
    --base-font-size: 14px;
  }

  body {
    background: #f7f1e8 !important;
  }

  .site-header {
    padding: 10px 12px !important;
    grid-template-columns: 1fr auto !important;
    box-shadow: 0 2px 12px rgba(30, 22, 17, .16);
  }

  .logo {
    font-size: 16px !important;
  }

  .logo small {
    font-size: 10px !important;
  }

  .mobile-menu-toggle {
    min-height: 34px !important;
    padding: 7px 10px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
  }

  /* 모바일에서는 로그인/내정보/로그아웃 버튼을 평소에 숨기고 메뉴를 열었을 때만 보여준다. */
  .site-header .auth-area {
    display: none !important;
  }

  body.mobile-nav-open .site-header .auth-area {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    padding-top: 4px !important;
  }

  body.mobile-nav-open .site-header .auth-area #userStatus {
    grid-column: 1 / -1 !important;
    font-size: 12px !important;
  }

  body.mobile-nav-open .site-header .auth-area button {
    min-height: 34px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    padding: 7px 8px !important;
  }

  body.mobile-nav-open .site-header nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .site-header nav button {
    min-height: 36px !important;
    padding: 7px 6px !important;
    font-size: 12px !important;
    border-radius: 9px !important;
  }

  main {
    padding: 12px 10px 24px !important;
  }

  #home .hero,
  .hero {
    min-height: 210px !important;
    height: auto !important;
    padding: 28px 18px 18px !important;
    border-radius: 18px !important;
    margin-bottom: 14px !important;
    background-position: center top !important;
  }

  .hero::before {
    background: linear-gradient(90deg, rgba(20,12,8,.50), rgba(20,12,8,.22)) !important;
  }

  .hero h1 {
    max-width: 74% !important;
    font-size: 23px !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
  }

  .hero p {
    max-width: 70% !important;
    font-size: 13px !important;
    margin-bottom: 16px !important;
  }

  .hero div {
    width: 100% !important;
    gap: 7px !important;
  }

  .hero button {
    width: 100% !important;
    min-height: 34px !important;
    padding: 7px 10px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    background: rgba(122, 77, 53, .92) !important;
  }

  .content-section,
  .page-title,
  .auth-page,
  .admin-form,
  .list-box,
  .about-document,
  .site-guide-card {
    padding: 16px 14px !important;
    border-radius: 18px !important;
    margin-bottom: 14px !important;
  }

  .content-section h2,
  .page-title h1 {
    font-size: 22px !important;
    margin-bottom: 8px !important;
  }

  .helper-text {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  /* 메인 최신자료는 모바일에서 '길고 무거운 박스'가 아니라 짧은 자료 카드처럼 보이게 한다. */
  .latest-category-grid {
    gap: 10px !important;
    margin-top: 14px !important;
  }

  .latest-category-box {
    min-height: 0 !important;
    padding: 14px !important;
    border-radius: 15px !important;
    box-shadow: 0 2px 8px rgba(60,48,41,.05) !important;
  }

  .latest-category-box h3 {
    font-size: 15px !important;
    margin-bottom: 9px !important;
    padding-bottom: 8px !important;
  }

  .latest-mini-card strong {
    font-size: 14px !important;
    line-height: 1.35 !important;
    margin-bottom: 6px !important;
  }

  .latest-mini-card p {
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin: 3px 0 !important;
  }

  .latest-mini-card p:first-of-type {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .card-content,
  .text-archive-body,
  .detail-body {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  .card {
    border-radius: 16px !important;
  }

  .card-content {
    padding: 14px !important;
  }

  /* 오늘의 추천곡은 모바일에서 화면을 가리는 큰 위젯이 아니라 하단 미니 플레이어처럼 보이게 한다. */
  #dailyRecommendPlayer.daily-player {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    z-index: 1200 !important;
  }

  #dailyRecommendPlayer .daily-player-card {
    display: grid !important;
    grid-template-columns: 38px 1fr auto !important;
    grid-template-areas:
      "play label close"
      "play title close"
      "progress progress progress"
      "hide hide hide";
    align-items: center !important;
    column-gap: 9px !important;
    row-gap: 5px !important;
    padding: 10px 12px !important;
    border-radius: 17px !important;
    min-height: 0 !important;
  }

  #dailyRecommendPlayer .daily-player-close {
    grid-area: close !important;
    position: static !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }

  #dailyRecommendPlayer .daily-player-label {
    grid-area: label !important;
    font-size: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  #dailyRecommendPlayer .daily-player-title {
    grid-area: title !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #dailyRecommendPlayer .daily-player-sub,
  #dailyRecommendPlayer .daily-volume-row,
  #dailyRecommendPlayer .compact-volume-row,
  #dailyRecommendPlayer .daily-player-time {
    display: none !important;
  }

  #dailyRecommendPlayer .daily-player-controls {
    grid-area: play !important;
    margin: 0 !important;
    display: block !important;
  }

  #dailyRecommendPlayer .daily-play-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    font-size: 16px !important;
  }

  #dailyRecommendPlayer .daily-player-progress {
    grid-area: progress !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #dailyRecommendPlayer .daily-hide-options {
    grid-area: hide !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-top: 2px !important;
  }

  #dailyRecommendPlayer .daily-hide-option-btn {
    min-height: 28px !important;
    padding: 5px 6px !important;
    font-size: 11px !important;
    border-radius: 999px !important;
  }

  footer {
    padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 420px) {
  .hero h1 {
    max-width: 82% !important;
    font-size: 21px !important;
  }

  .hero p {
    max-width: 78% !important;
  }

  .content-section,
  .page-title,
  .auth-page,
  .admin-form,
  .list-box {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }
}

/* v101: 실제 모바일 앱형 레이아웃 보정 - Z Flip 좁은 화면에서 PC폭/겹침 제거 */
@media (max-width: 820px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    touch-action: pan-y !important;
  }

  body.is-mobile-site {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    background: #f7f1e8 !important;
  }

  body.is-mobile-site *,
  body.is-mobile-site *::before,
  body.is-mobile-site *::after {
    box-sizing: border-box !important;
    min-width: 0;
  }

  body.is-mobile-site .site-header {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 3000 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 8px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  body.is-mobile-site .logo {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 98px) !important;
    overflow: hidden !important;
  }

  body.is-mobile-site .logo strong,
  body.is-mobile-site .logo small {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.is-mobile-site .mobile-menu-toggle {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    position: relative !important;
    z-index: 3200 !important;
  }

  body.is-mobile-site .site-header nav,
  body.is-mobile-site .site-header .auth-area {
    display: none !important;
  }

  body.is-mobile-site.mobile-nav-open::before {
    content: "";
    position: fixed;
    inset: 56px 0 0 0;
    z-index: 2500;
    background: rgba(32, 24, 19, .38);
    backdrop-filter: blur(2px);
  }

  body.is-mobile-site.mobile-nav-open .site-header nav {
    display: grid !important;
    position: fixed !important;
    top: 66px !important;
    left: 10px !important;
    right: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    min-width: 0 !important;
    z-index: 3100 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(46, 32, 24, .98) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.28) !important;
  }

  body.is-mobile-site.mobile-nav-open .site-header .auth-area {
    display: grid !important;
    position: fixed !important;
    top: 348px !important;
    left: 10px !important;
    right: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    min-width: 0 !important;
    z-index: 3100 !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(46, 32, 24, .98) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.22) !important;
  }

  body.is-mobile-site.mobile-nav-open .site-header .auth-area #userStatus {
    grid-column: 1 / -1 !important;
    color: #fff !important;
    opacity: .9 !important;
  }

  body.is-mobile-site .site-header nav button,
  body.is-mobile-site .site-header .auth-area button {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 40px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.is-mobile-site main {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px 10px 24px !important;
    overflow-x: hidden !important;
  }

  body.is-mobile-site .page,
  body.is-mobile-site section,
  body.is-mobile-site .content-section,
  body.is-mobile-site .page-title,
  body.is-mobile-site .auth-page,
  body.is-mobile-site .admin-form,
  body.is-mobile-site .list-box,
  body.is-mobile-site .toolbar,
  body.is-mobile-site .admin-tabs,
  body.is-mobile-site .card-grid,
  body.is-mobile-site .latest-category-grid,
  body.is-mobile-site .latest-category-box,
  body.is-mobile-site .card,
  body.is-mobile-site .text-archive-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
  }

  body.is-mobile-site #home .hero,
  body.is-mobile-site .hero {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 22px 14px 14px !important;
    margin: 0 0 12px 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  body.is-mobile-site .hero h1,
  body.is-mobile-site .hero p {
    max-width: 68% !important;
  }

  body.is-mobile-site .hero h1 {
    font-size: 20px !important;
    line-height: 1.25 !important;
    margin-bottom: 7px !important;
  }

  body.is-mobile-site .hero p {
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
  }

  body.is-mobile-site .hero div {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.is-mobile-site .hero button {
    width: 100% !important;
    min-height: 34px !important;
    padding: 7px 6px !important;
    font-size: 12px !important;
  }

  body.is-mobile-site .content-section {
    padding: 14px 12px !important;
    border-radius: 16px !important;
  }

  body.is-mobile-site .content-section h2,
  body.is-mobile-site .page-title h1 {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }

  body.is-mobile-site .latest-category-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  body.is-mobile-site .latest-category-box {
    min-height: 0 !important;
    height: auto !important;
    padding: 12px !important;
    border-radius: 14px !important;
  }

  body.is-mobile-site .latest-category-box h3 {
    font-size: 14px !important;
    margin: 0 0 8px 0 !important;
    padding-bottom: 7px !important;
  }

  body.is-mobile-site .latest-mini-card strong {
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin-bottom: 5px !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  body.is-mobile-site .latest-mini-card p {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    margin: 2px 0 !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  body.is-mobile-site .latest-mini-card p:nth-of-type(n+4) {
    display: none !important;
  }

  body.is-mobile-site .card-grid,
  body.is-mobile-site #videoList,
  body.is-mobile-site #songList,
  body.is-mobile-site #radioList,
  body.is-mobile-site #photoList,
  body.is-mobile-site #storyList,
  body.is-mobile-site #oneumList {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.is-mobile-site .daily-player {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
  }
}

@media (max-width: 420px) {
  body.is-mobile-site.mobile-nav-open .site-header .auth-area {
    top: 348px !important;
  }

  body.is-mobile-site .hero h1,
  body.is-mobile-site .hero p {
    max-width: 72% !important;
  }
}


/* v109: 사이트 먹통 복구 - 화면 보호 오버레이와 클릭 차단 강제 해제 */
#screenProtectOverlay,
.screen-protect-overlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.screen-protect-blur main,
body.screen-protect-blur header,
body.screen-protect-blur footer {
  filter: none !important;
}

button,
.logo,
.card,
.list-item,
.mobile-menu-toggle,
.site-header,
.site-header *,
main,
main * {
  pointer-events: auto;
}

.version-marker {
  position: fixed;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* v112: 모바일 영상 재생/상세창 종료 후 확대 상태가 남지 않도록 폭을 강제 안정화 */
html,
body {
  touch-action: manipulation;
}

@media (max-width: 820px) {
  html,
  body,
  body.is-mobile-site,
  body.is-mobile-site main,
  body.is-mobile-site .page,
  body.is-mobile-site .content-page,
  body.is-mobile-site .detail-modal,
  body.is-mobile-site .detail-modal-inner {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.is-mobile-site .detail-media-area,
  body.is-mobile-site .detail-media-box {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body.is-mobile-site .detail-media-area video,
  body.is-mobile-site .detail-media-box video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 58vh !important;
    object-fit: contain !important;
    transform: none !important;
  }

  body.is-mobile-site video:fullscreen,
  body.is-mobile-site video:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    object-fit: contain !important;
    transform: none !important;
  }
}

/* v113: Oneum 김광석 답글은 상세보기 본문 안에서만 표시 */
#detailDescription .oneum-kks-reply-box {
  white-space: normal;
}
#detailDescription .oneum-kks-reply-body {
  white-space: pre-wrap;
}


/* v114: 사이트 전체 우클릭/드래그/텍스트 선택 방지 보강 */
body.content-protected,
body.content-protected * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

body.content-protected input,
body.content-protected textarea,
body.content-protected select,
body.content-protected option,
body.content-protected [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

body.content-protected img,
body.content-protected video,
body.content-protected audio,
body.content-protected iframe {
  -webkit-user-drag: none;
  user-drag: none;
}


/* v116: Songs 사용자 플레이리스트 미니 플레이어 */
#userPlaylistPlayer.daily-player {
  position: fixed !important;
  top: 405px !important;
  right: 34px !important;
  left: auto !important;
  width: 210px !important;
  max-width: 210px !important;
  z-index: 8999 !important;
  pointer-events: none !important;
  margin: 0 !important;
  display: block !important;
}

#userPlaylistPlayer.closed {
  display: none !important;
}

#userPlaylistPlayer .daily-player-card {
  pointer-events: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 22px !important;
  padding: 18px 16px !important;
  background: linear-gradient(145deg, #23304f, #3e587f 55%, #8b6b45) !important;
  color: #fff !important;
  box-shadow: 0 18px 42px rgba(16, 24, 38, 0.24) !important;
  user-select: none !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}

#userPlaylistPlayer .daily-player-label {
  display: inline-block !important;
  margin-bottom: 12px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.17) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: #fff !important;
}

#userPlaylistPlayer .daily-player-title {
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  min-height: 42px !important;
  color: #fff !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}

#userPlaylistPlayer .daily-player-sub {
  margin-top: 6px !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
  opacity: 0.86 !important;
  color: rgba(255,255,255,0.88) !important;
}

#userPlaylistPlayer .daily-player-controls {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-top: 14px !important;
}

#userPlaylistPlayer .daily-play-btn {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #34496b !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18) !important;
}

#userPlaylistPlayer .playlist-nav-btn {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,0.34) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.16) !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

#userPlaylistPlayer .daily-player-time {
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex: 1 !important;
  font-size: 10px !important;
  opacity: 0.9 !important;
  color: rgba(255,255,255,0.9) !important;
}

#userPlaylistPlayer .daily-player-progress {
  width: 100% !important;
  height: 4px !important;
  margin-top: 13px !important;
  accent-color: #fff !important;
  cursor: pointer !important;
}

#userPlaylistPlayer #playlistPlayerAudio {
  display: none !important;
}

#userPlaylistPlayer .playlist-player-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  margin-top: 10px !important;
}

#userPlaylistPlayer .playlist-action-btn {
  min-height: 26px !important;
  padding: 5px 6px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.playlist-add-row {
  margin: 8px 0 0 !important;
}

.playlist-add-btn {
  width: 100% !important;
  min-height: 32px !important;
  border: 1px solid rgba(58, 43, 33, 0.16) !important;
  border-radius: 999px !important;
  background: #fff8ee !important;
  color: #6b3b19 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.playlist-add-btn.added {
  background: #efe3d1 !important;
  color: #7c6146 !important;
}

@media (max-width: 1500px) {
  #userPlaylistPlayer.daily-player {
    right: 16px !important;
    width: 184px !important;
    max-width: 184px !important;
  }
}

@media (max-width: 820px) {
  #userPlaylistPlayer.daily-player {
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    z-index: 1199 !important;
  }

  #userPlaylistPlayer .daily-player-card {
    display: grid !important;
    grid-template-columns: 34px 1fr auto !important;
    grid-template-areas:
      "play label close"
      "play title close"
      "progress progress progress"
      "actions actions actions";
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
    padding: 9px 12px !important;
    border-radius: 17px !important;
    min-height: 0 !important;
  }

  #userPlaylistPlayer .daily-player-close {
    grid-area: close !important;
    position: static !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }

  #userPlaylistPlayer .daily-player-label {
    grid-area: label !important;
    font-size: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  #userPlaylistPlayer .daily-player-title {
    grid-area: title !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    min-height: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #userPlaylistPlayer .daily-player-sub,
  #userPlaylistPlayer .daily-volume-row,
  #userPlaylistPlayer .compact-volume-row,
  #userPlaylistPlayer .daily-player-time,
  #userPlaylistPlayer .playlist-nav-btn {
    display: none !important;
  }

  #userPlaylistPlayer .daily-player-controls {
    grid-area: play !important;
    margin: 0 !important;
    display: block !important;
  }

  #userPlaylistPlayer .daily-play-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    font-size: 15px !important;
  }

  #userPlaylistPlayer .daily-player-progress {
    grid-area: progress !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #userPlaylistPlayer .playlist-player-actions {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-top: 1px !important;
  }

  #userPlaylistPlayer .playlist-action-btn {
    min-height: 26px !important;
    padding: 4px 6px !important;
    font-size: 10.5px !important;
  }
}

/* v117: 관리자 전용 다운로드 버튼 */
.admin-download-row {
  display: flex;
  justify-content: flex-end;
  margin: 8px 0 4px;
}
.admin-download-btn {
  appearance: none;
  border: 1px solid rgba(120, 91, 54, 0.35);
  background: rgba(255, 248, 235, 0.95);
  color: #5a3b1e;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(80, 48, 20, 0.08);
}
.admin-download-btn:hover {
  background: #fff2d7;
  border-color: rgba(120, 91, 54, 0.55);
}
.admin-download-btn-card {
  margin-top: 8px;
}
.admin-download-btn-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 12px auto 0;
}
body.is-mobile-site .admin-download-row { justify-content: stretch; }
@media (max-width: 820px) {
  .admin-download-row { justify-content: stretch; }
  .admin-download-btn { width: 100%; padding: 10px 12px; }
  .admin-download-btn-detail { width: 100%; }
}


/* v118: iPad/Safari inline video detail fix - show poster/thumbnail, keep native inline player */
.detail-video-box {
  background: #000;
  border-radius: 18px;
  overflow: hidden;
}
.detail-inline-video,
.card-inline-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  background: #000;
  object-fit: contain;
}
.detail-video-box video::-webkit-media-controls {
  z-index: 2;
}
@media (max-width: 900px) {
  .detail-inline-video {
    max-height: 58vh;
  }
}

/* v123 광석이네 통신방 */
.telecom-page { background:#001f8f; color:#e9f1ff; min-height:calc(100vh - 92px); padding:22px; }
.telecom-shell { max-width:1120px; margin:0 auto; border:2px solid #8aa7ff; background:#0027ad; box-shadow:0 0 0 4px rgba(0,0,0,.18) inset; font-family:"D2Coding","Courier New",monospace; }
.telecom-titlebar { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid #8aa7ff; background:#001b79; }
.telecom-titlebar h1 { margin:0 0 5px; color:#fff; font-size:24px; letter-spacing:-.02em; }
.telecom-titlebar p { margin:0; color:#c8d8ff; font-size:13px; }
.telecom-setup { padding:28px; display:flex; justify-content:center; }
.telecom-connect-box { width:min(420px,100%); border:1px solid #9fb5ff; padding:18px; background:#002dbf; }
.telecom-connect-box h2 { margin:0 0 14px; color:#fff; font-size:20px; }
.telecom-connect-box label { display:block; margin:12px 0 5px; color:#d8e4ff; font-size:13px; }
.telecom-connect-box input, .telecom-input-row input { width:100%; box-sizing:border-box; background:#00165f; color:#fff; border:1px solid #8aa7ff; border-radius:0; padding:10px; font-family:inherit; }
.telecom-connect-box select { width:100%; box-sizing:border-box; background:#00165f; color:#ffffff; border:2px solid #d8e4ff; border-radius:0; padding:11px 10px; font-family:inherit; font-size:16px; font-weight:700; }
.telecom-connect-box select option { background:#00165f; color:#ffffff; font-size:16px; }
.telecom-readonly { background:#00104a !important; color:#d8e4ff !important; opacity:1; }
.telecom-fixed-label { display:inline-block; margin-left:6px; padding:2px 6px; border:1px solid #8aa7ff; color:#fff; font-size:11px; }
.telecom-account-note { margin:8px 0 12px; color:#c8d8ff; font-size:12px; line-height:1.5; }
.telecom-connect-box select:focus, .telecom-connect-box input:focus, .telecom-input-row input:focus { outline:3px solid #fff; outline-offset:1px; }
.telecom-enter-btn, .telecom-small-btn, .telecom-input-row button { background:#dbe6ff; color:#001b79; border:1px solid #fff; border-radius:0; padding:9px 12px; font-family:inherit; font-weight:700; cursor:pointer; }
.telecom-enter-btn { width:100%; margin-top:16px; }
.telecom-small-btn:disabled { opacity:.62; cursor:not-allowed; }
.telecom-room { padding:12px 14px 16px; }
.telecom-status-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding-bottom:10px; border-bottom:1px dashed #8aa7ff; color:#fff; }
#telecomRoomName { flex:1; min-width:210px; font-weight:700; }
.telecom-room-date { display:inline-block; color:#ffffff; border:1px solid #8aa7ff; padding:3px 8px; font-size:13px; font-weight:700; background:#001b79; }
.telecom-log { height:440px; overflow:auto; padding:14px 4px; background:#0027ad; color:#ffffff; font-size:16px; line-height:1.7; }
.telecom-line { white-space:pre-wrap; word-break:keep-all; margin-bottom:6px; }
.telecom-time { display:inline-block; margin-left:8px; color:#d5e3ff; font-size:11px; line-height:1; opacity:.82; vertical-align:baseline; }
.telecom-after-exit { margin:10px 0 0; padding:10px; border:1px dashed #9fb5ff; color:#fff; display:flex; gap:8px; flex-wrap:wrap; align-items:center; background:rgba(0,0,0,.14); }
.telecom-after-exit span { flex:1 1 240px; }
.telecom-system { color:#ffffff; }
.telecom-nick { display:inline-block; min-width:86px; color:#fff; font-weight:700; }
.telecom-real { color:#ffffff; }
.telecom-text { color:#ffffff; }
.telecom-input-row { display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; padding-top:10px; border-top:1px dashed #8aa7ff; }
.telecom-input-row span { color:#fff; font-weight:700; }
.telecom-notice { margin:10px 0 0; color:#c8d8ff; font-size:12px; }

@media (max-width:820px) {
  .telecom-page { padding:10px; min-height:calc(100vh - 72px); }
  .telecom-shell { width:100%; }
  .telecom-titlebar { padding:12px; flex-direction:column; }
  .telecom-titlebar h1 { font-size:20px; }
  .telecom-setup { padding:16px; }
  .telecom-room { padding:10px; }
  .telecom-log { height:56vh; font-size:14px; line-height:1.62; }
  .telecom-nick { min-width:70px; }
  .telecom-input-row { grid-template-columns:1fr; }
  .telecom-input-row span { display:none; }
  .telecom-time { margin-left:6px; font-size:10px; }
  .telecom-status-row { align-items:stretch; }
  .telecom-status-row .telecom-small-btn { flex:1 1 auto; }
}

/* v122: PC header overlap fix after adding telecom/admin nav */
@media (min-width: 821px) {
  .site-header {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 14px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  .site-header .logo,
  .logo {
    min-width: 150px !important;
    flex: 0 0 auto !important;
  }

  .site-header nav,
  #siteNav {
    min-width: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  .site-header nav button,
  #siteNav button {
    white-space: nowrap !important;
    font-size: 13px !important;
    padding: 9px 11px !important;
    line-height: 1.1 !important;
  }

  .site-header .auth-area,
  .auth-area {
    min-width: 0 !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  .site-header .auth-area #userStatus,
  #userStatus {
    display: inline-block !important;
    max-width: 96px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
    font-size: 13px !important;
  }

  .site-header .auth-area button,
  .auth-area button {
    white-space: nowrap !important;
    font-size: 13px !important;
    padding: 9px 11px !important;
  }
}

@media (min-width: 821px) and (max-width: 1500px) {
  .site-header {
    column-gap: 9px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .site-header .logo,
  .logo {
    min-width: 135px !important;
  }

  .logo { font-size: 21px !important; }
  .logo small { font-size: 11px !important; }

  .site-header nav,
  #siteNav { gap: 4px !important; }

  .site-header nav button,
  #siteNav button {
    font-size: 12px !important;
    padding: 8px 8px !important;
  }

  .site-header .auth-area,
  .auth-area { gap: 4px !important; }

  .site-header .auth-area #userStatus,
  #userStatus { max-width: 82px !important; font-size: 12px !important; }

  .site-header .auth-area button,
  .auth-area button {
    font-size: 12px !important;
    padding: 8px 9px !important;
  }
}

@media (min-width: 821px) and (max-width: 1280px) {
  .site-header nav,
  #siteNav {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .site-header nav::-webkit-scrollbar,
  #siteNav::-webkit-scrollbar { display: none !important; }
}


/* v139: PC-only telecom + browser local AI experiment */
.telecom-pc-only {
  max-width: 760px;
  margin: 40px auto;
  padding: 26px;
  border: 2px solid #8aa7ff;
  background: #0027ad;
  color: #fff;
  font-family: "D2Coding", "Courier New", monospace;
  text-align: center;
}
.telecom-pc-only h2 { margin: 0 0 12px; color: #fff; }
.telecom-pc-only p { margin: 0; color: #d8e4ff; line-height: 1.65; }
.telecom-ai-status {
  margin: 8px 0 12px;
  padding: 8px 10px;
  border: 1px dashed #8aa7ff;
  color: #ffffff;
  background: rgba(0,0,0,.16);
  font-size: 12px;
  line-height: 1.55;
}
@media (max-width: 899px) {
  #telecom .telecom-shell { display: none !important; }
  #telecomPcOnlyNotice.hidden { display: block !important; }
}

/* v150: 통신방 선택 박스/입력창 가독성 강제 보정 */
#telecom .telecom-connect-box select,
#telecom .telecom-connect-box select option,
#telecom .telecom-connect-box input,
#telecom .telecom-input-row input,
#telecom input[type="text"],
#telecom input[type="search"],
#telecom input[type="password"],
#telecom input[type="email"],
#telecom textarea {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background-color: #00165f !important;
  border-color: #8fb3ff !important;
  opacity: 1 !important;
  caret-color: #ffffff !important;
  text-shadow: none !important;
  filter: none !important;
}

#telecom .telecom-connect-box select {
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  height: 36px !important;
  line-height: 1.3 !important;
  padding: 6px 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

#telecom .telecom-connect-box select option,
#telecom .telecom-connect-box select optgroup {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #00165f !important;
}

#telecom .telecom-connect-box select:focus,
#telecom .telecom-connect-box input:focus,
#telecom .telecom-input-row input:focus,
#telecom textarea:focus {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background-color: #00165f !important;
  outline: 2px solid #ffffff !important;
  outline-offset: 1px !important;
}

#telecom .telecom-connect-box input::placeholder,
#telecom .telecom-input-row input::placeholder,
#telecom textarea::placeholder {
  color: #c8d8ff !important;
  -webkit-text-fill-color: #c8d8ff !important;
  opacity: 1 !important;
}

#telecom input:-webkit-autofill,
#telecom input:-webkit-autofill:hover,
#telecom input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 0 0 1000px #00165f inset !important;
  transition: background-color 9999s ease-out 0s !important;
}

/* readonly 계정 입력칸도 흐릿하게 죽지 않게 유지 */
#telecom .telecom-readonly,
#telecom input[readonly] {
  color: #e9f1ff !important;
  -webkit-text-fill-color: #e9f1ff !important;
  background-color: #00104a !important;
  opacity: 1 !important;
}

/* v163: 플레이어 커버/위치/가독성 보정 */
#dailyRecommendPlayer .daily-player-cover,
#userPlaylistPlayer .daily-player-cover {
  display: block !important;
  width: 72px !important;
  height: 72px !important;
  margin: 0 0 10px 0 !important;
  border-radius: 14px !important;
  object-fit: cover !important;
  background: rgba(255,255,255,0.16) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18) !important;
}

#dailyRecommendPlayer .daily-player-cover.empty,
#userPlaylistPlayer .daily-player-cover.empty {
  display: none !important;
}

#userPlaylistPlayer.daily-player {
  top: 470px !important;
}

@media (max-width: 1500px) {
  #userPlaylistPlayer.daily-player {
    right: 16px !important;
    top: 450px !important;
    width: 184px !important;
    max-width: 184px !important;
  }
}

@media (max-width: 1180px) {
  #userPlaylistPlayer.daily-player {
    right: 12px !important;
    top: 395px !important;
    width: 168px !important;
    max-width: 168px !important;
  }
}

/* v164: floating players cover background + no-overlap layout */
#dailyRecommendPlayer .daily-player-card,
#userPlaylistPlayer .daily-player-card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

#dailyRecommendPlayer .daily-player-card::before,
#userPlaylistPlayer .daily-player-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-image: var(--player-cover-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 0.18 !important;
  filter: blur(1.5px) saturate(1.06) contrast(1.03) !important;
  transform: scale(1.08) !important;
  pointer-events: none !important;
}

#dailyRecommendPlayer .daily-player-card::after,
#userPlaylistPlayer .daily-player-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(180deg, rgba(30, 16, 30, 0.16), rgba(0, 0, 0, 0.20)) !important;
  pointer-events: none !important;
}

#dailyRecommendPlayer .daily-player-card > *,
#userPlaylistPlayer .daily-player-card > * {
  position: relative !important;
  z-index: 2 !important;
}

#dailyRecommendPlayer .daily-player-cover,
#userPlaylistPlayer .daily-player-cover {
  background: rgba(255,255,255,0.16) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.16) !important;
}

/* JS가 카드 높이를 읽어 자동으로 더 정확히 내리지만, JS 전에도 겹치지 않도록 기본값 보정 */
#userPlaylistPlayer.daily-player {
  top: 585px !important;
}

@media (max-width: 1500px) {
  #userPlaylistPlayer.daily-player {
    top: 555px !important;
  }
}

@media (max-width: 1180px) {
  #userPlaylistPlayer.daily-player {
    top: 525px !important;
  }
}

@media (max-width: 760px) {
  #dailyRecommendPlayer.daily-player,
  #userPlaylistPlayer.daily-player {
    right: 10px !important;
    width: min(86vw, 260px) !important;
    max-width: min(86vw, 260px) !important;
  }

  #dailyRecommendPlayer.daily-player {
    top: 84px !important;
    bottom: auto !important;
  }

  #userPlaylistPlayer.daily-player {
    top: 430px !important;
    bottom: auto !important;
  }
}

/* v166 siteinfo purpose readability */
.site-guide-purpose-card p {
  line-height: 1.9;
  margin-bottom: 16px;
  word-break: keep-all;
}
.site-guide-purpose-card p:first-of-type {
  font-weight: 700;
  font-size: 1.05rem;
}


/* Site info closing sentence emphasis */
.site-purpose-closing {
  font-weight: 800;
}

.site-purpose-closing strong {
  font-weight: 800;
}


/* v168 siteinfo list hanging alignment */
.site-storage-list-card .site-storage-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.site-storage-list-card .site-storage-list li {
  position: relative;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  margin: 8px 0;
  padding-left: 24px;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.site-storage-list-card .site-storage-list li::before {
  content: "•";
  position: absolute;
  left: 2px;
  top: 0;
  font-weight: 800;
}

.site-storage-name {
  font-weight: 800;
  white-space: nowrap;
}

.site-storage-desc {
  display: block;
  min-width: 0;
}

@media (max-width: 760px) {
  .site-storage-list-card .site-storage-list li {
    grid-template-columns: 1fr;
    row-gap: 2px;
    padding-left: 22px;
  }

  .site-storage-desc {
    padding-left: 0;
  }
}


/* v174: Bugs 스타일 하단 고정 내 플레이리스트 바 */
html,
body {
  scroll-padding-bottom: 108px !important;
}

body {
  padding-bottom: 96px !important;
}

#userPlaylistPlayer.daily-player {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100vw !important;
  max-width: none !important;
  z-index: 12000 !important;
  pointer-events: none !important;
  margin: 0 !important;
  display: block !important;
}

#userPlaylistPlayer.daily-player.closed {
  display: none !important;
}

#userPlaylistPlayer .daily-player-card.playlist-player-card,
#userPlaylistPlayer .daily-player-card {
  pointer-events: auto !important;
  width: 100% !important;
  min-height: 76px !important;
  max-height: 86px !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
  padding: 10px 24px !important;
  display: grid !important;
  grid-template-columns: 54px minmax(220px, 1fr) minmax(280px, 440px) 120px 32px !important;
  grid-template-rows: 24px 22px 18px !important;
  grid-template-areas:
    "cover label controls actions close"
    "cover title controls actions close"
    "cover sub progress actions close" !important;
  align-items: center !important;
  column-gap: 14px !important;
  row-gap: 2px !important;
  background: linear-gradient(90deg, rgba(80, 63, 55, 0.96), rgba(122, 96, 83, 0.96), rgba(92, 71, 62, 0.96)) !important;
  color: #fff !important;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.22) !important;
  border-top: 1px solid rgba(255,255,255,0.22) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  overflow: hidden !important;
}

#userPlaylistPlayer .daily-player-card::before {
  opacity: 0.20 !important;
  filter: blur(1px) saturate(1.05) contrast(1.02) !important;
  transform: scale(1.04) !important;
  background-position: center 42% !important;
}

#userPlaylistPlayer .daily-player-card::after {
  background: linear-gradient(90deg, rgba(35, 24, 20, 0.52), rgba(63, 45, 39, 0.40), rgba(35, 24, 20, 0.58)) !important;
}

#userPlaylistPlayer .daily-player-cover.playlist-player-cover,
#userPlaylistPlayer .daily-player-cover {
  grid-area: cover !important;
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  background: rgba(255,255,255,0.14) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.22) !important;
}

#userPlaylistPlayer .daily-player-label.playlist-player-label,
#userPlaylistPlayer .daily-player-label {
  grid-area: label !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,0.82) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

#userPlaylistPlayer .daily-player-title {
  grid-area: title !important;
  min-height: 0 !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#userPlaylistPlayer .daily-player-sub {
  grid-area: sub !important;
  margin: 0 !important;
  color: rgba(255,255,255,0.78) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#userPlaylistPlayer .daily-player-controls.playlist-player-controls,
#userPlaylistPlayer .daily-player-controls {
  grid-area: controls !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 0 !important;
}

#userPlaylistPlayer .daily-play-btn {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.95) !important;
  color: #6d5045 !important;
  font-size: 17px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
}

#userPlaylistPlayer .playlist-nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.13) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  font-size: 20px !important;
}

#userPlaylistPlayer .daily-player-time.playlist-player-time,
#userPlaylistPlayer .daily-player-time {
  display: flex !important;
  width: 76px !important;
  min-width: 76px !important;
  justify-content: space-between !important;
  gap: 6px !important;
  color: rgba(255,255,255,0.86) !important;
  font-size: 11px !important;
}

#userPlaylistPlayer .daily-player-progress {
  grid-area: progress !important;
  width: 100% !important;
  max-width: 440px !important;
  justify-self: center !important;
  margin: 0 !important;
  height: 4px !important;
  accent-color: #fff !important;
}

#userPlaylistPlayer .playlist-volume-row {
  grid-area: actions !important;
  justify-self: stretch !important;
  align-self: end !important;
  width: 100% !important;
  max-width: 110px !important;
  margin: 0 !important;
}

#userPlaylistPlayer .playlist-player-actions {
  grid-area: actions !important;
  align-self: start !important;
  display: flex !important;
  gap: 6px !important;
  margin: 0 !important;
  width: 100% !important;
}

#userPlaylistPlayer .playlist-action-btn {
  min-height: 24px !important;
  padding: 4px 8px !important;
  font-size: 10.5px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.26) !important;
}

#userPlaylistPlayer .daily-player-close {
  grid-area: close !important;
  position: static !important;
  justify-self: end !important;
  align-self: start !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.16) !important;
  color: #fff !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

@media (max-width: 920px) {
  body {
    padding-bottom: 112px !important;
  }

  #userPlaylistPlayer .daily-player-card.playlist-player-card,
  #userPlaylistPlayer .daily-player-card {
    min-height: 102px !important;
    max-height: none !important;
    padding: 10px 12px !important;
    grid-template-columns: 48px 1fr 34px !important;
    grid-template-rows: 18px 22px 22px 20px !important;
    grid-template-areas:
      "cover label close"
      "cover title close"
      "cover controls controls"
      "progress progress progress" !important;
    column-gap: 10px !important;
  }

  #userPlaylistPlayer .daily-player-cover.playlist-player-cover,
  #userPlaylistPlayer .daily-player-cover {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
  }

  #userPlaylistPlayer .daily-player-title {
    font-size: 14px !important;
  }

  #userPlaylistPlayer .daily-player-sub,
  #userPlaylistPlayer .playlist-volume-row,
  #userPlaylistPlayer .playlist-player-actions {
    display: none !important;
  }

  #userPlaylistPlayer .daily-player-controls.playlist-player-controls,
  #userPlaylistPlayer .daily-player-controls {
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  #userPlaylistPlayer .daily-play-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    font-size: 14px !important;
  }

  #userPlaylistPlayer .playlist-nav-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    font-size: 17px !important;
  }

  #userPlaylistPlayer .daily-player-time.playlist-player-time,
  #userPlaylistPlayer .daily-player-time {
    width: 64px !important;
    min-width: 64px !important;
    font-size: 10px !important;
  }

  #userPlaylistPlayer .daily-player-progress {
    max-width: none !important;
  }
}

/* v175: 설명 이미지 기준 - 하단 바를 재생곡 / 재생컨트롤 / 재생목록 3영역으로 재정렬 */
#userPlaylistPlayer .daily-player-card.playlist-player-card,
#userPlaylistPlayer .daily-player-card {
  min-height: 72px !important;
  max-height: 78px !important;
  padding: 8px 22px !important;
  grid-template-columns: 58px minmax(260px, 1fr) minmax(360px, 560px) minmax(160px, 210px) !important;
  grid-template-rows: 22px 20px 16px !important;
  grid-template-areas:
    "cover title controls actions"
    "cover sub controls actions"
    "cover sub progress actions" !important;
  column-gap: 16px !important;
  row-gap: 0 !important;
}

#userPlaylistPlayer .daily-player-label.playlist-player-label,
#userPlaylistPlayer .daily-player-label {
  display: none !important;
}

#userPlaylistPlayer .daily-player-cover.playlist-player-cover,
#userPlaylistPlayer .daily-player-cover {
  width: 52px !important;
  height: 52px !important;
  border-radius: 4px !important;
}

#userPlaylistPlayer .daily-player-title {
  align-self: end !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

#userPlaylistPlayer .daily-player-sub {
  align-self: start !important;
  font-size: 10.5px !important;
  line-height: 1.25 !important;
  max-width: 100% !important;
}

#userPlaylistPlayer .daily-player-controls.playlist-player-controls,
#userPlaylistPlayer .daily-player-controls {
  align-self: center !important;
  justify-self: center !important;
  width: 100% !important;
  gap: 12px !important;
}

#userPlaylistPlayer .daily-player-time.playlist-player-time,
#userPlaylistPlayer .daily-player-time {
  width: 88px !important;
  min-width: 88px !important;
  font-size: 10.5px !important;
}

#userPlaylistPlayer .daily-player-progress {
  justify-self: center !important;
  width: min(100%, 520px) !important;
  max-width: 520px !important;
}

#userPlaylistPlayer .playlist-player-actions {
  grid-area: actions !important;
  align-self: center !important;
  justify-self: end !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 28px 28px !important;
  gap: 5px !important;
  width: 150px !important;
  max-width: 150px !important;
}

#userPlaylistPlayer .playlist-action-btn {
  width: 100% !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

#playlistPlayerListBtn.playlist-list-toggle {
  background: rgba(255,255,255,0.20) !important;
}

#userPlaylistPlayer .playlist-volume-row {
  display: none !important;
}

#userPlaylistPlayer .daily-player-close {
  display: none !important;
}

#userPlaylistPlayer .playlist-queue-panel {
  position: absolute !important;
  right: 18px !important;
  bottom: 84px !important;
  width: min(360px, calc(100vw - 36px)) !important;
  max-height: 48vh !important;
  overflow: hidden !important;
  display: none !important;
  border-radius: 16px !important;
  background: rgba(46, 34, 30, 0.96) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.32) !important;
  color: #fff !important;
  z-index: 2 !important;
}

#userPlaylistPlayer .playlist-queue-panel.open {
  display: block !important;
}

#userPlaylistPlayer .playlist-queue-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 12px 12px 9px !important;
  border-bottom: 1px solid rgba(255,255,255,0.16) !important;
}

#userPlaylistPlayer .playlist-queue-clear {
  border: 1px solid rgba(255,255,255,0.24) !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
  font-size: 11px !important;
  cursor: pointer !important;
}

#userPlaylistPlayer .playlist-queue-list {
  max-height: calc(48vh - 48px) !important;
  overflow: auto !important;
  padding: 6px !important;
}

#userPlaylistPlayer .playlist-queue-item {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 28px 1fr !important;
  gap: 8px !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #fff !important;
  text-align: left !important;
  padding: 8px !important;
  cursor: pointer !important;
}

#userPlaylistPlayer .playlist-queue-item:hover,
#userPlaylistPlayer .playlist-queue-item.active {
  background: rgba(255,255,255,0.13) !important;
}

#userPlaylistPlayer .playlist-queue-num {
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.14) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

#userPlaylistPlayer .playlist-queue-meta {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

#userPlaylistPlayer .playlist-queue-title,
#userPlaylistPlayer .playlist-queue-sub {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#userPlaylistPlayer .playlist-queue-title {
  font-size: 12px !important;
  font-weight: 900 !important;
}

#userPlaylistPlayer .playlist-queue-sub,
#userPlaylistPlayer .playlist-queue-empty {
  color: rgba(255,255,255,0.72) !important;
  font-size: 10.5px !important;
}

#userPlaylistPlayer .playlist-queue-empty {
  padding: 16px 12px !important;
}

@media (max-width: 920px) {
  #userPlaylistPlayer .daily-player-card.playlist-player-card,
  #userPlaylistPlayer .daily-player-card {
    min-height: 104px !important;
    grid-template-columns: 48px 1fr 96px !important;
    grid-template-rows: 23px 23px 34px 12px !important;
    grid-template-areas:
      "cover title actions"
      "cover sub actions"
      "controls controls controls"
      "progress progress progress" !important;
  }

  #userPlaylistPlayer .daily-player-sub {
    display: block !important;
  }

  #userPlaylistPlayer .playlist-player-actions {
    width: 92px !important;
    max-width: 92px !important;
    grid-template-rows: 25px 25px !important;
  }

  #userPlaylistPlayer .playlist-action-btn {
    height: 25px !important;
    min-height: 25px !important;
    font-size: 10px !important;
    padding: 3px 6px !important;
  }

  #userPlaylistPlayer .playlist-queue-panel {
    right: 10px !important;
    bottom: 112px !important;
  }
}


/* v176: 재생목록 버튼 클릭 시 실제 곡 목록 패널이 하단 플레이어 위에 확실히 보이도록 보정 */
#userPlaylistPlayer .playlist-queue-panel {
  position: fixed !important;
  right: 22px !important;
  bottom: 92px !important;
  width: min(380px, calc(100vw - 44px)) !important;
  max-height: min(420px, calc(100vh - 128px)) !important;
  overflow: hidden !important;
  display: none !important;
  z-index: 13050 !important;
  pointer-events: auto !important;
  border-radius: 16px !important;
  background: rgba(46, 34, 30, 0.98) !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,0.42) !important;
  color: #fff !important;
}

#userPlaylistPlayer .playlist-queue-panel.open {
  display: block !important;
}

#userPlaylistPlayer .playlist-queue-list {
  max-height: min(350px, calc(100vh - 190px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#playlistPlayerListBtn.playlist-list-toggle[aria-expanded="true"] {
  background: rgba(255,255,255,0.32) !important;
  border-color: rgba(255,255,255,0.48) !important;
}

@media (max-width: 920px) {
  #userPlaylistPlayer .playlist-queue-panel {
    right: 10px !important;
    bottom: 118px !important;
    width: calc(100vw - 20px) !important;
    max-height: min(420px, calc(100vh - 150px)) !important;
  }
}


/* v177: 하단 플레이어 볼륨 조절 복구 */
#userPlaylistPlayer .daily-player-card.playlist-player-card,
#userPlaylistPlayer .daily-player-card {
  min-height: 76px !important;
  max-height: 84px !important;
  padding: 8px 22px !important;
  grid-template-columns: 58px minmax(240px, 1fr) minmax(320px, 520px) 104px minmax(158px, 190px) !important;
  grid-template-rows: 22px 20px 16px !important;
  grid-template-areas:
    "cover title controls volume actions"
    "cover sub controls volume actions"
    "cover sub progress volume actions" !important;
  column-gap: 14px !important;
  overflow: visible !important;
}

#userPlaylistPlayer .playlist-volume-row {
  grid-area: volume !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  align-self: center !important;
  justify-self: center !important;
  width: 96px !important;
  max-width: 96px !important;
  min-width: 96px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 5 !important;
}

#userPlaylistPlayer #playlistPlayerMuteBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  line-height: 1 !important;
  color: #fff !important;
  background: rgba(255,255,255,0.16) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
}

#userPlaylistPlayer #playlistPlayerVolume {
  display: block !important;
  width: 64px !important;
  max-width: 64px !important;
  min-width: 64px !important;
  height: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: #ffffff !important;
  cursor: pointer !important;
}

#userPlaylistPlayer .playlist-player-actions {
  grid-area: actions !important;
  align-self: center !important;
  justify-self: end !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 28px 28px !important;
  gap: 5px !important;
  width: 150px !important;
  max-width: 150px !important;
}

@media (max-width: 860px) {
  #userPlaylistPlayer .daily-player-card.playlist-player-card,
  #userPlaylistPlayer .daily-player-card {
    grid-template-columns: 46px minmax(120px, 1fr) 104px !important;
    grid-template-rows: 18px 18px 28px 16px !important;
    grid-template-areas:
      "cover title actions"
      "cover sub actions"
      "controls controls volume"
      "progress progress progress" !important;
    column-gap: 10px !important;
    min-height: 94px !important;
    max-height: 104px !important;
  }

  #userPlaylistPlayer .playlist-volume-row {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
  }

  #userPlaylistPlayer #playlistPlayerVolume {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
  }
}


/* v179: 모바일 하단 플레이어를 심플한 미니바 UI로 재구성 */
@media (max-width: 768px) {
  body.is-mobile-site {
    padding-bottom: 132px !important;
  }

  #userPlaylistPlayer.daily-player {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    border-radius: 0 !important;
    z-index: 1200 !important;
  }

  #userPlaylistPlayer.daily-player.closed {
    transform: translateY(calc(100% - 18px)) !important;
  }

  #userPlaylistPlayer .daily-player-card.playlist-player-card,
  #userPlaylistPlayer .daily-player-card {
    min-height: 104px !important;
    max-height: none !important;
    padding: 18px 18px 18px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    grid-template-columns: minmax(0,1fr) 88px 52px !important;
    grid-template-rows: 34px 26px !important;
    grid-template-areas:
      "title controls actions"
      "sub controls actions" !important;
    align-items: center !important;
    column-gap: 14px !important;
    background: #efefef !important;
    box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.12) !important;
    overflow: visible !important;
  }

  #userPlaylistPlayer .daily-player-card::before,
  #userPlaylistPlayer .daily-player-card::after {
    display: none !important;
  }

  #userPlaylistPlayer .daily-player-label,
  #userPlaylistPlayer .daily-player-cover,
  #userPlaylistPlayer .daily-player-progress,
  #userPlaylistPlayer .playlist-volume-row,
  #userPlaylistPlayer .daily-player-close,
  #userPlaylistPlayer #playlistPlayerPrevBtn,
  #userPlaylistPlayer #playlistPlayerNextBtn,
  #userPlaylistPlayer #playlistPlayerCurrent,
  #userPlaylistPlayer #playlistPlayerDuration,
  #userPlaylistPlayer #playlistPlayerRemoveBtn {
    display: none !important;
  }

  #userPlaylistPlayer .daily-player-title {
    grid-area: title !important;
    align-self: end !important;
    justify-self: start !important;
    width: 100% !important;
    color: #222 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #userPlaylistPlayer .daily-player-sub {
    grid-area: sub !important;
    align-self: start !important;
    justify-self: start !important;
    width: 100% !important;
    color: #7c7c7c !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    opacity: 1 !important;
  }

  #userPlaylistPlayer .daily-player-controls.playlist-player-controls,
  #userPlaylistPlayer .daily-player-controls {
    grid-area: controls !important;
    align-self: center !important;
    justify-self: center !important;
    width: 88px !important;
    max-width: 88px !important;
    min-width: 88px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #userPlaylistPlayer #playlistPlayerPlayBtn {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #2f2f2f !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
    font-size: 24px !important;
    line-height: 1 !important;
    padding: 0 !important;
  }

  #userPlaylistPlayer .playlist-player-actions {
    grid-area: actions !important;
    align-self: center !important;
    justify-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #userPlaylistPlayer #playlistPlayerListBtn {
    position: relative !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    box-shadow: none !important;
  }

  #userPlaylistPlayer #playlistPlayerListBtn::before {
    content: "☰";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-54%, -50%);
    color: #404040;
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
  }

  #userPlaylistPlayer #playlistPlayerListBtn::after {
    content: "▷";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-40%);
    color: #404040;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
  }

  #userPlaylistPlayer .playlist-queue-panel {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    bottom: calc(100% + 10px) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,0.96) !important;
    backdrop-filter: blur(8px) !important;
  }
}