/* ─────────────────────────────────────────────────────────────────────────────
 *  RMC global.css — 통합 스타일시트 (2026-06-16 리팩토링)
 *
 *  병합 순서 (로드 우선순위 = 이전 순서)
 *    1. Wanted Sans @import + 기본 body font-family
 *    2. reset.css
 *    3. normalize.css
 *    4. jquery-ui.css
 *    5. style.css (NotoSansKR font-face + #sb-app 베이스)
 *    6. custom.css
 *    7. js/views/SBLogin.css
 *    8. js/views/SBHome.css
 *    9. js/views/SBTTS.css
 *   10. skin/default.css (기본 스킨; 다른 스킨이 필요하면 같은 파일에 클래스로 추가)
 *
 *  ※ 운영 적용 시 사용자 폰트(Wanted Sans) 가 최우선,
 *    한글 fallback 으로 NotoSansKR + 시스템 한글 폰트 순.
 * ───────────────────────────────────────────────────────────────────────────── */

@import url('https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css');

/* Wanted Sans — 본문 텍스트 요소만 타겟팅. <i>/icon 클래스는 일부러 제외.
   ★ '#sb-app *' 같은 와일드카드 쓰면 FA 아이콘 (.fa/.far/.fas) 보다 특이도가
     높아져 아이콘 폰트가 안 먹습니다. 절대 추가 금지. */
html, body,
div, section, article, aside, header, footer, main, nav, summary, details,
form, fieldset, legend, button, input, select, textarea, option, optgroup,
h1, h2, h3, h4, h5, h6,
p, a, span, label, strong, em, small, mark, time, abbr, cite, code, pre, blockquote,
ul, ol, li, dl, dt, dd,
table, thead, tbody, tfoot, tr, td, th, caption,
figure, figcaption {
    font-family: 'Wanted Sans Variable', 'Wanted Sans', "NotoSansKR",
                 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
                 "Pretendard", "맑은 고딕", "Malgun Gothic",
                 "Segoe UI", Roboto, sans-serif !important;
    letter-spacing: -0.01em;
}

/* 글로벌 box-sizing — width:100% + padding 이 viewport 넘는 걸 방지.
   기존 코드 다수가 padding 을 width 와 함께 쓰는데 border-box 가 없으면
   오른쪽이 잘림. content-box 가 필요한 곳은 개별 룰에서 override. */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ──────────────────────────────────────────────────────────────
 *  글자 컬러 토큰 (디자인 시스템)
 *    --text-primary   : #111111  (본문 기본)
 *    --text-secondary : #7B7B8A  (보조 텍스트, placeholder, 메타정보)
 * ────────────────────────────────────────────────────────────── */
:root {
    --text-primary: #111111;
    --text-secondary: #7B7B8A;
    --color-accent: #7E6ADA;  /* 사이트별 브랜드 컬러 — body.site-* 가 override */
}
body.site-sm { --color-accent: #2F2F6B; }
body.site-br { --color-accent: #05B2CC; }
body.site-rd { --color-accent: #F5A623; }

/* 기본 본문 컬러 — 사이트 컬러(.main-font-c) / 흰색(.sub-font-c) / 인라인 style
   같은 명시적 override 가 없는 모든 텍스트는 text-primary 로. */
html, body,
p, h1, h2, h3, h4, h5, h6,
label, span, div, li, td, th, dt, dd, a {
    color: var(--text-primary);
}

/* 보조 텍스트 — 매장 메타정보 / 곡 가수명 / placeholder 등 */
.text-secondary,
input::placeholder,
textarea::placeholder,
.device-id .version,
.device-date .date,
.SBHome .container .contents.channel .channel-list li.channel-item .info p.description {
    color: var(--text-secondary);
}
input::placeholder,
textarea::placeholder {
    opacity: 1;  /* 일부 브라우저가 placeholder 를 흐리게 만드는 걸 방지 */
}

/* 아이콘 폰트 명시 — Wanted Sans 가 !important 로 덮어쓰는 걸 같은 가중치로 되돌림 */
.fa, .fas,
[class^="fa-"], [class*=" fa-"] {
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
}
.far {
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 400 !important;
}
.fal {
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 300 !important;
}
.fab {
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;
}
.iconoir-regular,
[class^="iconoir-"], [class*=" iconoir-"] {
    font-family: "iconoir-icons", "iconoir" !important;
}
.material-icons {
    font-family: "Material Icons" !important;
}
.ui-icon {
    font-family: inherit !important;
}



/* ═════════════════════════════════════════════════════════════════════════
 *  reset.css
 * ═════════════════════════════════════════════════════════════════════════ */
@charset "utf-8";


html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video, a, select, button{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:14px; /* modified*/
    background:transparent;
}
table caption{display:none!important;}
body {
    line-height: 140%;
}
select{background:#fff;}
ul,ol{list-style:none;}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration:none; /* modified*/
    color:#000;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;

}
caption,legend{display:none;}

/* ═════════════════════════════════════════════════════════════════════════
 *  normalize.css
 * ═════════════════════════════════════════════════════════════════════════ */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
    line-height: 140%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
    margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
    display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
    background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 140%;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
    border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 140%; /* 1 */
    margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
    text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
    vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
    display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
    display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
    display: none;
}

/* ═════════════════════════════════════════════════════════════════════════
 *  jquery-ui.css
 * ═════════════════════════════════════════════════════════════════════════ */
/*! jQuery UI - v1.12.1 - 2016-09-14
* http://jqueryui.com
* Includes: core.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, draggable.css, resizable.css, progressbar.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?bgShadowXPos=&bgOverlayXPos=&bgErrorXPos=&bgHighlightXPos=&bgContentXPos=&bgHeaderXPos=&bgActiveXPos=&bgHoverXPos=&bgDefaultXPos=&bgShadowYPos=&bgOverlayYPos=&bgErrorYPos=&bgHighlightYPos=&bgContentYPos=&bgHeaderYPos=&bgActiveYPos=&bgHoverYPos=&bgDefaultYPos=&bgShadowRepeat=&bgOverlayRepeat=&bgErrorRepeat=&bgHighlightRepeat=&bgContentRepeat=&bgHeaderRepeat=&bgActiveRepeat=&bgHoverRepeat=&bgDefaultRepeat=&iconsHover=url(%22images%2Fui-icons_555555_256x240.png%22)&iconsHighlight=url(%22images%2Fui-icons_777620_256x240.png%22)&iconsHeader=url(%22images%2Fui-icons_444444_256x240.png%22)&iconsError=url(%22images%2Fui-icons_cc0000_256x240.png%22)&iconsDefault=url(%22images%2Fui-icons_777777_256x240.png%22)&iconsContent=url(%22images%2Fui-icons_444444_256x240.png%22)&iconsActive=url(%22images%2Fui-icons_ffffff_256x240.png%22)&bgImgUrlShadow=&bgImgUrlOverlay=&bgImgUrlHover=&bgImgUrlHighlight=&bgImgUrlHeader=&bgImgUrlError=&bgImgUrlDefault=&bgImgUrlContent=&bgImgUrlActive=&opacityFilterShadow=Alpha(Opacity%3D30)&opacityFilterOverlay=Alpha(Opacity%3D30)&opacityShadowPerc=30&opacityOverlayPerc=30&iconColorHover=%23555555&iconColorHighlight=%23777620&iconColorHeader=%23444444&iconColorError=%23cc0000&iconColorDefault=%23777777&iconColorContent=%23444444&iconColorActive=%23ffffff&bgImgOpacityShadow=0&bgImgOpacityOverlay=0&bgImgOpacityError=95&bgImgOpacityHighlight=55&bgImgOpacityContent=75&bgImgOpacityHeader=75&bgImgOpacityActive=65&bgImgOpacityHover=75&bgImgOpacityDefault=75&bgTextureShadow=flat&bgTextureOverlay=flat&bgTextureError=flat&bgTextureHighlight=flat&bgTextureContent=flat&bgTextureHeader=flat&bgTextureActive=flat&bgTextureHover=flat&bgTextureDefault=flat&cornerRadius=3px&fwDefault=normal&ffDefault=Arial%2CHelvetica%2Csans-serif&fsDefault=1em&cornerRadiusShadow=8px&thicknessShadow=5px&offsetLeftShadow=0px&offsetTopShadow=0px&opacityShadow=.3&bgColorShadow=%23666666&opacityOverlay=.3&bgColorOverlay=%23aaaaaa&fcError=%235f3f3f&borderColorError=%23f1a899&bgColorError=%23fddfdf&fcHighlight=%23777620&borderColorHighlight=%23dad55e&bgColorHighlight=%23fffa90&fcContent=%23333333&borderColorContent=%23dddddd&bgColorContent=%23ffffff&fcHeader=%23333333&borderColorHeader=%23dddddd&bgColorHeader=%23e9e9e9&fcActive=%23ffffff&borderColorActive=%23003eff&bgColorActive=%23007fff&fcHover=%232b2b2b&borderColorHover=%23cccccc&bgColorHover=%23ededed&fcDefault=%23454545&borderColorDefault=%23c5c5c5&bgColorDefault=%23f6f6f6
* Copyright jQuery Foundation and other contributors; Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 140%;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	filter:Alpha(Opacity=0); /* support: IE8 */
}

.ui-front {
	z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
	cursor: default !important;
	pointer-events: none;
}


/* Icons
----------------------------------*/
.ui-icon {
	display: inline-block;
	vertical-align: middle;
	margin-top: -.25em;
	position: relative;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
}

.ui-widget-icon-block {
	left: 50%;
	margin-left: -8px;
	display: block;
}

/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ui-accordion .ui-accordion-header {
	display: block;
	cursor: pointer;
	position: relative;
	margin: 2px 0 0 0;
	padding: .5em .5em .5em .7em;
	font-size: 100%;
}
.ui-accordion .ui-accordion-content {
	padding: 1em 2.2em;
	border-top: 0;
	overflow: auto;
}
.ui-autocomplete {
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
}
.ui-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
	outline: 0;
}
.ui-menu .ui-menu {
	position: absolute;
}
.ui-menu .ui-menu-item {
	margin: 0;
	cursor: pointer;
	/* support: IE10, see #8844 */
	list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}
.ui-menu .ui-menu-item-wrapper {
	position: relative;
	padding: 3px 1em 3px .4em;
}
.ui-menu .ui-menu-divider {
	margin: 5px 0;
	height: 0;
	font-size: 0;
	line-height: 140%;
	border-width: 1px 0 0 0;
}
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
	margin: -1px;
}

/* icon support */
.ui-menu-icons {
	position: relative;
}
.ui-menu-icons .ui-menu-item-wrapper {
	padding-left: 2em;
}

/* left-aligned */
.ui-menu .ui-icon {
	position: absolute;
	top: 0;
	bottom: 0;
	left: .2em;
	margin: auto 0;
}

/* right-aligned */
.ui-menu .ui-menu-icon {
	left: auto;
	right: 0;
}
.ui-button {
	padding: .4em 1em;
	display: inline-block;
	position: relative;
	line-height: 140%;
	margin-right: .1em;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* Support: IE <= 11 */
	overflow: visible;
}

.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
	text-decoration: none;
}

/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
	width: 2em;
	box-sizing: border-box;
	text-indent: -9999px;
	white-space: nowrap;
}

/* no icon support for input elements */
input.ui-button.ui-button-icon-only {
	text-indent: 0;
}

/* button icon element(s) */
.ui-button-icon-only .ui-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -8px;
	margin-left: -8px;
}

.ui-button.ui-icon-notext .ui-icon {
	padding: 0;
	width: 2.1em;
	height: 2.1em;
	text-indent: -9999px;
	white-space: nowrap;

}

input.ui-button.ui-icon-notext .ui-icon {
	width: auto;
	height: auto;
	text-indent: 0;
	white-space: normal;
	padding: .4em 1em;
}

/* workarounds */
/* Support: Firefox 5 - 40 */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
	border: 0;
	padding: 0;
}
.ui-controlgroup {
	vertical-align: middle;
	display: inline-block;
}
.ui-controlgroup > .ui-controlgroup-item {
	float: left;
	margin-left: 0;
	margin-right: 0;
}
.ui-controlgroup > .ui-controlgroup-item:focus,
.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
	z-index: 9999;
}
.ui-controlgroup-vertical > .ui-controlgroup-item {
	display: block;
	float: none;
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;
}
.ui-controlgroup-vertical .ui-controlgroup-item {
	box-sizing: border-box;
}
.ui-controlgroup .ui-controlgroup-label {
	padding: .4em 1em;
}
.ui-controlgroup .ui-controlgroup-label span {
	font-size: 80%;
}
.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
	border-left: none;
}
.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
	border-top: none;
}
.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
	border-right: none;
}
.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
	border-bottom: none;
}

/* Spinner specific style fixes */
.ui-controlgroup-vertical .ui-spinner-input {

	/* Support: IE8 only, Android < 4.4 only */
	width: 75%;
	width: calc( 100% - 2.4em );
}
.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
	border-top-style: solid;
}

.ui-checkboxradio-label .ui-icon-background {
	box-shadow: inset 1px 1px 1px #ccc;
	border-radius: .12em;
	border: none;
}
.ui-checkboxradio-radio-label .ui-icon-background {
	width: 16px;
	height: 16px;
	border-radius: 1em;
	overflow: visible;
	border: none;
}
.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
	background-image: none;
	width: 8px;
	height: 8px;
	border-width: 4px;
	border-style: solid;
}
.ui-checkboxradio-disabled {
	pointer-events: none;
}
.ui-datepicker {
	width: 17em;
	padding: .2em .2em 0;
	display: none;
}
.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: .2em 0;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 2px;
	width: 1.8em;
	height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
	left: 2px;
}
.ui-datepicker .ui-datepicker-next {
	right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
	left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
	right: 1px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -8px;
	top: 50%;
	margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
	margin: 0 2.3em;
	line-height: 140%;
	text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
	font-size: 1em;
	margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	width: 45%;
}
.ui-datepicker table {
	width: 100%;
	font-size: .9em;
	border-collapse: collapse;
	margin: 0 0 .4em;
}
.ui-datepicker th {
	padding: .7em .3em;
	text-align: center;
	font-weight: bold;
	border: 0;
}
.ui-datepicker td {
	border: 0;
	padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
	display: block;
	padding: .2em;
	text-align: right;
	text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
	background-image: none;
	margin: .7em 0 0 0;
	padding: 0 .2em;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
	float: right;
	margin: .5em .2em .4em;
	cursor: pointer;
	padding: .2em .6em .3em .6em;
	width: auto;
	overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
	float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
	width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
	float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
	width: 95%;
	margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
	width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
	width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
	width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
	border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
	clear: left;
}
.ui-datepicker-row-break {
	clear: both;
	width: 100%;
	font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
	direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
	right: 2px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
	left: 2px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
	right: 1px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
	left: 1px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
	clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
	float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
	float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
	border-right-width: 0;
	border-left-width: 1px;
}

