@charset "utf-8";
/* Info
 ========================================================================== */
/**
 * 1. Writer: Ajin Lee. Sunhyeong Kim. (Weaverloft Corp.)
 * 2. Production Date: 2024-07-30
 * 3. Client: MEDIASCOPE Inc.
 */

/*========== Import ==========*/
@import url("reset.css")
;@import url("layout.css?v=1.0.5");
@import url("popup.css");

/*========== Font ==========*/
/* Pretendard Variable
   TTF(6.4MB) 전체 로드 대신 woff2 dynamic subset을 사용한다.
   @font-face 선언은 index.html에서 로드하는
   /fonts/pretendard/pretendardvariable-dynamic-subset.css 에 있다. */

/* Pretendard - Chart.js + editor */
@font-face {
    font-family:'Pretendard';
    font-weight: 400; 
    font-style: normal;
    src: url('../fonts/pretendard/Pretendard-Regular.otf') format('otf'); 
} 
@font-face {
    font-family:'Pretendard';
    font-weight: 500; 
    font-style: normal;
    src: url('../fonts/pretendard/Pretendard-Medium.otf') format('otf');
}
@font-face {
    font-family:'Pretendard';
    font-weight: 700; 
    font-style: normal;
    src: url('../fonts/pretendard/Pretendard-Bold.otf') format('otf'); 
} 
.pretendard-txt { font-family:'Pretendard'; } 
.regular-txt { font-weight: 400; font-variation-settings: 'wght' 400; } 
.medium-txt { font-weight: 500; font-variation-settings: 'wght' 500; } 
.bold-txt { font-weight: 700; font-variation-settings: 'wght' 700; } 

/* Rubik VariableFont */
@font-face { 
    font-family: 'Rubik'; 
    src: url('../fonts/rubik/Rubik-VariableFont_wght.ttf') format('truetype-variations'); 
    font-weight: 300 900; 
    font-style: normal; 
    font-display: swap; 
} 
.rubik-txt { font-family: 'Rubik'; } 
.medium-num { font-family: 'Rubik'; font-weight: 500; font-variation-settings: 'wght' 500; } 
.semi-b-num { font-family: 'Rubik'; font-weight: 600; font-variation-settings: 'wght' 600; } 

/*========== Root ==========*/
:root { 
    --main-point-color: #FF2B2F; 
    --sub-point-color: #FED4D5; 
    --main-pressed-color:#F00C11; 
    --sub-pressed-color:#FFF4F4; 
    --main-disabled-color: #FF8688; 
    --sub-disabled-color:#FF9496; 

    --main-bg-color: #333; 
    --sub-bg-color-f5: #f5f5f5; 
    --sub-bg-color-e: #eee; 
    --sub-bg-point-color: #FFECED;

    --basic-line-color: #EBEBEB;
    --error-color: red;

    --graph-color-red: #FF4848; 
    --graph-color-green: #00DB8F; 
    --graph-color-yellow: #FFB62C; 
    --graph-color-blue: #6FB6FF; 
} 

:root .dark { 
    --basic-line-color: #3B3A3C;
    --sub-bg-color-f5: #3B3A3C; 
} 

