/* ============================================================
   DULI design tokens — generated from design-system/tokens.json
   (light in :root, dark under prefers-color-scheme). Edit the design
   system first, then mirror the values here.
   ============================================================ */
:root{
  --bg: #edf0f4;
  --panel: #fbfcfd;
  --panel-alt: #e9edf3;
  --field: #e7eaef;
  --line: #d9dee6;
  --text: #1b2230;
  --text-2: #4a5362;
  --muted: #5b6370;
  --muted-2: #a9b0bb;
  --music: #1f6fe8;
  --music-hover: #1a5fd0;
  --music-ink: #1554c0;
  --music-soft: #d6e4fc;
  --music-line: #a9c4f5;
  --music-mark: var(--music);
  --special: var(--music);
  --accent: #7042ef;
  --accent-hover: #5b2fe3;
  --accent-ink: #5f30dc;
  --accent-mark: var(--accent);
  --accent-soft: #efeafd;
  --admin: #c02d2d;
  --admin-hover: #a82626;
  --admin-ink: var(--admin);
  --on-accent: #ffffff;
  --focus: var(--music);
  --sh-light: rgb(255, 255, 255);
  --sh-dark: rgb(24, 39, 75);
  --panel-glass: rgba(251, 252, 253, 0.88);
  --apple-fill: #000000;
  --apple-ink: #ffffff;
  --cover-ink: var(--text);
  --cover-bar: var(--muted-2);
  --shadow-xs: 0 0 0 1px rgba(24,39,75,0.07), 0 1px 2px rgba(24,39,75,0.07), inset 0 1px 0 rgba(255,255,255,0.9);
  --shadow-sm: 0 0 0 1px rgba(24,39,75,0.05), 0 1px 2px rgba(24,39,75,0.05), 0 8px 24px -10px rgba(24,39,75,0.16), inset 0 1px 0 rgba(255,255,255,0.9);
  --shadow-md: 0 0 0 1px rgba(24,39,75,0.05), 0 2px 4px rgba(24,39,75,0.05), 0 18px 36px -12px rgba(24,39,75,0.22), inset 0 1px 0 rgba(255,255,255,0.9);
  --shadow-header: 0 1px 0 rgba(24,39,75,0.07), 0 10px 24px -14px rgba(24,39,75,0.18);
  --shadow-inset: inset 0 2px 6px rgba(24,39,75,0.08), inset 0 0 0 1px rgba(24,39,75,0.13);
  --shadow-inset-sm: inset 0 1px 3px rgba(24,39,75,0.08), inset 0 0 0 1px rgba(24,39,75,0.13);
  --shadow-art: 0 1px 2px rgba(24,39,75,0.12), 0 3px 8px -3px rgba(24,39,75,0.18);
  --shadow-fill: 0 1px 2px rgba(24,39,75,0.16), 0 4px 10px -4px rgba(24,39,75,0.32), inset 0 1px 0 rgba(255,255,255,0.18);
  --accent-glow: 0 1px 2px rgba(24,39,75,0.16), 0 4px 10px -4px rgba(24,39,75,0.32), inset 0 1px 0 rgba(255,255,255,0.22);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --radius-xs: 6px;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --grain-opacity: 0;
  --disabled-opacity: 0.4;
  --font-sans: "SUIT Variable", "Pretendard", sans-serif;
  /* legacy names still read by index.html / app.js inline styles */
  --border: transparent;
  --accent-gradient: linear-gradient(135deg, var(--music) 10%, var(--accent));
  --accent-gradient-hover: linear-gradient(135deg, var(--music-hover) 10%, var(--accent-hover));
  /* the logo's three bars as a mask: HOT eyebrow and the now-playing mark */
  --eq-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Crect x='2' y='5' width='4' height='9' rx='2'/%3E%3Crect x='8' y='1' width='4' height='13' rx='2'/%3E%3Crect x='14' y='4' width='4' height='10' rx='2'/%3E%3C/svg%3E");
  --search-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #22252b;
    --panel: #2b2f36;
    --panel-alt: #343840;
    --field: #1b1d22;
    --line: #3b4049;
    --text: #eef0f3;
    --text-2: #c3c8d0;
    --muted: #a0a7b3;
    --muted-2: #5c626c;
    --music: #2b6be0;
    --music-hover: #255fcc;
    --music-ink: #8cb8ff;
    --music-soft: #22385e;
    --music-line: #34548c;
    --music-mark: #4b93fa;
    --accent: #7a4df0;
    --accent-hover: #6a3be6;
    --accent-ink: #b9a3ff;
    --accent-mark: #a58aff;
    --accent-soft: #322c4f;
    --admin: #d33b42;
    --admin-hover: #b8303a;
    --admin-ink: #ff7b7b;
    --focus: var(--music-ink);
    --sh-dark: rgb(0, 0, 0);
    --panel-glass: rgba(43, 47, 54, 0.88);
    --apple-fill: #ffffff;
    --apple-ink: #000000;
    --cover-ink: #40454f;
    --cover-bar: var(--muted);
    --shadow-xs: 0 0 0 1px rgba(255,255,255,0.10), 0 1px 2px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
    --shadow-sm: 0 0 0 1px rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.3), 0 10px 24px -10px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
    --shadow-md: 0 0 0 1px rgba(255,255,255,0.08), 0 2px 4px rgba(0,0,0,0.3), 0 18px 38px -12px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
    --shadow-header: 0 1px 0 rgba(0,0,0,0.35), 0 10px 24px -12px rgba(0,0,0,0.55);
    --shadow-inset: inset 0 2px 6px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.05);
    --shadow-inset-sm: inset 0 1px 3px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.05);
    --shadow-art: 0 0 0 1px rgba(255,255,255,0.16), 0 1px 2px rgba(0,0,0,0.5), 0 4px 12px -3px rgba(0,0,0,0.6);
    --shadow-fill: 0 1px 2px rgba(0,0,0,0.45), 0 4px 12px -4px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.18);
    --accent-glow: 0 1px 2px rgba(0,0,0,0.45), 0 6px 14px -6px rgba(8,10,40,0.85), inset 0 1px 0 rgba(255,255,255,0.22);
    /* a faint grain dithers the soft shadows' banding on dark grounds */
    --grain-opacity: 0.05;
  }
}
*{box-sizing:border-box;}
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-sans); font-size:15px; letter-spacing:-0.2px; line-height:1.55; -webkit-font-smoothing:antialiased; display:flex; flex-direction:column; min-height:100vh; overflow-x:hidden; padding-bottom:env(safe-area-inset-bottom); }
body::after{
  content:'';
  position:fixed; inset:0; z-index:250; pointer-events:none;
  opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.display{ font-family:var(--font-sans); font-weight:800; letter-spacing:-0.6px; }
a{color:inherit; text-decoration:none;}
.tabular{font-variant-numeric:tabular-nums;}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--muted-2); border-radius:10px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--muted); }

header{ background:var(--panel-glass); backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px); position:sticky; top:0; z-index:50; box-shadow:var(--shadow-header); padding-top:env(safe-area-inset-top); }
.header-inner{ max-width:1180px; margin:0 auto; padding:var(--space-4) var(--space-5); display:grid; grid-template-columns:232px minmax(0, 1fr) auto; align-items:center; gap:var(--space-8); }

/* 모바일 전용 햄버거 메뉴 + 드로어 배경. PC에서는 기본적으로 숨김. */
.mobile-menu-btn{ display:none; background:none; border:none; color:var(--text); cursor:pointer; padding:6px; flex:none; align-items:center; justify-content:center; }
.mobile-menu-btn svg{ display:block; }
.sidebar-backdrop{
  position:fixed; inset:0; z-index:199;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px);
  opacity:0; pointer-events:none;
  /* 블러가 사라질 때(닫힘)는 메뉴 슬라이드보다 1.6배 느리게(0.72s), 나타날 때는 0.45s 그대로. */
  transition:opacity 0.72s cubic-bezier(0.16,1,0.3,1), backdrop-filter 0.72s cubic-bezier(0.16,1,0.3,1), -webkit-backdrop-filter 0.72s cubic-bezier(0.16,1,0.3,1);
}
.sidebar-backdrop.open{
  opacity:1; pointer-events:auto;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:opacity 0.45s cubic-bezier(0.16,1,0.3,1), backdrop-filter 0.45s cubic-bezier(0.16,1,0.3,1), -webkit-backdrop-filter 0.45s cubic-bezier(0.16,1,0.3,1);
}
.brand{ font-size:22px; line-height:1.2; white-space:nowrap; cursor:pointer; display:flex; align-items:center; gap:var(--space-3); }
.brand:hover{ filter:brightness(1.06); }
.logo-badge{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--radius-sm); background:var(--accent-gradient); box-shadow:var(--accent-glow); flex:none; }

.brand-word{ display:inline-flex; align-items:baseline; gap:0; background:linear-gradient(100deg, var(--music-mark) 10%, var(--accent-mark) 85%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--music-ink); }
.bw-group{ display:inline-flex; align-items:baseline; flex:none; }
.bw-slot{ width:var(--bw-pitch, 1.5em); }
.bw-big{ font-weight:900; font-size:1.15em; letter-spacing:0; -webkit-text-fill-color:transparent; }
.bw-big.bw-kr{ font-size:1.15em; font-weight:900; }
.bw-small{ font-weight:400; font-size:10px; letter-spacing:0; color:var(--text-2); -webkit-text-fill-color:var(--text-2); margin-left:1px; }

