@charset "UTF-8";
/* =========================
Search Visual
========================= */

.search-visual {padding: 40px;}
.search-visual-inner {background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('/img/cmm/searchboxbg.png') center/cover;border-radius: 14px;padding: 40px 50px;}

/* 제목 */
.search-title {font-size: 48px;font-weight: 700;margin-bottom: 20px;}

/* 검색 입력 */
.search-box {display: flex;align-items: center;height: 56px;background: rgba(255,255,255,0.1);border-radius: 30px;padding: 0 20px;margin-bottom: 20px;}
.search-icon svg {width: 18px;height: 18px;fill: #aaa;margin-right: 12px;}
.search-input {flex: 1;background: transparent;border: none;outline: none;color: #fff;font-size: 16px;}
.search-input::placeholder {color: #aaa;}

/* 키워드 */
.keyword-list {display: flex;flex-wrap: wrap;gap: 10px;}
.keyword-btn {border: 1px solid rgba(255,255,255,0.3);background: transparent;color: #fff;padding: 6px 16px;border-radius: 20px;font-size: 13px;cursor: pointer;transition: 0.2s;}
.keyword-btn:hover {background: rgba(255,255,255,0.15);}

/* =========================
Search Results
========================= */
.search-results {margin-top: 40px;}
.results-title {font-size: 22px;font-weight: 700;margin-bottom: 20px;}

/* 테이블 */
.results-table {width: 100%;}

/* 행 */
.results-row {display: flex;align-items: center;padding: 16px 10px;border-bottom: 1px solid rgba(255,255,255,0.05);transition: 0.2s;}
.results-row:hover {background: rgba(255,255,255,0.04);}
.results-header {color: #aaa;font-size: 13px;border-bottom: 1px solid rgba(255,255,255,0.08);}

/* 컬럼 */
.col-no {width: 60px;}
.col-title {width: 320px;}
.col-artist {width: 200px;}
.col-keyword {flex: 1;}
.col-like {width: 40px;text-align: center;}

/* 음악 정보 */
.music-info {display: flex;align-items: center;gap: 12px;}
.music-cover {width: 36px;height: 36px;border-radius: 4px;object-fit: cover;}

/* 태그 */
.tag {border: 1px solid rgba(255,255,255,0.2);padding: 4px 10px;border-radius: 16px;font-size: 12px;margin-right: 6px;}

/* 좋아요 */
.like-btn {cursor: pointer;color: #aaa;font-size: 18px;}
.like-btn.active {color: #ff2b2b;} 





/* =========================================================
   Musician Detail Page
========================================================= */

.musician-detail-page {
  padding: 40px;
}

/* hero */
.artist-hero {
  margin-bottom: 38px;
}

.artist-hero-inner {
  position: relative;
  min-height: 280px;
  border-radius: 18px;
  overflow: hidden;
  background-color: #111;
  background-position: center center;
  background-size: cover;
  box-shadow:
    0 16px 40px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}

.artist-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.28) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.18));
}

.artist-hero-content {
  position: relative;
  z-index: 2;
  padding: 42px 46px;
  max-width: 760px;
}

.artist-hero-badge {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,43,43,0.14);
  border: 1px solid rgba(255,43,43,0.25);
  color: #ff4c4c;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 18px;
}

.artist-hero-title {
  margin: 0 0 6px;
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.artist-hero-subtitle {
  font-size: 22px;
  font-weight: 600;
  color: rgba(255,255,255,0.76);
  margin-bottom: 18px;
}

.artist-hero-desc {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
}

.artist-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.82);
  font-size: 13px;
  font-weight: 500;
}

/* info section */
.artist-info-section {
  margin-bottom: 44px;
}

.artist-info-grid {
  display: grid;
/*  grid-template-columns: 360px minmax(0, 1fr);*/
  gap: 28px;
  align-items: start;
}

.artist-profile-card,
.artist-panel {
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  box-shadow:
    0 16px 40px rgba(0,0,0,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.05);
  backdrop-filter: blur(4px);
}

.artist-profile-card { display:none;
  padding: 34px 28px 26px;
}

.artist-profile-top {
  text-align: center;
}

.artist-profile-image-wrap {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 22px;
  background: #1b1b1b;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

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

.artist-name-ko {
  margin: 0 0 6px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.artist-name-en {
  color: #4c8dff;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 16px;
}

.artist-short-desc {
  margin: 0;
  color: rgba(255,255,255,0.74);
  font-size: 15px;
  line-height: 1.7;
}

.artist-profile-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.artist-action-btn {
  min-width: 110px;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
}

.artist-action-btn:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}

.artist-action-btn.primary {
  background: #e11111;
  border-color: #e11111;
  color: #fff;
  box-shadow: 0 6px 20px rgba(225,17,17,0.35);
}

.artist-action-btn.primary:hover {
  color: #fff;
  background: #f01b1b;
}

/* right stack */
.artist-detail-stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.artist-panel-head {
  padding: 26px 28px 0;
}

.artist-panel-title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.artist-panel-body {
  padding: 18px 28px 28px;
}

.artist-bio-text {
  color: rgba(255,255,255,0.82);
  font-size: 15px;
  line-height: 1.9;
  word-break: keep-all;
}

.contact-panel .artist-panel-body {
  padding-top: 8px;
}

.contact-row {
  display: flex;
  align-items: center;
  min-height: 56px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.contact-row:first-child {
  border-top: 0;
}

.contact-label {
  width: 120px;
  color: rgba(255,255,255,0.52);
  font-size: 14px;
  font-weight: 600;
}

.contact-value {
  flex: 1;
  color: rgba(255,255,255,0.92);
  font-size: 15px;
}

.contact-value a {
  color: rgba(255,255,255,0.92);
  text-decoration: none;
}

.contact-value a:hover {
  color: #ff4c4c;
}

/* playlist */
.playlist-section {
  margin-top: 10px;
}

.playlist-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.playlist-card {
  border-radius: 16px;
  overflow: hidden;
  background: #101010;
  box-shadow:
    0 16px 40px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  transition: transform .2s ease, box-shadow .2s ease;
}

.playlist-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 22px 46px rgba(0,0,0,0.42),
    inset 0 0 0 1px rgba(255,255,255,0.05);
}

.playlist-thumb-wrap {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #151515;
}

.playlist-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.playlist-card:hover .playlist-thumb {
  transform: scale(1.04);
}

.playlist-thumb-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.20)),
    linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%);
}