/* Icons */
.ui-datepicker .ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
	left: .5em;
	top: .3em;
}
.ui-dialog {
	position: absolute;
	top: 0;
	left: 0;
	padding: .2em;
	outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
	padding: .4em 1em;
	position: relative;
}
.ui-dialog .ui-dialog-title {
	float: left;
	margin: .1em 0;
	white-space: nowrap;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	right: .3em;
	top: 50%;
	width: 20px;
	margin: -10px 0 0 0;
	padding: 1px;
	height: 20px;
}
.ui-dialog .ui-dialog-content {
	position: relative;
	border: 0;
	padding: .5em 1em;
	background: none;
	overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
	text-align: left;
	border-width: 1px 0 0 0;
	background-image: none;
	margin-top: .5em;
	padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
	margin: .5em .4em .5em 0;
	cursor: pointer;
}
.ui-dialog .ui-resizable-n {
	height: 2px;
	top: 0;
}
.ui-dialog .ui-resizable-e {
	width: 2px;
	right: 0;
}
.ui-dialog .ui-resizable-s {
	height: 2px;
	bottom: 0;
}
.ui-dialog .ui-resizable-w {
	width: 2px;
	left: 0;
}
.ui-dialog .ui-resizable-se,
.ui-dialog .ui-resizable-sw,
.ui-dialog .ui-resizable-ne,
.ui-dialog .ui-resizable-nw {
	width: 7px;
	height: 7px;
}
.ui-dialog .ui-resizable-se {
	right: 0;
	bottom: 0;
}
.ui-dialog .ui-resizable-sw {
	left: 0;
	bottom: 0;
}
.ui-dialog .ui-resizable-ne {
	right: 0;
	top: 0;
}
.ui-dialog .ui-resizable-nw {
	left: 0;
	top: 0;
}
.ui-draggable .ui-dialog-titlebar {
	cursor: move;
}
.ui-draggable-handle {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-resizable {
	position: relative;
}
.ui-resizable-handle {
	position: absolute;
	font-size: 14px;
	display: block;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
	display: none;
}
.ui-resizable-n {
	cursor: n-resize;
	height: 7px;
	width: 100%;
	top: -5px;
	left: 0;
}
.ui-resizable-s {
	cursor: s-resize;
	height: 7px;
	width: 100%;
	bottom: -5px;
	left: 0;
}
.ui-resizable-e {
	cursor: e-resize;
	width: 7px;
	right: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-w {
	cursor: w-resize;
	width: 7px;
	left: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-se {
	cursor: se-resize;
	width: 12px;
	height: 12px;
	right: 1px;
	bottom: 1px;
}
.ui-resizable-sw {
	cursor: sw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	bottom: -5px;
}
.ui-resizable-nw {
	cursor: nw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	top: -5px;
}
.ui-resizable-ne {
	cursor: ne-resize;
	width: 9px;
	height: 9px;
	right: -5px;
	top: -5px;
}
.ui-progressbar {
	height: 2em;
	text-align: left;
	overflow: hidden;
}
.ui-progressbar .ui-progressbar-value {
	margin: -1px;
	height: 100%;
}
.ui-progressbar .ui-progressbar-overlay {
	background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
	height: 100%;
	filter: alpha(opacity=25); /* support: IE8 */
	opacity: 0.25;
}
.ui-progressbar-indeterminate .ui-progressbar-value {
	background-image: none;
}
.ui-selectable {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-selectable-helper {
	position: absolute;
	z-index: 100;
	border: 1px dotted black;
}
.ui-selectmenu-menu {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.ui-selectmenu-menu .ui-menu {
	overflow: auto;
	overflow-x: hidden;
	padding-bottom: 1px;
}
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
	font-size: 1em;
	font-weight: bold;
	line-height: 140%;
	padding: 2px 0.4em;
	margin: 0.5em 0 0 0;
	height: auto;
	border: 0;
}
.ui-selectmenu-open {
	display: block;
}
.ui-selectmenu-text {
	display: block;
	margin-right: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-selectmenu-button.ui-button {
	text-align: left;
	white-space: nowrap;
	width: 14em;
}
.ui-selectmenu-icon.ui-icon {
	float: right;
	margin-top: 0;
}
.ui-slider {
	position: relative;
	text-align: left;
}
.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1.2em;
	height: 1.2em;
	cursor: default;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
	background-position: 0 0;
}

/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
	filter: inherit;
}

.ui-slider-horizontal {
	height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
	top: -.3em;
	margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}

.ui-slider-vertical {
	width: .8em;
	height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
	left: -.3em;
	margin-left: 0;
	margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
	left: 0;
	width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
	bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
	top: 0;
}
.ui-sortable-handle {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-spinner {
	position: relative;
	display: inline-block;
	overflow: hidden;
	padding: 0;
	vertical-align: middle;
}
.ui-spinner-input {
	border: none;
	background: none;
	color: inherit;
	padding: .222em 0;
	margin: .2em 0;
	vertical-align: middle;
	margin-left: .4em;
	margin-right: 2em;
}
.ui-spinner-button {
	width: 1.6em;
	height: 50%;
	font-size: .5em;
	padding: 0;
	margin: 0;
	text-align: center;
	position: absolute;
	cursor: default;
	display: block;
	overflow: hidden;
	right: 0;
}
/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
	border-top-style: none;
	border-bottom-style: none;
	border-right-style: none;
}
.ui-spinner-up {
	top: 0;
}
.ui-spinner-down {
	bottom: 0;
}
.ui-tabs {
	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
	padding: .2em;
}
.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 1px .2em 0 0;
	border-bottom-width: 0;
	padding: 0;
	white-space: nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	float: left;
	padding: .5em 1em;
	text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	margin-bottom: -1px;
	padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
	cursor: text;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	border-width: 0;
	padding: 1em 1.4em;
	background: none;
}
.ui-tooltip {
	padding: 8px;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
}
body .ui-tooltip {
	border-width: 2px;
}

/* Component containers
----------------------------------*/
.ui-widget {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 1em;
}
.ui-widget .ui-widget {
	font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 1em;
}
.ui-widget.ui-widget-content {
	border: 1px solid #c5c5c5;
}
.ui-widget-content {
	border: 1px solid #dddddd;
	background: #ffffff;
	color: #333333;
}
.ui-widget-content a {
	color: #333333;
}
.ui-widget-header {
	border: 1px solid #dddddd;
	background: #e9e9e9;
	color: #333333;
	font-weight: bold;
}
.ui-widget-header a {
	color: #333333;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,

/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
	border: 1px solid #c5c5c5;
	background: #f6f6f6;
	font-weight: normal;
	color: #454545;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
	color: #454545;
	text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
	border: 1px solid #cccccc;
	background: #ededed;
	font-weight: normal;
	color: #2b2b2b;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
a.ui-button:hover,
a.ui-button:focus {
	color: #2b2b2b;
	text-decoration: none;
}

.ui-visual-focus {
	box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid #003eff;
	background: #007fff;
	font-weight: normal;
	color: #ffffff;
}
.ui-icon-background,
.ui-state-active .ui-icon-background {
	border: #003eff;
	background-color: #ffffff;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	color: #ffffff;
	text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 1px solid #dad55e;
	background: #fffa90;
	color: #777620;
}
.ui-state-checked {
	border: 1px solid #dad55e;
	background: #fffa90;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
	color: #777620;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
	border: 1px solid #f1a899;
	background: #fddfdf;
	color: #5f3f3f;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
	color: #5f3f3f;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
	color: #5f3f3f;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
	font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
	opacity: .7;
	filter:Alpha(Opacity=70); /* support: IE8 */
	font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
	opacity: .35;
	filter:Alpha(Opacity=35); /* support: IE8 */
	background-image: none;
}
.ui-state-disabled .ui-icon {
	filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */
}

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	width: 16px;
	height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
	background-image: url("../img/ui/ui-icons_444444_256x240.png");
}
.ui-widget-header .ui-icon {
	background-image: url("../img/ui/ui-icons_444444_256x240.png");
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon {
	background-image: url("../img/ui/ui-icons_555555_256x240.png");
}
.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
	background-image: url("../img/ui/ui-icons_ffffff_256x240.png");
}
.ui-state-highlight .ui-icon,
.ui-button .ui-state-highlight.ui-icon {
	background-image: url("../img/ui/ui-icons_777620_256x240.png");
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
	background-image: url("../img/ui/ui-icons_cc0000_256x240.png");
}
.ui-button .ui-icon {
	background-image: url("../img/ui/ui-icons_777777_256x240.png");
}

/* positioning */
.ui-icon-blank { background-position: 16px 16px; }
.ui-icon-caret-1-n { background-position: 0 0; }
.ui-icon-caret-1-ne { background-position: -16px 0; }
.ui-icon-caret-1-e { background-position: -32px 0; }
.ui-icon-caret-1-se { background-position: -48px 0; }
.ui-icon-caret-1-s { background-position: -65px 0; }
.ui-icon-caret-1-sw { background-position: -80px 0; }
.ui-icon-caret-1-w { background-position: -96px 0; }
.ui-icon-caret-1-nw { background-position: -112px 0; }
.ui-icon-caret-2-n-s { background-position: -128px 0; }
.ui-icon-caret-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -65px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -65px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 1px -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-on { background-position: -96px -144px; }
.ui-icon-radio-off { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }


/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 3px;
}

/* Overlays */
.ui-widget-overlay {
	background: #aaaaaa;
	opacity: .003;
	filter: Alpha(Opacity=.3); /* support: IE8 */
}
.ui-widget-shadow {
	-webkit-box-shadow: 0px 0px 5px #666666;
	box-shadow: 0px 0px 5px #666666;
}


/* ═════════════════════════════════════════════════════════════════════════
 *  style.css (NotoSansKR + #sb-app 베이스 레이아웃)
 *  원본 style.sass 가 deprecated 되어 비어 있어, 베이스 풀-하이트 레이아웃을
 *  여기서 직접 정의해 #sb-app / .page 의 flex 센터링이 동작하도록 함.
 * ═════════════════════════════════════════════════════════════════════════ */

/* Google Fonts Early Access CDN (gstatic /ea/) 은 CORS 미지원 → 로컬 파일 사용 */
@font-face {
    font-family: 'NotoSansKR';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("./fonts/NotoSansKR-Regular.eot");
    src: url("./fonts/NotoSansKR-Regular.eot?#iefix") format("embedded-opentype"),
         url("./fonts/NotoSansKR-Regular.woff") format("woff"),
         url("./fonts/NotoSansKR-Regular.otf")  format("opentype");
}
@font-face {
    font-family: 'NotoSansKR';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("./fonts/NotoSansKR-Medium.eot");
    src: url("./fonts/NotoSansKR-Medium.eot?#iefix") format("embedded-opentype"),
         url("./fonts/NotoSansKR-Medium.woff") format("woff"),
         url("./fonts/NotoSansKR-Medium.otf")  format("opentype");
}
@font-face {
    font-family: 'NotoSansKR';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("./fonts/NotoSansKR-Bold.eot");
    src: url("./fonts/NotoSansKR-Bold.eot?#iefix") format("embedded-opentype"),
         url("./fonts/NotoSansKR-Bold.woff") format("woff"),
         url("./fonts/NotoSansKR-Bold.otf")  format("opentype");
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #ffffff;
}

#sb-app {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}

#sb-app .page {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* 기본 form 요소 톤 */
button {
    cursor: pointer;
    border: none;
    background: #444;
    color: #fff;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 14px;
    min-height: 36px;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
textarea,
select {
    box-sizing: border-box;
    border: 1px solid #d0d4dc;
    background: #fff;
    padding: 8px 10px;
    font-size: 14px;
    border-radius: 4px;
    outline: none;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: #7e6ada;
}

/* SBLogin 입력 박스(아이콘+input 한 줄) — 원본 style.sass 에 있던 UL 기반 인풋 그룹 */
ul.input-box {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0 0 8px;
    padding: 0;
    border: 1px solid #d0d4dc;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}
ul.input-box > li {
    display: flex;
    align-items: center;
}
ul.input-box > li:first-child {
    width: 40px;
    justify-content: center;
    color: #999;
}
ul.input-box > li:last-child {
    flex: 1 1 auto;
}
ul.input-box input {
    width: 100%;
    border: none;
    padding: 10px 8px;
    background: transparent;
    outline: none;
}

/* 로그인 박스 배경 */
.SBLogin .login-box {
    background: #fff;
    padding: 28px 28px 22px;
    border-radius: 8px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
    width: 92%;
}
.SBLogin .login-box h2 {
    font-size: 18px;
    margin: 14px 0 6px;
    text-align: center;
}
.SBLogin .login-box h3 {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin: 0 0 18px;
    line-height: 140%;
}
.SBLogin .login-box .btn-login {
    background: #7e6ada;
    margin-top: 8px;
    min-height: 42px;
    font-size: 15px;
}
.SBLogin .login-box .customer {
    text-align: center;
    margin-top: 16px;
    color: #888;
    font-size: 14px;
}

/* ═════════════════════════════════════════════════════════════════════════
 *  custom.css
 * ═════════════════════════════════════════════════════════════════════════ */


.player-bar__icon {
	display: inline-block;
	*display: inline;
	zoom: 1;
	width: 90px;
	height: 30px;
	line-height: 140% !important;
	/*border-radius: 100%;*/
	margin-right:5px;
	background-color: #003f2d;
	color: #58b600;
	vertical-align: middle;
	cursor: pointer;
	border-radius:5px;
}

.player-bar__icon:hover{
	background-color: #ccc;
}

.player-bar__icon:active{
	background-color: #ccc;
}

.player-bar__icon--play {	
	/*background-image: url(../image/icon/ic-player-play-52.png);
	background-image: url(../image/icon/ic-player-play-52@2x.png),none;
	background-size: contain;
	background-repeat: no-repeat;
	border-radius:50%;*/
}

.player-bar__icon--stop {
	/*background-image: url(../image/icon/ic-player-stop-52.png);
	background-image: url(../image/icon/ic-player-stop-52@2x.png),none;
	background-size: contain;
	background-repeat: no-repeat;
	border-radius:50%;*/
	background-color: #ccc;
}

.player-btn__icon--volume-mute-off {
	/*background-image: url(../image/icon/ic-player-volume-36-new.png);
	background-image: url(../image/icon/ic-player-volume-36-new@2x.png),none;
	background-size: contain;
	background-repeat: no-repeat;
	border-radius:50%;*/
	background-color: #ccc;
}

.player-btn__icon--volume-mute {
	/*background-image: url(../image/icon/ic-player-volume-mute-36.png);
	background-image: url(../image/icon/ic-player-volume-mute-36@2x.png),none;
	background-size: contain;
	background-repeat: no-repeat;
	border-radius:50%;*/
}

.player-btn__icon--volume-up {
	/*background-image: url(../image/icon/ic-player-plus-36.png);
	background-image: url(../image/icon/ic-player-plus-36@2x.png),none;
	background-size: contain;
	background-repeat: no-repeat;
	border-radius:50%;*/
}

.player-btn__icon--volume-down {	
	/*background-image: url(../image/icon/ic-player-minus-36.png);
	background-image: url(../image/icon/ic-player-minus-36@2x.png),none;
	background-size: contain;
	background-repeat: no-repeat;
	border-radius:50%;*/
}

.SBHome .container .contents.channel .channel-list li.channel-item.active {
	background: #f0f0f0;
	color: #ff1200!important;
}

.SBHome .container .contents.channel .channel-list li.channel-item .play-button i.active {	
	background: #f0f0f0;
	color: #ff1200!important;
}

.SBHome .container .contents.effect #effect-list li.effect-item.active {
	background: #f5f5f5;
	color: #ff1200!important;
}

.SBHome .container .contents.channel .channel-list li.channel-item.active .info p.title,
.SBHome .container .contents.channel .channel-list li.channel-item.active .info p.description {
	color: #ffffff !important;
}
.SBHome .container .contents.channel .channel-list li.channel-item:hover .info p.description {
	/*color: #ffffff!important;*/
}

.SBHome .container .contents.channel #channel-list div.header {
	font-size: 16px;
	font-weight: 500;
	padding: 10px 5px;
	min-height: 45px;
	display: flex;
	align-items: center;
}

/* container-volume — bottom.php 푸터 안의 좌측 컨테이너 (재생/정지+곡정보).
   기존엔 display:block + flex-grow:0!important 로 자식이 세로로 쌓이고
   푸터 좌측을 못 채우던 걸 flex 가로 정렬로 수정. */
.SBHome .bottom-menu .container-volume {
	display: flex;
	align-items: center;
	min-width: 0;
	flex-grow: 1;
	padding: 0;
}

.br_color {
	background: #05B2CC!important;
}

.main-bg-c {
	background: #7E6ADA;
}
.main-font-c {
	color: #7E6ADA;
}
.sub-bg-c {
	background: #222222;
}
.sub-font-c {
	color: #ffffff;
}

.footer-bg-c {
	background: #222222!important;
}

.footer-font-c {
	background: #FFFFFF!important;
}

.bojo-bg-c {
	background: #808080!important;
}

.SBHome .buttons {
	display:flex;
	margin-top : unset!important;
	margin-bottom: unset!important;
	align-items: center;
	border-bottom:1px solid #dedede;
}
.SBHome .buttons a.btn {
	padding: 20px 8px!important;

}
.SBHome .buttons.sub-buttons a.btn {
	padding: 14px 8px!important;
	font-size: 14px;
}
.SBHome .container .contents.tts .tts-box {
	text-align: right;
}
.SBHome .container .contents.tts button {
	padding:unset!important;
	margin:5px 0 5px 0!important;
}

.SBHome .container .contents.tts .tts-box button {
	width: unset;
	min-height: unset !important;
	border:1px solid #ccc!important;
	border-radius: 5px!important;
	color:#222!important;
	font-size: 14px!important;
	font-weight: 600;
	padding:14px!important;
}

.SBHome .container .contents.tts .tts-title {
	width:100%;
	border-bottom: 1px solid #ccc!important;
	height:40px;
}

.SBHome .container .contents.tts .tts-title::placeholder {
	font-size:15px!important;
}

.SBHome .container .contents.tts textarea::placeholder {
	font-size:14px!important;
}

.SBHome .container .contents.tts .tts-tooltip {
	margin-top:5px;
	text-align: right;
}

.SBHome .container .contents.tts .tts-buttons {
	display:flex;
	width:100%;
}

.SBHome .container .contents.tts .tts-buttons button {
	width:100%;
	border: 1px solid #ccc!important;
	border-radius: 5px!important;
	height:40px;
	color:#222!important;
	font-size: 14px!important;
	font-weight: 600;
	margin-left:3px;
	margin-right:3px;
}
.SBHome .container .contents.file {
	display:none;
}
.SBHome .container .contents.file .file-buttons {
	display:flex;
	width:100%;
}

.SBHome .container .contents.file .file-buttons button {
	width:100%;
	border: 1px solid #ccc!important;
	border-radius: 5px!important;
	height:40px;
	color:#222!important;
	font-size: 14px!important;
	font-weight: 600;
	margin-left:3px;
	margin-right:3px;
}

.SBHome .container .contents.file .file-tooltip {
	margin-top:5px;
	text-align: right;
	padding:5px;
	font-size:14px;
	opacity: 0.7;
}

.SBHome .container .contents.tts .tts-option {
	width: 100%;
	display: inline-block;
	margin: 10px 0;
	border-bottom: 1px solid #ddd;
}

.SBHome .container .contents.tts .tts-option ul li {
	font-size: 14px;
	height: 40px;
	line-height: 140% !important;
}

.SBHome .container .contents.tts .tts-option ul li span {
	width: 80px;
	display: inline-block;
	font-size: 14px;
	text-indent: 10px;
	float: left;
	line-height: 140% !important;
	background: #fff;
	font-weight: 500;
}

.SBHome .container .contents.tts .tts-option ul li input[type=range] {
	display: inline-block;
	width: calc(100% - 100px);
}

.SBHome .container .contents.file .file-box {
	text-align: right;
}
.SBHome .container .contents.file button {
	padding:unset!important;
	margin:5px 0 5px 0;
}

.SBHome .container .contents.file .file-box button {
	width: unset;
	min-height: unset !important;
	border:1px solid #ccc!important;
	border-radius: 5px!important;
	color:#222!important;
	font-size: 14px!important;
	font-weight: 600;
	padding:14px!important;
}

.SBHome .container .contents.file .file-box button.listen-button {
	width: 100%;
	opacity: 0.3;
}

.SBHome .container .contents.file .file-box button.listen-button.active {
	opacity: unset!important;
}

.SBHome .container .contents.today {
	width: 100%;
	height: 100%;
	display: none;
}
body .SBHome .container .contents.today .today-list {
	height: auto !important;
	overflow: visible !important;
	margin-top: 10px;
}

.SBHome .container .contents.today .today-box {
	width:100%;
	background: #eeeeee;
	padding:5px;
	border-radius: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.SBHome .container .contents.today .today-box a {
	width:30px;
}
.SBHome .container .contents.today .today-box .today-picker {
	display:flex;
	align-items: center;
	justify-content: center;
	width:calc(100% - 100px);
}

.SBHome .container .contents.today .today-box input[type=text]{
	background: #eeeeee;
	font-weight: 600;
}

.SBHome .container .contents.today .today-list {
	width:100%;
	margin-top:10px;
	overflow-y: auto;
	height:calc(100% - 120px);
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

.SBHome .container .contents.today .today-list::-webkit-scrollbar {
	display: none;
}

.SBHome .container .contents.today .today-list li {
	border:1px solid #ddd;
	display:flex;
	align-items: center;
	margin-top:5px;
}

.SBHome .container .contents.today .today-list li .li-title {
	width:120px;
	padding:15px;
	background: #eeeeee;
}

.SBHome .container .contents.today .today-list li .li-title.reservation {
	background: #f6a1a1;
}

.SBHome .container .contents.today .today-list li .li-contents {
	width:calc(100% - 200px);
	padding:15px;
}

.SBHome .container .contents.today .today-list li .li-menus {
	width:80px;
	padding:15px;
}

.SBHome .container .contents.today .today-list li.li-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	height:44px;
}

.SBHome .container .contents.schedule {
	width: 100%;
	height: 100%;
	display: none;
}
/* 채널 페이지와 동일한 스크롤 방식 — .contents 자체에 스크롤, list 는 일반 블록 */
body .SBHome .container .contents.schedule .schedule-list {
	height: auto !important;
	overflow: visible !important;
	margin-top: 10px;
}



.listen-button {
	display: flex;
	align-items: center;
	justify-content: center;
}
.fas {
	font-size:17px;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

    .SBHome .volume {
        margin-top:0px;
    }

    .SBHome input[type=range]::-ms-tooltip {
        display: none;
    }

    .SBHome input[type=range]::-ms-track {
        width: 99%;
        cursor: pointer;
        /* IE에서 기본슬라이드 숨기기  */
		background: transparent;
		color: transparent;
	}


	
	.SBHome .volume .volume-progress {
		/*width:200px;*/
		background: none!important;
	}
	.SBHome .volume .tts-progress {
		/*width:200px;*/
		background: none!important;
	}
	
	.gg-volume {
		margin-top:-11px;
	}
	
	select::-ms-expand {
		display:none
	}

}

/* ═════════════════════════════════════════════════════════════════════════
 *  js/views/SBLogin.css
 * ═════════════════════════════════════════════════════════════════════════ */
.SBLogin {
  width: 100%;
  height: 100%;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.SBLogin .login-box {
  max-width: 400px;
}
.SBLogin .login-box h1 {
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.SBLogin .login-box h1 span {
  display: inline-block;
  margin-right: 15px;
  width: 133px;
  height: 21px;
  background: url(/image/shopcast_rc_logo.png) left/133px no-repeat;
}
.SBLogin .login-box h1.pb {
  color: #000769 !important;
  font-size: 16px;
}
.SBLogin .login-box h1.pb span {
  width: 170px;
  height: 20px;
  background: url(/image/paris_logo.png) left/170px no-repeat;
}

/* ──────────────────────────────────────────────────────────────────
 *  사이트별 로그인 로고 분기
 *    .login-box (기본, shopcast)  → shopcast_rc_logo.png
 *    .login-box.sm                → shopnmusic_logo.png
 *    .login-box.br                → brandradio_logo.png
 *    .login-box.rd                → rhymeduck_logo.png
 *  index.php 의 $site 변수가 도메인 기반 (Login::isBr/isSm/isRd) 으로
 *  주입돼 동작.
 * ──────────────────────────────────────────────────────────────── */
.SBLogin .login-box.sm h1 span {
  width: 170px;
  height: 32px;
  background: url(/image/shopnmusic_logo.png) center/contain no-repeat;
}
.SBLogin .login-box.br h1 span {
  width: 170px;
  height: 32px;
  background: url(/image/brandradio_logo.png) center/contain no-repeat;
}
.SBLogin .login-box.rd h1 span {
  width: 170px;
  height: 32px;
  background: url(/image/rhymeduck_logo.png) center/contain no-repeat;
}
/* 로고 영역 안정적 정렬 위해 h1 라인 높이 살짝 키움 */
.SBLogin .login-box.sm h1,
.SBLogin .login-box.br h1,
.SBLogin .login-box.rd h1 {
  min-height: 40px;
}

/* ──────────────────────────────────────────────────────────────────
 *  사이트별 브랜드 컬러
 *    SC (default) : #7e6ada  보라 (skin/default.css)
 *    SM           : #2F2F6B  딥네이비 (skin/sm.css)
 *    BR           : #05B2CC  시안 (skin/br.css)
 *    RD           : #F5A623  오렌지 (로고 추정)
 *  로그인 박스 타이틀/버튼/포커스 라인에 일관 적용.
 * ──────────────────────────────────────────────────────────────── */

/* SC — 기본 (보라) */
.SBLogin .login-box h2 { color: #7e6ada; }
.SBLogin .login-box .btn-login { background: #7e6ada; }
.SBLogin .login-box .btn-login:hover { background: #6a55c8; }
.SBLogin .login-box ul.input-box:focus-within { border-color: #7e6ada; }
.SBLogin .login-box ul.input-box > li:first-child { color: #7e6ada; }

/* SM — 딥네이비 */
.SBLogin .login-box.sm h2 { color: #2F2F6B; }
.SBLogin .login-box.sm .btn-login { background: #2F2F6B; }
.SBLogin .login-box.sm .btn-login:hover { background: #232352; }
.SBLogin .login-box.sm ul.input-box:focus-within { border-color: #2F2F6B; }
.SBLogin .login-box.sm ul.input-box > li:first-child { color: #2F2F6B; }
.SBLogin .login-box.sm .customer { color: #2F2F6B; }

/* BR — 시안 */
.SBLogin .login-box.br h2 { color: #05B2CC; }
.SBLogin .login-box.br .btn-login { background: #05B2CC; }
.SBLogin .login-box.br .btn-login:hover { background: #048ea2; }
.SBLogin .login-box.br ul.input-box:focus-within { border-color: #05B2CC; }
.SBLogin .login-box.br ul.input-box > li:first-child { color: #05B2CC; }
.SBLogin .login-box.br .customer { color: #05B2CC; }

/* RD — 오렌지 */
.SBLogin .login-box.rd h2 { color: #F5A623; }
.SBLogin .login-box.rd .btn-login { background: #F5A623; }
.SBLogin .login-box.rd .btn-login:hover { background: #d8901a; }
.SBLogin .login-box.rd ul.input-box:focus-within { border-color: #F5A623; }
.SBLogin .login-box.rd ul.input-box > li:first-child { color: #F5A623; }
.SBLogin .login-box.rd .customer { color: #F5A623; }
.SBLogin .login-box form .hide {
  display: none !important;
}
.SBLogin .login-box form div.form-field {
  display: block;
}
.SBLogin .login-box form div.form-field input {
  width: 100%;
  display: block;
}
.SBLogin .login-box form div.form-field label {
  display: block;
  margin: 10px 0 5px;
}
.SBLogin .login-box form div.form-field .mobile, .SBLogin .login-box form div.form-field .mobile-auth {
  display: flex;
  box-sizing: border-box;
}
.SBLogin .login-box form div.form-field .mobile button, .SBLogin .login-box form div.form-field .mobile-auth button {
  margin-left: 1px;
  min-height: 35px !important;
  font-size: 14px !important;
  max-width: 60px !important;
  padding: 3px 10px 4px !important;
}
.SBLogin .login-box form div.form-field .mobile-auth {
  margin-top: 1px;
}
.SBLogin .login-box form div.form-field.input {
  line-height: 140%;
}
.SBLogin .login-box form div.form-field.input input {
  width: auto;
  display: inline-block;
  margin-top: -2px;
  margin-right: 5px;
}
.SBLogin .login-box form div.form-field.input label {
  font-size: 14px;
  display: inline-block;
  margin: 10px 0 20px;
}
.SBLogin .login-box form button {
  width: 100%;
}

/* ═════════════════════════════════════════════════════════════════════════
 *  js/views/SBHome.css
 * ═════════════════════════════════════════════════════════════════════════ */
.SBHome {
	width: 100%;
	height: 100%;
	display: flex !important;
	flex-direction: column;
	padding-bottom: 80px;  /* 푸터(.bottom-menu) 높이 만큼 — 스크롤바가 푸터 위에서 끝남 */
}

.SBHome input[type=range] {
	cursor: pointer;
	width: 100%;
	height: 10px;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	opacity: 0.7;
	-webkit-transition: 0.2s;
	transition: opacity 0.2s;
	border-radius:5px;
	padding:0;
}

.SBHome input[type=range]:hover {
	opacity: 1;
}

.SBHome input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	background: #fff;
	border:1px solid #aaa;
	border-radius:50%;
	cursor: pointer;
	margin-top:-1px;
}


.SBHome input[type=range]::-ms-track {
	width: 100%;
	cursor: pointer;
	/* IE에서 기본슬라이드 숨기기  */
	background: transparent; 
	color: transparent;
	border:none;
}

.SBHome input[type=range]::-moz-slider-thumb {
	width: 25px;
	height: 25px;
	background: #fff;
	border:1px solid #aaa;
	border-radius:50%;
	cursor: pointer;
}


.SBHome input[type=range]::-ms-thumb {
	margin-top: 1px;
	border: 1px solid #003f2d;
	height: 20px;
	width: 20px;
	background: #ffffff;
	cursor: pointer;
}



.SBHome input[type=range]::-ms-fill-lower {
	background: transparent;
}


.SBHome .hide {
	display: none !important;
}

.SBHome .menu {
	width: 100%;
	height: 70px;
	min-height: 50px;
	display: flex;
	align-items: center;
	font-size: 14px;
	background: #fff;
	padding: 0 15px;
	border-bottom: 1px solid #ddd;
}

.SBHome .menu i {
	display: inline-block;
	color: #ffffff; 
}

.SBHome .menu i.logo {
	width: 80px;
	height: 30px;
	display: inline-block;
	background: url(/image/logo_tom2.png) left/79px no-repeat;
}

.SBHome .menu i.logo.pb {
	width: 25px;
	height: 25px;
	background: url(/image/paris_logo_small.png) left/25px no-repeat;
}

.SBHome .menu label {
	/*color: #571c1f;*/
	display: block;
	font-size: 16px;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 7px;
	white-space: nowrap;
	font-weight:bold;
}

.SBHome .menu label.user_id {
	line-height: 140%;
	flex-grow: 1;
	padding: 3px 0;
	font-size: 16px;
	/*color: #c0c0c0;*/
}

.SBHome .menu a {
	color: #571c1f;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.SBHome .menu a i {
	color: inherit;
	margin-right: 5px;
    font-family: "Font Awesome 5 Free" !important;
}

.SBHome .menu a:hover {
	color: #8bc6ff;
}

.SBHome .buttons {
	display: flex;
	margin-top:20px;
	margin-bottom:10px;
}

.SBHome .buttons a.btn {
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	display: block;
	cursor: pointer;
	flex-grow: 1;
	font-size: 18px;
	padding: 10px 8px;
	min-width: 75px;
	white-space: nowrap;
	overflow: hidden;
	color: var(--text-secondary);
	font-weight: 500;
	position: relative;
}

.SBHome .buttons a.btn.active {
	font-weight: 700;
}

/* 활성/hover 버튼 — 브랜드 컬러 적용. JS 의 .main-font-c inline style 이 우선,
   없으면 --color-accent (사이트별 토큰) 가 fallback. 특이도(0,4,2) 로
   .SBHome .buttons a.btn 의 text-secondary(0,3,2) 를 이김. */
.SBHome .buttons a.btn.active,
.SBHome .buttons a.btn.main-font-c,
.SBHome .buttons a.btn:hover {
	color: var(--color-accent);
}

.SBHome .buttons a.btn p {
	display: block;
	text-align: center;
	min-height: 26px;
}

.SBHome .buttons a.btn p i {
	color: inherit;
	display: inline-block;
}

.SBHome .buttons a.btn:last-child {
	border-right: 0;
}

.SBHome .buttons a.btn.disable {
	pointer-events: none;
	opacity: 0.3;
}

/*.SBHome .buttons a.btn:hover, .SBHome .buttons a.btn.active {
	color: #571c1f;
	font-weight:bold;
}*/

.SBHome .container {
	width: 100%;
	height: calc(100% - 195px);
	overflow: hidden;
}

/* 스크롤은 contents 자체에 — .SBHome 의 padding-bottom 80px 이 푸터 영역 확보 */
.SBHome .container .contents {
	width: 100%;
	height: 100%;
	padding: 15px 15px 80px 15px;
	overflow-y: auto;
	overflow-x: hidden;
}

.SBHome .container .contents select {
	width: 100%;
	min-height: 40px;
	font-size: 16px;
}

.SBHome .container .contents.channel select {
	margin-bottom: 10px;
}
 
.SBHome .container .contents.channel .channel-list {
	display: block;
	width: 100%;
}

.SBHome .container .contents.channel .channel-list li {
	border-top: 1px solid #e0e0e0;
	align-items: center;
	padding: 12px 0;
	min-height: 0;
	height: auto;
}

.SBHome .container .contents.channel .channel-list li.channel-item {
	cursor: pointer;
	background: #ffffff;
	display:inline-block;
	width:100%;
	position:relative;
	padding: 12px 0;
	min-height: 0;
	height: auto;
}

.SBHome .container .contents.channel .channel-list li.channel-item img {
	width: 64px;
	height: 64px;
	float:left;
	max-width: 64px;
	max-height: 64px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: #ffffff;
	margin-top: 5px;
}

.SBHome .container .contents.channel .channel-list li.channel-item .info {
	display: inline-block;
	flex-grow: 1;
	padding: 0 12px;
	width: calc(100% - 114px);
	margin-top:5px;
}

.SBHome .container .contents.channel .channel-list li.channel-item .info marquee {
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 140%;
}

.SBHome .container .contents.channel .channel-list li.channel-item .info p.title {
	font-size: 16px;
	line-height: 20px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 5px;
}

.SBHome .container .contents.channel .channel-list li.channel-item .info p.description {
	font-size: 14px;
	line-height: 140%;
	font-weight: 500;
	color: var(--text-secondary);
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	text-overflow:ellipsis;
	overflow:hidden;
}

.SBHome .container .contents.channel .channel-list li.channel-item .play-button {
	display: inline-block;
	text-align: center;
	position:absolute;
	top:50%;
	right:10px;
	transform:translate(-0, -50%);
}

.SBHome .container .contents.channel .channel-list li.channel-item .play-button i {
	color: #888888;
	display: inline-block;
	font-family: "Font Awesome 5 Free" !important;
}

/*.SBHome .container .contents.channel .channel-list li.channel-item:hover {*/
/*	background: #ffffff;*/
/*	color:#fff!important;*/
/*}*/

.SBHome .container .contents.channel .channel-list li.channel-item.active { 
	background: #222222;
	color:#fff!important;
}

.SBHome .container .contents.channel .channel-list li.empty {
	display: block;
	padding: 100px 0;
	text-align: center;
	font-size: 16px;
	color: #999999;
}

.SBHome .container .contents.channel .channel-list li:last-child {
	border-bottom: 1px solid #e0e0e0;
}

.SBHome .container .contents.advertise {
	font-size: 15px;
}

.SBHome .container .contents.advertise #advertise-list div.header {
	font-size: 16px;
	font-weight: 500;
	padding: 10px 5px;
	min-height: 45px;
	display: flex;
	align-items: center;
}

.SBHome .container .contents.advertise #advertise-list div.header i {
	display: inline-block;
	margin-right: 0;
}

.SBHome .container .contents.advertise #advertise-list li {
	border-top: 1px solid #e0e0e0;
	display: flex;
	align-items: center;
	padding: 0px 5px;
	min-height: 60px;
	line-height: 140%;
}

.SBHome .container .contents.advertise #advertise-list li.advertise-item {
	cursor: pointer;
	background: #ffffff;
}

.SBHome .container .contents.advertise #advertise-list li.advertise-item .icon {
	display: block;
	width: 50px;
}

.SBHome .container .contents.advertise #advertise-list li.advertise-item .icon label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 20px;
	background: #999999;
	text-align: center;
}

.SBHome .container .contents.advertise #advertise-list li.advertise-item .icon label.REGIST {
	background: #E91E63;
}

.SBHome .container .contents.advertise #advertise-list li.advertise-item .icon label.CUSTOM {
	background: #F44436;
}

.SBHome .container .contents.advertise #advertise-list li.advertise-item .icon label.COMMON {
	background: #04A9F4;
}

.SBHome .container .contents.advertise #advertise-list li.advertise-item .icon label.CELEBRATE {
	background: #8BC34A;
}

.SBHome .container .contents.advertise #advertise-list li.advertise-item .icon label.TTS {
	background: #BDBDBD;
}

.SBHome .container .contents.advertise #advertise-list li.advertise-item .icon label i {
	color: #ffffff !important;
	display: inline-block;
}

/* .advertise-item > .info — 채널 페이지와 동일 구조로 정리.
   자식이 title 하나뿐인 경우가 많아 flex 대신 block + 자체 vertical alignment 는
   부모(li)의 align-items: center 에 위임. */
.SBHome .container .contents.advertise #advertise-list li.advertise-item .info {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 12px;
	display: block;
}

.SBHome .container .contents.advertise #advertise-list li.advertise-item .info p {
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 140%;
}

.SBHome .container .contents.advertise #advertise-list li.advertise-item .info p.title {
	font-size: 16px;
	line-height: 20px;
	font-weight: 600;
	color: var(--text-primary);
}

.SBHome .container .contents.advertise #advertise-list li.advertise-item .info p.description {
	font-size: 14px;
	font-weight: 500;
	line-height: 140%;
	color: var(--text-secondary);
}

.SBHome .container .contents.advertise #advertise-list li.advertise-item .play-button {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
}

.SBHome .container .contents.advertise #advertise-list li.advertise-item .play-button i {
	color: var(--text-secondary);
	display: block;
}

.SBHome .container .contents.advertise #advertise-list li.advertise-item:hover {
	background: #f9f9f9;
}

.SBHome .container .contents.advertise #advertise-list li.advertise-item:hover i {
}

.SBHome .container .contents.advertise #advertise-list li:last-child {
	border-bottom: 1px solid #e0e0e0;
}

.SBHome .container .contents.advertise #advertise-list li.empty {
	display: block;
	padding: 30px;
	text-align: center;
	font-size: 16px;
	color: #999999;
	min-height: unset;
}

.advertise-list {

}

.SBHome .container .contents.advertise #advertise-list .advertise-item + .header {
	border-top: 1px solid #dedede;
}

.SBHome .container .contents.tts {
	font-size: 15px;
}

.SBHome .container .contents.tts textarea {
	margin-top: 5px;
	padding: 15px;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-height: 200px;
	border: 1px solid #dedede;
	resize: none;
}

.SBHome .container .contents.tts textarea:focus {
	outline: transparent;
	box-shadow: none;
}

.SBHome .container .contents.tts button {
	margin-top: 10px;
	width: 100%;
	min-height: 50px !important;
	font-size: 16px !important;
}

.SBHome .container .contents.effect {
	font-size: 15px;
}

.SBHome .container .contents.effect #effect-list div.header {
	font-size: 16px;
	font-weight: 500;
	padding: 10px 5px;
	min-height: 45px;
	display: flex;
	align-items: center;
	font-weight: 600;
}

.SBHome .container .contents.effect #effect-list div.header i {
	display: inline-block;
	margin-right: 0;
}

.SBHome .container .contents.effect #effect-list li {
	border-top: 1px solid #e0e0e0;
	display: flex;
	align-items: center;
	padding: 5px 5px;
	min-height: 60px;
}

