/* ===================================================================
   search_artist.css — 검색 결과(sub/search.php) · 아티스트 페이지(sub/track_view.php)
   2026-11-11 작업 05 B-6 (작업 03 요청 21, 시안 A — tools/mockups/search-artist.html). 그리는 코드 inc/edm_sa.lib.php, 움직임 sub/js/search_artist.js
   - 곡 줄은 곡 목록 표(tracklist.css · tracklist.js) 그대로예요. 여기서는 묶음(.sa-list) · 카드 칸(.sa-grid의 .sa-tc)만 꾸며요.
   - 폭은 본문 칸(컨테이너 sap) 기준이에요: 왼쪽 메뉴가 있든 없든 같은 규칙 — 620px 아래 휴대폰 모양, 960px부터 두 칸(아티스트), 900px부터 두 칸(검색 맨 위).
   - 색은 --sa-* 변수로만 칠해요. 다크 = 지금 사이트 다크 값, 화이트 = 맨 아래에서 theme-light.css의 --lt-*로 바꿔요
     (다크 다시 만들기 도구 tools/dark-v2/build.js가 그 화이트 묶음을 새 다크로 옮겨요 — 새 다크 색을 여기에 직접 넣지 않아요).
   - 화면 높이(vh)에 맞춰 늘어나는 칸은 없어요(휴대폰 문서 스크롤 EDMDoc).
=================================================================== */
.sa-page{
  container:sap / inline-size;
  --sa-card:#141417; --sa-line:#26262b; --sa-div:#1f1f23; --sa-sub:#101012; --sa-fill:#1c1c1f; --sa-fill-2:#2a2a2f;
  --sa-t1:#ededed; --sa-t2:#bdbdbd; --sa-t3:#8d8d8d;
  --sa-ac:#ff0050; --sa-ac-t:#ff3d74; --sa-ac-soft:rgba(255,0,80,.10); --sa-on-ac:#fff;
  --sa-ink:#fff; --sa-on-ink:#111;
  --sa-shadow:0 8px 24px rgba(0,0,0,.45);
  color:var(--sa-t2); font-size:14px; line-height:1.5; min-width:0;
}
.sa-page a{color:inherit; text-decoration:none}
.sa-page img{display:block; max-width:100%}
.sa-page p{word-break:normal; overflow-wrap:anywhere}
.sa-page mark{background:none; color:var(--sa-ac-t); font-weight:900}
.sa-ic{width:1em; height:1em; flex:none; display:inline-block; vertical-align:-.14em}