.playlist-play-btn {
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #e11111;
  color: #fff;
  font-size: 15px;
  line-height: 46px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(225,17,17,0.35);
}

.playlist-card-body {
  padding: 22px 22px 20px;
}

.playlist-title {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.playlist-desc {
  margin: 0 0 18px;
  color: rgba(255,255,255,0.62);
  font-size: 14px;
  line-height: 1.7;
  min-height: 48px;
}

.playlist-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.playlist-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stat-chip {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.68);
  font-size: 12px;
  white-space: nowrap;
}
.stat-chip a { text-decoration:none}

.music-card.add-card{
  display:block;width:100%;
  border-radius:20px;
  overflow:hidden;
  background:#111;
  color:#fff;
  text-decoration:none;
  position:relative;
  min-height:260px;
  border:1px solid rgba(255,255,255,0.06);
  transition:all .2s ease;
}

.music-card.add-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}

.add-inner{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
}

.add-icon{
  width:72px;
  height:72px;
  border-radius:50%;
  border:3px solid #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:42px;
  font-weight:300;
}

.add-title{
  font-size:18px;
  font-weight:700;
}

.add-desc{
  font-size:14px;
  color:rgba(255,255,255,.8);
}

/* responsive */
@media (max-width: 1400px) {
  .artist-hero-title {
    font-size: 48px;
  }

  .artist-name-ko {
    font-size: 30px;
  }

  .playlist-title {
    font-size: 22px;
  }
}