/* ------------------------------------------------------------------------ 
 Base
------------------------------------------------------------------------ */
* { font-family:'Pretendard'; font-family: 'Pretendard Variable'; letter-spacing: -0.025em; -webkit-font-smoothing: antialiased; } 
html { width: 100%; font-family:'Pretendard'; font-family: 'Pretendard Variable'; font-weight: 500; font-variation-settings: 'wght' 500; color: #111; letter-spacing: -0.025em; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; } 
body { width: 100%; margin: 0; font-size: 16px; color: #111; line-height: 1.37; letter-spacing: -0.025em; } 
canvas * { font-family: 'Pretendard Variable' !important; } 
a { display: block; text-decoration: none; color: #111; cursor: pointer; } 
*::placeholder { font-size: inherit; font-weight: 400; font-variation-settings: 'wght' 400; color: #888; } 
*:disabled::placeholder, *.disabled::placeholder, *[readonly]::placeholder { color: #ddd; } 

/* 대체 텍스트 숨김처리 */
.blind { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; } 
.scroll-disable { height:100dvh; min-height:100dvh; overflow:hidden !important; -ms-touch-action: pan-y; touch-action: pan-y; } 
.scroll-none { overflow: hidden; } 

/* 비활성화 */
.disabled { cursor: default; pointer-events: none; outline: none !important; } 
:disabled { outline: none !important; } 
.off { display: none; } 

/* 모든 a 태그와 버튼에 적용 */
a, button, [role="button"] {
  touch-action: manipulation;
}

/* ------------------------------------------------------------------------
 Overlay layer background handling
 - 레이어 wrapper([data-layer-id])는 투명(React inline에서 처리)
 - 그 하위 container 계열도 투명
 - 실제 콘텐츠 영역(main)만 흰색 배경
------------------------------------------------------------------------ */
[data-layer-id] .container,
[data-layer-id] #container,
[data-layer-id] .wrap,
[data-layer-id] #wrap {
    background-color: transparent !important;
}

[data-layer-id] main,
[data-layer-id] #main {
    background-color: #fff;
}

[data-layer-id="PlayView"] main,
[data-layer-id="PlayView"] #main {
    background-color: #000;
}
/*========== Text ==========*/
h1,h2,h3,h4,h5,h6 { font-weight: 700; font-variation-settings: 'wght' 700; letter-spacing: -0.025em; word-break: keep-all; } 
h1 { font-size: 2.13rem; line-height: 1.41; } /*font-size: 34px; */
h2 { font-size: 2rem; line-height: 1.44; } /*font-size: 32px; */
h3 { font-size: 1.63rem; line-height: 1.38; } /*font-size: 26px; */
h4 { font-size: 1.50rem; line-height: 1.33; } /*font-size: 24px; */
h5 { font-size: 1.38rem; line-height: 1.36; } /*font-size: 22px; */
h6 { font-size: 1.25rem; line-height: 1.40; } /*font-size: 20px; */
.content-txt1 { font-size: 1.125rem; line-height: 1.46; } /*font-size: 18px; */
.content-txt2 { font-size: 1rem; line-height: 1.37; } /*font-size: 16px; */
.content-txt3 { font-size: 0.875rem; line-height: 1.42; } /*font-size: 14px; */
.content-txt4 { font-size: 0.813rem; line-height: 1.4; } /*font-size: 14px; */
.caption-txt1 { font-size: 0.750rem; line-height: 1.5; } /*font-size: 12px; */
.caption-txt2 { font-size: 0.63rem; line-height: 1.4; } /*font-size: 10px; */
.caption-txt3 { font-size: 0.563rem; line-height: 1.3; } /*font-size: 9px; */
.caption-txt4 { font-size: 0.5rem; line-height: 1.2; } /*font-size: 8px; */
.caption-txt5 { font-size: 0.438rem; line-height: 1.1; } /*font-size: 7px; */

.point-txt { color: var(--main-point-color); } 
@media screen and (min-width: 421px) { 
    h1 { font-size: clamp(34px, 9.067vw, 44px); } 
    h2 { font-size: clamp(32px, 8.533vw, 41px); } 
    h3 { font-size: clamp(26px, 6.933vw, 33px); } 
    h4 { font-size: clamp(24px, 6.4vw, 31px); } 
    h5 { font-size: clamp(22px, 5.867vw, 28px); } 
    h6 { font-size: clamp(20px, 5.333vw, 26px); } 

    .content-txt1 { font-size: clamp(18px, 4.8vw, 23px); } 
    .content-txt2 { font-size: clamp(16px, 4.267vw, 20px); } 
    .content-txt3 { font-size: clamp(14px, 3.733vw, 18px); } 
    .content-txt4 { font-size: clamp(13px, 3.433vw, 16px); } 
    .caption-txt1 { font-size: clamp(12px, 3.2vw, 15px); } 
    .caption-txt2 { font-size: clamp(10px, 2.667vw, 13px); } 
    .caption-txt3 { font-size: clamp(9px, 2.667vw, 12px); } 
    .caption-txt4 { font-size: clamp(8px, 2.667vw, 11px); } 
    .caption-txt5 { font-size: clamp(7px, 2.267vw, 10px); } 
}

/*========== lazyload ==========*/
.fade-in { opacity: 0; } 
/* .fade-in.lazyloaded { opacity: 1; background-color: #f5f5f5; transition: opacity 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55) 300ms; -webkit-transition: opacity 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55) 300ms; -moz-transition: opacity 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55) 300ms; -ms-transition: opacity 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55) 300ms; -o-transition: opacity 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55) 300ms; }  */
.fade-in.lazyloaded {opacity: 1}
/*========== Skeleton ========== 이미지 데이터 순차적으로 불러오는 소스*/ 
/* .skeleton { position: relative; overflow: hidden; } 
.skeleton::after { content: ''; z-index: 50; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(120deg, #e5e5e5 30%, #f0f0f0 38%, #f0f0f0 40%, #e5e5e5 48%); border-radius: 4px; background-size: 200% 100%; background-position: 100% 0; animation: load 1.5s infinite; -webkit-animation: load 1.5s infinite; } 
@keyframes load { 
    100% { background-position: -100% 0; } 
} */

/* ------------------------------------------------------------------------ 
Common
------------------------------------------------------------------------ */
/*========== Custom Design - Button ==========*/
.btn-wrap { font-size: 1rem; } 
.basic-btn { display: inline-block; overflow: hidden; position: relative; min-width: 110px; width: 100%; height: auto; padding: 0 0.938em; background-color: var(--main-point-color); border: 1px solid transparent; border-radius: 0.25em; font-size: 1rem; color: #fff; text-align: center; line-height: 1; white-space: nowrap; box-sizing: border-box; cursor: pointer; transition: background-color 300ms; font-weight: 700; font-variation-settings: 'wght' 700; } 
.basic-btn span { display: inline-block; padding: 0.938em 0; font-size: inherit; } 
.basic-btn.round { border-radius: 1.50em; } 
.basic-btn.red { background-color: var(--main-point-color); border-color: var(--main-point-color); } 
.basic-btn.red:active { background-color: var(--main-pressed-color); border-color: var(--main-pressed-color); } 
.basic-btn.red:disabled, .basic-btn.red.disabled { background-color: var(--main-disabled-color); border-color: var(--main-disabled-color); } 
.basic-btn.line { background-color: #fff; border-color: var(--main-point-color); color: var(--main-point-color); } 
.basic-btn.line:active { background-color: var(--sub-pressed-color); } 
.basic-btn.line:disabled, .basic-btn.line.disabled { border-color: var(--sub-disabled-color); color: var(--sub-disabled-color); } 
.basic-btn.gray { background-color: #eee; color: #000; } 

.basic-btn.gray-line { padding: 0 0.938em; border: 1px solid var(--basic-line-color); background-color: #F5F5F5; color: #333; font-weight: 500; font-variation-settings: 'wght' 500; text-align: left; } 
.basic-btn.gray-line.warning { color: var(--main-point-color); } 
.basic-btn.gray-line span { display: block; padding: 0.938em 1.50em 0.938em 0; background-repeat: no-repeat; background-position: right center; background-size: 1.50em auto; transition: background-color 300ms; } 
.basic-btn.gray-line.share span { background-image: url('../images/common/icon-link-share.svg'); } 
.basic-btn.gray-line.copy span { background-image: url('../images/common/icon-link-copy.svg'); } 
.basic-btn.gray-line.download span { background-image: url('../images/common/icon-download.svg'); } 
.basic-btn.gray-line.warning span { background-image: url('../images/common/icon-warning.svg'); } 
.basic-btn.gray-line.book span { background-image: url('../images/common/icon-bookmark.svg'); } 

.basic-btn.white-line { border: 1px solid var(--basic-line-color); background-color: #fff; font-size: 0.875rem; font-weight: 500; font-variation-settings: 'wght' 500; border-radius: 0.29em; color: #333; } 
.basic-btn.red-txt { color: var(--main-point-color) !important; } 
.basic-btn.white-line span { display: inline-block; padding: 0.79em 0 0.79em 1.57em; background-repeat: no-repeat; background-position: left center; background-size: 1.14em auto; } 
.basic-btn.white-line.fix span { background-image: url('../images/common/icon-fix.svg'); } 
.basic-btn.white-line.del span { background-image: url('../images/common/icon-del.svg'); } 
.basic-btn.white-line.del.red-txt span { background-image: url('../images/common/icon-del-red.svg'); } 
.basic-btn.white-line.warning span { background-image: url('../images/common/icon-warning.svg'); } 
.basic-btn.white-line.download span { background-image: url('../images/common/icon-download.svg'); } 
.basic-btn.white-line.repor span { background-image: url('../images/common/dot_repor.svg'); color: #ff2b2f; } 
.basic-btn.white-line.block span { background-image: url('../images/common/dot_block.svg');  color: #ff2b2f; } 

.basic-btn.white { border: 1px solid #fff; background-color: transparent; color: #fff; } 

.basic-btn.black-line { padding: 0.813em 0; border: 1px solid #666; background-color: #fff; color: #666; } 
.basic-btn.black-line span { padding: 0; } 

.basic-btn.sel { overflow: hidden; position: relative; padding: 1.005em 3.57em 1.01em 1.14em; background-color: #fff; border-color: var(--basic-line-color); font-size: 0.875rem; color: #333; text-align: left; } 
.basic-btn.sel::after { content: ''; position: absolute; top: 0; right: 0; width: 3.57em; height: 100%; background-image: url("../images/common/icon-arrow-down.svg"); background-repeat: no-repeat; background-position: right 1.14em center; background-size: 1.71em auto; background-color: #fff; } 
.basic-btn.sel span { overflow: hidden; padding: 0; white-space: nowrap; text-overflow: ellipsis; } 

.basic-btn.sel.txt { overflow: initial; min-width: auto; width: auto; padding: 0 2em 0 0; border: none; font-weight: 700; font-variation-settings: 'wght' 700; color: #111; } 
.basic-btn.sel.txt::after { top: 50%; transform:translate(0, -50%); width: 1.71em; height: 1.71em; background-size: contain; background-position: center center; } 

.basic-btn.small { min-width: 90px; border-radius: 1.29em; font-size: 0.875rem; } 
.basic-btn.small span { padding: 0.54em 0; } 

.basic-btn.xsmall { min-width: 68px; padding: 0 1.48em; border-radius: 1.67em; font-size: 0.750rem; font-weight: 500;font-variation-settings: 'wght' 500;} 
.basic-btn.xsmall span { padding: 0.585em 0; } 

.btn-wrap:has(.compact) { display: flex; justify-content: flex-start; flex-flow: row nowrap; gap: 0.5em; overflow-x: auto;}
.basic-btn.compact { flex-shrink: 0; width: max-content; min-width: 70px; padding: 0.5em 0.875em; font-size: 0.875rem; line-height: 1.2857; font-weight: 500; font-variation-settings: 'wght' 500;}
.basic-btn.compact.black-line { border: 1px solid #ddd;}
.btn-wrap:has(.compact)::-webkit-scrollbar { display: none;}

.basic-btn.pink { border: 1px solid var(--sub-point-color); background-color: #fff; color: var(--main-point-color); } 
.basic-btn.pink.on { border: 1px solid var(--sub-point-color); background-color: var(--sub-point-color); color: var(--main-point-color); } 
.basic-btn.gray { border: 1px solid #ddd; background-color: #fff; color: #666; } 
.basic-btn.gray:not(.line) {background-color: #EEEEEE; border-color: #EEEEEE; color: #000;}

.basic-btn.sing span {padding: 0.54em 0 0.54em 1.14em; background-image: url("../images/common/icon-mic-red.svg"); background-repeat: no-repeat; background-position: left center; background-size: 1.14em auto;}
.basic-btn.sing.red span {padding: 0.938em 0 0.938em 1.50em; background-image: url("../images/common/icon-mic-white.svg");background-size: 1.25em auto;}
.basic-btn.sing.gray span {padding: 0.938em 0 0.938em 1.50em; background-image: url("../images/common/icon-mic-gray.svg");background-size: 1.25em auto;}

.basic-btn.sing-duet-part-btn { font-size: 1rem;}
.basic-btn.sing-duet-part-btn span { line-height: 1.4286; padding: 0 0 0 2em; background-position: left center; background-repeat: no-repeat; background-size: 1.75em 1.4286em;}
.basic-btn.sing-duet-part-btn.sing-duet-A-part-btn { border-color: #0DBE80; color: #0DBE80;}
.basic-btn.sing-duet-part-btn.sing-duet-A-part-btn span { background-image: url("../images/common/icon-Apart.svg");}
.basic-btn.sing-duet-part-btn.sing-duet-B-part-btn { border-color: #4A98E8; color: #4A98E8;}
.basic-btn.sing-duet-part-btn.sing-duet-B-part-btn span { background-image: url("../images/common/icon-Bpart.svg");}
.basic-btn.sing-duet-part-btn.sing-duet-A-part-btn:hover { background-color: rgba(13,190,128,0.1);}
.basic-btn.sing-duet-part-btn.sing-duet-B-part-btn:hover { background-color: rgba(74,152,232,0.1);}

.play-bottom-btn-wrap .basic-btn span { display: inline-block; padding-left: 1.5em; line-height: 1.25; background-image: url("../images/sub/play/icon-mic-btn.svg"); background-position: left center; background-repeat: no-repeat; background-size: 1.25em auto; } 

@media screen and (min-width: 421px){
    .btn-wrap { font-size: clamp(16px, 4.267vw, 18px); } 
    .basic-btn { font-size: clamp(16px, 4.267vw, 18px); } 
    .basic-btn.white-line { font-size: clamp(14px, 3.733vw, 18px); } 
    .basic-btn.sel { font-size: clamp(14px, 3.733vw, 18px); } 
    .basic-btn.small { font-size: clamp(14px, 3.733vw, 18px); } 
    .basic-btn.xsmall {font-size: clamp(12px, 3.2vw, 15px);} 
	.basic-btn.sing-duet-part-btn { font-size: clamp(16px, 4.267vw, 18px); } 
    .basic-btn.compact { font-size: clamp(14px, 3.733vw, 18px); } 
}
/* Couple */
.btn-wrap.couple { display: flex; flex-wrap: wrap; gap: 1em; } 
.btn-wrap.couple .inner { display: flex; flex-wrap: wrap; gap: 1em; width: 100%; } 
.btn-wrap.couple .basic-btn { flex: 0 0 calc(100%/2 - 0.5em); min-width: auto; } 

/* Multi */
.btn-wrap.multi { display: flex; flex-wrap: wrap; gap: 1em; } 
.btn-wrap.multi .basic-btn.w100 { flex: 0 0 100%; } 
.btn-wrap.multi .basic-btn:not(.w100) { flex: 0 0 calc(100%/2 - 0.6em); } 

/* Fixed */
.btn-wrap.fixed { display: block; } 
.btn-wrap.fixed .basic-btn.dot { width: 1.25em; height: 1.25em; min-width: 20px; min-height: 20px; padding: 0; border-radius:0; background-color: #fff; background-image: url('../images/common/icon-dot-btn.svg'); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; } 
.btn-wrap.fixed .basic-btn.dot span { padding: 0; } 
.btn-wrap.fixed .basic-btn.dot.del {background-image: url('../images/common/icon-del.svg');}

/* bottom */
.btn-wrap.bottom { position: fixed; left: 50%; bottom: 0; width: 100%; max-width: 750px; padding: 10px 0; padding-bottom: calc(10px + constant(safe-area-inset-bottom)); padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: #fff; transform: translateX(-50%); z-index: 60; } 
.btn-wrap.bottom.bg-none {background-color: transparent;}
.btn-wrap.bottom.text { padding: 10px 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 23px); } 
.btn-wrap.bottom .bottom-txt { padding: 1.14em 0; text-align: center; color: #888888; word-break: keep-all; } 
.btn-wrap.bottom .bottom-txt span {display: block;}
.btn-wrap.bottom .bottom-txt br.mo, .btn-wrap.bottom .bottom-txt br.m-mo {display: none;}
@media screen and (max-width: 610px){
    .btn-wrap.bottom .bottom-txt br.m-mo {display: block;}
}
@media screen and (max-width: 325px){
    .btn-wrap.bottom .bottom-txt br.mo {display: block;}
    .btn-wrap.bottom .bottom-txt br.m-mo {display: none;}
}

/* bookmark */
.bookmark-icon { display: inline-block; width: 1.14em; height: 1.14em; background-image: url('../images/common/icon-bookmark-gray.svg'); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; vertical-align: sub; } 

/* gift */
.basic-btn.gift-btn { width: max-content; padding: 0.5em 1.125em 0.5em 1em; } 
.basic-btn.gift-btn span { padding: 0 0 0 1.429em; line-height: 1.286; background-image: url("../images/common/icon-gift-red.svg"); background-position: left center; background-repeat: no-repeat; background-size: 1.286em 1.286em; } 
.basic-btn.gift-btn.black-line { padding: 0.813em 1.286em; border: 1px solid #ddd; } 
.basic-btn.gift-btn.black-line span { background-image: url("../images/common/icon-gift.svg"); }
.basic-btn.gift-btn:not(.black-line) span { font-size: 0.875rem;}
.basic-btn.gift-btn.only-icon { min-width: auto; padding: 0.5714em;}
.basic-btn.gift-btn.only-icon span { width: 1.2857em; aspect-ratio: 1 / 1; padding: 0;}
@media screen and (min-width: 421px){
    .basic-btn.gift-btn:not(.black-line) span { font-size: clamp(14px, 3.733vw, 18px); } 
}

/* follow & gift */
.follow-btn-wrap { display: flex; gap: 0.5714em; } 
.follow-btn-wrap button { flex-grow: 1; } 
.follow-btn-wrap .following-btn { display: none; } 
.follow-btn-wrap.following .following-btn { display: block; } 
.follow-btn-wrap.following .follow-btn { display: none; } 
.follow-btn-wrap .gift-btn { flex-shrink: 0; width: max-content; } 

/*========== Custom Design - Input ==========*/
.input-box-wrap { display: flex; flex-flow: column; width: 100%; } 
.input-box-wrap.nowrap { flex-flow: row nowrap; align-items: center; } 
.input-box { position: relative; width: 100%; } 
/* Input - Disabled & Readonly */
.input-box.disabled input:not([type="button"], [type="submit"]), input:not([type="button"], [type="submit"]):disabled, input:not([type="button"], [type="submit"])[readonly] { color: #ddd; } 
/* Input - button(couple) */
.input-box-wrap.couple { display: flex; flex-wrap: wrap; gap: 1em; } 
.input-box-wrap.couple .basic-btn { flex: 0 0 calc(100%/2 - 0.5em); } 
/* Input */
.input-box input { position: relative; width: 100%; padding: 0.63em 0; border-bottom: 1px solid var(--basic-line-color); font-size: 1rem; font-weight: 400; font-variation-settings: 'wght' 400; color: #111; } 
.input-box.box input { padding: 0.719em 1em; border-radius: 4px; border: 1px solid var(--basic-line-color); } 
@media screen and (min-width: 421px){
    .input-box input { font-size: clamp(16px, 4.267vw, 18px); } 
}

/* Input - line Animation */
.input-box .line-focus { display: inline-block; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: #666; transition: width 0.4s; } 
.input-box input:focus ~ .line-focus, .input-box input ~ .line-focus.on { width: 100%; transition: width 0.4s; } 
/* Input - password */
.input-box.password:has(.eye-btn) input { padding-right: 2.38em; } 
.input-box.password .eye-btn { position: absolute; top: 0.38em; right: 0.38em; width: 1.88em; height: 1.88em; background-image: url("../images/common/icon-eye-gray.svg"); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; background-color: #fff; font-size: 1rem; } 
.input-box.password .eye-btn.open { background-image: url("../images/common/icon-eye-dark.svg"); } 
/* Input - Keyup */
.input-box.keyup input { padding-right: 2.38em; } 
/* Input - Button&Submit */
.input-box input[type="button"], .input-box input[type="submit"] { padding: 0.94em 0; font-weight: 700; font-variation-settings: 'wght' 700; color: #fff; } 
/* Form - Input Button */
.form-input-box { display: flex; align-items: center; gap: 0.50em; } 
.form-input-box .input-box.box { width: calc(100% - 5.88em); } 
.form-input-box .btn-wrap { width: 5.63em; } 
.form-input-box .btn-wrap .basic-btn { min-width: 90px; } 

/* Text Count */
.write-typing { position: absolute; top: 50%; right: 0; transform: translate(0, -50%); font-weight: 500; font-variation-settings: 'wght' 500; font-size: 0.750rem; color: #bbb; } 
.write-typing span { display: inline-block; margin: 0; padding: 0; } 
.write-typing .typing-num.on { color: #333; } 
/* Error Message */
.input-box-wrap.error .input-box input ~ .line-focus { width: 100%; transition: width 0.4s; background-color: var(--error-color); } 
.error-wrap { display: none; margin: 8px 0 0; } 
.input-box-wrap.error .error-wrap { display: block; } 
p.error { padding-left: 1.50em; background-image: url("../images/common/icon-info-red.svg"); background-repeat: no-repeat; background-size: 1em auto; background-position: center left; font-size: 0.750rem; color: var(--error-color); line-height: 1; } 
@media screen and (min-width: 421px){
    .input-box.password .eye-btn { font-size: clamp(16px, 4.267vw, 20px); } 
    .write-typing { font-size: clamp(12px, 3.2vw, 15px); } 
    p.error { font-size: clamp(12px, 3.2vw, 15px); } 
}

/* Pin Code */
.pin-code { display: flex; justify-content: center; gap: 0.5em; margin-top: 1.5em; font-size: inherit;}
.pin-code input { width: 2.3334em; aspect-ratio: 1 / 1; border-radius: 0.4445em; font-size: 1.125rem; -webkit-border-radius: 0.4445em; -moz-border-radius: 0.4445em; -ms-border-radius: 0.4445em; -o-border-radius: 0.4445em; background-color: #3B3A3C; text-align: center; color: #fff; }
.pin-code input:focus { outline:none;}
.pin-code input::-webkit-outer-spin-button,
.pin-code input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}

/*========== Custom Design - Textarea ==========*/
.textarea-box-wrap { position: relative; } 
.textarea-box { border: 1px solid var(--basic-line-color); border-radius: 4px; padding: 0.938em; min-height: 11.5em; transition: padding 300ms; font-size: 1rem; } 
.textarea-box textarea { display: block; width: 100%; min-height: 100%; border-radius: inherit; padding: 1px; font-size: 1rem; color: #111; } 
/* Textarea - Keyup */
.textarea-box-wrap .textarea-box.keyup { padding: 0.938em 0.938em 3.38em; } 
.textarea-box-wrap .textarea-box:has(.input-label.on) { padding: 2em 0.938em 2.38em; } 
.textarea-box-wrap .textarea-box textarea { min-height: 6.84em; } 
.textarea-box-wrap .write-typing { top: auto; right: 0.875em; bottom: 0.875em; transform: translate(0,0); } 
/* Textarea - Disabled & Readonly */
.textarea-box.disabled textarea, .textarea-box textarea:disabled, .textarea-box textarea[readonly] { color: #ddd; } 
.textarea-box-wrap:has(.disabled) .write-typing .typing-num, .textarea-box-wrap:has(textarea:disabled) .write-typing .typing-num ,.textarea-box-wrap:has(textarea[readonly]) .write-typing .typing-num { color: #bbb; } 
/* label */
.label-box { position: relative; } 
.label-box .input-label { opacity: 0; visibility: hidden; position: absolute; top: 0; font-weight: 500; font-variation-settings: 'wght' 500; color: #888; transition: all 150ms; } 
.label-box .input-label.on { opacity: 1; visibility: visible; top: -1.25em; } 
.textarea-box.label-box .input-label.on { top: 0.75em; } 
.label-box:has(.input-label.on) input:focus::placeholder, .label-box:has(.input-label.on) textarea:focus::placeholder { opacity: 0; color: transparent; } 
@media screen and (min-width: 421px){
    .textarea-box { font-size: clamp(16px, 4.267vw, 20px); } 
    .textarea-box textarea { font-size: clamp(16px, 4.267vw, 20px); } 
}

/*========== Custom Design - Checkbox ==========*/
input[type="checkbox"] + label { cursor: pointer; font-size: 0.875rem; font-weight: 400; font-variation-settings: 'wght' 400; } 
.basic-check-box input[type="checkbox"] { display: none; } 
.basic-check-box input[type="checkbox"] + label { position: relative; display: inline-block; width: auto; height: auto; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; font-size: 0.875rem; font-weight: 400; font-variation-settings: 'wght' 400; color: #888; } 
.basic-check-box input[type="checkbox"] + label::before { content: ''; display: inline-block; width: 1.14em; height: 1.14em; margin: 0 0.57em 0 0; border: 1px solid #ddd; border-radius: 2px; box-sizing: border-box; background-color: #fff; vertical-align: middle; transform: translateY(-1.5px); cursor: pointer; } 
.basic-check-box input[type="checkbox"]:checked + label::before { border: 1px solid var(--main-point-color); background-image: url("../images/common/icon-check-on.svg"); background-repeat: no-repeat; background-position: center center; background-size: 120% 120%; cursor: pointer; } 
.basic-check-box.disabled input[type="checkbox"] + label, .basic-check-box input[type="checkbox"]:disabled + label, .basic-check-box input[readonly] + label { cursor: default; } 
.basic-check-box.disabled input[type="checkbox"] + label::before, .basic-check-box input[type="checkbox"]:disabled + label::before, .basic-check-box input[readonly] + label::before { opacity: 0.4; border: 1px solid #E5E5E5; background-color: #E5E5E5; } 
@media screen and (min-width: 421px) { 
    input[type="checkbox"] + label, .basic-check-box input[type="checkbox"] + label { font-size: clamp(14px, 3.733vw, 18px); } 
}

/*========== Custom Design - Checkbox Text ==========*/
.basic-check-box input[type="checkbox"].checkbox-text { display: none; } 
.basic-check-box input[type="checkbox"].checkbox-text + label { position: relative; display: inline-block; width: auto; height: auto; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; transition: background-image 300ms, color 300ms; } 
.basic-check-box input[type="checkbox"].checkbox-text:checked + label {padding: 0 1.29em 0 0; font-weight: 500; font-variation-settings: 'wght' 500;color: var(--main-point-color);}
.basic-check-box input[type="checkbox"].checkbox-text + label::before { position: absolute; top: 50%; transform:translate(0, -50%) ; right: 0; margin: 0; border: none; border-radius: 0; background-color: transparent; background-image: none; }
.basic-check-box input[type="checkbox"].checkbox-text:checked + label::before { background-image: url("../images/common/icon-close-red.svg");}
.basic-check-box.all input[type="checkbox"].checkbox-text:checked + label {padding: 0;}
.basic-check-box.all input[type="checkbox"].checkbox-text:checked + label::before {display: none;}

/*========== Custom Design - Input Switch ==========*/
.basic-switch { position: relative; width: 52px; height: 28px; } 
.basic-switch .checkbox-switch { position: relative; width: 100%; height: 100%; border-radius: 14px; background-color: #E5E5E5; cursor: pointer; } 
.basic-switch .checkbox-switch::after { transition: all 100ms ease-out; } 
.basic-switch .checkbox-switch::after { content: ""; position: absolute; top: 50%; left: 2px; transform: translate(0, -50%); width: 24px; height: 24px; border: 2px solid var(--sub-color04); border-radius: 50%; background-color: #fff; } 
.basic-switch .checkbox-switch:checked { background-color: var(--main-point-color) } 
.basic-switch .checkbox-switch:checked::after { left: 26px; } 

.basic-switch.txt { width: 69px; } 
.basic-switch.txt .checkbox-switch:checked::after { left: 43px; } 
.basic-switch.txt .checkbox-switch ~ label { display: inline-block; position: absolute; top: 50%; left: 29px; transform: translate(0, -50%); width: 2.58em; font-size: 0.750rem; font-weight: 500; font-variation-settings: 'wght' 500; color: #888; text-align: center; } 
.basic-switch.txt .checkbox-switch:checked ~ label { left: 8px; color: #fff; } 

.basic-switch .checkbox-switch:disabled, .basic-switch .checkbox-switch.basic-switch .checkbox-switch:disabled, .basic-switch .checkbox-switch[readonly] { background-color: #f2f2f2; } 
.basic-switch .checkbox-switch:disabled::after, .basic-switch .checkbox-switch.basic-switch .checkbox-switch:disabled::after, .basic-switch .checkbox-switch[readonly]::after { background-color: #ddd; } 
@media screen and (min-width: 421px){
    .basic-switch.txt .checkbox-switch ~ label { font-size: clamp(12px, 3.2vw, 13px); } 
}

/*========== Custom Design - Search Box ==========*/
.search-input-wrap { position: relative; width: 100%; } 
.search-input-wrap .search-input { width: 100%; border-radius: 1.43em; border: 1px solid #F5F5F5; background-color: #F5F5F5; padding: 0.86em 2.86em 0.86em 3em; font-size: 0.875rem; font-weight: 400; font-variation-settings: 'wght' 400; color: #111; transition: border 300ms, background-color 300ms; } 
.search-input-wrap .search-input::placeholder { font-size: inherit; font-weight: 400; font-variation-settings: 'wght' 400; color: #666; } 
.search-input-wrap .search-btn { display: block; position: absolute; top: 0; left: 0.75em; width: 1.25em; height: 100%; background-image: url('../images/common/icon-search.svg'); background-repeat: no-repeat; background-position: center center; background-size: 1.25em 1.25em; font-size: 1rem; text-indent: -9999px;} 
.search-input-wrap .search-del-btn { display: none; align-items: center; justify-content: center; position: absolute; top: 0; right: 0.75em; width: 1.88em; height: 100%; font-size: 1rem; } 
.search-input-wrap .search-del-btn span { display: inline-block; width: 1.125em; height: 1.125em; border-radius: 50%; background-image: url('../images/common/icon-search-close.svg'); background-repeat: no-repeat; background-position: center center; background-size: contain; text-indent: -9999px; } 
.search-input-wrap .search-input:focus, .search-input-wrap.on .search-input { border: 1px solid var(--main-point-color); background-color: #fff; } 
.search-input-wrap:has(input:focus) .search-btn, .search-input-wrap.on .search-btn { background-image: url('../images/common/icon-search-red.svg');background-size: 1.25em 1.25em; } 
.search-input-wrap:has(input:focus) .search-del-btn, .search-input-wrap.on .search-del-btn { display: flex;} 
/* 연관 검색어 */
.search-keyword-wrap {overflow: hidden; display: none; z-index: 102; position: absolute; top: calc(100% + 1px); left: 0; width: 100%; height: 95vh; height: 95dvh; padding: 1em 0;font-size: 1rem; box-shadow: 0 10px 16px rgba(0, 0, 0, 0.03); background-color: #fff;} 
.search-keyword-wrap.on { display: block; } 
.search-keyword-wrap .keyword-list { overflow: hidden; overflow-y: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1.14em; max-height: 85vh; padding: 0 1.14em; background-color: #fff; font-size: 0.875rem; font-weight: 400; font-variation-settings: 'wght' 400; color: #111; } 
.search-keyword-wrap .keyword-list > li{justify-content: flex-start; width: 80%; font-size: inherit; color: inherit; } 
.search-keyword-wrap .keyword-list .keyword { width: 100%; font-size: inherit; color: inherit; } 
.search-keyword-wrap .keyword-list .keyword span { display: inline-block; padding: 0 0 0 2.14em; background-image: url('../images/common/icon-search-gray.svg'); background-repeat: no-repeat; background-position: left center; background-size: 1.29em auto; } 
@media screen and (min-width: 421px){
    .search-keyword-wrap { font-size: clamp(16px, 4.267vw, 20px); } 
    .search-input-wrap .search-input { font-size: clamp(14px, 3.733vw, 18px); } 
    .search-input-wrap .search-btn { font-size: clamp(16px, 4.267vw, 20px); } 
    .search-input-wrap .search-del-btn { font-size: clamp(16px, 4.267vw, 20px); } 
    .search-keyword-wrap .keyword-list { font-size: clamp(14px, 3.733vw, 18px); } 
}
@media screen and (max-width: 334px){
    .search-input-wrap .search-input::placeholder {font-size: clamp(11px, 3.939vw, 13px);}
}

/*========== sing-search ==========*/

.sing-search > .inner {padding: 0 0 1.65em 0;  font-size: 1rem;}
.sing-search .search-input-wrap {position: relative; margin-top: -0.4em; z-index:94; max-width: 720px;}
@media screen and (min-width: 421px) {
    .sing-search > .inner {font-size: clamp(16px, 4.267vw, 20px);} 
}

/* --- 딤(검정 반투명 배경) --- */
.search-dim{ position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; max-width: 750px; min-width: 290px; margin: 0 auto;pointer-events:none; transition:opacity .15s ease; z-index:102; }
.search-dim.active{opacity:1; pointer-events:auto;}

.sing-search .bg { background-color: #fff; width: 100%; height: 3.75em; position: fixed; top: 4.375em; left: 0; z-index: 92;}

  /* --- 검색 레이어 --- */
.search-layer {position:fixed; left:50%; top:10.5em; transform: translate(-50% , 0); max-width: 750px; width: 100%; background:#fff; overflow:hidden; z-index:103; height: calc(100% - 8.5em); display: none;}
.search-layer.active {display:block;}
.sec{padding:1em; border-bottom:1px solid #f1f1f1; background:#fff;}
.sec:last-child{border-bottom:0;}
.sec.line {border-bottom: 1px solid #ebebeb;}
.sec h4{margin:0 0 1.25em; font-size:0.875em; color:#111; display:flex; align-items:center; gap:8px;}
.sec h3{font-size:0.875em; color:#111; float: left; margin-right: 0.875em;}
.clear-all{margin-left:auto; color:#888; cursor:pointer; font-weight: 400; font-variation-settings: 'wght' 400;}


  /* 최근검색어 리스트 */
.recent li{display:grid; grid-template-columns:auto 1fr auto auto; gap:0.5em; align-items:center; padding-bottom:1em; color:#111; cursor:pointer; font-weight: 400; font-variation-settings: 'wght' 400; }
.recent .clock{ width: 1.25em; height: 1.25em; background-image: url("../images/common/search_time.svg"); background-position: center; background-repeat: no-repeat; background-size: 1.25em 1.25em;}
.recent .date{color:#888; font-size:0.875em;}
.recent .del{ width: 1.25em; height: 1.25em; background-image: url("../images/common/search_delete.svg"); background-position: center; background-repeat: no-repeat; background-size: 1.25em 1.25em;cursor:pointer;}

  /* --- 추천검색어: 가로 스크롤 칩 --- */
.suggest-row{ display:flex; gap:1em; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; -ms-overflow-style:none; white-space:nowrap; }
.suggest-row::-webkit-scrollbar{display:none;}
.chip{display:inline-flex; align-items:center; gap:1em; font-size:0.875em; color:#888; flex:0 0 auto; font-weight: 400; font-variation-settings: 'wght' 400;}
.chip:active{transform:scale(.98);}


/*========== Tab Menu ==========*/
.tab-container { position: relative; } 
.tab-menu { position: relative; display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-end; border-bottom: 1px solid var(--basic-line-color); padding: 0 16px; background-color: #fff; } 
.scroll-tab { background-color: #fff; } 
.scroll-tab.fixed { position: fixed; z-index: 100; } 
.tab-menu li.slider { display: inline-block; position: absolute; width: calc((100% - 32px) / 3); left: 0; bottom: -1px; height: 2px; background-color: var(--main-point-color); } 
.tab-menu li.tab-link { width: calc(100%/3); } 
.tab-menu li.tab-link a { display: flex; justify-content: center; align-items: center; width: 100%; padding: 0.938em 0; font-size: 1rem; font-weight: 400; font-variation-settings: 'wght' 400; color: #888; line-height: 1; text-align: center; -webkit-user-drag: none; transition: color 300ms; } 
.tab-menu li.tab-link.current a { font-weight: 700; font-variation-settings: 'wght' 700; color: var(--main-point-color); } 
.tab-content-wrap .tab-content { display: none; } 
.tab-content-wrap .tab-content.current { display: block; } 

@media screen and (min-width: 421px){
    .search-keyword-wrap {font-size: clamp(16px, 4.267vw, 20px); }
    .tab-menu li.tab-link a { font-size: clamp(16px, 4.267vw, 20px); } 
}

/*========== Tab Btn Menu ==========*/
.tab-btn-container { position: relative; } 
.tab-btn-menu { position: relative; display: flex; align-items: center; gap: 0 6px; padding: 1em 0; font-size: 0.875rem; background-color: #fff; } 
.tab-btn-menu li.tab-btn-link a { display: flex; justify-content: center; align-items: center; min-width: 60px; padding: 0.67em 1.17em; border-radius: 1.33em; font-size: 0.750rem; font-weight: 500; font-variation-settings: 'wght' 500; background-color: var(--basic-line-color); color: #333; line-height: 1; text-align: center; -webkit-user-drag: none; transition: background-color 300ms, color 300ms; } 
.tab-btn-menu li.tab-btn-link.current a { background-color: #333; color: #fff; } 
.tab-btn-cont-wrap .tab-btn-cont { display: none; } 
.tab-btn-cont-wrap .tab-btn-cont.current { display: block; } 
@media screen and (min-width: 421px) {
    .tab-btn-menu { font-size: clamp(14px, 3.733vw, 18px); } 
    .tab-btn-menu li.tab-btn-link a { font-size: clamp(12px, 3.2vw, 15px); } 
}

/*========== Song Type Tab ==========*/
.tab-song-container { position: relative; } 
.tab-song-menu { overflow: hidden; overflow-x: auto; position: relative; display: flex; align-items: center; font-size: 1rem; } 
.tab-song-menu li.tab-song-link {min-width: 3.75em;border-radius: 50%; margin: 0 0.63em 0 0; font-size: 1rem; }
.tab-song-menu li.tab-song-link:first-child {margin-left: 16px;}
.tab-song-menu li.tab-song-link.last {min-width: calc(3.75em + 16px);}
.tab-song-menu li.tab-song-link a { position: relative; display: flex; justify-content: center; align-items: center; width: 3.75em; height: 3.75em; min-width: 3.75em; border-radius: 50%; font-size: inherit; -webkit-user-drag: none; transition: 300ms; font-size: 1rem; } 
.tab-song-menu li.tab-song-link a::before {content: ''; opacity: 0; visibility: hidden; z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border: 0.26em solid transparent;background-image: linear-gradient(rgba(255,255,255, 0), rgba(255,255,255, 0)),linear-gradient( to bottom right, #FFA065, #FF2B2F);background-origin: border-box;background-clip: content-box, border-box; transform: opacity 300ms;}
.tab-song-menu li.tab-song-link.current a::before {opacity: 1; visibility: visible;}
.tab-song-menu li.tab-song-link a::after {content: ''; opacity: 0; visibility: hidden; position: absolute; bottom: -0.94em; left: 50%; transform: translate(-50%, 0); width: 1.25em; height: 1.25em; background-image: url('../images/common/icon-down-color.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; transition: 300ms;}
.tab-song-menu li.tab-song-link.current a::after {opacity: 1; visibility: visible; bottom: -1.28em;}
.tab-song-menu li.tab-song-link .profile-img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background-color: transparent; transition: width 300ms height 300ms;}
.tab-song-menu li.tab-song-link .profile-img img { position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%) ; background-color: transparent; width: 3.75em; height: 3.75em; aspect-ratio: 1 / 1; -webkit-transform:translate(-50%, -50%) ; -moz-transform:translate(-50%, -50%) ; -ms-transform:translate(-50%, -50%) ; -o-transform:translate(-50%, -50%) ; }
.tab-song-menu li.tab-song-link.current .profile-img {z-index: 1; width: calc(100% - 0.38em); height: calc(100% - 0.38em); }
.tab-song-menu li.tab-song-link .profile-img::before {display: none;}
.tab-song-cont-wrap .tab-song-cont { display: none; } 
.tab-song-cont-wrap .tab-song-cont.current { display: block; } 
@media screen and (min-width: 421px) {
    .tab-song-menu { font-size: clamp(14px, 3.733vw, 18px); } 
    .tab-song-menu li.tab-song-link, .tab-song-menu li.tab-song-link a { font-size: clamp(16px, 4.267vw, 20px); } 
}

/*========== List Style ==========*/
.list-style > li.circle { position: relative; padding: 0 0 0 0.83em; font-size: 0.750rem; font-weight:400; font-variation-settings: 'wght' 400; color: #888; word-break: keep-all; line-height: 1.5; } 
.list-style > li.circle + li.circle { margin: 0.83em 0 0; } 
.list-style > li.circle::before { content: ''; position: absolute; top: 0.50em; left: 0; width: 0.33em; height: 0.33em; background-color: #888; border-radius: 50%; } 
@media screen and (min-width: 421px){
    .list-style > li.circle {font-size: clamp(12px, 3.2vw, 15px);} 
}

/*========== Toggle List ==========*/
.toggle-list { border-top: 1px solid #707070; } 
.toggle-list .toggle-item .toggle-title { display: flex; justify-content: space-between; align-items: center; padding: 1.14em; border-bottom: 1px solid var(--basic-line-color); color: #333; word-break: keep-all; cursor: pointer; --transform: rotate(0); } 
.toggle-list .toggle-item .toggle-title::after { display: block; width: 1.71em; height: 1.71em; background-image: url("../images/common/icon-arrow-down.svg"); background-repeat: no-repeat; background-position: center; background-size: cover; content: ''; transform: var(--transform); transition: transform 0.3s; } 
.toggle-list .toggle-item .toggle-title.on { --transform: rotate(180deg); } 
.toggle-list .toggle-item .toggle-title span { flex: 1; padding-right: 2.5em; } 
.toggle-list .toggle-item .toggle-content { display: none; width: 100%; padding: 1.14em 1.14em 1.71em; background-color: var(--sub-bg-color-f5); color: #666; font-weight: 400; font-variation-settings: "wght" 400; word-break: keep-all; } 

/*========== Bottom Sheet & Handle Bar ==========*/
.bottom-sheet { position: fixed; bottom: 0; left: 50%; z-index: 202; max-width: 750px; width: 100%; max-height: 90vh; background-color: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease-out, height 0.3s ease-out; transform: translate(-50%, 110%); } 
.handle-area { z-index: 203; position: absolute; top: -22px; left: 0; width: 100%; padding: 10px 0 40px; cursor: grab; box-sizing: border-box; } 
.handle { width: 60px; height: 4px; background-color: #ddd; border-radius: 60px; margin: 0 auto; } 
.bottom-sheet-dimmed { opacity: 0; visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; background-color: rgba(0, 0, 0, 0.5); transition: 300ms; z-index: 200; } 
.sheet-content { display: flex; flex-direction: column; max-height: 100%; padding: 1.50em 1.50em 1.25em; } 
.sheet-content .sheet-tit { padding: 0 0 1.33em; font-size: 1.125rem; font-weight: 500; font-variation-settings: 'wght' 500; color: #111; text-align: center; } 
.sheet-content .sheet-btn-wrap { display: flex; flex-wrap: wrap; gap: 0.63em 1em; } 
.bottom-sheet-wrap.open .bottom-sheet-dimmed { max-width: 750px; margin: 0 auto; visibility: visible; opacity: 1; transition: 300ms; } 
.bottom-sheet.sheet-stretch .sheet-cont-inner { overflow-y: auto; } 
@media screen and (min-width: 421px){
    .sheet-content { font-size: clamp(16px, 4.267vw, 20px); } 
    .sheet-content .sheet-tit { font-size: clamp(18px, 4.8vw, 23px); } 
}

/* 더보기 */
.view .sheet-content .sheet-btn-wrap .basic-btn { width: calc(100%/2 - 0.58em); } 
.view.fix .sheet-content .sheet-btn-wrap + .sheet-btn-wrap { margin: 28px 0 0; } 
.view.fix .sheet-content .sheet-btn-wrap + .sheet-btn-wrap .basic-btn.white-line { width: 100%; } 

/* 신고 */
.sheet-content:has(.sheet-list) .sheet-tit { border-bottom: 1px solid var(--basic-line-color); } 
.sheet-content .sheet-list { padding: 10px 0 0; } 
.sheet-content .sheet-list li a { padding: 10px 0; background-image: url("../images/common/icon-arrow-next-gray.svg"); background-size: 1.50em auto; background-repeat: no-repeat; background-position: right center; } 

/* 댓글 */
.comment.bottom-sheet-wrap .sheet-tit { flex-shrink: 0; padding-bottom: 1.333em; text-align: left; } 
.comment.bottom-sheet-wrap .sheet-tit .comment-num { margin-left: 0.222em; } 
.comment.bottom-sheet-wrap .sheet-content { display: flex; flex-direction: column; max-height: 100%; padding-bottom: 3.75em; } 
.comment.bottom-sheet-wrap .sheet-cont-inner { display: flex; flex-grow: 1; flex-direction: column; justify-content: space-between; } 
.comment.bottom-sheet-wrap .comment-box { display: flex; flex-direction: column; width: 100%; height: 100%; } 
.comment.bottom-sheet-wrap .comment-list { display: flex; align-items: flex-start; gap: 0.6667em; font-size: 0.75rem; } 
.comment.bottom-sheet-wrap .comment-list.comment-tree1 + .comment-list.comment-tree1 { margin-top: 2em; } 
.comment.bottom-sheet-wrap .comment-list .profile-area { flex-shrink: 0; width: 3em; aspect-ratio: 1 / 1; background-image: url("../images/common/profile-default-img.svg"); background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; overflow:hidden; padding: 0; } 
.comment.bottom-sheet-wrap .comment-list .profile-area img { width: 100%; height: 100%; object-fit: cover; object-position: center; } 
.comment.bottom-sheet-wrap .comment-list .content-area { flex-grow: 1; } 
.comment.bottom-sheet-wrap .comment-list .content-area .comment-content-wrap { position: relative; padding-right: 1.667em; } 
.comment.bottom-sheet-wrap .comment-list .content-area .user { margin-bottom: 0.6667em; line-height: 1.167; font-weight: 500; font-variation-settings: 'wght' 500; color: #111; } 
.comment.bottom-sheet-wrap .comment-list .content-area .comment-txt { margin-bottom: 1em; } 
.comment.bottom-sheet-wrap .comment-list .content-area .comment-txt > p { font-weight: 400; font-variation-settings: 'wght' 400; color: #333; word-break:keep-all; } 
.comment.bottom-sheet-wrap .comment-list .content-area .reply-btn { font-weight: 500; font-variation-settings: 'wght' 500; color: #888; transition: color 300ms; } 
.comment.bottom-sheet-wrap .comment-list .content-area .view-reply-btn { font-weight: 500; font-variation-settings: 'wght' 500; color: var(--main-point-color); transition: color 300ms; } 
.comment.bottom-sheet-wrap .content-area .comment-menu-btn { position: absolute; top: 0; right: 0; width: 1.25em; aspect-ratio: 1 / 1; font-size: 1rem; background-image: url("../images/common/icon-menu-three-dot.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; } 
.comment.bottom-sheet-wrap .comment-list .comment-reply-wrap { display: none; } 
.comment.bottom-sheet-wrap .comment-list:has(.view-reply-btn.on) .comment-reply-wrap { display: block; } 
.comment.bottom-sheet-wrap .comment-list.comment-tree2 { margin-top: 1.5em; } 
.comment.bottom-sheet-wrap .comment-list.comment-tree2 .profile-area { width: 2em; } 
.comment.bottom-sheet-wrap .no-comment-case { flex-grow: 1; display: flex; justify-content: center; align-items: center; width: 100%; } 
.comment.bottom-sheet-wrap .no-comment-case p { font-size: 0.875rem; line-height: 1.42; color: #888; font-weight: 500; font-variation-settings: 'wght' 500; word-break:keep-all; } 
.comment.bottom-sheet-wrap:has(.comment-list) .no-comment-case { display: none; } 
.comment .reply-tag { color:#1879DD; margin-right: 0.5em;}
.input-txt-box { position: absolute; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 3.75em; font-size: 1rem; background-color: #fff; } 
.input-txt-box::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 204; } 
.input-txt-box .input-txt-wrap { display: flex; justify-content: space-between; align-items: center; gap: 0.2857em; width: calc(100% - 32px); height: 2.857em; margin: 0 auto; padding: 0 0.2857em 0 1.143em; font-size: 0.875rem; line-height: 1.42; background-color: #eee; border-radius: 1.429em; z-index: 204; } 
.input-txt-box .input-txt-wrap input { flex-grow: 1; background-color: transparent; font-size: inherit; color: #111; } 
.input-txt-box .input-txt-wrap input::placeholder { color: #666; } 
.input-txt-box .input-txt-wrap .input-txt-send-btn { width: 2.286em; aspect-ratio: 1 / 1; background-color: #888888; background-image: url("../images/common/icon-send-arrow.svg"); background-position: center; background-repeat: no-repeat; background-size: 1.428em 1.428em; font-size: inherit; border-radius: 50%; transition: background-color 300ms; } 
.input-txt-box.typing .input-txt-wrap .input-txt-send-btn { background-color: var(--main-point-color); } 
.input-txt-box .input-txt-popup { position: absolute; top: 0; left: 0; width: 100%; padding: 0 2em; font-size: 0.750rem; line-height: 1.5; background-color: #FFECED; transition: transform 300ms; transform: translateY(100%); z-index: -1; } 
.input-txt-box .input-txt-popup .input-txt-popup-wrap { display: flex; justify-content: space-between; align-items: center; gap: 0.75em; width: 100%; } 
.input-txt-box .input-txt-popup .input-txt-popup-wrap .input-popup-cont { margin: 0 !important; padding: 0.6667em 0; font-size: inherit; color: #666; font-weight: 400; font-variation-settings: 'wght' 400; } 
.input-txt-box .input-txt-popup .input-popup-cancel-btn { flex-shrink: 0; padding: 0.6667em 0; font-size: inherit; color: #666; font-weight: 700; font-variation-settings: 'wght' 700; } 
.input-txt-box.reply .input-txt-popup { z-index: 203; transform: translateY(calc(-100% + 1px));} 

@media (hover: hover){
    .comment.bottom-sheet-wrap .comment-list .content-area .reply-btn:hover { color: #444; } 
    .comment.bottom-sheet-wrap .comment-list .content-area .view-reply-btn:hover { color: var(--main-pressed-color); } 
}
@media screen and (min-width: 421px){
    .comment.bottom-sheet-wrap .comment-list { font-size: clamp(12px, 3.2vw, 15px); } 
    .comment.bottom-sheet-wrap .content-area .comment-menu-btn { font-size: clamp(16px, 4.267vw, 20px); } 
    .comment.bottom-sheet-wrap .no-comment-case p { font-size: clamp(14px, 3.733vw, 18px); } 
    .input-txt-box { font-size: clamp(16px, 4.267vw, 20px); } 
    .input-txt-box .input-txt-wrap { font-size: clamp(14px, 3.733vw, 18px); } 
    .input-txt-box .input-txt-popup { font-size: clamp(12px, 3.2vw, 15px); } 
}

/* Check btn */
.bottom-sheet-wrap.check .sheet-content { padding: 1.63em 1.5em 1.25em; } 
.bottom-sheet-wrap.check .sheet-check-list { display: flex; flex-direction: column; } 
.bottom-sheet-wrap.check .sheet-check-list li a { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.25em; color: #666; transition: color 0.3s; } 
.bottom-sheet-wrap.check .sheet-check-list li:last-child a { padding-bottom: 0; } 
.bottom-sheet-wrap.check .sheet-check-list li a::after { visibility: hidden; opacity: 0; width: 1.5em; height: 1.5em; background-image: url("../images/common/icon-check-black.svg"); background-repeat: no-repeat; background-position: center; background-size: cover; content: ''; } 
.bottom-sheet-wrap.check .sheet-check-list li a.active { color: #333; } 
.bottom-sheet-wrap.check .sheet-check-list li a.active::after { visibility: visible; opacity: 1; } 

/*========== Toast Popup ==========*/
.toast-popup { z-index: 201; position: fixed; opacity: 0; bottom: 0; left: 50%; transform: translate(-50%,calc(100% + 18px)); width: 100%; max-width: 327px; padding: 1.07em; background: #333; border-radius: 1.71em; font-size: 0.875rem; font-weight:400; font-variation-settings: 'wght' 400; color: #fff; box-shadow: 3px 4px 11px 0px #00000040; transition: 300ms; } 
/* Active 상태 */
.toast-popup.active { opacity: 1; transform: translate(-50%,-18px); } 
.toast-popup > p { display: none; text-align: center; word-break: keep-all; } 
.toast-popup > p.on { display: block; } 
.toast-popup:has(.downComplete.on) { z-index: 206;}
.toast-popup:has(.fixComplete.on) { z-index: 206;}

/*========== label ==========*/
.status-label span { display: inline-block; min-width: 36px; padding: 0.34em 0.66em; border-radius: 0.33em; font-size: 0.750rem; font-weight: 500; font-variation-settings: 'wght' 500; line-height: normal; text-align: center; } 
.status-label span.free { background-color: var(--sub-point-color); color: var(--main-point-color); } 

.status-label.round span { padding: 0.25em 0.73em; border-radius: 0.92em; } 
.status-label.round span.red { border: 1px solid var( --main-point-color); color: var(--main-point-color); } 
.status-label.round span.blue { border: 1px solid #4A98E8; color: #4A98E8; } 

.status-label.level {display: inline-block;min-width: 42px; padding: 0.22em 0.29em;border-radius: 0.29em;background-color: var(--main-point-color); font-size: 0.875rem; font-weight: 500; font-variation-settings: 'wght' 500; color: #fff;text-align: center;line-height: 1;}
.status-label.level.round {padding: 0.395em 1em;min-width: 94px;border-radius: 0.86em;font-weight: 700; font-variation-settings: 'wght' 700;}
.status-label.level.round .label-tit {display: inline-block;position: relative;padding: 0 0.57em 0 0; margin: 0 0.57em 0 0;}
.status-label.level.round .label-tit::after {content: '';position: absolute; top: 50%; right: 0; transform: translate(0, -50%); background-color: #ddd;width: 1px; height: 9px;}

/* 등급 뱃지 */
.status-label.member span { min-width: 3.50em; padding: 0.60em; border-radius: 0.40em; font-size: 0.630rem; font-family: 'Rubik'; font-weight: 600; font-variation-settings: 'wght' 600; } 
.status-label.member span.rookie {background-color: #eee; color: #666;}
.status-label.member span.pro {background-color: #FFF3DD; color: #FF7600;}
.status-label.member span.vip {background-color: var(--sub-bg-point-color); color: var(--main-point-color);}

/* kpop 상태 뱃지 */
.status-label.kpop span, .status-label.kpop span.red, .status-label.kpop span.blue {border: none;}
.status-label.kpop span {padding: 0.38em 0.875em; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);background-color: #fff; font-weight: 700; font-variation-settings: 'wght' 700;}
.status-label.kpop span.blue {color: #0B84FF;}
.status-label.kpop span.gray {color: #666666;}
.status-label.kpop span.dark {background-color: #666; color: #fff;}
.status-label.kpop span.yellow {background-color: #FF8D1A; color: #fff;}

@media screen and (min-width: 421px){
    .toast-popup {width: calc(100% - 32px);}
    .status-label span { font-size: clamp(12px, 3.2vw, 15px); } 
    .status-label.level { font-size: clamp(14px, 3.733vw, 18px); } 
    .status-label.member span {font-size: clamp(10px, 2.667vw, 13px);} 
}

/*========== Porfile info ==========*/
/* 프로필 공통 인포메이션 (날짜,조회수 버튼, 좋아요 버튼) */
.bottom-info-wrap { display: flex; align-items: center; flex-wrap: wrap; font-size: 0.75rem; } 
.bottom-info-wrap .bottom-info:not(:first-child) { position: relative; margin-left: 0.667em; padding-left: 1em; } 
.bottom-info-wrap .bottom-info:not(:first-child)::before { content: ''; position: absolute; left: 0; top: 50%; width: 0.333em; aspect-ratio: 1 / 1; background-color: #ddd; transform: translateY(-50%); border-radius: 50%; } 
.bottom-info-wrap .info-date { font-weight: 400; font-variation-settings: 'wght' 400; color: #888; } 
.bottom-info-wrap .like-btn .like-wrap, .bottom-info-wrap .info-views .views-wrap { padding-left: 1.5em; font-weight: 500; font-variation-settings: 'wght' 500; color: #888; background-image: url("../images/common/icon-like.svg"); background-position: left center; background-repeat: no-repeat; background-size: 1.333em 1.333em; transition: background-image 300ms; } 
.bottom-info-wrap .like-btn .like-wrap .num, .bottom-info-wrap .info-views .views-wrap .num { line-height: 1; } 
.bottom-info-wrap .like-btn.on .like-wrap { color: #333; background-image: url("../images/common/icon-like-on.svg"); } 
.bottom-info-wrap .info-views .views-wrap { background-image: url("../images/common/icon-views.svg"); } 
.bottom-info-wrap .bottom-profile-info { color: #888; } 
.bottom-info-wrap .bottom-profile-info .num { display: inline-block; margin-left: 0.325em; font-weight: 700; font-variation-settings: 'wght' 700; color: #111; } 
.bottom-info-wrap .bottom-info.lock-btn { display: flex; align-items: center; font-weight: 500; font-variation-settings: 'wght' 500; color: #333; line-height: 1; } 
.bottom-info-wrap .bottom-info.lock-btn i { display: inline-block; width: 1.33em; height: 1.33em; margin: 0 2px 0 0; background-image: url('../images/common/icon-locked.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; transition: background-image 300ms; } 
.bottom-info-wrap .bottom-info.lock-btn.on i { background-image: url('../images/common/icon-open-lock.svg'); } 
@media screen and (min-width: 421px){
    .bottom-info-wrap { font-size: clamp(12px, 3.2vw, 15px); } 
}

/*========== 더보기 텍스트 아티클 (.more-article)  ==========*/
.more-article-wrap { display: flex; width: 100%; } 
.more-article-txt { width: 100%; max-height: calc(1.375em * 2); line-height: 1.375; font-weight: 400; font-variation-settings: 'wght' 400; color: #666; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; white-space: normal; -webkit-line-clamp: 2; } 
/* .more-article-txt::before { content: "더보기"; float: right; display: flex; align-items: flex-end; height: 100%; shape-outside: inset(calc(100% - 10px) 0 0 0); font-weight: 700; font-variation-settings: 'wght' 700; color: #666; }  */
.more-article-txt.notmore::before, .more-article-txt.overview::before { display: none; } 
.more-article-txt.overview { display: block; -webkit-line-clamp: unset; max-height: none; overflow: visible; } 
/* iOS 기기를 위한 특별한 스타일 */
@supports (-webkit-overflow-scrolling: touch) {
    .more-article-txt { display: block; position: relative; padding-right: 3.375em; max-height: 2.75em; overflow: hidden; }
    .more-article-txt::before { /*content:'...더보기';*/ position: absolute; right: 0; bottom: 0; background: #fff; }
    .more-article-txt.overview { max-height: none; padding-right: 0; }
    .more-article-txt.overview::after { display: none; }
}

/*========== Ring Graph ==========*/
/* Graph */
.graph-area { display: flex; flex-direction: column; align-items: center; } 
.ring-graph-container { position: relative; width: 12.5em; aspect-ratio: 1 / 1; margin: 1.44em 0; font-size: 1rem; } 
.ring-graph { width: 100%; height: 100%; } 
.ring-graph .ring { transform-origin: 50%; } 
.ring-graph-container:not(.scroll) .ring-graph .completed { animation: RingProgress 1s ease-in-out forwards; stroke-linecap: round; } 
.ring-graph circle { fill: none; } 
.ring-graph .background { opacity: .16; } 
.ring-graph .ring1 { transform: scale(1) rotate(-90deg); } 
.ring-graph .ring1 .background, .ring1 .completed { stroke: var(--graph-color-red); } 
.ring-graph .ring2 { transform: scale(0.82) rotate(-90deg); } 
.ring-graph .ring2 .background, .ring2 .completed { stroke: var(--graph-color-green); } 
.ring-graph .ring3 { transform: scale(0.64) rotate(-90deg); } 
.ring-graph .ring3 .background, .ring3 .completed { stroke: var(--graph-color-yellow); } 
.ring-graph .ring4 { transform: scale(0.46) rotate(-90deg); } 
.ring-graph .ring4 .background, .ring4 .completed { stroke: var(--graph-color-blue); } 
.ring-graph-container .ring-graph-score { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-52%); } 
.ring-graph-container .ring-graph-score .semi-b-num { font-size: 1.69rem; } 
.ring-graph-container.scroll .ring-graph .ring .completed { opacity: 0;}

@keyframes RingProgress { 
    0% { stroke-dasharray: 0 100; } 
}

@media screen and (min-width: 421px){
    .ring-graph-container { width: 11.13em; font-size: clamp(16px, 4.267vw, 20px); } 
    .ring-graph-container .ring-graph-score .semi-b-num { font-size: clamp(27px, 6.429vw, 37px); } 
}

/* Guide */
.graph-guide-wrap { display: flex; justify-content: center; align-items: center; width: 100%; padding: 1em 0; background-color: #F8F8F8; border-radius: 0.63em; font-size: 1rem; } 
.graph-guide-wrap .graph-guide { display: flex; flex-direction: column; justify-content: center; align-items: center; width: calc(100% / 4); } 
.graph-guide-wrap .graph-guide + .graph-guide { position: relative; font-size: inherit; } 
.graph-guide-wrap .graph-guide + .graph-guide::before { content: ''; position: absolute; top: 50%; left: -0.5px; transform: translate(0, -50%); width: 1px; height: 2.38em; background-color: #ddd; } 
.graph-guide-wrap .graph-guide .guide-tit { display: inline-block; position: relative; padding: 0 0 0 1.08em; font-weight: 500; font-variation-settings: 'wght' 500; color: #666; } 
.graph-guide-wrap .graph-guide .guide-tit::before { content: ''; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 0.83em; height: 0.83em; border-radius: 0.25em; } 
.graph-guide-wrap .graph-guide.guide01 .guide-tit::before { background-color: var(--graph-color-red); } 
.graph-guide-wrap .graph-guide.guide02 .guide-tit::before { background-color: var(--graph-color-green); } 
.graph-guide-wrap .graph-guide.guide03 .guide-tit::before { background-color: var(--graph-color-yellow); } 
.graph-guide-wrap .graph-guide.guide04 .guide-tit::before { background-color: var(--graph-color-blue); } 
.graph-guide-wrap .graph-guide .graph-point { font-weight: 400; font-variation-settings: 'wght' 400; color: #888; } 
.graph-guide-wrap .graph-guide .graph-point strong { display: inline-block; margin: 0 2px 0 0; font-weight: 700; font-variation-settings: 'wght' 700; color: #333; } 
@media screen and (min-width: 421px){
    .graph-guide-wrap { font-size: clamp(16px, 4.267vw, 20px); } 
}

/*========== Progress Bar ==========*/
.process-container { overflow: hidden; font-size: 1rem;}
.process-container .process-bar { font-size: inherit;}
/* Default Type */
.process-container.default {overflow: hidden; height: 0.50em; border-radius: 0.25em;}
.process-container.default .process-bar {position: relative; width: 100%; height: 100%;}
.process-container.default .process-bar .background {position: absolute; top: 0; left: 0; width: 100%; height: 100%;background-color: #e5e5e5;}
.process-container.default .process-bar .completed { position: absolute; top: 0; left: 0; width: 0%; height: 100%; background-color: var(--main-point-color); }
.process-container.default.active .process-bar .completed {animation: progressDefaultBar 400ms 100ms ease forwards; -webkit-animation: progressDefaultBar 400ms 100ms ease forwards;}
@keyframes progressDefaultBar { 
    0% { width: 0; } 
    100% {width: 100%;}
}  

/* Score Type */
.process-container .process-bar .bar { width: 100%; height: 100%; transform-origin: left; font-size: inherit;}
.process-container .process-bar .bar rect { fill: none; } 
.process-container .process-bar .bar1 .background { fill: #F5F5F5;}
.process-container .process-bar .bar1 .completed { fill: var(--graph-color-red);} 

/* Download Type */
.process-container.download { overflow: hidden; height: 0.50em; border-radius: 0.63em;}
.process-container.download .process-bar {position: relative; width: 100%; height: 100%;}
.process-container.download .process-bar .background {position: absolute; top: 0; left: 0; width: 100%; height: 100%;background-color: #f5f5f5;}
.process-container.download .process-bar .completed.download { position: absolute; top: 0; left: 0; z-index: 1; width: 0; height: 100%; transition: width 300ms ease; background-color: var(--main-point-color); }
@media screen and (min-width: 421px){
    .process-container { font-size: clamp(16px, 4.267vw, 20px); } 
}

/*========== Sing Request Button ==========*/
.sing-request-btn { width: 100%; padding: 0.8571em 0.7142em 0.8571em 1.1428em; border-radius: 0.4285em; -webkit-border-radius: 0.4285em; -moz-border-radius: 0.4285em; -ms-border-radius: 0.4285em; -o-border-radius: 0.4285em; background: linear-gradient(270deg,#F82A2E,#FF5E4A); color: #fff; font-weight: 700; font-variation-settings: 'wght' 700; transition: 300ms; -webkit-transition: 300ms; -moz-transition: 300ms; -ms-transition: 300ms; -o-transition: 300ms; }
.sing-request-btn span { display: block; width: 100%; padding-right: 1.714em; text-align: left; font-size: inherit; line-height: 1.35; background-image: url("../images/common/icon-arrow-next-gray.svg"); background-position: right center; background-repeat: no-repeat; background-size: contain; }

@media (hover:hover){
    .sing-request-btn:hover { filter: brightness(1.2); -webkit-filter: brightness(1.2); }
}

/*========== Sing select Bottom sheet (부르기 팝업) ==========*/
.sing-select .bottom-sheet { background-color: #f8f8f8; }
.sing-select .sheet-content { overflow: hidden; padding: 0.88em 1.50em 1.25em;}
/* sheet-tit-box (타이틀) */
.sing-select .sheet-tit-box { display: flex; padding-left: 1.5em; padding-right: 1.5em;}
.sing-select .sheet-tit-box .profile-info { width: 100%;}
.sing-select .sheet-tit-box .profile-info .flowing-wrap, .flowing-wrap .flowing-inner { height: 1.375em; }
.sing-select .bottom-sheet .flowing-wrap .flowing-inner:not(:has(.on)) {text-align: center;}
.sing-select .sheet-tit-box .profile-info .profile-tit { color: #333; line-height: 1.375;}
.sing-select .sheet-tit-box .artist-name { margin: 0.2857em 0 1em; color: #888; font-weight: 400; font-variation-settings: 'wght' 400; text-align: center;}
.sing-select .sheet-tit-box .sheet-cont-prev-btn { display: none; width: 1.5em; flex-shrink: 0; font-size: 1rem; background-image: url("../images/common/icon-gnb-prev.svg"); background-position: top 30% center; background-repeat: no-repeat; background-size: 1em 1em;}
.sing-select.setting-step .sheet-tit-box { padding-left: 0;}
.sing-select.setting-step .sheet-tit-box .sheet-cont-prev-btn { display: block;}
/* sheet-cont-inner (콘텐츠) */
.sing-select .sheet-cont-inner { position: relative; background-color: #fff; font-size: 1rem; }
.sing-select .sheet-cont-inner::after { content:''; position: absolute; left: -1.5em; top: 0; width: calc(100% + 3em); height: calc(100% + 1.25em); background-color: #fff; z-index: -1;}
/* sing-with-cont */
.sing-select .sheet-cont-inner .sing-with-cont { display: flex; gap: 0.5em; font-size: inherit; padding: 2.375em 0 2.875em;}
.sing-select .sheet-cont-inner .sing-with-cont > a { display: flex; justify-content: center; align-items: center; width: calc((100% - 0.5em) / 2); aspect-ratio: 156 / 136; font-size: inherit; border-radius: 1em; background-color: #FFF7F7;}
.sing-select .sheet-cont-inner .sing-with-cont > a span { display: inline-block; width: 100%; padding-top: 4.625em; font-size: inherit; color: #333; text-align: center; font-weight: 500; font-variation-settings: 'wght' 500; background-image: url("../images/common/icon-sing-solo.svg"); background-position: top center; background-repeat: no-repeat; background-size: 4.5em 4.5em;}
.sing-select .sheet-cont-inner .sing-with-cont > a.sing-duet-btn { background-color: #E8F4FF;}
.sing-select .sheet-cont-inner .sing-with-cont > a.sing-duet-btn span { background-image: url("../images/common/icon-sing-duet.svg");}

.sing-select .sheet-cont-inner .sing-with-cont > button { display: flex; justify-content: center; align-items: center; width: calc((100% - 0.5em) / 2); aspect-ratio: 156 / 136; font-size: inherit; border-radius: 1em; background-color: #FFF7F7;}
.sing-select .sheet-cont-inner .sing-with-cont > button span { display: inline-block; width: 100%; padding-top: 4.625em; font-size: inherit; color: #333; text-align: center; font-weight: 500; font-variation-settings: 'wght' 500; background-image: url("../images/common/icon-sing-solo.svg"); background-position: top center; background-repeat: no-repeat; background-size: 4.5em 4.5em;}
.sing-select .sheet-cont-inner .sing-with-cont > button.sing-duet-btn { background-color: #E8F4FF;}
.sing-select .sheet-cont-inner .sing-with-cont > button.sing-duet-btn span { background-image: url("../images/common/icon-sing-duet.svg");}
.sing-select.setting-step .sheet-cont-inner .sing-with-cont { display: none;}
/* sing-setting-cont */
.sing-select .sing-setting-cont { font-size: inherit; padding: 1.5em 0 1.25em;}
.sing-select:not(.sing-duet-join) .sing-setting-cont { display: none;}
.sing-select.setting-step.solo .sing-setting-cont.sing-solo-cont { display:block; }
.sing-select.setting-step.duet .sing-setting-cont.sing-duet-cont { display:block; }
.sing-select .sing-setting-cont .sing-setting-top { display: flex; gap: 1.4375em; font-size: inherit; }
.sing-select .sing-setting-cont .sing-setting-top .sing-setting-area { width: calc((100% - 1.4375em) / 2); font-size: inherit;}
.sing-select .sing-setting-cont .sing-setting-top .sing-setting-area > p { margin-bottom: 0.6667em; color: #888; font-weight: 500; font-variation-settings: 'wght' 500;}
.sing-select .sing-setting-cont .sing-setting-top .sing-setting-area .sing-setting-sel-wrap { display: flex; gap: 0.25em; width: 100%; font-size: inherit;}
.sing-select .sing-setting-cont .sing-setting-top .sing-setting-area .setting-radio-box { width: calc((100% - 0.25em) / 2); height: 2.25em; font-size: inherit; }
.sing-select .sing-setting-cont .sing-setting-top .sing-setting-area .setting-radio-box label { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: inherit; border-radius: 0.25em; background-color: #F2F2F2; transition: background 300ms; cursor: pointer;}
.sing-select .sing-setting-cont .sing-setting-top .sing-setting-area .setting-radio-box label span { color: #333; font-weight: 500; font-variation-settings: 'wght' 500; transition: color 300ms;}
.sing-select .sing-setting-cont .sing-setting-top .sing-setting-area .setting-radio-box input { display: none;}
.sing-select .sing-setting-cont .sing-setting-top .sing-setting-area .setting-radio-box input:checked + label { background-color: #FED4D5;}
.sing-select .sing-setting-cont .sing-setting-top .sing-setting-area .setting-radio-box input:checked + label span { padding-left: 1.429em; color: var(--main-point-color); font-weight: 700; font-variation-settings: 'wght' 700; background-image: url("../images/common/icon-check-red.svg"); background-position: left center; background-repeat: no-repeat; background-size: 1.142em 1.142em; line-height: 1;}
.sing-select .sing-setting-cont .sing-setting-top .sing-setting-area .setting-radio-box.disabled, .sing-select .sing-setting-cont .sing-setting-top .sing-setting-area .setting-radio-box.setting-radio-box:has(input[disabled]), .sing-select .sing-setting-cont .sing-setting-top .sing-setting-area .setting-radio-box.setting-radio-box.setting-radio-box.setting-radio-box:has(input[readonly]) { opacity: 0.8; pointer-events: none; cursor: default; }
.sing-select .sing-setting-cont .sing-setting-top .sing-setting-area .setting-radio-box.disabled label span, .sing-select .sing-setting-cont .sing-setting-top .sing-setting-area .setting-radio-box.setting-radio-box:has(input[disabled]) label span, .sing-select .sing-setting-cont .sing-setting-top .sing-setting-area .setting-radio-box.setting-radio-box.setting-radio-box.setting-radio-box:has(input[readonly]) label span { color: #bbb; }
.sing-select .sing-setting-cont .sing-setting-btm { margin-top: 1.875em; font-size: inherit;}
.sing-select .sing-setting-cont .sing-setting-btm .sing-btm-btn { display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 0.5em; padding: 0.567em 1em; font-size: inherit; }
.sing-select .sing-setting-cont .sing-setting-btm .sing-btm-btn:last-of-type { margin-bottom: 0;}
.sing-select .sing-setting-cont .sing-setting-btm .sing-btm-btn .btn-txt { position: relative;}
.sing-select .sing-setting-cont.sing-solo-cont .sing-setting-btm .sing-btm-btn .btn-txt > span { padding: 0 0 0 1.714em; background-position: left center; background-repeat: no-repeat; background-size: 1.4286em 1.4286em;}
.sing-select .sing-setting-cont .sing-setting-btm .sing-btm-btn .btn-txt .txt-bubble { position: absolute; top: 50%; right: -0.625em; transform: translate(100%,-50%); padding: 0.4em 0.85em 0.4em 1.16667em; background-image: url("../images/common/icon-bubble.svg"); background-position: center; background-repeat: no-repeat; background-size: 100% 100%; color: #666; font-weight: 500; font-variation-settings: 'wght' 500;}
.sing-select .sing-setting-cont .sing-setting-btm .sing-btm-btn .btn-txt .txt-bubble em { color: var(--main-point-color); font-weight: 700; font-variation-settings: 'wght' 700;}
.sing-select .sing-setting-cont .sing-setting-btm .sing-challenge-btn { background-color: #FFEFE0; border-color: #FF8207;}
.sing-select .sing-setting-cont .sing-setting-btm .sing-challenge-btn.sing-btm-btn .btn-txt > span { color: #FF8207; background-image: url("../images/common/icon-price.svg");}
.sing-select .sing-setting-cont .sing-setting-btm .sing-solo-part-btn.sing-btm-btn .btn-txt > span { background-image: url("../images/common/icon-mic-red.svg");}
.sing-select .sing-setting-cont .sing-setting-btm .sing-battle-level-btn {display: none;}

/*========== Sing Battle Game Bottom sheet (왕좌의 게임 부르기 팝업) ==========*/
.sing-select .sing-setting-cont .sing-setting-btm .sing-battle-game-btn { display: none; }
.sing-select.sing-battle-game .sing-setting-cont .sing-setting-btm .sing-btm-btn { display: none; }
.sing-select.sing-battle-game .sing-setting-cont .sing-setting-btm .sing-btm-btn.sing-battle-game-btn { display: block; }
.sing-select.sing-battle-game .sing-setting-cont .sing-setting-btm .sing-solo-part-btn { display: none; }
.sing-select.sing-battle-game .sing-setting-cont .sing-setting-btm .sing-battle-game-btn { display: block; margin-bottom: 0; }

/*========== Sing Battle Challenge Bottom sheet (2배 챌린지 부르기 팝업) ==========*/
.sing-select .sing-setting-cont .sing-setting-btm .sing-battle-challenge-btn { display: none; }
.sing-select.sing-battle-challenge .sing-setting-cont .sing-setting-btm .sing-challenge-btm:not(.sing-battle-challenge-btn) { display: none; }
.sing-select.sing-battle-challenge .sing-setting-cont .sing-setting-btm .sing-solo-part-btn { display: none; }
.sing-select.sing-battle-challenge .sing-setting-cont .sing-setting-btm .sing-battle-challenge-btn { display: block; margin-bottom: 0; }

/*========== Sing Duet Join Bottom sheet (듀엣 참여 부르기 팝업) ==========*/
.sing-duet-join.sing-select .sing-setting-cont .sing-setting-top { flex-direction: column; gap: 0.875em;}
.sing-duet-join .sing-setting-cont .profile-area .profile-info { color: #666; font-weight: 500; font-variation-settings: 'wght' 500;}
.sing-duet-join .sing-setting-cont .profile-area .profile-info .profile-tit { color: #333; font-weight: 700; font-variation-settings: 'wght' 700;}
.sing-duet-join .sing-setting-cont .profile-area .profile-info p { margin: 0;}
.sing-duet-join .sing-setting-cont .profile-area .info-top { display: flex;}
.sing-duet-join .sing-setting-cont .profile-area .info-top span { flex-shrink: 0;}
.sing-duet-join .sing-setting-cont .profile-area .profile-wrap .basic-btn { font-size: 0.750rem; line-height: 1.4; font-weight: 500; font-variation-settings: 'wght' 500;}
.sing-duet-join .sing-setting-cont .profile-area .profile-wrap .basic-btn span { padding: 0.5em 0;}
.sing-duet-join .sing-setting-cont .option-setting-area { display: flex; gap: 0.5em; font-size: inherit;}
.sing-duet-join .sing-setting-cont .option-setting-area > div { display: flex; justify-content: center; align-items: center; width: calc((100% - 0.5em) / 2); padding: 0.5em 0; font-size: inherit; background-color: #F2F2F2; border-radius: 0.25em; }
.sing-duet-join .sing-setting-cont .option-setting-area .option-item { position: relative; margin-right: 0.85714em; padding-right: 0.85714em; color: #666; font-weight: 500; font-variation-settings: 'wght' 500;}
.sing-duet-join .sing-setting-cont .option-setting-area .option-item::after { content:''; position: absolute; top: 50%; right: 0; width: 1px; height: 0.85714em; background-color: #ddd; transform: translateY(-50%);}
.sing-duet-join .sing-setting-cont .option-setting-area .option-setting { color: var(--main-point-color); font-weight: 700; font-variation-settings: 'wght' 700;}
.sing-duet-join.sing-select .sing-setting-cont .sing-setting-btm { margin-top: 1.25em;}

/*========== Sing Battle Level Bottom sheet (옥타브 레벨업 부르기 팝업) ==========*/
.sing-select.sing-battle-game.level .sing-setting-cont .sing-setting-btm .sing-battle-game-btn { display: none;}
.sing-select.sing-battle-game.level .sing-setting-cont .sing-setting-btm .sing-battle-level-btn { display: block;}

/*========== Sing Battle Level Solo Bottom sheet (옥타브 레벨업 솔로 부르기 팝업) ==========*/
.sing-select.level-solo .sing-setting-cont .sing-setting-btm .sing-challenge-btn, .sing-select.level-solo .sing-setting-cont .sing-setting-btm .sing-battle-level-btn { display: none;}
.sing-select.level-solo .sing-setting-cont .sing-setting-btm .sing-solo-part-btn { display: block;}

@media screen and (max-width: 319px){
	.sing-select .sing-setting-cont .sing-setting-top { flex-direction: column;}
	.sing-select .sing-setting-cont .sing-setting-top .sing-setting-area { width: 100%;}
}
@media screen and (min-width: 421px){
    .sing-select .sheet-cont-inner { font-size: clamp(16px, 4.267vw, 20px); } 
	.sing-select .sheet-tit-box .sheet-cont-prev, .sing-select .sheet-tit-box .sheet-cont-prev-btn { font-size: clamp(16px, 4.267vw, 20px); } 
    .sing-duet-join .sing-setting-cont .profile-area .profile-wrap .basic-btn { font-size: clamp(12px, 3.2vw, 15px); } 
}

/*========== 영상 인디케이터 공통 ==========*/
/* .vid-indicator-wrap 공통 */
.vid-indicator-wrap .vid-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: block; width: 3.625em; aspect-ratio: 1 / 1; font-size: 1rem; background-image: url("../images/common/icon-vid-play-btn.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; } 
.play-vid-box .vid-indicator-wrap .pause-btn { display: none; background-image: url("../images/common/icon-vid-pause-btn.svg"); } 
.play-vid-box.play .vid-indicator-wrap .play-btn { display: none; } 
.play-vid-box.play .vid-indicator-wrap .pause-btn { display: block; } 
.vid-indicator-wrap .full-vid-btn { position: absolute; bottom: 0.75em; right: 1em; display: block; width: 1.5em; aspect-ratio: 1 / 1; font-size: 1rem; background-image: url("../images/common/icon-fullpage.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; } 
.vid-timeline-wrap { position: absolute; bottom: 1.16667em; left: 1em; color: rgba(255, 255, 255, 0.6); } 
.vid-timeline-wrap .current-time { color: rgba(255, 255, 255, 1); } 
/* .progress-bar-wrap 공통 */
.progress-bar-wrap { position: fixed; top: 0; left: 50%; width: 100%; max-width: 750px; line-height: 0; transform: translate(-50%, -100%); z-index: 53; } 
.progress { width: 100%; height: 2px; background-color: #666; outline: none; -webkit-appearance: none; accent-color: var(--main-point-color); cursor: pointer; transition: height 300ms; } 
.progress-bar-wrap.hover .progress { height: 4px;}
.progress-bar-wrap .progress::-webkit-slider-thumb { -webkit-appearance: none; height: 0; width: 0; border-radius: 50%; background: var(--main-point-color); cursor: pointer; transition: 300ms; -webkit-transition: 300ms; -moz-transition: 300ms; -ms-transition: 300ms; -o-transition: 300ms; } 
.progress-bar-wrap .progress::-moz-range-thumb { height: 0; width: 0; border-radius: 50%; background: var(--main-point-color); cursor: pointer; transition: 300ms; -webkit-transition: 300ms; -moz-transition: 300ms; -ms-transition: 300ms; -o-transition: 300ms; } 
.progress-bar-wrap.hover .progress::-webkit-slider-thumb { height: 12px; width: 12px; } 
.progress-bar-wrap.hover .progress::-moz-range-thumb { height: 12px; width: 12px; } 
.progress-bar-wrap .progress::-webkit-slider-thumb:active { transform: scale(1.3); height: 12px; width: 12px; } 
.progress-bar-wrap .progress::-moz-range-thumb:active { transform: scale(1.3); height: 12px; width: 12px;}
.play-vid-box.show + .progress-bar-wrap .progress { height: 4px;}

@media screen and (min-width: 421px){
    .vid-indicator-wrap .vid-play-btn { font-size: clamp(16px, 4.267vw, 20px); } 
    .vid-indicator-wrap .full-vid-btn { font-size: clamp(16px, 4.267vw, 20px); } 
}

/* ------------------------------------------------------------------------ 
DARK MODE
------------------------------------------------------------------------ */
/*========== Text ==========*/
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: #fff;}
/*========== Tab Menu ==========*/
.dark .tab-menu { background-color: #222121;}
.dark .tab-menu li.slider { background-color: #fff;}
.dark .tab-menu li.tab-link.current a { color: #fff;}
/*========== Bottom Sheet ==========*/
.dark .bottom-sheet { background-color: #3B3A3C;}
.dark .bottom-sheet-wrap.check .sheet-check-list li a { color: #888;}
.dark .bottom-sheet-wrap.check .sheet-check-list li a.active { color: #fff;}
.dark .bottom-sheet-wrap.check .sheet-check-list li a::after { background-image: url("../images/common/icon-check-white.svg");}
/*========== Button ==========*/
.dark .basic-btn.sel { background-color: #3B3A3C; color: #ddd;}
.dark .basic-btn.sel::after { background-image: url("../images/common/icon-arrow-down-white.svg"); background-color: transparent;}
/* bottom */
.dark .btn-wrap.bottom { background-color: #222121;}
/*========== Toggle List ==========*/
.dark .toggle-list { border-top: 1px solid #888; } 
.dark .toggle-list .toggle-item .toggle-title { border-bottom: 1px solid #333; color: #fff;} 
.dark .toggle-list .toggle-item .toggle-title::after { background-image: url("../images/common/icon-arrow-down-white.svg");} 
.dark .toggle-list .toggle-item .toggle-content { color: #eee;} 
/*========== Custom Design - Checkbox ==========*/
.dark .basic-check-box input[type="checkbox"] + label::before { background-color: #3B3A3C; border: 1px solid #3B3A3C;}
.dark .basic-check-box input[type="checkbox"]:checked + label::before { background-color: var(--main-point-color); background-image: url("../images/common/icon-check-white.svg"); background-size: 100% 100%;}

/*========== Sing top 버튼 ==========*/
.sing-btn-container { position: relative;} 
.sing-btn-menu { position: relative; display: flex; align-items: center; gap: 0 6px; padding: 0.5em 1em 1.0em;  background-color: #fff; } 
.sing-btn-menu li.sing-btn-link { display: flex; justify-content: center; align-items: center; padding: 0.67em 1.17em; border: 1px solid #ccc; border-radius: 1.33em; color: #333; line-height: 1; text-align: center; -webkit-user-drag: none;} 
.sing-btn-menu li.sing-btn-link.current {background-color: #ff2b2f; border-color: #ff2b2f; color: #fff;} 
.sing-btn-cont-wrap .sing-btn-cont { display: none; } 
.sing-btn-cont-wrap .sing-btn-cont.current { display: block; } 
.sing-btn-menu a{ color: #666;}
/*셀렉트 */
.select-wrapper { position: relative;}
.selected {  border: 0;  padding: 10px;  cursor: pointer;}
.arrow {position: absolute; top: 50%; right: 0; transform: translate(0, -50%); width: 1.5em; height: 1.5em; background-image: url(../../images/common/icon-arrow-down.svg); background-repeat: no-repeat; background-position: right center; background-size: 1.5em auto; }
.options {position: absolute; border-top: 1px solid #666;  top: 100%;  left: 0;  width: 100%;  max-height: 0;  overflow: hidden;  background: white;  transition: max-height 0.3s ease;  z-index: 10;}
.options.open {max-height: 300px;  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);}
.options div {padding: 10px;  cursor: pointer;}
.options div:hover { background: #f0f0f0;}
.btn-wrap {padding-bottom: 0;}

/*========== play top 버튼 ==========*/
.play-btn-container { position: relative; } 
.play-btn-menu { position: relative; display: flex; align-items: center; gap: 0 6px; padding: 0 1rem 1.5rem 1rem;  background-color: #fff;} 
.play-btn-menu li.play-btn-link { display: flex; justify-content: center; align-items: center; padding: 0.67em 1.17em; border: 1px solid #ccc; border-radius: 1.33em; color: #333; line-height: 1; text-align: center; -webkit-user-drag: none;} 
.play-btn-menu li.play-btn-link.current {background-color: #ff2b2f; border-color: #ff2b2f; color: #fff;} 
.play-btn-cont-wrap .play-btn-cont { display: none; } 
.play-btn-cont-wrap .play-btn-cont.current { display: block; } 
.play-btn-menu a{ color: #666;}

/* Toast Message Styles */
.success-toast {
    text-align: center;
    z-index: 2147483648;
    position: fixed;
    opacity: 0;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, calc(100% + 18px));
    width: 100%;
    max-width: 327px;
    padding: 1.07em;
    background: #333;
    border-radius: 1.71em;
    font-size: 0.875rem;
    font-weight: 400;
    font-variation-settings: 'wght' 400;
    color: #fff;
    box-shadow: 3px 4px 11px 0px #00000040;
    transition: opacity 300ms, transform 300ms;
}

.success-toast.show {
    opacity: 1;
    transform: translate(-50%, -18px);
}

.success-toast.hide {
    opacity: 0;
    transform: translate(-50%, calc(100% + 18px));
}

* {
  scrollbar-width: none;
}

/* Chrome, Safari, Edge */
*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* IE, Legacy Edge */
* {
  -ms-overflow-style: none;
}

/* body와 html도 스크롤바 숨기기 */
html, body {
  overflow-y: auto; /* 스크롤은 가능하지만 스크롤바는 숨김 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

/* 모달/레이어도 스크롤바 숨기기 */
.modal.full,
.full-modal-wrap,
#container {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.modal.full::-webkit-scrollbar,
.full-modal-wrap::-webkit-scrollbar,
#container::-webkit-scrollbar {
  display: none;
}