.SBHome .container .contents.effect #effect-list li.empty {
	display: block;
	padding: 100px 0;
	text-align: center;
	font-size: 16px;
	color: #999999;
}

.SBHome .container .contents.effect #effect-list li:last-child {
	border-bottom: 1px solid #e0e0e0;
}

.SBHome .container .contents.effect #effect-list li.channel-item {
	cursor: pointer;
	background: #ffffff;
}

.SBHome .container .contents.effect #effect-list li.channel-item img {
	display: block;
	width: 50px;
	max-width: 50px;
	max-height: 50px;
	border-radius: 2px;
	border: 1px solid #a0a0a0;
}

.SBHome .container .contents.effect #effect-list li.channel-item .info {
	width: 100%;
	display: block;
	flex-grow: 1;
	padding: 0 10px;
}

.SBHome .container .contents.effect #effect-list li.channel-item .info p {
	max-width: 250px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 140%;
}

.SBHome .container .contents.effect #effect-list li.channel-item .info p.title {
	font-size: 16px;
	margin-bottom: 5px;
	height: 20px;
}

.SBHome .container .contents.effect #effect-list li.channel-item .info p.description {
	font-size: 14px;
	color: #999999;
	white-space: nowrap;
}

.SBHome .container .contents.effect #effect-list li.channel-item .play-button {
	display: block;
	width: 50px;
	text-align: center;
}