.search{ justify-self:start; display:flex; align-items:center; width:100%; height:40px; max-width:520px; padding:var(--space-1); background:var(--field); border-radius:var(--radius-pill); box-shadow:var(--shadow-inset-sm); }
.search input{ flex:1; min-width:0; height:100%; padding:0 var(--space-2); background:none; border:none; outline:none; color:var(--text); font-family:inherit; font-size:14px; letter-spacing:-0.2px; }
/* type="search"로 바꾸면 브라우저가 기본 둥근 모서리/취소 버튼을 자체적으로 그려서
   나머지 UI 톤과 어긋나 보이니 전부 없애고 우리 스타일만 남긴다. */
input[type="search"] { -webkit-appearance:none; appearance:none; border-radius:0; }
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance:none; appearance:none; }

/* 브라우저 자동완성(주소/이메일 등)이 채워질 때 나오는 기본 하늘색 배경이 뉴모피즘 톤을 깨는 것 방지 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0px 1000px var(--bg) inset;
  box-shadow: 0 0 0px 1000px var(--bg) inset;
  transition: background-color 9999s ease-in-out 0s;
}
/* .search 전체가 이미 하나의 인셋 그림자를 두르고 있는데(box-shadow:var(--shadow-inset-sm)),
   버튼에 또 자체 그림자를 주면 overflow:hidden 경계에서 중간에 잘려 어색한 선이 보였다.
   버튼은 그림자 없이 배경색으로만 구분한다. */
.search button{ flex:none; height:32px; padding:0 var(--space-4); border:none; border-radius:var(--radius-pill); background:var(--panel); color:var(--text); font-family:inherit; font-size:13px; line-height:1; font-weight:700; cursor:pointer; white-space:nowrap; box-shadow:var(--shadow-xs); transition:color .15s, box-shadow .2s; }
.search button:hover{ color:var(--music-ink); }
.search button:active{ box-shadow:var(--shadow-inset-sm); }

.user-actions{ display:flex; align-items:center; gap:var(--space-1); white-space:nowrap; }
.auth-btn{ display:inline-flex; align-items:center; height:36px; padding:0 var(--space-3); background:none; border:none; border-radius:var(--radius-pill); color:var(--text-2); font-family:inherit; font-size:14px; line-height:1; font-weight:600; letter-spacing:-0.2px; cursor:pointer; transition:background-color .15s, color .15s; }
.auth-btn:hover{ background:var(--panel-alt); color:var(--text); }

.write-btn{ display:inline-flex; align-items:center; justify-content:center; height:40px; margin-left:0; padding:0 var(--space-5); background:var(--accent-gradient); color:var(--on-accent); font-weight:700; border:none; cursor:pointer; font-size:14px; line-height:1; letter-spacing:-0.2px; border-radius:var(--radius-pill); font-family:inherit; white-space:nowrap; transition:transform .2s, box-shadow .2s; box-shadow:var(--accent-glow); }
.write-btn:hover{ background:var(--accent-gradient-hover); transform:translateY(-1px); }
.write-btn:active{ background:var(--accent-gradient-hover); transform:none; box-shadow:var(--shadow-inset); }

.shell{ max-width:1180px; margin:0 auto; padding:var(--space-8) var(--space-5) var(--space-12); display:grid; grid-template-columns:232px minmax(0, 1fr); gap:var(--space-8); flex:1; width:100%; box-sizing:border-box; }
.shell > * { min-width: 0; }

/* app.js의 initSidebarSpring()이 사이드바를 스크롤에 맞춰 아래로 따라 내려오게 하다가
   본문(main) 하단에 닿으면 멈추는데, 사이드바 자체 높이가 뷰포트보다 크면(카테고리가
   많아서) 맨 아래 항목(자작곡 등)이 화면 밖에 걸린 채로 안 내려와서, 본문을 끝까지
   스크롤해야만 겨우 보이는 문제가 있었다. 사이드바에 별도 스크롤을 넣는 대신, 모바일
   드로어 때와 같은 방향으로 그룹 간격·링크 안쪽 여백 자체를 줄여서 사이드바 전체
   높이가 웬만한 화면 높이 안에는 그냥 다 들어오게 했다. */
.sidebar{ background:var(--panel); align-self:start; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:var(--space-2) var(--space-2) var(--space-3); }
.cat-group{ margin:0; }
.cat-group:last-child{ margin-bottom:0; }
.cat-head{ display:flex; align-items:center; justify-content:space-between; padding:var(--space-3) var(--space-3) var(--space-1); font-weight:700; font-size:12px; line-height:1.4; letter-spacing:0; color:var(--muted); }
.board-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.board-list li a{ display:flex; align-items:center; height:34px; padding:0 var(--space-3); border-radius:calc(var(--radius-lg) - var(--space-2)); font-size:14px; line-height:1; font-weight:500; letter-spacing:-0.2px; color:var(--text-2); transition:background-color .15s, color .15s; }
.board-list li a:hover{ color:var(--text); background:var(--panel-alt); }
/* 이 항목은 pill 배경(--panel)을 이미 쓰고 있어서 글자에 또 background-clip 그라데이션을
   씌우면 배경끼리 충돌한다. 글자가 짧아 그라데이션 폭도 잘 안 보이므로, 대신 새
   포인트컬러(--accent)를 고정색으로 써서 톤은 맞추고 충돌은 피했다. */
.board-list li a.active{ background:var(--music-soft); color:var(--music-ink); font-weight:800; box-shadow:inset 0 0 0 1px var(--music-line); }

/* 핫게시판(위젯) 영역: 고정폭 가로 스크롤 캐러셀이었는데, 브라우저 확대/좁은 창
   등으로 카드가 다 안 들어가면 넘친 카드의 그림자가 스크롤 경계에서 잘려 보였다.
   화면 폭에 맞게 카드 크기/개수가 자동으로 줄어드는 그리드로 바꿔서 항상 그림자가
   안 잘리게 했다. */
/* auto-fit(minmax(220px,1fr))는 .shell이 넓어져도 main이 최대 1180px로 캡돼 있어서
   폭에 따라 3칸까지만 들어가는 경우가 생기고, 그러면 HOT 카드가 4개일 때 3개는 한 줄에
   붙고 1개만 다음 줄에 혼자 남는 "3+1" 배치가 된다. auto-fit이 폭 계산으로 열 개수를
   정하게 두는 대신 항상 4열로 고정해서, 화면 폭이 얼마든 절대 3+1처럼 어중간하게
   줄바꿈되지 않게 한다(카드 안 제목은 2줄 클램프+말줄임이라 좁아져도 안전하다). */
.widget-container{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--space-4); margin:0 0 var(--space-10); padding:0; }
.widget-card{ min-width:0; max-width:100%; display:flex; flex-direction:column; align-items:flex-start; background:var(--panel); padding:var(--space-5); border-radius:var(--radius-lg); cursor:pointer; transition:transform .2s, box-shadow .2s; position:relative; box-sizing:border-box; box-shadow:var(--shadow-sm); }
.widget-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.hot-badge{ display:inline-flex; align-items:center; gap:var(--space-1); color:var(--accent-ink); font-size:12px; line-height:1; font-weight:800; letter-spacing:0.04em; margin-bottom:var(--space-3); }
.widget-title{ width:100%; font-weight:700; font-size:16px; line-height:1.45; letter-spacing:-0.4px; color:var(--text); margin-bottom:var(--space-4); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:keep-all; overflow-wrap:anywhere; }
.widget-stats{ width:100%; margin-top:auto; font-size:12px; line-height:1.5; font-weight:500; color:var(--muted); display:flex; gap:var(--space-3); align-items:center; flex-wrap:wrap; font-variant-numeric:tabular-nums; }
.board-title-row{ display:flex; align-items:baseline; justify-content:space-between; margin:0 0 var(--space-4); flex-wrap:wrap; gap:var(--space-3); }
.board-title-row h1{ font-size:28px; line-height:1.25; margin:0; font-weight:800; letter-spacing:-0.8px; color:var(--text); }

.sort-btns{ display:flex; gap:var(--space-4); align-items:baseline; flex-wrap:wrap; }
.sort-btns button{ background:none; border:none; padding:var(--space-1); margin:0 calc(-1 * var(--space-1)); border-radius:var(--radius-xs); color:var(--muted); font-family:inherit; font-size:14px; line-height:1.3; font-weight:600; letter-spacing:-0.2px; cursor:pointer; white-space:nowrap; text-decoration-line:underline; text-decoration-color:transparent; text-decoration-thickness:2px; text-underline-offset:7px; transition:color .15s, text-decoration-color .15s; }
.sort-btns button.active{ color:var(--text); font-weight:800; text-decoration-color:var(--music-mark); }
.sort-btns button:hover{ color:var(--text); text-decoration-color:var(--muted-2); }

/* 게시판 태그(말머리) 뱃지 */
.tag{ display:inline-flex; align-items:center; height:20px; padding:0 var(--space-2); border-radius:var(--radius-xs); font-size:12px; line-height:1; font-weight:700; letter-spacing:0; background:var(--panel); color:var(--text-2); box-shadow:inset 0 0 0 1px var(--line); white-space:nowrap; vertical-align:middle; }
.notice-badge{ display:inline-flex; align-items:center; height:20px; padding:0 var(--space-2); border-radius:var(--radius-xs); font-size:12px; line-height:1; font-weight:700; background:var(--music); color:var(--on-accent); white-space:nowrap; margin-right:var(--space-2); vertical-align:middle; }
.dc-table tr.notice-row{ background:var(--panel-alt); }
.dc-table tr.notice-row .dc-title-link{ font-weight:800; }
.dc-table tr.notice-row .col-id{ color:var(--music-ink); font-weight:800; }

