/* ===== 아티스트 페이지 (모든 아티스트 공통 자동 페이지) ===== */

.is-hidden {
    display: none !important;
}

/* ---------- 히어로 (대표 커버 1장을 확대·블러한 색 배경) ---------- */
.artist-hero {
    position: relative;
    overflow: hidden;
    /* 커버가 없을 때의 폴백 — 브랜드 딥그린 */
    background: linear-gradient(135deg, #1d3a26 0%, #0f1a14 60%, #16281c 100%);
}

/* 커버 여러 장을 타일로 깔면 앨범이 많은 아티스트에서 조각보가 되므로 한 장만 크게 쓴다 */
.artist-hero__wash {
    position: absolute;
    inset: -30%;
    background-size: cover;
    background-position: center;
    filter: blur(52px) saturate(1.35);
    transform: scale(1.15);
    opacity: 0.92;
    pointer-events: none;
    /* 곡을 바꿀 때 배경이 툭 끊기지 않도록 잠깐 흐려졌다 돌아온다 */
    transition: opacity 0.18s ease;
}

.artist-hero__wash.is-swapping {
    opacity: 0;
}

/* 커버 색이 번지는 느낌 — 평평한 블러를 입체적으로 만든다 */
.artist-hero__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 90% at 12% 18%, rgba(255, 255, 255, 0.22), transparent 55%),
        radial-gradient(90% 80% at 88% 92%, rgba(0, 0, 0, 0.45), transparent 62%);
}

.artist-hero__grain {
    position: absolute;
    inset: 0;
    opacity: 0.16;
    mix-blend-mode: overlay;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.artist-hero__veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(10, 14, 12, 0.94) 0%, rgba(10, 14, 12, 0.42) 58%, rgba(10, 14, 12, 0.26) 100%),
        linear-gradient(to right, rgba(10, 14, 12, 0.66) 0%, rgba(10, 14, 12, 0.08) 72%),
        /* 가장자리를 눌러 가운데로 시선을 모은다 */
        radial-gradient(130% 110% at 50% 45%, transparent 45%, rgba(6, 9, 8, 0.55) 100%);
}

/* 배너 하단을 본문 배경으로 부드럽게 잇는다 */
.artist-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44px;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}

.artist-hero__inner {
    position: relative;
    z-index: 3;
    max-width: 1200px;
    margin: 0 auto;
    /* 아래쪽 흰색 페이드에 프로필이 잠기지 않도록 바닥에서 넉넉히 띄운다.
       위아래 합은 그대로 두고 아래쪽에 더 줘서 배너가 높아지지 않게 한다. */
    padding: 44px 40px 84px;
    display: flex;
    align-items: flex-end;
    gap: 38px;
}