.SBHome .container .contents.effect #effect-list li.channel-item .play-button i {
	color: #888888;
	display: inline-block;
}

.SBHome .container .contents.effect #effect-list li.channel-item:hover {
	/*background: #f0f0f0;*/
	color: #ff1200 !important;
}

.SBHome .container .contents.effect #effect-list li.channel-item:hover i {
	color: #ff1200;
}

.SBHome .container .contents.effect #effect-list li.channel-item:nth-child(odd) {
	background: #fafafa;
}

.SBHome .container .contents.effect #effect-list li.effect-item {
	display: block;
	width: 100%;
	cursor: pointer;
	background: #f9f9f9;
	border: 0;
	padding: 15px 15px 20px;
	border-radius: 10px;
	margin: 0 0 10px 0;
	text-align: left;
}

/* effect-slider — jquery-ui slider 위젯, 푸터 볼륨 팝업 슬라이더와 동일 모양.
   토글 ON (.effect-item.checked) 일 때만 보임. */
.SBHome .effect-item .effect-slider {
	display: none;
}
.SBHome .effect-item.checked .effect-slider {
	display: block;
	margin: 22px 14px;
	height: 6px;
	background: #e4e6eb;
	border-radius: 3px;
	border: 0;
	position: relative;
	overflow: visible;
	cursor: pointer;
}
.SBHome .effect-slider .ui-slider-range {
	background: var(--color-accent);
	border-radius: 3px;
	height: 6px;
}
.SBHome .effect-slider .ui-slider-handle {
	width: 24px;
	height: 24px;
	top: -9px;
	margin-left: -12px;
	background: #fff;
	border: 2px solid var(--color-accent);
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
	outline: none;
	cursor: pointer;
	position: absolute;
}
.SBHome .effect-slider .ui-slider-handle:hover,
.SBHome .effect-slider .ui-slider-handle:focus,
.SBHome .effect-slider .ui-slider-handle.ui-state-active {
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 20%, transparent),
	            0 2px 6px rgba(0, 0, 0, 0.18);
}
/* .effect-progress 가 hidden input 이라 화면에 안 보이는 게 정상 */
.SBHome .effect-progress {
	display: none;
}



.SBHome .container .contents.effect #effect-list li.effect-item label {
	display: block;
}

.SBHome .container .contents.effect #effect-list li.effect-item label.business {
	font-weight: 100;
	font-size: 15px;
	color: #999999;
}
	
.SBHome .container .contents.effect #effect-list li.effect-item .title {
	display: block;
	font-size: 16px;
	line-height: 20px;
	font-weight: 600;
	color: var(--text-primary);
	height: auto;
	margin: 0;
	text-align: left;
}

.SBHome .container .contents.effect #effect-list li.effect-item label.description {
	display: block;
	font-size: 14px;
	line-height: 140%;
	color: var(--text-secondary);
	padding-top: 8px;
	height: auto;
	margin: 0;
	text-align: left;
}

.SBHome .container .contents.device .device-list li {
	display: block;
}

.SBHome .container .contents.device .device-list li.empty {
	border: 0;
	padding: 100px 0;
	text-align: center;
	font-size: 16px;
	color: #999999;
}

.SBHome .container .contents.device .device-list li.device {
	display: flex;
	flex-direction: column;
	border: 1px solid #dedede;
	margin-bottom: 5px;
	padding: 10px 15px;
	border-radius: 5px;
	cursor: pointer;
	opacity: 0.5;
}

.SBHome .container .contents.device .device-list li.device dl {
	display: flex;
}

.SBHome .container .contents.device .device-list li.device dl dd {
	padding: 5px 0;
	font-size: 16px;
	flex-grow: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.SBHome .container .contents.device .device-list li.device dl dd:last-child {
	text-align: right;
}

.SBHome .container .contents.device .device-list li.device dl dd.header {
	font-weight: 500 !important;
}

.SBHome .container .contents.device .device-list li.device dl dd.header label {
	font-weight: 100 !important;
	color: #999999;
	margin-left: 10px;
}

.SBHome .container .contents.device .device-list li.device dl dd.description {
	color: #999999;
	font-size: 14px;
}

.SBHome .container .contents.device .device-list li.device dl a {
	display: block;
	text-align: center;
	min-width: 60px;
	border: 1px solid #dedede;
	background: #ffffff;
	border-radius: 3px;
	font-size: 14px;
	padding: 5px 0;
	margin-left:10px;
}

.SBHome .container .contents.device .device-list li.device dl.onair-info {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #dedede;
}

.SBHome .container .contents.device .device-list li.device dl.onair-info dd {
	font-size: 14px;
}

.SBHome .container .contents.device .device-list li.device dl.onair-info dd.onair-time {
	width: 110px;
	max-width: 110px;
}

.SBHome .container .contents.device .device-list li.device.active {
	opacity: 1;
	border-color: #565656;
	background: #f5f5f5;
}

.btn_play {
	width:50px;
	float:left;
	font-size:20px;
}

.btn_play > i {
	font-size:30px;
	cursor:pointer;
	margin-top:25px;
	color:#736ada;
}

.btn_stop {
	width:50px;
	float:left;
	font-size:20px;
}

.btn_stop > i {
	font-size:30px;
	cursor:pointer;
	margin-top:25px;
	color:#999;
}

.SBHome .bottom-menu {
	width: 100%;
	height: 80px;
	color: #444444;
	min-height: 70px;
	background: #ffffff;
	padding: 0 12px 0 6px;
	position:fixed;
	bottom:0;
	display: flex;
	align-items: center;
	border-top: 1px solid #e5e5e5;
	box-sizing: border-box;
	z-index: 100;
}

.SBHome .bottom-menu .gg-play-button-o {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--ggs, 1));
	width: 32px;
	height: 32px;
	border: 2px solid;
	border-radius: 30px;
}

.SBHome .bottom-menu .gg-play-button-o::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 0;
	height: 10px;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 6px solid;
	top: 9px;
	left: 12px;
}

.SBHome .bottom-menu .gg-play-stop-o {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--ggs, 1));
	width: 32px;
	height: 32px;
	border: 2px solid;
	border-radius: 30px;
}

.SBHome .bottom-menu .gg-play-stop-o::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 6px;
	height: 6px;
	top: 11px;
	left: 11px;
	background: currentColor;
}

.SBHome .bottom-menu .container-button {
	display: block;
	float:left;
	width: 50px;
	min-width: 50px;
	text-align: center;
	cursor: pointer;
	margin-top:20px;
}

.SBHome .bottom-menu .container-button .gg-play-button-o {
	left: 13px;
}

.SBHome .bottom-menu .container-button .gg-play-stop-o {
	left: 13px;
	color: #ff1200;
}

.SBHome .bottom-menu .container-button .gg-smartphone-shake {
	left: 15px;
}

.SBHome .bottom-menu .container-button .gg-smartphone-shake.active {
	color: #ff1200;
}

.SBHome .bottom-menu .container-volume {
	display: flex;
	align-items: center;
	min-width: 0;
	flex-grow: 1;
	padding: 0;
	margin-right: 10px;
}

.SBHome .bottom-menu .container-volume .volume {	
	display: flex;
	width: 100%;
	font-family: "Font Awesome 5 Free" !important;
}

.SBHome .bottom-menu .container-volume .volume i {
	font-family: "Font Awesome 5 Free" !important;
	font-size:18px;
}

.SBHome .bottom-menu .container-volume .volume span {
	width:100%;
	margin-left:20px;
}

.mute_text {
	margin-left:20px;
	color:#999;
}

.SBHome .bottom-menu .container-volume .volume .gg-volume {
	margin-right: 20px;
}

.SBHome .bottom-menu .container-volume .device {
	font-size: 14px;
	flex-grow: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}

.SBHome .bottom-menu .container-volume .device .empty {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	padding-left: 12px;
	font-size: 14px;
	color: #ff1200;
	gap: 8px;
}

.SBHome .bottom-menu .container-volume .device label {
	font-size: 14px;
}

.SBHome .bottom-menu .container-volume .device .selected {
	display: block;
	min-width: 0;
	overflow: hidden;
}

/* device-onair — 3줄 표시 (1: 채널정보 / 2: 곡명 / 3: 가수명) */
.SBHome .bottom-menu .container-volume .device .selected .device-onair {
	display: block;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 140% !important;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

/* device-onair 내부 인라인 클래스 — menu_new.php / menu.php 의 JS 가 주입하는
   <span class="now-playing-label / song-title / artist-name"> 의 스타일.
   원래 inline style 로 박혀 있던 걸 여기로 분리. */
.device-onair .now-playing-label {
	color: #ff0000;
	margin-right: 6px;
	font-weight: 600;
}
.device-onair .channel-name {
	color: var(--text-secondary);
	font-weight: 500;
}
.device-onair .song-title {
	display: block;
	font-size: 14px;
	font-weight: 400;
}
.device-onair .artist-name {
	display: block;
	color: var(--text-secondary);
	font-size: 14px;
	font-weight: 400;
}

.SBHome .bottom-menu .container-volume .device .selected .device-info {
	display: flex;
}

.SBHome .bottom-menu .container-volume .device .selected .device-info .device-id {
	display: block;
	flex-grow: 1;
}

.SBHome .bottom-menu .container-volume .device .selected .device-info .device-id .version {
	color: #999999;
	font-size: 14px;
}

.SBHome .bottom-menu .container-volume .device .selected .device-info .device-date {
	display: block;
	margin-left: 10px;
}

.SBHome .bottom-menu .container-volume .device .selected .device-info .device-date .date {
	color: #999999;
	font-size: 14px;
}

@media only screen and (max-width: 460px) {
	.SBHome .bottom-menu .container-volume .device .device-id .version {
		display: none;
	}
}


.btn_logout {
	font-size:14px;
	background:#003f2d;
	color:#fff;
	border-radius:15px;
	padding:7px 10px;
}

.btn_logout a {
	color:#fff !important;
}

.filter {
	width:100%;
	display:inline-block;
	padding: 20px 14px 0 14px;
	font-size: 14px;
	color: var(--text-secondary);
}

.filter .filter_txt {
	float:left;
	line-height: 140% !important;
	color: var(--text-secondary);
}

/* 카운트 span — 모든 페이지 동일 포인트 컬러 (사이트별 브랜드 자동 적용) */
span#channel_cnt,
span#advertise_cnt,
span#effect_cnt,
span#tts_cnt,
span#item-cnt {
	color: var(--color-accent);
	font-weight: 700;
}

.filter_menu {
	float:right;
	width:160px;
	display:inline-block;
	border-radius:5px;
	overflow:hidden;
	margin-bottom:10px;
}

.filter_menu li {
	width:80px;
	height:25px;
	line-height: 140% !important;
	float:left;
	border:none;
	border-top:none;
	padding:0;
	background:#f9f9f9;
	text-align:center;
}

.filter_menu li.active {
	 background:#003f2d;
	 color:#fff;
}

.btn_tts {
	background:#003f2d;
	color:#fff;
	border:none !important;
}

.tts_box {}

.tts_box .tts_con {
	width:50%;
	float:left;
	display:inline-block;
	padding:10px;
}

.tts_box .tts_con:first-of-type {
	border-right:1px solid #ddd;
}

.tts_box .tts_con h2 {
	font-size:15px !important;
	margin:10px 0 !important;
}

.tts_box .tts_con p {
	font-size:14px;
	color:#999;
	line-height: 140% !important;
}

.tts_option {
	width:100%;
	display:inline-block;
	margin:15px 0;
	border:1px solid #ddd;
}