/* 야구게시판 응원팀 뱃지 (닉네임 옆) */
.team-badge{ display:inline-flex; align-items:center; height:18px; font-size:11px; line-height:1; font-weight:700; padding:0 6px; border-radius:var(--radius-xs); color:var(--team-ink, var(--on-accent)); white-space:nowrap; }
.author-wrap{ display:inline-flex; align-items:center; gap:6px; }
.kakao-mark{ display:inline-flex; align-items:center; margin-left:4px; flex:none; }

/* 관리자가 실제로 로그인해서 쓴 글/댓글에 붙는 딱지 — 닉네임이 똑같아도 이 딱지는
   서버가 저장한 is_admin_author로만 판정되므로 사칭이 불가능하다. */
.admin-post-badge{ display:inline-flex; align-items:center; height:18px; font-size:11px; line-height:1; font-weight:700; padding:0 6px; border-radius:var(--radius-xs); background:var(--admin); color:var(--on-accent); white-space:nowrap; margin-left:var(--space-1); flex:none; }
/* 유동(비로그인) 글/댓글 옆에 디시처럼 IP 앞 두 자리를 보여준다 — 닉네임이 같아도
   다른 사람일 수 있다는 걸 알려주는 용도. */
.ip-tag{ font-size:12px; color:var(--muted); font-weight:500; margin-left:var(--space-1); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* 야구게시판 팀별 탭 (FM코리아 스타일) — 앨범 평가의 싱글/EP/정규 탭도 같은 스타일을 쓴다. */
#baseballTeamTabs, #albumReleaseTabs{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-4); }
.team-tab-btn{ display:inline-flex; align-items:center; height:36px; padding:0 var(--space-4); background:var(--panel); border:none; border-radius:var(--radius-pill); color:var(--text-2); font-family:inherit; font-size:14px; line-height:1; font-weight:600; letter-spacing:-0.2px; cursor:pointer; box-shadow:var(--shadow-xs); transition:background-color .15s, color .15s, box-shadow .2s; }
.team-tab-btn:hover{ color:var(--text); background:var(--panel-alt); }
.team-tab-btn.active{ background:var(--team-color, var(--music-soft)); color:var(--team-ink, var(--music-ink)); font-weight:800; box-shadow:inset 0 0 0 1px var(--team-color, var(--music-line)); }

/* 게시판 테이블 */
.post-table-wrap{ width:100%; box-sizing:border-box; background:var(--panel); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.table-scroll { overflow-x:hidden; overflow-y:hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
/* 예전엔 min-width:650px로 고정폭을 강제해서, 사이드바 때문에 본문 폭이
   650px보다 좁아지는 화면(좁은 데스크톱 창, 태블릿 가로)에서 표 자체가
   가로 스크롤되는 문제가 있었다. table-layout:fixed로 열 폭을 %로 고정하고
   제목 칸만 화면 폭에 맞게 줄어들며 말줄임표로 잘리게 바꿨다. */
.dc-table { width:100%; border-collapse:collapse; text-align:center; table-layout:fixed; }
.dc-table th{ background:transparent; color:var(--muted); font-weight:600; padding:var(--space-4) 0 var(--space-3); font-size:12px; letter-spacing:0; border-bottom:1px solid var(--line); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dc-table tbody tr{ transition:background-color .15s; cursor:pointer; border-bottom:1px solid var(--line); }
.dc-table tbody tr:hover{ background:var(--panel-alt); }

/* 예전엔 이 공통 속성을 .dc-table td(클래스+태그, 명세도 0,1,1)에 몰아뒀는데, 그러면
   .col-id/.col-date처럼 클래스 하나만 쓰는(명세도 0,1,0) 컬럼별 재정의가 소스 순서와
   무관하게 항상 진다 — 실제로 이 버그 때문에 아래 .col-id/.col-author/.col-date/
   .col-views의 color:var(--muted)가 지금까지 한 번도 적용된 적이 없었다(전부 기본
   var(--text)로 보이고 있었음, getComputedStyle로 확인). .col-xxx와 명세도를
   똑같이 맞춰서(둘 다 클래스 1개) 이 아래에 있는 컬럼별 규칙이 정상적으로 이기게 했다. */
.col-id, .col-category, .col-title, .col-author, .col-date, .col-views, .col-likes {
  padding:var(--space-3) 0; vertical-align:middle; font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums;
}

.col-id{ width: 8%; color:var(--muted); font-size:12px; }
.col-category { width: 12%; }
/* 예전엔 td 전체(제목+뱃지)를 한 덩어리로 말줄임표 처리해서, 제목이 길면
   [댓글수]/★평점 뱃지까지 통째로 잘려나가거나 가려졌다. td를 플렉스
   컨테이너로 두고 제목 링크에만 말줄임표를 걸어서, 뱃지는 항상 온전히
   보이고 제목 쪽만 화면 폭에 맞춰 잘리게 했다. */
.col-title { width: auto; text-align:left; padding-left:14px !important; display:flex; align-items:center; white-space:normal; }
.col-author{ width: 12%; color:var(--text-2); }
.col-date{ width: 10%; color:var(--muted); font-size:12px; }
.col-views{ width: 8%; color:var(--muted); font-size:12px; }
.col-likes{ width: 8%; color:var(--muted); font-size:12px; }

/* flex:1 1 auto(성장 허용)로 두면 제목이 짧을 때 링크 박스 자체가 남는 공간을 억지로
   채우도록 늘어나서, 바로 뒤에 오는 댓글수/별점 뱃지가 실제 글자에서 멀리 떨어져
   다음 칸(글쓴이)에 붙어 보이는 문제가 있었다. flex-grow를 0으로 둬서 링크는 내용
   길이만큼만 차지하고(길 때는 flex-shrink로 줄어들며 ellipsis 처리), 뱃지가 항상
   글자 바로 옆에 붙게 했다. */
.dc-title-link{ color:var(--text); font-size:14px; font-weight:500; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:0 1 auto; }
.dc-title-link:hover{ color:var(--music-ink); text-decoration:underline; text-underline-offset:3px; }
.dc-comment-count{ color:var(--accent-ink); font-weight:700; font-size:12px; margin-left:5px; flex:0 0 auto; }
.dc-cmt-count{ color:var(--admin-ink); font-weight:700; font-size:12px; margin-left:var(--space-1); flex:0 0 auto; font-variant-numeric:tabular-nums; }
.col-title .dc-album-thumb, .col-title .notice-badge { flex:0 0 auto; }
.dc-album-thumb{ width:28px; height:28px; object-fit:cover; border-radius:var(--radius-xs); vertical-align:middle; margin-right:var(--space-2); box-shadow:var(--shadow-art); }

/* 하단 컨트롤 */
.board-footer{ margin-top:var(--space-2); padding:var(--space-2) var(--space-5) var(--space-6); display:flex; flex-direction:column; align-items:center; gap:var(--space-4); width:100%; box-sizing:border-box; }
.pagination{ display:flex; align-items:center; gap:var(--space-1); }
.page-btn{ display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 var(--space-3); border:none; border-radius:var(--radius-pill); background:transparent; color:var(--text-2); font-family:inherit; font-size:14px; line-height:1; font-weight:600; font-variant-numeric:tabular-nums; cursor:pointer; transition:background-color .15s, color .15s, box-shadow .2s; }
.page-btn:hover{ background:var(--panel-alt); color:var(--text); }
.page-btn.active{ background:var(--music-soft); color:var(--music-ink); font-weight:800; box-shadow:inset 0 0 0 1px var(--music-line); }
.page-btn:disabled{ opacity:var(--disabled-opacity); cursor:default; background:transparent; box-shadow:none; }

.bottom-controls{ width:100%; display:flex; justify-content:center; align-items:center; gap:var(--space-3); flex-wrap:wrap; box-sizing:border-box; }
.dc-search-box{ display:flex; gap:var(--space-2); }
.dc-search-box select, .dc-search-box input{ height:40px; padding:0 var(--space-4); border:none; background:var(--field); color:var(--text); border-radius:var(--radius-sm); font-family:inherit; font-size:14px; box-shadow:var(--shadow-inset-sm); }
.dc-search-box select:focus, .dc-search-box input:focus { outline:none; }

.btn-dc-search{ height:40px; background:var(--panel); color:var(--text); border:none; padding:0 var(--space-5); cursor:pointer; font-weight:700; font-size:14px; border-radius:var(--radius-pill); font-family:inherit; transition:background-color .15s, box-shadow .2s; box-shadow:var(--shadow-xs); }
.btn-dc-search:hover{ background:var(--panel-alt); }
.btn-dc-write{ height:40px; background:var(--accent-gradient); color:var(--on-accent); border:none; padding:0 var(--space-5); cursor:pointer; font-weight:700; font-size:14px; border-radius:var(--radius-pill); font-family:inherit; transition:transform .2s, box-shadow .2s; box-shadow:var(--accent-glow); }
.btn-dc-write:hover{ background:var(--accent-gradient-hover); transform:translateY(-1px); }

/* 앨범 그리드 및 뷰 영역 */
#albumGrid{ display:none; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:var(--space-6) var(--space-5); margin-top:var(--space-5); width:100%; box-sizing:border-box; }
.album-card { cursor:pointer; transition:transform 0.2s; display:flex; flex-direction:column;}
.album-card:hover{ transform:translateY(-3px); }
.album-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow-art); }
.album-card-info{ padding:var(--space-3) 2px 0; flex:1; display:flex; flex-direction:column; gap:2px; }
.album-card-title{ font-weight:800; font-size:15px; line-height:1.4; letter-spacing:-0.3px; color:var(--text); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.album-card-meta { display:flex; align-items:baseline; justify-content:space-between; gap:6px;}
.album-card-artist{ font-size:13px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.album-card-rating{ font-size:13px; color:var(--accent-ink); font-weight:800; white-space:nowrap; flex-shrink:0; font-variant-numeric:tabular-nums; }
.album-card-rating span{ font-size:11px; color:var(--muted); font-weight:500; margin-left:2px; }

#albumDetailSection{ display: none; background:var(--panel); border-radius:var(--radius-lg); padding:var(--space-8); width:100%; box-sizing:border-box; box-shadow:var(--shadow-sm); }
.ad-header{ display:flex; gap:var(--space-6); margin-bottom:var(--space-8); align-items:flex-end; }
.ad-header img{ width:176px; height:176px; border-radius:var(--radius); object-fit:cover; box-shadow:var(--shadow-art); }
.ad-info { flex:1; }
.ad-title{ font-size:30px; font-weight:900; letter-spacing:-0.8px; color:var(--text); margin-bottom:var(--space-2); line-height:1.25; word-break:keep-all; }
.ad-artist{ font-size:16px; font-weight:600; color:var(--text-2); margin-bottom:var(--space-4); }
.ad-score{ font-size:28px; line-height:1.2; font-weight:900; color:var(--accent-ink); display:flex; align-items:baseline; gap:var(--space-2); font-variant-numeric:tabular-nums; }
.ad-score span{ font-size:14px; color:var(--muted); font-weight:500; }

.ad-tracklist, .rec-tracklist{ list-style:none; margin:var(--space-4) 0 var(--space-8); padding:var(--space-2); display:flex; flex-direction:column; gap:var(--space-1); background:var(--panel); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); counter-reset:track; }
.ad-track-row, .rec-track-row{ position:relative; display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); border-radius:calc(var(--radius-lg) - var(--space-2)); counter-increment:track; transition:background-color .15s; }
.ad-track-row:last-child, .rec-track-row:last-child{ border-bottom:none; }
.ad-track-row::before{ content:counter(track, decimal-leading-zero); flex:none; width:20px; color:var(--muted); font-size:12px; line-height:1; font-weight:600; font-variant-numeric:tabular-nums; text-align:center; }
.ad-track-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; line-height:1.4; font-weight:500; color:var(--text); }
.ad-track-dur{ flex:none; font-size:12px; line-height:1.4; font-weight:500; color:var(--muted); font-variant-numeric:tabular-nums; }
.ad-track-empty{ list-style:none; padding:var(--space-4) var(--space-5); color:var(--muted); font-size:13px; background:var(--panel); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); margin:var(--space-4) 0 var(--space-8); }