@media (max-width: 1180px) {
  .artist-info-grid {
    grid-template-columns: 1fr;
  }

  .artist-profile-card {
    max-width: 460px;
  }

  .playlist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .musician-detail-page {
    padding: 24px 16px;
  }

  .artist-hero-inner {
    min-height: 240px;
  }

  .artist-hero-content {
    padding: 28px 22px;
  }

  .artist-hero-title {
    font-size: 34px;
  }

  .artist-hero-subtitle {
    font-size: 18px;
  }

  .artist-panel-head {
    padding: 22px 20px 0;
  }

  .artist-panel-body {
    padding: 14px 20px 22px;
  }

  .artist-profile-card {
    padding: 26px 20px 22px;
  }

  .artist-profile-image-wrap {
    width: 120px;
    height: 120px;
  }

  .artist-name-ko {
    font-size: 28px;
  }

  .playlist-grid {
    grid-template-columns: 1fr;
  }

  .playlist-card-body {
    padding: 18px 18px 18px;
  }

  .playlist-title {
    font-size: 20px;
  }

  .contact-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 0;
  }

  .contact-label {
    width: auto;
  }
}

@media (max-width: 480px) {
  .artist-hero-badge {
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
  }

  .artist-hero-title {
    font-size: 30px;
  }

  .artist-hero-desc {
    font-size: 15px;
  }

  .artist-profile-actions {
    flex-direction: column;
  }

  .artist-action-btn {
    width: 100%;
  }
}


        /* =========================
           member join
        ========================= */
        .hero {
            position: relative;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 20px 60px;
            overflow: hidden;
        }

        .hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(to right, rgba(255,255,255,0.10), rgba(0,0,0,0.45) 20%, rgba(0,0,0,0.72) 55%, rgba(0,0,0,0.85) 100%),
                url('/images/login_bg.jpg') center center / cover no-repeat;
            filter: grayscale(100%);
            transform: scale(1.02);
        }

        .hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0.30);
        }

        .join-box {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 640px;
            padding: 34px 28px 30px;
            border-radius: 18px;
            background: rgba(18, 24, 32, 0.84);
            border: 1px solid rgba(255,255,255,0.08);
            box-shadow:
                0 20px 60px rgba(0,0,0,0.45),
                inset 0 1px 0 rgba(255,255,255,0.05);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        .join-header {
            margin-bottom: 20px;
            text-align: center;
        }

        .join-title {
            margin: 0;
            font-size: 34px;
            font-weight: 700;
            letter-spacing: -0.5px;
        }

        .join-sub {
            margin: 10px 0 0;
            font-size: 15px;
            color: rgba(255,255,255,0.68);
        }

        .join-form {
            margin-top: 20px;
        }

        .form-section {
            border-top: 1px solid rgba(255,255,255,0.14);
            padding-top: 20px;
            margin-top: 20px;
        }

        .form-row {
            margin-bottom: 22px;
        }

        .form-label {
            display: block;
            margin-bottom: 12px;
            font-size: 16px;
            font-weight: 700;
            color: #f2f5f8;
        }

        .form-label .req {
            color: #ff4a4a;
        }

        .inline-type {
            display: flex;
            align-items: center;
            gap: 18px;
            flex-wrap: wrap;
        }

        .radio-wrap {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            font-size: 16px;
            color: #f2f5f8;
        }

        .radio-wrap input[type="radio"] {
            appearance: none;
            -webkit-appearance: none;
            width: 16px;
            height: 16px;
            border: 1px solid rgba(255,255,255,0.35);
            border-radius: 50%;
            background: transparent;
            margin: 0;
            position: relative;
            cursor: pointer;
        }

        .radio-wrap input[type="radio"]:checked {
            border-color: #ff6a3d;
        }

        .radio-wrap input[type="radio"]:checked::after {
            content: "";
            position: absolute;
            left: 3px;
            top: 3px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ff6a3d;
        }

        .input-wrap {
            position: relative;
        }

        .form-control {
            width: 100%;
            height: 58px;
            padding: 0 18px;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 0;
            background: rgba(10, 14, 20, 0.92);
            color: #fff;
            font-size: 16px;
            outline: none;
            transition: border-color .2s ease, box-shadow .2s ease;
        }

        .form-control::placeholder {
            color: rgba(255,255,255,0.45);
        }

        .form-control:focus {
            border-color: #ff5a2f;
            box-shadow: 0 0 0 3px rgba(255,90,47,0.08);
        }

        .form-control.error {
            border-color: #ff5a2f;
        }

        .input-with-btn {
            display: flex;
            align-items: stretch;
            gap: 0;
        }

        .input-with-btn .form-control {
            border-right: 0;
            min-width: 0;
        }

        .btn-check {
        		position:relative;
        		pointer-events: initial;
            width: 124px;
            min-width: 124px;
            border: 1px solid #ff5a2f;
            background: transparent;
            color: #ff5a2f;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            transition: all .2s ease;
        }

        .btn-check:hover {
            background: rgba(255,90,47,0.08);
        }

        .help-text {
            margin-top: 10px;
            font-size: 14px;
            line-height: 1.5;
            color: rgba(255,255,255,0.70);
        }

        .help-text.error {
            color: #ff8f8f;
        }

        .terms-wrap {
            border-top: 1px solid rgba(255,255,255,0.14);
            margin-top: 30px;
            padding-top: 24px;
        }

        .term-item {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 14px;
            font-size: 16px;
            color: #f1f1f1;
        }

        .term-item input[type="checkbox"] {
            appearance: none;
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            border: 1px solid rgba(255,255,255,0.35);
            border-radius: 4px;
            background: transparent;
            margin: 0;
            cursor: pointer;
            position: relative;
        }

        .term-item input[type="checkbox"]:checked {
            border-color: #ff6a3d;
            background: rgba(255,106,61,0.15);
        }

        .term-item input[type="checkbox"]:checked::after {
            content: "";
            position: absolute;
            left: 5px;
            top: 1px;
            width: 4px;
            height: 9px;
            border: solid #ff6a3d;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        .term-item label {
            cursor: pointer;
            line-height: 1.4;
        }

        .term-item .req {
            color: #ff4a4a;
            font-weight: 700;
        }

        .term-item .opt {
            color: rgba(255,255,255,0.72);
        }

        .btn-join {
            width: 100%;
            height: 56px;
            margin-top: 26px;
            border: 0;
            border-radius: 6px;
            background: #b74d36;
            color: #111;
            font-size: 24px;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s ease, transform .15s ease;
        }

        .btn-join:hover {
            background: #c7563d;
            transform: translateY(-1px);
        }

        .bottom-login {
            margin-top: 26px;
            text-align: center;
            font-size: 15px;
            color: rgba(255,255,255,0.62);
        }

        .bottom-login a {
            color: rgba(255,255,255,0.72);
            text-decoration: underline;
        }

        /* =========================
         member join  Responsive
        ========================= */

        @media (max-width: 768px) {
            .hero {
                padding: 20px 12px 40px;
                align-items: flex-start;
            }

            .join-box {
                max-width: 100%;
                padding: 22px 16px 24px;
                border-radius: 12px;
            }

            .join-title {
                font-size: 28px;
            }

            .join-sub {
                font-size: 14px;
            }

            .form-label {
                font-size: 15px;
            }

            .form-control {
                height: 52px;
                font-size: 15px;
                padding: 0 14px;
            }

            .btn-check {
                width: 98px;
                min-width: 98px;
                font-size: 14px;
            }

            .help-text,
            .term-item,
            .radio-wrap,
            .bottom-login {
                font-size: 14px;
            }

            .btn-join {
                height: 52px;
                font-size: 20px;
            }
        }