.tts_option ul li {
	font-size:14px;
	height:40px;
	line-height: 140% !important;
}

.tts_option ul li {
	border-bottom:1px solid #ddd;
}

.tts_option ul li:last-child {
	border-bottom:0;
}

.tts_option ul li:first-child span {
	height:39px;
	line-height: 140%;
}

.tts_option ul li span {
	font-weight:bold;
	width:80px;
	display:inline-block;
	font-size:14px;
	text-indent:10px;
	float:left;
	line-height: 140% !important;
	background:#f9f9f9;
}

.tts_option ul li input {
	margin-left:15px;
	vertical-align:middle;
	margin-top:-2px;
}

.tts_option ul li select {
	width:calc(100% - 90px) !important;
	font-size:14px !important;
	height:38px !important;
	background:none;
	padding-left:10px;
	vertical-align:baseline;
}

.tts_option ul li input[type=range] {
	display:inline-block;
	width:calc(100% - 100px);
}

.tts_play {
	margin:10px 0;
	padding:10px;
	background:#f9f9f9;
	font-size:14px;
	width:100%;
	height:45px;
	position:relative;
	cursor:pointer;
}

.tts_play > span {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	color:#666;
}

.tts_play > span > i {
	font-size:15px;
	vertical-align:middle;
	color:#7e6ada ;
	margin-left:10px;

}

.tgl_wrap {
	width:100%;
	display:inline-block;
}

.tgl {
	display: none;
}

.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {
	box-sizing: border-box;
}

.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {
	background: none;
}

.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {
	background: none;
}

.tgl + .tgl-btn {
	outline: 0;
	display: block;
	width: 4em;
	height: 2em;
	position: relative;
	cursor: pointer;
	float:right;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
	position: relative;
	display: block;
	content: "";
	width: 50%;
	height: 100%;
}

.tgl + .tgl-btn:after {
	left: 0;
}

.tgl + .tgl-btn:before {
	display: none;
}

.tgl:checked + .tgl-btn:after {
	left: 50%;
}

.tgl-light + .tgl-btn {
	background: #f0f0f0;
	border-radius: 2em;
	padding: 2px;
	transition: all 0.4s ease;
}

.tgl-light + .tgl-btn:after {
	border-radius: 50%;
	background: #fff;
	transition: all 0.2s ease;
}

.tgl-light:checked + .tgl-btn {
	background: #9FD6AE;
}

/* ─────────────────────────────────────────────────────────────────
 *  검색 영역 (advertise.php 등) — 아이콘+input+검색 버튼 한 줄 + 안내 문구
 * ───────────────────────────────────────────────────────────────── */
.search {
	margin-top: 15px;
}
.search > .input-box {
	display: flex;
	align-items: stretch;
	height: 48px;
	margin: 0;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}
.search > .input-box > li {
	display: flex;
	align-items: center;
	padding: 0;
}
.search > .input-box > li:first-child {
	width: 44px;
	justify-content: center;
	color: var(--text-secondary);
	font-size: 16px;
	flex-shrink: 0;
}
.search > .input-box > li:last-child {
	flex: 1 1 auto;
	min-width: 0;
	padding-right: 0;
}
.search > .input-box input {
	flex: 1 1 auto;
	width: auto !important;     /* inline style width 무력화 */
	min-width: 0;
	height: 100%;
	padding: 0 8px !important;
	border: 0;
	background: transparent;
	outline: none;
	font-size: 14px;
	color: var(--text-primary);
}
.search > .input-box input::placeholder {
	color: var(--text-secondary);
}

/* 검색 버튼 — 브랜드 컬러 (.main-bg-c 가 body.site-* override 받음) */
.search > .input-box > li > button {
	float: none;
	flex-shrink: 0;
	height: 100%;
	min-width: 64px;
	padding: 0 18px !important;
	border: 0;
	border-radius: 0;
	color: #fff;
	font-size: 14px !important;
	font-weight: 600;
	cursor: pointer;
}
.search > .input-box > li > button:hover {
	filter: brightness(0.95);
}

/* 안내 문구 (검색 박스 아래 — 레거시) */
.search p {
	margin: 8px 2px 0;
	padding: 0;
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 140%;
}

/* filter_txt 안의 보조 hint (.filter-hint) — 카운트 텍스트 옆에 작게 표시 */
.filter .filter_txt .filter-hint {
	display: inline-block;
	margin-left: 8px;
	font-size: 14px;
	font-weight: 400;
	color: var(--text-secondary);
}

.btn_more {
	position:absolute;
	right:20px;
	color:#999;
	font-weight:bold;
	top:30px;
}

.btn_more:hover {
	cursor:pointer;
	color:#003f2d;
}



select.channel_select {
	appearance: none;
	outline: 0;
	border: 0;
	box-shadow: none;
	flex: 1;
	padding: 0 1em;
	color: #222;
	background-color: #f9f9f9;
	cursor: pointer;
	font-size:14px !important;
}

select.channel_select::-ms-expand {
	display: none;
}

.channel_select_wrap {
	position: relative;
	display: flex;
	width: 100%;
	height: 40px;
	border-radius: .25em;
	overflow: hidden;
}

.channel_select_wrap::after {
	content: '\25BC';
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #eee;
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 1;
	transition: .25s all ease;
	pointer-events: none;
}

.channel_select_wrap:hover::after {
	color: var(--text-primary);
}


.player-nature__cell {
	_display: inline;
	overflow: hidden;
	margin-left: -1px;
	zoom: 1;
}

.player-nature__item {
	float: left;
	_display: inline;
	width: 227px;
	margin-left: 1px;
}

.player-nature__header {
	position: relative;
	margin-bottom: 15px;
	padding-right: 50px;
	zoom: 1;
}

.player-nature__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 140%;
}

.player-volume {
	float: left;
	position: relative;
	padding: 0 45px !important;
	height: 45px;
	font-size: 0;
}

.player-volume--nature {
	float: none;
	height: 106px;
	margin-bottom: 1px;
}

.player-volume__area {
	display: inline-block;
	*display: inline;
	zoom: 1;
	margin: 0 1px;
	padding:0 !important;
	width: 60px;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	background-color: #2d2d2d;
}

.player-volume__mid {
	display: inline-block;
	*display: inline;
	zoom: 1;
	width: 0;
	height: 100%;
	font-size: 0;
	line-height: 140%;
	vertical-align: middle;
}

.player-volume__box {
	display: inline-block;
	*display: inline;
	zoom: 1;
	vertical-align: middle;
}

.player-volume__title {
	display: block;
	height: 30px;
	font-size: 14px;
	line-height: 140%;
	color: #fff;
}

.player-volume__value {
	display: inline-block;
	*display: inline;
	zoom: 1;
	font-size: 20px;
	font-weight: 700;
	line-height: 140% !important;
	vertical-align: middle;
	color: #fff;
}

.player-volume__value--mute {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=20);
	zoom: 1;
	opacity: .2;
}

.player-volume__left {
	position: absolute;
	top: 0;
	left: 0;
	width: 45px;
	height: 100%;
	padding:0 !important;
}

.player-volume__right {
	position: absolute;
	top: 0;
	right: 0;
	width: 45px;
	height: 100%;
	padding:0 !important;
}

.player-slider {
	position: relative;
	overflow: hidden;
	padding: 4px 24px !important;
	zoom: 1;
}

.player-control__cell {
	_display: inline;
	overflow: hidden;
	margin-left: -1px;
	zoom: 1;
}

.player-control__item {
	float: left;
	_display: inline;
	width: 127px;
	margin-left: 1px;
}


.player-control__cell li.volume_control {
	display:inline-block;
}


.mute_disabled {
	opacity:.1;
}
.player-article__volume {
	padding:10px 0 0 0 !important;
}
.player-btn {
	display: block;
	overflow: hidden;
	height: 45px;
	border: 0;
	background-color: #585656;
	padding:0 !important;
	font-size: 0;
	text-align: center;
	cursor: pointer;
	color: #fff;
}

.player-btn--icon {
	width: 45px;
}

.player-btn--empty {
	height: 163px;
	background-color: #373737;
}

.player-volume--nature .player-btn {
	height: 100%;
}

.player-btn--primary {
	background-color: #7e6ada;
}

.player-btn--disabled {
	background-color: #2d2d2d !important;
}

.player-btn__mid {
	display: inline-block;
	*display: inline;
	zoom: 1;
	width: 0;
	height: 100%;
	font-size: 0;
	line-height: 140%;
	vertical-align: middle;
}

.player-btn__icon {
	display: inline-block;
	*display: inline;
	zoom: 1;
	width: 36px;
	height: 36px;
	vertical-align: middle;
}

.player-btn__icon--plus {
	background-image: url("../../image/ic-player-plus-36.png");
	background-image: url("../../image/ic-player-plus-36@2x.png"), none;
	background-size: contain;
	background-repeat: no-repeat;
}

.player-btn__icon--minus {
	background-image: url("../../image/ic-player-minus-36.png");
	background-image: url("../../image/ic-player-minus-36@2x.png"), none;
	background-size: contain;
	background-repeat: no-repeat;
}

.player-btn__icon--play {
	background-image: url("../../image/ic-player-play-36.png");
	background-image: url("../../image/ic-player-play-36@2x.png"), none;
	background-size: contain;
	background-repeat: no-repeat;
}

.player-btn__icon--stop {
	background-image: url("../image/ic-player-stop-36.png");
	background-image: url("../image/ic-player-stop-36@2x.png"), none;
	background-size: contain;
	background-repeat: no-repeat;
}

.player-btn__icon--volume-mute {
	background-image: url("../image/ic-player-volume-mute-36.png");
	background-image: url("../image/ic-player-volume-mute-36@2x.png"), none;
	background-size: contain;
	background-repeat: no-repeat;
}

.player-btn--empty .player-btn__icon--plus {
	width: 48px;
	height: 48px;
	background-image: url("../img/ic-player-plus-48.png");
	background-image: url("../img/ic-player-plus-48@2x.png"), none;
	background-size: contain;
	background-repeat: no-repeat;
}

.player-btn--disabled .player-btn__icon {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=20);
	zoom: 1;
	opacity: .2;
}

.player-btn__text {
	display: inline-block;
	*display: inline;
	zoom: 1;
	width: 66px;
	margin-left: 6px;
	font-size: 17px;
	font-weight: 700;
	vertical-align: middle;
}

.player-btn--icon .player-btn__text {
	display: none;
}

.player-btn--disabled .player-btn__text {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=20);
	zoom: 1;
	opacity: .2;
}


.sc-slider {
	position: relative;
	height: 12px;
	border: 0 !important;
	background-color: #fff;
	zoom: 1;
}

.sc-slider--player {
	background-color: #333;
}

.sc-slider-wrapper {
	position: relative;
	padding: 13px 0 13px 0 !important;
	zoom: 1;
}

.sc-slider-wrapper input[type=range] {
	cursor: pointer;
	width: 100%;
	height: 10px;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	-webkit-transition: 0.2s;
	transition: opacity 0.2s;
	border-radius:5px;
	padding:0;
}

.sc-slider-wrapper input[type=range]::-ms-tooltip {
	display:none;
}

.sc-slider-wrapper input[type=range]:hover {
	opacity: 1;
}

.sc-slider-wrapper input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 48px;
	height: 48px;
	background: url('../../img/common/bg-slider-handle.png');
	border-radius:50%;
	cursor: pointer;
	margin-top:-1px;
}


.sc-slider-wrapper input[type=range]::-ms-track {
	width: 100%;
	cursor: pointer;
	/* IE에서 기본슬라이드 숨기기  */
	background: transparent;
	color: transparent;
	border:none;
}

.sc-slider-wrapper input[type=range]::-moz-slider-thumb {
	width: 25px;
	height: 25px;
	background: #fff;
	border:1px solid #aaa;
	border-radius:50%;
	cursor: pointer;
}

.sc-slider-wrapper input[type=range]::-ms-thumb {
	margin-top: 1px;
	border: 1px solid #003f2d;
	height: 20px;
	width: 20px;
	background: #ffffff;
	cursor: pointer;
}

.sc-slider-wrapper input[type=range]::-ms-fill-lower {
	background: transparent;
}

.sc-slider--gradient {
	background-image: url("../../img/common/bg-slider-gradient.jpg");
	background-image: url("../../img/common/bg-slider-gradient@2x.jpg"), none;
	background-size: contain;
	background-repeat: repeat-y;
	background-position: center top;
}

.sc-slider.ui-slider-horizontal .ui-slider-range {
	height: 100% !important;
	_height: 12px;
}

.sc-slider.ui-slider-horizontal .ui-slider-handle {
	top: -18px;
	width: 48px;
	height: 48px;
	margin-left: -24px;
	background-image: url("../../img/common/bg-slider-handle.png");
	background-image: url("../../img/common/bg-slider-handle@2x.png"), none;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
	position: absolute;
	zoom: 1;
}

.ui-corner-all {
	border-radius: 6px !important;
	padding:0 !important;
}

.sc-slider .ui-slider-range {
	/*background-color: #7e6ada;*/
}

.sc-slider .ui-state-default,
.sc-slider .ui-widget-content .ui-state-default,
.sc-slider .ui-widget-header .ui-state-default,
.sc-slider .ui-button,
.sc-slider html .ui-button.ui-state-disabled:hover,
.sc-slider html .ui-button.ui-state-disabled:active {
	outline: none;
	border: 0;
	background-color: transparent;
}

@media \0screen\,screen\9 {
	#sb-app * {
		font-family : "Nanum Gothic", Sans-Serif
	}
}

/* ═════════════════════════════════════════════════════════════════════════
 *  js/views/SBTTS.css
 * ═════════════════════════════════════════════════════════════════════════ */