/* 추천곡 게시글: 언제 올렸는지 대신 "몇 곡"인지가 더 유용한 정보라 목록의
   작성일 자리를 곡 수로 대체하고(renderPosts에서 처리), 본문도 문단 텍스트가
   아니라 스포티파이 플레이리스트 행처럼 커버+제목+아티스트로 보여준다.
   커버가 곡을 구분해주므로 앨범 트랙리스트와 달리 번호는 안 붙인다. */
.rec-track-row::before { content:none; width:0; }
.rec-track-art{ width:44px; height:44px; border-radius:var(--radius-sm); object-fit:cover; flex:none; background:var(--panel-alt); box-shadow:var(--shadow-art); }
.rec-track-art-empty { background:var(--panel-alt); }
.rec-track-comment .rec-track-art { display:none; }
.rec-track-text{ display:flex; flex-direction:column; min-width:0; flex:1; }
.rec-track-song{ font-weight:700; color:var(--text); font-size:15px; line-height:1.45; letter-spacing:-0.3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rec-track-artist{ color:var(--muted); font-size:12px; line-height:1.5; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 곡 형식이 아닌 자유 코멘트 줄은 커버가 없어 길이가 들쭉날쭉하므로 잘라내지 않고 줄바꿈을 허용한다. */
.rec-track-comment .rec-track-song { white-space:normal; font-weight:500; word-break:break-word; }
/* 유튜브 링크를 찾은 곡은 클릭하면 바로 재생되니 클릭 가능한 느낌을 준다. */
.rec-track-clickable { cursor:pointer; }
.rec-track-clickable:hover{ background:var(--panel-alt); }
.rec-track-clickable:hover .rec-track-song{ color:var(--text); }
.rec-track-playing{ background:var(--music-soft); box-shadow:inset 0 0 0 1px var(--music-line); }
.rec-track-playing .rec-track-song{ color:var(--music-ink); font-weight:800; }

/* 아직 track_art에 안 채워진 곡 — 클릭해도 재생할 게 없으니 흐리게 표시하고
   "준비중" 배지를 오른쪽 끝에 붙인다(.rec-track-row/.ad-track-row 둘 다 flex라
   margin-left:auto로 같은 자리에 정렬됨). */
.rec-track-pending { opacity:0.55; }
.rec-track-pending-badge { flex:none; margin-left:auto; font-size:11px; color:var(--muted-2); background:var(--panel-alt); padding:2px 9px; border-radius:999px; white-space:nowrap; }

/* 앨범 평가 트랙리스트: 추천곡과 같은 재생 기능(rec-track-clickable/playing)을
   쓰지만 DOM 구조가 달라서(.ad-track-name) 강조 대상만 따로 지정한다. */
.ad-track-row.rec-track-clickable:hover .ad-track-name{ color:var(--text); }
.ad-track-row.rec-track-playing .ad-track-name{ color:var(--music-ink); font-weight:800; }
/* 클릭한 곡 바로 아래에 펼쳐지는 임베드 플레이어. 글 본문에 유튜브 링크를
   붙이면 자동으로 영상이 뜨는 .yt-wrapper와 같은 스타일을 재사용한다. */
.rec-track-player-row{ padding:var(--space-2) var(--space-3) var(--space-3); background:var(--panel-alt); border-radius:calc(var(--radius-lg) - var(--space-2)); }
.rec-track-player-row .yt-wrapper { margin:0; }

/* 애플뮤직 정보가 있는 곡만 뜨는 유튜브/유튜브뮤직/애플뮤직 선택 탭. */
.rec-service-tabs{ display:inline-flex; flex-wrap:wrap; gap:var(--space-1); padding:var(--space-1); max-width:100%; margin-bottom:var(--space-3); background:var(--field); border-radius:var(--radius-pill); box-shadow:var(--shadow-inset-sm); }
.rec-service-tab{ display:inline-flex; align-items:center; height:32px; padding:0 var(--space-4); background:transparent; border:none; border-radius:var(--radius-pill); color:var(--text-2); font-family:inherit; font-size:13px; line-height:1; font-weight:600; letter-spacing:-0.2px; cursor:pointer; white-space:nowrap; transition:background-color .15s, color .15s, box-shadow .2s; }
.rec-service-tab:hover{ color:var(--text); }
.rec-service-tab.active{ background:var(--panel); color:var(--text); font-weight:800; box-shadow:var(--shadow-xs); }

.apple-player-wrap { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:4px 0; }
.apple-player-wrap audio { height:36px; max-width:100%; }
.apple-preview-note{ font-size:12px; color:var(--muted); white-space:nowrap; }
.apple-full-link{ font-size:13px; font-weight:700; color:var(--music-ink); text-decoration:none; white-space:nowrap; }
.apple-full-link:hover { text-decoration:underline; }

.review-list{ display:flex; flex-direction:column; gap:var(--space-4); margin-top:var(--space-5); }
.review-card{ background:var(--panel); padding:var(--space-5); border-radius:var(--radius-lg); cursor:pointer; transition:transform .2s, box-shadow .2s; box-shadow:var(--shadow-sm); }
.review-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.view-album-info{ display:flex; gap:var(--space-4); align-items:center; padding:var(--space-5) var(--space-6); margin-bottom:var(--space-2); border-bottom:1px solid var(--line); }
.view-album-info img{ width:88px; height:88px; border-radius:var(--radius-sm); object-fit:cover; box-shadow:var(--shadow-art); flex:none; }
.view-album-name{ font-size:17px; font-weight:800; letter-spacing:-0.3px; color:var(--text); }
.view-album-artist{ font-size:13px; color:var(--text-2); margin-top:2px; }
.view-album-rating{ font-size:14px; font-weight:800; color:var(--accent-ink); margin-top:var(--space-2); }

.rc-header{ display:flex; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-2); align-items:center; }
.rc-author{ font-size:13px; line-height:1.4; font-weight:700; color:var(--text-2); }
.rc-stars{ font-size:13px; line-height:1.4; font-weight:800; letter-spacing:1px; color:var(--accent-ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
.rc-title{ font-size:17px; line-height:1.45; font-weight:800; letter-spacing:-0.4px; color:var(--text); margin-bottom:var(--space-2); }
.rc-content{ font-size:14px; color:var(--text-2); line-height:1.7; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; word-break:keep-all; overflow-wrap:anywhere; }

#postViewSection { display: none; margin-bottom: 40px; width:100%; box-sizing:border-box; }
.view-box{ background:var(--panel); border-radius:var(--radius-lg); width:100%; box-sizing:border-box; box-shadow:var(--shadow-sm); overflow:hidden; }

.view-header{ padding:var(--space-8) var(--space-8) var(--space-5); border-bottom:1px solid var(--line); }
.view-title{ font-size:24px; font-weight:800; letter-spacing:-0.6px; color:var(--text); margin:0 0 var(--space-4) 0; line-height:1.4; word-break:keep-all; overflow-wrap:anywhere; }
.view-meta{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--muted); flex-wrap:wrap; gap:var(--space-3); font-variant-numeric:tabular-nums; }
.view-meta-left{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.view-meta-right{ display:flex; gap:var(--space-4); }
.view-content-area{ padding:var(--space-6) var(--space-8) var(--space-8); min-height:300px; font-size:16px; line-height:1.8; color:var(--text); white-space:pre-wrap; word-break:keep-all; overflow-wrap:anywhere; }
.view-content-area img{ max-width:100%; border-radius:var(--radius); margin:var(--space-3) 0; display:block; }
.view-footer{ padding:var(--space-5) var(--space-8); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-3); border-top:1px solid var(--line); }

.btn-recommend{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); height:40px; padding:0 var(--space-6); background:var(--panel); color:var(--music-ink); border:none; border-radius:var(--radius-pill); font-size:14px; line-height:1; font-weight:800; font-family:inherit; font-variant-numeric:tabular-nums; cursor:pointer; transition:background-color .15s, box-shadow .2s; box-shadow:var(--shadow-xs); }
.btn-recommend:hover{ background:var(--music-soft); }
.btn-recommend:active{ box-shadow:var(--shadow-inset-sm); }
.btn-dislike{ color:var(--admin-ink); }

.view-controls{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--space-2); }
/* the header's write button keeps a small gap from the auth links; everywhere else it sits in its own row */
.user-actions .write-btn{ margin-left:var(--space-2); }
.btn-list{ display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 var(--space-5); border:none; border-radius:var(--radius-pill); font-family:inherit; font-size:14px; line-height:1; font-weight:700; letter-spacing:-0.2px; white-space:nowrap; cursor:pointer; transition:transform .2s, box-shadow .2s, background-color .15s; background:var(--panel); color:var(--text); box-shadow:var(--shadow-xs); }
.btn-list:hover{ background:var(--panel-alt); }
.btn-admin-edit{ display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 var(--space-5); border:none; border-radius:var(--radius-pill); font-family:inherit; font-size:14px; line-height:1; font-weight:700; letter-spacing:-0.2px; white-space:nowrap; cursor:pointer; transition:transform .2s, box-shadow .2s, background-color .15s; background:var(--accent-gradient); color:var(--on-accent); box-shadow:var(--accent-glow); }
.btn-admin-edit:hover{ background:var(--accent-gradient-hover); }
.btn-admin-delete{ display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 var(--space-5); border:none; border-radius:var(--radius-pill); font-family:inherit; font-size:14px; line-height:1; font-weight:700; letter-spacing:-0.2px; white-space:nowrap; cursor:pointer; transition:transform .2s, box-shadow .2s, background-color .15s; background:var(--admin); color:var(--on-accent); box-shadow:var(--shadow-fill); }
.btn-admin-delete:hover{ background:var(--admin-hover); }

