/* ------------------------------------------------
Token
------------------------------------------------ */
:root{
  /* color ---------- */
  --color-primary:#3342FF;

  --color-accent:#FF0000;
  --color-youtube:#FF0000;
  --color-youtube-light:#FF5353;
  --color-youtube-dark:#FF3E4A;
  --color-badge:linear-gradient(150deg, #AB33FF 12.73%, #2F43FF 90.24%), var(--waple-pick-badg-bg, #2944FF);

  --color-white:#ffffff;
  --color-white-900:rgb(255,255,255,.9);
  --color-white-800:rgb(255,255,255,.8);
  --color-white-700:rgb(255,255,255,.7);
  --color-white-600:rgb(255,255,255,.6);
  --color-white-500:rgb(255,255,255,.5);
  --color-white-400:rgb(255,255,255,.4);
  --color-white-300:rgb(255,255,255,.3);
  --color-white-200:rgb(255,255,255,.2);
  --color-white-100:rgb(255,255,255,.1);

  --color-gray-10:#FBFBFB;
  --color-gray-50:#F9F9F9;
  --color-gray-100:#F4F4F4;
  --color-gray-200:#F1F2F3;
  --color-gray-300:#EAEAEA;
  --color-gray-400:#D9D9D9;
  --color-gray-500:#C4C4C4;
  --color-gray-600:#9D9D9D;
  --color-gray-700:#7B7B7B;
  --color-gray-800:#3F3F3F;
  --color-gray-900:#1B1B1B;

  --color-black:#000000;
  --color-black-900:rgb(0,0,0,.9);
  --color-black-800:rgb(0,0,0,.8);
  --color-black-700:rgb(0,0,0,.7);
  --color-black-600:rgb(0,0,0,.6);
  --color-black-500:rgb(0,0,0,.5);
  --color-black-400:rgb(0,0,0,.4);
  --color-black-300:rgb(0,0,0,.3);
  --color-black-200:rgb(0,0,0,.2);
  --color-black-100:rgb(0,0,0,.1);
  --color-black-70:rgb(0,0,0,.07);
  --color-black-50:rgb(0,0,0,.05);

  /* color-text */
  --color-text-primary:var(--color-gray-900);
  --color-text-body:var(--color-gray-800);
  --color-text-desc:var(--color-gray-700);
  --color-text-sub:var(--color-gray-600);

  /* color-bg */
  --color-bg-nav:var(--color-gray-50);
  --color-bg-nav-current:var(--color-gray-300);
  --color-bg-category:var(--color-gray-200);
  --color-bg-tag:var(--color-gray-200);
  --color-bg-option:rgba(245,245,245,0.7);
  --color-bg-input:var(--color-gray-100);
  --color-bg-btn:var(--color-gray-200);
  --color-bg-btn-hover:#e6e6e7;
  --color-bg-primary-hover:#2d3ad2;

  /* color-border */
  --color-border:var(--color-black-100);
  --color-border-thum:var(--color-black-70);
  --color-border-list:var(--color-black-50);
  --color-border-input:var(--color-gray-500);

  /* color-shadow */
  --color-shadow:0px 8px 40px 0px var(--color-black-200);
  --color-shadow-thum:0px 4px 4px 0px rgba(0, 0, 0, 0.02), 0px 8px 8px 0px rgba(0, 0, 0, 0.03), 0px 14px 14px 0px rgba(0, 0, 0, 0.03);
  --color-shadow-waplepick:0px 1px 0px 0px rgba(0,0,0,0.03), 0px 8px 8px 0px rgba(0,0,0, 0.03), 0px 14px 14px 0px rgba(0,0,0,0.03);


  /* color-filter */
  --filter-white:invert(99%) sepia(99%) saturate(0%) hue-rotate(342deg) brightness(108%) contrast(100%);
  --filter-primary:invert(21%) sepia(91%) saturate(4300%) hue-rotate(237deg) brightness(100%) contrast(103%);

  /* unit ---------- */
  --unit:8px;
  --unit-050:calc(var(--unit)*0.5);   /* 4 */
  --unit-075:calc(var(--unit)*0.75);  /* 6 */
  --unit-150:calc(var(--unit)*1.5);   /* 12 */
  --unit-200:calc(var(--unit)*2);     /* 16 */
  --unit-250:calc(var(--unit)*2.5);   /* 20 */
  --unit-300:calc(var(--unit)*3);     /* 24 */
  --unit-400:calc(var(--unit)*4);     /* 32 */
  --unit-500:calc(var(--unit)*5);     /* 40 */
  --unit-600:calc(var(--unit)*6);     /* 48 */
  --unit-700:calc(var(--unit)*7);     /* 56 */
  --unit-800:calc(var(--unit)*8);     /* 64 */
  --unit-900:calc(var(--unit)*9);     /* 72 */
  --unit-full:999px;

  /* radius */
  --radius:var(--unit);         /* 8 */
  --radius-sm:var(--unit-050);  /* 4 */
  --radius-md:var(--unit-150);  /* 12 */
  --radius-lg:var(--unit-200);  /* 16 */
  --radius-circle:var(--unit-full);
}


/* ------------------------------------------------
Common 
------------------------------------------------ */
html, body, main{width:100%; height:100%}

body > div{overflow:hidden}
body.modal-open{overflow:hidden}
body.side-on .wrapper{overflow-y:hidden}
body.side-on .main-content{width:calc(100% - 400px); overflow-x:auto}
body.side-on .side-panel-wrapper{width:400px; display:flex; box-shadow:-1px 0 0 0 var(--color-border); z-index:1}
body.side-on .btn-playlist .ico-playlist{filter:invert(18%) sepia(72%) saturate(4101%) hue-rotate(237deg) brightness(104%) contrast(106%)}

.page{display:flex; flex-direction:column}
.page .wrapper{display:flex; flex-direction:column; position:relative; height:100%; min-height:100vh; margin-left:260px; overflow-x:auto; scrollbar-width:thin; -ms-overflow-style:thin}
.main{height:calc(100% - 60px); scrollbar-width:none; -ms-overflow-style:none; display:flex}
.main-content{width:100%; position:relative; margin:0 auto; padding-top:60px; padding-bottom:60px; scrollbar-width:thin; -ms-overflow-style:thin}

.blind{display:none!important}
button{display:flex; align-items:center; justify-content:center; background-repeat:no-repeat; background-position:center; background-size:100%; padding:0; transition:none}
.input-field[type="file"]{position:absolute; top:0; left:0; width:0; height:0; padding:inherit}
.btn-like.active .ico-like::before{background-image:url('../images/ico_like_on.svg')}
.btn-like.active{opacity:1!important}
.thum{position:relative; overflow:hidden; cursor:pointer; border-radius:var(--radius-sm); background-size:cover; background-position:center}
.thum::before{content:''; position:absolute; inset:0; border:1px solid var(--color-border-thum); border-radius:inherit; z-index:2; transition:border 0.1s ease-in-out}
.thum .thum-img{width:auto; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover}
.category{display:flex; align-items:center; gap:4px; flex:1; min-width:0; color:var(--color-text-desc)}
.category-item{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:300}

@media(max-width:1259px){
  body.side-on .main-content{width:100%; min-width:1000px}
  .page .wrapper{overflow-x:auto}
  body.side-on .wrapper{scrollbar-width:none; -ms-overflow-style:none}
  .btn-playlist,
  .side-panel-wrapper,
  body.side-on .side-panel-wrapper{display:none}
}

@media(max-width:1850px){
  body.side-on .music-list-view{grid-template-columns:repeat(3, 1fr)}
}

/* ------------------------------------------------
Page-components 
------------------------------------------------ */
.page-components{padding-top:80px; padding-bottom:80px}
.page-components .comp-heading{font-size:32px; font-weight:700}
.page-components .comp-section{padding-bottom:80px; padding-top:80px}
.page-components .comp-section.column > *:nth-child(n+3){margin-top:60px}
.page-components .comp-title{margin-bottom:24px; font-size:20px; color:var(--color-primary); font-weight:700}
.page-components .comp-items{display:flex; gap:40px; align-items:flex-start}
.page-components .header{position:relative}
.page-components .option-select{position:relative; display:flex; top:0; left:0; z-index:0; transform:inherit}
.page-components .result{height:auto}


/* ------------------------------------------------
Component
------------------------------------------------ */
/* Contanier ---------- */
.container{min-width:1000px; max-width:1480px; margin:0 auto; padding-left:40px; padding-right:40px}
.container-sm{width:780px; min-width:780px; max-width:none; margin:0 auto; padding-left:40px; padding-right:40px}

/* Color ---------- */
.comp-colors{display:flex; flex-wrap:wrap; gap:16px}
.color-box{width:250px; padding:16px; font-size:18px; display:flex; flex-direction:column; align-items:center; justify-content:center}
.color-box .color-code{margin-top:4px; font-size:14px; font-weight:300}
.--color-primary{background-color:var(--color-primary); color:var(--color-white)}
.--color-accent{background-color:var(--color-accent); color:var(--color-white)}
.--color-youtube{background-color:var(--color-youtube); color:var(--color-white)}
.--color-badge{background:linear-gradient(150deg, #AB33FF 12.73%, #2F43FF 90.24%), var(--waple-pick-badg-bg, #2944FF); color:var(--color-white)}
.--color-text-primary{background-color:var(--color-text-primary); color:var(--color-white)}
.--color-text-body{background-color:var(--color-text-body); color:var(--color-white)}
.--color-text-desc{background-color:var(--color-text-desc); color:var(--color-white)}
.--color-text-sub{background-color:var(--color-text-sub); color:var(--color-white)}
.--color-bg-nav{background-color:var(--color-bg-nav)}
.--color-bg-input{background-color:var(--color-bg-input)}
.--color-bg-category{background-color:var(--color-bg-nav)}
.--color-bg-btn{background-color:var(--color-bg-btn)}
.--color-border{border:1px solid var(--color-border)}
.--color-border-thum{border:1px solid var(--color-border-thum)}
.--color-border-list{border:1px solid var(--color-border-list)}
.--color-shadow-thum{box-shadow:var(--color-shadow-thum)}

/* Logo ---------- */
.logo{width:100px; height:24px; background-image:url('../images/logo.svg'); flex-shrink:0}
.logo-md{width:88px; height:88px; background-image:url('../images/logo_md.svg')}
.logo, .logo-md{background-position:center; background-repeat:no-repeat; background-size:100%}


/* Banner ---------- */
.notice-banner{position:relative; min-height:56px; display:flex; align-items:center; justify-content:center; gap:16px; border-radius:var(--radius); color:var(--color-white)}
.notice-banner.default{background-color:#4F67ED}
.notice-banner.default .banner-link{margin-left:60px; margin-right:60px; padding-top:16px; padding-bottom:16px; flex:1; display:flex; align-items:center; justify-content:center; gap:16px; line-height:24px}
.notice-banner.default .banner-link::before{content:''; width:24px; height:24px; background-image:url('../images/ico_notification.svg'); display:inline-block}
.notice-banner.default .btn-close{width:20px; height:20px; flex-shrink:0; position:absolute; right:16px; top:50%; transform:translateY(-50%)}
.notice-banner.default .btn-close .ico-close-wh{width:20px; height:20px}
.notice-banner.represent{min-height:90px; padding-top:12px; padding-bottom:12px; gap:24px; background-color:#282344}
.notice-banner.represent .title-wrap{max-width:660px}
.notice-banner.represent .title-wrap .notice-title{font-size:18px; font-weight:500}
.notice-banner.represent .title-wrap .notice-desc{font-size:14px; font-weight:300; color:var(--color-white-600)}


/* Title ---------- */
/* page-title */
.page-title{display:flex; align-items:center; gap:8px; font-size:28px; font-weight:600; line-height:1.3; color:var(--color-text-primary)}
.page-title .ico-arrow{display:none; background-image:url('../images/ico_arrow.svg'); background-size:14px 22px; rotate:180deg; flex-shrink:0}
.page-title.arrow .ico-arrow{display:inline-block; margin-left:-5px}
.page-title + *{margin-top:24px}

/* section-title */
.section-title{display:flex; align-items:center; gap:2px; font-size:18px; font-weight:600; line-height:1.4; color:var(--color-text-primary); cursor:pointer}
.section-title.arrow::after{content:''; width:16px; height:16px; background-image:url('../images/ico_arrow.svg'); flex-shrink:0; background-repeat:no-repeat; background-position:center}
.section-title .user-name{color:var(--color-primary)}


/* Menu-tab ---------- */
.menu-tab{display:flex; gap:16px; margin-bottom:24px}
.menu-tab .menu-item{min-width:28px; padding-top:6px; padding-bottom:6px; text-align:center; font-weight:600; cursor:pointer; flex-shrink:0}
.menu-tab .menu-item.active{color:var(--color-primary); border-bottom:3px solid var(--color-primary)}
.menu-tab .menu-item .menu-link{padding-top:8px; padding-bottom:8px}


/* Profile ---------- */
.profile-photo{width:100px; height:100px; border-radius:var(--radius-circle); overflow:hidden; transition:all 0.3s ease-in-out}
.profile-photo.active::before{border:4px solid var(--color-primary)}
.profile-photo.size-sm{width:32px; height:32px; box-shadow:0px 2px 3px 0px var(--color-black-100)}


/* Icon ---------- */
/* ico */
.icon-section .comp-items{gap:16px}
.ico{width:24px; height:24px; display:flex; justify-content:center; align-items:center; flex-shrink:0}
.ico::before, 
.ico-result::before{content:''; width:100%; height:100%; display:inline-block; background-repeat:no-repeat; background-position:center; flex-shrink:0; background-size:100%}
.ico-play::before{background-image:url('../images/ico_play.svg')}
.ico-play-line::before{background-image:url('../images/ico_play_line.svg')}
.ico-pause::before{background-image:url('../images/ico_pause.svg')}
.ico-more::before{background-image:url('../images/ico_more.svg')}
.ico-repeat::before{background-image:url('../images/ico_player_repeat.svg')}
.ico-one-music::before{background-image:url('../images/ico_one_music.svg')}
.ico-shuffle::before{background-image:url('../images/ico_player_shuffle.svg')}
.ico-previous::before{background-image:url('../images/ico_player_previous.svg')}
.ico-next::before{background-image:url('../images/ico_player_next.svg')}
.ico-volume::before{background-image:url('../images/ico_volume.svg'); width:18px; height:18px}
.ico-volume-none::before{background-image:url('../images/ico_volume_none.svg'); width:18px; height:18px}
.ico-playlist::before{background-image:url('../images/ico_playlist.svg')}
.ico-playlist-add::before{background-image:url('../images/ico_playlist_add.svg')}
.ico-close::before{background-image:url('../images/ico_close.svg')}
.ico-close-wh::before{background-image:url('../images/ico_close_wh.svg')}
.ico-confirm::before{background-image:url('../images/ico_confirm.svg'); background-size:80%}
.ico-lyrics::before{background-image:url('../images/ico_lyrics.svg')}
.ico-info::before{background-image:url('../images/ico_info.svg')}
.ico-lang::before{background-image:url('../images/ico_lang.svg')}
.ico-text-delete::before{background-image:url('../images/ico_text_delete.svg')}
.ico-search::before{background-image:url('../images/ico_search.svg')}
.ico-newsong::before{background-image:url('../images/ico_newsong.svg')}
.ico-audio::before{background-image:url('../images/ico_audio.svg')}
.ico-mylist::before{background-image:url('../images/ico_mylist.svg')}
.ico-mylist-add::before{background-image:url('../images/ico_mylist_add.svg')}
.ico-like::before{background-image:url('../images/ico_like.svg')}
.ico-like.active::before{background-image:url('../images/ico_like_on.svg')}
.ico-like-sm::before{background-image:url('../images/ico_like.svg'); width:10px; height:10px; background-size:10px; background-color:unset}
.ico-recently::before{background-image:url('../images/ico_recently.svg')}
.ico-most::before{background-image:url('../images/ico_most.svg')}
.ico-mytag::before{background-image:url('../images/ico_mytag.svg')}
.ico-notice::before{background-image:url('../images/ico_notice.svg')}
.ico-apply::before{background-image:url('../images/ico_apply.svg')}
.ico-choir::before{background-image:url('../images/ico_choir.svg')}
.ico-setting::before{background-image:url('../images/ico_setting.svg')}
.ico-logout::before{background-image:url('../images/ico_logout.svg')}
.ico-youtube::before{background-image:url('../images/ico_youtube.svg')}
.ico-number::before{background-image:url('../images/ico_number.svg')}
.ico-download::before{background-image:url('../images/ico_download.svg')}
.ico-delete::before{background-image:url('../images/ico_delete.svg')}
.ico-tip::before{background-image:url('../images/ico_tip.svg'); width:18px; height:18px}
.ico-music::before{background-image:url('../images/ico_music.svg')}
.ico-plus::before{background-image:url('../images/ico_plus.svg')}
.ico-trans::before{background-image:url('../images/ico_trans.svg'); width:40px; height:40px}
.ico-trans-on::before{background-image:url('../images/ico_trans_on.svg'); width:40px; height:40px}
.ico-tag::before{background-image:url('../images/ico_tag.svg')}
.ico-edit::before{background-image:url('../images/ico_edit.svg')}
.ico-camera::before{background-image:url('../images/ico_camera.svg')}
.ico-time::before{background-image:url('../images/ico_time.svg')}
.ico-mode::before{background-image:url('../images/ico_mode.svg')}
.ico-photo-add::before{background-image:url('../images/ico_photo_add.svg')}
.ico-move::before{background-image:url('../images/ico_move.svg'); opacity:0.4}
.ico-comments::before{background-image:url('../images/ico_comments.svg')}
.ico-comments-opened::before{background-image:url('../images/ico_comments_opened.svg')}
.ico-file-download::before{background-image:url('../images/ico_file_download.svg')}
.ico-clip::before{background-image:url('../images/ico_clip.svg')}
.ico-sound::before{background-image:url('../images/ico_sound.svg')}
.ico-group-repeat::before{background-image:url('../images/ico_group_repeat.svg')}
.ico-guide::before{background-image:url('../images/ico_guide.svg')}
.ico-mediacast::before{background-image:url('../images/ico_mediacast.svg')}

/* lottie */
.lottie-loading{width:80px; height:80px; margin:24px auto}

/* 3d */
.ico-result{width:80px; height:80px; display:flex; justify-content:center; align-items:center}
.ico-3d-speaker::before{background-image:url('../images/ico_3d_speaker.png')}
.ico-3d-tag::before{background-image:url('../images/ico_3d_tag.png')}
.ico-3d-music::before{background-image:url('../images/ico_3d_music.gif')}
.ico-3d-like::before{background-image:url('../images/ico_3d_like.gif')}
.ico-3d-time::before{background-image:url('../images/ico_3d_time.gif')}
.ico-3d-lyrics::before{background-image:url('../images/ico_3d_lyrics.gif')}
.ico-3d-headset::before{background-image:url('../images/ico_3d_headset.png')}
.ico-3d-search::before{background-image:url('../images/ico_3d_search.gif')}
.ico-3d-bell::before{background-image:url('../images/ico_3d_bell.gif')}
.ico-3d-apply::before{background-image:url('../images/ico_3d_apply.gif')}


/* SiteHeader ---------- */
.header{width:260px; height:100%; position:fixed; top:0; bottom:0; left:0; overflow-y:auto; z-index:10000; padding:32px 24px; display:flex; flex-direction:column; justify-content:space-between; gap:32px; background-color:var(--color-bg-nav); box-shadow:1px 0 0 0 var(--color-border)}
.header .header-body{display:flex; flex-direction:column; gap:32px}

/* nav-search-input */
.nav-search-input{display:flex; align-items:center; gap:6px; height:32px; padding:6px 12px; background-color:var(--color-white); border-radius:var(--radius-sm); box-shadow:0 0 0 1px var(--color-border); position:relative}
.nav-search-input .ico-search{width:18px; height:18px; background-size:18px; flex-shrink:0; filter:invert(71%) sepia(14%) saturate(13%) hue-rotate(346deg) brightness(87%) contrast(83%)}
.nav-search-input .input-field{width:100%; padding:0}
.nav-search-input .input-field::placeholder{color:var(--color-gray-600)}
.nav-search-input.current{box-shadow:0 0 0 2px var(--color-primary)}

/* navigation */
.navigation{display:flex; flex-direction:column; gap:24px}
.navigation .nav-menu .menu-item{display:flex; align-items:center}
.navigation .nav-menu .menu-item a{display:flex; gap:8px; width:100%; min-height:32px; padding:4px 6px; font-size:15px; line-height:24px}
.navigation .nav-menu .nav-group{margin-bottom:8px; padding-left:8px; padding-right:8px; font-size:13px; color:var(--color-text-sub)}
.navigation .nav-menu .menu-item.active{background-color:var(--color-bg-nav-current); border-radius:var(--radius-sm)}
.navigation .nav-menu .menu-item.active .ico{filter:invert(22%) sepia(59%) saturate(6354%) hue-rotate(237deg) brightness(100%) contrast(102%)}

/* 사용 안내 가이드 */
.btn-guide{width:fit-content; font-size:14px; gap:6px; padding:10px 16px; background-color:var(--color-white); border:1px solid var(--color-border); border-radius:6px; line-height:1.4; align-self:flex-start}
.btn-guide .ico{width:16px; height:16px}

/* player ---------- */
.player{position:sticky; top:0; z-index:5000}

.player-wrapper{width:100%; min-width:1000px; background-color:var(--color-white); box-shadow:0 1px 0 0 var(--color-border); overflow:visible}
.player .player-inner{width:100%; height:60px; padding:0 40px; display:flex; align-items:center; justify-content:space-between; gap:32px}

/* music-control */
.player .music-control{width:100%; display:flex; align-items:center; justify-content:center; gap:8px; flex:1}
.player .music-control .btn-player{width:32px; height:32px; display:flex; align-items:center; justify-content:center; background-size:100%; background-color:inherit}
.player .music-control .btn-player .ico{width:100%; height:100%}
.player .music-control .btn-player .ico-repeat,
.player .music-control .btn-player .ico-shuffle{width:24px; height:24px; opacity:0.4}
.player .music-control .btn-player .ico-repeat.on,
.player .music-control .btn-player .ico-shuffle.on,
.player .music-control .btn-player .ico-one-music.on{opacity:1; filter:invert(18%) sepia(72%) saturate(4101%) hue-rotate(237deg) brightness(104%) contrast(106%)}
/* music-info */
.player .music-info{min-width:400px; display:flex; align-items:flex-start; gap:8px; flex:1}
.player .music-info .thum{width:44px; height:44px; border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; position:relative; box-sizing:border-box; flex-shrink:0}
.player .music-info .thum .overlay{display:flex; align-items:center; justify-content:center; position:absolute; inset:0; background-color:var(--color-black-500); opacity:0; transition:opacity 0.2s ease-in-out}
.player .music-info .thum .overlay::before{content:''; width:24px; height:24px; background-image:url('../images/ico_expand.svg'); background-size:100%}
.player .music-info .thum:hover .overlay{opacity:1}
.player .music-info .track{max-width:500px; height:44px; display:flex; flex-direction:column; align-items:center; position:relative; overflow:hidden; flex:1}
.player .music-info .track .music-title{width:80%; padding-left:8px; padding-right:8px; color:var(--color-text-primary); font-size:13px; font-weight:500; text-align:center; white-space:nowrap; overflow:hidden}
.player .music-info .track .category-item{width:80%; display:flex; justify-content:center; align-items:center; font-size:12px; color:var(--color-text-desc); white-space:nowrap; overflow:hidden}
.player .music-info .track .playback-time{width:100%; display:flex; justify-content:space-between; position:absolute; bottom:6px; font-size:11px; color:rgba(0, 0, 0, 0.35); line-height:1.2}
.player .music-info .track .playback-progress{width:100%; height:3px; background-color:#E4E4E4; border-radius:var(--radius-circle); overflow:hidden; position:absolute; bottom:0}
.player .music-info .track .playback-progress .playback-seek{width:20%; height:3px; background-color:var(--color-primary); border-radius:var(--radius-circle)}
/* control-cluster */
.control-cluster{width:100%; display:flex; align-items:center; gap:32px; flex:1}
.control-cluster .volume-control{width:100%; display:flex; align-items:center; justify-content:center; gap:8px; flex:1; min-width:0}
.control-cluster .volume-control .btn-volume .ico-volume::before,
.control-cluster .volume-control .btn-volume .ico-volume-none::before{width:18px; height:18px; filter:invert(41%) sepia(0%) saturate(2%) hue-rotate(95deg) brightness(95%) contrast(88%)}
.control-cluster .volume-control .volume-slider{width:100px; height:4px; background:var(--color-black-100); border-radius:var(--unit-full); outline:none; cursor:pointer}
.control-cluster .volume-control .volume-slider::-webkit-slider-thumb{-webkit-appearance:none; width:14px; height:14px; border:1px solid var(--color-black-500); border-radius:var(--unit-full); box-shadow:0 0 2px var(--color-black-200); cursor:pointer; background:var(--color-white); box-shadow:0px 1px 1px 0px rgba(0, 0, 0, 0.08)}
.btn-playlist{width:28px; height:28px; flex-shrink:0}

/* PlayerEmpty ---------- */
.player-empty .music-control .btn-player .ico-repeat,
.player-empty .music-control .btn-player .ico-shuffle{opacity:1}
.player-empty .music-control .ico::before{filter:invert(84%) sepia(0%) saturate(24%) hue-rotate(219deg) brightness(95%) contrast(91%)}
.player-empty .music-info .thum{display:flex; align-items:center; justify-content:center; background-color:var(--color-gray-100)}
.player-empty .music-info .thum .ico-music{opacity:0.6}
.player-empty .music-info .track{justify-content:center; border:1px solid var(--color-border); border-radius:var(--radius-sm)}
.player-empty .music-info .track .ico-logo::before{background-image:url('../images/ico_logo.svg')}


/* List ---------- */
/* waplepick */
.waplepick{display:flex; align-items:center; gap:16px}
.waplepick-item{width:100%; position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--color-shadow-waplepick); cursor:pointer; padding-top:130%}
.waplepick-item .thum-img{position:absolute; inset:0; object-fit:cover}
.waplepick-item .waplepick-badge{padding:4px 10px; position:absolute; top:20px; left:20px; z-index:2; background:var(--color-badge); border-radius:var(--radius-circle); font-size:13px; line-height:1.4; color:var(--color-white)}
.waplepick-item .info{min-height:160px; padding:20px; position:absolute; bottom:0; left:0; right:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; gap:8px}
.waplepick-item .info .waplepick-title{font-size:15px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.waplepick-item .info .youtube{display:flex; align-items:center; font-size:13px; position:relative; z-index:2; display:inline-flex; align-items:center; font-weight:600}
.waplepick-item .info .youtube .ico-youtube{width:16px; height:16px; margin-right:4px}
.waplepick-item .info .youtube::after{content:''; width:8px; height:12px; background-image:url('../images/ico_arrow.svg'); background-repeat:no-repeat; background-position:center; background-size:6px; flex-shrink:0; margin-left:4px; filter:invert(86%) sepia(17%) saturate(63%) hue-rotate(164deg) brightness(95%) contrast(90%)}
.waplepick-item .waplepick-play{width:60px; height:60px; display:flex; align-items:center; justify-content:center; border-radius:var(--unit-full); backdrop-filter:blur(4px); opacity:0; transition:opacity 0.1s ease-in-out; position:absolute; z-index:3; top:50%; left:50%; transform:translate(-50%, -40%); opacity:0; transition:opacity 0.2s ease, transform 0.3s ease; pointer-events:auto}
.waplepick-item .waplepick-play::before{content:''; width:32px; height:32px; background-image:url('../images/ico_player_play.svg'); filter:invert(100%) sepia(100%) saturate(23%) hue-rotate(15deg) brightness(105%) contrast(105%)}
.waplepick-item:hover .waplepick-play{opacity:1}
.waplepick-item:hover .waplepick-play:hover{background-color:var(--color-primary)}
.waplepick-item:hover .waplepick-play{opacity:1; transform:translate(-50%, -50%)}
.waplepick-item .overlay{position:absolute; inset:0; z-index:1; text-decoration:none; pointer-events:none; opacity:0; transition:opacity 0.3s ease}
.waplepick-item:hover .overlay{opacity:1}

.waplepick-slider{box-sizing:border-box}
.waplepick-slider .swiper-slide{width:calc((100% - 64px) / 5)}

@media(max-width:1480px){
  .waplepick-slider .swiper-slide{width:calc((100% - 48px) / 4)}
}

/* waplepick-dark */
.waplepick-item.dark .info{background:linear-gradient(0deg, var(--color-black-700) 40%, rgb(0,0,0,0) 98%)}
.waplepick-item.dark .info .waplepick-title{color:var(--color-white)}
.waplepick-item.dark .info .youtube{color:var(--color-white-800)}
.waplepick-item.dark .info .youtube span{color:var(--color-youtube-dark)}
.waplepick-item.dark .info .youtube::after{content:''; filter:invert(86%) sepia(17%) saturate(63%) hue-rotate(164deg) brightness(95%) contrast(90%)}
.waplepick-item.dark .waplepick-play{background-color:var(--color-white-200)}
.waplepick-item.dark .overlay{background-color:var(--color-black-300)}
/* waplepick-light */
.waplepick-item.light .info{background:linear-gradient(0deg, var(--color-white-700) 50%, rgb(255,255,255,0) 90%)}
.waplepick-item.light .info .waplepick-title{font-weight:600; color:var(--color-text-primary)}
.waplepick-item.light .info .youtube{color:var(--color-text-sub)}
.waplepick-item.light .info .youtube span{color:var(--color-youtube-light)}
.waplepick-item.light .waplepick-play{background-color:var(--color-black-200)}
.waplepick-item.light .overlay{background-color:var(--color-white-300)}

/* music-list-view */
.music-list-view{display:grid; grid-template-columns:repeat(4, 1fr); column-gap:16px; padding-bottom:8px}
/* music-item */
.music-list-view .music-item{display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--color-border-list); position:relative; line-height:1.3}
.music-list-view .music-item .music-link{display:flex; gap:10px; align-items:center; flex:1; min-width:0; cursor:pointer}
.music-list-view .music-item .thum{width:40px; height:40px; flex-shrink:0}
.music-list-view .music-item .music-info{width:100%; display:flex; flex-direction:column; gap:2px; font-size:12px; min-width:0}
.music-list-view .music-item .music-info .music-title{font-size:14px; font-weight:500; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden}
.music-list-view .music-item .music-info .category{white-space:nowrap; line-height:16px}
.music-list-view .music-item .music-info .category .ico-youtube{display:none; width:16px; height:16px}
.music-list-view .music-item.youtube .category .ico-youtube{display:inline-block}
.music-list-view .music-item .music-info .category span + span::before{content:''; display:inline-block; width:2px; height:2px; background-color:var(--color-gray-400); border-radius:var(--radius-circle); margin:0 3px; vertical-align:middle}
.music-list-view .music-item .btn-wrap{display:flex; gap:8px}
.music-list-view .music-item .btn-play{opacity:0}
.music-list-view .music-item:hover .btn-play{opacity:1}
.music-list-view .option-more{top:40px; right:0}

@media(max-width:1480px){
  .music-list-view{grid-template-columns:repeat(3, 1fr)}
  .music-list-view .music-item:last-child{display:none} /* 임시처리 */
}

/* music-item-lyrics */
.music-item.lyrics-item .music-link{align-items:flex-start!important}
.music-item.lyrics-item .music-info .guide-number{color:var(--color-text-sub)}
.music-item.lyrics-item .music-info .music-lyrics{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:300; color:var(--color-text-sub)}


/* playlist-list */
.playlist-list{display:grid; grid-template-columns:repeat(6, 1fr); gap:16px; column-gap:16px; row-gap:32px; margin-top:24px}
.playlist-list .playlist-item{width:100%; position:relative; cursor:pointer; flex:1}
.playlist-list .playlist-item.active .thum::before{border:4px solid var(--color-primary); z-index:10}
.playlist-list .playlist-item .thum{width:100%; border-radius:var(--radius); box-shadow:var(--color-shadow-thum); position:relative}
.playlist-list .playlist-item .thum .thum-img{padding-bottom:100%}
.playlist-list .playlist-item .info{display:flex; width:100%; height:50%; position:absolute; bottom:0; left:0; right:0; padding:16px; justify-content:flex-end; align-items:flex-end; background:linear-gradient(0deg, var(--color-black-300) 50%, rgb(0,0,0,0) 90%); font-size:15px; color:var(--color-white); transition:opacity 0.2s ease}
.playlist-list .playlist-item:hover .info{opacity:0}
.playlist-list .playlist-item .info .number{display:flex; gap:2px; align-items:center}
.playlist-list .playlist-item .info .ico-number{width:16px; height:16px}
.playlist-list .playlist-item .playlist-title{margin-top:12px; font-size:15px; font-weight:500; color:var(--color-text-primary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.playlist-list .playlist-item .thum::after{content:''; position:absolute; background-color:rgb(0,0,0,0.4); inset:0; opacity:0}
.playlist-list .playlist-item .btn-wrap{padding:16px; position:absolute; inset:0; display:flex; justify-content:space-between; align-items:flex-end; z-index:10}
.playlist-list .playlist-item .btn-play,
.playlist-list .playlist-item .btn-more{width:30px; height:30px; background-color:var(--color-white-400); border-radius:var(--radius-circle); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.3s ease}
.playlist-list .playlist-item .thum::after{transition:opacity 0.2s ease}
.playlist-list .playlist-item:hover .thum::after,
.playlist-list .playlist-item:hover .btn-wrap,
.playlist-list .playlist-item:hover .btn-wrap > *{opacity:1}
.playlist-list .playlist-item .btn-play::before,
.playlist-list .playlist-item .btn-more::before{content:''; display:block; background-size:100%; filter:invert(100%) sepia(100%) saturate(23%) hue-rotate(15deg) brightness(105%) contrast(105%)}
.playlist-list .playlist-item .btn-play::before{width:16px; height:16px; background-image:url('../images/ico_player_play.svg')}
.playlist-list .playlist-item .btn-more::before{width:24px; height:24px; background-image:url('../images/ico_more.svg')}
.playlist-list .playlist-item .btn-play:hover,
.playlist-list .playlist-item .btn-more:hover{background-color:var(--color-primary)}
.playlist-list .option-more{right:10px; top:210px}

@media(max-width:1480px){
  .playlist-list{grid-template-columns:repeat(5, 1fr)}
  .playlist-list .playlist-item:nth-child(6){display:none}/* 임시처리 */
}


/* lists */
.lists{margin-top:24px}
/* list-label */
.list-label{margin-bottom:12px; display:flex; gap:40px; margin-right:6px}
.list-label .label-item{font-size:14px; color:var(--color-text-desc)}
.col-item{flex:1}
.col-title{padding-right:6px}
.col-time{max-width:140px}
/* music-list */
.music-list .music-item{display:flex; height:54px; padding:6px; align-items:center; gap:40px; border-radius:var(--radius-sm); position:relative; cursor:pointer}
.music-list .music-item:nth-of-type(odd){background-color:var(--color-gray-10)}
.music-list .music-item:hover{background-color:var(--color-gray-200)}
.music-list .music-item .btn-like{height:100%; inset-inline-start:-26px; padding:0; position:absolute; top:50%; transform:translateY(-50%); width:26px; z-index:10; background:none; opacity:0}
.music-list .music-item .btn-like.active .ico-like-sm::before{background-image:url('../images/ico_like_on.svg')}
.music-list .music-item .track{width:100%; display:flex; gap:10px; align-items:center; min-width:0}
.music-list .music-item .thum{width:40px; height:40px; flex-shrink:0}
.music-list .music-item .music-title{font-size:14px; font-weight:500; color:var(--color-text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.music-list .music-item .category{font-size:13px; flex-shrink:0}
.music-list .music-item .category .ico-youtube{display:none; width:16px; height:16px}
.music-list .music-item.youtube .category .ico-youtube{display:inline-block}
.music-list .music-item .category .category-item{flex-shrink:0; flex:1}
.music-list .music-item .control{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-shrink:0}
.music-list .music-item .time{font-size:13px; color:var(--color-text-desc); font-weight:300}
.music-list .music-item .btn-wrap{display:flex}
.music-list .music-item .btn-wrap button{width:28px; height:28px; display:flex; align-items:center; justify-content:center}
.music-list .music-item .btn-wrap .btn-more{background-size:28px}
.music-list .music-item .btn-play{opacity:0}
.music-list .music-item:hover .btn-play{opacity:1}
.music-list .music-item.active{background-color:var(--color-primary)}
.music-list .music-item:hover .btn-like,
.music-list .music-item.active .btn-like{opacity:1}
.music-list .music-item.active .music-title, 
.music-list .music-item.active .category,
.music-list .music-item.active .time,
.music-list .music-item.active .guide-info > *{color:var(--color-white)!important}
.music-list .music-item.active .music-title{font-weight:400}
.music-list .music-item.active .category, 
.music-list .music-item.active .time,
.music-list .music-item.active .guide-info > *{font-weight:300}
.music-list .music-item.active .btn-wrap button{filter:var(--filter-white)}
.music-list .music-item.active .ico-move::before{opacity:1}
.music-list .option-more{top:60px; right:0}
/* music-item > guide */
.music-list .music-item .guide-info{display:none; width:50px; text-align:center}
.music-list .music-item .guide-info .appx{display:none; font-size:11px; color:var(--color-text-desc)}
.music-list .music-item .guide-info .guide-number{font-size:12px; font-weight:700}
.music-list .music-item.guide .guide-info{display:block}
.music-list .music-item.guide.appx .guide-info .appx{display:block}

/* Option ---------- */
.floating-box{width:fit-content; min-width:160px; max-width:400px; display:flex; border-radius:var(--radius); background-color:var(--color-bg-option); box-shadow:0px 8px 40px 0px var(--color-black-200), 0 0 0 0.5px var(--color-border); backdrop-filter:blur(15px); overflow-y:auto; padding-right:0; box-sizing:border-box; position:relative; scrollbar-width:none; -ms-overflow-style:none}
.floating-box::-webkit-scrollbar{width:8px; background:transparent}
.floating-box::-webkit-scrollbar-track{background:transparent}
.floating-box::-webkit-scrollbar-thumb{border-radius:4px; transition:background-color 0.3s ease,transform 0.3s ease}
.floating-box .select{min-width:160px}
.floating-box .select .option-item{display:flex; min-height:32px; padding:8px 10px; color:var(--color-text-primary); font-size:13px; cursor:pointer}
.floating-box .select .option-item:not(:last-child){box-shadow:0 0 0 0.5px var(--color-border-list)}
.floating-box .select .option-item:hover{background-color:rgba(0, 0, 0, 0.05)}

/* option-lang */
.option-lang{height:280px; overflow-y:auto; position:absolute; top:50px; left:40px; z-index:100}
.option-lang .my-lang{flex-direction:column; gap:4px}
.option-lang .my-lang .my-title{display:inline-flex; gap:2px; align-items:center}
.option-lang .my-lang .my-title .btn-lang-setting{width:18px; height:18px}
.option-lang .my-lang .my-title .btn-lang-setting .ico-setting{width:18px; height:18px}


.option-lang .my-lang .my-item{font-size:12px; color:var(--color-text-desc); line-height:1.4}
.option-lang .my-lang .my-item::after{content:', '}
.option-lang .my-lang .my-item:last-child::after{content:''}
.option-lang .option-item.active{color:var(--color-primary); font-weight:500}

/* option-more */
.option-more{position:absolute; z-index:50; overflow:hidden}
.option-more .option-item{gap:16px; justify-content:space-between}
.option-more .option-item .ico{width:16px; height:16px}
.option-more .option-item .download-text{display:flex; gap:4px; align-items:center}
.option-more .option-item .download-text span{font-size:12px}
.option-more .option-item .download-text.complete span{color:var(--color-primary)}
.option-more .option-item.disabled,
.option-more .option-item.disabled + .ico-download::before{opacity:0.3; pointer-events:none}
/* result-search */
.recent-search{width:280px; min-height:320px; display:none; flex-direction:column; padding:8px; position:absolute; top:40px; left:0; z-index:10}
.recent-search.active{display:flex}
.recent-search .recent-head{width:100%; display:flex; justify-content:space-between; gap:16px; flex-shrink:0; padding:8px 6px; z-index:1}
.recent-search .recent-title{font-size:14px; font-weight:600; color:var(--color-text-primary); line-height:1.3}
.recent-search .btn-delete-all{font-size:12px; color:var(--color-text-sub); flex-shrink:0}
.recent-search .recent-list{min-height:240px; max-height:560px; flex:1; z-index:1; overflow-y:auto; padding-right:0; box-sizing:border-box; position:relative; scrollbar-width:none; -ms-overflow-style:none; cursor:pointer}
.recent-search::-webkit-scrollbar{width:8px; background:transparent}
.recent-search::-webkit-scrollbar-track{background:transparent}
.recent-search::-webkit-scrollbar-thumb{border-radius:4px; transition:background-color 0.3s ease,transform 0.3s ease}
.recent-search .recent-list .recent-item{display:flex; gap:10px; padding-left:8px; padding-right:8px; font-size:14px; line-height:1.3}
.recent-search .recent-list .recent-item .recent-link{padding-top:14px; padding-bottom:14px; display:flex; gap:6px; flex:1; line-height:18px}
.recent-search .recent-list .recent-item .ico{width:18px; height:18px; background-size:18px}
.recent-search .recent-list .recent-item:not(:last-child){box-shadow:0 0 0 0.5px var(--color-border-list)}
.recent-search .recent-list .recent-item .btn-close{background:none; position:inherit}
.recent-search .recent-list .recent-item .ico-close::before{background-size:16px; filter:invert(45%) sepia(15%) saturate(0%) hue-rotate(185deg) brightness(103%) contrast(96%)}
.recent-search .recent-list .recent-item:hover{background-color:var(--color-primary); color:var(--color-white); border-radius:var(--radius-sm); border-color:transparent}
.recent-search .recent-list .recent-item:hover .ico-search,
.recent-search .recent-list .recent-item:hover .btn-close .ico-close::before{filter:var(--filter-white)}
/* result-search no-data */
.recent-search .no-data-search{display:flex; padding:24px; justify-content:center; align-items:center; flex:1}
.recent-search .no-data-search .recent-text{width:100%; height:100%; font-size:13px; color:var(--color-text-desc); text-align:center}
.recent-search .no-data-search .recent-text::before{content:''; width:80px; height:80px; background-image:url('../images/ico_3d_search.gif'); background-size:100%; display:block; margin-bottom:8px; margin-left:auto; margin-right:auto}

/* Button ---------- */
.comp-btns{display:flex; gap:8px; align-items:flex-start}
.btn{min-width:100px; max-width:240px; min-height:40px; padding:6px 16px; display:inline-flex; justify-content:center; align-items:center; gap:4px; font-size:15px; font-weight:500; line-height:1.4; background-color:var(--color-bg-btn); border-radius:var(--unit-075); cursor:pointer}
.btn .btn-ico{width:20px; height:20px}
.btn:hover{background-color:var(--color-bg-btn-hover)}
.btn.active{background-color:var(--color-primary); color:var(--color-white); font-weight:400}
.btn.active .btn-ico{filter:var(--filter-white)}
.btn.active:hover{background-color:var(--color-bg-primary-hover)}
.btn.size-sm{min-height:32px; font-size:13px}
.btn.size-md{min-height:48px}
.btn.size-lg{min-height:56px; max-width:inherit; border-radius:var(--radius)}
.btn.size-xl{min-height:72px}
.btn-youtube{gap:0; cursor:pointer}
.btn-youtube .ico-youtube{margin-right:4px}
.btn-youtube span{color:var(--color-youtube)}

/* form-check  */
.checkbox-group{display:flex; flex-wrap:wrap; column-gap:24px}
.form-check{margin:0; width:fit-content}
.form-check input{display:none}
.form-check .form-check-input .check-ico{border-radius:var(--radius-circle)}
.form-check .form-check-input:checked + .form-check-label .check-ico{flex-shrink:0; border-color:var(--color-primary); background-color:var(--color-primary); animation:checkbox-ani 0.6s ease}
.form-check .form-check-label{display:flex; align-items:center; cursor:pointer}
.form-check .form-check-label .check-ico{position:relative; width:22px; height:22px; border-radius:50%; transform:scale(1); vertical-align:middle; border:1.5px solid var(--color-border-input); transition:all 0.2s ease}
.form-check .form-check-label .check-ico svg{position:absolute; z-index:1; width:12px; height:8px; top:50%; left:50%; margin-top:-4px; margin-left:-6px; fill:none; stroke:var(--color-white); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:16px; stroke-dashoffset:16px; transition:all 0.3s ease; transition-delay:0.1s; transform:translate3d(0, 0, 0)}
.form-check .form-check-label .check-ico:before{content:""; width:100%; height:100%; background-color:var(--color-primary); display:block; transform:scale(0); opacity:1; border-radius:50%; transition-delay:0.2s}
.form-check .form-check-label .cb-label{margin-left:6px}
.form-check .form-check-label .cb-label:after{content:""; position:absolute; bottom:0px; left:0; height:1px; width:100%; background-color:var(--color-primary); transform-origin:0 0; transform:scaleX(0)}
.form-check .form-check-input:checked + .form-check-label .check-ico:before{transform:scale(2.2); opacity:0; transition:all 0.6s ease}
.form-check .form-check-input:checked + .form-check-label .check-ico svg{stroke-dashoffset:0}
.form-check .form-check-input:checked + .form-check-label .cb-label{color:var(--color-primary); transition:all 0.3s ease}

/* list-toolbar */
.list-toolbar{min-height:40px; display:flex; justify-content:space-between; align-items:center; gap:32px; position:relative}
.list-toolbar .btn-wrap{display:flex; gap:8px}
.search-input{width:400px; height:40px; display:flex; align-items:center; gap:6px; padding:8px 16px; border-radius:var(--radius); background-color:var(--color-bg-input)}
.search-input::before{content:''; width:18px; height:18px; background-image:url('../images/ico_search.svg'); background-size:100%; flex-shrink:0; filter:invert(58%) sepia(1%) saturate(759%) hue-rotate(47deg) brightness(112%) contrast(83%)}
.search-input .input-field{width:100%; margin-right:8px; padding:0; font-size:14px}
.search-input .input-field::placeholder{color:var(--color-text-sub)}
.btn-delete .ico-text-delete{display:none; width:18px; height:18px}
.btn-delete.active .ico-text-delete{display:block}
.delete-fade-enter-active,
.delete-fade-leave-active{transition:opacity 0.1s ease-in-out}
.delete-fade-enter-from, .delete-fade-leave-to{opacity:0}

/* category */
.category-section{display:flex; flex-direction:column; gap:40px}
.category-wrap .category-title{font-size:18px; font-weight:600; margin-bottom:12px; line-height:1.3; color:var(--color-text-primary)}
.category-wrap .category-group{display:grid; grid-template-columns:repeat(5, 1fr); gap:12px}
.category-wrap .category-item{max-width:inherit; display:flex; align-items:center; gap:12px; padding:12px 16px; background:#f5f5f5; border-radius:8px; box-sizing:border-box}
.category-wrap .category-item:hover{background-color:var(--color-bg-btn-hover)}
.category-wrap .category-item .thum{width:44px; height:44px; border-radius:var(--radius-circle); flex-shrink:0}
.category-wrap .category-item .category-name{flex:1; font-size:16px; line-height:1.3; color:var(--color-text-primary); white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden}

@media(max-width:1480px){
  .category-wrap .category-group{grid-template-columns:repeat(4, 1fr)}

}

/* tag */
.tag-wrap .tag-title{font-size:18px; font-weight:600; margin-bottom:12px; line-height:1.3; color:var(--color-text-primary)}
.tag-wrap .tag-group{display:flex; flex-wrap:wrap; gap:8px}
.tag-wrap .tag-item{max-width:inherit; min-width:inherit; padding:8px 12px; font-weight:inherit}
.tag-wrap .tag-count{font-size:13px; color:var(--color-text-sub)}


/* Modal/Popup ---------- */
/* modal-popup */
.modal-overlay{position:fixed; inset:0; background-color:rgba(0, 0, 0, 0.45); display:flex; justify-content:center; align-items:center; z-index:10000; padding-top:120px; padding-bottom:120px}
.modal-overlay .modal-popup{position:relative; width:560px; height:100%; max-height:800px; display:flex; flex-direction:column; background:var(--color-white); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--color-shadow)}
.modal-overlay .modal-popup .modal-head{padding-top:32px; padding-bottom:24px; position:sticky; top:0; background-color:var(--color-white); z-index:10}
.modal-overlay .modal-head .title{padding-left:32px; padding-right:32px; margin-right:48px; font-size:24px; font-weight:600; line-height:1.3; color:var(--color-text-primary); letter-spacing:-0.4px}
.modal-overlay .modal-head .sub-title{padding-left:32px; padding-right:32px; margin-top:8px; margin-right:48px; line-height:1.3; color:var(--color-text-sub)}
.modal-overlay .search-input{margin-left:32px; margin-right:32px; width:100%}
.modal-overlay .menu-tab{padding-left:32px; padding-right:32px}
.modal-overlay .modal-head .btn-close{position:absolute; top:32px; right:32px}
.modal-overlay .modal-head .btn-close .ico-close{filter:invert(52%) sepia(10%) saturate(17%) hue-rotate(355deg) brightness(91%) contrast(88%)}
.modal-overlay .modal-popup .popup-content{padding:0 32px 32px; overflow-y:auto; scrollbar-width:none}
.modal-overlay .modal-popup .popup-content .no-data{height:100%}

/* confirm-modal */
.confirm-modal{width:360px; min-height:240px; padding:32px; display:flex; flex-direction:column; align-items:center; gap:24px; justify-content:center;background-color:var(--color-white); box-shadow:var(--color-shadow); border-radius:var(--radius-lg)}
.confirm-modal .text-wrap{width:100%; padding-top:16px; min-height:80px; text-align:center}
.confirm-modal .text-wrap .main-text{font-size:18px; font-weight:600; line-height:1.3; color:var(--color-text-primary)}
.confirm-modal .text-wrap .sub-text{margin-top:8px; font-size:14px; line-height:1.4; color:var(--color-text-desc)}
.confirm-modal .text-wrap .sub-text.point{color:var(--color-primary)}
.confirm-modal .btn-wrap{width:100%; display:flex; flex-direction:column; align-items:center; gap:8px}
.confirm-modal .btn-wrap .btn{width:100%; max-width:inherit}

/* 가사 보기 팝업 */
.modal-popup .popup-lyrics .lyrics{margin-right:56px}
.modal-popup .popup-lyrics .lyrics p{color:var(--color-text-primary); font-size:22px; font-weight:600; line-height:1.5; letter-spacing:-0.2px}
.modal-popup .popup-lyrics .lyrics p + p{margin-top:16px}
.modal-popup .btn-trans,
.modal-popup .btn-trans-on{position:absolute; top:118px; right:32px}
.modal-popup .btn-trans .ico-trans,
.modal-popup .btn-trans .ico-trans-on{width:40px; height:40px}

/* 내 플레이리스트 추가 팝업 */
.popup-playlist-add .lists{margin:0; display:flex; flex-direction:column; gap:16px}
.popup-playlist-add .playlist-item .playlist-link{display:flex; align-items:center; gap:16px}
.popup-playlist-add .playlist-item{position:relative; cursor:pointer}
.popup-playlist-add .playlist-item.playlist-add .thum{display:flex; align-items:center; justify-content:center; background-color:#FDFDFF}
.popup-playlist-add .playlist-item.playlist-add .thum .ico-plus::before{filter:invert(74%) sepia(0%) saturate(1236%) hue-rotate(218deg) brightness(85%) contrast(90%)}
.popup-playlist-add .playlist-item .thum{width:72px; height:72px; border-radius:var(--radius); flex-shrink:0}
.popup-playlist-add .playlist-item .thum .info{display:flex; width:100%; height:50%; padding:8px;position:absolute; bottom:0; left:0; right:0; justify-content:flex-end; align-items:flex-end; background:linear-gradient(0deg, var(--color-black-300) 50%, rgb(0, 0, 0, 0) 90%); font-size:12px; color:var(--color-white)}
.popup-playlist-add .playlist-item .thum .info .number{display:flex; align-items:center; gap:2px}
.popup-playlist-add .playlist-item .thum .info .ico-number{width:12px; height:12px}
.popup-playlist-add .playlist-item .playlist-title{color:var(--color-text-primary); font-weight:500; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.popup-playlist-add .title-input{width:100%; height:40px; display:flex; align-items:center; gap:4px; padding:8px 16px;border-radius:var(--radius); background-color:var(--color-bg-input)}
.popup-playlist-add .title-input .input-field{flex:1; margin-right:8px; padding:0; font-size:14px}
.popup-playlist-add .title-input .input-field::placeholder{color:var(--color-text-sub)}
.popup-playlist-add .btn-finish{min-width:32px; max-width:72px; min-height:32px; flex-shrink:0; color:var(--color-primary); font-size:15px; font-weight:500; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* 다운로드 팝업 */
.download-modal{gap:40px}
.download-modal .text-wrap{padding:0; display:flex; flex-direction:column; gap:32px; text-align:left}
.download-modal .main-text{line-height:1.5; word-break:break-word; overflow-wrap:break-word}
.download-modal .main-text .progress-count{color:var(--color-text-sub); font-size:14px; white-space:nowrap; margin-left:8px}
.download-modal .sub-text{color:var(--color-text-sub)}
.download-modal .progress-count{font-size:15px; font-weight:500; color:var(--color-text-sub)}
.download-modal .progress-wrap{display:flex; flex-direction:column; justify-content:space-between; gap:8px; font-size:14px}
.download-modal .progress{width:100%; display:flex; gap:16px; justify-content:space-between}
.download-modal .progress .song-title{color:var(--color-text-primary); font-weight:500; text-align:left}
.download-modal .progress .song-percent{color:var(--color-text-sub); text-align:left}
.download-modal .progress-bar{width:100%; height:8px; margin-top:8px; background-color:#F3F4F5}
.download-modal .progress-bar .bar{height:100%; border-radius:var(--radius-circle); background-color:var(--color-primary);transition:width 0.3s ease}


/* toast */
.toast{width:520px; min-height:56px; padding:16px; display:flex; align-items:center; justify-content:center; background-color:var(--color-black-800); border-radius:var(--radius); color:var(--color-white); font-weight:300; position:fixed; backdrop-filter:blur(15px); bottom:80px; left:50%; transform:translateX(-50%); z-index:1000; transition:opacity 0.5s ease; text-align:center}
.toast-show{width:520px; min-height:56px; padding:16px; display:flex; align-items:center; justify-content:center; background-color:var(--color-black-800); border-radius:var(--radius); color:var(--color-white); text-align:center}

/* tool-tip */
.tool-tip{width:100%; min-height:56px; padding:10px 16px; display:flex; align-items:center; gap:8px; background-color:#F5F7FE; border-radius:var(--radius)}
.tool-tip .text{display:flex; align-items:center; flex:1; gap:8px; font-size:14px}
.tool-tip .ico-close{width:18px; height:18px; filter:invert(54%) sepia(5%) saturate(14%) hue-rotate(330deg) brightness(88%) contrast(80%)}

/* option-select */
.option-select{min-width:480px; max-width:600px; min-height:88px; padding:20px 16px; display:flex; justify-content:space-between; gap:16px; background-color:var(--color-primary); border-radius:var(--radius); box-shadow:var(--color-shadow); position:fixed; z-index:1000; left:calc(50% + 130px); transform:translateX(-50%); bottom:80px}
.option-select button{height:100%; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:14px; font-weight:300; color:var(--color-white); flex:1}
.option-select button.disabled{opacity:0.4}
.option-select .ico::before{filter:var(--filter-white)}
.option-select .ico-play-line::before{filter:inherit}
.option-select .number{min-width:30px; height:30px; padding-left:8px; padding-right:8px; display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--color-primary); background-color:var(--color-white); border-radius:var(--radius-circle); position:absolute; top:-15px; left:10px; box-shadow:0px 1px 10px 0px var(--color-black-100)}
.option-select.delete .btn-delete{opacity:0.4}
.option-select.delete .number{display:none}
.option-select.delete.active .btn-delete{opacity:1}
.option-select.delete.active .number{display:flex}

/* Result ---------- */
.result{height:600px; display:flex; justify-content:center}
.no-data{width:360px; margin:0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.no-data img{width:80px; height:80px}
.no-data .rusult-text{max-width:600px; margin-top:8px; font-weight:600; line-height:1.4}
.no-data .result-desc{margin-top:4px; font-size:14px; color:var(--color-text-sub)}

/* Pagination ---------- */
.pagination{display:flex; align-items:center; justify-content:center; gap:40px; margin-top:40px}
.pagination .page-arrow{width:40px; height:40px; background-color:var(--color-bg-btn); border-radius:var(--radius-circle)}
.pagination .page-arrow.disabled{opacity:0.5; pointer-events:none}
.pagination .page-arrow:hover{background-color:var(--color-bg-btn-hover)}
.pagination .page-arrow.prev::before,
.pagination .page-arrow.next::before{content:''; width:8px; height:16px; display:block; background-image:url('../images/ico_arrow.svg'); opacity:0.5}
.pagination .page-arrow.prev::before{rotate:180deg}
.pagination .field{display:flex; align-items:center; gap:6px}
.pagination .field .current{width:36px; height:40px; text-align:center; border:1px solid rgba(0, 0, 0, 0.1); border-radius:var(--radius); font-size:16px}

/* Footer ---------- */
.footer{padding-top:80px; padding-bottom:80px}
.footer .site-map{display:flex; align-items:center; line-height:1.5; flex-wrap:wrap; row-gap:4px}
.footer .site-map .site-item{font-size:13px; color:var(--color-text-desc); flex-shrink:0}
.footer .site-map .site-item:not(:last-child){margin-right:8px}
.footer .site-map .site-item:not(:first-child)::before{content:''; display:inline-block; width:1px; height:12px; background-color:var(--color-gray-400); margin-right:8px; vertical-align:-1px}
.footer .site-info{margin-top:24px; font-size:13px}
.footer .site-info .copyright{color:var(--color-text-desc)}
.footer .site-info .copyright a{font-weight:600; display:inline-block}
.footer .site-info .waple-mean{margin-top:4px; color:var(--color-text-desc)}


/* ------------------------------------------------
Page-login
------------------------------------------------ */
.page-login > div#__nuxt{display:table; width:100%; height:100%; padding-top:40px; padding-bottom:40px}
.page-login main{display:table-cell; vertical-align:middle; margin:0 auto; position:relative}
.page-login .login{max-width:540px; min-width:320px; margin:0 auto; display:flex; align-items:center}
.page-login .login-box{display:flex; width:100%; padding:60px 40px; flex-direction:column; justify-content:center; align-items:center; gap:32px}
.login .login-form{width:100%; display:flex; flex-direction:column; gap:10px}
.login .login-input-field{width:100%; height:48px; display:flex; padding:16px; align-items:center; gap:10px; border-radius:var(--radius); background-color:var(--color-bg-input); font-size:14px; font-weight:500}
.login .login-input-field::placeholder{color:var(--color-gray-600); font-weight:400}
.login .input-alert{font-size:13px; color:var(--color-accent); line-height:1.4}
.login .form-check.form-login{padding-top:8px; padding-bottom:8px}
.login .guest-channel{width:100%; padding-top:32px; position:relative}
.login .guest-channel::before{content:''; width:100%; height:1px; background-color:rgba(0, 0, 0, 0.08); display:block; top:0; left:0; right:0; position:absolute}
.login .guest-title{font-size:15px; font-weight:500; color:var(--color-black-600)}
.login .guest-desc{margin-top:2px; font-size:15px; color:var(--color-black-500)}
.login .guest-channel-list{display:flex; flex-direction:column; gap:6px; margin-top:16px}
.login .guest-channel-list .channel-btn{min-height:46px; display:flex; align-items:center; gap:8px; padding:8px 16px; border-radius:8px; font-size:14px; color:var(--color-black-600); line-height:1.35; background-color:#F5F7FE; backdrop-filter:blur(20px)}
.login .guest-channel-list .channel-btn .ico{width:18px; height:18px}
.login .copy{font-size:13px; color:var(--color-black-300)}

.login .btn-login{width:100%; max-width:inherit; height:56px; display:flex; padding:16px 20px; flex-direction:column; justify-content:center; align-items:center; background:linear-gradient(95deg, #0078FF 0.5%, #0053F9 22.64%, #6F2EFF 87.41%), linear-gradient(95deg, #00C5FF -8.24%, #9300FF 99.22%); color:var(--color-white); cursor:pointer; overflow:hidden; position:relative}
.login .btn-login .btn-text{z-index:1}
.login .btn-login .bubble{border-radius:var(--radius-circle); position:absolute; box-shadow:-10px 4px 20px 0px rgba(255, 255, 255, 0.75) inset; flex-shrink:0; opacity:0.8}
.login .btn-login .bubble-01{width:130px; height:130px; top:-85px; left:-30px; z-index:0; transform:rotate(15deg); background:linear-gradient(270deg,rgba(255, 0, 205, 0.5) 0.16%,rgba(136, 0, 255, 0.5) 46.26%,rgba(0, 213, 255, 0.5) 92.36%)}
.login .btn-login .bubble-02{width:90px; height:90px; bottom:-50px; right:20px;  transform:rotate(15deg); background:linear-gradient(270deg, rgba(255, 163, 0, 0.80) 0%, rgba(255, 0, 129, 0.80) 47.5%, rgba(7, 86, 255, 0.80) 100%)}
.login .btn-login .bubble-03{width:60px; height:60px; top:-20px; right:-5px; background:linear-gradient(327deg, rgba(255, 147, 0, 0.30) 18.43%, rgba(255, 0, 77, 0.30) 79.06%)}

/* 버블 애니메이션 설정 */
.bubble{animation-timing-function:ease-in-out; animation-iteration-count:infinite; animation-direction:alternate; will-change:transform; bounce 0.6s 0.1s cubic-bezier(0, 0, 0.18, 0.99)}
.bubble-01{animation-name:float-path-01; animation-duration:23s; animation-timing-function}
.bubble-02{animation-name:float-path-02; animation-duration:30s; animation-delay:1s; animation-timing-function	:bounce 0.6s 0.1s cubic-bezier(0, 0, 0.18, 0.99)}
.bubble-03{animation-name:float-path-03; animation-duration:35s; animation-delay:0.8s; animation-timing-function	:bounce 0.6s 0.1s cubic-bezier(0, 0, 0.18, 0.99)}

@keyframes float-path-01{
  0%{transform:translate(0, 0)}
  10%{transform:translate(40px, -30px)}
  20%{transform:translate(-50px, 20px)}
  30%{transform:translate(60px, 40px)}
  40%{transform:translate(-30px, -60px)}
  50%{transform:translate(45px, 25px)}
  60%{transform:translate(-70px, -10px)}
  70%{transform:translate(80px, -50px)}
  80%{transform:translate(-20px, 60px)}
  90%{transform:translate(25px, -35px)}
  100%{transform:translate(0, 0)}
}

@keyframes float-path-02{
  0%{transform:translate(0, 0)}
  8%{transform:translate(-35px, 25px)}
  16%{transform:translate(50px, -40px)}
  24%{transform:translate(-60px, 15px)}
  32%{transform:translate(70px, 35px)}
  48%{transform:translate(-25px, -45px)}
  56%{transform:translate(60px, 20px)}
  68%{transform:translate(-45px, 55px)}
  84%{transform:translate(35px, -65px)}
  100%{transform:translate(0, 0)}
}

@keyframes float-path-03{
  0%{transform:translate(0, 0)}
  12%{transform:translate(20px, 30px)}
  22%{transform:translate(-70px, -25px)}
  35%{transform:translate(60px, 10px)}
  45%{transform:translate(-30px, 45px)}
  55%{transform:translate(80px, -50px)}
  68%{transform:translate(-55px, 20px)}
  78%{transform:translate(25px, 60px)}
  90%{transform:translate(-40px, -35px)}
  100%{transform:translate(0, 0)}
}

.login .btn{width:100%; max-width:inherit}
.login .text-wrap .login-title{font-size:22px; font-weight:600; text-align:center; line-height:1.3; color:var(--color-text-primary)}
.login .text-wrap .login-desc{margin-top:8px; text-align:center; font-size:16px; color:var(--color-text-sub)}

/* password */
.login-password .login-box{gap:60px}

.login-password .pin-wrap{display:flex; gap:16px; justify-content:center}
.login-password .pin-wrap .pin-input-box{position:relative; width:22px; height:22px}
.login-password .pin-wrap .pin-input-box .pin-input{width:100%; height:100%; border-radius:var(--radius-circle); background-color:#E6E6E6; text-align:center; border:none; color:transparent; caret-color:transparent}
.login-password .pin-wrap .pin-input-box .pin-input:not(:focus)[value]:not([value=""]){display:none}/* 입력값이 있을 경우 input 숨김 */
.login-password .pin-wrap .pin-input-box.filled .pin-input{display:none; pointer-events:none}
.login-password .pin-wrap .pin-img{background-image:url('../images/ico_note.svg'); background-repeat:no-repeat; background-position:center; background-size:100%; position:absolute; top:50%; left:50%; width:32px; height:32px; transform:translate(-50%, -50%); pointer-events:none}

.login-password .tip-box{padding:24px; border-radius:var(--radius); background:#F9F9F9}
.login-password .tip-box .tip-title{margin-bottom:8px; font-size:14px; font-weight:700; line-height:1.3}
.login-password .tip-box .tip-info{padding-left:8px; display:flex; align-items:flex-start; gap:8px; font-size:14px; line-height:1.3; color:var(--color-text-sub); position:relative}
.login-password .tip-box .tip-info::before{content:''; width:3px; height:3px; display:inline-block; background-color:var(--color-text-sub); border-radius:var(--radius-circle); flex-shrink:0; margin-top:0.5em}
.login-password .tip-box .tip-info + .tip-info{margin-top:4px}

/* onboarding */
.onboarding .onboarding-visual{width:320px; height:320px; display:flex; justify-content:center; align-items:center; overflow:hidden}
.onboarding .onboarding-visual video{width:100%; height:100%; object-fit:cover}


/* language */
.login-language{background-color:#F5F4F8}
.login-language .setting-section{width:100%; margin-top:0!important}
.login-language .search-input{width:100%}
.login-language .setting-box{margin-top:16px!important; max-height:480px; overflow-y:auto; scrollbar-width:none}


/* ------------------------------------------------
Page-home
------------------------------------------------ */
.page-home .section-title{margin-bottom:16px}
/* main ---------- */
.page-home .main .section-content{margin-top:56px}
/* playlist */
.page-home .playlist-list{margin-top:0}
/* my-playlist */
.page-home .my-playlist .profile-photo{margin-right:8px}
.page-home .my-playlist.none .result{border-radius:var(--radius); overflow:hidden}
.page-home .my-playlist.none .result .no-data{width:1400px; padding:32px; background-color:#F9FAFE}
/* waplepick */
.waple-pick{overflow:hidden; min-width:1000px; max-width:1480px; margin:0 auto}
.waplepick-slider{position:relative; overflow:hidden}
.waplepick-slider .swiper{position:static; overflow:inherit}
.waplepick-slider .swiper .swiper-wrapper{width:100%; padding-bottom:22px; z-index:0}
.waplepick-slider .swiper .swiper-button-next,
.waplepick-slider .swiper .swiper-button-prev{position:absolute; z-index:11; opacity:0!important; transition:opacity 0.2s ease-in-out; padding-bottom:16px}
.waplepick-slider .swiper .swiper-button-next{right:5px}
.waplepick-slider .swiper .swiper-button-prev{left:5px}
.waplepick-slider:hover .swiper-button-next:not(.swiper-button-disabled),
.waplepick-slider:hover .swiper-button-prev:not(.swiper-button-disabled){opacity:1!important}
.waplepick-slider .swiper .swiper-button-next::after,
.waplepick-slider .swiper .swiper-button-prev::after{font-size:28px; color:var(--color-black-500)}
.waplepick-slider .swiper{width:100%; position:static}
/* result */
.page-home .result{height:auto}

/* ------------------------------------------------
Side-panel > Queue(재생목록)
------------------------------------------------ */
.side-panel-wrapper{width:0; overflow-x:hidden}
.side-panel{width:100%; height:100%; padding:24px 16px; position:relative; background-color:var(--color-white); box-shadow:-1px 0 0 0 var(--color-border); display:flex; flex-direction:column; overflow-y:hidden; padding-bottom:0}
/* panel-head ---------- */
.panel-head{display:flex; flex-direction:column; gap:8px}
.panel-head .panel-title{font-size:18px; font-weight:600; color:var(--color-text-primary)}
.panel-head .panel-option{min-height:40px; display:flex; justify-content:flex-end; position:relative}
.panel-head .panel-option .btn-option{padding:5px; font-size:12px; line-height:1.3}
.panel-head .panel-option .ico-search{width:18px; height:18px; background-repeat:no-repeat; background-position:center; opacity:0.7}
.panel-head .panel-option .search-input{position:absolute; width:100%; left:0; right:0}
.panel-head .panel-option .search-input .btn-cancel{display:inline-block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.panel-head .panel-option .search-input .btn-delete,
.panel-head .panel-option .search-input .btn-cancel{flex-shrink:0}
/* queue ---------- */
.queue{display:flex; flex-direction:column; flex:1; padding-bottom:60px; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none}
/* music-item */
.queue .music-item{min-height:56px; padding-left:16px; padding-right:16px; display:flex; background-color:transparent!important; justify-content:space-between; gap:16px}
.queue .music-item:hover{background-color:transparent}
.queue .music-item .music-link{display:flex; align-items:center; gap:8px; min-width:0; flex:1}
.queue .music-item .thum .eq{opacity:0; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:10}
.queue .music-item .music-info{min-width:0; flex:1}
.queue .music-item.playing .thum::before{border:none; background-color:rgba(0, 0, 0, 0.5)}
.queue .music-item.playing .thum .eq{opacity:1}
.queue .music-item.playing .music-title{color:var(--color-primary)}
/* playlist-group */
.queue .playlist-group{background-color:#F9F9F9; border-radius:var(--radius); overflow:hidden; cursor:pointer; flex-shrink:0; margin-top:8px; margin-bottom:8px}
.queue .playlist-group + .playlist-group{margin-top:0}
.queue .group-head{min-height:56px; padding:16px; display:flex; justify-content:space-between; gap:16px}
.queue .group-title{font-size:15px; font-weight:600; flex:1; line-height:22px}
.queue .group-option{display:flex; gap:8px; align-items:flex-start}
.queue .ico-arrow::before{background-image:url('../images/ico_arrow_open.svg')}
.queue .playlist-group.playing .group-title{color:var(--color-primary); flex:1}
.queue .playlist-group.playing .eq-line{background-color:var(--color-primary)}
.queue .playlist-group.open{padding-bottom:8px}
.queue .playlist-group.open .ico-arrow{rotate:180deg}
.queue .playlist-group.playing.open .group-title{color:var(--color-text-primary)}
.queue .playlist-group.playing.open .ico-sound{filter:none}
.queue .playlist-group .btn-group-repeat.active{filter:var(--filter-primary)}

/* eq-ani */
.eq{width:24px; height:24px; display:flex; align-items:center; justify-content:center}
.eq-line{width:2px; height:12px; background-color:var(--color-white); border-radius:var(--radius-circle); display:inline-block; margin:1px; animation:eq-ani 1.5s infinite linear}
.eq-line:nth-child(2){animation-delay:0.2s}
.eq-line:nth-child(3){animation-delay:0.4s}
.eq-line:nth-child(4){animation-delay:0.6s}
.eq-line:nth-child(4){animation-delay:0.8s}
@keyframes eq-ani{
  0%{transform:scaleY(1)}
  10%{transform:scaleY(0.7)}
  20%{transform:scaleY(0.8)}
  30%{transform:scaleY(0.4)}
  40%{transform:scaleY(0.6)}
  50%{transform:scaleY(0.8)}
  60%{transform:scaleY(0.2)}
  70%{transform:scaleY(0.6)}
  80%{transform:scaleY(0.9)}
  90%{transform:scaleY(0.6)}
  100%{transform:scaleY(1)}
}

/* edit ---------- */
.edit-panel-option{display:flex; min-height:40px; align-items:center; justify-content:space-between; padding-left:16px}
.edit-panel-option .btn-wrap{display:flex}
.edit-panel-option .btn-option{padding:5px; font-size:12px; line-height:1.3; flex-shrink:0}
.edit-panel-option .btn-confirm{color:var(--color-primary)}
.edit-panel-option .form-check{flex:1; margin-right:16px}
.edit-panel-option .form-check .cb-label{font-size:14px; font-weight:500}
.playlist-edit{display:flex; flex-direction:column; margin-top:8px}
.playlist-edit .playlist-edit-item{display:flex; gap:8px; align-items:center}
.playlist-edit .playlist-edit-item .group-item{max-width:328px; display:flex; flex-direction:column; flex:1}
.playlist-edit .playlist-edit-item .group-head{width:100%; border-radius:var(--radius); background-color:#f9f9f9}
.playlist-edit .playlist-edit-item .group-head .cb-label{font-size:15px; font-weight:600; flex:1; line-height:22px}
.playlist-edit .playlist-edit-item .playlist-group{flex:1; margin:0}
.playlist-edit .playlist-edit-item .cb-label{margin:inherit}
.playlist-edit .playlist-edit-item .btn-move{width:32px; height:32px}
.playlist-edit .playlist-edit-item + .playlist-edit-item{margin-top:0}
.playlist-edit .playlist-edit-item .queue-item{gap:8px; border-radius:0; flex:1}
.playlist-edit .edit-group{margin-bottom:8px; overflow:hidden; flex-shrink:0}
.playlist-edit .edit-group .playlist-edit-item .queue-item{background-color:#f9f9f9!important}
.playlist-edit .playlist-edit-item .queue-item .form-check{width:fit-content}
.playlist-edit .form-check .form-check-input[type=checkbox] + .form-check-label{width:100%; gap:8px; align-items:flex-start; line-height:1.3}
.playlist-edit .form-check-input[type=checkbox] + .form-check-label .ico-confirm{border-radius:var(--radius-circle); background-color:transparent}
.playlist-edit .form-check-input[type="checkbox"]:checked + .form-check-label .ico-confirm{background-color:var(--color-primary); border-color:var(--color-primary)}
.playlist-edit .edit-group.open .playlist-edit-item .ico-arrow{rotate:180deg}
.playlist-edit .edit-group.open .playlist-edit-item .group-head{border-radius:8px 8px 0 0}
.playlist-edit .edit-group.open .playlist-edit-item:has(.group-item .group-head) > .btn-move{opacity:0; pointer-events:none}
.playlist-edit .edit-group.open .playlist-edit-item:last-of-type .group-item::after{content:''; display:block; width:100%; height:8px; border-radius:0 0 8px 8px; background-color:#f9f9f9}
.playlist-edit .edit-group{margin-top:8px; margin-bottom:8px}
.playlist-edit .edit-group + .edit-group{margin-top:0}
.playlist-edit > .edit-group:first-of-type{margin-top:0}

/* side-paner > no-data */
.side-panel .result{height:100%; padding-bottom:90px; flex:1}
.side-panel .form-check{padding:0!important}

/* ------------------------------------------------
Page-player(플레이어 화면)
------------------------------------------------ */
.page-player-view{position:relative}
.page-player-view .ico::before{filter:var(--filter-white)}
.page-player-view .option-more{top:50px; right:0}
.page-player-view .option-more .ico::before{filter:inherit}
.player-view{min-width:100vw; min-height:100vh; overflow:hidden; margin:0; background-repeat:no-repeat; position:relative}
.player-view .player-bg{position:absolute; inset:0; background-repeat:no-repeat; background-position:center; animation:move-bg 30s ease-in-out infinite; transform-origin:center center; z-index:0}
.player-view .player-overlay{background-color:rgba(0, 0, 0, 0.7); position:absolute; inset:0; backdrop-filter:blur(60px)}

@keyframes move-bg{
  0%{transform:scale(10) rotate(0deg) translate(0%, 0%)}
  10%{transform:scale(9) rotate(-36deg) translate(-2%, 1%)}
  20%{transform:scale(7) rotate(-72deg) translate(-3%, 1%)}
  30%{transform:scale(8) rotate(-108deg) translate(-2%, 1%)}
  40%{transform:scale(5) rotate(-144deg) translate(0%, -1%)}
  50%{transform:scale(6) rotate(-180deg) translate(1%, -1%)}
  60%{transform:scale(4) rotate(-216deg) translate(-2%, 2%)}
  70%{transform:scale(6) rotate(-252deg) translate(-2%, 2%)}
  80%{transform:scale(8) rotate(-288deg) translate(1%, -2%)}
  90%{transform:scale(9) rotate(-324deg) translate(1%, -2%)}
  100%{transform:scale(10) rotate(-360deg) translate(0%, 0%)}
}


/* bg-btn ---------- */
.player-view .btn-close{width:32px; height:32px; position:fixed; top:40px; right:40px; z-index:10; background-image:none; opacity:0.5}
.player-view .btn-wrap{display:flex; gap:16px; z-index:1000; position:fixed; right:40px; bottom:40px}
.player-view .btn-wrap button{width:32px; height:32px}
.player-view .btn-wrap .ico::before{opacity:0.6}
.player-view .btn-wrap .ico-lang{width:32px; height:32px}
.player-view .btn-wrap .ico-lyrics{width:26px; height:26px}
.player-view .btn-wrap .btn-lang.on .ico-lang::before{background-image:url('../images/ico_lang_on.svg'); filter:inherit}
.player-view .btn-wrap .btn-lyrics.on .ico-lyrics{width:32px; height:32px}
.player-view .btn-wrap .btn-lyrics.on .ico-lyrics::before{background-image:url('../images/ico_lyrics_on.svg'); filter:inherit}

/* player-content ---------- */
.player-content{width:100%; min-height:100vh; max-height:100vh; padding-top:80px; padding-bottom:80px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:120px; overflow-y:auto; position:relative; z-index:1; scrollbar-width:none; -ms-overflow-style:none}
.player-content::-webkit-scrollbar{display:none}
.player-content .content-title{font-size:24px; font-weight:500; line-height:1.3; color:var(--color-white-900)}

/* music-player ---------- */
.music-player{width:100%; max-width:520px; min-width:420px; height:100%; padding-top:120px; padding-bottom:120px; display:flex; flex-direction:column; justify-content:center; gap:24px; color:white; z-index:1}
.music-player .player-thum{width:100%; max-width:520px; aspect-ratio:1/1; border-radius:var(--radius-lg); box-shadow:0px 6px 20px 0px rgba(0,0,0,0.2); flex-shrink:0}
.music-player .player-thum::before{content:none}
.music-player .track{position:relative}
/* tag-tip */
.music-player .tag-tip{max-width:400px; min-height:40px; position:absolute; display:inline-flex; gap:8px; align-items:center; padding:8px 12px; background-color:var(--color-white-200); border-radius:var(--radius); color:var(--color-white-900); font-size:13px; line-height:1.4; backdrop-filter:blur(6px); z-index:100; top:-52px; left:0}
.music-player .tag-tip .btn-tip-close{display:flex; align-items:center; justify-content:center;  background:none; cursor:pointer; opacity:0.6}
.music-player .tag-tip .ico-close{width:14px; height:14px}
.music-player .tag-tip .tip-arrow{content:''; position:absolute; bottom:-10px; left:6px; width:10px; height:10px; background-color:var(--color-white-200); clip-path:polygon(50% 100%, 0 0, 100% 0); backdrop-filter:blur(6px)}
/* info */
.music-player .info{display:flex; gap:24px; justify-content:space-between}
.music-player .info .text-wrap{flex:1}
.music-player .music-title{font-size:20px; font-weight:600; color:var(--color-white-900); line-height:1.4}
.music-player .music-info{margin-top:8px; display:flex; flex-direction:column; gap:4px; font-size:14px; font-weight:500; color:var(--color-white-600); line-height:1.4}
.music-player .music-info .category{color:var(--color-white-600)}
/* btns */
.music-player .track .btns{display:flex; gap:8px; height:fit-content}
.music-player .track .btns button{width:32px; height:32px}
.music-player .track .btns .ico-like::before{opacity:0.9; background-size:28px}
.music-player .track .btns .ico.active::before{background-size:24px}
.music-player .track .btns .ico-more::before{background-size:30px}
/* tags */
.music-player .tags{margin-top:10px; display:flex; gap:6px; align-items:flex-start; position:relative}
.music-player .tags .items{display:flex; flex-wrap:wrap; gap:6px; row-gap:0}
.music-player .tags .tag-item{min-height:24px; gap:2px; display:flex; align-items:center; color:var(--color-white); opacity:0.2; font-size:14px}
.music-player .tags .btn-tag{opacity:0.5}
.music-player .tags .tag-item .ico-tag{width:12px; height:12px}
.music-player .items .tag-item.my-tag,
.music-player .tags .btn-tag.my-tag{opacity:0.5}
/* music-control */
.music-player .music-control{width:100%; color:var(--color-white)}
.music-player .music-control .playback-progress{display:flex; flex-direction:column; gap:8px}
.music-player .music-control .playback-progress .progress-bar{width:100%; height:7px; background-color:var(--color-white-200); border-radius:var(--radius-circle); backdrop-filter:blur(15px); overflow:hidden; cur}
.music-player .music-control .playback-progress .playback-seek{width:20%; height:100%; background-color:var(--color-white); border-radius:var(--radius-circle)}
.music-player .music-control .playback-progress .playback-time{display:flex; justify-content:space-between; font-size:13px; font-weight:500; line-height:1.2; color:var(--color-white-400)}
.music-player .music-control .controls{display:flex; justify-content:center; gap:24px; margin-top:8px}
.music-player .music-control .controls button{width:48px; height:48px; cursor:pointer; display:flex; align-items:center; justify-content:center}
.music-player .music-control .controls button .ico::before{filter:var(--filter-white); width:100%; height:100%}
.music-player .music-control .controls .btn-play .ico{width:48px; height:48px}
.music-player .music-control .controls .btn-repeat .ico,
.music-player .music-control .controls .btn-shuffle .ico{width:28px; height:28px; opacity:0.2}
.music-player .music-control .controls .btn-repeat .ico,
.music-player .music-control .controls .btn-shuffle .ico{width:28px; height:28px}
.music-player .music-control .controls .btn-next .ico,
.music-player .music-control .controls .btn-previous .ico{width:40px; height:32px}
.music-player .music-control .bottom-bar{margin-top:24px; display:flex; justify-content:space-between; align-items:center}
.music-player .music-control .bottom-bar .btn-info{padding:4px 10px; border:2px solid var(--color-white-200); border-radius:var(--radius-circle); font-size:13px; font-weight:500; line-height:1.3; color:var(--color-white-400); cursor:pointer}
.music-player .music-control .bottom-bar .function{display:flex; gap:16px}
.music-player .music-control .bottom-bar .volume-control{display:flex; align-items:center; gap:8px}
.music-player .music-control .bottom-bar .volume-control .btn-volume .ico-volume::before{width:18px; height:18px; filter:var(--filter-white)}
.music-player .music-control .bottom-bar .volume-control .volume-slider{width:200px; height:4px; background:var(--color-white-200); border-radius:var(--unit-full); outline:none; cursor:pointer; margin:0}
.music-player .music-control .bottom-bar .volume-control .volume-slider::-webkit-slider-thumb{-webkit-appearance:none; width:12px; height:12px; border:1px solid var(--color-black-500); border-radius:var(--unit-full); box-shadow:0 0 2px var(--color-black-200); cursor:pointer; background:var(--color-white); box-shadow:0px 1px 1px 0px rgba(0, 0, 0, 0.08)}
.music-player .music-control .bottom-bar .function .btn-playlist{width:28px; height:28px}
.music-player .music-control .bottom-bar .function .btn-playlist .ico::before{width:100%; height:100%; filter:var(--filter-white); opacity:0.4}
.music-player .music-control .bottom-bar .btn-playlist.active .ico::before{opacity:0.9!important}

/* player-detail ---------- */
.player-detail{width:100%; max-width:760px; height:820px; position:relative; z-index:1; flex-shrink:0}

/* music-playlist ---------- */
.player-detail .music-playlist{width:100%; height:100%; display:flex; flex-direction:column; gap:16px; mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0) 100%);
-webkit-mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0) 100%)}
.player-detail .playlist-wrap{height:100%; display:flex; flex-direction:column; gap:8px}
.player-detail .form-check .form-check-label .check-ico{border-color:var(--color-white-400)}
.player-detail .form-check .form-check-label .cb-label{color:var(--color-white-900); font-weight:500}
.player-detail .form-check .form-check-label .check-ico:before{background-color:var(--color-white-900)}
.player-detail .form-check .form-check-input:checked + .form-check-label .check-ico{background-color:var(--color-white-900); border-color:var(--color-white-900)}
.player-detail .form-check .form-check-label .check-ico svg{stroke:var(--color-black-600)}
.player-detail .form-check .form-check-input:checked + .form-check-label .cb-label{color:var(--color-white-900)}

/* panel-option */
.player-detail .panel-option .btn-option{padding:5px 8px; color:var(--color-white-400); font-size:15px}
.player-detail .panel-option .ico-search{width:20px; height:20px; opacity:0.4}
.player-detail .panel-option .search-input{background-color:#383A42}
.player-detail .panel-option .search-input::before{filter:var(--filter-white); opacity:0.4}
.player-detail .panel-option .search-input .input-field{color:var(--color-white-600)}
.player-detail .panel-option .search-input .input-field::placeholder{color:var(--color-white-400)}
.player-detail .panel-option .search-input .btn-cancel{color:var(--color-white-400)}
/* playlist-group */
.player-detail .queue{padding-bottom:80px}
.player-detail .queue .playlist-group{background-color:rgba(255, 255, 255, 0.05)}
.player-detail .queue .playlist-group:first-of-type{margin-top:0}
.player-detail .queue .playlist-group .group-head .eq-line{background-color:var(--color-white-900)}
.player-detail .queue .playlist-group.playing .group-title,
.player-detail .queue .playlist-group .group-head .group-title{color:var(--color-white-900); font-weight:400}
.player-detail .queue .playlist-group .btn-group-repeat{opacity:0.4}
.player-detail .queue .playlist-group .btn-group-repeat.active{opacity:0.9; filter:none}
.player-detail .queue .music-item .music-title{color:var(--color-white-800); font-weight:400}
.player-detail .queue .music-item .category-item{color:var(--color-white-400)}
/* playlist-edit */
.player-detail .edit-panel-option .form-check .cb-label,
.player-detail .edit-panel-option .btn-option{font-size:15px; color:var(--color-white-400); font-weight:400}
.player-detail .edit-panel-option .btn-confirm{color:var(--color-white-900)}

.player-detail .playlist-edit{margin-top:0}
.player-detail .playlist-edit .group-title{color:var(--color-white-900); font-weight:500}
.player-detail .playlist-edit .edit-group:first-of-type{margin-top:0}
.player-detail .playlist-edit .playlist-edit-item .group-item{max-width:100%; min-width:0}
.player-detail .playlist-edit .playlist-edit-item .group-head,
.player-detail .playlist-edit .edit-group .playlist-edit-item .queue-item,
.playlist-edit .edit-group.open .playlist-edit-item:last-of-type .group-item::after{background-color:rgba(255, 255, 255, 0.05)!important;backdrop-filter:blur(15px)}
.player-detail .playlist-edit .playlist-edit-item .group-head .btn-open{background-color:transparent!important; backdrop-filter:none!important}
.player-detail .option-select{position:absolute; left:50%; transform:translateX(-50%); bottom:0; background-color:var(--color-white-100); backdrop-filter:blur(15px)}
.player-detail .option-select button{background:none}
.player-detail .option-select .number{color:var(--color-black-600)}
.player-detail .floating-box{background-color:var(--color-gray-100)}

/* music-lyrics ---------- */
.player-detail .music-lyrics{height:100%; display:flex; flex-direction:column; gap:16px}
.player-detail .music-lyrics::-webkit-scrollbar{display:none}
.player-detail .music-lyrics.sync{padding-top:240px; padding-bottom:120px; gap:70px; overflow-y:auto; mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%); -webkit-mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%,
rgba(0, 0, 0, 0) 100%)}
.player-detail .music-lyrics .sync-item{width:fit-content; font-size:60px; color:var(--color-white); opacity:0.2; line-height:1.3; font-weight:600; transition:all 0.15s ease-in-out}
.player-detail .music-lyrics .sync-item.now{opacity:1!important}
.player-detail .music-lyrics .sync-item:hover{opacity:0.7; cursor:pointer}
.player-detail .music-lyrics .lyrics-text{padding-top:60px; padding-bottom:60px; font-size:30px; font-weight:600; color:var(--color-white-800); line-height:1.5; overflow-y:auto; mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%); -webkit-mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%,rgba(0, 0, 0, 0) 100%)}
.player-detail .music-lyrics .lyrics-text::-webkit-scrollbar{display:none}

/* tip-text ---------- */
.player-detail .tip-text{display:flex; gap:4px; color:var(--color-white-400); font-size:15px; line-height:24px}
.player-detail .tip-text .ico-tip::before{width:14px; height:14px; opacity:0.4}

/* music-tag ---------- */
.player-detail .music-tag{width:100%; height:100%; display:flex; flex-direction:column; gap:24px}
.player-detail .music-tag .btn-confirm{width:100%; max-width:inherit; position:absolute; bottom:0; background-color:rgba(255, 255, 255, 0.15); color:var(--color-white-900)}
.player-detail .tag-select{margin-bottom:56px; padding-bottom:40px; display:flex; flex-direction:column; gap:24px; overflow-y:auto}
.player-detail .tag-select::-webkit-scrollbar{display:none}
.player-detail .tag-select .tag-title{font-size:18px; font-weight:500; line-height:1.4; color:var(--color-white-900)}
.player-detail .tag-select .tag-item{background-color:rgba(255, 255, 255, 0.05); color:var(--color-white-900)}
.player-detail .tag-select .tag-item.active{background-color:var(--color-white-200)}

@media (max-width:1480px){
  .player-content{gap:80px}
  .player-content .music-player, .player-content .player-detail{flex:1}
}


/* ------------------------------------------------
Page-playlist(플레이리스트)
------------------------------------------------ */
.page-playlist .waplepick{margin-top:24px; display:grid; grid-template-columns:repeat(5, 1fr); gap:16px}

@media(max-width:1480px){
  .page-playlist .waplepick{grid-template-columns:repeat(4, 1fr)}
}


/* ------------------------------------------------
Page-playlist-detail(플레이리스트 상세)
------------------------------------------------ */
.detail-header{display:flex; gap:32px}
.detail-header .thum{width:100%; height:100%; flex-shrink:0; border-radius:var(--radius); box-shadow:0px 16px 24px 0px var(--color-black-100); position:relative; pointer-events:none}
.thum-wrapper{width:270px; height:270px; position:relative; flex-shrink:0}
.detail-header .thum-blur{position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); width:85%; height:85%; z-index:0; background-size:cover; background-position:center; filter:blur(10px); opacity:0.3; pointer-events:none}
.detail-header .thum .thum-img{position:relative; z-index:1}
.detail-header .thum .waplepick-badge,
.detail-header .thum .info{position:relative; z-index:2}
.detail-header .thum .waplepick-badge{padding:4px 10px; position:absolute; top:16px; left:16px; z-index:2; background:var(--color-badge); border-radius:var(--radius-circle); font-size:13px; line-height:1.4; color:var(--color-white)}
.detail-header .thum .info{display:flex; height:50%; position:absolute; bottom:0; left:0; right:0; padding:16px; justify-content:flex-end; align-items:flex-end; background:linear-gradient(0deg, var(--color-black-400) 50%, rgb(255,255,255,0) 90%); font-size:15px; color:var(--color-white)}
.detail-header .thum .info .number{display:flex; gap:2px; align-items:center}
.detail-header .thum .info .ico-number{width:16px; height:16px}
.detail-header .detail{width:100%; display:flex; flex-direction:column}
.detail-header .detail .info{height:100%; display:flex; flex-direction:column; justify-content:center; gap:24px}
.detail-header .detail .info .title{font-size:26px; font-weight:600; line-height:1.3}
.detail-header .detail .info .tags{display:flex; gap:6px; color:var(--color-text-sub); font-size:14px; flex-wrap:wrap; align-items:center}
.detail-header .detail .info .tags .tag-item{cursor:pointer; line-height:1.3}
.detail-header .detail .info .tags .tag-item::before{content:'#'; margin-right:2px}
.detail-header .detail .info .tags .tag-item.my-tag{color:var(--color-primary)}
.detail-header .detail .info .btn-wrap{display:flex; gap:4px}
.detail-header .detail .info .btn-action{width:32px; height:32px; display:flex; align-items:center; justify-content:center}
.detail-header .detail .info .btn-action .btn-ico{width:20px; height:20px}
.detail-header .detail .info .btn-action.disabled{opacity:0.3}
.detail-header .detail .tool-bar{display:flex; gap:8px}
.detail-header + *{margin-top:40px}


/* ------------------------------------------------
Page-music-detail(노래 상세)
------------------------------------------------ */
.page-music-detail .detail .info .text-wrap{display:flex; gap:8px; flex-direction:column}
.page-music-detail .detail .info .title{line-height:1.2}
.page-music-detail .detail .info .category-item, 
.page-music-detail .detail .info .guide-info{font-size:14px; color:var(--color-text-desc); line-height:1.3}


/* ------------------------------------------------
page-tag-detail(공식 태그 상세)
------------------------------------------------ */
.page-tag-detail .detail-header .thum-wrapper{width:200px; height:200px}
.page-tag-detail .detail .title{display:flex; gap:2px; align-items:center}
.page-tag-detail .detail .title::before{content:''; background-image:url('../images/ico_tag.svg'); width:24px; height:24px; display:inline-block; flex-shrink:0}


/* ------------------------------------------------
page-myplaylist-detail(내 플레이리스트 상세)
------------------------------------------------ */
.page-myplaylist-detail .detail .info .tags{margin-top:8px}


/* ------------------------------------------------
page-myplaylist-edit(내 플레이리스트 수정, 새 플레이리스트)
------------------------------------------------ */
.page-myplaylist-edit .thum{pointer-events:none}
.page-myplaylist-edit .cover-change{width:40px; height:40px; position:absolute; right:20px; bottom:20px; z-index:1;background-color:var(--color-white-700); border-radius:var(--radius-circle); display:flex; align-items:center; justify-content:center; box-shadow:0px 4px 10px rgba(0, 0, 0, 0.1); backdrop-filter:blur(5px)}
.page-myplaylist-edit .detail{max-width:560px}
.page-myplaylist-edit .playlist-title-input{height:56px; display:flex; justify-content:space-between; gap:8px; padding:8px 16px; border-radius:var(--radius); background-color:var(--color-bg-input)}
.page-myplaylist-edit .playlist-title-input .input-field{width:100%; height:100%; font-size:26px}
.page-myplaylist-edit .playlist-title-input .input-field::placeholder{color:var(--color-text-sub)}
.page-myplaylist-edit .tag-add{display:flex; font-size:15px; align-items:center; gap:4px; color:var(--color-text-desc); cursor:pointer}
.page-myplaylist-edit .tag-add .tags{margin:0!important}
.page-myplaylist-edit .tag-add .tags .tag-item{color:var(--color-text-primary)}
.page-myplaylist-edit .tag-add.active .ico-mytag{filter:invert(15%) sepia(65%) saturate(5143%) hue-rotate(330deg) brightness(103%) contrast(116%)}
.page-myplaylist-edit .popup-music-add .modal-head{padding-bottom:0}
.page-myplaylist-edit .popup-music-add .popup-content{padding-top:12px; padding-bottom:32px}
.page-myplaylist-edit .popup-tags .popup-content{padding:16px 32px 140px!important}
.page-myplaylist-edit .search-input{width:auto; margin-top:24px}
.page-myplaylist-edit .recent-search{width:496px; max-width:inherit; top:140px; left:32px}
.page-myplaylist-edit .menu-tab{width:100%; margin-top:16px; margin-bottom:inherit; overflow-x:auto; white-space:nowrap; scrollbar-width:none; -ms-overflow-style:none}
.page-myplaylist-edit .menu-tab::-webkit-scrollbar{display:none}

.popup-tags{height:calc(100% - 120px)}
.popup-tags .tool-tip{margin-bottom:24px}
.popup-tags .tag-wrap + .tag-wrap{margin-top:24px}
.popup-tags .btn-wrap{padding:32px; position:absolute; left:0; right:0; bottom:0; background-color:var(--color-white)}
.popup-tags .btn-wrap button{width:100%; max-width:inherit}
/* popup-music-add */
.popup-music-add .music-item{width:100%; height:auto; padding:8px 0; background-color:inherit!important; border-bottom:1px solid var(--color-border-list); border-radius:0}
.popup-music-add .music-item .music-link{width:100%; display:flex; align-items:center; gap:10px; flex:1}
.popup-music-add .music-item .music-link .music-info{min-width:0; flex:1}
.popup-music-add .music-item .music-link .music-info .music-title{max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.popup-music-add .music-item .music-link .btn-wrap{width:24px; height:24px; align-items:center; justify-content:center}
.popup-music-add .music-item button{flex-shrink:0}
.popup-music-add .music-item .ico-plus{width:20px; height:20px}
.popup-music-add .music-item .ico-confirm{width:22px; height:22px; filter:var(--filter-primary)}
.popup-music-add .music-item:last-child{border:none}

/* ------------------------------------------------
page-myplaylist-cover(커버 이미지)
------------------------------------------------ */
.page-myplaylist-cover .cover-list{margin-top:24px; display:grid; grid-template-columns:repeat(8, 1fr); gap:16px; justify-items:center}
.page-myplaylist-cover .cover-list .cover-photo{width:100%; height:100%; aspect-ratio:1 / 1; border-radius:var(--radius)}
.page-myplaylist-cover .cover-list .cover-photo{overflow:hidden; transition:all 0.3s ease-in-out}
.page-myplaylist-cover .cover-list .cover-photo.active::before{border:4px solid var(--color-primary)}
.page-myplaylist-cover .cover-list .photo-add::before{pointer-events:none}
.page-myplaylist-cover .cover-list .photo-add .btn-add{width:100%; height:100%; cursor:pointer; background-color:var(--color-gray-10)}
.page-myplaylist-cover .cover-list .photo-add .btn-add .ico-photo-add{width:40px; height:40px}
.page-myplaylist-cover .cover-list .photo-add:hover .btn-add{background-color:var(--color-gray-100)}


/* ------------------------------------------------
Page-likes(좋아요)
------------------------------------------------ */
.page-likes .music-list .music-item .btn-like.active{opacity:1}
.page-likes .music-list .music-item .btn-like.active .ico-like-sm::before{background-image:url('../images/ico_like_on.svg')}


/* ------------------------------------------------
Page-mytags(내 태그)
------------------------------------------------ */
.page-mytag .my-tags{display:flex; flex-direction:column; gap:24px}
.page-mytag .my-tags .tag-wrap .tag-item{border-radius:var(--radius-circle); font-weight:inherit}


/* ------------------------------------------------
Page-search(검색)
------------------------------------------------ */
.page-search .tag-section{display:flex; flex-direction:column; gap:40px; margin-top:40px}


/* ------------------------------------------------
Page-search-result(검색 결과)
------------------------------------------------ */
.search-title{color:var(--color-text-sub)}
.search-title .search-keyword{margin-right:2px; font-weight:700; color:var(--color-text-primary)}
.page-search-result .menu-tab{margin-top:24px}
.page-search-result section + section{margin-top:50px}
.page-search-result .search-result .music-list-view{margin-top:16px}
.page-search-result .search-result .playlist-list{margin-top:16px}
.search-result .search-keyword{color:var(--color-primary)}
.search-result .music-item .guide{width:160px; font-size:13px; color:var(--color-text-desc); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.search-result .music-item .ico-arrow::before{background-image:url('../images/ico_arrow.svg'); filter:invert(53%) sepia(0%) saturate(372%) hue-rotate(268deg) brightness(91%) contrast(89%); background-size:7px}
.search-result .music-item .lyrics-txt{font-size:13px; color:var(--color-text-desc); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}


/* ------------------------------------------------
Page-notice(공지사항)
------------------------------------------------ */
.notice-list{display:flex; flex-direction:column}
.notice-list .notice-item.new .notice-link::before{content:''; width:6px; height:6px; margin-top:8px; background-color:var(--color-primary); border-radius:var(--radius-circle)}
.notice-list .notice-item.new .new-badge{display:block}
.notice-list .notice-item .notice-link{display:flex; gap:6px; padding-top:16px; padding-bottom:16px; border-bottom:1px solid var(--color-border-list)}
.notice-list .notice-item .info{width:100%; display:flex; flex-direction:column; gap:6px}
.notice-list .notice-item .post-title{font-size:17px; font-weight:500; line-height:1.4; color:var(--color-text-primary)}
.notice-list .notice-item .post-date{font-size:13px; font-weight:300; line-height:1.3; color:var(--color-text-sub)}
/* notice-view */
.notice-view .view-header{display:flex; flex-direction:column; gap:8px}
.notice-view .view-header .date{font-size:14px; color:var(--color-text-sub); line-height:1.2}
.notice-view .view-header .title{font-size:32px; font-weight:600; color:var(--color-text-primary); line-height:1.3}
.notice-view .view-header .desc{color:var(--color-text-desc); line-height:1.4}
.notice-view .notice-content{margin-top:40px}
.notice-view .notice-content p{font-size:18px; line-height:1.7; margin-top:24px}
.notice-view .btn-wrap{display:flex; justify-content:center; margin-top:80px}
.notice-view .btn-wrap .btn{min-width:120px}


/* ------------------------------------------------
Page-apply(새노래 응모)
------------------------------------------------ */
/* apply-banner */
.apply-banner{position:relative; display:flex; align-items:center; justify-content:center; border-radius:var(--radius)}
.apply-banner .banner-wrap{width:660px; background-position:center; background-size:100%; background-repeat:no-repeat; position:relative; z-index:1; overflow:hidden}
.apply-banner .banner-img{position:absolute; width:600px; height:160px; background-repeat:no-repeat; background-size:100%; z-index:0}
.apply-banner-01{background:linear-gradient(93deg, #EE0C79 9.27%, rgba(238, 12, 121, 0.00) 76.11%), linear-gradient(94deg, #FF309F -2.42%, #FF5D29 98.96%)}
.apply-banner-02{background:linear-gradient(95deg, #4C0099 5.91%, rgba(108, 45, 172, 0.00) 74.89%), linear-gradient(90deg, #8235B5 0%, #23128B 100%)}
.apply-banner-03{background-color:#0038FF}
.apply-banner-04{background-color:#0071F6}

.apply-banner-01 .banner-img{background-image:url('../images/banner_apply_01.png'); right:0; bottom:-40px}
.apply-banner-02 .banner-img{background-image:url('../images/banner_apply_02.png'); right:-40px; bottom:-40px}
.apply-banner-03 .banner-img{background-image:url('../images/banner_apply_03.png'); top:50%; transform:translateY(-50%); right:-50px}
.apply-banner-04 .banner-img{background-image:url('../images/banner_apply_04.png'); top:50%; transform:translateY(-50%); right:-60px}
.apply-banner .text-wrap{max-width:540px; min-height:90px; display:flex; flex-direction:column; justify-content:center; padding:16px; gap:4px; position:relative; z-index:2}
.apply-banner .text-wrap .notice-title{color:var(--color-white); line-height:1.4}
.apply-banner .text-wrap .notice-desc{font-size:13px; font-weight:300; color:var(--color-white-600)}
.page-apply .menu-tab, 
.page-apply .list-toolbar{margin-top:24px}
/* table */
.apply-wrap .table{width:100%; table-layout:fixed; text-align:left; margin-top:24px; border-collapse:collapse}
.apply-wrap .table th, .table td{vertical-align:middle}
.apply-wrap .table thead tr{height:40px; border-bottom:1px solid var(--color-border-list)}
.apply-wrap .table thead th{padding:8px 16px; font-size:13px; font-weight:500; line-height:1.3; color:var(--color-text-desc); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.apply-wrap .table thead .col-status{padding-left:18px}
.apply-wrap .table tbody td{min-height:56px; padding:16px; font-size:13px; line-height:1.4; border-bottom:1px solid var(--color-border-list); color:var(--color-text-desc); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.apply-wrap .table tbody tr{cursor:pointer}
.apply-wrap .table tbody .col-title{font-size:16px; font-weight:500; color:var(--color-text-body); line-height:1.3}
.apply-wrap .status,
.page-apply-view .status{width:fit-content; max-width:100%; height:24px; display:block; padding:2px 8px; border-radius:var(--radius-circle); font-size:13px}
.page-apply .waiting, 
.page-apply-view .waiting{border:1px solid #00BF00; color:#00BF00; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.page-apply .accept,
.page-apply-view .accept{border:1px solid var(--color-primary); color:var(--color-primary)}
.page-apply .draft,
.page-apply-view .draft{border:1px solid var(--color-black-400); color:var(--color-black-400)}
.page-apply .table .col-comments{width:40px; height:40px; padding:8px}
.page-apply .table tbody .col-my-apply .apply-num{width:fit-content; max-width:100%; height:24px; display:block; padding:2px 8px; border-radius:var(--radius-circle); border:1px solid var(--color-primary); color:var(--color-primary)}
.page-apply .table tbody .col-title .d-day,
.page-apply-view .status-wrap .d-day{height:24px; display:inline-flex; align-items:center; justify-content:center; padding:2px 10px; border-radius:var(--radius-circle); background-color:#FFF0F5; font-size:13px; font-weight:600; line-height:1.3; color:#FF0043}
.page-apply .table tbody .col-title .d-day{margin-right:8px}
.page-apply .table tbody .col-title .d-day.finish,
.page-apply-view .status-wrap .d-day.finish{background-color:#f5f5f5; color:var(--color-text-sub)}

.main:has(.side-panel-wrapper) .apply-wrap .table thead th.col-category,
.main:has(.side-panel-wrapper) .apply-wrap .table tbody td.col-category,
.main:has(.side-panel-wrapper) .apply-wrap .table thead th.col-subject,
.main:has(.side-panel-wrapper) .apply-wrap .table tbody td.col-subject{display:none}
.main:has(.side-panel-wrapper) .apply-wrap .table td.col-title::after{content:attr(data-category) " · " attr(data-subject); display:block; margin-top:2px; font-size:13px; font-weight:400; line-height:1.4; color:var(--color-text-sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

@media(max-width:1480px){
  .apply-wrap .table thead th.col-category,
  .apply-wrap .table tbody td.col-category,
  .apply-wrap .table thead th.col-subject,
  .apply-wrap .table tbody td.col-subject{display:none}
  .apply-wrap .table td.col-title::after{content:attr(data-category) " · " attr(data-subject); display:block; margin-top:2px; font-size:13px; font-weight:400; line-height:1.4; color:var(--color-text-sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
}



/* ------------------------------------------------
Page-apply-view(새노래 응모 본문)
------------------------------------------------ */
.page-apply-view .apply-view{display:flex; flex-direction:column; gap:40px; margin-top:40px}
/* apply-head */
.page-apply-view .apply-head{display:flex; flex-direction:column; gap:16px}
.page-apply-view .apply-head .apply-title{font-size:32px; font-weight:600; line-height:1.3; color:var(--color-text-primary)}
.page-apply-view .apply-head .apply-category{line-height:1.5}
.page-apply-view .apply-head .apply-category .strong{font-weight:600; color:var(--color-primary)}
.page-apply-view .apply-head .apply-info{display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--color-text-desc)}
.page-apply-view .apply-head .apply-date{display:flex; align-items:center; gap:16px}
.page-apply-view .apply-head .apply-date .date-item{display:flex; gap:8px; align-items:center}
.page-apply-view .apply-head .apply-date .strong{font-weight:600; color:var(--color-text-body)}
/* memo */
.page-apply-view .memo-title{font-weight:600}
.page-apply-view .memo-content{margin-top:8px; font-size:15px; line-height:1.6}
.page-apply-view .form-check{width:100%; display:flex; justify-content:center; margin-top:16px}
.page-apply-view .form-check .check-ico{border-radius:var(--radius-sm); background-color:var(--color-white)}
.page-apply-view .admin-memo{padding:24px; background:#f5f7ff; border-radius:var(--radius)}
.page-apply-view .my-memo{margin-top:8px; padding:24px; background:#FFFBEE; border-radius:var(--radius)}
/* my-contents */
.page-apply-view .my-contents{display:flex; flex-direction:column; gap:16px}
.page-apply-view .my-contents .contents-title{font-size:20px; font-weight:600; line-height:1.3}
.page-apply-view .my-contents .contents{display:flex; flex-direction:column; gap:32px; padding:24px; border-radius:var(--radius); background-color:#FBFBFB}
/* music-lyrics */
.page-apply-view .music-lyrics .part-wrap{display:flex; flex-direction:column; gap:8px}
.page-apply-view .music-lyrics .lyrics-part{color:var(--color-primary); font-weight:600; line-height:1.6}
.page-apply-view .music-lyrics .lyrics-con{font-weight:500; line-height:1.8}
/* music-compose */
.page-apply-view .music-compose .file-wrap{display:flex; flex-direction:column; gap:8px}
.page-apply-view .music-compose .file-name{width:fit-content; min-height:24px; display:flex; align-items:center; align-items:flex-start; gap:8px; cursor:pointer; line-height:1.5}
.page-apply-view .music-compose .file-name .ico{width:16px; height:16px; margin-top:4px}
/* btn-wrap */
.page-apply-view .btn-wrap{display:flex; gap:8px; justify-content:center; min-width:120px}
.page-apply-view .btn{min-width:120px}


/* ------------------------------------------------
Page-apply-compose-view(작곡 요청 본문)
------------------------------------------------ */
/* apply-head */
.page-apply-compose-view .apply-head .status-wrap{display:flex; gap:4px}
.page-apply-compose-view .apply-head .status-wrap .applicant{height:24px; margin-right:8px; display:inline-flex; align-items:center; justify-content:center; padding:2px 10px; border-radius:var(--radius-circle); background-color:#F0F3FF; font-size:13px; font-weight:600; line-height:1.3; color:var(--color-primary)}

/* my-apply */
.page-apply-compose-view .my-apply{display:flex; flex-direction:column; gap:8px; padding-top:40px; padding-bottom:40px}
.page-apply-compose-view .my-apply .apply-title{font-size:20px; font-weight:600}
.page-apply-compose-view .my-apply .apply-title .apply-num{color:var(--color-primary)}
.page-apply-compose-view .table{width:100%; table-layout:fixed}
.page-apply-compose-view .table tbody tr{cursor:pointer}
.page-apply-compose-view .table tbody td{min-height:56px; border-bottom:1px solid var(--color-border-list); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.page-apply-compose-view .table .col-status{width:120px}
.page-apply-compose-view .table .col-title{padding:16px}
.page-apply-compose-view .table .col-comments{width:40px; padding:8px}


/* ------------------------------------------------
page-apply-write(응모하기)
------------------------------------------------ */
.page-apply-write section{margin-top:40px}
.page-apply-write .apply-head{margin-top:40px}
.page-apply-write .write-wrap{display:flex; flex-direction:column; gap:24px; padding-bottom:40px}
.page-apply-write section > .write-wrap:not(:first-child){padding-top:40px; border-top:1px solid var(--color-border)}
.page-apply-write .form-section{display:flex; flex-direction:column}
.page-apply-write .form-section .form-label{min-height:40px; padding-top:8px; padding-bottom:8px; font-weight:600;
line-height:1.3; color:var(--color-text-body)}
.page-apply-write .form-section .form-label .essential{color:var(--color-accent); font-weight:700}
.page-apply-write .form-section .form-check{min-height:40px; padding-top:8px; padding-bottom:8px}

.form-input,
.form-select{display:flex; height:48px; padding:8px 16px; align-items:center; border-radius:8px;
border:1px solid var(--color-border); font-size:15px; resize:vertical}
.form-input::placeholder{color:var(--color-text-sub)}
.form-input:not(:placeholder-shown){font-weight:500; line-height:2.0; border:2px solid var(--color-primary)}
.select-wrapper{position:relative; display:inline-block}
.form-select{margin-top:8px}
.form-select{width:100%; appearance:none; -webkit-appearance:none; -moz-appearance:none; background:url('../images/ico_dropdown.svg') no-repeat right 10px center; padding-right:40px; height:48px}
 

.form-select::after{content:''; width:24px; height:24px; display:block; background-image:url('../images/ico_arrow.svg'); background-position:center; background-repeat:no-repeat; background-size:100%}
.page-apply-write .tip-box{display:flex; padding:24px; flex-direction:column; background-color:#F5F7FF; border-radius:var(--radius)}
.page-apply-write .tip-box .tip-title{display:flex; align-items:flex-start; gap:4px; font-weight:700; line-height:24px; margin-bottom:8px}
.page-apply-write .tip-box .ico-tip::before{width:16px; height:16px}
.page-apply-write .tip-box .tip-info{padding-left:8px; display:flex; align-items:flex-start; gap:10px; font-size:15px; line-height:1.5; position:relative}
.page-apply-write .tip-box .tip-info + .tip-info{margin-top:4px}
.page-apply-write .tip-box .tip-info::before{content:''; width:3px; height:3px; display:inline-block; background-color:var(--color-text-body); border-radius:var(--radius-circle); flex-shrink:0; margin-top:9px}
.page-apply-write .verse-input,
.page-apply-write .memo-input{width:100%; height:320px; min-height:120px; padding:24px; font-size:16px}
.page-apply-write .verse-input:not,
.page-apply-write .memo-input:not(:placeholder-shown){font-weight:500; line-height:2.0; border:2px solid var(--color-primary)}
.page-apply-write .btn-wrap{display:flex; justify-content:center}
.page-apply-write .memo-input{height:240px!important}

.page-apply-write .file-drop-zone{width:100%; min-height:240px; padding:40px 24px; border-radius:8px; border:1px solid var(--color-border); text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px}
.page-apply-write .file-warp{display:flex; flex-direction:column; gap:8px}
.page-apply-write .file-drop-zone .text{max-width:450px; color:var(--color-text-sub); line-height:1.5}
.page-apply-write .file-drop-zone .text::before{content:''; display:block; width:48px; height:48px; background-image:url('../images/ico_file_upload.svg'); background-position:center; background-size:100%; background-repeat:no-repeat; margin:0 auto 8px}
.page-apply-write .file-content{padding:16px; align-items:center; border-radius:var(--radius); border:1px solid var(--color-border); font-size:15px; display:flex; gap:24px; justify-content:space-between}
.page-apply-write .file-content .file-name{display:flex; gap:6px; align-items:center; line-height:1.3; overflow-wrap:anywhere}
.page-apply-write .file-content .btn-delete .ico-delete::before{width:16px; height:16px; filter:invert(65%) sepia(47%) saturate(0%) hue-rotate(283deg) brightness(90%) contrast(83%)}
.page-apply-write .form-guide .guide-desc{padding-left:8px; display:flex; align-items:flex-start; gap:10px; font-size:15px; line-height:1.5; position:relative}
.page-apply-write .form-guide .guide-desc + .guide-desc{margin-top:6px}
.page-apply-write .form-guide .guide-desc::before{content:''; width:3px; height:3px; display:inline-block; background-color:var(--color-text-body); border-radius:var(--radius-circle); flex-shrink:0; margin-top:9px}
.page-apply-write .btn-agree{width:100%; max-width:none}
.page-apply-write .btn-wrap{display:flex; gap:8px}
.page-apply-write .btn-wrap button{min-width:120px; max-width:100%}



/* ------------------------------------------------
Page-setting(설정)
------------------------------------------------ */
.page-setting{background-color:#F9F9F9}
.page-setting .main-content{padding-top:0}
.page-setting .page-title{margin-top:60px}
.page-setting .user{display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center}
.page-setting .profile{position:relative}
.page-setting .profile-change{width:30px; height:30px; position:absolute; right:0; bottom:0; z-index:2; background-color:var(--color-white); border-radius:var(--radius-circle); display:flex; align-items:center; justify-content:center; box-shadow:0px 2px 5px rgba(0, 0, 0, 0.10)}
.profile-change .ico-camera{width:20px}
.page-setting .profile .profile-photo{width:120px; height:120px; box-shadow:0px 2px 3px 0px rgba(0, 0, 0, 0.10)}
.page-setting .user-info .user-nickname{font-size:20px; font-weight:700; line-height:1.3; color:var(--color-text-primary)}
.page-setting .user-info .user-name{margin-top:2px; color:var(--color-text-sub)}
.page-setting .setting-list{display:flex; flex-direction:column; gap:12px; margin-top:24px}
.page-setting .setting-list .setting-link{min-height:72px; padding:16px; display:flex; justify-content:space-between; align-items:center; gap:16px; background-color:var(--color-white);border-radius:var(--radius)}
.setting-item .setting-label{width:100%; display:flex; align-items:center; gap:8px}
.setting-item .setting-label .setting-text{width:100%; line-height:1.3}
.setting-item .setting-label .setting-text .title{font-weight:500; color:var(--color-text-primary)}
.setting-item .setting-label .setting-text .desc{margin-top:3px; font-size:13px; color:var(--color-text-sub)}
.setting-item .setting-value{min-width:200px; display:flex; align-items:center; justify-content:flex-end; gap:4px; color:var(--color-text-sub)}
.setting-item .setting-value .ico-arrow::before{background-image:url('../images/ico_arrow.svg'); filter:invert(62%) sepia(7%) saturate(19%) hue-rotate(349deg) brightness(101%) contrast(87%); background-size:7px}

.page-setting .form-check{padding-top:8px; padding-bottom:8px}
.page-setting .btn-wrap{width:700px; position:sticky; z-index:20; bottom:80px; padding-top:40px; display:flex; gap:8px}
.page-setting .btn-wrap button{width:100%; position:relative; border-radius:var(--radius)}

/* ------------------------------------------------
Page-setting-profile(프로필 설정)
------------------------------------------------ */
.profile-selector{display:flex; flex-direction:column; position:relative}
.profile-selector .fixed-tab{position:sticky; top:60px; z-index:20; backdrop-filter:blur(16px); padding:16px 0}
.profile-selector .profile-tab{display:flex; justify-content:center; gap:10px; position:sticky; top:0; z-index:10; position:sticky; top:60px; z-index:10}

.profile-selector .profile-tab .btn-profile-tab{width:40px; height:40px;border-radius:var(--radius-circle); box-shadow:0px 2px 3px 0px var(--color-black-200)}
.profile-selector .profile-tab .btn-profile-tab.active::before{border:2px solid var(--color-primary); z-index:10}
.profile-selector .profile-list{margin-top:16px; display:grid; grid-template-columns:repeat(6, 1fr); gap:16px; justify-items:center; padding-left:32px; padding-right:32px}
.profile-selector .profile-list .profile-photo{width:100%; height:100%; aspect-ratio:1 / 1}
.page-setting-profile .photo-add .btn-add{width:100%; height:100%; border-radius:var(--radius-circle); cursor:pointer; background-color:var(--color-gray-10)}
.page-setting-profile .photo-add::before{pointer-events:none}
.page-setting-profile .photo-add:hover .btn-add{background-color:var(--color-gray-100)}



/* ------------------------------------------------
page-setting-language(언어 설정)
------------------------------------------------ */
.setting-section:not(:first-child){margin-top:24px}
.setting-section .sub-title{padding-left:8px; font-size:13px; font-weight:500; line-height:1.5; color:var(--color-text-sub)}
.setting-section .setting-box{margin-top:8px; padding-left:16px; padding-right:16px; display:flex; flex-direction:column; align-items:flex-start; background-color:var(--color-white); border-radius:var(--radius)}
.setting-section .setting-box .lang-item{width:100%; padding:8px 0; display:flex; flex-direction:column; justify-content:center; gap:2px; position:relative; cursor:pointer; font-weight:500}
.setting-section .setting-box .lang-item:not(:last-child){border-bottom:1px solid var(--color-border-list)}
.setting-section .setting-box .lang-item.active .lang-name{color:var(--color-primary)}
.setting-section .setting-box .lang-item.active::after{content:''; display:block; width:20px; height:20px; background-image:url('../images/ico_confirm.svg'); filter:invert(24%) sepia(84%) saturate(4190%) hue-rotate(235deg) brightness(99%) contrast(118%); background-size:100%; position:absolute; right:0}
.setting-section .setting-box .lang-item .lang-name{font-size:15px; font-weight:500; line-height:1.3}
.setting-section .setting-box .lang-sub{font-size:13px; font-weight:300; line-height:1.3; color:var(--color-text-desc)}
.setting-section .setting-box .lang-edit{width:100%; min-height:56px; padding:8px 0; display:flex; align-items:center; gap:16px; justify-content:space-between; color:var(--color-primary); font-weight:500; line-height:1.3; cursor:pointer}
.setting-section .setting-box .lang-edit .ico-arrow::before{background-image:url('../images/ico_arrow.svg'); filter:invert(24%) sepia(84%) saturate(4190%) hue-rotate(235deg) brightness(99%) contrast(118%); background-size:8px}
.setting-section .lang-search{padding:16px 0; background-color:#F9F9F9}
.setting-section .search-input{width:100%; height:48px; background-color:var(--color-white)}
.setting-section .search-input + *{margin-top:24px}
.setting-section .setting-box .lang-item,
.setting-section .setting-box .lang-item{padding-right:40px}
.setting-section.lang-content .btn-wrap .btn-submit{width:100%; margin-top:16px}

/* setting-playlist(재생목록 설정) ---------- */
.setting-playlist .lang-item{flex-direction:row!important; justify-content:flex-start!important; justify-content:space-between!important; align-items:center}
.setting-playlist .setting-box .checkbox-group{width:100%; padding-top:12px; padding-bottom:12px}
.setting-playlist .setting-box .setting-item{width:100%; min-height:56px; padding:8px 0; display:flex; align-items:center; justify-content:space-between; gap:40px; font-weight:500}
.setting-playlist .setting-box .checkbox-group{gap:2px}
.setting-playlist .setting-box .form-check{width:100%}
.setting-playlist .setting-box .form-check .cb-label{font-weight:500}

/* form-switch */
.form-switch{width:34px; flex-shrink:0}
.form-switch input{display:none}
.form-switch .form-check-label{position:relative; display:block; width:34px; height:20px; cursor:pointer; transform:translate3d(0, 0, 0)}
.form-switch .form-check-label:before{content:''; position:relative; top:0; left:0; width:100%; height:100%; display:block; background:#E6E6E6; border-radius:50px; transition:background 0.2s ease}
.form-switch .form-check-label .pin{width:16px; height:16px; left:2px; margin-top:-8px; position:absolute; top:50%; transition:all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease}
.form-switch .form-check-input:checked .form-check-label .pin{transform:translateX(100%)}
.form-switch .form-check-input:checked + .form-check-label::before{background-color:var(--color-primary)}
.form-switch .form-check-label .pin::after{content:''; position:absolute; width:100%; height:100%; background-color:var(--color-white); border-radius:50%}
.form-switch .form-check-input:checked + .form-check-label .pin{transform:translateX(100%); transition:all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease}
.form-switch .form-check-input:checked + .form-check-label .pin::after{right:2px}


/* ------------------------------------------------
Page-404(오류 페이지)
------------------------------------------------ */
.page-404 .error{display:flex; justify-content:center; align-items:center; text-align:center}
.page-404 .error .text-wrap{width:100%; height:640px; display:flex; flex-direction:column; align-items:center; justify-content:center}
.page-404 .error .text-wrap::before{content:''; width:160px; height:160px; background-image:url('../images/ico_3d_404.gif'); background-size:100%; display:block}
.page-404 .error .text-wrap .title{font-size:28px; font-weight:600; line-height:1.3; color:var(--color-text-primary)}
.page-404 .error .text-wrap .desc{margin-top:8px; line-height:1.4; color:var(--color-text-desc)}
.page-404 .error .btns{display:inline-flex; align-items:stretch; gap:8px; margin-top:24px}
.page-404 .error .btns .btn{display:inline-flex; min-width:120px; flex:1 1 0}


/* ------------------------------------------------
Page-app-download(앱 다운로드 페이지)
------------------------------------------------ */
body.page-app-download{height:auto; min-height:100vh; overflow:auto; position:relative; background-color:#F4F7FF}
.app-download{width:100%; min-height:100vh; padding:80px 24px 120px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; overflow:hidden}
.app-download::after{content:''; position:absolute; inset:0; background-color:rgba(244,247,255,0.5); pointer-events:none}
.app-download .content-wrap{width:100%; max-width:320px; position:relative}
.app-download .contents{width:100%; display:flex; flex-direction:column; align-items:center; gap:36px; position:relative; z-index:1}
.app-download .logo-app{width:110px; height:120px; background-image:url('../images/logo_app.svg'); background-position:center; background-repeat:no-repeat; background-size:100%}
.app-download .title{font-size:32px; font-weight:900; color:var(--color-black-800); line-height:1.3; text-align:center}
.app-download .desc{margin-top:8px; color:var(--color-black-600); font-weight:400; line-height:1.5; text-align:center}
.app-download .btn-wrap{width:100%}
.app-download .btns{display:flex; gap:8px}
.app-download .btns a{width:100%; min-height:56px; display:inline-flex; justify-content:center; align-items:center; gap:8px; padding:16px 12px; background-color:#333333; border-radius:8px; font-size:15px; color:var(--color-white)}
.app-download .btns a::before{content:''; display:inline-block; width:20px; height:20px; background-size:100%; background-repeat:no-repeat; background-position:center; flex-shrink:0}
/* .app-download .btns .app-store::before{background-image:url('../images/ico_ios.svg')}
.app-download .btns .google-play::before{background-image:url('../images/ico_googleplay.svg')} */
.app-download .btns .app-waple::before{background-image:url('../images/ico_logo.svg')}
.app-download .app-info{margin-top:24px; font-size:15px; color:var(--color-black-500); font-weight:300; text-align:center}
.app-download .guest-channel{padding-top:32px; position:relative}
.app-download .guest-channel::before{content:''; width:100%; height:1px; background-color:rgba(0, 0, 0, 0.08); display:block; top:0; left:0; right:0; position:absolute}
.app-download .guest-title{font-size:15px; font-weight:500; color:var(--color-black-600)}
.app-download .guest-desc{margin-top:2px; font-size:15px; color:var(--color-black-500)}
.app-download .guest-channel-list{display:flex; flex-direction:column; gap:4px; margin-top:16px}
.app-download .guest-channel-list .channel-btn{min-height:46px; display:flex; align-items:center; gap:8px; padding:8px 16px; border-radius:8px; font-size:14px; color:var(--color-black-600); line-height:1.35; background-color:rgba(255, 255, 255, 0.50); box-shadow:0 2px 6px 0 rgba(0, 0, 0, 0.06); backdrop-filter:blur(20px)}
.app-download .guest-channel-list .channel-btn .ico{width:18px; height:18px}
.app-download .copy{width:100%; font-size:13px; color:var(--color-black-300)}


/* 배경 오브젝트 */
.app-download .bg-object{position:absolute; inset:0; pointer-events:none; z-index:0; filter:blur(13px)}
.app-download .bg-object .obj{position:absolute; display:block; z-index:0}
.app-download .bg-object .obj-play{width:110px; height:120px; top:-120px; left:-40px; transform:rotate(-30deg)}
.app-download .bg-object .obj-music{width:40px; height:40px; top:-140px; right:30px}
.app-download .bg-object .obj-circle01{width:190px; height:190px; bottom:0; right:-100px}
.app-download .bg-object .obj-circle02{width:60px; height:60px; bottom:-40px; left:30px}