.SBTTS {
  width: 100%;
  height: 100%;
  display: flex !important;
  flex-direction: column; }
  .SBTTS .hide {
    display: none !important; }
  .SBTTS .menu {
    width: 100%;
    height: 50px;
    min-height: 50px;
    display: flex;
    align-items: center;
    font-size: 14px;
    background: #3C4859;
    padding: 0 15px;
    border-bottom: 1px solid #1a222b; }
    .SBTTS .menu i {
      display: inline-block;
      color: #ffffff; }
      .SBTTS .menu i.logo {
        width: 30px;
        height: 30px;
        display: inline-block;
        background: url(/image/shopcast_logo_small.png) left/30px no-repeat; }
    .SBTTS .menu label {
      color: #ffffff;
      display: block;
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-left: 7px;
      white-space: nowrap; }
      .SBTTS .menu label.user_id {
        line-height: 140%;
        flex-grow: 1;
        padding: 3px 0;
        font-size: 14px;
        color: #c0c0c0; }
    .SBTTS .menu a {
      color: #ffffff;
      display: flex;
      align-items: center;
      cursor: pointer; }
      .SBTTS .menu a i {
        color: inherit;
        margin-right: 5px;
        margin-top: 2px; }
      .SBTTS .menu a:hover {
        color: #8bc6ff; }
  .SBTTS .buttons {
    min-height: 61px;
    display: flex;
    border-bottom: 1px solid #dedede; }
    .SBTTS .buttons a.btn {
      width: 100%;
      box-sizing: border-box;
      text-align: center;
      display: block;
      cursor: pointer;
      flex-grow: 1;
      font-size: 15px;
      border-right: 1px solid #dedede;
      padding: 10px 8px;
      min-width: 80px;
      min-height: 61px; }
      .SBTTS .buttons a.btn p {
        display: block;
        text-align: center;
        min-height: 26px; }
        .SBTTS .buttons a.btn p i {
          color: inherit;
          display: inline-block; }
      .SBTTS .buttons a.btn:last-child {
        border-right: 0; }
      .SBTTS .buttons a.btn.disable {
        pointer-events: none;
        opacity: 0.3; }
      .SBTTS .buttons a.btn:hover {
        background: #f5f5f5;
        border-bottom: 1px solid #dedede;
        color: #ff1200 !important; }
  .SBTTS .container {
    width: 100%;
    height: 100%;
    flex-grow: 1;
    overflow-x: hidden;
    overflow-y: auto; }
    .SBTTS .container .contents {
      padding: 15px;
      width: 100%;
      height: 100%; }
      .SBTTS .container .contents select {
        width: 100%;
        min-height: 40px;
        font-size: 16px;
        margin-bottom: 10px; }
      .SBTTS .container .contents .channel-list {
        display: block;
        width: 100%; }
        .SBTTS .container .contents .channel-list li {
          border-top: 1px solid #e0e0e0;
          display: flex;
          align-items: center;
          padding: 5px 5px;
          min-height: 60px; }
          .SBTTS .container .contents .channel-list li.channel-item {
            cursor: pointer;
            background: #ffffff; }
            .SBTTS .container .contents .channel-list li.channel-item img {
              display: block;
              width: 50px;
              max-width: 50px;
              max-height: 50px;
              border-radius: 2px;
              border: 1px solid #a0a0a0; }
            .SBTTS .container .contents .channel-list li.channel-item .info {
              width: 100%;
              display: block;
              flex-grow: 1;
              padding: 0 10px; }
              .SBTTS .container .contents .channel-list li.channel-item .info p {
                max-width: 250px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 140%; }
                .SBTTS .container .contents .channel-list li.channel-item .info p.title {
                  font-size: 16px;
                  margin-bottom: 5px;
                  height: 20px; }
                .SBTTS .container .contents .channel-list li.channel-item .info p.description {
                  font-size: 14px;
                  color: #999999;
                  white-space: nowrap; }
            .SBTTS .container .contents .channel-list li.channel-item .play-button {
              display: block;
              width: 50px;
              text-align: center; }
              .SBTTS .container .contents .channel-list li.channel-item .play-button i {
                color: #888888;
                display: inline-block; }
            .SBTTS .container .contents .channel-list li.channel-item:hover {
              background: #f0f0f0;
              color: #ff1200 !important; }
              .SBTTS .container .contents .channel-list li.channel-item:hover i {
                color: #ff1200; }
            .SBTTS .container .contents .channel-list li.channel-item:nth-child(odd) {
              background: #fafafa; }
          .SBTTS .container .contents .channel-list li.empty {
            display: block;
            padding: 100px 0;
            text-align: center;
            font-size: 16px;
            color: #999999; }
          .SBTTS .container .contents .channel-list li:last-child {
            border-bottom: 1px solid #e0e0e0; }
      .SBTTS .container .contents .device-list li {
        display: block; }
        .SBTTS .container .contents .device-list li.empty {
          border: 0;
          padding: 100px 0;
          text-align: center;
          font-size: 16px;
          color: #999999; }
        .SBTTS .container .contents .device-list li.device {
          display: flex;
          flex-direction: column;
          border: 1px solid #dedede;
          margin-bottom: 5px;
          padding: 10px 15px;
          border-radius: 5px;
          cursor: pointer;
          opacity: 0.5; }
          .SBTTS .container .contents .device-list li.device dl {
            display: flex; }
            .SBTTS .container .contents .device-list li.device dl dd {
              padding: 5px 0;
              font-size: 16px;
              flex-grow: 1;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis; }
              .SBTTS .container .contents .device-list li.device dl dd:last-child {
                text-align: right; }
              .SBTTS .container .contents .device-list li.device dl dd.header {
                font-weight: 500 !important; }
                .SBTTS .container .contents .device-list li.device dl dd.header label {
                  font-weight: 100 !important;
                  color: #999999;
                  margin-left: 10px; }
              .SBTTS .container .contents .device-list li.device dl dd.description {
                color: #999999;
                font-size: 14px; }
            .SBTTS .container .contents .device-list li.device dl a {
              display: block;
              text-align: center;
              min-width: 60px;
              border: 1px solid #dedede;
              background: #ffffff;
              border-radius: 3px;
              font-size: 14px;
              padding: 5px 0; }
            .SBTTS .container .contents .device-list li.device dl.onair-info {
              margin-top: 10px;
              padding-top: 10px;
              border-top: 1px solid #dedede; }
              .SBTTS .container .contents .device-list li.device dl.onair-info dd {
                font-size: 14px; }
                .SBTTS .container .contents .device-list li.device dl.onair-info dd.onair-time {
                  width: 110px;
                  max-width: 110px; }
          .SBTTS .container .contents .device-list li.device.active {
            opacity: 1;
            border-color: #565656;
            background: #f5f5f5; }
  .SBTTS .bottom-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
    color: #444444;
    min-height: 80px;
    background: #f0f0f0;
    border-top: 1px solid #d0d0d0;
    overflow: hidden; }
    .SBTTS .bottom-menu .container-button {
      display: block;
      width: 50px;
      min-width: 50px;
      text-align: center;
      cursor: pointer; }
      .SBTTS .bottom-menu .container-button .gg-play-button-o {
        left: 13px; }
      .SBTTS .bottom-menu .container-button .gg-play-stop-o {
        left: 13px;
        color: #ff1200; }
      .SBTTS .bottom-menu .container-button .gg-smartphone-shake {
        left: 15px; }
        .SBTTS .bottom-menu .container-button .gg-smartphone-shake.active {
          color: #ff1200; }
    .SBTTS .bottom-menu .container-volume {
      display: block;
      flex-direction: column;
      min-width: 220px;
      flex-grow: 1;
      padding: 0 10px 0 7px;
      margin-right: 10px; }
      .SBTTS .bottom-menu .container-volume .volume {
        display: flex;
        width: 100%; }
        .SBTTS .bottom-menu .container-volume .volume .gg-volume {
          margin-right: 20px; }
        .SBTTS .bottom-menu .container-volume .volume input[type=range] {
          width: 100%;
          height: 10px;
          -webkit-appearance: none;
          appearance: none;
          background: #cfcfcf;
          outline: none;
          opacity: 0.7;
          -webkit-transition: 0.2s;
          transition: opacity 0.2s; }
          .SBTTS .bottom-menu .container-volume .volume input[type=range]:hover {
            opacity: 1;
            background: #b0b0b0; }
          .SBTTS .bottom-menu .container-volume .volume input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 12px;
            height: 12px;
            background: #444444;
            cursor: pointer; }
          .SBTTS .bottom-menu .container-volume .volume input[type=range]::-moz-range-thumb {
            width: 12px;
            height: 12px;
            background: #444444;
            cursor: pointer; }
      .SBTTS .bottom-menu .container-volume .device {
        font-size: 15px;
        padding-top: 7px; }
        .SBTTS .bottom-menu .container-volume .device .empty {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 37px;
          font-size: inherit;
          text-align: center;
          color: #ff1200; }
        .SBTTS .bottom-menu .container-volume .device label {
          font-size: 14px; }
        .SBTTS .bottom-menu .container-volume .device .selected {
          height: 37px;
          display: block; }
          .SBTTS .bottom-menu .container-volume .device .selected .device-onair {
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 15px;
            font-weight: 500 !important;
            padding-bottom: 5px; }
          .SBTTS .bottom-menu .container-volume .device .selected .device-info {
            display: flex; }
            .SBTTS .bottom-menu .container-volume .device .selected .device-info .device-id {
              display: block;
              flex-grow: 1; }
              .SBTTS .bottom-menu .container-volume .device .selected .device-info .device-id .version {
                color: #999999;
                font-size: 14px; }
            .SBTTS .bottom-menu .container-volume .device .selected .device-info .device-date {
              display: block;
              margin-left: 10px; }
              .SBTTS .bottom-menu .container-volume .device .selected .device-info .device-date .date {
                color: #999999;
                font-size: 14px; }
  .SBTTS .gg-play-button-o {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs, 1));
    width: 32px;
    height: 32px;
    border: 2px solid;
    border-radius: 30px; }
    .SBTTS .gg-play-button-o::before {
      content: "";
      display: block;
      box-sizing: border-box;
      position: absolute;
      width: 0;
      height: 10px;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 6px solid;
      top: 9px;
      left: 12px; }
  .SBTTS .gg-play-stop-o {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs, 1));
    width: 32px;
    height: 32px;
    border: 2px solid;
    border-radius: 30px; }
    .SBTTS .gg-play-stop-o::before {
      content: "";
      display: block;
      box-sizing: border-box;
      position: absolute;
      width: 6px;
      height: 6px;
      top: 11px;
      left: 11px;
      background: currentColor; }

@media only screen and (max-width: 460px) {
  .SBHome .bottom-menu .container-volume .device .device-id .version {
    display: none; } }


/* ═════════════════════════════════════════════════════════════════════════
 *  skin/default.css
 * ═════════════════════════════════════════════════════════════════════════ */
/** 기본 색 : background-color: #7e6ada;  */
/** 기본 색 : #7e6ada */
.logo {
    width: 80px;
    /*height: 30px;*/
    display: inline-block;
    margin-left:3px;
}
.SBHome .menu i.logo {
    width: 80px;
    height: 30px;
    display: inline-block;
    background: url(/image/shopcast_logo_player_login.png) left/79px no-repeat;
}
.player-bar__icon {
    background-color: #7e6ada!important;
    color:#fff;
}
.btn_top i:hover {
    color:#7e6ada!important;
    cursor:pointer;
}
.btn_top > span {
    background:#7e6ada;
}
ul#menu {
    background:#7e6ada;
}
.btn_logout {
    background:#7e6ada;
}
/*.SBHome .buttons a.btn:hover, .SBHome .buttons a.btn.active {*/
/*    color: #7e6ada;*/
/*    font-weight: bold;*/
/*}*/
/*.SBHome .buttons a.btn:hover:after, .SBHome .buttons a.btn.active:after {*/
/*    background: #7e6ada;*/
/*}*/
.volume_popup > ul > li.mute > ul > li:last-child > ul > li:first-child {
    background: #7e6ada;
    width: 40px;
}
.volume_popup > ul > li.mute > ul > li:last-child > ul > li:last-child {
    background: #7e6ada;
    width: 40px;
}
.filter_menu li.active {
    background: #7e6ada;
}
.search > .input-box > li > button {
    float: right;
    background: #7e6ada;
}
.btn_tts {
    background: #7e6ada;
}
.tgl-light:checked + .tgl-btn {
    background: #7e6ada;
}
.SBHome .menu label {
    color: #7e6ada;
}
.SBHome .volume .volume-progress {
    background: #7e6ada;
}
.SBHome .volume .tts-progress {
    background: #7e6ada;
}
.volume_popup > ul > li:nth-child(2) > ul > li:last-child > ul > li:first-child {
    background: #7e6ada;
}
.volume_popup > ul > li:nth-child(2) > ul > li:last-child > ul > li:nth-child(2) {
    background:#333;
}

.volume_popup > ul > li:nth-child(2) > ul > li:last-child > ul > li:last-child {
    background:#7e6ada;
}

/* ═════════════════════════════════════════════════════════════════════════
 *  grr-uploader.css
 * ═════════════════════════════════════════════════════════════════════════ */
.grr-container {
    display: block;
    text-align: center;
    width:100%;
    border:1px solid #dedede;
    border-radius: 10px;
    height:130px;
}
.grr-container .grr-uploader {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #efefef;
    position: relative;
    text-align: center;
    height:100%;
    line-height: 140%;
    font-size: 15px;
    opacity: 0.7;
}
.grr-container .grr-uploader.is-dragover {
    background-color: #007bff;
}
.grr-container .grr-uploader input[type="file"] {
    display: none;
    /*opacity: 0;*/
    /*filter: alpha(opacity=0);*/
}

.grrUploadList {
}
.grrUploadList .grrFile {
    margin-top: 8px;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    font-weight: 500;
}
.grrUploadList .grrFile .grrProcess {
    font-size: 13px;
    line-height: 140%;
    text-align: left;
    padding: 12px 16px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--color-accent) 22%, transparent);
    color: var(--text-primary);
    min-width: fit-content;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.grrUploaderBtn {
    text-align: center;
}


/* ═════════════════════════════════════════════════════════════════════════
 *  bottom.php 푸터 레이아웃 (2026-06-16 재구성)
 *  원본 style.sass 가 deprecated 되어 #menu / .submenu / .volume_popup 의
 *  레이아웃이 비어 있던 걸 HTML 구조 보고 직접 작성.
 * ═════════════════════════════════════════════════════════════════════════ */

/* btn_top — 위로가기 이미지 버튼 (푸터 위에 떠있는 48x48 박스) */
.btn_top {
    position: fixed;
    bottom: 90px;
    right: 14px;
    z-index: 99;
    cursor: pointer;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.btn_top > img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* 좌측: 재생/정지 + 곡정보 — 가능한 만큼 늘어남 */
.SBHome .bottom-menu > .container-volume:first-child {
    display: flex;
    align-items: center;
    flex-grow: 1;
    min-width: 0;
    margin-right: 10px;
}
/* 빈 2번째 컨테이너 — 공간 차지 X */
.SBHome .bottom-menu > .container-volume:nth-child(2):empty,
.SBHome .bottom-menu > .container-volume:nth-child(2) {
    flex-grow: 0;
    flex-basis: 0;
    min-width: 0;
    width: 0;
    padding: 0;
    margin: 0;
}
.SBHome .bottom-menu .btn_play,
.SBHome .bottom-menu .btn_stop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    cursor: pointer;
    font-size: 40px;
    line-height: 140%;
    color: #444;
    margin-right: 12px;
}
.SBHome .bottom-menu .btn_play > i,
.SBHome .bottom-menu .btn_stop > i {
    display: block;
    line-height: 140%;
    margin: 0 !important;  /* 기존 .btn_play > i { margin-top: 25px } 오버라이드 */
    font-size: 40px !important;
}
.SBHome .bottom-menu .btn_play:hover { color: #7e6ada; }
.SBHome .bottom-menu .btn_stop      { color: #ff1200; }

.SBHome .bottom-menu .container-volume .device {
    flex-grow: 1;
    min-width: 0;
}
.SBHome .bottom-menu .container-volume .device .selected {
    overflow: hidden;
}
.SBHome .bottom-menu .container-volume .device .device-onair {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

/* 우측: 볼륨 토글 버튼 ul#menu.volume_input */
/* UL 자체가 시각적 버튼 — .main-bg-c (JS 인라인) 가 색을 칠함 */
.SBHome .bottom-menu ul#menu.volume_input {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    flex-shrink: 0;
    width: auto;
    height: auto;
    border-radius: 6px;
    overflow: visible;
    /* default fallback — JS 가 inline style 로 덮음 */
    background: #7e6ada;
}
.SBHome .bottom-menu ul#menu.volume_input > li {
    list-style: none;
    position: relative;
    margin: 0;
}
.SBHome .bottom-menu ul#menu.volume_input > li > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
/* label 은 클릭 영역만 — 배경 투명, UL 의 .main-bg-c 컬러가 비쳐 보임 */
.SBHome .bottom-menu ul#menu.volume_input > li > label[for="check01"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 18px;
    background: transparent;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    user-select: none;
    transition: background 0.15s;
}

/* ─────────────────────────────────────────────────────────────────
 *  볼륨 토글 팝업 (.submenu) — 흰 카드 안에 슬라이더 + 단축 버튼
 *  레거시 다크 테마 (#2d2d2d/#585656) override 포함.
 * ───────────────────────────────────────────────────────────────── */

.SBHome .bottom-menu ul#menu .submenu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 16px;
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    width: 320px;
    max-width: 90vw;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.40);
    z-index: 200;
}
.SBHome .bottom-menu ul#menu > li > input[type="checkbox"]:checked ~ .submenu {
    display: block;
}
.SBHome .bottom-menu ul#menu .submenu > li {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}
.SBHome .bottom-menu ul#menu .submenu > li:last-child {
    margin-bottom: 0;
}

/* 섹션 타이틀 (마스터 볼륨 / 배달 알림음 볼륨) */
.SBHome .bottom-menu ul#menu .submenu .volume > p,
.SBHome .bottom-menu ul#menu .submenu .alertcm-volume > p {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.SBHome .bottom-menu ul#menu .submenu .volume > p > span {
    color: var(--text-secondary);
    font-weight: 400;
}
.SBHome .bottom-menu ul#menu .submenu .volume.mute {
    opacity: 0.5;
}

/* player-article__volume — 슬라이더 박스 + 카운터 박스 묶음 */
.submenu .player-article__volume {
    padding: 0 !important;
    background: transparent;
}

/* [-] | 값 | [+] 카운터 박스 — 가로 한 줄, 회색 보더 + 셀 구분선 */
.submenu .player-volume {
    float: none !important;
    position: static !important;
    display: flex !important;
    align-items: stretch;
    height: 44px !important;
    padding: 0 !important;
    font-size: 14px !important;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}
.submenu .player-volume__left,
.submenu .player-volume__right {
    position: static !important;
    width: 44px !important;
    height: auto !important;
    padding: 0 !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.submenu .player-volume__area {
    flex: 1;
    background: transparent !important;
    color: var(--text-primary);
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    border-left: 1px solid rgba(0, 0, 0, 0.10);
    border-right: 1px solid rgba(0, 0, 0, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
}
.submenu .player-volume__value,
.submenu .player-volume__value--mute {
    color: var(--text-secondary) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    opacity: 1 !important;
    filter: none !important;
}

/* +/- 버튼 — 셀 가득 채우는 투명 버튼 (보더는 부모가 담당) */
/* ★ body.site-* .main-bg-c 의 브랜드 컬러 override 를 이기기 위해 body 포함 */
body .submenu .player-btn,
body .submenu .player-btn.main-bg-c {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.12s;
}
body .submenu .player-btn:hover,
body .submenu .player-btn.main-bg-c:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}
body .submenu .player-btn:active,
body .submenu .player-btn.main-bg-c:active {
    background-color: rgba(0, 0, 0, 0.08) !important;
}
.submenu .player-btn__mid { display: none; }
.submenu .player-btn__icon { display: none !important; }
.submenu .player-btn__text {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    color: var(--text-primary);
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}
/* HTML 은 +/- 둘 다 '+' 라서, left 쪽은 ::before 로 '−' 치환 */
.submenu .player-volume__left .player-btn .player-btn__text {
    visibility: hidden;
    position: relative;
    width: 14px !important;
}
.submenu .player-volume__left .player-btn .player-btn__text::before {
    content: '−';
    visibility: visible;
    position: absolute;
    inset: 0;
    text-align: center;
    font-size: 20px;
    line-height: 1;
}

/* jquery-ui slider (.sc-slider) — 브랜드 컬러 적용
   ★ 핸들이 좌우 끝에서 잘리지 않도록 .player-slider 의 overflow:hidden 해제
     + 핸들 반지름(12px) 만큼 좌우 padding 확보 */
.submenu .player-slider {
    padding: 14px 14px 6px !important;
    overflow: visible !important;
}
.submenu .sc-slider {
    height: 6px !important;
    background: #e4e6eb !important;
    border-radius: 3px;
    border: 0 !important;
    overflow: visible !important;
}
.submenu .sc-slider .ui-slider-range {
    background: var(--color-accent) !important;
    border-radius: 3px;
}
.submenu .sc-slider .ui-slider-handle {
    width: 24px !important;
    height: 24px !important;
    top: -9px !important;
    margin-left: -12px !important;
    background: #fff !important;
    border: 2px solid var(--color-accent) !important;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    outline: none;
    cursor: pointer;
}
.submenu .sc-slider .ui-slider-handle:hover,
.submenu .sc-slider .ui-slider-handle:focus,
.submenu .sc-slider .ui-slider-handle.ui-state-active {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 20%, transparent),
                0 2px 6px rgba(0, 0, 0, 0.18);
}

/* .volume_popup — 소리끄기/듣기 + 최대/크게/중간/작게 단축 버튼 */
.volume_popup {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eee;
}
.volume_popup > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.volume_popup > ul > li {
    list-style: none;
}
.volume_popup > ul > li:first-child {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.volume_popup > ul > li:first-child > a {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    background: #f4f5f7;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.volume_popup > ul > li:first-child > a:hover {
    background: #ebecf0;
    border-color: rgba(0, 0, 0, 0.08);
}
.volume_popup > ul > li.mute_li > ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 6px;
}
.volume_popup > ul > li.mute_li > ul > li {
    flex: 1;
    list-style: none;
}
.volume_popup > ul > li.mute_li > ul > li > a {
    display: block;
    text-align: center;
    padding: 9px 0;
    background: #f4f5f7;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.volume_popup > ul > li.mute_li > ul > li > a:hover {
    background: var(--color-accent);
    color: #fff;
}
.volume_popup > ul > li.mute_li.mute {
    opacity: 1;
}

/* btn_logout (.menu 상단의 로그아웃 버튼) — 레거시 */
.menu .btn_logout {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}
.menu .btn_logout a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #fff !important;
    text-decoration: none;
}

/* 상단 메뉴 우측 — 재시작 / 로그아웃 이미지 버튼 (48×48, gap 12) */
.menu .btn_actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}
.menu .btn_actions .btn_action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-decoration: none;
}
.menu .btn_actions .btn_action img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
}
.menu .btn_actions .btn_action:hover { opacity: 0.85; }

/* 상단 .menu — 로고/유저/로그아웃 한 줄 정렬 */
.SBHome .menu {
    display: flex;
    align-items: center;
    gap: 12px;
}
.SBHome .menu .user_id,
.SBHome .menu label.user_id {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 0 0;
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
    line-height: 140%;
    font-size: 14px !important;
    font-weight: 600;
    margin-left: 0;
}
.SBHome .menu .user_id .logo {
    height: 20px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}
.SBHome .menu .user_id .shop_name {
    padding-left: 2px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
	font-size:14px;
}
.SBHome .menu .user_id br { display: none; }

/* container — flex-grow 로 남은 공간 채우고, overflow:hidden 으로 클리핑.
   실제 스크롤은 내부 .contents 가 담당 (padding-bottom 80px 으로 푸터 영역 확보). */
.SBHome .container {
    flex-grow: 1;
    overflow: hidden;
    padding-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────────
 *  사이트별 메인 컬러 override (.main-bg-c / .main-font-c / .main-bd-c)
 *    SC (default) : #7e6ada — global.css default 스킨에서 이미 적용
 *    SM           : #2F2F6B
 *    BR           : #05B2CC
 *    RD           : #F5A623
 *  top.php 가 body 에 .site-{sc|sm|br|rd} 클래스 부여.
 *  볼륨 버튼 / 채널 active / btn_logout / btn_top / 액센트 모두에 반영.
 * ───────────────────────────────────────────────────────────────── */

/* SM — 딥네이비 */
body.site-sm .main-bg-c,
body.site-sm ul#menu,
body.site-sm .SBHome .bottom-menu ul#menu.volume_input > li > label[for="check01"],
body.site-sm .btn_top > span,
body.site-sm .btn_logout,
body.site-sm .btn_tts,
body.site-sm .volume_popup > ul > li.mute > ul > li:last-child > ul > li:first-child,
body.site-sm .volume_popup > ul > li.mute > ul > li:last-child > ul > li:last-child,
body.site-sm .filter_menu li.active,
body.site-sm .search > .input-box > li > button,
body.site-sm .tgl-light:checked + .tgl-btn,
body.site-sm .SBHome .volume .volume-progress,
body.site-sm .SBHome .volume .tts-progress {
    background: #2F2F6B;
}
body.site-sm .main-font-c,
body.site-sm .btn_top i:hover,
body.site-sm .SBHome .buttons a.btn:hover,
body.site-sm .SBHome .buttons a.btn.active,
body.site-sm .SBHome .menu label {
    color: #2F2F6B;
}
body.site-sm .main-bd-c { border-bottom-color: #2F2F6B; }

/* BR — 시안 */
body.site-br .main-bg-c,
body.site-br ul#menu,
body.site-br .SBHome .bottom-menu ul#menu.volume_input > li > label[for="check01"],
body.site-br .btn_top > span,
body.site-br .btn_logout,
body.site-br .btn_tts,
body.site-br .volume_popup > ul > li.mute > ul > li:last-child > ul > li:first-child,
body.site-br .volume_popup > ul > li.mute > ul > li:last-child > ul > li:last-child,
body.site-br .filter_menu li.active,
body.site-br .search > .input-box > li > button,
body.site-br .tgl-light:checked + .tgl-btn,
body.site-br .SBHome .volume .volume-progress,
body.site-br .SBHome .volume .tts-progress {
    background: #05B2CC;
}
body.site-br .main-font-c,
body.site-br .btn_top i:hover,
body.site-br .SBHome .buttons a.btn:hover,
body.site-br .SBHome .buttons a.btn.active,
body.site-br .SBHome .menu label {
    color: #05B2CC;
}
body.site-br .main-bd-c { border-bottom-color: #05B2CC; }

/* RD — 오렌지 */
body.site-rd .main-bg-c,
body.site-rd ul#menu,
body.site-rd .SBHome .bottom-menu ul#menu.volume_input > li > label[for="check01"],
body.site-rd .btn_top > span,
body.site-rd .btn_logout,
body.site-rd .btn_tts,
body.site-rd .volume_popup > ul > li.mute > ul > li:last-child > ul > li:first-child,
body.site-rd .volume_popup > ul > li.mute > ul > li:last-child > ul > li:last-child,
body.site-rd .filter_menu li.active,
body.site-rd .search > .input-box > li > button,
body.site-rd .tgl-light:checked + .tgl-btn,
body.site-rd .SBHome .volume .volume-progress,
body.site-rd .SBHome .volume .tts-progress {
    background: #F5A623;
}
body.site-rd .main-font-c,
body.site-rd .btn_top i:hover,
body.site-rd .SBHome .buttons a.btn:hover,
body.site-rd .SBHome .buttons a.btn.active,
body.site-rd .SBHome .menu label,
body.site-rd .SBHome .bottom-menu .btn_play:hover {
    color: #F5A623;
}
body.site-rd .main-bd-c { border-bottom-color: #F5A623; }


/* ═════════════════════════════════════════════════════════════════════════
 *  TTS 페이지 통합 정리 (tts_new.php)
 *    탭(.sub-buttons) / TTS 폼 / 파일 / 스케쥴(.today/.schedule) / 모달
 *    디자인 토큰(text-primary/secondary/color-accent) 기반 일괄 정돈.
 *  높은 특이도 (body .SBHome ...) 로 기존 SBTTS.css 의 !important 무력화.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── 탭 네비 (.buttons.sub-buttons) ──────────────────────────────────── */
body .SBHome .buttons.sub-buttons {
    margin-top: 0;
    border-bottom: 1px solid #ececef;
}
body .SBHome .buttons.sub-buttons a.btn {
    padding: 12px 8px !important;
    font-size: 16px !important;
    font-weight: 500;
    color: var(--text-secondary);
}
body .SBHome .buttons.sub-buttons a.btn.active,
body .SBHome .buttons.sub-buttons a.btn.main-font-c {
    font-weight: 700;
    color: var(--color-accent);
}
body .SBHome .buttons.sub-buttons a.btn:hover {
    color: var(--color-accent);
}

/* ── 공통 폼 요소 (TTS/파일 탭 안의 input/textarea) ─────────────────── */
body .SBHome .container .contents.tts .tts-title,
body .SBHome .container .contents.tts textarea {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    background: #fff;
    font-size: 14px !important;
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.12s;
}
body .SBHome .container .contents.tts .tts-title {
    height: 48px;
    margin-top: 12px;
}
body .SBHome .container .contents.tts textarea {
    min-height: 220px !important;
    height: auto !important;
    margin-top: 12px;
    resize: vertical;
    line-height: 140%;
}
body .SBHome .container .contents.tts .tts-title:focus,
body .SBHome .container .contents.tts textarea:focus {
    border-color: var(--color-accent) !important;
}
body .SBHome .container .contents.tts .tts-title::placeholder,
body .SBHome .container .contents.tts textarea::placeholder {
    color: var(--text-secondary);
    font-size: 14px !important;
}

/* ── 안내 문구 (.tts-tooltip / .file-tooltip) ─────────────────────── */
body .SBHome .container .contents.tts .tts-tooltip,
body .SBHome .container .contents.file .file-tooltip {
    margin-top: 6px;
    padding: 0 2px;
    text-align: right;
    font-size: 14px;
    color: var(--text-secondary);
    opacity: 1;
}
body .SBHome .container .contents.tts .tts-tooltip .blue.bold {
    color: var(--color-accent);
    font-weight: 700;
}

/* ── 작은 액션 버튼 (.tts-box, .file-box "TTS 목록" / "파일 목록") ──── */
body .SBHome .container .contents.tts .tts-box,
body .SBHome .container .contents.file .file-box {
    text-align: right;
    margin-bottom: 4px;
}
body .SBHome .container .contents.tts .tts-box button,
body .SBHome .container .contents.file .file-box button {
    width: auto;
    min-height: 36px !important;
    height: 36px;
    padding: 0 14px !important;
    margin: 0 !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: var(--text-primary) !important;
    font-size: 14px !important;
    font-weight: 500;
    cursor: pointer;
}
body .SBHome .container .contents.tts .tts-box button:hover,
body .SBHome .container .contents.file .file-box button:hover {
    background: #f5f5f7 !important;
    border-color: rgba(0, 0, 0, 0.25) !important;
}

/* ── 메인 액션 버튼 (.tts-buttons, .file-buttons 의 번역/즉시송출/예약송출) ── */
body .SBHome .container .contents.tts .tts-buttons,
body .SBHome .container .contents.file .file-buttons {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
}
body .SBHome .container .contents.tts .tts-buttons button,
body .SBHome .container .contents.file .file-buttons button {
    flex: 1;
    height: 48px;
    margin: 0 !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--text-primary) !important;
    font-size: 14px !important;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
body .SBHome .container .contents.tts .tts-buttons button:hover,
body .SBHome .container .contents.file .file-buttons button:hover {
    background: #f5f5f7 !important;
    border-color: rgba(0, 0, 0, 0.25) !important;
}
/* 즉시송출 (primary) — 브랜드 컬러 배경 */
body .SBHome .container .contents.tts .tts-buttons button.primary,
body .SBHome .container .contents.file .file-buttons button.primary {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #fff !important;
}
body .SBHome .container .contents.tts .tts-buttons button.primary:hover,
body .SBHome .container .contents.file .file-buttons button.primary:hover {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    filter: brightness(0.92);
}
/* 미리듣기 버튼 (.listen-button) — 아이콘 정렬 */
body .SBHome .container .contents.tts .listen-button,
body .SBHome .container .contents.file .listen-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
body .SBHome .container .contents.tts .listen-button i,
body .SBHome .container .contents.file .listen-button i {
    color: var(--color-accent);
}
body .SBHome .container .contents.file .file-box button.listen-button {
    width: 100%;
    height: 48px !important;
    min-height: 48px !important;
    font-size: 14px !important;
    opacity: 0.4;
    margin-top: 12px !important;
}
body .SBHome .container .contents.file .file-box button.listen-button.active {
    opacity: 1 !important;
}

/* ── 볼륨 옵션 (.tts-option) ─────────────────────────────────────── */
body .SBHome .container .contents.tts .tts-option {
    width: 100%;
    margin: 14px 0;
    padding: 12px 14px;
    /*background: #f9f9fb;*/
    border-radius: 8px;
    border: 0;
}
body .SBHome .container .contents.tts .tts-option ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
body .SBHome .container .contents.tts .tts-option ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    height: auto;
    font-size: 14px;
}
body .SBHome .container .contents.tts .tts-option ul li > span {
    width: 50px;
    float: none;
    text-indent: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
body .SBHome .container .contents.tts .tts-option ul li .volume-range {
    flex: 1;
    display: flex;
    align-items: center;
}
body .SBHome .container .contents.tts .tts-option ul li input[type=range] {
    width: 100%;
    height: 6px;
    accent-color: var(--color-accent);
    opacity: 1;
}

/* tts-slider — jquery-ui slider, 푸터 볼륨 슬라이더와 동일 모양 */
body .SBHome .tts-progress {
    display: none;
}
body .SBHome .container .contents.tts .tts-option ul li .volume-range {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0 12px;          /* 핸들이 좌우 끝에서 잘리지 않게 */
    overflow: visible;
}
body .SBHome .tts-slider {
    flex: 1;
    height: 6px;
    background: #e4e6eb;
    border-radius: 3px;
    border: 0;
    position: relative;
    overflow: visible;
    cursor: pointer;
}
body .SBHome .tts-slider .ui-slider-range {
    background: var(--color-accent);
    border-radius: 3px;
    height: 6px;
    border: 0;
    position: absolute;
    top: 0;
}
/* jquery-ui ui-state-default 의 기본 보더/배경/색을 완전히 무력화 */
body .SBHome .tts-slider .ui-slider-handle,
body .SBHome .tts-slider .ui-slider-handle.ui-state-default,
body .SBHome .tts-slider .ui-slider-handle.ui-corner-all,
body .SBHome .tts-slider .ui-slider-handle.ui-state-default.ui-corner-all {
    width: 24px !important;
    height: 24px !important;
    top: -9px !important;
    margin-left: -12px !important;
    padding: 0 !important;
    background: #fff !important;
    background-image: none !important;
    background-color: #fff !important;
    border: 2px solid var(--color-accent) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    outline: none !important;
    cursor: pointer;
    position: absolute;
    color: transparent !important;
    font-size: 0 !important;
    text-decoration: none;
    font-weight: normal;
    box-sizing: border-box;
}
body .SBHome .tts-slider .ui-slider-handle:hover,
body .SBHome .tts-slider .ui-slider-handle:focus,
body .SBHome .tts-slider .ui-slider-handle.ui-state-active,
body .SBHome .tts-slider .ui-slider-handle.ui-state-hover {
    background: #fff !important;
    background-image: none !important;
    border: 2px solid var(--color-accent) !important;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 20%, transparent),
                0 2px 6px rgba(0, 0, 0, 0.18);
}

/* ── 파일 업로더 박스 (#grrUploader, .grrUploadList) ─────────────── */
body .SBHome .container .contents.file #grrUploader {
    margin-top: 12px;
}
body .SBHome .container .contents.file .grrUploadList {
    margin-top: 8px;
}

/* ── 날짜 박스 (.today-box / .schedule-box) ──────────────────────── */
body .SBHome .container .contents.today .today-box,
body .SBHome .container .contents.schedule .schedule-box {
    width: 100%;
    margin-top: 4px;
    padding: 6px;
    background: #f9f9fb;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}
body .SBHome .container .contents.today .today-box a,
body .SBHome .container .contents.schedule .schedule-box a {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    border-radius: 50%;
    text-decoration: none;
}
body .SBHome .container .contents.today .today-box a:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-accent);
}
body .SBHome .container .contents.today .today-box .today-picker,
body .SBHome .container .contents.schedule .schedule-box .schedule-picker {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
}
body .SBHome .container .contents.today .today-box input[type=text] {
    background: transparent;
    border: 0;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
    outline: none;
}

/* ── 오늘 송출 리스트 (.today-list) ───────────────────────────────── */
body .SBHome .container .contents.today .today-list {
    width: 100%;
    margin-top: 10px;
    list-style: none;
    padding: 0;
}
body .SBHome .container .contents.today .today-list li {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    height: 70px;
    border: 0;
    border-bottom: 1px solid #DDD;
    border-radius: 0;
    overflow: hidden;
    background: #fff;
}
body .SBHome .container .contents.today .today-list li:last-child {
    border-bottom: 0;
}
/* .li-title — 시간 + 즉시/예약 줄바꿈 (96×70) */
body .SBHome .container .contents.today .today-list li .li-title {
    flex-shrink: 0;
    width: 96px;
    height: 70px;
    padding: 0 8px;
    background: #f3f4f7;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    line-height: 140%;
}
body .SBHome .container .contents.today .today-list li .li-title.reservation {
    background: color-mix(in srgb, var(--color-accent) 18%, transparent);
    color: var(--color-accent);
}
body .SBHome .container .contents.today .today-list li .li-title .li-time {
    font-size: 13px;
    font-weight: 700;
}
body .SBHome .container .contents.today .today-list li .li-title .li-type {
    font-size: 13px;
    font-weight: 500;
    opacity: 0.85;
}
/* .li-contents — width calc(100% - 144) / 2줄 ellipsis */
body .SBHome .container .contents.today .today-list li .li-contents {
    width: calc(100% - 144px);
    flex-shrink: 0;
    padding: 12px;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 140%;
    display: flex;
    align-items: center;
    overflow: hidden;
}
body .SBHome .container .contents.today .today-list li .li-contents > span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    width: 100%;
}
/* 휴지통 영역 — 48px 가운데 정렬 (96 + 48 = 144 = 우측 영역) */
body .SBHome .container .contents.today .today-list li .li-menus {
    flex-shrink: 0;
    width: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
body .SBHome .container .contents.today .today-list li .li-menus a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--text-secondary);
    border-radius: 50%;
    transition: background 0.12s, color 0.12s;
    text-decoration: none;
}
body .SBHome .container .contents.today .today-list li .li-menus a:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #e74c3c;
}
body .SBHome .container .contents.today .today-list li.li-empty {
    justify-content: center;
    height: 56px;
    background: #fafafa;
    color: var(--text-secondary);
    font-size: 14px;
}