/* 글쓰기 및 모달 영역 */
#writeSection{ display: none; background:var(--panel); border-radius:var(--radius-lg); padding:0; width:100%; box-sizing:border-box; box-shadow:var(--shadow-sm); }
.write-header{ padding:var(--space-8) var(--space-8) var(--space-3); }
.write-header h2{ margin:0; font-size:22px; letter-spacing:-0.5px; color:var(--text); font-weight:800; }
.write-body{ padding:var(--space-3) var(--space-8) var(--space-6); }
.write-row{ display:flex; gap:var(--space-3); margin-bottom:var(--space-3); flex-wrap:wrap; }
.write-row select, .write-row input{ height:44px; background:var(--field); border:none; color:var(--text); padding:0 var(--space-4); border-radius:var(--radius-sm); font-size:14px; outline:none; font-family:inherit; box-sizing:border-box; box-shadow:var(--shadow-inset-sm); }
/* 말머리·작성자·비밀번호는 한 줄에 같이 두고, 제목만 항상 그 아래 줄로 뗀다.
   flex-wrap 상태에서 flex-basis:100%를 주면 이 항목부터 새 줄로 넘어간다. */
.write-row #postTitle { flex: 1 1 100%; }
/* 기본 select 대신 쓰는 커스텀 드롭다운 (펼친 목록까지 사이트 톤으로 맞추기 위함) */
.custom-select { position:relative; width:150px; }
.custom-select-trigger {
  height:44px; display:flex; align-items:center;
  background:var(--field); color:var(--text); padding:0 36px 0 var(--space-4); border-radius:var(--radius-sm);
  font-size:14px; box-shadow:var(--shadow-inset-sm); cursor:pointer; box-sizing:border-box;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%2382878F' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 16px center; background-size:10px 6px;
}
.custom-select-panel {
  display:none; position:absolute; top:calc(100% + 8px); left:0; z-index:30;
  min-width:200px; max-height:320px; overflow-y:auto; padding:var(--space-2);
  background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow-md);
}
.custom-select-group{ font-size:12px; font-weight:700; color:var(--muted); padding:var(--space-3) var(--space-3) var(--space-1); }
.custom-select-option{ padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm); font-size:14px; color:var(--text); cursor:pointer; white-space:nowrap; transition:background-color .15s; }
.custom-select-option:hover{ background:var(--panel-alt); }
.custom-select-option.selected{ background:var(--music-soft); color:var(--music-ink); font-weight:800; }
.custom-select-option.disabled{ color:var(--muted-2); cursor:not-allowed; }
.custom-select-option.disabled:hover { background:none; }
#postTag { width: 150px; }
#postTeam { width: 150px; }
#postAuthor { width: 150px; }
#postGuestPw { width: 150px; }
#postTitle { flex:1; min-width:200px;}

/* 유동 글/댓글 삭제용 비밀번호는 실제 계정이 아니라 type="password"를 쓰면 크롬이
   "비밀번호를 저장하시겠습니까?" 팝업을 띄운다 — autocomplete="off"로는 이 팝업을 못
   막는다(크롬이 의도적으로 무시함). type="text"로 바꾸고 이 클래스로 화면에만 점(•)으로
   보이게 해서, 크롬이 애초에 "비밀번호 필드"로 인식하지 못하게 한다.
   (Firefox는 -webkit-text-security를 지원하지 않아 평문으로 보일 수 있음 — 민감한
   실제 비밀번호가 아니라 감수 가능한 트레이드오프로 판단) */
.pseudo-password { -webkit-text-security: disc; text-security: disc; }

.write-toolbar{ background:transparent; padding:var(--space-2) 0; margin-bottom:var(--space-2); display:flex; gap:var(--space-2); align-items:center; flex-wrap:wrap; }
.btn-toolbar{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 var(--space-4); background:var(--panel); border:none; color:var(--text); cursor:pointer; font-family:inherit; font-size:13px; font-weight:700; border-radius:var(--radius-pill); transition:background-color .15s; box-shadow:var(--shadow-xs); }
.btn-toolbar:hover{ background:var(--panel-alt); }

#postContent{ width:100%; height:380px; background:var(--field); border:none; color:var(--text); padding:var(--space-4) var(--space-5); font-family:inherit; font-size:15px; resize:vertical; outline:none; border-radius:var(--radius-sm); line-height:1.7; box-sizing:border-box; box-shadow:var(--shadow-inset); }

.write-footer{ padding:var(--space-2) var(--space-8) var(--space-8); display:flex; justify-content:flex-end; gap:var(--space-2); }
.btn-cancel-write{ display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 var(--space-5); border:none; border-radius:var(--radius-pill); font-family:inherit; font-size:14px; line-height:1; font-weight:700; letter-spacing:-0.2px; white-space:nowrap; cursor:pointer; transition:transform .2s, box-shadow .2s, background-color .15s; height:44px; padding:0 var(--space-6); font-size:15px; background:var(--panel); color:var(--text); box-shadow:var(--shadow-xs); }
.btn-submit-write{ display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 var(--space-5); border:none; border-radius:var(--radius-pill); font-family:inherit; font-size:14px; line-height:1; font-weight:700; letter-spacing:-0.2px; white-space:nowrap; cursor:pointer; transition:transform .2s, box-shadow .2s, background-color .15s; height:44px; padding:0 var(--space-8); font-size:15px; font-weight:800; background:var(--accent-gradient); color:var(--on-accent); box-shadow:var(--accent-glow); }
.btn-submit-write:hover{ background:var(--accent-gradient-hover); transform:translateY(-1px); }

/* 마이페이지 > 설정 탭 */
.settings-panel{ display:flex; flex-direction:column; gap:var(--space-5); margin-top:var(--space-1); }
.settings-card{ background:var(--panel); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:var(--space-6); }
.settings-card h3{ margin:0 0 var(--space-4); font-size:16px; font-weight:800; color:var(--text); }
.settings-row { display:flex; gap:10px; flex-wrap:wrap; align-items:stretch; }
.settings-row-stacked { flex-direction:column; }
.settings-row input{ flex:1; min-width:180px; height:44px; background:var(--field); border:none; color:var(--text); padding:0 var(--space-4); border-radius:var(--radius-sm); font-size:14px; outline:none; font-family:inherit; box-sizing:border-box; box-shadow:var(--shadow-inset-sm); }
.btn-settings-save{ display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 var(--space-5); border:none; border-radius:var(--radius-pill); font-family:inherit; font-size:14px; line-height:1; font-weight:700; letter-spacing:-0.2px; white-space:nowrap; cursor:pointer; transition:transform .2s, box-shadow .2s, background-color .15s; height:44px; background:var(--accent-gradient); color:var(--on-accent); box-shadow:var(--accent-glow); }
.btn-settings-save:hover{ background:var(--accent-gradient-hover); }
/* 세로로 쌓인 행(비밀번호 변경)에서는 버튼이 flex-direction:column의 기본
   align-self:stretch 때문에 인풋만큼 가로로 길게 늘어나 보기 흉했다.
   자기 크기만큼만 차지하고 우측 하단에 붙도록 정렬을 바꾼다. */