/* 프로필 이미지 (없으면 이니셜 원형) */
.artist-hero__avatar {
    position: relative;
    flex: 0 0 auto;
    /* 바닥 정렬이라 크기를 키우면 위로 자란다 */
    width: 152px;
    height: 152px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    border: 3px solid rgba(255, 255, 255, 0.42);
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.artist-hero__avatar img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.artist-hero__initial {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 58px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.artist-hero__eyebrow {
    margin: 0 0 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

.artist-hero__name {
    margin: 0;
    font-size: 42px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
    word-break: keep-all;
}

.artist-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 14px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

.artist-hero__meta i {
    margin-right: 6px;
    color: rgba(255, 255, 255, 0.45);
}

.artist-hero__meta b {
    font-weight: 800;
    color: #fff;
}

.artist-hero__desc {
    /* 두 줄 정도로 떨어지도록 잡은 폭 */
    max-width: 62ch;
    margin: 14px 0 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.68);
    word-break: keep-all;
}

.artist-hero__desc b {
    color: #fff;
    font-weight: 700;
}

/* ---------- 메인 ---------- */
.artist-basic-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 36px 40px 56px;
}

.artist-basic-section {
    margin-bottom: 48px;
}

.artist-basic-section__head {
    margin-bottom: 16px;
}

.artist-basic-section__title {
    font-size: 19px;
    font-weight: 800;
    color: var(--gray-800, #1f2937);
    margin: 0;
    letter-spacing: -0.03em;
}

.artist-basic-section__sub {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--gray-400, #9ca3af);
}

/* ---------- 단일 악보 랜딩 (곡 1개) ---------- */
.artist-solo {
    margin-bottom: 48px;
}

/* ---------- 곡 전환: 왼쪽 목록 + 오른쪽 상세 (2~4곡) ---------- */
.artist-showcase--split {
    display: grid;
    grid-template-columns: 196px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* 그리드 자식은 기본 min-width가 auto라, 긴 곡명이 칸을 밀어내지 않도록 눌러둔다 */
.artist-showcase__panes,
.artist-solo__meta {
    min-width: 0;
}

/* 곡을 고르면 여기로 스크롤한다 — 상단 고정 네비에 가리지 않게 여유를 둔다 */
.artist-showcase__panes {
    scroll-margin-top: 84px;
}

.artist-vlist {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    /* 곡이 수백 개여도 페이지가 늘어지지 않게 목록 안에서 스크롤한다 */
    max-height: calc(100vh - 32px);
}

.artist-vlist__head {
    flex: 0 0 auto;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef1ef;
}

.artist-vlist__count {
    margin: 0 0 9px;
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-400, #9ca3af);
}

.artist-vlist__count b {
    color: var(--gray-800, #1f2937);
    font-weight: 800;
}

.artist-vlist__search {
    position: relative;
    display: flex;
    align-items: center;
}

.artist-vlist__search i {
    position: absolute;
    left: 11px;
    font-size: 11px;
    color: var(--gray-400, #9ca3af);
    pointer-events: none;
}

.artist-vlist__search input {
    width: 100%;
    padding: 8px 12px 8px 30px;
    border: 1px solid #e4e9e6;
    border-radius: 9px;
    font-size: 12.5px;
    background: #fff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.artist-vlist__search input:focus {
    outline: none;
    border-color: var(--forest, #2e7d32);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
}

.artist-vlist__items {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: 2px;
    padding-top: 8px;
    scrollbar-width: thin;
}

.artist-vlist__items::-webkit-scrollbar { width: 6px; }
.artist-vlist__items::-webkit-scrollbar-thumb {
    background: #dfe4e1;
    border-radius: 3px;
}

.artist-vlist__empty {
    margin: 16px 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--gray-400, #9ca3af);
}

.artist-vlist button {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border: 0;
    border-radius: 9px;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    min-width: 0;
    transition: background 0.18s ease;
}

.artist-vlist button:hover { background: #f5f7f5; }
.artist-vlist button[aria-selected="true"] { background: var(--forest-muted, #f1f8e9); }

.artist-vlist__cov {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    overflow: hidden;
    background: #f3f4f6;
}

.artist-vlist__cov img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.artist-vlist__body {
    min-width: 0;
    flex: 1;
}

.artist-vlist__name {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gray-500, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artist-vlist__album {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    color: var(--gray-400, #9ca3af);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artist-vlist button[aria-selected="true"] .artist-vlist__name {
    color: var(--forest-dark, #1b5e20);
}

/* 오른쪽 상세를 받아오는 동안 */
.artist-songpane__loading {
    margin: 0;
    padding: 60px 0;
    text-align: center;
    font-size: 13px;
    color: var(--gray-400, #9ca3af);
}

/* 악보 상세로 가는 내부링크 — 크롤러용이라 눈에 띄지 않게 */
.artist-sitelinks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid #f1f3f2;
}

.artist-sitelinks a {
    font-size: 11.5px;
    color: #b6beb9;
    text-decoration: none;
}

.artist-sitelinks a:hover {
    color: var(--forest, #2e7d32);
    text-decoration: underline;
}

/* 곡 목록이 옆에 붙으면 상세도 같이 좁아지므로 밀도를 올린다 */
.artist-showcase--split .artist-solo__head {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 24px;
    padding-bottom: 22px;
}

.artist-showcase--split .artist-solo__title {
    font-size: clamp(22px, 2.2vw, 28px);
}

.artist-showcase--split .artist-solo__spec {
    margin-top: 16px;
}

.artist-showcase--split .artist-solo__spec-row {
    padding: 8px 0;
}

.artist-showcase--split .artist-solo__sheetblock {
    padding-top: 24px;
}

.artist-showcase--split .artist-solo__sheets {
    padding: 22px;
}

.artist-showcase--split .artist-solo__stage {
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 18px;
}

/* ① 곡 정보 + 앨범 정보 */
.artist-solo__head {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 38px;
    align-items: start;
    padding-bottom: 34px;
    border-bottom: 1px solid #eef1ef;
}

.artist-solo__cover {
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background: #f3f4f6;
    box-shadow: 0 3px 10px rgba(20, 30, 24, 0.1), 0 18px 36px rgba(20, 30, 24, 0.1);
}

.artist-solo__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.artist-solo__artist {
    margin: 7px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-500, #6b7280);
}

/* ② 샘플(왼쪽) + 구매 패널(오른쪽) */
.artist-solo__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 22px;
    align-items: start;
}

.artist-buy {
    position: sticky;
    top: 16px;
    padding: 20px;
    border: 1px solid #e8ebe9;
    border-radius: 16px;
    background: #fff;
}

.artist-buy__label {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-800, #1f2937);
}

.artist-part-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.artist-part {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 0;
    border-top: 1px solid #f1f3f2;
}

.artist-part__pick {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.artist-part__pick input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--forest, #2e7d32);
    cursor: pointer;
}

.artist-part__body {
    min-width: 0;
    flex: 1;
}

.artist-part__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.artist-part__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-800, #1f2937);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 선택 표시는 체크박스와 곡명 색으로만 — 배경까지 칠하면 패널이 시끄러워진다 */
.artist-part.is-selected .artist-part__name {
    color: var(--forest-dark, #1b5e20);
}

.artist-part__meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 3px;
    font-size: 12px;
}

/* 제공 키는 조옮김 셀링포인트라 페이지 수보다 진하게 */
.artist-part__keyinfo {
    font-weight: 700;
    color: var(--forest-dark, #1b5e20);
    letter-spacing: 0.01em;
}

.artist-part__pageinfo {
    color: var(--gray-400, #9ca3af);
}

.artist-part__keyinfo + .artist-part__pageinfo::before {
    content: "·";
    margin-right: 6px;
    color: #cbd2cd;
}

.artist-part__price {
    flex: 0 0 auto;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--gray-800, #1f2937);
    font-variant-numeric: tabular-nums;
}

/* 총액 + 구매 버튼 */
.artist-buybar {
    display: grid;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid #e8ebe9;
}

.artist-buybar__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--gray-500, #6b7280);
}

.artist-buybar__value {
    font-size: 20px;
    font-weight: 800;
    color: var(--gray-800, #1f2937);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.artist-buybar__note {
    margin: 6px 0 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--gray-400, #9ca3af);
    word-break: keep-all;
}

.artist-buybar__btn {
    width: 100%;
    padding: 13px 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.artist-buybar__btn--buy {
    background: var(--forest, #2e7d32);
    color: #fff;
}

.artist-buybar__btn--buy:hover {
    background: var(--forest-dark, #1b5e20);
}

.artist-buybar__btn--cart {
    background: #fff;
    border-color: #dde3df;
    color: var(--gray-700, #374151);
}

.artist-buybar__btn--cart:hover {
    border-color: #c3cec7;
    background: #fafbfa;
}

.artist-buybar__btn.btn-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---------- 모달 ---------- */
.artist-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(12, 16, 14, 0.62);
    backdrop-filter: blur(3px);
}

.artist-modal__box {
    width: 100%;
    max-width: 820px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}

.artist-modal__box--sm {
    max-width: 380px;
    padding: 28px 24px 22px;
    text-align: center;
}

.artist-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid #eef1ef;
    font-size: 14px;
    font-weight: 800;
    color: var(--gray-800, #1f2937);
}

.artist-modal__head button {
    border: none;
    background: none;
    font-size: 20px;
    line-height: 1;
    color: var(--gray-400, #9ca3af);
    cursor: pointer;
}

.artist-modal__head button:hover {
    color: var(--gray-800, #1f2937);
}

.artist-modal__body {
    flex: 1;
    overflow: auto;
    background: #f4f6f5;
}

.artist-modal__body iframe {
    display: block;
    width: 100%;
    height: 72vh;
    border: 0;
}

.artist-modal__body img {
    display: none;
    width: 100%;
    height: auto;
}

.artist-modal__msg {
    margin: 0 0 20px;
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-800, #1f2937);
}

.artist-modal__actions {
    display: flex;
    gap: 8px;
}

.artist-modal__actions button {
    flex: 1;
    padding: 11px 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

#artistStayBtn {
    background: #f1f3f2;
    color: var(--gray-600, #4b5563);
}

#artistGoCartBtn {
    background: var(--forest, #2e7d32);
    color: #fff;
}

#artistGoCartBtn:hover {
    background: var(--forest-dark, #1b5e20);
}

/* ③ 악보 미리보기 */
.artist-solo__sheetblock {
    padding-top: 40px;
}

.artist-solo__sheethead {
    margin-bottom: 14px;
}

.artist-solo__sheettitle {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--gray-800, #1f2937);
}

/* ---------- 파트 선택 ---------- */
.artist-parttabs {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid #e2e8e4;
    border-radius: 14px;
    background: linear-gradient(135deg, #f6faf6 0%, #eef4f0 100%);
}

.artist-parttabs__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 800;
    color: var(--forest-dark, #1b5e20);
    letter-spacing: -0.02em;
}

.artist-parttabs__label i {
    font-size: 11px;
    opacity: 0.6;
}

.artist-parttabs__label em {
    font-style: normal;
    font-weight: 700;
    color: var(--forest, #2e7d32);
    opacity: 0.75;
}

.artist-parttabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.artist-solo__tab {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 18px;
    border: 1.5px solid #dbe4dd;
    border-radius: 999px;
    background: #fff;
    color: var(--gray-600, #4b5563);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s ease;
}

.artist-solo__tab:hover {
    border-color: var(--forest, #2e7d32);
    color: var(--forest-dark, #1b5e20);
}

/* 지금 보고 있는 파트는 확실히 구분되게 */
.artist-solo__tab[aria-selected="true"] {
    background: var(--forest, #2e7d32);
    border-color: var(--forest, #2e7d32);
    color: #fff;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.28);
}

/* 악보를 감싸는 패널 — 세로로 긴 악보 좌우 여백을 "매트"로 만들어 빈 느낌을 없앤다 */
.artist-solo__sheets {
    padding: 32px;
    border-radius: 16px;
    background: #f7f8f7;
    border: 1px solid #eceeed;
}

/* 악보 + 그 아래 "크게 보기" 를 한 덩어리로 가운데 놓는다 */
.artist-solo__pane {
    max-width: 560px;
    margin: 0 auto;
}

.artist-solo__zoom {
    display: block;
    width: 100%;
    margin-bottom: 12px;
    padding: 10px 16px;
    border: 1px solid #dde3df;
    border-radius: 10px;
    background: #fff;
    color: var(--gray-700, #374151);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.artist-solo__zoom i {
    margin-right: 5px;
    font-size: 11px;
    color: var(--gray-400, #9ca3af);
}

.artist-solo__zoom:hover {
    border-color: var(--forest, #2e7d32);
    color: var(--forest, #2e7d32);
    background: #fafcfa;
}

.artist-solo__zoom:hover i {
    color: var(--forest, #2e7d32);
}

/* 악보는 세로로 긴 문서라 폭을 제한한다 */
.artist-solo__sheet {
    overflow: hidden;
    border: 1px solid #e8ebe6;
    border-radius: 16px;
    background: #fdfdfb;
    box-shadow: 0 2px 6px rgba(20, 30, 24, 0.05), 0 18px 40px rgba(20, 30, 24, 0.1);
}

.artist-solo__sheet img {
    display: block;
    width: 100%;
    height: auto;
}

/* 샘플 이미지가 있으면 안내 문구는 숨긴다 */
.artist-solo__nosample {
    display: none;
    margin: 0;
    padding: 56px 20px;
    text-align: center;
    font-size: 13px;
    color: var(--gray-400, #9ca3af);
}

.artist-solo__sheet.is-fallback .artist-solo__nosample,
.artist-solo__sheet:not(:has(img)) .artist-solo__nosample {
    display: block;
}

.artist-solo__note {
    margin: 5px 0 0;
    font-size: 12px;
    color: var(--gray-400, #9ca3af);
}

/* 오른쪽 — 곡 정보 */
.artist-solo__kicker {
    margin: 0 0 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #a3aca7;
}

.artist-solo__title {
    margin: 0;
    font-size: clamp(27px, 3vw, 38px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.2;
    color: var(--gray-800, #1f2937);
    word-break: keep-all;
}

/* 넓은 화면에서 한 줄짜리 얇은 행이 가로로 길게 늘어지지 않도록 2열로 깐다 */
.artist-solo__spec {
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 36px;
    border-top: 1px solid #eef1ef;
}

/* 파트 묶음이 그리드 흐름을 끊지 않게 한다 (is-hidden은 display:none이 우선) */
.artist-solo__spec > [data-part-pane] {
    display: contents;
}

.artist-solo__spec-row {
    display: flex;
    gap: 16px;
    align-items: baseline;
    padding: 11px 0;
    border-bottom: 1px solid #eef1ef;
    font-size: 13px;
}

.artist-solo__spec dt {
    flex: 0 0 66px;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #a3aca7;
}

.artist-solo__spec dd {
    margin: 0;
    color: var(--gray-700, #374151);
}

/* 앨범 뒤에 붙는 발매 연도 */
.artist-solo__year {
    color: var(--gray-400, #9ca3af);
}

.artist-solo__year::before {
    content: "·";
    margin: 0 5px 0 3px;
    color: #cbd2cd;
}

/* ---------- 다른 악보 추천 ---------- */
.artist-recommend__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.artist-recommend__card {
    text-decoration: none;
    color: inherit;
}

.artist-recommend__cover {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: #f3f4f6;
    box-shadow: 0 2px 8px rgba(20, 30, 24, 0.1);
    transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.26s ease;
}

.artist-recommend__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.artist-recommend__card:hover .artist-recommend__cover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(20, 30, 24, 0.18);
}

.artist-recommend__title {
    display: block;
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gray-800, #1f2937);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artist-recommend__artist {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--gray-400, #9ca3af);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- 주문제작 CTA ---------- */
.artist-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 26px 28px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f1f8e9 0%, #e8f2ea 100%);
    border: 1px solid #dbe7dd;
}

.artist-cta__text h2 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 800;
    color: var(--forest-dark, #1b5e20);
    letter-spacing: -0.03em;
}

.artist-cta__text p {
    margin: 0;
    font-size: 13px;
    color: var(--gray-600, #4b5563);
    word-break: keep-all;
}

.artist-cta__btn {
    flex: 0 0 auto;
    padding: 12px 24px;
    border-radius: 999px;
    background: var(--forest, #2e7d32);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.artist-cta__btn:hover {
    background: var(--forest-dark, #1b5e20);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(46, 125, 50, 0.28);
}

/* ===== 반응형 ===== */

@media (max-width: 1024px) {
    .artist-showcase--split { grid-template-columns: 176px minmax(0, 1fr); gap: 16px; }
    .artist-solo__head { grid-template-columns: 200px minmax(0, 1fr); gap: 28px; }
    /* 좁아지면 세로로 길어지므로 두 칸씩 짝지어 깐다 (앨범|발매, 작사|작곡) */
    .artist-solo__spec { column-gap: 18px; }

    /* 파트 · 제공 키 · 분량은 한 줄에 이어 붙인다 */
    .artist-solo__spec > [data-part-pane] {
        display: flex;
        grid-column: 1 / -1;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px 18px;
        padding: 9px 0;
        border-bottom: 1px solid #eef1ef;
    }
    .artist-solo__spec > [data-part-pane] .artist-solo__spec-row {
        padding: 0;
        border-bottom: 0;
        gap: 8px;
    }
    .artist-solo__spec > [data-part-pane] dt {
        flex: 0 0 auto;
    }

    .artist-solo__sheets { padding: 26px; }
    .artist-solo__stage { grid-template-columns: minmax(0, 1fr) 290px; }
    .artist-recommend__grid { grid-template-columns: repeat(4, 1fr); }

    .artist-hero__inner { padding: 32px 24px 64px; gap: 30px; }
    .artist-hero__avatar { width: 132px; height: 132px; }
    .artist-hero__initial { font-size: 50px; }
    .artist-hero__name { font-size: 34px; }
    .artist-basic-main { padding: 30px 24px 48px; }

}

@media (max-width: 768px) {
    .artist-solo__head {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-bottom: 26px;
    }
    .artist-solo__cover { max-width: 180px; }
    /* 좁은 화면에서는 곡 목록이 상세 위로 올라간다 */
    .artist-showcase--split { grid-template-columns: 1fr; gap: 16px; }
    /* 목록이 화면을 다 채우면 아래 상세가 안 보여서 곡을 눌러도 바뀐 게 없어 보인다 */
    .artist-vlist { position: static; max-height: 44vh; }
    .artist-showcase--split .artist-solo__head { grid-template-columns: 1fr; }
    .artist-showcase--split .artist-solo__stage { grid-template-columns: 1fr; }
    /*
     * 좁은 화면 스펙은 세 줄로 —
     *   앨범(+발매) / 작사·작곡 / 파트·키·분량
     * 줄마다 구분선을 그으면 화면이 선으로 가득 차므로 선은 파트 앞 하나만 남긴다.
     */
    .artist-solo__spec {
        column-gap: 14px;
        row-gap: 2px;
        border-top: 0;
    }
    .artist-solo__spec-row {
        padding: 5px 0;
        font-size: 12.5px;
        gap: 10px;
        border-bottom: 0;
    }
    .artist-solo__spec dt { flex: 0 0 42px; }

    /* 앨범명은 길어서 한 줄을 다 쓴다 */
    .artist-solo__spec-row--album { grid-column: 1 / -1; }

    /*
     * 파트 정보는 한 줄에 값만 이어 붙인다 — "파트  피아노 3단  G key  5페이지"
     * "키정보" "페이지" 같은 라벨은 값만 봐도 아는 내용이라 좁은 화면에서 뺀다.
     */
    .artist-solo__spec > [data-part-pane] {
        margin-top: 10px;
        padding: 11px 13px;
        border: 1px solid #dbe7dd;
        border-radius: 10px;
        background: var(--forest-muted, #f1f8e9);
        gap: 2px 12px;
    }

    .artist-solo__spec-row--key dt,
    .artist-solo__spec-row--pages dt {
        display: none;
    }

    .artist-solo__spec > [data-part-pane] dd {
        font-weight: 700;
        color: var(--gray-800, #1f2937);
    }

    .artist-solo__sheetblock { padding-top: 26px; }
    .artist-parttabs { align-items: flex-start; flex-direction: column; gap: 10px; }
    .artist-solo__tab { padding: 8px 14px; font-size: 12.5px; }
    .artist-solo__sheets { padding: 14px; border-radius: 16px; }
    /* 좁은 화면에서는 샘플 아래로 구매 패널이 내려온다 */
    .artist-solo__stage { grid-template-columns: 1fr; gap: 16px; }
    .artist-buy { position: static; padding: 16px; }
    .artist-recommend__grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }

    .artist-hero__inner {
        gap: 24px;
        padding: 26px 20px 52px;
    }

    .artist-hero__avatar {
        width: 104px;
        height: 104px;
    }

    .artist-hero__initial { font-size: 42px; }
    .artist-hero__name { font-size: 26px; }
    .artist-hero__desc { font-size: 12.5px; margin-top: 10px; }

    .artist-basic-main { padding: 24px 16px 40px; }

    .artist-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 20px;
    }

    .artist-cta__btn { width: 100%; text-align: center; }
}

@media (max-width: 480px) {
    .artist-hero__name { font-size: 22px; }
    .artist-hero__meta { gap: 12px; font-size: 12px; }

}