/* ── 편성정보 리스트 (.schedule-list) ─────────────────────────────── */
body .SBHome .container .contents.schedule .schedule-list {
    width: 100%;
    margin-top: 10px;
    list-style: none;
    padding: 0;
}
body .SBHome .container .contents.schedule .schedule-list li {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
body .SBHome .container .contents.schedule .schedule-list li .box-li {
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    display: block;
    position: relative;
}
body .SBHome .container .contents.schedule .schedule-list li .box-li .box-left {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
    /* 제목 행의 액션 아이콘 자리 확보 (3 icons × 32 + 2 gaps × 8 + 우측 margin) */
    padding-right: 120px;
}
/* 기간 + 반복을 묶는 wrapper — 제목과 떨어뜨리고, 액션 영역 너머까지 풀너비 */
body .SBHome .container .contents.schedule .schedule-list li .box-li .box-left .li-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    margin-right: -120px;
}
body .SBHome .container .contents.schedule .schedule-list li .box-li .box-left .li-div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
}
body .SBHome .container .contents.schedule .schedule-list li .box-li .box-left .li-div .li-div-tt {
    width: 36px;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 14px;
}
body .SBHome .container .contents.schedule .schedule-list li .box-li .box-left .li-div .li-div-ct {
    opacity: 1;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 14px;
}
body .SBHome .container .contents.schedule .schedule-list li .box-li .box-left .li-div .li-language {
    width: auto;
}
body .SBHome .container .contents.schedule .schedule-list li .box-li .box-left .li-div .li-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 16px;
}
body .SBHome .container .contents.schedule .schedule-list li .box-li .box-left .li-div #li-language-box,
body .SBHome .container .contents.schedule .schedule-list li .box-li .box-left .li-div [id^="li-language-box"] {
    display: inline-block;
    min-width: 26px;
    padding: 2px 6px;
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-accent);
    font-weight: 700;
    font-size: 14px;
    border-radius: 4px;
    text-align: center;
}
body .SBHome .container .contents.schedule .schedule-list li .box-li .box-right {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    width: auto;
    gap: 8px;
}
body .SBHome .container .contents.schedule .schedule-list li .box-li .box-right a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 50%;
    transition: background 0.12s, color 0.12s;
    cursor: pointer;
}
body .SBHome .container .contents.schedule .schedule-list li .box-li .box-right a:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-accent);
}
body .SBHome .container .contents.schedule .schedule-list li .box-li .box-right a i {
    margin: 0;
    color: inherit;
    font-size: 14px;
}