.settings-row-stacked .btn-settings-save { align-self:flex-end; margin-top:2px; }
.settings-info{ font-size:13px; color:var(--text-2); line-height:1.9; }
.settings-info strong { color:var(--text); font-weight:700; }
.settings-danger-desc{ font-size:13px; color:var(--text-2); line-height:1.6; margin:0 0 var(--space-4); }
.btn-settings-danger{ display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 var(--space-5); border:none; border-radius:var(--radius-pill); font-family:inherit; font-size:14px; line-height:1; font-weight:700; letter-spacing:-0.2px; white-space:nowrap; cursor:pointer; transition:transform .2s, box-shadow .2s, background-color .15s; background:transparent; color:var(--admin-ink); box-shadow:inset 0 0 0 1px var(--admin-ink); }
.btn-settings-danger:hover{ background:var(--admin); color:var(--on-accent); box-shadow:inset 0 0 0 1px var(--admin); }

#albumSearchWrap { background:transparent; padding:4px; margin-bottom:16px; display:none; box-sizing:border-box;}
.search-result-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 20px; margin: 15px -20px 0; max-height: 380px; overflow-y: auto; padding: 20px; }
.search-item{ background:var(--panel); border:none; border-radius:var(--radius); padding:var(--space-2); cursor:pointer; transition:transform .2s, box-shadow .2s; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); }
.search-item:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.search-item img{ width:100%; aspect-ratio:1/1; border-radius:var(--radius-sm); object-fit:cover; margin-bottom:var(--space-2); box-shadow:var(--shadow-art); }
.search-item .s-title { font-size:13px; font-weight:bold; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.search-item .s-artist{ font-size:12px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

#starInputWrapper { align-items:center; gap:8px; margin-top:16px; padding-top:16px; display:none; flex-wrap:wrap;}
#starsContainer { display:flex; gap:4px; font-size:32px; cursor:pointer; touch-action:none; }
#starsContainer .star { position:relative; display:inline-block; line-height:1; user-select:none; }
#starsContainer .star-empty { color:var(--muted-2); }
#starsContainer .star-fill{ position:absolute; left:0; top:0; width:0%; overflow:hidden; white-space:nowrap; color:var(--accent-ink); }

.yt-wrapper{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin: var(--space-5) 0; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.yt-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

.site-footer{ padding:var(--space-8) var(--space-5); text-align:center; color:var(--muted); font-size:12px; line-height:1.7; margin-top:auto; background:var(--bg); }
.footer-inner { max-width:1180px; margin:0 auto; word-break:keep-all; }
.footer-inner a{ white-space:nowrap; color:var(--text-2); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.footer-inner a:hover { color:var(--text); }

/* 모바일 반응형 완벽 수정 */
@media (max-width: 840px) {
  body { overflow-x: hidden; width: 100%; }
  .shell { grid-template-columns: 1fr; padding: 0; gap: 0; width: 100%; max-width: 100%; box-sizing: border-box; margin-top: 20px; }
  .shell > * { min-width: 0; }
  main { max-width: 100%; overflow-x: hidden; }

  .header-inner { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 8px; padding: 14px; width: 100%; box-sizing: border-box; }
  .mobile-menu-btn { display: flex; }
  .brand { text-align: left; font-size: 15px; gap: 14px; flex: none; }
  .logo-badge { width: 28px; height: 28px; }
  .bw-small { font-size: 8px; }
  .user-actions { gap: 8px; justify-content: flex-end; flex-wrap: nowrap; white-space: nowrap; width: auto; box-sizing: border-box; }
  .user-actions .write-btn { height: 32px; margin-left: 0; padding: 0 12px; font-size: 13px; }
  /* post footer: controls take their own full-width row and wrap evenly instead of running off the right edge */
  .view-controls { width: 100%; justify-content: flex-start; }
  .view-controls > button { flex: 1 1 auto; }
  .auth-btn { height: 32px; padding: 0 var(--space-2); font-size: 13px; }

  #userStatus { max-width: 70px; text-align: right; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; margin-bottom: 0; }

  .search { max-width: 100%; order: 3; display: none; }

  /* 게시판 목록: 상단에 늘어놓지 않고 햄버거 버튼으로 여는 좌측 드로어로 전환.
     행마다 그림자를 따로 주면 다크모드에서 겹쳐 보이던 문제가 있었어서, PC 사이드바처럼
     드로어 패널 하나에만 그림자를 주고 그 안의 항목들은 그림자 없이 배경색으로만 구분한다.
     열릴 때 살짝 튕기는(overshoot) 애니메이션이라 끝에서 오른쪽으로 잠깐 더 밀리는데,
     그만큼 왼쪽으로 보이지 않는 여분을 미리 만들어둬서(음수 left + 여분 padding) 틈이
     드러나지 않게 한다. 별도 배경 박스를 덧대는 대신 이 박스 자체를 왼쪽으로 늘린 것.
     OVERSHOOT_BUFFER = 40px, 아래 left/padding-left/min-width/max-width가 전부 이 값만큼
     보정되어 있다(보이는 폭은 그대로 유지). */
  .sidebar {
    position: fixed;
    top: 0;
    left: -40px;
    height: 100vh;
    width: auto;
    min-width: 230px;
    max-width: calc(78% + 40px);
    background: var(--panel);
    box-shadow: none;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    padding: calc(16px + env(safe-area-inset-top)) 16px 16px 56px;
    box-sizing: border-box;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 200;
    transform: translateX(-100%);
    /* 닫힐 때는 반동이 화면 밖(더 왼쪽)에서 일어나 안 보이니, 대신 시작 지점에서
       살짝 튕겨 나갔다가 닫히는 ease-in-back 커브를 써서 닫힐 때도 반동이 보이게 한다. */
    transition: transform 0.45s cubic-bezier(0.36, 0, 0.66, -0.25);
  }
  .sidebar.open {
    transform: translateX(0);
    transition: transform 0.45s cubic-bezier(0.3, 1.25, 0.6, 1);
  }
  .sidebar::-webkit-scrollbar { display: none; }

  /* 카테고리 그룹(5개)·링크(11개)가 다 펼쳐지면 세로 여백이 쌓여서 화면이 작은 폰에서는
     마지막 그룹("자작곡")이 화면 밖으로 밀려 잘렸다. 그룹 간격/링크 안쪽 여백을 줄여서
     전체 목록이 한 화면 안에 들어오도록 했다(폰트 크기는 거의 그대로 둬서 읽기엔 지장 없음). */
  .cat-group { display: block; margin-bottom: 10px; }
  .cat-group:last-child { margin-bottom: 0; }
  .cat-head { display: block; padding: 4px 10px 4px; font-weight: 700; font-size: 13px; color: var(--muted); }
  .board-list { display: block; padding: 0; margin: 0; }
  .board-list li { list-style: none; }
  .board-list li a {
    margin: 1px 0;
    height: auto;
    padding: 10px 14px;
    font-size: 14px;
    background: transparent;
    box-shadow: none;
    border-radius: var(--radius-sm);
    display: block;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .board-list li a.active {
    background: var(--music-soft);
    color: var(--music-ink);
    font-weight: 800;
    box-shadow: inset 0 0 0 1px var(--music-line);
  }

  /* 로그인/회원가입/마이페이지 버튼을 JS(relocateAuthButtons)가 여기로 옮겨 놓는다.
     비어있으면(로그아웃 상태에서도 로그인/회원가입 버튼 자체는 항상 존재하니 실제로
     완전히 비는 일은 없지만) 안전하게 숨긴다. */
  .sidebar-auth-slot:empty { display: none; }
  .sidebar-auth-slot {
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }
  .sidebar-auth-slot .auth-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    height: auto;
    margin: 2px 0;
    padding: 12px 14px;
    font-size: 14px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
  }
  .sidebar-auth-slot .auth-btn:hover { color: var(--text); background: var(--panel-alt); }

  /* 아래 카드(핫게시판/게시글 목록)는 모서리가 26px로 큼직하게 둥글어서, 위에 놓인
     제목줄을 카드와 똑같이 좌우 12px에 맞추면 카드의 둥근 모서리 때문에 카드 쪽
     시작선이 눈에는 더 안쪽으로 보여 제목이 오히려 삐져나온 것처럼 보인다.
     좌우만 살짝(8px) 더 안쪽으로 넣어 둥근 모서리와 시각적으로 맞아떨어지게 한다. */
  .board-title-row { padding: 12px 20px; margin: 0; width: 100%; box-sizing: border-box; }

  /* 핫게시판: 가로 스크롤 캐러셀/그리드 대신 전체 게시판 목록처럼 세로 목록 +
     하나의 통짜 블럭으로. 카드마다 그림자를 따로 주면 다크모드에서 겹쳐 보이던
     문제가 있었어서, post-table-wrap과 같은 패턴(바깥 블럭 하나에만 그림자,
     안쪽 항목은 구분선으로만 분리)을 그대로 적용한다. */
  .widget-container {
    margin: 0 12px 20px;
    padding: 0;
    width: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    gap: 0;
    scroll-snap-type: none;
  }
  /* 카드 내부(뱃지/제목/통계)도 3줄로 쌓이던 걸 일반 게시물 행처럼 한 줄로
     눕혀서 두께를 게시물 목록 행과 동일하게 맞춘다. */
  .widget-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    flex: none;
    scroll-snap-align: none;
    box-sizing: border-box;
    padding: 14px 12px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--line);
    line-height: 1.2;
  }
  .widget-card:last-child { border-bottom: none; }
  .widget-card:hover { transform: none; background: var(--panel-alt); }
  .hot-badge { flex: none; margin-bottom: 0; }
  .widget-title {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    display: block;
    -webkit-line-clamp: unset;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    margin-bottom: 0;
  }
  .widget-stats { width: auto; margin-top: 0; flex: none; font-size: 12px; gap: 6px; white-space: nowrap; }
  .widget-stats .author-wrap { display: none; }

  /* 다른 목록 블럭(widget-container, post-table-wrap)과 똑같이 화면 가장자리에서
     12px 안쪽에서 시작하도록 맞춘다 — 예전엔 좌우 여백이 없어서 이 탭 줄과
     앨범 평가 검색창만 다른 블럭들보다 왼쪽으로 더 쏠려 보였다. */
  #baseballTeamTabs, #albumReleaseTabs { gap: 8px; margin: 0 12px 14px; }
  .team-tab-btn { height: 32px; padding: 0 14px; font-size: 13px; }
  .team-badge { height: 16px; font-size: 10px; padding: 0 5px; margin-left: 4px; }

  /* 앨범 평가 헤더(제목+정렬버튼+검색창)도 같은 이유로 좌우 12px을 준다.
     안쪽 제목줄(.board-title-row)은 기본적으로 자체 12px padding을 갖고 있어서
     여기에 그대로 두면 24px로 이중 들여쓰기가 되므로, 이 헤더 안에서만 0으로
     되돌려 검색창과 같은 시작선에 맞춘다. */
  #albumBoardHeader { margin: 0 12px 16px; }
  #albumBoardHeader .board-title-row { padding: 0; }

  .post-table-wrap { margin: 0 12px 28px; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); background:var(--panel); width: auto; box-sizing: border-box; }
  .view-box, #writeSection, #albumDetailSection { margin: 0 12px 28px; width: auto; }
  #albumBoardFooter { margin-bottom: 28px; }
  .table-scroll { overflow-x: visible; overflow-y: visible; border-radius: 0; }
  .dc-table { display: block; min-width: 0; border: none; width: 100%; box-sizing: border-box; }
  .dc-table thead { display: none; }
  .dc-table tbody { display: block; width: 100%; box-sizing: border-box; }

  /* 데스크탑 쪽과 같은 이유로, 컬럼별 재정의와 명세도를 맞추기 위해 .dc-table td가
     아니라 .col-xxx를 전부 나열한 선택자에 공통 리셋을 건다. */
  .col-id, .col-category, .col-title, .col-author, .col-date, .col-views, .col-likes {
    width: auto !important; padding: 0; border: none; text-align: left; line-height: 1.2;
  }

  /* 카드별로 그림자를 따로 주면 다크모드에서 인접한 행끼리 그림자가 겹쳐 경계가 탁하게 보인다.
     그래서 행 하나하나가 아니라 post-table-wrap 전체를 데스크탑처럼 하나의 통짜 블럭으로 두고,
     행은 그 안에서 옅은 구분선으로만 나눈다. */
  /* 1행=말머리+제목, 2행=날짜·조회·추천. 2행은 왼쪽(2열)을 비워둬서 그 1fr 여백이
     날짜/조회/추천(3~5열)을 행 오른쪽 끝으로 밀어내게 한다 — 카드 우측 하단에
     작게 붙는 형태. */
  .dc-table tr {
      display: grid;
      grid-template-columns: minmax(30px, auto) 1fr auto auto auto;
      align-items: center;
      column-gap: 8px;
      row-gap: 2px;
      padding: 11px 8px;
      background: transparent;
      border-radius: 0;
      border-bottom: 1px solid var(--line);
      margin: 0;
      width: 100%;
      box-sizing: border-box;
      box-shadow: none;
  }
  .dc-table tbody tr:last-child { border-bottom: none; }
  .dc-table tr:hover { background: var(--panel-alt); }
  /* 공지 등으로 배경이 칠해진 첫/마지막 행이 통짜 블럭의 둥근 모서리 밖으로 각지게 삐져나오지 않게 맞춰준다. */
  .dc-table tbody tr:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .dc-table tbody tr:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  /* 카드 자체에 여백을 주면 카드 테두리의 뉴모피즘 그림자(밝은 방향 그림자) 때문에
     빈 배경이 살짝 밝은 띠처럼 도드라져 보인다 — 그래서 카드가 아니라 첫/마지막 행
     "안쪽"에서만 여백을 늘려, 카드 테두리는 그대로 두고 첫 행이 테두리에 바로
     붙어 보이던 문제만 해결한다. */
  .dc-table tbody tr:first-child { padding-top: 19px; }
  .dc-table tbody tr:last-child { padding-bottom: 19px; }

  .col-id { display: none; }
  .col-author { display: none; } /* 한 줄로 압축하기 위해 모바일에서는 작성자 숨김 */

  /* 게시판 이름이 거의 다 2글자(33px 안팎)라, 열 최소폭을 그 폭에 딱 맞춰(35px)
     태그가 열을 거의 다 채우게 했다. "자작곡"처럼 3글자라 35px를 넘는 행은 그
     행만 열이 자동으로 조금 더 늘어난다(행마다 독립된 그리드라 다른 행 정렬에는
     영향 없음). 가운데 정렬이라 태그 좌우 여백도 항상 최소로 고르게 남는다. */
  .col-category { grid-column: 1; grid-row: 1; text-align: center; }
  /* 2행(날짜·조회·추천)만 3~5열을 쓰고 1행은 그 자리가 비어있으니, 제목을 2열부터
     끝(5열)까지 넓혀서 1행에서 그 남는 폭까지 다 쓰게 한다 — 서로 다른 행이라
     2행의 날짜·조회·추천과는 겹치지 않는다. */
  .col-title { grid-column: 2 / -1; grid-row: 1; min-width: 0; font-size: 13.5px; font-weight: 600; padding-left: 0 !important; overflow: hidden; }

  .col-category .tag { height: 18px; font-size: 11px; padding: 0 6px; }
  .col-title .notice-badge { height: 18px; font-size: 11px; padding: 0 6px; }
  .col-title .dc-cmt-count { font-size: 11px; }
  .col-title .dc-comment-count { font-size: 10px; }

  /* 1행=말머리+제목, 2행=날짜·조회·추천 한 줄. 1열(말머리)~2열(제목)은 2행에서
     비워두고 그 1fr 여백이 3~5열(날짜·조회·추천)을 카드 오른쪽 끝으로 밀어낸다. */
  .col-date, .col-views, .col-likes { font-size: 11px; color: var(--muted); white-space: nowrap; grid-row: 2; }
  .col-date { grid-column: 3; }
  .col-views { grid-column: 4; }
  .col-likes { grid-column: 5; }
  .col-date::before { content: ''; }
  .col-views::before { content: '· 조회 '; color: var(--muted); }
  .col-likes::before { content: '· 추천 '; color: var(--muted); }
  .col-likes { color: var(--admin-ink); font-weight: bold; }

  .board-footer { padding: 20px; margin-top: 0; width: 100%; box-sizing: border-box; }

  .bottom-controls { flex-direction: column; gap: 12px; width: 100%; box-sizing: border-box; }
  .dc-search-box { width: 100%; display: flex; gap: 8px; box-sizing: border-box; }
  .dc-search-box select { width: 30%; }
  .dc-search-box input { flex: 1; min-width: 0; box-sizing: border-box; }
  .btn-dc-write { width: 100%; height: 48px; padding: 0 var(--space-4); border-radius: var(--radius-pill); font-size: 15px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }

  #albumGrid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; padding: 20px; width: 100%; box-sizing: border-box;}
  .ad-header { flex-direction: column; align-items: center; text-align: center; gap: 16px; width: 100%; box-sizing: border-box;}
  .ad-header img { width: 160px; height: 160px; }
  #albumDetailSection { padding: 20px; }
  .view-header, .view-content-area, .view-footer, .write-header, .write-body, .write-footer { padding: 16px; width: 100%; box-sizing: border-box; }
  .modal-content { width: 90%; padding: 20px; box-sizing: border-box; }
}

/* 아주 좁은 화면(작은 폰)에서 한층 더 촘촘하게 */
@media (max-width: 380px) {
  .widget-container { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
}

.modal{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(15,18,24,0.5); justify-content:center; align-items:center; z-index:100; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.modal-content{ background:var(--panel); width:90%; padding:var(--space-8); border-radius:var(--radius-lg); box-sizing:border-box; box-shadow:var(--shadow-md); }
.modal-content.small { max-width:350px; }
.modal-content h2{ margin-top:0; font-size:20px; font-weight:800; letter-spacing:-0.4px; color:var(--text); margin-bottom:var(--space-5); }
.modal-content input[type="email"], .modal-content input[type="password"], .modal-content input[type="text"]{ width:100%; height:44px; background:var(--field); border:none; color:var(--text); padding:0 var(--space-4); margin-bottom:var(--space-3); font-family:inherit; border-radius:var(--radius-sm); font-size:14px; outline:none; box-sizing:border-box; box-shadow:var(--shadow-inset-sm); }
.modal-btns{ display:flex; justify-content:flex-end; gap:var(--space-2); margin-top:var(--space-4); }
.modal-btns button{ height:40px; border:none; padding:0 var(--space-5); cursor:pointer; font-weight:700; font-family:inherit; border-radius:var(--radius-pill); font-size:14px; transition:filter .2s, box-shadow .2s; box-shadow:var(--shadow-xs); }

.kakao-btn{ width:100%; height:48px; padding:0 var(--space-4); border:none; border-radius:var(--radius-pill); background:#FEE500; color:#191919; font-weight:700; font-size:15px; font-family:inherit; cursor:pointer; box-shadow:var(--shadow-fill); transition:filter .2s, box-shadow .2s; }
.kakao-btn:active{ box-shadow:var(--shadow-inset-sm); }
/* Sign in with Apple (심사 지침 4.8). 다크 배경에선 흰 버튼을 쓰라는 Apple 가이드에 맞춰 아래 미디어쿼리에서 반전. */
.apple-btn{ width:100%; height:48px; margin-top:var(--space-2); padding:0 var(--space-4); border:none; border-radius:var(--radius-pill); background:var(--apple-fill); color:var(--apple-ink); font-weight:700; font-size:15px; font-family:inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; box-shadow:var(--shadow-fill); transition:filter .2s, box-shadow .2s; }
.apple-btn:active{ box-shadow:var(--shadow-inset-sm); }
/* 게시글 신고/차단 (심사 지침 1.2). 댓글의 .ci-actions 버튼과 같은 톤. */
.mod-actions button{ background:none; border:none; color:var(--muted); font-size:12px; cursor:pointer; padding:0; margin-left:var(--space-3); font-family:inherit; font-weight:700; }
.mod-actions button:hover{ color:var(--admin-ink); text-decoration:underline; }
.oauth-divider{ display:flex; align-items:center; gap:10px; margin:16px 0; color:var(--muted); font-size:12px;}
.oauth-divider::before, .oauth-divider::after{ content:''; flex:1; height:1px; background:var(--line); }

/* 댓글 및 대댓글 디자인 */
.comment-section{ background:var(--bg); width:100%; box-sizing:border-box; padding:var(--space-2) 0 0; }
.comment-count{ font-size:15px; font-weight:800; padding:var(--space-5) var(--space-8) var(--space-3); color:var(--text); }
.comment-list{ list-style:none; margin:0; padding:0 var(--space-8); width:100%; box-sizing:border-box; display:flex; flex-direction:column; gap:var(--space-3); }
.comment-item{ position:relative; padding:var(--space-4) var(--space-5); display:flex; flex-direction:column; gap:var(--space-2); box-sizing:border-box; background:var(--panel); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
/* 들여쓰기 폭은 답글 깊이(depth)에 따라 app.js에서 인라인으로 매긴다(margin-left). */
.comment-item.reply{ box-shadow:var(--shadow-xs); }
.ci-meta{ display:flex; align-items:center; gap:var(--space-2); font-size:13px; line-height:1.4; flex-wrap:wrap; }
.ci-author{ display:inline-flex; align-items:center; font-weight:700; color:var(--text); }
.ci-op-badge{ display:inline-flex; align-items:center; height:20px; padding:0 var(--space-2); border-radius:var(--radius-xs); background:var(--accent-soft); color:var(--accent-ink); font-size:12px; line-height:1; font-weight:700; margin-left:var(--space-2); }
.ci-date{ color:var(--muted); font-size:12px; font-weight:500; font-variant-numeric:tabular-nums; }
.ci-content{ font-size:14px; color:var(--text); line-height:1.6; white-space:pre-wrap; word-break:keep-all; overflow-wrap:anywhere; }
.ci-actions button{ background:none; border:none; color:var(--muted); font-size:12px; cursor:pointer; padding:0; margin-right:var(--space-3); font-family:inherit; font-weight:700; text-underline-offset:3px; transition:color .15s; }
.ci-actions button:hover{ color:var(--text); text-decoration:underline; }

.comment-write{ padding:var(--space-5) var(--space-8) var(--space-8); box-sizing:border-box; width:100%; }
.cw-author{ margin-bottom:var(--space-2); display:flex; gap:var(--space-2); flex-wrap:wrap; }
.cw-author input{ height:40px; background:var(--field); border:none; color:var(--text); padding:0 var(--space-3); border-radius:var(--radius-sm); outline:none; font-size:13px; width:130px; font-family:inherit; box-shadow:var(--shadow-inset-sm); }
.cw-input{ display:flex; gap:var(--space-2); align-items:flex-end; box-sizing:border-box; width:100%; }
.cw-input textarea{ flex:1; background:var(--field); border:none; color:var(--text); padding:var(--space-3) var(--space-4); border-radius:var(--radius-sm); outline:none; font-size:14px; line-height:1.6; resize:none; height:76px; font-family:inherit; box-sizing:border-box; min-width:0; box-shadow:var(--shadow-inset-sm); }
.cw-input button{ height:44px; background:var(--accent-gradient); color:var(--on-accent); border:none; font-weight:800; font-size:14px; padding:0 var(--space-6); border-radius:var(--radius-pill); cursor:pointer; transition:transform .2s, box-shadow .2s; font-family:inherit; white-space:nowrap; box-shadow:var(--accent-glow); }
.cw-input button:hover{ background:var(--accent-gradient-hover); }

.reply-write-form{ margin-top:var(--space-3); padding:var(--space-4); background:var(--field); border-radius:var(--radius-sm); display:none; box-sizing:border-box; width:100%; box-shadow:var(--shadow-inset-sm); }

/* ---------- DULI refresh additions ---------- */
.hot-badge::before{ content:""; flex:none; width:15px; height:12px; background:currentColor; -webkit-mask:var(--eq-mask) left center/contain no-repeat; mask:var(--eq-mask) left center/contain no-repeat; }
.search::before{ content:""; flex:none; width:16px; height:16px; margin:0 var(--space-1) 0 var(--space-3); background:var(--muted); -webkit-mask:var(--search-mask) center/contain no-repeat; mask:var(--search-mask) center/contain no-repeat; }
.search input::placeholder, .dc-search-box input::placeholder, .write-row input::placeholder, #postContent::placeholder, .cw-input textarea::placeholder, .cw-author input::placeholder, .settings-row input::placeholder, .modal-content input::placeholder{ color:var(--muted); opacity:1; }
.search:has(input:focus-visible){ outline:2px solid var(--focus); outline-offset:2px; }
@supports selector(:has(*)){ .search input:focus-visible{ outline:none; } }
.search button:focus-visible{ outline-offset:0; }
.rec-service-tab:focus-visible{ outline-offset:-2px; }
.ci-date::before{ content:"·"; content:"·" / ""; margin-right:var(--space-2); color:var(--muted); }
.ad-track-row.rec-track-playing .ad-track-dur{ color:var(--music-ink); }
.ad-track-row.rec-track-playing::before, .rec-track-row.rec-track-playing::after{ content:""; flex:none; width:20px; height:14px; background:var(--music-ink); -webkit-mask:var(--eq-mask) center/contain no-repeat; mask:var(--eq-mask) center/contain no-repeat; }
.rec-track-row.rec-track-playing::after{ height:16px; margin-right:var(--space-1); }
.pagination .page-btn:first-child, .pagination .page-btn:last-child{ font-size:20px; font-weight:500; padding-bottom:2px; }
.dc-table tbody tr:last-child{ border-bottom:none; }

@media (forced-colors: active){
  .brand-word, .bw-big, .bw-big.bw-kr, .bw-small{ background:none; color:CanvasText; -webkit-text-fill-color:CanvasText; }
  .hot-badge::before, .search::before, .ad-track-row.rec-track-playing::before, .rec-track-row.rec-track-playing::after{ forced-color-adjust:none; background:CanvasText; }
  .team-tab-btn.active, .board-list li a.active, .page-btn.active, .rec-service-tab.active, .rec-track-playing{ forced-color-adjust:none; background:SelectedItem; color:SelectedItemText; }
  .sidebar, .widget-card, .review-card, .comment-item, .ad-tracklist, .rec-tracklist, .search, .post-table-wrap, .view-box, .modal-content{ outline:1px solid CanvasText; outline-offset:-1px; }
}
/* rec track covers live inside .view-content-area, whose img rule adds a 12px block margin: cancel it */
.view-content-area .rec-track-art{ margin:0; border-radius:var(--radius-sm); }
/* sidebar: a clear break between groups, the head hugging its own links */
.cat-group + .cat-group{ margin-top:var(--space-2); }
/* an empty/failed tracklist message sits inside the tray itself: no second tray */
.ad-tracklist .ad-track-empty{ margin:0; padding:var(--space-3) var(--space-4); background:transparent; box-shadow:none; border-radius:0; }
.ad-info .write-btn{ margin:var(--space-4) 0 0; }

/* Mobile overrides for the comment area. They sit here, after the comment rules above,
   so they win the cascade (the main 840px block comes earlier in the file). */
@media (max-width: 840px) {
  .comment-count, .comment-write { padding-left: 16px; padding-right: 16px; }
  .comment-list { padding: 0 16px; }
  /* the 3-line placeholder was clipped in a 76px box squeezed beside the button:
     stack them — a taller full-width field, the 등록 button right-aligned underneath */
  .cw-input { flex-direction: column; align-items: stretch; }
  .cw-input textarea { flex: none; height: auto; min-height: 104px; word-break: keep-all; }
  .cw-input button { align-self: flex-end; }
}