/* ---------------- 공통 조각 ---------------- */
.sa-card{background:var(--sa-card); border:1px solid var(--sa-line); border-radius:16px}
.sa-sec{margin:26px 0 0; min-width:0}
.sa-sec-h{display:flex; align-items:baseline; gap:8px; margin:0 0 12px; min-width:0}
.sa-sec-h h2{flex:none; margin:0; color:var(--sa-t1); font-family:inherit; font-size:19px; font-weight:850; letter-spacing:-.3px; line-height:1.3}
.sa-sec-n{min-width:0; color:var(--sa-t3); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sa-page a.sa-more{margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:2px; color:var(--sa-t3); font-size:13px; font-weight:700; white-space:nowrap}
.sa-page a.sa-more:hover{color:var(--sa-t1)}
.sa-chip{display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 8px; border-radius:7px; background:var(--sa-fill); color:var(--sa-t2); font-size:11.5px; font-weight:700; line-height:1; white-space:nowrap; font-variant-numeric:tabular-nums}
.sa-chip i{font-style:normal; opacity:.7; font-weight:600}
.sa-chip .tl-svg{font-size:10px}
.sa-chip.g{background:hsla(var(--gh,330),var(--gs,60%),50%,.14); color:hsl(var(--gh,330),72%,72%)}
.sa-chip.k[style]{color:hsl(var(--kh),80%,72%); background:hsla(var(--kh),70%,55%,.18)}
.sa-kind{display:inline-block; margin-top:6px; padding:2px 9px; border-radius:99px; background:var(--sa-ink); color:var(--sa-on-ink); font-size:12px; font-style:normal; font-weight:800; line-height:1.5}
.sa-btn,.sa-page a.sa-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; height:40px; padding:0 16px; border-radius:99px; box-sizing:border-box;
  border:1px solid var(--sa-line); background:var(--sa-card); color:var(--sa-t1); font-family:inherit; font-size:14px; font-weight:800; line-height:1; white-space:nowrap; cursor:pointer; touch-action:manipulation;
}
.sa-btn:hover{border-color:var(--sa-t3)}
.sa-btn .tl-svg,.sa-btn .sa-ic{font-size:16px}
.sa-btn.pri,.sa-page a.sa-btn.pri{background:var(--sa-ac); border-color:var(--sa-ac); color:var(--sa-on-ac)}
.sa-btn.pri:hover{filter:brightness(1.08)}
.sa-btn.ic{width:40px; padding:0}
.sa-btn.ic .tl-svg,.sa-btn.ic .sa-ic{font-size:19px}
.sa-btn.sm,.sa-page a.sa-btn.sm{height:34px; padding:0 12px; font-size:13px}
.sa-btn:disabled{opacity:.6; cursor:progress}
.sa-btn[aria-pressed="true"]{border-color:var(--cue,var(--sa-ac)); color:var(--cue,var(--sa-ac-t))}
.sa-btn:focus-visible,.sa-tabs a:focus-visible,.sa-play:focus-visible{outline:none; box-shadow:var(--tl-focus)}
.sa-empty{padding:28px 18px; border:1px dashed var(--sa-line); border-radius:14px; color:var(--sa-t3); font-size:14px; text-align:center}
.sa-empty b{color:var(--sa-t1); font-weight:800}
.sa-empty.sm{padding:16px 18px; text-align:left; font-size:13.5px}
.sa-hint{display:flex; align-items:flex-start; gap:6px; margin:10px 0 0; color:var(--sa-t3); font-size:13px}
.sa-hint .sa-ic{margin-top:.2em}
.sa-also{margin:22px 0 0; font-size:13.5px; font-weight:700}
.sa-page .sa-also a{display:inline-flex; align-items:center; gap:4px; color:var(--sa-t2)}
.sa-page .sa-also a:hover{color:var(--sa-t1)}
.sa-tips{margin:16px 0 0; color:var(--sa-t3); font-size:13.5px}
.sa-tips-ex{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.sa-page .sa-tips-ex a{display:inline-flex; align-items:center; height:32px; padding:0 14px; border-radius:99px; border:1px solid var(--sa-line); background:var(--sa-card); color:var(--sa-t2); font-weight:700}
.sa-page .sa-tips-ex a:hover{color:var(--sa-t1); border-color:var(--sa-t3)}

/* 탭 줄 */
.sa-tabs{display:flex; gap:6px; margin:14px 0 0; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.sa-tabs::-webkit-scrollbar{display:none}
.sa-page .sa-tabs a{flex:none; display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; border-radius:99px; border:1px solid var(--sa-line); background:var(--sa-card); color:var(--sa-t2); font-size:13.5px; font-weight:700; white-space:nowrap}
.sa-tabs a i{font-style:normal; color:var(--sa-t3); font-weight:600; font-variant-numeric:tabular-nums}
.sa-page .sa-tabs a:hover{color:var(--sa-t1)}
.sa-page .sa-tabs a.on{background:var(--sa-ink); border-color:var(--sa-ink); color:var(--sa-on-ink)}
.sa-tabs a.on i{color:inherit; opacity:.7}
.sa-tabs a.zero{opacity:.45}

/* 디깅 모드 단추 · 도구 줄 (곡 목록 머리와 같은 단추) */
.sa-tools{margin:14px 0 12px}
.sa-pcmode{margin-left:auto}
.sa-abar .sa-pcmode{margin-left:0}
.sa-mtools{margin-left:auto}

/* ---------------- 곡 묶음: 표 하나 안의 여러 묶음 ---------------- */
/* 표 바탕 · 테두리(화이트의 흰 카드)는 없애고, 묶음(.sa-list)마다 카드로 */
.sa-page .bp-table.sa-tl,[data-theme="light"] .sa-page .bp-table.sa-tl{background:transparent; border:0; border-radius:0; box-shadow:none; overflow:visible}
.sa-tl .tl-head{display:none !important}
.sa-list{background:var(--sa-card); border:1px solid var(--sa-line); border-radius:16px; overflow:hidden}
.sa-tl .tl-body > .sa-sec:first-child,.sa-main > .sa-sec:first-child{margin-top:22px}
/* 방금 누른 곡 줄: 순위 칸에 작은 표시 */
.sa-tl .tl-row.sa-now-pick .tl-c-rank{color:var(--sa-ac-t)}
.sa-tl .tl-row.sa-pick-extra{border-top:1px dashed var(--sa-line)}

/* 카드 칸: 곡 줄(.tl-row)을 카드 모양으로. 디깅 플레이어는 누른 카드가 있는 줄 바로 아래 한 줄 전체 (dense라 뒤 카드가 빈칸을 채워요) */
.sa-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 12px; grid-auto-flow:row dense}
.sa-grid.sa-grid-mix{grid-template-columns:repeat(2,minmax(0,1fr))}
.sa-grid > .tl-dig{grid-column:1 / -1; border:1px solid var(--sa-line); border-radius:14px; overflow:hidden}
.sa-grid > .tl-dig:not(.open){border-color:transparent}
.sa-tl .tl-body .sa-grid .tl-row.sa-tc,
[data-theme="light"] .sa-tl .tl-body .sa-grid .tl-row.sa-tc{
  position:relative; display:flex; flex-direction:column; align-items:stretch; gap:0; min-width:0; min-height:0; padding:0; border:0; background:transparent; box-shadow:none;
}
.sa-tl .tl-body .sa-grid .tl-row.sa-tc::after{display:none}
.sa-tl .sa-tc > .tl-c-rank,.sa-tl .sa-tc > .tl-c-dj,.sa-tl .sa-tc > .tl-c-plays,.sa-tl .sa-tc > .tl-c-likes,.sa-tl .sa-tc > .tl-c-date,.sa-tl .sa-tc > .tl-c-act,
.sa-tl .sa-tc .tl-l3,.sa-tl .sa-tc .tl-artist{display:none !important}
.sa-tl .sa-tc .tl-c-cover{width:100%}
.sa-tl .sa-tc .tl-cover{width:100%; height:auto; aspect-ratio:1; border-radius:10px; box-shadow:var(--sa-shadow)}
.sa-tl .sa-tc .tl-cover img{width:100%; height:100%; border-radius:10px}
.sa-tl .sa-tc .tl-cover-ic{font-size:34px}
.sa-tl .sa-tc .tl-eq{padding-bottom:16px; gap:4px}
.sa-tl .sa-tc .tl-eq i{width:5px; height:26px}
.sa-tl .tl-body .sa-tc .tl-c-main{padding:7px 0 0; min-width:0}
.sa-tl .sa-tc .tl-l1{display:block}
.sa-tl .sa-tc .tl-title{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; overflow:hidden; font-size:12.5px; font-weight:700; line-height:1.3; word-break:normal; overflow-wrap:anywhere}
.sa-tl .sa-tc .tl-pro{display:inline-block; margin-top:3px}
.sa-tl .tl-body .sa-tc .tl-l2{display:block; margin-top:2px; font-size:11.5px}
.sa-tl .tl-body .sa-tc .tl-l2 .tl-meta{display:flex; flex-wrap:wrap; gap:0 6px; max-width:100%; font-size:11.5px; white-space:normal}
.sa-tl .tl-body .sa-tc .tl-meta > span{display:inline-flex}
.sa-tl .tl-body .sa-tc .tl-meta > span::before{display:none}
.sa-tl .tl-body .sa-tc .tl-meta > span + span::before{display:inline-block; margin-right:4px}
.sa-tl .tl-body .sa-tc .tl-meta .tl-m-time{display:none}
.sa-tl .tl-body .sa-tc-mix .tl-meta .tl-m-time{display:inline-flex}
/* 카드의 CUE 단추: 표지 오른쪽 위 (마우스는 올렸을 때 · 담은 곡은 늘, 손가락 기기는 늘) */
.sa-tl .sa-tc .tl-cartm{display:inline-flex !important; position:absolute; top:6px; right:6px; margin:0; width:32px; height:32px; font-size:20px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; backdrop-filter:blur(6px)}
.sa-tl .sa-tc .tl-cartm:hover{background:rgba(0,0,0,.78); color:#fff}
@media (hover:hover) and (pointer:fine){
  .sa-tl .sa-tc .tl-cartm{opacity:0; transition:opacity .12s}
  .sa-tl .sa-tc:hover .tl-cartm,.sa-tl .sa-tc:focus-within .tl-cartm,.sa-tl .sa-tc.is-picked .tl-cartm{opacity:1}
}
.sa-tl .sa-tc.is-open .tl-cover{box-shadow:0 0 0 2px var(--sa-ac), var(--sa-shadow)}
.sa-tl .tl-body .sa-tc.active,.sa-tl .tl-body .sa-tc.is-open,
[data-theme="light"] .sa-tl .tl-body .sa-tc.active,[data-theme="light"] .sa-tl .tl-body .sa-tc.active:hover,[data-theme="light"] .sa-tl .tl-body .sa-tc.is-open,[data-theme="light"] .sa-tl .tl-body .sa-tc:hover{background:transparent; box-shadow:none}
@container tl (min-width:520px){
  .sa-grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px 14px}
  .sa-grid.sa-grid-mix{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container tl (min-width:700px){
  .sa-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .sa-grid.sa-grid-mix{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* 아주 좁은 화면(표 299px 이하 — 갤럭시 폴드 바깥 화면): 순위 칸을 숨겨요. 곡 목록 CSS(tracklist.css)의 같은 규칙이 그 뒤에 생긴
   휴대폰 순위 알약 규칙(.tl .tl-c-rank{display:flex})에 덮여서 표지 칸이 0px가 되고 ⋮ 단추가 아래 줄로 떨어져요(2026-11-11 280px에서 찾음, 다른 곡 목록도 같아요) → 이 페이지 표에는 다시 걸어요 */
@media (max-width:720px){ @container tl (max-width:299px){ .sa-page .tl .tl-body .tl-row > .tl-c-rank{display:none} } }
@media (max-width:720px){
  /* 휴대폰: 곡 줄이 카드 안에 있어서 안쪽 여백을 조금 */
  .sa-tl .tl-body .sa-list .tl-row,[data-theme="light"] .sa-tl .tl-body .sa-list .tl-row{padding-left:8px; padding-right:2px}
  .sa-tl .tl-body .sa-list .tl-row:last-child::after{display:none}
}

/* ---------------- 카드 줄: 영상 · 클럽 · 아티스트 ---------------- */
.sa-row{display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; padding-bottom:2px}
.sa-row::-webkit-scrollbar{display:none}
.sa-row > *{flex:none; scroll-snap-align:start}
.sa-row-v > *{width:min(72%, 280px)}
.sa-row-c > *{width:min(62%, 250px)}
.sa-row-a > *{width:96px}
.sa-row.sa-wrap{display:grid; overflow:visible; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px}
.sa-row.sa-wrap > *{width:auto}
.sa-row-a.sa-wrap{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
@container sap (min-width:620px){
  .sa-row{display:grid; overflow:visible; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr))}
  .sa-row > *{width:auto}
  .sa-row-a{grid-template-columns:repeat(6,minmax(0,1fr))}
  .sa-row.sa-wrap{grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 14px}
  .sa-row-a.sa-wrap{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}
@container sap (min-width:900px){
  .sa-row.sa-wrap{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sa-row-a.sa-wrap{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .sa-sim .sa-row-a{grid-template-columns:repeat(8,minmax(0,1fr))}
}

/* 영상 카드 */
.sa-vc{display:block; min-width:0}
.sa-vc-th{position:relative; display:block; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#111}
.sa-vc-th img{width:100%; height:100%; object-fit:cover}
.sa-vc.is-vert .sa-vc-th img{object-fit:contain; background:#000}
.sa-vc-th em{position:absolute; display:inline-flex; align-items:center; gap:3px; max-width:calc(100% - 12px); padding:2px 7px; border-radius:5px; background:rgba(0,0,0,.76); color:#fff; font-size:11px; font-style:normal; font-weight:800; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sa-vc-th .sa-vc-lv{left:6px; top:6px; background:#e5262f}
.sa-vc-th .sa-vc-club{left:6px; bottom:6px; max-width:calc(100% - 70px)}
.sa-vc-th .sa-vc-d{right:6px; bottom:6px; font-variant-numeric:tabular-nums}
.sa-vc b{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin:8px 0 2px; color:var(--sa-t1); font-size:13.5px; font-weight:700; line-height:1.35; overflow-wrap:anywhere}
.sa-vc-m{display:block; color:var(--sa-t3); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sa-vc:hover b{color:var(--sa-ac-t)}

/* 클럽 카드: 그림이 있으면 그림, 없으면 장르 색 네온 포스터 */
.sa-cc{position:relative; display:block; aspect-ratio:4/3; border-radius:14px; overflow:hidden; color:#fff; background:#0c0c10; isolation:isolate}
.sa-page a.sa-cc{color:#fff} /* 그림 위 글자는 두 모드 모두 흰색 (.sa-page a{color:inherit}보다 세게 — 글자색만. 비율은 위 규칙 · 옆 칸 .sa-gigs .sa-cc가 정해요) */
.sa-cc-po{position:absolute; inset:0; z-index:-2; background:radial-gradient(120% 90% at 20% 10%, hsla(var(--h1,300),90%,60%,.95), transparent 60%), radial-gradient(110% 90% at 90% 90%, hsla(var(--h2,200),90%,55%,.9), transparent 60%), #0c0c10}
.sa-cc-po::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px)}
.sa-cc-img{position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover}
.sa-cc em{position:absolute; top:10px; display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:99px; color:#fff; font-size:11px; font-style:normal; font-weight:800; line-height:1.6; white-space:nowrap}
.sa-cc-k{left:10px; background:rgba(0,0,0,.42); backdrop-filter:blur(6px)}
.sa-cc-v{right:10px; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.25)}
.sa-cc-in{position:absolute; left:0; right:0; bottom:0; display:block; padding:26px 12px 12px; background:linear-gradient(transparent, rgba(0,0,0,.8))}
.sa-cc-in b{display:block; color:#fff; font-size:15px; font-weight:800; line-height:1.25; text-shadow:0 1px 4px rgba(0,0,0,.6); overflow-wrap:anywhere}
.sa-cc-in b small{font-size:11.5px; font-weight:600; opacity:.85}
.sa-cc-in i{display:block; margin-top:2px; color:#fff; font-size:11.5px; font-style:normal; opacity:.88; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sa-cc mark{color:#fff; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px}

/* 아티스트 동그라미 */
.sa-ac{display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; text-align:center}
.sa-ac img{width:100%; max-width:112px; aspect-ratio:1; border-radius:50%; object-fit:cover; background:var(--sa-fill); box-shadow:var(--sa-shadow)}
.sa-ac b{max-width:100%; color:var(--sa-t1); font-size:13.5px; font-weight:700; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sa-ac span{color:var(--sa-t3); font-size:12px; line-height:1.2}
.sa-ac:hover b{color:var(--sa-ac-t)}

/* 레이블 */
.sa-labels{display:flex; flex-wrap:wrap; gap:6px}
.sa-page a.sa-lb{display:inline-flex; align-items:center; gap:7px; max-width:100%; height:32px; padding:0 12px; border-radius:9px; border:1px solid var(--sa-line); background:var(--sa-card); color:var(--sa-t1); font-size:13px}
.sa-lb b{min-width:0; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sa-lb i{flex:none; font-style:normal; color:var(--sa-t3); font-size:12px}
.sa-page a.sa-lb:hover{border-color:var(--sa-t3)}
.sa-lbl{margin-top:16px; overflow:hidden}
.sa-page .sa-lbl a{display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:14px; padding:12px 16px; border-top:1px solid var(--sa-div); color:var(--sa-t2)}
.sa-lbl a:first-child{border-top:0}
.sa-lbl a:hover{background:var(--tl-hover)}
.sa-lbl b{min-width:0; color:var(--sa-t1); font-size:14.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sa-lbl span{display:inline-flex; align-items:center; gap:4px; color:var(--sa-t3); font-size:12.5px; font-variant-numeric:tabular-nums; white-space:nowrap}
.sa-lbl .tl-svg{font-size:10px}

/* 게시판 글 */
.sa-posts{margin-top:16px; overflow:hidden}
.sa-page a.sa-post{display:block; padding:13px 16px; border-top:1px solid var(--sa-div); color:var(--sa-t2)}
.sa-post:first-child{border-top:0}
.sa-post:hover{background:var(--tl-hover)}
.sa-post-m{display:flex; align-items:center; gap:8px; margin-bottom:3px; color:var(--sa-t3); font-size:12px}
.sa-post-m i{padding:1px 7px; border-radius:5px; background:var(--sa-fill); color:var(--sa-t2); font-style:normal; font-weight:700}
.sa-post b{display:block; color:var(--sa-t1); font-size:14.5px; font-weight:700; line-height:1.4; overflow-wrap:anywhere}
.sa-post-t{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin-top:3px; color:var(--sa-t3); font-size:13px; line-height:1.45; overflow-wrap:anywhere}
.sa-page .sa-pager{margin:20px 0 0}

/* ---------------- 검색 ---------------- */
/* 검색 칸: 휴대폰만 (컴퓨터 · 태블릿은 맨 윗줄 검색창이 있어요) */
.sa-sbox{display:none}
@media (max-width:720px){
  .sa-sbox{display:flex; align-items:center; gap:8px; height:46px; margin:4px 0 14px; padding:0 6px 0 14px; border-radius:14px; background:var(--sa-card); border:1px solid var(--sa-line); color:var(--sa-t3); font-size:18px}
  .sa-page .sa-sbox input{flex:1 1 auto; min-width:0; width:0; height:44px; margin:0; padding:0; border:0; border-radius:0; outline:0; box-shadow:none; background:transparent; color:var(--sa-t1); font-family:inherit; font-size:16px; font-weight:700; -webkit-appearance:none; appearance:none}
  .sa-sbox input::-webkit-search-cancel-button{display:none}
  .sa-page a.sa-sbox-x{flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:var(--sa-t3); font-size:18px}
}
.sa-head{display:flex; align-items:center; gap:12px; min-width:0; margin:6px 0 0}
.sa-head-tx{min-width:0}
.sa-title{margin:0; color:var(--sa-t1); font-family:inherit; font-size:26px; font-weight:850; letter-spacing:-.5px; line-height:1.25; overflow-wrap:anywhere}
.sa-title em{font-style:normal; color:var(--sa-ac-t)}
.sa-sub{margin:2px 0 0; color:var(--sa-t3); font-size:13.5px}
.sa-g2{display:grid; grid-template-columns:minmax(0,1fr); gap:6px 18px; margin-top:18px}
.sa-g2 > .sa-sec{margin-top:16px}
.sa-best{display:flex; flex-direction:column; gap:12px; min-width:0; padding:18px; background:linear-gradient(160deg, var(--sa-ac-soft), transparent 55%), var(--sa-card)}
.sa-best-lab{color:var(--sa-t3); font-size:12px; font-weight:800; letter-spacing:.3px}
.sa-best-who,.sa-page a.sa-best-who{display:flex; align-items:center; gap:16px; min-width:0}
.sa-best-who > img,.sa-best-neon{flex:none; width:84px; height:84px; border-radius:12px; object-fit:cover; background:var(--sa-fill); box-shadow:var(--sa-shadow)}
.sa-best-who > img.round{border-radius:50%}
.sa-best-neon{position:relative; display:block; overflow:hidden; background:radial-gradient(120% 90% at 20% 10%, hsla(var(--h1,300),90%,60%,.95), transparent 60%), radial-gradient(110% 90% at 90% 90%, hsla(var(--h2,200),90%,55%,.9), transparent 60%), #0c0c10}
.sa-best-neon img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.sa-best-who > span{min-width:0}
.sa-best-name{display:block; color:var(--sa-t1); font-size:26px; font-weight:850; letter-spacing:-.6px; line-height:1.12; overflow-wrap:anywhere}
.sa-best-name.sm{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; font-size:20px; letter-spacing:-.3px; line-height:1.25}
.sa-best-by{display:block; margin-top:4px; color:var(--sa-t3); font-size:13.5px; font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sa-best-meta{margin:0; color:var(--sa-t3); font-size:13px}
.sa-best-gs{display:flex; flex-wrap:wrap; gap:5px}
.sa-best-bt{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:4px}
@container sap (min-width:620px){
  .sa-best{padding:20px}
  .sa-best-who > img,.sa-best-neon{width:104px; height:104px}
  .sa-best-name{font-size:30px}
  .sa-best-name.sm{font-size:22px}
}
@container sap (min-width:900px){
  .sa-g2{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .sa-g2.one{grid-template-columns:minmax(0,1fr)}
  .sa-g2 > .sa-sec{margin-top:0}
}
@media (max-width:720px){
  .sa-title{font-size:21px}
  .sa-sec-h h2{font-size:17px}
  .sa-sec{margin-top:22px}
}

/* ---------------- 아티스트 ---------------- */
.sa-hero{position:relative; overflow:hidden; isolation:isolate; margin:4px 0 0; border-radius:18px; background:#17171b; color:#fff}
.sa-hero-bg{position:absolute; left:-40px; top:-40px; z-index:-2; width:calc(100% + 80px); height:calc(100% + 80px); max-width:none; object-fit:cover; filter:blur(38px) saturate(1.4) brightness(.62)}
.sa-hero::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.58))}
.sa-hero-in{display:flex; flex-direction:column; align-items:center; gap:12px; padding:28px 18px 20px; text-align:center}
.sa-hero-av{flex:none; width:128px; height:128px; border-radius:50%; object-fit:cover; background:#222; border:3px solid rgba(255,255,255,.18); box-shadow:0 18px 40px rgba(0,0,0,.45)}
.sa-hero-tx{min-width:0; max-width:100%}
.sa-hero-k{font-size:12.5px; font-weight:800; letter-spacing:.6px; opacity:.85}
.sa-hero h1{margin:2px 0 6px; color:#fff; font-family:inherit; font-size:34px; font-size:clamp(30px, 9cqi, 40px); font-weight:900; letter-spacing:-1px; line-height:1.05; overflow-wrap:anywhere}
.sa-hero-m{margin:0; color:#fff; font-size:13.5px; opacity:.92}
.sa-hero-pl{display:inline-flex; align-items:center; gap:3px; margin-left:8px; white-space:nowrap}
.sa-hero-gs{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:12px 0 0}
.sa-hero-gs span{padding:3px 10px; border-radius:99px; background:rgba(255,255,255,.16); font-size:12px; font-weight:800; line-height:1.5; white-space:nowrap; backdrop-filter:blur(8px)}
.sa-hero-gs span i{font-style:normal; opacity:.7; margin-left:4px}
.sa-abar{display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:14px 0 0}
.sa-play{flex:none; display:grid; place-items:center; width:48px; height:48px; padding:0; border:0; border-radius:50%; background:var(--sa-ac); color:var(--sa-on-ac); font-size:22px; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,.25); touch-action:manipulation}
.sa-play .tl-svg{transform:translateX(1px)}
.sa-play:hover{filter:brightness(1.08)}
.sa-play:disabled{opacity:.6; cursor:progress}
.sa-abar-sp{display:none; margin-left:auto; color:var(--sa-t3); font-size:13px; white-space:nowrap}
.sa-cols{display:block}
.sa-only-wide{display:none}
.sa-side .sa-sec-h h2{font-size:17px}
.sa-picked{padding:16px}
.sa-picked-lab{margin-bottom:10px; color:var(--sa-t3); font-size:12px; font-weight:800}
.sa-picked-in{display:flex; gap:12px; min-width:0}
.sa-picked-in > img{flex:none; width:84px; height:84px; border-radius:10px; object-fit:cover; background:var(--sa-fill)}
.sa-picked-in > div{min-width:0}
.sa-picked-in b{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; color:var(--sa-t1); font-size:14.5px; font-weight:700; line-height:1.3; overflow-wrap:anywhere}
.sa-picked-st{display:flex; flex-wrap:wrap; gap:4px 10px; margin:4px 0 0; color:var(--sa-t3); font-size:12px; font-variant-numeric:tabular-nums}
.sa-picked-st span{display:inline-flex; align-items:center; gap:3px}
.sa-picked-st .tl-svg{font-size:10px}
.sa-picked-ch{display:flex; flex-wrap:wrap; gap:4px; margin-top:6px}
.sa-picked-bt{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.sa-gigs{padding:14px}
.sa-gigs .sa-cc{aspect-ratio:16/9; margin-bottom:10px}
.sa-vls{display:block}
.sa-page a.sa-vl{display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px solid var(--sa-div)}
.sa-vls > .sa-vl:first-child{border-top:0; padding-top:0}
.sa-vl img{flex:none; width:76px; height:43px; border-radius:7px; object-fit:cover; background:#111}
.sa-vl span{min-width:0}
.sa-vl b{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; color:var(--sa-t1); font-size:12.5px; font-weight:700; line-height:1.3; overflow-wrap:anywhere}
.sa-vl i{display:block; color:var(--sa-t3); font-size:11px; font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sa-vl:hover b{color:var(--sa-ac-t)}
.sa-years{padding:16px}
.sa-bars{display:flex; align-items:flex-end; gap:6px; height:110px}
.sa-bars > div{flex:1 1 0; min-width:0; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px}
.sa-bars i{display:block; width:100%; max-width:34px; border-radius:5px 5px 2px 2px; background:var(--sa-fill-2)}
.sa-bars .pk i{background:var(--sa-ac)}
.sa-bars span{color:var(--sa-t3); font-size:10.5px; font-weight:700; line-height:1}
.sa-years p{margin:10px 0 0; color:var(--sa-t3); font-size:12.5px}
.sa-bio{padding:14px 16px}
.sa-bio-t{color:var(--sa-t2); font-size:13px; line-height:1.55; overflow-wrap:anywhere}
.sa-bio-t.is-short{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden}
.sa-page .sa-bio a{color:var(--sa-ac-t); overflow-wrap:anywhere}
.sa-bio-more{margin:6px 0 0; padding:0; border:0; background:none; color:var(--sa-t1); font-family:inherit; font-size:13px; font-weight:800; cursor:pointer}
.sa-bio-more[hidden]{display:none}
.sa-bio-site{margin:8px 0 0; font-size:13px}
.sa-page .sa-bio-site a{display:inline-flex; align-items:center; gap:5px; max-width:100%}
@container sap (min-width:620px){
  .sa-hero-in{flex-direction:row; align-items:flex-end; gap:26px; padding:34px 32px 26px; text-align:left}
  .sa-hero-av{width:168px; height:168px}
  .sa-hero h1{font-size:52px; font-size:clamp(40px, 6.4cqi, 64px); letter-spacing:-2px}
  .sa-hero-gs{justify-content:flex-start}
  .sa-play{width:54px; height:54px}
  .sa-abar-sp{display:block}
  /* 태블릿 · 좁은 컴퓨터 창(한 줄 배치, 본문 칸 620 ~ 959px): '공연 · 클럽' 카드를 한 줄에 나란히 — 한 장씩 쌓으면 카드 하나가 화면 절반을 차지해요 */
  .sa-only-narrow .sa-gigs{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px}
  .sa-only-narrow .sa-gigs .sa-cc{aspect-ratio:4/3; margin-bottom:0}
  .sa-only-narrow .sa-gigs .sa-vls{grid-column:1 / -1}
}
@container sap (min-width:960px){
  .sa-cols{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:0 24px; align-items:start}
  .sa-only-wide{display:block}
  .sa-only-narrow{display:none}
}
@container sap (min-width:1100px){ .sa-cols{grid-template-columns:minmax(0,1fr) 340px} }

/* ---------------- 화이트 ---------------- */
[data-theme="light"] .sa-page{
  --sa-card:var(--lt-surface); --sa-line:var(--lt-border); --sa-div:var(--lt-divider); --sa-sub:var(--lt-subtle); --sa-fill:var(--lt-fill); --sa-fill-2:var(--lt-fill-hover);
  --sa-t1:var(--lt-text); --sa-t2:var(--lt-text-2); --sa-t3:var(--lt-text-3);
  --sa-ac:var(--lt-accent); --sa-ac-t:var(--lt-accent-text); --sa-ac-soft:var(--lt-accent-soft); --sa-on-ac:var(--lt-on-accent, #fff);
  --sa-ink:var(--lt-ink); --sa-on-ink:var(--lt-on-ink, #fff);
  --sa-shadow:var(--lt-shadow-md);
}
[data-theme="light"] .sa-chip.g{color:hsl(var(--gh,330),62%,34%)}
[data-theme="light"] .sa-chip.k[style]{color:hsl(var(--kh),70%,32%); background:hsla(var(--kh),65%,48%,.13)}
[data-theme="light"] .sa-vc-th,[data-theme="light"] .sa-vl img{outline:1px solid rgba(var(--lt-ink-rgb),.1); outline-offset:-1px}