/* ── 모달 (.bg_dmm, .layer-popup) ─────────────────────────────────── */
/* 초기 hidden — JS .css('display', 'block'/'flex') 로 노출 */
body .bg_dmm {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 500;
}
body .layer-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 510;
    align-items: center;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
}
/* 각 모달 패널도 기본 hidden — openLayer 가 클래스명으로 켬 */
body .layer-popup .translate-page,
body .layer-popup .reservation-page,
body .layer-popup .list-page {
    display: none;
}
body .layer-popup > div {
    pointer-events: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 520px;
    height: 80vh;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 모달 헤더 공통 */
body .layer-popup .translate-header,
body .layer-popup .reservation-header,
body .layer-popup .list-header {
    padding: 18px 20px;
    border-bottom: 1px solid #ececef;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
body .layer-popup .list-header .list-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}
body .layer-popup .translate-header span,
body .layer-popup .reservation-header span,
body .layer-popup .list-header span {
    cursor: pointer;
}
body .layer-popup .modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
    border-radius: 50%;
    color: var(--text-secondary);
    transition: background 0.12s, color 0.12s;
}
body .layer-popup .modal-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
}
body .layer-popup .modal-close > i {
    font-size: 18px;
    float: none;
}

/* 모달 바디 공통 */
body .layer-popup .translate-body,
body .layer-popup .reservation-body,
body .layer-popup .list-body {
    padding: 18px 20px;
    overflow-y: auto;
    flex: 1;
}

/* 모달 푸터 공통 */
body .layer-popup .translate-bottom,
body .layer-popup .reservation-bottom {
    padding: 14px 20px;
    border-top: 1px solid #ececef;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
body .layer-popup .translate-bottom button,
body .layer-popup .reservation-bottom button {
    height: 44px;
    min-width: 100px;
    padding: 0 18px !important;
    margin: 0 !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--text-primary) !important;
    font-size: 14px !important;
    font-weight: 600;
    cursor: pointer;
}
body .layer-popup .translate-bottom button.main-bg-c,
body .layer-popup .reservation-bottom button.main-bg-c,
body .layer-popup .reservation-bottom button#reservation_btn {
    background: var(--color-accent) !important;
    color: #fff !important;
    border-color: var(--color-accent) !important;
}

/* 모달 내부 form 요소 */
body .layer-popup select,
body .layer-popup input[type=text] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    color: var(--text-primary);
    outline: none;
}
body .layer-popup select:focus,
body .layer-popup input[type=text]:focus {
    border-color: var(--color-accent);
}
body .layer-popup textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    line-height: 140%;
    color: var(--text-primary);
    outline: none;
    resize: vertical;
}
body .layer-popup textarea:focus {
    border-color: var(--color-accent);
}

/* 번역 모달 — 위아래 분할 (원문 / 번역결과) */
body .layer-popup .translate-page .translate-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
body .layer-popup .translate-page .translate-body .left,
body .layer-popup .translate-page .translate-body .right {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 0;
    min-height: 0;
}
/* 언어 선택 라벨 — select 를 감싸는 label */
body .layer-popup .translate-page .translate-body .left > label,
body .layer-popup .translate-page .translate-body .right > label {
    display: block;
    margin: 0;
}
body .layer-popup .translate-page .translate-body select {
    width: 100%;
    height: 40px;
}
/* 원문/번역결과 박스 — textarea + 버튼 */
body .layer-popup .translate-page .translate-body .translate-box {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
}
body .layer-popup .translate-page .translate-body .translate-box textarea {
    flex: 1 1 auto;
    min-height: 100px;
    width: 100%;
    resize: none;
}
/* 좌측 번역하기 버튼 — 보조 톤 (흰 배경 + 회색 보더) */
body .layer-popup .translate-page .translate-body .left .translate-box #translate_btn {
    height: 44px;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--text-primary) !important;
    font-size: 14px !important;
    font-weight: 600;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
}
body .layer-popup .translate-page .translate-body .left .translate-box #translate_btn:hover {
    background: #f5f5f7 !important;
}

/* .left ↔ .right 사이 화살표 — 번역 흐름 표시 */
body .layer-popup .translate-page .translate-body .translate-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 18px;
    margin: 0;
    flex-shrink: 0;
}
/* 우측 미리듣기 버튼 — 보조 톤 */
body .layer-popup .translate-page .translate-body .right .translate-box .listen-button {
    height: 44px;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--text-primary) !important;
    font-size: 14px !important;
    font-weight: 600;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
body .layer-popup .translate-page .translate-body .right .translate-box .listen-button i {
    color: var(--color-accent);
}
body .layer-popup .translate-page .translate-body .right .translate-box .listen-button:hover {
    background: #f5f5f7 !important;
}
body .layer-popup .translate-page .translate-body .right .translate-box audio {
    display: none;
}

/* ── 예약 모달 정리 ──────────────────────────────────────────────── */
body .layer-popup .reservation-page .reservation-body .reservation-box {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
body .layer-popup .reservation-page .reservation-body .reservation-box #reservation_form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* 섹션 라벨 — 기간 / 반복설정 */
body .layer-popup .reservation-page .reservation-body .reservation-box label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* 시작일 / 종료일 — 2열 grid */
body .layer-popup .reservation-page .reservation-body .reservation-box .datepicker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
body .layer-popup .reservation-page .reservation-body .reservation-box .datepicker > div {
    display: flex;
    flex-direction: column;
}

/* 반복설정 — 섹션 헤더는 살짝 크게 */
body .layer-popup .reservation-page .reservation-body .reservation-box .term > label {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

/* 반복설정 영역 — select + 조건부 daily / timepicker */
body .layer-popup .reservation-page .reservation-body .reservation-box .term .box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    background: transparent;
}
body .layer-popup .reservation-page .reservation-body .reservation-box .term .box > select {
    width: 100%;
    height: 40px;
}

/* 매일 HH:MM (반복 = 특정시간에) */
body .layer-popup .reservation-page .reservation-body .reservation-box .term .box .daily {
    display: flex;
    align-items: center;
    gap: 10px;
}
body .layer-popup .reservation-page .reservation-body .reservation-box .term .box .daily > label {
    margin-bottom: 0;
    flex-shrink: 0;
    min-width: 44px;
    color: var(--text-secondary);
    font-weight: 500;
}
body .layer-popup .reservation-page .reservation-body .reservation-box .term .box .daily > input {
    flex: 1 1 auto;
}

/* 시작시간 ~ 종료시간 (반복 = N분마다) */
body .layer-popup .reservation-page .reservation-body .reservation-box .term .box .timepicker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
body .layer-popup .reservation-page .reservation-body .reservation-box .term .box .timepicker > div {
    display: flex;
    flex-direction: column;
}
body .layer-popup .reservation-page .reservation-body .reservation-box .term .box .timepicker label {
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* timepicker label 안에 있는 sub-label (시작시간 / 종료시간) */
body .layer-popup .reservation-page .reservation-body .reservation-box .datepicker label {
    font-weight: 500;
    color: var(--text-secondary);
}

/* ── jquery-timepicker (jonthornton) 드롭다운 스타일 ──────────────────
   CDN CSS 가 늦게 로드돼 cascade 로 이기므로 body 접두 + !important 로 덮음. */
body .ui-timepicker-wrapper {
    margin-top: 4px !important;
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden !important;
    z-index: 1000 !important;
    outline: none !important;
    width: 9em !important;
    max-height: 220px !important;
    height: auto !important;
}
body .ui-timepicker-wrapper.ui-timepicker-with-duration {
    width: 13em !important;
}
body .ui-timepicker-list {
    list-style: none !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: 212px !important;
    scrollbar-width: thin;
}
body .ui-timepicker-list::-webkit-scrollbar {
    width: 6px;
}
body .ui-timepicker-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}
body .ui-timepicker-list li {
    padding: 10px 16px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    color: var(--text-primary) !important;
    border: 0 !important;
    background: transparent !important;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap !important;
    text-align: left !important;
}
body .ui-timepicker-list li:hover,
body .ui-timepicker-list li.ui-timepicker-selected,
body .ui-timepicker-list li.ui-timepicker-selected:hover {
    background: color-mix(in srgb, var(--color-accent) 14%, transparent) !important;
    color: var(--color-accent) !important;
    font-weight: 600 !important;
}
body .ui-timepicker-list li.ui-timepicker-disabled,
body .ui-timepicker-list li.ui-timepicker-disabled:hover {
    color: rgba(0, 0, 0, 0.25) !important;
    background: transparent !important;
    cursor: default !important;
}
body .ui-timepicker-list li.ui-timepicker-disabled.ui-timepicker-selected {
    color: rgba(0, 0, 0, 0.25) !important;
    background: #f5f5f7 !important;
    font-weight: 400 !important;
}
body .ui-timepicker-duration {
    margin-left: 6px !important;
    color: var(--text-secondary) !important;
}

/* 목록 모달 (.list-page) — 검색 + 카운트 + 리스트 */
/* TTS 목록 모달 검색 — channel.php 의 .search 디자인 그대로 */
body .layer-popup .list-page .list-body .list-sch-box {
    margin-bottom: 10px;
    margin-top: 0;
}
body .layer-popup .list-page .list-body .list-sch-box.search > .input-box {
    height: 48px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
body .layer-popup .list-page .list-body .list-sch-box.search input[type=text] {
    border: 0;
    background: transparent;
    height: 100%;
    flex: 1 1 auto;
    width: auto;
}
body .layer-popup .list-page .list-body .list-sch-box.search .sch_btn {
    height: 100%;
    min-width: 64px;
    padding: 0 18px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600;
    cursor: pointer;
}
body .layer-popup .list-page .list-body .list-tooltip {
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}
body .layer-popup .list-page .list-body .list-box {
    border-top: 1px solid #ececef;
}
/* list-body — flex column 으로 검색/필터 고정 + 리스트만 스크롤 */
body .layer-popup .list-page .list-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 18px 20px;
}
body .layer-popup .list-page .list-body .list-sch-box,
body .layer-popup .list-page .list-body .filter {
    flex-shrink: 0;
}
body .layer-popup .list-page .list-body .list-box {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    border-top: 1px solid #ececef;
    padding-top: 4px;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */
}
body .layer-popup .list-page .list-body .list-box::-webkit-scrollbar {
    display: none;                  /* Chrome/Safari */
}
body .layer-popup .list-page .list-body .list-ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
body .layer-popup .list-page .list-body .list-ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 8px;
    border-bottom: 1px solid #f0f0f2;
    cursor: pointer;
    transition: background 0.12s;
}
body .layer-popup .list-page .list-body .list-ul li:hover {
    background: #f7f7f9;
}
body .layer-popup .list-page .list-body .list-ul li:last-child {
    border-bottom: 0;
}
body .layer-popup .list-page .list-body .list-ul li .li-language {
    flex-shrink: 0;
}
body .layer-popup .list-page .list-body .list-ul li .li-language #li-language-box,
body .layer-popup .list-page .list-body .list-ul li .li-language [id^="li-language-box"] {
    display: inline-block;
    min-width: 28px;
    padding: 4px 8px;
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-accent);
    font-weight: 700;
    font-size: 14px;
    border-radius: 4px;
    text-align: center;
}
body .layer-popup .list-page .list-body .list-ul li .li-language #li-language-box > i,
body .layer-popup .list-page .list-body .list-ul li .li-language [id^="li-language-box"] > i {
    font-size: 11px !important;
}
body .layer-popup .list-page .list-body .list-ul li .li-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body .layer-popup .list-page .list-body .list-ul li .li-trash {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
body .layer-popup .list-page .list-body .list-ul li .li-trash a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}
body .layer-popup .list-page .list-body .list-ul li .li-trash a:hover {
    background: rgba(0, 0, 0, 0.06);
}
body .layer-popup .list-page .list-body .list-ul li .li-trash a.li-load-href:hover {
    color: var(--color-accent);
}
body .layer-popup .list-page .list-body .list-ul li .li-trash a.li-trash-href:hover {
    color: #e74c3c;
}
/* 빈 상태 */
body .layer-popup .list-page .list-body .list-ul li.li-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px 12px;
    color: var(--text-secondary);
    font-size: 14px;
    background: #fafafa;
    border-radius: 6px;
    border-bottom: 0;
    cursor: default;
}
body .layer-popup .list-page .list-body .list-ul li.li-empty:hover {
    background: #fafafa;
}
/* item-cnt — "N개의 TTS 멘트" */
body .layer-popup .list-page .list-body .list-tooltip #item-cnt {
    color: var(--text-primary);
    font-weight: 600;
}
/* 모달 안의 .filter — 컨테이너 작아서 padding 줄임 */
body .layer-popup .list-page .list-body .filter {
    padding: 8px 0 6px;
    font-size: 14px;
    color: var(--text-secondary);
}
body .layer-popup .list-page .list-body .filter .filter_txt {
    float: none;
    color: var(--text-secondary);
}