@charset "UTF-8";
html,
body {
	font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

body {
	background-color: #F7F8FC;
	overflow-x: hidden
}

/*이걸로 인해 rechaptcha 문제 생김
body {
-moz-transform: scale(0.85, 0.85); /* Moz-browsers */
/*이걸로 인해 rechaptcha 문제 생김  zoom: 0.85; /* Other non-webkit browsers */
/*이걸로 인해 rechaptcha 문제 생김 zoom: 85%; /* Webkit browsers */
/*이걸로 인해 rechaptcha 문제 생김 } */


.fast-sec .form-control:active,
.fast-sec .form-control:focus {
	border-color: var(--color1)
}


.fast-sec .form-group label {
	padding-left: 7px;
	margin-bottom: 4px;
	color: #555
}


/* dhs 부분 추가 영역 시작 */


.dash-home-status>.row {
	margin-left: -8px;
	margin-right: -8px;
}

.dash-home-status>.row>div {
	padding-left: 8px;
	padding-right: 8px;
}


/* dhs 영역 추가 끝 */

/*just패널 추가 시작*/


/*.brand-company .media:hover{ background:#F46B35; color:#fff;}*/
.brand-company .row{ margin-left:-5px; margin-right:-5px;}
.brand-company .row [class*=col-]{ padding-left:5px; padding-right:5px; margin-bottom:10px; /*flex:0 0 12.5%; max-width:12.5%;*/}
/*just패널 추가 끝*/

/*홈카테고리 시작*/


.dash-home-category-status>.row {
	margin-left: -8px;
	margin-right: -8px;
}

.dash-home-category-status>.row>div {
	padding-left: 8px;
	padding-right: 8px;
}


/*홈카테고리 끝*/
  
  
  
  

.body-pause {
	overflow: hidden;
}

.hidden {
	display: none
}

select,
option {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}

body.dark ::-webkit-scrollbar-thumb {
	background: #232842;
}

::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 5px;
}

::-webkit-scrollbar-track {
	background: transparent;
}


.btn-xs {
	padding: 5px;
	font-size: 12px
}

.dash-menu-btn {
	font-size: 22px;
	color: #1e293b;
	cursor: pointer;
}

.close-sidebar-btn {
	position: absolute;
	top: 20px;
	right: -50px;
	height: 50px;
	width: 50px;
	color: #1e6fda;
	background: #fff;
	line-height: 50px;
	text-align: center;
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;
	border-right: 1px solid #e5e7eb;
	border-bottom: 1px solid #e5e7eb;
	border-top: 1px solid #e5e7eb;
	display: none;
	cursor: pointer;
}

.app-sidebar {
	width: 240px;
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100vh;
	background-color: #fff;
	border-right: 1px solid #e5e7eb;
	box-shadow: none;
	z-index: 1029;
	-webkit-transition: .14s ease;
	transition: .14s ease;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}


.app-sidebar .sidebar-header {
	overflow: hidden;
	position: relative;
	padding-top: 20px;
	padding-bottom: 0px;
	text-align: center;
}

.app-sidebar.sidebar-inact .sidebar-header {
	padding-bottom: 10px
}

.app-sidebar .sidebar-header .logo-lg {
	display: inline-block;
	height: 40px;
}

.app-sidebar .sidebar-header .logo-sm {
	display: none;
	height: 60px;
}

.app-sidebar .sidebar-header .app-logo {
	width: 100%;
	text-align: center;
	position: relative;
}

.app-sidebar .sidebar-header>* {
	position: relative;
	z-index: 2;
}

.app-sidebar .sidebar-header .sh-bg {
	display: none;
}

.app-sidebar .sidebar-header .app-user {
	position: relative;
	padding: 20px 20px;
}

.app-sidebar .sidebar-header .app-user .user-name-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 10px;
	margin-bottom: 12px;
}
.app-sidebar .sidebar-header .app-user .user-name {
	font-size: 15px;
	text-align: center;
	font-weight: 600;
	color: #1e293b;
}
.user-copy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1.5px solid #d1d5db;
	border-radius: 6px;
	background: #fff;
	color: #94a3b8;
	font-size: 12px;
	cursor: pointer;
	transition: all 0.2s;
	padding: 0;
}
.user-copy-btn:hover {
	border-color: #1e6fda;
	color: #1e6fda;
	background: #f0f6ff;
}
body.dark .user-copy-btn {
	border-color: #3d4260;
	color: #64748b;
	background: #1a1b2e;
}
body.dark .user-copy-btn:hover {
	border-color: #1e6fda;
	color: #5a9be6;
}

.app-sidebar .sidebar-header .app-user .user-balance {
	border-radius: 10px;
	background: #1e6fda;
	color: #fff;
	padding: 10px 16px;
	line-height: 24px;
	font-size: 14px;
	font-weight: 600;
	border: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: .16s ease;
	transition: .16s ease;
	position: relative;
	letter-spacing: .4px;
	text-decoration: none!important;
	display: inline-block;
}

.app-sidebar .sidebar-header .app-user .user-balance:hover {
	-webkit-box-shadow: 0px 4px 16px rgba(30, 111, 218, 0.4);
	box-shadow: 0px 4px 16px rgba(30, 111, 218, 0.4);
}

.app-sidebar .sidebar-header .app-user .user-balance[data-second-text] {
	overflow: hidden;
}

.app-sidebar .sidebar-header .app-user .user-balance[data-second-text]::before {
	content: attr(data-second-text);
	position: absolute;
	left: 0px;
	width: 100%;
	top: 100%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	opacity: 0;
	color: #fff;
	-webkit-transition-delay: .16s;
	transition-delay: .16s;
	-webkit-transition: .16s ease;
	transition: .16s ease;
}

.app-sidebar .sidebar-header .app-user .user-balance[data-second-text]:hover {
	color: rgba(255, 255, 255, 0);
}

.app-sidebar .sidebar-header .app-user .user-balance[data-second-text]:hover::before {
	opacity: 1;
	top: 50%;
}

.app-sidebar .sidebar-content {
	padding: 12px 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	border-top: 1px solid #f1f5f9;
}

.app-sidebar .sidebar-content::-webkit-scrollbar {
	width: 4px;
}

.app-sidebar .sidebar-content::-webkit-scrollbar-track {
	background: transparent;
}

.app-sidebar .sidebar-content::-webkit-scrollbar-thumb {
	background: #eee;
	border-radius: 2px;
}

body.dark .app-sidebar .sidebar-content::-webkit-scrollbar-thumb {
	background: #232842;
}

.app-sidebar .sidebar-content::-webkit-scrollbar-thumb:hover {
	background: #ccc;
}

/* Sidebar Footer - 회사 정보 */
.sidebar-footer {
  margin-top: auto;
  padding: 16px;
  border-top: 1px solid #f1f5f9;
}
.sidebar-biz-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  padding: 4px 0;
}
.sidebar-biz-toggle i {
  font-size: 10px;
  transition: transform 0.3s;
}
.sidebar-footer.open .sidebar-biz-toggle i {
  transform: rotate(-180deg);
}
.sidebar-biz-info {
  display: none;
  padding: 12px 0 8px;
}
.sidebar-footer.open .sidebar-biz-info {
  display: block;
}
.sidebar-biz-info p {
  font-size: 12px;
  color: #94a3b8;
  margin: 0 0 6px;
  line-height: 1.5;
}
.sidebar-biz-info a {
  color: #1e6fda;
  text-decoration: none;
}
.sidebar-legal {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
  margin-top: 8px;
}
.sidebar-legal a {
  font-size: 11px;
  color: #94a3b8;
  text-decoration: none;
}
.sidebar-legal a:hover {
  color: #1e6fda;
}
.sidebar-legal span {
  font-size: 11px;
  color: #d1d5db;
}
body.dark .sidebar-footer {
  border-top-color: #1e293b;
}
body.dark .sidebar-biz-toggle {
  color: #94a3b8;
}
body.dark .sidebar-biz-info p {
  color: #64748b;
}
body.dark .sidebar-legal {
  border-top-color: #1e293b;
}
body.dark .sidebar-legal a {
  color: #64748b;
}

.app-sidebar .sidebar-menu {
	list-style: none;
	padding: 0px 12px;
	margin: 0px;
}

.app-sidebar .sidebar-menu li {
	display: block;
	margin-bottom: 4px;
}

.app-sidebar .sidebar-menu li.active>a.menu-link {
	background: rgba(30, 111, 218, 0.08);
	color: #1e6fda;
	font-weight: 600;
}

.app-sidebar .sidebar-menu li a.menu-link {
	padding: 11px 16px;
	border-radius: 10px;
	display: block;
	font-size: 14px;
	text-decoration: none;
	color: #475569;
	line-height: 22px;
	-webkit-transition: .14s ease;
	transition: .14s ease;
}

.app-sidebar .sidebar-menu li a.menu-link:hover {
	background: rgba(30, 111, 218, 0.06);
	color: #1e6fda;
}

.app-sidebar .sidebar-menu li a.menu-link .menu-icon {
	margin-right: 10px;
	height: 20px;
	width: 20px;
	line-height: 20px;
	text-align: center;
	font-size: 16px;
	vertical-align: -2px;
}

.app-header {
	top: 0px;
	left: 240px;
	right: 0px;
	z-index: 1003;
	background: #fff;
	border-bottom: 1px solid #e5e7eb;
	border-left: none;
	height: 60px;
	position: fixed;
}

.app-header .row-100 {
	height: 60px;
}


.app-header-ticker {
	overflow: hidden;
	gap: 10px;
}

.app-header .hea-ann-title {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-width: 32px;
	border-radius: 8px;
	background: #1e6fda;
	color: #fff;
	font-size: 14px;
}

.app-header-balance {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background: linear-gradient(135deg, #1e6fda, #1557b0);
	color: #fff;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	margin-right: 8px;
	white-space: nowrap;
}
.app-header-balance:hover {
	color: #fff;
	text-decoration: none;
	opacity: 0.9;
}
.app-header-balance i {
	font-size: 14px;
}

.app-header-actions {
	gap: 4px;
}

.app-header .header-btn {
	font-size: 15px;
	font-weight: 400;
	color: #475569;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.app-header .header-btn:hover .icon {
	background: #f1f5f9;
	color: #1e6fda;
}

.app-header .header-btn .icon {
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	font-size: 17px;
	border-radius: 10px;
	color: #475569;
	transition: all .2s ease;
}

.container-fluid {
	padding: 0 50px;
}

.dhr-marquee {
	color: #64748b;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .3px;
	line-height: 1.5;
	margin: 0px;
	padding: 0px;
	flex: 1;
}


.d-card {
	border-radius: 14px;
	background-color: #fff;
	color: #1e293b;
	border: 1px solid #e5e7eb;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.d-card.dc-blue {
	background: linear-gradient(135deg, #1e6fda, #1557b0);
	color: #fff;
	border: none;
}

.d-card.dc-orange {
	background: linear-gradient(135deg, #5a9be6, #1e6fda);
	color: #fff;
	border: none;
}

.d-card .d-card-head {
	padding: 16px 4px 16px 4px;
	margin: 0 24px;
	position: relative;
	font-weight: 600;
	color: #1e293b;
	font-size: 16px;
	letter-spacing: .2px;
}

.d-card .d-card-head::after {
	content: '';
	position: absolute;
	bottom: 0px;
	width: 120px;
	z-index: 4;
	left: 0px;
	height: 2px;
	background: #1e6fda;
}

.d-card .d-card-head .dch-icon {
	height: 42px;
	width: 42px;
	text-align: center;
	line-height: 42px;
	display: inline-block;
	margin-right: 10px;
}

.d-card .d-card-head .dch-icon img {
	height: 42px;
}

.d-card .d-card-body {
	padding: 16px 24px 16px 24px;
}

.d-card.d-pad {
	padding: 34px 30px;
}

.d-card.d-pad-2 {
	padding: 20px 30px;
}


.app-content {
	background-color: #f8f9fc;
	padding-left: 240px;
	padding-top: 60px;
	padding-bottom: 30px;
}

.order-side {
	margin-top: 16px
}


.form-group .form-control {
	border: 1px solid #e5e7eb;
	outline: none;
	background-color: #f8f9fc;
	color: #1e293b;
	font-size: 14px;
	font-weight: 500;
	min-height: 48px;
	overflow: hidden;
	padding: 10px 16px;
	border-radius: 10px;
	transition: border-color 0.2s ease;
}

.form-group .form-control:focus {
	border-color: #5a9be6;
	box-shadow: 0 0 0 3px rgba(30, 111, 218, 0.1);
}

.form-group .form-control {
	outline: none;
	box-shadow: none;
}

.form-group .form-control::-webkit-input-placeholder {
	color: rgba(70, 78, 119, 0.8);
}

.form-group .form-control:-ms-input-placeholder {
	color: rgba(70, 78, 119, 0.8);
}

.form-group .form-control::-ms-input-placeholder {
	color: rgba(70, 78, 119, 0.8);
}

.form-group .form-control::placeholder {
	color: #94a3b8;
}

.form-group.fg-ly .input-group .input-group-prepend .input-group-text {
	background: #FF9B5C !important;
}

.form-group.fg-lb .input-group .input-group-prepend .input-group-text {
	background: #214AF0 !important;
}

.form-group .input-group .input-group-prepend .input-group-text {
	background: #1e6fda;
	color: #fff;
	outline: none;
	border: none;
	text-align: center;
	width: 52px;
}

.form-group .input-group .input-group-prepend .input-group-text i {
	width: 100%;
	text-align: center;
}

.form-group label {
	color: #1e293b;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 8px;
}

.form-group.fg-for-login label {
	color: #fff;
}

.form-group.fg-for-login .form-control {
	background-color: #edeef2;
	color: #444;
}

.form-group.fg-for-login .form-control::-webkit-input-placeholder {
	color: rgba(0, 0, 0, 0.6);
}

.form-group.fg-for-login .form-control:-ms-input-placeholder {
	color: rgba(0, 0, 0, 0.6);
}

.form-group.fg-for-login .form-control::-ms-input-placeholder {
	color: rgba(0, 0, 0, 0.6);
}

.form-group.fg-for-login .form-control::placeholder {
	color: rgba(0, 0, 0, 0.6);
}


.profile-box.box-1 .btn {
	color: #1e6fda !important;
}


.profile-box.box-2 .btn {
	color: #1557b0 !important;
}

.alert {
	border: none;
	outline: none;
	font-size: 14px;
	font-weight: 400;
	padding: 20px 30px;
}

.alert.alert-success {
	background-color: #ffc519;
    color: #000000 !important;
}

.alert.alert-danger {
	background-color: #ff1200;
    color: #ffffff;
}

.btn {
	padding: 14px 24px;
	border: none;
	border-radius: 10px;
	font-weight: 600;
	font-size: 15px;
	-webkit-transition: .14s ease;
	transition: .14s ease;
}

.btn.btn-primary {
	background: #1e6fda;
	border-color: #1e6fda;
}

.btn.btn-primary:hover {
	background: #1557b0;
	border-color: #1557b0;
}

.btn.btn-light {
	color: #1e6fda;
	background: #fff;
}

.btn.btn-secondary {
	background: #1557b0;
	border-color: #1557b0;
}

.btn.btn-secondary:hover {
	background: #007bff;
	transition: 300ms all
}

.btn.btn-purple {
	background: linear-gradient(90deg, var(--c1, rgb(236, 7, 199)), var(--c2, rgb(188, 0, 158)) 51%, var(--c1, rgb(19, 139, 255))) var(--x, 0)/ 200%;
	color: #fff
}

.btn.btn-lg {
	font-size: 17px;
	padding: 12px 34px;
	font-weight: 500;
}

.btn.btn-outline {
	padding: 12px 30px;
	border: 2px solid #fff;
	color: #fff;
	background: transparent;
}

.btn.btn-outline:hover {
	background: #fff;
	color: #181818;
}

.tab-pane .notification {
	padding: 0;
	list-style: none;
}

.tab-pane .notification li {
	display: flex;
	align-items: flex-start;
	border: 1px solid #f1f5f9;
	border-radius: 10px;
	padding: 14px;
	margin-bottom: 10px;
	background: #f8f9fc;
	transition: border-color 0.2s;
}

.tab-pane .notification li:hover {
	border-color: #5a9be6;
}


.tab-pane .notification li .date {
	color: #94a3b8;
	font-size: 12px;
	margin-bottom: 0;
}

.tab-pane .notification li .title {
	font-size: 14px;
	font-weight: 600;
}

.tab-pane .notification li .title a {
	color: #1e293b;
	text-decoration: none;
}

.tab-pane .notification li .title a:hover {
	color: #1e6fda;
}

.tab-pane .notification li .text {
	color: #64748b;
	font-size: 12px;
	font-weight: 400;
	margin-top: 6px;
	line-height: 1.5;
}

.home-body {
	background: #F7F8FC;
	max-width: 100%;
	overflow-x: hidden;
}

.header {
	height: 100px;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	z-index: 1000;
	margin-top: 30px;
}


.container {
	max-width: 1200px;
}

.text-primary {
	color: #3E3F5E !important;
}


.input-group-btn .dropdown-menu {
	left: auto;
	right: 0;
	width: 350px;
	border: 1px solid #ccc;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 4px;
	-webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
	box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
}

.input-group-btn .dropdown-menu>li>a {
	display: block;
	padding: 3px 20px;
	clear: both;
	font-weight: normal;
	line-height: 1.42857143;
	color: #333;
	white-space: nowrap;
	text-decoration: none
}

.input-group-btn .dropdown-menu>li>a:hover {
	color: #1e6fda;
}

.table td {
	border-bottom: 1px solid #f1f5f9;
}

.table td,
.table th {
	border-top: none;
}

.table thead {
	font-size: 13px;
	color: #64748b;
	font-weight: 600;
}

.table tbody {
	font-size: 14px;
	color: #1e293b;
	letter-spacing: .2px;
	font-weight: 400;
}


.faq-ss-tabs .home-ss-tab {
	position: relative;
	cursor: pointer;
	background: transparent;
	color: #151722;
	background-color: #fff;
	padding: 28px 20px 28px 20px;
	-webkit-transition: .2s ease;
	transition: .2s ease;
	margin-bottom: 14px;
	border-radius: 12px;
}

.faq-ss-tabs .home-ss-tab .fa-minus {
	display: none;
}

.faq-ss-tabs .home-ss-tab.active {
	background: #1e6fda;
	color: #fff;
}

.faq-ss-tabs .home-ss-tab.active .ss-tab-head {
	color: #fff;
}

.faq-ss-tabs .home-ss-tab.active .ss-tab-head .right-p {
	color: #fff;
}

.faq-ss-tabs .home-ss-tab.active .fa-minus {
	display: block;
}

.faq-ss-tabs .home-ss-tab.active .fa-plus {
	display: none;
}

.faq-ss-tabs .home-ss-tab .ss-tab-head {
	font-size: 20px;
	font-weight: 500;
	color: #151722;
}

.faq-ss-tabs .home-ss-tab .ss-tab-head .right-p {
	color: #151722;
	font-size: 24px;
	height: 30px;
	line-height: 30px;
}

.faq-ss-tabs .home-ss-tab .ss-tab-content {
	display: none;
	padding-top: 12px;
	color: #fff;
	font-size: 16px;
	line-height: 170%;
	padding-bottom: 8px;
}

.tos-navs .nav-item {
	display: inline-block;
}

.tos-navs .nav-item.nav-link {
	-webkit-transition: .2s ease;
	transition: .2s ease;
	text-align: center;
	margin: 0 10px;
	position: relative;
	line-height: 30px;
	font-size: 16px;
	min-width: 200px;
	font-weight: 600;
	padding: 18px 23px;
	margin-bottom: 20px;
	background-color: rgb(36, 43, 53, 0.1);
	color: rgb(36, 43, 53, 1);
	border-radius: 5px;
	font-size: 600;
}

.tos-navs .nav-item.nav-link.active {
	background-color: #262a36;
	color: #fff;
}

.tos-navs .nav-item.nav-link:hover {
	-webkit-box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.14);
	box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.14);
}

pre.code {
	border-radius: 10px;
	background-color: rgb(36, 43, 53, 0.1);
	color: rgb(36, 43, 53, 1);
	padding: 24px;
}

@media (max-width: 767.98px) {
	.container-fluid {
		margin-bottom: 100px;
		padding: 0 15px !important;
	}
	
	
	
	
	
	
	.app-sidebar {
		left: -240px;
	}
	.app-sidebar.sidebar-inact {
		width: 240px;
		left: 0px;
	}
	.app-sidebar.sidebar-inact .close-sidebar-btn {
		display: block;
	}
	.app-sidebar.sidebar-inact .sidebar-header .logo-lg {
		display: inline-block;
	}
	.app-sidebar.sidebar-inact .sidebar-header .logo-sm {
		display: none;
	}
	.app-sidebar.sidebar-inact .app-user {
		padding: 20px 16px !important;
	}
	.app-sidebar.sidebar-inact .app-user .user-name {
		display: block;
	}
	.app-sidebar.sidebar-inact .app-user .user-balance {
		display: inline-block;
	}
	.app-sidebar.sidebar-inact .sidebar-menu li a.menu-link {
		padding: 11px 16px;
		text-align: left;
	}
	.app-sidebar.sidebar-inact .sidebar-menu li a.menu-link .menu-icon {
		width: 20px;
		height: 20px;
	}
	.app-sidebar.sidebar-inact .sidebar-menu li a.menu-link .menu-text {
		display: inline-block;
	}
	.app-sidebar .sidebar-header .logo-lg {
		display: none;
	}
	.app-sidebar .sidebar-header .logo-sm {
		display: none;
	}
	.app-sidebar .app-user {
		padding: 0px 10px !important;
	}
	
	
	
	
	.app-sidebar .app-user .user-name {
		display: none;
	}
	.app-sidebar .app-user .user-balance {
		display: none;
	}
	.app-sidebar .sidebar-menu li a.menu-link {
		padding: 11px 0px;
		text-align: center;
	}
	.app-sidebar .sidebar-menu li a.menu-link .menu-icon {
		width: 100%;
	}
	.app-sidebar .sidebar-menu li a.menu-link .menu-text {
		display: none;
	}
	.app-content {
		padding-left: 0px !important;
	}
	.app-header {
		left: 0px !important;
	}
	
	
	
	
	.order-side {
		margin-top: 0
	}
	.d-card .d-card-body {
		padding: 15px
	}
	.p0 {
		padding: 0!important
	}
	
	.input-group-btn .dropdown-menu>li>a {
		font-size: 12px
	}
	#orderDetail {
		padding: 10px;
	}
	#orderDetail .card .card-header .btn-header-link {
		padding: 12px 14px;
	}
	
	
	
	
	#orderDetail .card small {
		font-size: 11px;
	}
	#orderDetail .card-body {
		padding: 10px 14px;
	}
	#orderDetail .card-body ul li {
		font-size: 11px!important;
	}
	.orderNav {
		padding: 10px;
	}
	.orderNav li {
		width: 49%;
		margin: 0 1%;
		margin-right: auto!important;
	}
	.dfb-search .dfb-input {
		min-width: auto;
		width: calc(100% - 40px);
	}
	.pagination {
		flex-wrap: wrap;
		gap: 4px;
	}
	.pagination li a {
		padding: 6px 10px;
		font-size: 12px;
	}
	.table-responsive {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.table {
		font-size: 12px;
	}
	.table thead {
		font-size: 11px;
	}
	
	.auth-order-card .d-card-body {
		padding: 14px 16px;
	}
	
	.dash-list {
		margin-top: 0!important;
	}
	.orders-btn {
		padding-bottom: 0!important;
	}
	.app-header {
		height: 56px
	}
	.app-header .row-100 {
		height: 56px
	}
	
	
	.app-header-balance {
		padding: 5px 10px;
		font-size: 12px;
		margin-right: 4px;
	}
	.app-header-balance span {
		display: none;
	}
	.app-header-balance i {
		font-size: 14px;
	}
	.app-header .header-btn .icon {
		width: 32px;
		height: 32px;
		font-size: 15px;
	}
	.d-card .d-card-head {
		font-size: 14px;
		margin: auto
	}
	.text-style-2 {
		font-size: 12px
	}
	.faq-ss-tabs .home-ss-tab .ss-tab-head {
		font-size: 15px;
		font-weight: 400
	}
	.faq-ss-tabs .home-ss-tab .ss-tab-content {
		font-size: 13px
	}
	.app-sidebar.sidebar-inact .sidebar-header {
		padding-bottom: 0
	}
	.app-sidebar .sidebar-content {
		padding: 0 0 20px 0
	}
	.app-sidebar .sidebar-menu {
		padding-bottom: 50px;
		margin-top: 25px;
	}
	.tos-navs .nav-item.nav-link {
		width: 100%
	}
}

@media (max-width: 1199.98px) {
	.app-sidebar .sidebar-header .sh-bg {
		background: transparent
	}
	.register-page .register-page-content {
		padding: 25px 0 100px 0!important
	}
	.register-left .rl-text {
		margin-bottom: 25px!important
	}
	
	.home-head {
		padding: 100px 0 0!important
	}
	.home-head,
	.ha-item {
		overflow: hidden
	}
	.home-head .home-head-bg {
		right: -20%!important
	}
	.container-fluid {
		padding: 0 30px;
	}
	.app-sidebar {
		width: 64px;
	}
	/* 접힌 사이드바(64px)에선 사업자정보/약관 푸터 숨김 (글자 단위 줄바꿈 깨짐 방지) */
	.app-sidebar .sidebar-footer {
		display: none;
	}
	.app-sidebar.sidebar-inact {
		width: 240px;
	}
	.app-sidebar.sidebar-inact .sidebar-footer {
		display: block;
	}
	.app-sidebar.sidebar-inact .close-sidebar-btn {
		display: block;
	}
	.app-sidebar.sidebar-inact .sidebar-header .logo-lg {
		display: none;
	}
	.app-sidebar.sidebar-inact .sidebar-header .logo-sm {
		display: none;
	}
	.app-sidebar.sidebar-inact .app-user {
		padding: 0 10px !important;
	}
	.app-sidebar.sidebar-inact .app-user .user-name {
		display: block;
	}
	.app-sidebar.sidebar-inact .app-user .user-balance {
		display: block;
	}
	.app-sidebar.sidebar-inact .sidebar-menu li a.menu-link {
		padding: 11px 16px;
		text-align: left;
	}
	.app-sidebar.sidebar-inact .sidebar-menu li a.menu-link .menu-icon {
		width: 20px;
		height: 20px;
	}
	.app-sidebar.sidebar-inact .sidebar-menu li a.menu-link .menu-text {
		display: inline-block;
	}
	.app-sidebar .sidebar-header .logo-lg {
		display: none;
	}
	.app-sidebar .sidebar-header .logo-sm {
		display: inline-block;
	}
	.app-sidebar .app-user {
		padding: 0px 10px !important;
	}
	.app-sidebar .app-user .user-name {
		display: none;
	}
	.app-sidebar .app-user .user-balance {
		display: none;
	}
	.app-sidebar .sidebar-menu li a.menu-link {
		padding: 11px 0px;
		text-align: center;
	}
	.app-sidebar .sidebar-menu li a.menu-link .menu-icon {
		width: 100%;
	}
	.app-sidebar .sidebar-menu li a.menu-link .menu-text {
		display: none;
	}
	.app-content {
		padding-left: 64px;
	}
	.app-header {
		left: 64px;
	}
}

@media (max-width: 1500.98px) {
	.container-fluid {
		padding: 0px 25px;
	}
}

@media (min-width: 1199.98px) {
	.app-sidebar.sidebar-inact {
		width: 64px;
	}
	.app-sidebar.sidebar-inact .sidebar-header .logo-lg {
		display: none;
	}
	.app-sidebar.sidebar-inact .sidebar-header .logo-sm {
		display: inline-block;
	}
	.app-sidebar.sidebar-inact .app-user {
		padding: 0px 10px !important;
	}
	.app-sidebar.sidebar-inact .app-user .user-name {
		display: none;
	}
	.app-sidebar.sidebar-inact .app-user .user-balance {
		display: none;
	}
	.app-sidebar.sidebar-inact .sidebar-menu li a.menu-link {
		padding: 11px 0px;
		text-align: center;
	}
	.app-sidebar.sidebar-inact .sidebar-menu li a.menu-link .menu-icon {
		width: 100%;
	}
	.app-sidebar.sidebar-inact .sidebar-menu li a.menu-link .menu-text {
		display: none;
	}
	.app-content.sidebar-inact {
		padding-left: 64px;
	}
	.app-header.sidebar-inact {
		left: 64px;
	}
	/* 접힌 사이드바(64px)에선 사업자정보/약관 푸터 숨김 (글자 단위 줄바꿈 깨짐 방지) */
	.app-sidebar.sidebar-inact .sidebar-footer {
		display: none;
	}
}

.dropdown-menu {
	width: 100%;
	padding: 4px;
	max-height: 43.6vh;
	overflow-y: auto;
	border: 1px solid #e5e7eb !important;
	border-radius: 10px;
	margin-top: 8px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

#order-sItem,
#order-cItem {
	white-space: inherit;
	padding: 10px 14px;
	font-weight: 500;
	font-size: 13px;
	background: #fff;
	border-bottom: 1px solid #f1f5f9;
	color: #1e293b;
	text-align: left;
	width: 100%;
	border-radius: 6px;
}

#order-sItem:hover,
#order-cItem:hover {
	background: rgba(30, 111, 218, 0.06);
	color: #1e6fda;
}

#order-category,
#order-services {
	white-space: nowrap;
	text-overflow: ellipsis;
}

#order-category,
#order-services {
	width: 85%;
	overflow-x: hidden;
	position: absolute;
	line-height: 15px;
	height: 24px;
	font-size: 14px;
}

.dropdown button {
	background: #fff;
	border: 1px solid #fff;
	border-top: none!important;
	color: #081521
}

.dropdown button:hover,
.dropdown button:focus {
	outline: none;
	box-shadow: none;
}

.dropdown-menu {
	transform: translate3d(5px, 35px, 0px)!important;
}

.fab.fa-instagram {
	background: #e1306c;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 18px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	border-radius: 5px;
	margin-right: 10px;
}


.fas.fa-cog.fa-spin {
	background: #000;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 18px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	border-radius: 5px;
	margin-right: 10px;
}


.fab.fa-youtube {
	background: #000;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fab.fa-twitter {
	background: #1da1f2;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fab.fa-telegram-plane {
	background: #2b9fd2;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fab.fa-neos {
	background: #0fd34d;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fas.fa-globe-asia { /* traffic */
	background: #25c100;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fas.fa-comments { /* comments */
	background: #a04000;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fab.fa-soundcloud {
	background: #ff5836;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fab.fa-spotify {
	background: #62ffa2;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fab.fa-twitch {
	background: #e600ff;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fab.fa-pinterest-p {
	background: #ff5858;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fa.fa-music {
	background: #f8004d;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fas.fa-times-circle {
	background: #ff0000;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fab.fa-tiktok {
	background: #ff0000;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fas.fa-warehouse {
	background: #a62eb1;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fas.fa-comments {
	background: #551212;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fas.fa-globe {
	background: #1a1a1a;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fas.fa-stream {
	background: #ccc;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}


.nav-pills.fastside .nav-link.active,
.nav-pills .show>.nav-link {
	background: #1e6fda;
	color: #fff
}

.panel-body {
	background-color: #f8f9fc;
	color: #1e293b;
	font-size: 13px;
	border-radius: 10px;
	padding: 14px 16px;
	border: 1px solid #e5e7eb;
	line-height: 1.6;
}

.app-navbar {
	display: none;
	height: 70px;
	bottom: 0px;
	left: 0px;
	width: 100%;
	background: #fff;
	position: fixed;
	z-index: 1000;
	padding: 0;
	-webkit-box-shadow: 0 5px 50px rgb(0 0 0 / 18%);
	box-shadow: 0 5px 50px rgb(0 0 0 / 25%);
}
.app-navbar>.row {
	height: 70px;
}

.app-navbar .navbar-mid-icon {
	margin-top: -40px;
	margin-left: -5px
}


.app-navbar a.active .navbar-texts {
	color: #1e6fda;
}

.app-navbar a.active i {
	color: #1e6fda
}

.app-navbar i {
	color: #202020
}

.app-navbar .navbar-texts {
	font-size: 10px;
	font-weight: 500;
	color: #202020;
	display: block;
	margin-top: 6px;
}


.modal-header {
	background: #1e6fda;
}

.modal-header h4 {
	font-size: 13px;
	color: #fff
}

.modal-body {
	font-size: 13px;
}

#orderDetail .card {
	margin-bottom: 8px;
	border: 1px solid #f1f5f9;
	border-radius: 10px;
	overflow: hidden;
}


#orderDetail .card .card-header .btn-header-link {
	display: block;
	text-align: left;
	cursor: pointer;
	color: #1e293b;
	border: none;
	padding: 14px 24px;
	text-decoration: none;
}

#orderDetail .card .card-header .btn-header-link:after {
	content: "\f107";
	font-family: 'Font Awesome 5 Pro';
	font-weight: 900;
	position: absolute;
	right: 14px;
	top: 25px;
	color: #1e6fda;
}

#orderDetail .card .card-header .btn-header-link.collapsed:after {
	content: "\f106";
}

#orderDetail .card .collapsing {
	background: #fff;
}

#orderDetail .card .collapse.show {
	background: #fff;
	line-height: 26px;
	color: #1e293b;
	border-top: 1px solid #f1f5f9;
}


#orderDetail .card-body {
	padding: 12px 24px;
}

#orderDetail .card-body ul {
	padding-left: 0;
	margin-bottom: 0;
}

#orderDetail .card-body ul li {
	list-style-type: none;
	font-size: 13px;
	padding: 6px 0;
	border-bottom: 1px solid #f8f9fc;
	color: #475569;
}

#orderDetail .card-body ul li:last-child {
	border-bottom: none;
}

#orderDetail .card-body ul li strong {
	color: #1e293b;
}

#orderDetail .card-body ul li a {
	color: #1e6fda;
	word-break: break-all;
}

#orderDetail .card-body .order-actions .btn {
	padding: 6px 16px;
	font-size: 12px;
	border-radius: 8px;
}

.orderNav li a {
	background-color: rgba(30, 111, 218, 0.06);
	color: #475569;
	padding: 10px 12px;
	font-size: 12px;
	font-weight: 600;
	border: none;
	outline: none;
	border-radius: 10px;
	cursor: pointer;
	-webkit-transition: .15s ease;
	transition: .15s ease;
	min-height: 38px;
	display: inline-block;
	margin-bottom: 4px;
	width: 100%;
	text-decoration: none
}

.orderNav li a.active,
.orderNav li a:hover {
	background: #1e6fda;
	color: #fff
}

.orderNav li:last-child {
	margin-left: auto;
}

.dfb-search {
	background-color: #f8f9fc;
	color: #475569;
	font-size: 12px;
	border: 1px solid #e5e7eb;
	outline: none;
	border-radius: 10px;
	cursor: pointer;
	-webkit-transition: .15s ease;
	transition: .15s ease;
	min-height: 40px;
	position: relative;
	overflow: hidden;
}

.dfb-search .dfb-input {
	width: calc(100% - 40px);
	background: transparent;
	border: none;
	outline: none;
	height: 40px;
	color: #202020;
	padding: 0 14px;
	min-width: 250px
}

.dfb-search i {
	color: #fff
}

.dfb-search .dfb-submit {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border: none;
	border-radius: 0 10px 10px 0;
	background: #1e6fda;
	color: #fff;
}


.ticket-message-right .ticket-message {
	background: rgba(30, 111, 218, 0.08);
	border-radius: 12px;
	padding: 16px;
}

.ticket-message-left .ticket-message {
	background: #f8f9fc;
	border-radius: 12px;
	padding: 16px;
}

.ref-item {
	border-bottom: 1px solid #f5f5f5;
	padding: 15px 0
}

.ref-item.d-blue {
	background: rgba(30, 111, 218, 0.06);
	border-radius: 12px;
	padding: 15px 25px;
	color: #1557b0;
}

.ref-item i {
	color: #1e6fda;
	font-size: 20px;
}

.ref-item .the-title {
	font-weight: bold
}


#sssTab .faq-ss-tabs .home-ss-tab {
	padding: 10px 16px;
	border-bottom: 1px solid #f1f5f9;
	margin-bottom: 0;
	border-radius: 0;
}

#sssTab .home-ss-tab .col {
	font-size: 14px;
}

#sssTab .faq-ss-tabs .home-ss-tab .ss-tab-head .right-p {
	font-size: 14px;
	color: #1e6fda;
}


/* dark mod */

.darkMode {
	background: transparent;
	box-shadow: none;
	border: none;
	outline: 0;
}

.darkMode:focus {
	background: transparent;
	box-shadow: none;
	border: none;
	outline: 0
}

.darkMode i {
	height: 34px;
	display: inline-block;
	width: 34px;
	font-size: 19px;
	line-height: 34px;
	text-align: center;
	-webkit-transition: .14s ease;
	transition: .14s ease;
}

.darkMode i.fa-moon {
	color: rgba(255, 106, 39, 1)
}

.darkMode i.fa-sun span {
	color: #fff
}

.darkMode i.fa-sun {
	color: #ffbf00
}

.darkMode i span {
	color: #404040
}

body i.fa-moon,
body.light i.fa-moon {
	display: block
}

body i.fa-sun,
body.light i.fa-sun {
	display: none
}

body.dark i.fa-moon {
	display: none
}

body.dark i.fa-sun {
	display: block
}

body.dark,
body.dark .app-content {
	background: #0f1017
}

body.dark .app-sidebar {
	background: #151722
}

body.dark .app-header {
	background: #151722;
	border-left: none;
	border-bottom: 1px solid #232842;
}

body.dark .app-header-balance {
	background: linear-gradient(135deg, #1e6fda, #1557b0);
}
body.dark .app-header .header-btn .icon {
	color: #94a3b8;
}
body.dark .app-header .header-btn:hover .icon {
	background: #1e293b;
	color: #5a9be6;
}
body.dark .dhr-marquee {
	color: #94a3b8;
}

body.dark .app-sidebar .sidebar-menu li a.menu-link {
	color: #efefef
}

body.dark .app-sidebar .sidebar-menu li.active>a.menu-link {
	background: rgba(30, 111, 218, 0.15);
	color: #5a9be6;
	font-weight: 600;
}

body.dark .app-sidebar .sidebar-menu li a.menu-link:hover {
	background: rgba(30, 111, 218, 0.1);
	color: #5a9be6;
}

body.dark .app-sidebar .sidebar-header .app-user .user-name {
	color: #e2e8f0;
}

body.dark .app-navbar {
	background: #0f1017;
	-webkit-box-shadow: 0 5px 50px rgb(46 48 63);
	box-shadow: 0 5px 50px rgb(46 48 63);
}

body.dark .app-navbar i,
body.dark .app-navbar .navbar-texts {
	color: #fff;
}

body.dark .app-navbar a.active i,
body.dark .app-navbar a.active .navbar-texts {
	color: #5a9be6;
}

body.dark .app-header .hea-ann-title {
	background: #1e6fda;
}

body.dark .close-sidebar-btn {
	background: #151722;
	border-color: #0f1017;
}

body.dark .d-card {
	background: #151722;
	color: #fff;
	border-color: #232842;
}

body.dark .form-group .form-control,
body.dark .panel-body {
	background: #13151e;
	color: #7f89b7
}

body.dark .form-group label {
	color: #fff
}


body.dark .nav-pills.fastside .nav-link.active,
body.dark .nav-pills .show>.nav-link {
	background: #1e6fda;
	color: #fff
}

body.dark .tab-pane .notification li {
	background: #0f1017;
	border-color: #0f1017
}

body.dark .tab-pane .notification li .text,
body.dark .tab-pane .notification li .title a {
	color: #7f89b7
}

body.dark .tab-pane .notification li .date {
	color: #64748b;
}

body.dark #order-sItem,
body.dark #order-cItem {
	background: #13151e;
	color: #7f89b7;
	border-color: #232842
}

body.dark #order-sItem:hover,
body.dark #order-cItem:hover {
	background: #232842;
}

body.dark .table td,
body.dark .table thead th {
	border-color: #0f1017
}

body.dark .table tbody {
	color: #fff
}


body.dark .input-group-btn .dropdown-menu {
	background: #0f1017;
}

body.dark .input-group-btn .dropdown-menu a {
	color: #7f89b7
}


body.dark .form-group .input-group .input-group-prepend .input-group-text {
	background: #1a1b2e;
	border-color: #232842;
	color: #94a3b8;
}

body.dark .orderNav li a {
	background: rgba(30, 111, 218, 0.15);
	color: #5a9be6;
}

body.dark .orderNav li a.active,
body.dark .orderNav li a:hover {
	background: #1e6fda;
	color: #fff
}

body.dark .dfb-search {
	background: #1a1b2e;
	border-color: #2d2f45;
}

body.dark .dfb-search .dfb-input {
	background: transparent;
	color: #e2e8f0;
}

body.dark .dfb-search .dfb-submit {
	background: #1e6fda;
}

body.dark .card {
	background: #0f1017;
	border-radius: 10px!important;
}

body.dark #orderDetail .card {
	border-color: #2d2f45;
}


body.dark #orderDetail .card .card-header .btn-header-link {
	color: #e2e8f0;
}


body.dark #orderDetail .card .card-header .btn-header-link:after {
	color: #5a9be6;
}

body.dark #orderDetail .card-body,
body.dark #orderDetail .card .collapse.show {
	background: #0f1017;
	color: #e2e8f0;
	border-color: #2d2f45;
}

body.dark #orderDetail .card-body ul li {
	border-color: #1a1b2e;
	color: #94a3b8;
}

body.dark #orderDetail .card-body ul li strong {
	color: #e2e8f0;
}

body.dark #orderDetail .card-body ul li a {
	color: #5a9be6;
}

body.dark .pagination li a {
	background: #1a1b2e;
	border-color: #2d2f45;
	color: #94a3b8;
}

body.dark .pagination li.active a,
body.dark .pagination li a.active {
	background: #1e6fda;
	border-color: #1e6fda;
	color: #fff;
}

body.dark .pagination li a:hover:not(.active) {
	background: rgba(30, 111, 218, 0.2);
	border-color: #1e6fda;
	color: #5a9be6;
}

body.dark .ref-item,
body.dark .table-bordered {
	border-color: #0f1017
}

body.dark .ref-item.d-blue {
	background: rgba(30, 111, 218, 0.15);
	color: #5a9be6;
}

body.dark .ref-item i {
	color: #5a9be6;
}

body.dark .ticket-message-right .ticket-message {
	background: rgba(30, 111, 218, 0.15);
}

body.dark .ticket-message-left .ticket-message {
	background: #1a1b2e;
}

body.dark .d-card .d-card-head {
	color: #e2e8f0;
}

body.dark .dc-blue {
	background: linear-gradient(135deg, #1e6fda, #1557b0);
	color: #fff;
}

body.dark .dc-orange {
	background: linear-gradient(135deg, #5a9be6, #1e6fda);
	color: #fff;
}

body.dark pre.code {
	background: rgba(30, 111, 218, 0.1);
	color: #5a9be6;
}

body.dark .faq-ss-tabs .home-ss-tab {
	background: #151722;
}

body.dark .faq-ss-tabs .home-ss-tab .col {
	color: #fff!important
}

body.dark .faq-ss-tabs .home-ss-tab .ss-tab-head .right-p {
	color: #64748b;
}

body.dark .modal-body,
body.dark .modal-footer {
	background: #0f1017;
	color: #7f89b7;
}

body.dark .modal-header,
body.dark .modal-footer {
	border-color: #232842
}

body.dark .card-box-top p {
	color: #fff
}


body.dark .tos-navs .nav-item.nav-link {
	background: rgba(30, 111, 218, 0.15);
	color: #5a9be6;
}

body.dark .tos-navs .nav-item.nav-link.active {
	background: #1e6fda;
	color: #fff;
}

body.dark #sssTab .faq-ss-tabs .home-ss-tab {
	border-color: #232842;
}

body.dark .form-group .form-control:focus {
	border-color: #1e6fda;
	background: #1a1b2e;
}

body.dark .form-group .input-group .input-group-prepend .input-group-text {
	background: #1a1b2e;
	border-color: #232842;
	color: #7f89b7;
}


body.dark .btn.btn-primary {
	background: linear-gradient(135deg, #1e6fda, #1557b0);
}

body.dark .btn.btn-outline {
	background: rgba(30, 111, 218, 0.1);
	color: #5a9be6;
	border-color: #1e6fda;
}

body.dark .btn.btn-default.btn-xs {
	background: #1a1b2e;
	color: #94a3b8;
	border-color: #2d2f45;
}

body.dark .alert-success {
	background: rgba(34, 197, 94, 0.15);
	color: #4ade80;
	border: none;
}

body.dark .alert-danger {
	background: rgba(239, 68, 68, 0.15);
	color: #f87171;
	border: none;
}

body.dark .faq-ss-tabs .home-ss-tab .ss-tab-head .right-p {
	color: #5a9be6;
}

body.dark .faq-ss-tabs .home-ss-tab .ss-tab-content {
	color: #e2e8f0;
}


body.dark .table thead {
	color: #7f89b7;
}

body.dark .table a {
	color: #5a9be6;
}

body.dark .dash-menu-btn {
	color: #e2e8f0;
}

body.dark .app-header .header-btn {
	color: #94a3b8;
}

body.dark .app-header .header-btn:hover .icon {
	background: rgba(30, 111, 218, 0.1);
	color: #5a9be6;
}

body.dark .paginations .link {
	background: #1a1b2e;
	border-color: #2d2f45;
	color: #94a3b8;
}

body.dark .paginations .link.active {
	background: #1e6fda;
	color: #fff;
	border-color: #1e6fda;
}

.home-body {
	background: #F7F8FC;
	max-width: 100%;
	overflow-x: hidden;
}

.home-head {
	position: relative;
	padding: 50px 0 100px;
}

.home-head.outside {
	height: 200px
}

.home-head .home-head-bg {
	background-image: url(https://storage.perfectcdn.com/2x8ce3/ntbz0noaetw2gahc.png), -webkit-gradient(linear, left top, right top, from(#004df1), to(#004df1)) #004df1;
	background-image: url(https://storage.perfectcdn.com/2x8ce3/ntbz0noaetw2gahc.png), linear-gradient(to right, #0029b5, #004df1);
	background-size: cover;
	position: absolute;
	bottom: 0%;
	left: 0;
	right: -10%;
	top: -30%;
	border-radius: 0;
	overflow: hidden;
	-webkit-transform-origin: bottom left;
	transform-origin: bottom left;
	background-repeat: no-repeat;
}

.home-head .home-head-content {
	padding: 160px 0 50px;
	color: #fff;
}


.loginSide .round {
	width: 600px;
	height: 600px;
	border-radius: 50%;
	background: #a9b4fc;
	opacity: 0.07;
	position: absolute;
	top: -50px;
	left: -150px;
	z-index: 1;
}

.loginSide {
	position: relative;
}

.loginSide .login-box {
	background: #fff;
	-webkit-box-shadow: 0px 0px 60px rgba(94, 92, 154, 0.12);
	box-shadow: 0px 0px 60px rgba(94, 92, 154, 0.12);
	border-radius: 30px;
	padding: 54px 44px;
	position: relative;
	z-index: 20 !important;
	color: #3E3F5E;
}

.loginSide .login-box .lgb-title {
	font-size: 26px;
	font-weight: 700;
	color: #302F45;
	margin-bottom: 24px;
}

.loginSide .login-box .lgb-text {
	color: #AFB0C0;
	font-size: 15px;
	font-weight: 400;
	line-height: 25px;
	margin-bottom: 38px;
}

.loginSide .login-box .fc-home {
	border-radius: 10px;
	border: 1px solid #DEDEEA;
	position: relative;
	width: 100%;
	margin-bottom: 34px;
	padding: 0px 0px;
	-webkit-transition: .4s ease;
	transition: .4s ease;
	height: 52px;
}

.loginSide .login-box .fc-home label {
	font-size: 12px;
	color: #AFB0C0;
	line-height: 20px;
	height: 20px;
	padding: 0 10px;
	position: absolute;
	top: -11px;
	left: 15px;
	z-index: 3;
}

.loginSide .login-box .fc-home label .label-text {
	z-index: 3;
	position: relative;
}

.loginSide .login-box .fc-home label::before {
	content: '';
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 9px;
	width: 100%;
	background: #fff;
	height: 2px;
}

.loginSide .login-box .fc-home input {
	font-size: 15px;
	height: 100%;
	width: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: none;
	outline: none !important;
	color: #3E3F5E;
	padding: 0 25px;
	background: transparent !important;
	border-radius: 9px;
}

.loginSide .login-box .fc-home:focus-within {
	border-color: #3E3F5E;
}

.text-primary {
	color: #3E3F5E !important;
}


.form-check-label {
	font-size: 14px;
	color: #302F45;
}

@media screen and (max-width: 991.98px) {
	.home-head.outside {
		height: 100px
	}
	.home-head.outside .home-head-bg {
		background: transparent
	}
	
	.loginSide .login-box .lgb-title,
	.loginSide .login-box .lgb-text {
		text-align: center
	}
	.app-navbar {
		display: block!important
	}
	
	.header {
		margin-top: 0;
	}
	
	
	.home-head .home-head-content {
		padding: 5px 0 50px;
	}
	.loginSide .login-box {
		padding: 50px 15px;
	}
	.home-body .app-navbar .navbar-mid-icon {
		margin-left: 0
	}
	.m-flex {
		display: flex;
		justify-content: center;
		background-image: linear-gradient(to right, #ffffff, #262a35);
		background-image: url(https://storage.perfectcdn.com/2x8ce3/ntbz0noaetw2gahc.png), linear-gradient(to right, #0029b5, #004df1);
		background-size: cover;
	}
	.home-head .home-head-bg {	
    background-image: url(https://storage.perfectcdn.com/2x8ce3/ntbz0noaetw2gahc.png), linear-gradient(to right, #0029b5, #004df1);
    background-size: cover;
    position: absolute;
    bottom: 0%;
    left: 0;
    right: -10%;
    top: -30%;
    border-radius: 0;
    overflow: hidden;
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    background-repeat: no-repeat;
	}
	.loginSide .round {
		display: none
	}
	
	
	
	
	
	
	
	
	
	
	
	.footer {
		margin-top: 0!important
	}
	
	
	
}


.footer {
	position: relative;
	background-color: #193ebe;
	margin-top: 100px;
}


.register-page {
	background-color: #262a35;
	color: #fff;
	min-height: 100vh;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
background-image: url(https://storage.perfectcdn.com/4y3rwq/g9j1k4kmxzbdrw6n.png), -webkit-gradient(linear, left top, right top, from(#262a35), to(#262a35)) #262a35;
    background-image: url(https://storage.perfectcdn.com/4y3rwq/g9j1k4kmxzbdrw6n.png), linear-gradient(to right, #222229, #262a35);
    background-size: cover;
    left: 0;
    right: -10%;
    top: -30%;
    border-radius: 0;
    overflow: hidden;
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    background-repeat: no-repeat;
    background-color: #262a35;
    color: #fff;
    min-height: 100vh;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.register-page .register-page-content {
	position: relative;
	padding: 100px 0;
	width: 100%;
}

.register-left {
	text-align: center;
}

.register-left .rl-logo {
	height: 60px;
}

.register-left .rl-text {
	font-size: 16px;
	letter-spacing: -.4px;
	line-height: 175%;
	margin-top: 40px;
}

.register-left .rl-menu {
	list-style: none;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 0px;
	margin: 0px;
	margin-top: 30px;
}

.register-left .rl-menu li {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	padding: 10px 15px;
}

.register-left .rl-menu li a {
	display: block;
	text-decoration: none;
	font-weight: 600;
	color: #fff;
}


.pagination {
	margin: 16px 0;
	padding: 0;
	text-align: center;
	display: flex;
	justify-content: center;
	gap: 4px;
}

.pagination li {
	display: inline;
}

.pagination li a {
	display: inline-block;
	text-decoration: none;
	padding: 8px 14px;
	color: #475569;
	background: #f8f9fc;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.pagination li.active a,
.pagination li a.active {
	background-color: #1e6fda;
	border-color: #1e6fda;
	color: #fff;
}

.pagination li a:hover:not(.active) {
	background-color: rgba(30, 111, 218, 0.1);
	border-color: #1e6fda;
	color: #1e6fda;
}

.btn.btn-default.btn-xs {
	background: #f1f5f9;
	color: #475569;
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 12px;
	border: 1px solid #e5e7eb;
}

.btn.btn-default.btn-xs:hover {
	background: #e5e7eb;
}

body.dark .app-sidebar .sidebar-header .sh-bg {
	background: transparent
}


.datepicker.dropdown-menu {
	width: auto!important
}

.custom-control-input {
	position: relative!important;
	opacity: 1!important;
	z-index: 1!important
}


.btn-talep {
background: #1e6fda;
    color: #fff;

}


.alert.alert-talep {
    background-color: #1e6fda;
    color: #ffffff !important;
}


/*------------------------
    Font CSS
-------------------------*/
.text-07 {
    font-size: 0.7rem;
}

.text-08 {
    font-size: 0.8rem;
}

.text-09 {
    font-size: 0.9rem;
}

.text-1 {
    font-size: 1rem;
}

.text-12 {
    font-size: 1.2rem;
}

.text-15 {
    font-size: 1.5rem;
}

.text-2 {
    font-size: 2rem;
}

.text-25 {
    font-size: 2.5rem;
}

.text-3 {
    font-size: 3rem;
}

.text-4 {
    font-size: 4rem;
}

/* 모바일 화면에서 폰트 크기 조정 */
@media (max-width: 768px) {
    .text-07 {
        font-size: 0.6rem;
    }

    .text-08 {
        font-size: 0.7rem;
    }

    .text-09 {
        font-size: 0.8rem;
    }

    .text-1 {
        font-size: 0.9rem;
    }

    .text-12 {
        font-size: 1rem;
    }

    .text-15 {
        font-size: 1.3rem;
    }

    .text-2 {
        font-size: 1.5rem;
    }

    .text-25 {
        font-size: 2rem;
    }

    .text-3 {
        font-size: 2.5rem;
    }

    .text-4 {
        font-size: 3.5rem;
    }
}

/*------------------------
    Color CSS
-------------------------*/
.bg-light-gray {
    background-color: #f9f9f9;
}

.bg-gray {
    background-color: #e3e8f2;
}

.bg-white {
    background-color: #fff;
}


.bg-purple {
    background-color: #4542FF;
}

.instagram {
    color: #ee539e;
}

.tiktok {
    color: #212121;
}

.youtube {
    color: #ff0000;
}

.facebook {
    color: #4a6ea9;
}

.twitter {
    color: #03a9f4;
}

.naver {
    color: #03CF5D;
}

.kakao {
    color: #e7d424;
}

.bg-kakao {
    background-color: #ffeb3b;
}

/*------------------------
    Button CSS
-------------------------*/
.btn-purple,
.btn-outline-purple:hover,
.btn-purple:hover {
  	background: none !important;
    background-color: #4541FF !important;
    color: #FFFFFF !important;
    transition: background-color 0.5s ease !important;
}

.btn-outline-purple {
    background: none !important;
    border: 1px solid #4541FF !important;
    color: #4541FF !important;
    transition: background-color 0.5s ease !important;
}

/*------------------------
    Index CSS
-------------------------*/
body {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}


/* 각 카드 스타일 원본
.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /*border-radius: 20px; !* 둥근 모서리 *!*/
/*    border: 0;
    /*padding: 30px 20px;*/
/*    padding: 10px;
    /*width: 120px;*/
    /*height: 120px;*/
    /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  !* 그림자 *!*/
    /*background-color: #212529FF;*/
    /*color: #FFFFFF;*/
/*}*/

.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem
}

.card a {
    text-decoration: none;
    color: #000000;
}

/* 카드 내 이미지 스타일 */
.card img {
    width: 40%; /* 아이콘 크기 */
    /*height: 65px;*/
    margin-bottom: 15px;
}


/* 반응형 설정: 작은 화면에서 한 줄에 2개씩 */
@media (max-width: 600px) {
    

    /* 카드 내 이미지 스타일 */
    .card img {
        width: 60%; /* 아이콘 크기 */
        /*height: 65px;*/
        margin-bottom: 15px;
    }
}

/* 반응형 설정: 중간 크기 화면에서 한 줄에 3개씩 */


/* 반응형 설정: 큰 화면에서 한 줄에 6개씩 */


/* 버튼 안의 화살표 크기 및 색상 */


/* 버튼 hover 효과 */


/* 활성화된 슬라이드의 스타일 */


/*# sourceMappingURL=main.css.map */


/*just copy */


/* CSS Document */


.form-control {
    background: #F6F6F6 !important;
    color: #000000 !important;
}

.form-select {
    background: #F6F6F6 !important;
    color: #000000 !important;
}

.form-control-search {
    background: #FFFFFF !important;
}

#page{ overflow:hidden; background:#F4F7FE; min-height:100vh; color:#020E21; -moz-transition:all 0.5s ease; -webkit-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease;}


.font-14{ font-size:14px;}
html, body { width:100%; height:100%;}
.main { flex-grow:1;}
.footer {flex-shrink:0;}
.social-cat.hide{ display:none;}
#page small{ font-size:12px;}
.color-light{ color:rgba(2, 14, 33, 0.61);}
.box-content .form-check-input{width:20px; height:20px; margin:0; background:rgba(232, 239, 251, 1); border-color:rgba(246, 246, 246, 1); border-right:4px;}
.box-content .form-check{ line-height:20px; padding-left:32px;}
.box-content .form-check label{ display:block; line-height:20px;}
.box-content .form-check .form-check-input{  margin-left:-32px;}
.box-content .form-check-input:checked[type="checkbox"]{ background-image:url(images/check.png); background-repeat:no-repeat; background-position:center; background-size:14px;}
.box-content .form-control + small{ display:block; padding-top:8px;}


.sidebar{ width:273px; border-right:1px solid #E8E8E8; position:fixed; height:100%; top:0; left:0; bottom:0; display:flex; flex-direction:column; background:#fff; -moz-transition:all 0.5s ease; -webkit-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; z-index:100;}
.sidebar .sidebar-header{ border-bottom:1px solid #E8E8E8; height:110px; display:flex; flex-shrink:0; padding:0 38px;}


.body-wrapper .header .action-div div.search .form-control{ padding:0 0 0 40px; height:41px; border:none; border-radius:30px; background-image:url(images/search-icon.svg); background-repeat:no-repeat; background-position:20px 50%; font-size:14px;}


.sidebar.active{ left:-273px;}


.box-card .card .card-header .d-md-flex{ min-height:50px;}


.main-wrapper .form-control{border:1px solid #E8EFFB; padding:12px 16px; color:#020E21;}
.main-wrapper .form-control::-moz-placeholder, .main-wrapper .form-control::placeholder{color:#020E21; opacity:1}
.main-wrapper .form-select {--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23F15E24' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); border:1px solid #E8EFFB; padding:12px 16px;  color:#020E21;}
.main-wrapper .form-control-gray{border:1px solid #F6F6F6; color:#020E21; background:#F6F6F6; font-weight:500;}
.main-wrapper .form-control-gray::-moz-placeholder, .main-wrapper .form-control-gray::placeholder{color:#707EAE; opacity:1}


.card .card-header .form-control{ font-size:13px; padding:0 15px; height:40px; background-image:url(images/search-icon.svg); background-repeat:no-repeat; background-position:right 15px center;}
.color-dark{ color:#020E21;}

.footer{border-radius:6px; border:1.812px solid #ECEEF6; background:#EDF8FD; height:108px; padding:0 30px; font-size:14px; margin-top:30px; -moz-transition:all 0.5s ease; -webkit-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease;}

.footer ul{ margin-left:auto; margin-bottom:0; padding:0; list-style:none;}
.footer ul li + li{ margin-left:35px;}
.footer ul li a i{ font-size:20px;}
.footer ul li a{color:#6C777D; text-decoration:none; font-weight:500;}
.footer ul li a:hover{ color:var(--bs-orange);}


 


.content-table .table-tab form .form-control{ height:48px; padding-top:0; padding-bottom:0; font-size:14px; background-image:url(images/search-icon.svg); background-repeat:no-repeat; background-position:right 15px center;}
.content-table .table-tab form .form-control::-moz-placeholder, .content-table .table-tab form .form-control::placeholder{ color:#A6B8C6;}


.paginations { display: flex; padding-left: 0; list-style: none; align-items: center; justify-content: center; padding: 12px 0;}
.paginations .link {
 margin:0; display:block; border-radius:6px; border:1px solid #ECEEF7; background:#F6F6F6; text-align:center; color:#020E21; padding:16px 16px; text-transform:uppercase; font-weight:500; cursor: pointer;
}
.paginations .link.active { background:#1e6fda; color:#fff; border-color:#1e6fda;}


 
.content-table .tab-content .table > tbody > tr > td .d-flex{align-items:center;}
.content-table .tab-content .table > tbody > tr > td .d-flex .flex-grow-1{ max-width:310px; }


.box-card .card .card-header .card-select .form-select{font-weight:500; text-transform:uppercase; text-align:center;}


.main-wrapper .alert-warning{ background:#FFF3CD; color:#020E21; font-weight:500; border:none;}
.main-wrapper .alert-warning a{ color:#020E21; text-decoration:none;}
.form-note{height:36px; line-height:36px; display:inline-block; padding:0 30px; color:#fff; font-size:12px; position:relative; margin-top:6px; background:var(--bs-orange); border-radius:6px;}


.notification-btn .btn{ width:189px; display:block; text-transform:none;}
.notification-btn .btn + .btn{ margin-top:10px;}
.notification-btn-sm .btn, .notification-btn-sm .btn:hover{border-radius:6px; border:1px solid #ECEEF7; background:#F6F6F6; display:block; margin:0 auto; color:#020E21; text-decoration:none; width:198px; padding-top:0; padding-bottom:0; line-height:38px;}
.notification-btn-sm .btn + .btn{ margin-top:5px;}


.user-info .btn{ border:none; padding-left:15px; padding-right:15px; text-transform:none; font-weight: 400; font-size:14px;}
.user-info .btn-check:checked + .btn, :not(.btn-check) + .btn:active, .user-info .btn:first-child:active, .user-info .btn.active, .user-info .btn.show{ box-shadow:0px 1px 2px 0px #DBE2EB; border:none; background:#fff; color:#020E21;} 
.box-card .card .card-header .btn-outline-dark{border:1px solid #C1C6CD; background:#F6F6F6; color:#020E21; margin-left:auto;}
.box-card .card .card-header .btn-outline-dark:hover, .box-card .card .card-header .btn-outline-dark:focus{border-color:#020E21; background:#020E21; color:#fff;}


.filter-form .form-control{ height:42px; padding-top:0; padding-bottom:0; font-size:14px; background-image:url(images/search-icon.svg); background-repeat:no-repeat; background-position:right 15px center;}
.filter-form .form-select{border:1px solid #C1C6CD; background-color:#F6F6F6; height:42px; padding-top:0; padding-bottom:0; font-size:14px; margin-top:6px;}


.noti-items .d-flex + .d-flex{ margin-top:24px;}
.noti-items .d-flex .user{ width:36px; margin-right:24px;}
.noti-items .d-flex .content{ padding:12px; max-width:100%; border-radius:18px 18px 18px 0; border:2px solid #eceef7; position:relative; font-size:14px; direction:ltr; color:#353535}
.noti-items .d-flex .content:before{ background:url(images/chat-tail-1.png); height:15px; width:15px; content:''; position:absolute; bottom:-3px; left:-13px;}
.noti-items .d-flex .content .meta{ text-align:right; color:#656565}
.noti-items .d-flex .content .meta time:before{ content:"|"; margin:0 8px;}
.noti-items .d-flex.rtl{ direction:rtl;}
.noti-items .d-flex.rtl .user{ margin-left:24px; margin-right:0;}
.noti-items .d-flex.rtl .content{border-radius:18px 18px 0 18px; border:none; background:#fcdfd3;}
.noti-items .d-flex.rtl .content:before{ content:""; background:url(images/chat-tail-2.png); height:18px; width:14px; left:auto; right:-14px; bottom:0;}
.noti-items .d-flex.rtl .content .meta{ color:#656565;}


.stat-content .d-flex .icon{ background:rgba(36, 170, 225, 0.08); border-radius:50%; color:#24AAE1; height:52px; width:52px; margin-right:17px;}
.stat-content .row [class*=col-] small{ color:#707EAE; font-size:12px;}
.stat-content .row [class*=col-]{ margin-top:24px;}


.stat-content .d-flex strong{ font-weight:600;}


@media(min-width:576px){
.noti-items .d-flex .content{ max-width:90%}
}

@media(min-width:768px){
.font-18{ font-size:18px;}
.form-note{position:absolute; top:50%; margin-top:-18px; right:10px; z-index:1;}
.notification-btn .btn + .btn{ margin-top:0; margin-left:14px;}
.filter-form .form-control{ width:242px; margin-right:20px;}
.filter-form .form-select{width:162px; margin-top:0;}
.noti-items .d-flex .content{ max-width:65%}


}


/*@-webkit-keyframes cd-scroll-right {0%, 100% {-webkit-transform:translateX(0); }
50% {-webkit-transform:translateX(3px); }
}*/
@-moz-keyframes cd-scroll-right {0%, 100% {-moz-transform:translateX(0); }
50% {-moz-transform:translateX(3px); }
}
@keyframes cd-scroll-right {0%, 100% {-webkit-transform:translateX(0); -moz-transform:translateX(0); -ms-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0); }
50% {-webkit-transform:translateX(3px); -moz-transform:translateX(3px); -ms-transform:translateX(3px); -o-transform:translateX(3px); transform:translateX(3px); }
}

.badge {
  white-space: nowrap !important;
  color: white !important;
}


.api-list .item .form-select{width:221px; border:1px solid #F2F6F9;}

.alert table { --bs-table-bg: transparent; }
.close { float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .5;}
button.close { background-color: transparent; border: 0; }
.alert-dismissible .close { position: absolute; top: 0; right: 0; padding: 0.75rem 1.25rem; color: inherit; }

.search-dropdown .input-wrapper {
  position: relative;
}

.search-dropdown .input-wrapper .input-wrapper__prepend {
  left: 12px;
}

.search-dropdown .input-wrapper .input-wrapper__prepend, .search-dropdown .input-wrapper .input-wrapper__append {
  position: absolute;
  background: none;
  border: none;
  top: 50%;
  transform: translateY(-50%);
  padding: 0px 2px;
}

.search-dropdown .input-wrapper .form-control {
  padding-left: calc(10px + 24px);
  padding-right: calc(10px + 24px);
}

.search-dropdown .input-wrapper .input-wrapper__append {
  right: 8px;
}

.search-dropdown .input-wrapper .input-wrapper__prepend, .search-dropdown .input-wrapper .input-wrapper__append {
  position: absolute;
  background: none;
  border: none;
  top: 50%;
  transform: translateY(-50%);
  padding: 0px 2px;
}

.select2-container {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle;
}

.select2-container--open .select2-dropdown {
  left: 0;
}

.select2-dropdown {
  display: block !important;
  position: absolute;
  left: -100000px;
  width: 100%;
  z-index: 5;
  margin-top: 0px !important;
}


.select2-results__options {
  list-style: none !important;
  margin: 0 !important;
  padding: 0;
  display: block !important;
  width: 100%;
  position: relative !important;
  box-shadow: none !important;
  border-radius: 0px !important;
  border: none !important;
}

.select2-results__option {
  display: block;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: #333;
  user-select: none;
  -webkit-user-select: none;
}

.select2-container .dropdown-menu > li > a {
  white-space: inherit;
}

.select2-results__option a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333;
  text-decoration: none;
}

.badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #777;
  border-radius: 10px;
}

.select2-container .select2-selection__text {
  display: inline;
  vertical-align: middle;
}


.short {
    max-width: 60px;
}

.btn-xs {
  padding: .25rem .4rem !important;
  font-size: 0.875rem !important;
}

/*
.modal-backdrop {
  opacity: .7 !important;
}
*/

.btn-default {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-orange);
  --bs-btn-border-color: var(--bs-orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-dark);
  --bs-btn-hover-border-color: var(--bs-dark);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-dark);
  --bs-btn-active-border-color: var(--bs-dark);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}

.form-group { margin-bottom: 1rem !important; }

.search-dropdown .input-wrapper .input-wrapper__prepend, .search-dropdown .input-wrapper .input-wrapper__append {
color:#585c5e
}


/* ============================================================
   GUEST 3-COLUMN LAYOUT
   ============================================================ */

:root {
  --g-primary: #1e6fda;
  --g-primary-light: #5a9be6;
  --g-primary-dark: #1557b0;
  --g-primary-gradient: linear-gradient(135deg, #1e6fda, #1557b0);
  --g-bg: #F8F9FC;
  --g-text: #1E293B;
  --g-text-secondary: #64748B;
  --g-card-bg: #FFFFFF;
  --g-card-shadow: 0 4px 24px rgba(0,0,0,0.06);
  --g-radius: 12px;
  --g-radius-lg: 20px;
}

/* === Guest 3-Column Layout === */
.guest-layout {
  display: flex;
  min-height: 100vh;
  background: #f5f7fa;
}

/* --- Left Sidebar --- */
.guest-sidebar-left {
  display: none;
  width: 262px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid #e5e7eb;
  padding: 20px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
  flex-direction: column;
}
@media (min-width: 992px) {
  .guest-sidebar-left { display: flex !important; }
}
.guest-sidebar-logo {
  margin-bottom: 16px;
}
.guest-sidebar-logo img {
  max-height: 36px;
  width: auto;
}

.guest-sidebar-auth {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}
.guest-sidebar-btn-login {
  flex: 1;
  display: inline-block;
  text-align: center;
  padding: 8px 0;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--g-text);
  text-decoration: none;
  transition: all 0.2s;
}
.guest-sidebar-btn-login:hover {
  border-color: var(--g-primary);
  color: var(--g-primary);
  text-decoration: none;
}
.guest-sidebar-btn-signup {
  flex: 1;
  display: inline-block;
  text-align: center;
  padding: 8px 0;
  background: var(--g-primary);
  border: 2px solid var(--g-primary);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: all 0.2s;
}
.guest-sidebar-btn-signup:hover {
  background: var(--g-primary-dark);
  border-color: var(--g-primary-dark);
  color: #fff;
  text-decoration: none;
}

.guest-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.guest-sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s;
}
.guest-sidebar-link:hover {
  background: #f1f5f9;
  color: var(--g-primary);
  text-decoration: none;
}
.guest-sidebar-link i {
  width: 18px;
  text-align: center;
  font-size: 14px;
  color: #94a3b8;
}
.guest-sidebar-link:hover i {
  color: var(--g-primary);
}

/* --- Main Content --- */
.guest-main {
  flex: 2 1 0;
  min-width: 0;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
}

/* Ticker */
.guest-ticker {
  background: #1e293b;
  padding: 10px 20px;
  overflow: hidden;
}


/* Hero Banner */
.guest-hero {
  background: linear-gradient(135deg, #1e6fda, #1558b0);
  border-radius: 10px;
  padding: 12px 20px;
  margin: 12px 0 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.guest-hero::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -40px;
  width: 160px;
  height: 160px;
  background: rgba(255,255,255,0.07);
  border-radius: 50%;
  pointer-events: none;
}
.guest-hero::after {
  content: '';
  position: absolute;
  bottom: -50px;
  left: 10%;
  width: 200px;
  height: 200px;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
  pointer-events: none;
}


/* Order Box */
.guest-order-box {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  margin: 0 0 20px;
  overflow: hidden;
}
.guest-order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 8px;
  flex-wrap: wrap;
  gap: 12px;
}
.guest-order-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--g-text);
  margin: 0;
}
.guest-guide-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 20px;
  border: 2px solid #e2e8f0;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  color: var(--g-text);
  text-decoration: none;
  transition: all 0.2s;
}
.guest-guide-btn:hover {
  border-color: var(--g-primary);
  color: var(--g-primary);
  text-decoration: none;
}


/* Platform Icon Grid */
.guest-platform-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 16px 8px;
  padding: 10px 24px 24px;
  justify-items: center;
}
.guest-platform-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 0.15s ease;
  text-decoration: none;
}
.guest-platform-card:hover {
  transform: translateY(-2px);
}
.guest-platform-card:hover > i {
  box-shadow: 0 6px 16px rgba(30,111,218,0.20);
  border-color: #c9ddf5;
}
.guest-platform-card.active > i {
  background: #fff;
  border-color: #1e6fda;
  box-shadow: 0 4px 14px rgba(30,111,218,0.22);
}
.guest-platform-card.active span {
  color: #1e6fda;
  font-weight: 700;
}
.guest-platform-card > i {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  border-radius: 16px;
  background: #fff;
  border: 2px solid #eef1f7;
  box-shadow: 0 2px 8px rgba(20,30,55,0.10);
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.guest-platform-card span {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
  line-height: 1.2;
  text-align: center;
}

/* Service Browser */
.guest-service-section {
  padding: 0;
  margin: 0 0 20px;
}
.guest-browser-box {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}
.guest-browser-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid #f1f5f9;
}
.guest-browser-step {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--g-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.guest-browser-header > span {
  font-size: 16px;
  font-weight: 600;
  color: var(--g-text);
}
.guest-browser-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
  color: var(--g-text);
  font-weight: 600;
}
.guest-breadcrumb-icon {
  color: var(--g-primary);
  font-size: 16px;
}
.guest-breadcrumb-sep {
  color: #94a3b8;
  font-size: 10px;
}
.guest-browser-content {
  display: flex;
  min-height: 400px;
}
.guest-browser-left {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid #e5e7eb;
  overflow-y: auto;
  max-height: 500px;
}
.guest-cat-item {
  display: block;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--g-text);
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}
.guest-cat-item:hover {
  background: #f8fafc;
  color: var(--g-primary);
  text-decoration: none;
}
.guest-cat-item.active {
  color: var(--g-primary);
  font-weight: 700;
  border-left: 3px solid var(--g-primary);
  background: #faf5ff;
}
.guest-browser-right {
  flex: 1;
  overflow-y: auto;
  max-height: 500px;
}
.guest-svc-item {
  display: flex;
  align-items: center;
  padding: 13px 20px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.15s;
  gap: 12px;
}
.guest-svc-item:hover {
  background: #faf5ff;
}
.guest-svc-item.active {
  background: #f0f6ff;
  border-left: 3px solid var(--g-primary);
}
.guest-svc-item-name {
  font-size: 14px;
  color: var(--g-text);
  font-weight: 500;
  flex: 1;
  line-height: 1.4;
}
.guest-svc-item-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--g-primary);
  white-space: nowrap;
}
/* Service Detail Box (below browser) */
.guest-svc-detail-box {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  margin: 0 0 20px;
  overflow: hidden;
}


.guest-service-loading,
.guest-service-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  color: #94a3b8;
  text-align: center;
  padding: 40px;
}
.guest-service-loading i,
.guest-service-empty i {
  font-size: 32px;
  margin-bottom: 12px;
}
.guest-service-loading p,
.guest-service-empty p {
  font-size: 14px;
  margin: 0;
  line-height: 1.6;
}

/* Guest Footer (inside main) */
.guest-footer {
  margin-top: auto;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  padding: 20px;
}
.guest-footer-inner {
  max-width: 800px;
}
.guest-footer-biz {
  font-weight: 700;
  color: var(--g-text);
  font-size: 14px;
  margin-bottom: 4px;
}
.guest-footer-info {
  font-size: 13px;
  color: #64748b;
  line-height: 1.8;
  margin-bottom: 12px;
}
.guest-footer-info a {
  color: var(--g-primary);
  text-decoration: none;
}
.guest-footer-info a:hover {
  text-decoration: underline;
}
.guest-footer-links {
  display: flex;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 8px;
}
.guest-footer-links a {
  color: #475569;
  text-decoration: none;
  font-weight: 600;
}
.guest-footer-links a:hover {
  color: var(--g-primary);
}
.guest-footer-links span {
  color: #cbd5e1;
}
.guest-footer-company {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.7;
  margin: 0;
  word-break: keep-all;
}
.guest-footer-copy {
  font-size: 12px;
  color: #94a3b8;
  margin: 0;
}

/* --- Right Sidebar --- */
.guest-sidebar-right {
  display: none;
  /* 본문:우측 = 2:1 (로그인 화면 col-lg-8 : col-lg-4 와 동일) */
  flex: 1 1 0;
  min-width: 0;
  padding: 20px 16px;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  max-height: 100vh;
  position: sticky;
  top: 0;
}
@media (min-width: 1200px) {
  .guest-sidebar-right { display: flex !important; }
}

/* Right Promo Banner */


/* Right Cards */


.guest-right-card-body {
  padding: 12px 18px;
}

/* Notice Items */


/* Guide Tabs */

.guest-guide-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
}
.guest-guide-tab:hover {
  border-color: var(--g-primary);
  color: var(--g-primary);
}
.guest-guide-tab.active {
  background: var(--g-primary);
  color: #fff;
  border-color: var(--g-primary);
}
.guest-guide-tab.active i { color: #fff; }
.guest-guide-content { display: none; }
.guest-guide-content:first-of-type { display: block; }


/* FAQ */
.guest-faq-item {
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
}
.guest-faq-item:last-child {
  border-bottom: none;
}


/* Guide Box Items */


/* FAQ Accordion (shared for guest & auth) */
.lk-faq-accordion-item {
  background: #f8fafc;
  border-radius: 10px;
  margin-bottom: 8px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  transition: border-color 0.2s;
}
.lk-faq-accordion-item:hover {
  border-color: #cbd5e1;
}
.lk-faq-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  cursor: pointer;
  user-select: none;
}
.lk-faq-accordion-header:hover {
  background: #f1f5f9;
}
.lk-faq-accordion-header.active {
  background: #f1f5f9;
}
.lk-faq-accordion-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--g-text);
  margin: 0;
  flex: 1;
}
.lk-faq-accordion-icon {
  font-size: 12px;
  color: #94a3b8;
  transition: transform 0.2s;
}
.lk-faq-accordion-header.active .lk-faq-accordion-icon {
  transform: rotate(45deg);
  color: var(--g-primary);
}
.lk-faq-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.lk-faq-accordion-content.active {
  max-height: 300px;
}
.lk-faq-accordion-body {
  padding: 0 16px 14px;
}
.lk-faq-accordion-body p {
  font-size: 12px;
  color: #64748b;
  line-height: 1.7;
  margin: 0 0 4px;
}
.lk-faq-accordion-body a {
  color: var(--g-primary);
  text-decoration: none;
}
.lk-faq-accordion-body a:hover {
  text-decoration: underline;
}

/* Contact Buttons */


/* FAQ scroll area */
.lk-faq-scroll {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 6px;
}
.lk-faq-scroll::-webkit-scrollbar {
  width: 4px;
}
.lk-faq-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.lk-faq-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

/* Custom Info Modal */
.lk-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 100000;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.lk-modal-overlay.show {
  display: flex;
  opacity: 1;
}
.lk-modal-box {
  background: #fff;
  border-radius: 14px;
  width: 90%;
  max-width: 680px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  transform: translateY(20px);
  transition: transform 0.25s ease;
}
.lk-modal-overlay.show .lk-modal-box {
  transform: translateY(0);
}
.lk-modal-header {
  display: flex;
  align-items: flex-start;
  padding: 24px 28px;
}
.lk-modal-icon {
  font-size: 24px;
  margin-right: 12px;
  color: #fff;
}
.lk-modal-badge {
  background: rgba(255,255,255,0.2);
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.lk-modal-title {
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  margin: 0;
}
.lk-modal-close {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.lk-modal-close span {
  color: #fff;
  font-size: 28px;
  line-height: 1;
  opacity: 0.8;
}
.lk-modal-close:hover span {
  opacity: 1;
}
.lk-modal-body {
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1;
}
.lk-modal-footer {
  border-top: 1px solid #e5e7eb;
  padding: 12px 28px;
  text-align: right;
}

/* Auth order page right sidebar cards */
.auth-right-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  padding: 22px;
  margin-bottom: 16px;
}
.auth-right-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 16px;
}
.auth-right-card-title i {
  color: var(--color1);
  margin-right: 8px;
}

/* Mobile Header */
.guest-mobile-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 200;
}
.guest-mobile-logo img {
  height: 32px;
}
.guest-mobile-auth {
  display: flex;
  gap: 8px;
  align-items: center;
}
.guest-mobile-auth-btn {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  color: #374151;
  border: 1px solid #e5e7eb;
  background: #fff;
}
.guest-mobile-auth-btn:hover {
  text-decoration: none;
  color: #374151;
}
.guest-mobile-auth-signup {
  background: #1e6fda;
  color: #fff !important;
  border-color: #1e6fda;
}
.guest-mobile-auth-signup:hover {
  color: #fff !important;
}

/* Shared button styles */
.guest-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--g-primary-gradient);
  color: #fff;
  padding: 12px 28px;
  border-radius: var(--g-radius);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.guest-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(124,58,237,0.35);
  color: #fff;
  text-decoration: none;
}


/* === Login Modal Overlay (pure CSS, no Bootstrap) === */
.guest-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.guest-modal-overlay.show {
  opacity: 1;
}
.guest-modal-box {
  width: 90%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: var(--g-radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  transform: translateY(20px);
  transition: transform 0.3s ease;
}
.guest-modal-overlay.show .guest-modal-box {
  transform: translateY(0);
}
.guest-modal-close {
  background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.guest-modal-close:hover {
  background: rgba(255,255,255,0.35);
}
.guest-modal-close span {
  color: #fff;
  font-size: 22px;
  line-height: 1;
}

/* === Login Modal === */
.guest-login-modal {
  border: none;
  border-radius: var(--g-radius-lg);
  overflow: hidden;
}
.guest-login-modal-header {
  background: var(--g-primary-gradient);
  color: #fff;
  border: none;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.guest-login-modal-header .modal-title {
  font-size: 20px;
  font-weight: 700;
}
.guest-login-modal-body {
  padding: 32px 24px;
  background: #fff;
}
.guest-login-modal-body .form-group label {
  font-size: 14px;
  font-weight: 600;
  color: var(--g-text);
}
.guest-login-modal-body .form-control {
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 15px;
  min-height: 48px;
  background: #f8fafc;
}
.guest-login-modal-body .form-control:focus {
  border-color: var(--g-primary-light);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
  background: #fff;
}
.guest-modal-link {
  color: var(--g-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.guest-modal-link:hover {
  text-decoration: underline;
  color: var(--g-primary-dark);
}

/* === Responsive === */
@media (max-width: 991.98px) {
  body.light .app-navbar {
    display: block !important;
  }
  .guest-sidebar-left { display: none !important; }
  .guest-main {
    padding-top: 56px;
    padding-bottom: 80px;
  }
  .guest-platform-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 14px 6px;
    padding: 6px 16px 18px;
  }
  .guest-platform-card {
    gap: 6px;
  }
  .guest-platform-card > i {
    width: 52px;
    height: 52px;
    font-size: 23px;
  }
  .guest-platform-card span {
    font-size: 11px;
  }
  .guest-browser-left {
    width: 180px;
  }
  .guest-cat-item {
    padding: 12px 14px;
    font-size: 13px;
  }
  .guest-order-header {
    padding: 16px 12px 8px;
  }
  .guest-order-title {
    font-size: 18px;
  }
  
  .guest-hero {
    padding: 14px 16px;
    margin: 12px 0 16px;
  }
  
  .guest-ticker {
    padding: 8px 12px;
  }
  .guest-service-section {
    padding: 0;
    margin: 0 0 16px;
  }
  .guest-footer {
    padding: 16px 12px 80px;
  }
}
@media (max-width: 767.98px) {
  .guest-platform-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .guest-browser-content {
    flex-direction: row;
    min-height: 300px;
  }
  .guest-browser-left {
    width: 140px;
    flex-shrink: 0;
    max-height: 400px;
    border-right: 1px solid #e5e7eb;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .guest-cat-item {
    padding: 10px 12px;
    font-size: 12px;
  }
  .guest-cat-item.active {
    border-left: 3px solid var(--g-primary);
  }
  .guest-browser-right {
    max-height: 400px;
  }
  .guest-browser-header {
    padding: 16px;
  }
  .guest-browser-breadcrumb {
    padding: 10px 16px;
    font-size: 13px;
  }
  .guest-svc-item {
    padding: 12px 16px;
  }
  .guest-svc-item-name {
    font-size: 13px;
  }
  .guest-svc-item-price {
    font-size: 13px;
  }
  
  
  
  
  .guest-footer {
    padding-bottom: 100px;
  }
}

/* Hide old guest header */
body.light .header {
  display: none !important;
}

/* Update dashboard colors to purple theme */

.btn.btn-primary {
  background: var(--g-primary);
}
.btn.btn-secondary {
  background: var(--g-primary);
}
.btn.btn-secondary:hover {
  background: var(--g-primary-dark);
}
.nav-pills.fastside .nav-link.active,
.nav-pills .show>.nav-link {
  background: var(--g-primary);
}
.orderNav li a.active,
.orderNav li a:hover {
  background: var(--g-primary);
}
.dfb-search .dfb-submit {
  background: var(--g-primary);
}
.app-header .hea-ann-title {
  background: var(--g-primary);
}
.app-sidebar .sidebar-menu li.active>a.menu-link {
  color: var(--g-primary);
}

.faq-ss-tabs .home-ss-tab.active {
  background: var(--g-primary);
}
.app-sidebar .sidebar-header .app-user .user-balance {
  background: var(--g-primary);
}
.app-navbar a.active .navbar-texts,
.app-navbar a.active i {
  color: var(--g-primary);
}

/* === FAQ Page (2-column card grid) === */


.faq-tab {
  padding: 10px 24px;
  border-radius: 100px;
  border: 2px solid #e2e8f0;
  background: #fff;
  font-weight: 600;
  font-size: 14px;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s;
}
.faq-tab:hover {
  border-color: var(--g-primary-light);
  color: var(--g-primary);
  background: #f0f6ff;
}
.faq-tab.active {
  background: var(--g-primary-gradient);
  color: #fff;
  border-color: transparent;
}
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.faq-card {
  background: #fff;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.faq-card:hover {
  border-color: #cbd5e1;
}
.faq-card.open {
  border-color: var(--g-primary);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.08);
}


@media (max-width: 767.98px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }
  
  .faq-tab {
    padding: 8px 18px;
    font-size: 13px;
  }
  
  
}

/* === API Page === */
.api-page-wrap {
  padding: 24px 20px;
}


.api-method-card {
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}


.api-type-select {
  padding: 8px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
}
.api-type-select:focus {
  border-color: #5a9be6;
}


.api-code {
  background: #1e293b;
  color: #e2e8f0;
  padding: 16px 20px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.6;
  overflow-x: auto;
  margin: 0;
}


@media (max-width: 767.98px) {
  
  
  
  .api-code { font-size: 12px; padding: 12px 14px; }
}

/* === Sidebar Footer (Company Info) === */
.guest-sidebar-footer {
  margin-top: auto;
  padding: 16px;
  border-top: 1px solid #e2e8f0;
}
.guest-sidebar-biz-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #94a3b8;
  cursor: pointer;
  padding: 6px 0;
  user-select: none;
}
.guest-sidebar-biz-toggle i {
  font-size: 10px;
  transition: transform 0.3s;
}
.guest-sidebar-footer.open .guest-sidebar-biz-toggle i {
  transform: rotate(-180deg);
}
.guest-sidebar-biz-info {
  display: none;
  padding: 12px 0 8px;
}
.guest-sidebar-footer.open .guest-sidebar-biz-info {
  display: block;
}
.guest-sidebar-biz-info p {
  font-size: 12px;
  color: #94a3b8;
  margin: 0 0 6px;
  line-height: 1.5;
}
.guest-sidebar-biz-info p a {
  color: #1e6fda;
  text-decoration: none;
}
.guest-sidebar-biz-info p a:hover {
  text-decoration: underline;
}
.guest-sidebar-legal {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
  margin-top: 4px;
}
.guest-sidebar-legal a {
  font-size: 11px;
  color: #94a3b8;
  text-decoration: none;
}
.guest-sidebar-legal a:hover {
  color: #1e6fda;
}
.guest-sidebar-legal span {
  font-size: 11px;
  color: #cbd5e1;
}

/* === Terms / Privacy Page === */
.terms-page-wrap {
  padding: 24px 20px;
}
.terms-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.terms-tab {
  padding: 10px 24px;
  border-radius: 100px;
  border: 2px solid #e2e8f0;
  background: #fff;
  font-weight: 600;
  font-size: 14px;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-block;          /* 약관 ↔ 개인정보처리방침 이동용 <a> 탭도 버튼과 같은 모양 */
  text-decoration: none !important;
}
.terms-tab:hover {
  border-color: var(--g-primary-light);
  color: var(--g-primary);
  background: #f0f6ff;
}
.terms-tab.active {
  background: var(--g-primary-gradient);
  color: #fff;
  border-color: transparent;
}
.terms-tab i {
  margin-right: 6px;
}
.terms-card {
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}
.terms-card-header {
  background: linear-gradient(135deg, #1e6fda, #1557b0);
  padding: 16px 24px;
}
.terms-card-header h2 {
  margin: 0;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}
.terms-card-header h2 i {
  margin-right: 8px;
}
.terms-card-body {
  padding: 24px;
}
.terms-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f1f5f9;
}
.terms-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.terms-section h4 {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 10px;
}
.terms-section p {
  font-size: 14px;
  color: #64748b;
  line-height: 1.8;
  margin: 0 0 6px;
}
.terms-section p:last-child {
  margin-bottom: 0;
}
.terms-section p strong {
  color: #334155;
}
/* 약관 강조 박스 (필수 확인 사항 / 환불 불가 / 포인트 소멸 등) */
.terms-notice {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 14px 0;
}
.terms-notice-title {
  font-size: 14px;
  font-weight: 700;
  color: #92400e;
  margin: 0 0 8px;
}
.terms-notice p {
  color: #78350f;
}
/* 소제목 (승낙하지 않는 경우, 금지 행위 등) */
.terms-sub {
  font-size: 14px;
  font-weight: 700;
  color: #1e6fda;
  margin: 16px 0 8px;
}
/* 항목 나열 */
.terms-li {
  position: relative;
  padding-left: 16px;
}
.terms-li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: #1e6fda;
}
.terms-notice .terms-li::before {
  color: #f59e0b;
}
/* 법적으로 중요한 문구 (포인트 소멸 등) */
.terms-important {
  color: #dc2626;
  font-weight: 700;
}
body.dark .terms-notice {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.35);
  border-left-color: #f59e0b;
}
body.dark .terms-notice-title {
  color: #fbbf24;
}
body.dark .terms-notice p {
  color: #d6c9a8;
}
body.dark .terms-sub {
  color: #5a9be6;
}
body.dark .terms-li::before {
  color: #5a9be6;
}
body.dark .terms-important {
  color: #f87171;
}
.terms-company-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.terms-company-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  background: #f8f9fc;
  border-radius: 10px;
}
.terms-company-label {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.terms-company-value {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
}
@media (max-width: 767.98px) {
  .terms-tabs {
    gap: 8px;
  }
  .terms-tab {
    padding: 8px 18px;
    font-size: 13px;
  }
  .terms-card-body {
    padding: 16px;
  }
  .terms-section h4 {
    font-size: 14px;
  }
  .terms-section p {
    font-size: 13px;
  }
  .terms-company-grid {
    grid-template-columns: 1fr;
  }
  .terms-company-item {
    padding: 12px;
  }
}

/* ===== Phase 2: Dashboard Info Bar ===== */
.dash-info-bar {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0;
  margin-bottom: 8px;
}
.dash-info-bar-inner {
  display: flex;
  align-items: center;
  padding: 14px 24px;
  gap: 20px;
  flex-wrap: wrap;
}
.dash-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #475569;
  white-space: nowrap;
}
.dash-info-item i {
  color: #1e6fda;
  font-size: 15px;
  width: 18px;
  text-align: center;
}
.dash-info-label {
  font-weight: 500;
  color: #64748b;
}
.dash-info-value {
  font-weight: 700;
  color: #1e293b;
}
.dash-info-value.highlight {
  color: #1e6fda;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
/* 전체주문수량 강조 */
.dash-info-orders {
  background: linear-gradient(135deg, #1e6fda 0%, #3b82f6 100%);
  color: #fff;
  padding: 6px 14px;
  border-radius: 8px;
  margin: -6px 0;
}
.dash-info-orders i {
  color: #fff !important;
}
.dash-info-orders .dash-info-label {
  color: rgba(255,255,255,0.85);
  font-weight: 600;
}
.dash-info-orders .dash-info-value {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.dash-info-divider {
  width: 1px;
  height: 24px;
  background: #e5e7eb;
}
.dash-info-charge-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1e6fda;
  color: #fff !important;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.2s;
}
.dash-info-charge-btn:hover {
  background: #1557b0;
}
@media (max-width: 767.98px) {
  .dash-info-bar-inner {
    padding: 12px 16px;
    gap: 12px;
  }
  .dash-info-divider {
    display: none;
  }
  .dash-info-item {
    font-size: 13px;
  }
}

/* ===== Phase 2: Category Icon Grid ===== */
/* ===== Auth Platform Grid (Guest Style Pill Buttons) ===== */
.auth-platform-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 16px 8px;
  padding: 10px 24px 24px;
  justify-items: center;
}
.auth-platform-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 0.15s ease;
  text-decoration: none !important;
}
.auth-platform-card:hover {
  transform: translateY(-2px);
}
.auth-platform-card:hover > i {
  box-shadow: 0 6px 16px rgba(30,111,218,0.20);
  border-color: #c9ddf5;
}
.auth-platform-card.active > i {
  background: #fff;
  border-color: #1e6fda;
  box-shadow: 0 4px 14px rgba(30,111,218,0.22);
}
.auth-platform-card.active span {
  color: #1e6fda;
  font-weight: 700;
}
.auth-platform-card > i {
  width: 56px;
  height: 56px;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  border-radius: 16px;
  background: #fff;
  border: 2px solid #eef1f7;
  box-shadow: 0 2px 8px rgba(20,30,55,0.10);
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.auth-platform-card span {
  display: block;
  width: 100%;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
  line-height: 1.2;
  text-align: center;
}
@media (max-width: 991.98px) {
  .auth-platform-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (max-width: 575.98px) {
  .auth-platform-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 14px 6px;
    padding: 6px 16px 16px;
  }
  .auth-platform-card > i {
    width: 50px;
    height: 50px;
    font-size: 22px;
    border-radius: 14px;
  }
  .auth-platform-card span {
    font-size: 11px;
  }
}

/* ===== Auth Order Card ===== */

.auth-order-card .d-card-body {
  padding: 20px 24px;
}
.auth-order-header {
  padding: 20px 24px 8px;
  border-radius: 14px 14px 0 0;
}

.auth-guide-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 20px;
  border: 2px solid #e2e8f0;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  text-decoration: none;
  transition: all 0.2s;
}
.auth-guide-btn:hover {
  border-color: #1e6fda;
  color: #1e6fda;
  text-decoration: none;
}


body.dark .dash-info-bar {
  background: #151722;
  border-color: #232842;
}
body.dark .dash-info-item {
  color: #a0aec0;
}
body.dark .dash-info-label {
  color: #7f89b7;
}
body.dark .dash-info-value {
  color: #fff;
}
body.dark .dash-info-value.highlight {
  color: #5a9be6;
}
body.dark .dash-info-orders {
  background: linear-gradient(135deg, #1a5bb5 0%, #2563eb 100%);
}
body.dark .dash-info-divider {
  background: #232842;
}
body.dark .dash-info-charge-btn {
  background: #1e6fda;
}
body.dark .auth-platform-card > i {
  background: #1a1b2e;
  border-color: transparent;
  box-shadow: none;
}
body.dark .auth-platform-card span {
  color: #c8ccd8;
}
body.dark .auth-platform-card:hover > i {
  background: rgba(30, 111, 218, 0.18);
}
body.dark .auth-platform-card.active > i {
  background: #0f1530;
  border-color: #1e6fda;
}
body.dark .auth-platform-card.active span {
  color: #5a9be6;
}
body.dark .auth-platform-card[data-id="카카오톡"] > i {
  color: #FEE500 !important;
}


body.dark .auth-guide-btn {
  border-color: #2d2f45;
  color: #c8ccd8;
}
body.dark .auth-guide-btn:hover {
  border-color: #1e6fda;
  color: #5a9be6;
}


/* ===== Auth Service Detail Box (Guest Style) ===== */
.auth-svc-detail-box {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  margin-top: 8px;
}

.auth-svc-detail-tab {
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 600;
  color: #94a3b8;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: -1px;
}
.auth-svc-detail-tab:hover {
  color: #64748b;
}
.auth-svc-detail-tab.active {
  color: #1e6fda;
  border-bottom-color: #1e6fda;
}
.auth-svc-detail-body {
  padding: 24px;
}


.auth-svc-tab-content {
  font-size: 14px;
  color: #475569;
  line-height: 1.8;
}
.auth-svc-tab-content p {
  margin: 0 0 8px;
}
.auth-svc-tab-content strong, .auth-svc-tab-content b {
  color: #1e293b;
}
body.dark .auth-svc-detail-box {
  background: #151722;
  border-color: #232842;
}

body.dark .auth-svc-detail-tab {
  color: #64748b;
}
body.dark .auth-svc-detail-tab.active {
  color: #5a9be6;
  border-bottom-color: #5a9be6;
}


body.dark .auth-svc-tab-content {
  color: #94a3b8;
}
body.dark .auth-svc-tab-content strong, body.dark .auth-svc-tab-content b {
  color: #e2e8f0;
}

/* ===== Service Style Toggle (A/B/C 테스트) ===== */


.svc-style-btn {
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.svc-style-btn:hover {
  border-color: #1e6fda;
  color: #1e6fda;
}
.svc-style-btn.active {
  background: #1e6fda;
  color: #fff;
  border-color: #1e6fda;
}

/* ===== Style A: Timeline ===== */
.svc-timeline {
  position: relative;
  padding-left: 28px;
}
.svc-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(to bottom, #1e6fda 0%, #e2e8f0 30%, #e2e8f0 70%, #1e6fda 100%);
  border-radius: 1px;
}
.svc-tl-item {
  position: relative;
  padding: 8px 0;
}
.svc-tl-dot {
  position: absolute;
  left: -24px;
  top: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #e2e8f0;
  z-index: 1;
}
.svc-tl-dot-title {
  background: #1e6fda;
  width: 14px;
  height: 14px;
  top: 11px;
  left: -26px;
  box-shadow: 0 0 0 3px rgba(30, 111, 218, 0.15);
}
.svc-tl-dot-check { background: #22c55e; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15); }
.svc-tl-dot-star { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15); }
.svc-tl-dot-warn { background: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15); }
.svc-tl-content {
  font-size: 14px;
  color: #475569;
  line-height: 1.7;
}
.svc-tl-title .svc-tl-content {
  font-size: 15px;
  color: #1e293b;
}


.svc-tl-check .svc-tl-content { color: #16a34a; font-weight: 500; }
.svc-tl-star .svc-tl-content { color: #d97706; font-weight: 600; }
.svc-tl-warn .svc-tl-content { color: #dc2626; font-weight: 500; }

/* ===== Style B: Accordion ===== */
.svc-accordion {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}
.svc-acc-item {
  border-bottom: 1px solid #e5e7eb;
}
.svc-acc-item:last-child { border-bottom: none; }
.svc-acc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: #1e293b;
  background: #f8fafc;
  transition: background 0.2s;
  user-select: none;
}
.svc-acc-header:hover { background: #f1f5f9; }
.svc-acc-arrow {
  transition: transform 0.3s ease;
  font-size: 12px;
  color: #94a3b8;
}
.svc-acc-open .svc-acc-arrow { transform: rotate(180deg); }
.svc-acc-body { padding: 16px 18px; }


.svc-acc-line { padding: 7px 0; font-size: 14px; color: #475569; line-height: 1.6; }
.svc-acc-check { color: #16a34a; }
.svc-acc-check i { margin-right: 6px; }
.svc-acc-star { color: #d97706; font-weight: 600; }
.svc-acc-star i { margin-right: 6px; }
.svc-acc-warn { color: #dc2626; }
.svc-acc-warn i { margin-right: 6px; }

/* ===== Style C: Key-Value Grid ===== */
.svc-kv-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  padding: 10px 16px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #f0f6ff 0%, #f8fafc 100%);
  border-radius: 8px;
  border-left: 3px solid #1e6fda;
}


.svc-kv-full {
  padding: 8px 16px;
  font-size: 14px;
  color: #475569;
  line-height: 1.7;
}
.svc-kv-check { color: #16a34a; }
.svc-kv-check i { margin-right: 6px; }
.svc-kv-star {
  color: #d97706;
  font-weight: 600;
  background: #fffbeb;
  border-radius: 6px;
  margin: 4px 0;
}
.svc-kv-star i { margin-right: 6px; }
.svc-kv-warn {
  color: #dc2626;
  background: #fef2f2;
  border-radius: 6px;
  margin: 4px 0;
}
.svc-kv-warn i { margin-right: 6px; }

/* ===== Dark mode: Style Toggle + 3 Styles ===== */

body.dark .svc-style-btn { background: #1e2235; border-color: #2d3352; color: #94a3b8; }
body.dark .svc-style-btn:hover { border-color: #5a9be6; color: #5a9be6; }
body.dark .svc-style-btn.active { background: #1e6fda; color: #fff; border-color: #1e6fda; }
body.dark .svc-timeline::before { background: linear-gradient(to bottom, #5a9be6 0%, #2d3352 30%, #2d3352 70%, #5a9be6 100%); }
body.dark .svc-tl-dot { background: #475569; border-color: #151722; box-shadow: 0 0 0 1px #2d3352; }
body.dark .svc-tl-content { color: #94a3b8; }
body.dark .svc-tl-title .svc-tl-content { color: #e2e8f0; }


body.dark .svc-accordion { border-color: #232842; }
body.dark .svc-acc-item { border-color: #232842; }
body.dark .svc-acc-header { background: #0f1017; color: #e2e8f0; }
body.dark .svc-acc-header:hover { background: #1a1d2e; }


body.dark .svc-acc-line { color: #94a3b8; }

body.dark .svc-kv-title { background: linear-gradient(135deg, #1a2744 0%, #151722 100%); color: #e2e8f0; border-color: #5a9be6; }


body.dark .svc-kv-full { color: #94a3b8; }
body.dark .svc-kv-star { background: rgba(245, 158, 11, 0.1); }
body.dark .svc-kv-warn { background: rgba(239, 68, 68, 0.1); }

/* ===== Auth Page Tabs (주문하기 / 공지사항) ===== */
.auth-page-tabs {
  display: flex;
  gap: 0;
}
.auth-page-tab {
  padding: 0 0 12px;
  margin-right: 28px;
  font-size: 18px;
  font-weight: 700;
  color: #b0b7c3;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  outline: none;
  transition: all 0.2s;
}
.auth-page-tab:hover {
  color: #64748b;
}
.auth-page-tab.active {
  color: #1e293b;
  border-bottom-color: #1e293b;
}

/* Notice Ticker */
.lk-notice-ticker {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  margin: 0 20px 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
}
.lk-notice-ticker:hover {
  background: #f1f5f9;
}
.lk-ticker-badge {
  flex-shrink: 0;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}
.lk-ticker-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lk-ticker-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.lk-ticker-date {
  font-size: 12px;
  color: #94a3b8;
}


/* Notice List */
.lk-notice-item {
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.2s;
}
.lk-notice-item:last-child {
  border-bottom: none;
}
.lk-notice-item:hover {
  background: #fafbfc;
}
.lk-notice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 4px;
}
.lk-notice-info {
  flex: 1;
  min-width: 0;
}
.lk-notice-title {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 6px;
}
.lk-notice-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lk-notice-badge {
  font-size: 12px;
  font-weight: 600;
}
.lk-notice-badge i {
  margin-right: 3px;
}
.lk-notice-date {
  font-size: 12px;
  color: #94a3b8;
}
.lk-notice-arrow {
  font-size: 13px;
  color: #cbd5e1;
  flex-shrink: 0;
  margin-left: 12px;
  transition: transform 0.2s;
}
.lk-notice-item.open .lk-notice-arrow {
  transform: rotate(90deg);
  color: #1e6fda;
}
.lk-notice-body {
  display: none;
  padding: 0 4px 18px;
  font-size: 14px;
  color: #475569;
  line-height: 1.8;
}
.lk-notice-body p { margin-bottom: 10px; }
.lk-notice-body ul { padding-left: 20px; margin-bottom: 10px; }
.lk-notice-body li { margin-bottom: 4px; }
.lk-notice-item.open .lk-notice-body {
  display: block;
}

/* Dark mode */
body.dark .auth-page-tab { color: #64748b; }
body.dark .auth-page-tab.active { color: #e2e8f0; border-bottom-color: #e2e8f0; }
body.dark .lk-notice-ticker { background: #1a1b2e; border-color: #2d2f45; }
body.dark .lk-ticker-title { color: #e2e8f0; }
body.dark .lk-notice-item { border-bottom-color: #232842; }
body.dark .lk-notice-item:hover { background: #1a1b2e; }
body.dark .lk-notice-title { color: #e2e8f0; }
body.dark .lk-notice-date { color: #64748b; }
body.dark .lk-notice-body { color: #94a3b8; }
body.dark .lk-notice-arrow { color: #475569; }

/* Mobile */
@media (max-width: 767.98px) {
  .auth-page-tab { font-size: 15px; margin-right: 20px; }
  .lk-notice-ticker { margin: 0 12px 12px; padding: 10px 14px; }
  .lk-ticker-right { display: none; }
  .lk-notice-header { padding: 14px 0; }
  .lk-notice-title { font-size: 14px; }
}

/* ===== Auth Order Box (Guest-Style Separated Boxes) ===== */
.auth-order-box {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}
.auth-step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid #f1f5f9;
  border-radius: 14px 14px 0 0;
}
.auth-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--g-primary, #1e6fda);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.auth-step-header > span:last-child {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}
.auth-order-box-body {
  padding: 24px;
}
.auth-order-box-body .form-group label {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
}
.auth-order-box-body .form-control {
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  background: #f8fafc;
  transition: border-color 0.2s;
}
.auth-order-box-body .form-control:focus {
  border-color: #5a9be6;
  background: #fff;
  box-shadow: none;
}
.auth-order-box-body .btn-primary {
  background: linear-gradient(135deg, #1e6fda, #1557b0);
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
}
.auth-order-box-body .btn-primary:hover {
  background: linear-gradient(135deg, #6D28D9, #4C1D95);
}

/* Auth Order Box - Dark Mode */
body.dark .auth-order-box {
  background: #151722;
  border-color: #232842;
  box-shadow: 0 1px 8px rgba(0,0,0,0.2);
}
body.dark .auth-step-header {
  border-bottom-color: #232842;
}
body.dark .auth-step-header > span:last-child {
  color: #e2e8f0;
}
body.dark .auth-order-box-body .form-group label {
  color: #cbd5e1;
}
body.dark .auth-order-box-body .form-control {
  background: #0f1017;
  border-color: #232842;
  color: #e2e8f0;
}
body.dark .auth-order-box-body .form-control:focus {
  border-color: #1e6fda;
  background: #1a1d2e;
}

/* Auth Box 2 Browser - Dark Mode */
body.dark .auth-order-box .guest-browser-breadcrumb {
  background: #1a1b2e;
  border-bottom-color: #232842;
  color: #cbd5e1;
}
body.dark .auth-order-box .guest-browser-left {
  border-right-color: #232842;
}
body.dark .auth-order-box .guest-cat-item {
  color: #cbd5e1;
  border-bottom-color: #232842;
}
body.dark .auth-order-box .guest-cat-item:hover {
  background: #1a1b2e;
  color: #5a9be6;
}
body.dark .auth-order-box .guest-cat-item.active {
  color: #5a9be6;
  border-left-color: #5a9be6;
  background: #1f1835;
}
body.dark .auth-order-box .guest-svc-item {
  border-bottom-color: #232842;
}
body.dark .auth-order-box .guest-svc-item:hover {
  background: #1f1835;
}
body.dark .auth-order-box .guest-svc-item.active {
  background: #1f1835;
  border-left-color: #5a9be6;
}
body.dark .auth-order-box .guest-svc-item-name {
  color: #cbd5e1;
}
body.dark .auth-order-box .guest-svc-item-price {
  color: #5a9be6;
}

/* Auth Order Box - Mobile */
@media (max-width: 767.98px) {
  .auth-step-header {
    padding: 16px;
  }
  .auth-order-box-body {
    padding: 16px;
  }
  .auth-order-header {
    padding: 16px;
  }
  .auth-platform-grid {
    padding: 0 16px 16px;
  }
}
.badge {
  white-space: nowrap !important;
  color: white !important;
}


.api-list .item .form-select{width:221px; border:1px solid #F2F6F9;}

.alert table { --bs-table-bg: transparent; }
.close { float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .5;}
button.close { background-color: transparent; border: 0; }
.alert-dismissible .close { position: absolute; top: 0; right: 0; padding: 0.75rem 1.25rem; color: inherit; }

.search-dropdown .input-wrapper {
  position: relative;
}

.search-dropdown .input-wrapper .input-wrapper__prepend {
  left: 12px;
}

.search-dropdown .input-wrapper .input-wrapper__prepend, .search-dropdown .input-wrapper .input-wrapper__append {
  position: absolute;
  background: none;
  border: none;
  top: 50%;
  transform: translateY(-50%);
  padding: 0px 2px;
}

.search-dropdown .input-wrapper .form-control {
  padding-left: calc(10px + 24px);
  padding-right: calc(10px + 24px);
}

.search-dropdown .input-wrapper .input-wrapper__append {
  right: 8px;
}

.search-dropdown .input-wrapper .input-wrapper__prepend, .search-dropdown .input-wrapper .input-wrapper__append {
  position: absolute;
  background: none;
  border: none;
  top: 50%;
  transform: translateY(-50%);
  padding: 0px 2px;
}

.select2-container {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle;
}

.select2-container--open .select2-dropdown {
  left: 0;
}

.select2-dropdown {
  display: block !important;
  position: absolute;
  left: -100000px;
  width: 100%;
  z-index: 5;
  margin-top: 0px !important;
}


.select2-results__options {
  list-style: none !important;
  margin: 0 !important;
  padding: 0;
  display: block !important;
  width: 100%;
  position: relative !important;
  box-shadow: none !important;
  border-radius: 0px !important;
  border: none !important;
}

.select2-results__option {
  display: block;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: #333;
  user-select: none;
  -webkit-user-select: none;
}

.select2-container .dropdown-menu > li > a {
  white-space: inherit;
}

.select2-results__option a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333;
  text-decoration: none;
}

.badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #777;
  border-radius: 10px;
}

.select2-container .select2-selection__text {
  display: inline;
  vertical-align: middle;
}


.short {
    max-width: 60px;
}

.btn-xs {
  padding: .25rem .4rem !important;
  font-size: 0.875rem !important;
}

/*
.modal-backdrop {
  opacity: .7 !important;
}
*/

.btn-default {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-orange);
  --bs-btn-border-color: var(--bs-orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-dark);
  --bs-btn-hover-border-color: var(--bs-dark);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-dark);
  --bs-btn-active-border-color: var(--bs-dark);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}

.form-group { margin-bottom: 1rem !important; }

.search-dropdown .input-wrapper .input-wrapper__prepend, .search-dropdown .input-wrapper .input-wrapper__append {
color:#585c5e
}

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ===========================================
   서비스 설명 영역 - 깔끔한 디자인
   =========================================== */

/* 설명 섹션 전체 컨테이너 */
#service_description,
div[id="service_description"],
.form-group#service_description {
  margin: 25px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* 설명 레이블 */
#service_description > label,
#service_description label.control-label {
  color: #2c3e50 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  margin-bottom: 15px !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 0 !important;
}

#service_description > label::before,
#service_description label.control-label::before {
  content: '\f05a' !important;
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
  color: white !important;
  font-size: 16px !important;
  width: 36px !important;
  height: 36px !important;
  background: linear-gradient(135deg, #1e6fda 0%, #1557b0 100%) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important;
}

/* 설명 내용 박스 */
#service_description .panel-body,
#service_description > div,
#service_description div.panel-body {
  background: white !important;
  border: 2px solid #E5EEFF !important;
  border-left: 5px solid #1e6fda !important;
  border-radius: 12px !important;
  padding: 30px !important;
  box-shadow: 0 2px 8px rgba(24, 91, 220, 0.06) !important;
  position: relative !important;
  overflow: visible !important;
  min-height: 100px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* 모든 텍스트 기본 스타일 */
#service_description .panel-body,
#service_description .panel-body * {
  position: relative !important;
  z-index: 1 !important;
  color: #464E77 !important;
  font-size: 13px !important;
  line-height: 1.0 !important;
  font-weight: 400 !important;
}

/* 단락 간격 */
#service_description .panel-body > *:not(:last-child) {
  margin-bottom: 8px !important;
}

/* 강조 텍스트 (빨간색) */
#service_description .panel-body strong,
#service_description .panel-body b,
#service_description .panel-body span[style*="color: red"],
#service_description .panel-body span[style*="color:#ff0000"],
#service_description .panel-body span[style*="color:#dc3545"],
#service_description .panel-body font[color="red"] {
  color: #DC3545 !important;
  font-weight: 700 !important;
}

/* 파란색 강조 텍스트 */
#service_description .panel-body span[style*="color: blue"],
#service_description .panel-body span[style*="color:#0000ff"],
#service_description .panel-body span[style*="color:#185bdc"],
#service_description .panel-body font[color="blue"] {
  color: #1e6fda !important;
  font-weight: 700 !important;
}

/* 강조 텍스트 */
#service_description .panel-body span[style*="color: orange"],
#service_description .panel-body span[style*="color:#ff9900"],
#service_description .panel-body span[style*="color:#ffab5a"],
#service_description .panel-body font[color="orange"] {
  color: #1e6fda !important;
  font-weight: 700 !important;
}

/* 링크 스타일 */
#service_description .panel-body a {
  color: #1e6fda !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  word-break: break-all !important;
}

#service_description .panel-body a:hover {
  color: #1557b0 !important;
  text-decoration: none !important;
}

/* 줄바꿈 간격 */
#service_description .panel-body br {
  display: block !important;
  content: "" !important;
  margin: 4px 0 !important;
}

/* =====================================================
   컨텐츠 카드 기본 스타일
   ===================================================== */


/* =====================================================
   동적 필드 영역 - 깔끔한 카드 디자인
   ===================================================== */

#fields {
  margin: 0 !important;
  padding: 0 !important;
}

#fields .form-group {
  background: white !important;
  border: 2px solid #ECEEF6 !important;
  border-radius: 12px !important;
  padding: 25px !important;
  margin-bottom: 18px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

#fields .form-group:hover {
  border-color: #C4D7FF !important;
  box-shadow: 0 4px 12px rgba(24, 91, 220, 0.08) !important;
}

/* 레이블 스타일 */
#fields .form-group > label {
  color: #2c3e50 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 0 !important;
}

#fields .form-group > label::before {
  content: '\f054' !important;
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
  color: #1e6fda !important;
  font-size: 10px !important;
  margin-right: 10px !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border-radius: 0 !important;
  display: inline !important;
  position: static !important;
  transform: none !important;
}

/* 입력 필드 */
#fields .form-group .form-control,
#fields .form-group input[type="text"],
#fields .form-group input[type="number"],
#fields .form-group textarea {
  border: 2px solid #E9ECEF !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  font-size: 15px !important;
  transition: all 0.3s ease !important;
  background: #FAFBFC !important;
  color: #2c3e50 !important;
  width: 100% !important;
  margin-top: 0 !important;
  font-weight: 500 !important;
}

#fields .form-group .form-control:focus,
#fields .form-group input:focus,
#fields .form-group textarea:focus {
  border-color: #1e6fda !important;
  box-shadow: 0 0 0 3px rgba(24, 91, 220, 0.1) !important;
  background: white !important;
  outline: none !important;
}

#fields .form-group .form-control::placeholder,
#fields .form-group input::placeholder,
#fields .form-group textarea::placeholder {
  color: #ADB5BD !important;
  font-weight: 400 !important;
}

#fields .form-group textarea {
  min-height: 120px !important;
  resize: vertical !important;
  line-height: 1.6 !important;
}

/* Small 설명 텍스트 */
#fields .form-group small {
  display: block !important;
  margin-top: 10px !important;
  color: #6C757D !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  padding: 12px 16px !important;
  background: #F8F9FA !important;
  border-radius: 8px !important;
  border-left: 3px solid #DEE2E6 !important;
  font-weight: 400 !important;
}

/* =====================================================
   비용 계산 카드 - 톤앤매너 맞춤
   ===================================================== */


/* =====================================================
   약관 동의 체크박스
   ===================================================== */

.form-group:has(.terms-accept-checkbox) {
  background: #F8F9FA !important;
  border: 2px solid #E9ECEF !important;
  border-radius: 10px !important;
  padding: 20px 25px !important;
  margin-top: 20px !important;
  margin-bottom: 25px !important;
}

.form-group:has(.terms-accept-checkbox) label {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  color: #495057 !important;
  cursor: pointer !important;
  font-weight: 500 !important;
}

.form-group:has(.terms-accept-checkbox) label::before {
  display: none !important;
}

.form-group:has(.terms-accept-checkbox) input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  margin-right: 12px !important;
  cursor: pointer !important;
  accent-color: #1e6fda !important;
  flex-shrink: 0 !important;
}

.form-group:has(.terms-accept-checkbox) a {
  color: #1e6fda !important;
  font-weight: 600 !important;
  margin-left: 4px !important;
  text-decoration: underline !important;
}

.form-group:has(.terms-accept-checkbox) a:hover {
  color: #1557b0 !important;
  text-decoration: none !important;
}

/* =====================================================
   주문하기 버튼
   ===================================================== */

button[type="submit"].btn-primary {
  background: linear-gradient(135deg, #1e6fda 0%, #1557b0 100%) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 10px 30px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: white !important;
  box-shadow: 0 8px 20px rgba(24, 91, 220, 0.35) !important;
  transition: all 0.3s ease !important;
  margin-top: 10px !important;
  width: 100% !important;
  cursor: pointer !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  position: relative !important;
  overflow: hidden !important;
}

button[type="submit"].btn-primary::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.3) !important;
  transform: translate(-50%, -50%) !important;
  transition: width 0.6s ease, height 0.6s ease !important;
}

button[type="submit"].btn-primary:hover::before {
  width: 300px !important;
  height: 300px !important;
}

button[type="submit"].btn-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 28px rgba(24, 91, 220, 0.45) !important;
}

button[type="submit"].btn-primary:active {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(24, 91, 220, 0.35) !important;
}

/* =====================================================
   알림 메시지 스타일
   ===================================================== */

.alert {
  border-radius: 12px !important;
  border: none !important;
  padding: 20px 25px 20px 65px !important;
  margin-bottom: 25px !important;
  position: relative !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.alert-danger {
  background: linear-gradient(135deg, #FFF5F5 0%, #FFE5E5 100%) !important;
  border-left: 5px solid #DC3545 !important;
  color: #721c24 !important;
}

.alert-danger::before {
  content: '\f071' !important;
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
  position: absolute !important;
  left: 22px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 24px !important;
  color: #DC3545 !important;
}

.alert-success {
  background: linear-gradient(135deg, #F0FFF4 0%, #E6FFED 100%) !important;
  border-left: 5px solid #28A745 !important;
  color: #155724 !important;
}

.alert-success::before {
  content: '\f00c' !important;
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
  position: absolute !important;
  left: 22px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 24px !important;
  color: #28A745 !important;
}

.alert h4 {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.alert button.close {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  font-size: 24px !important;
  line-height: 1 !important;
  color: inherit !important;
  opacity: 0.5 !important;
  cursor: pointer !important;
}

.alert button.close:hover {
  opacity: 0.8 !important;
}

/* =====================================================
   Hidden 클래스
   ===================================================== */

.hidden {
  display: none !important;
}

/* =====================================================
   반응형 디자인 개선
   ===================================================== */

@media (max-width: 767.98px) {
  /* 서비스 설명 */
  #service_description .panel-body {
    padding: 20px !important;
    font-size: 14px !important;
  }
  
  #service_description .panel-body * {
    font-size: 14px !important;
  }
  
  #service_description > label {
    font-size: 15px !important;
    padding-left: 40px !important;
  }

  #service_description > label::before {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }
  
  /* 동적 필드 */
  #fields .form-group {
    padding: 20px !important;
  }
  
  #fields .form-group > label {
    font-size: 13px !important;
  }

  #fields .form-group .form-control,
  #fields .form-group input,
  #fields .form-group textarea {
    padding: 12px 16px !important;
    font-size: 14px !important;
  }

  #fields .form-group small {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }
  
 /* 비용 계산 */
  

  

  

  

  
  
  /* 주문 버튼 */
  button[type="submit"].btn-primary {
    padding: 12px 20px !important;
    font-size: 15px !important;
  }
  
  /* 주문 버튼 */
  button[type="submit"].btn-primary {
    padding: 12px 20px !important;
    font-size: 15px !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #service_description .panel-body {
    padding: 25px !important;
  }
  
  #fields .form-group {
    padding: 22px !important;
  }
  
  
}


/* 상품 카테고리 드롭다운 개선 */
.category-dropdown-btn {
  background: white !important;
  border: 2px solid #B3C7F7 !important;
  padding: 0 20px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #495057 !important;
  border-radius: 10px !important;
  transition: all 0.3s !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  line-height: 1 !important;
}

.category-dropdown-btn span {
  display: flex;
  align-items: center;
  line-height: 1;
}

.category-dropdown-btn i {
  display: flex;
  align-items: center;
  line-height: 1;
}

.category-dropdown-btn:hover {
  border-color: #1e6fda !important;
  box-shadow: 0 4px 12px rgba(24, 91, 220, 0.15) !important;
  background: #FAFBFF !important;
}

.category-dropdown-btn[aria-expanded="true"] {
  border-color: #1e6fda !important;
  background: #F8F9FF !important;
}

.category-dropdown-btn[aria-expanded="true"] i {
  transform: rotate(180deg) !important;
}

/* 반응형 */
@media (max-width: 767.98px) {
  
  
  .category-dropdown-btn {
    min-height: 50px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
  }
  
  #category-drop .dropdown-item {
    padding: 12px 16px;
    font-size: 13px;
  }
}

/* ===========================================
   NEW ORDER 페이지 전용 스타일
   기존 style.css 맨 아래에 추가하세요
   =========================================== */

/* 단계별 레이블 스타일 */


/* 섹션 헤더 스타일 */


/* SNS 채널 선택 박스 개선 */


/* SNS 채널 그리드 */


/* SNS 채널 버튼 */


/* 호버 색상 효과 */


/* 상품 카테고리 드롭다운 개선 */
.category-dropdown-btn {
  background: white !important;
  border: 2px solid #B3C7F7 !important;
  padding: 0 20px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #495057 !important;
  border-radius: 10px !important;
  transition: all 0.3s !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  line-height: 1 !important;
}

.category-dropdown-btn span {
  display: flex;
  align-items: center;
  line-height: 1;
}

.category-dropdown-btn i {
  display: flex;
  align-items: center;
  line-height: 1;
}

.category-dropdown-btn:hover {
  border-color: #1e6fda !important;
  box-shadow: 0 4px 12px rgba(24, 91, 220, 0.15) !important;
  background: #FAFBFF !important;
}

.category-dropdown-btn[aria-expanded="true"] {
  border-color: #1e6fda !important;
  background: #F8F9FF !important;
}

.category-dropdown-btn[aria-expanded="true"] i {
  transform: rotate(180deg) !important;
}

/* 3단계 새로운 디자인 스타일 */


/* 예상 비용 카드 */


/* 주문하기 버튼 - 크기 줄임 */
button[type="submit"].btn-primary {
  background: linear-gradient(135deg, #1e6fda 0%, #1557b0 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 25px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(24, 91, 220, 0.3) !important;
  transition: all 0.3s ease !important;
  margin-top: 10px !important;
  width: 100% !important;
  cursor: pointer !important;
  letter-spacing: 0.3px !important;
  position: relative !important;
  overflow: hidden !important;
}

button[type="submit"].btn-primary::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.3) !important;
  transform: translate(-50%, -50%) !important;
  transition: width 0.6s ease, height 0.6s ease !important;
}

button[type="submit"].btn-primary:hover::before {
  width: 300px !important;
  height: 300px !important;
}

button[type="submit"].btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(24, 91, 220, 0.4) !important;
}

button[type="submit"].btn-primary:active {
  transform: translateY(0px) !important;
  box-shadow: 0 3px 10px rgba(24, 91, 220, 0.3) !important;
}

/* ===========================================
   반응형 디자인
   =========================================== */

@media (max-width: 767.98px) {
  
  
  
  
  
  
  

  

  

  

  
  
  /* 비용 계산 */
  

  

  

  

  
  
  /* 주문 버튼 */
  button[type="submit"].btn-primary {
    padding: 12px 20px !important;
    font-size: 15px !important;
  }

  /* 3단계 박스 */
  

  
  
  .category-dropdown-btn {
    min-height: 50px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
  }
}


/* ===========================================
   랜딩 페이지 (비로그인 홈)
   =========================================== */

/* 실시간 주문 알림 티커 */


.ticker-icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	color: #fff;
	flex-shrink: 0;
}

.ticker-icon.instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.ticker-icon.youtube { background: #FF0000; }
.ticker-icon.facebook { background: #1877F2; }
.ticker-icon.tiktok { background: #000; }
.ticker-icon.twitter { background: #1DA1F2; }
.ticker-icon.telegram { background: #0088cc; }
.ticker-icon.naver { background: #03C75A; font-weight: 700; font-size: 11px; }
.ticker-icon.kakao { background: #FEE500; color: #000; }

.ticker-time {
	color: rgba(255,255,255,0.7);
	font-weight: 500;
	font-size: 13px;
	white-space: nowrap;
}

.ticker-msg {
	color: #fff;
	font-size: 14px;
	font-weight: 400;
}

.ticker-msg strong {
	font-weight: 600;
}

/* 랜딩 3단 레이아웃 */
.landing-wrapper {
	display: flex;
	min-height: calc(100vh - 52px);
	background: #F7F8FC;
}

.landing-sidebar {
	width: 220px;
	background: #fff;
	border-right: 1px solid #eee;
	padding: 30px 0;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
}

.landing-sidebar .ls-logo {
	padding: 0 20px 24px;
	border-bottom: 1px solid #f0f0f0;
	margin-bottom: 20px;
}

.landing-sidebar .ls-logo img {
	max-height: 40px;
}

.landing-sidebar .ls-auth-btns {
	padding: 0 16px;
	margin-bottom: 24px;
	display: flex;
	gap: 8px;
}

.ls-btn-login {
	flex: 1;
	padding: 10px 0;
	border: 2px solid #1e6fda;
	border-radius: 8px;
	color: #1e6fda;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: all 0.2s;
	background: #fff;
	cursor: pointer;
}

.ls-btn-login:hover {
	background: #1e6fda;
	color: #fff;
}

.ls-btn-signup {
	flex: 1;
	padding: 10px 0;
	background: #1e6fda;
	border: 2px solid #1e6fda;
	border-radius: 8px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: all 0.2s;
	cursor: pointer;
}

.ls-btn-signup:hover {
	background: #0d4ab8;
	color: #fff;
}

.landing-sidebar .ls-nav {
	list-style: none;
	padding: 0;
	margin: 0;
}

.landing-sidebar .ls-nav li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	color: #555;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s;
}

.landing-sidebar .ls-nav li a:hover {
	background: #E5EEFF;
	color: #1e6fda;
}

.landing-sidebar .ls-nav li a i {
	width: 20px;
	text-align: center;
	font-size: 16px;
}

.landing-sidebar .ls-biz-info {
	margin-top: auto;
	padding: 20px 16px 0;
	border-top: 1px solid #f0f0f0;
	font-size: 11px;
	color: #999;
	line-height: 1.6;
}

.landing-sidebar .ls-biz-info strong {
	color: #666;
}

.landing-sidebar .ls-biz-info a {
	color: #1e6fda;
	text-decoration: none;
}

/* 랜딩 메인 콘텐츠 */
.landing-main {
	flex: 1;
	padding: 30px;
	min-width: 0;
	overflow-y: auto;
}

/* 랜딩 우측 사이드바 */
.landing-right {
	width: 320px;
	flex-shrink: 0;
	padding: 30px 20px;
	overflow-y: auto;
}

/* 공지사항 카드 */


/* 서비스 안내 카드 */


/* 3대 차별화 카드 */


/* 지원 플랫폼 */
.platform-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 30px;
}

.platform-card {
	background: #fff;
	border-radius: 12px;
	padding: 24px 16px;
	text-align: center;
	border: 2px solid transparent;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	transition: all 0.2s;
}

.platform-card:hover {
	border-color: #1e6fda;
	box-shadow: 0 4px 16px rgba(24,91,220,0.1);
	transform: translateY(-3px);
}

.platform-card-icon {
	font-size: 32px;
	margin-bottom: 10px;
}

.platform-card-icon.ig { color: #E4405F; }
.platform-card-icon.yt { color: #FF0000; }
.platform-card-icon.fb { color: #1877F2; }
.platform-card-icon.tk { color: #000; }
.platform-card-icon.tw { color: #1DA1F2; }
.platform-card-icon.tg { color: #0088cc; }
.platform-card-icon.nv { color: #03C75A; }
.platform-card-icon.kk { color: #FEE500; }

.platform-card-name {
	font-size: 14px;
	font-weight: 600;
	color: #333;
	margin-bottom: 6px;
}

.platform-card-services {
	font-size: 12px;
	color: #999;
	line-height: 1.5;
}

/* 이용 프로세스 */


/* CTA 섹션 */


/* 랜딩 섹션 제목 */


/* 주의사항 리스트 */


/* 랜딩 모드: 기존 헤더/푸터/모바일 네비 숨김 */
body.landing-mode .header,
body.landing-mode .footer,
body.landing-mode > .app-navbar {
	display: none !important;
}

/* 랜딩 반응형 */
@media (max-width: 1199px) {
	.landing-right {
		width: 280px;
	}
}

@media (max-width: 991px) {
	.landing-sidebar {
		display: none;
	}
	.landing-right {
		display: none;
	}
	.landing-main {
		padding: 20px;
	}
	
	.platform-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	
}

@media (max-width: 575px) {
	.platform-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	
	
	
	
}


/* ============================================
   Landing V2 - 대시보드형 (snspop 스타일)
   ============================================ */

/* 히어로 배너 */
.hero-banner {
	background: linear-gradient(135deg, #1e6fda 0%, #1557b0 50%, #4A6FFF 100%);
	color: #fff;
	text-align: center;
	padding: 40px 24px 36px;
	border-radius: 12px;
	margin-bottom: 24px;
}
.hero-content {
	max-width: 520px;
	margin: 0 auto;
}
.hero-title {
	font-size: 32px;
	font-weight: 900;
	line-height: 1.35;
	margin: 0 0 24px;
	letter-spacing: -0.5px;
}
.hero-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 32px;
}
.hero-divider span {
	display: block;
	height: 3px;
	width: 48px;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 2px;
}
.hero-divider span:nth-child(2) {
	width: 8px;
	border-radius: 50%;
	height: 8px;
}
.hero-stats {
	display: flex;
	justify-content: center;
	gap: 60px;
}
.hero-stat {
	display: flex;
	align-items: center;
	gap: 14px;
}
.hero-stat > i {
	font-size: 32px;
	opacity: 0.7;
}
.hero-stat-info {
	text-align: left;
}
.hero-stat-info strong {
	display: block;
	font-size: 28px;
	font-weight: 900;
	letter-spacing: 0.5px;
	line-height: 1.2;
}
.hero-stat-info span {
	font-size: 13px;
	opacity: 0.75;
	font-weight: 500;
}

/* 3단 레이아웃 */
.landing-wrapper.landing-v2 {
	display: flex;
	min-height: calc(100vh - 52px);
	background: #F7F8FC;
}
.landing-wrapper.landing-v2 .landing-sidebar {
	width: 240px;
	min-width: 240px;
	background: #fff;
	border-right: 1px solid #eef0f5;
	padding: 20px 0;
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}
.landing-wrapper.landing-v2 .landing-main {
	flex: 1;
	padding: 20px 24px;
	min-width: 0;
}
.landing-wrapper.landing-v2 .landing-right {
	width: 380px;
	min-width: 380px;
	padding: 20px;
	display: block;
}

/* 사이드바 V2 */
.ls-v2-msg {
	padding: 0 16px;
	margin-bottom: 16px;
	font-size: 12px;
	color: #999;
	text-align: center;
	line-height: 1.5;
}
.landing-wrapper.landing-v2 .ls-auth-btns {
	padding: 0 16px;
	margin-bottom: 20px;
}
.landing-wrapper.landing-v2 .ls-nav {
	border-top: 1px solid #f0f0f0;
	padding-top: 4px;
}
.landing-wrapper.landing-v2 .ls-nav li a {
	padding: 9px 20px;
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 8px;
	color: #555;
	text-decoration: none;
	transition: all 0.15s;
}
.landing-wrapper.landing-v2 .ls-nav li a:hover {
	background: #f0f6ff;
	color: #1e6fda;
}
.landing-wrapper.landing-v2 .ls-nav li.active a {
	background: #EBF1FF;
	color: #1e6fda;
	font-weight: 700;
	border-left: 3px solid #1e6fda;
}
.landing-wrapper.landing-v2 .ls-nav li a i {
	width: 18px;
	text-align: center;
	font-size: 13px;
	color: inherit;
}
.ls-nav-divider {
	height: 1px;
	background: #f0f0f0;
	margin: 4px 0;
	list-style: none;
}
.landing-wrapper.landing-v2 .ls-biz-info {
	margin-top: auto;
	padding: 16px;
	font-size: 11px;
	border-top: 1px solid #f0f0f0;
	color: #999;
	line-height: 1.6;
}
.ls-biz-info a {
	color: #1e6fda;
	text-decoration: none;
}
.ls-copyright {
	margin-top: 8px;
	color: #bbb;
}
.ls-links {
	margin-top: 4px;
}
.ls-links a {
	color: #999 !important;
	font-size: 10px;
	margin-right: 8px;
}
.ls-links a:hover {
	color: #1e6fda !important;
}

/* ---- 로그인 모달 ---- */
.login-modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10000;
	align-items: center;
	justify-content: center;
}
.login-modal-overlay.show {
	display: flex;
}
.login-modal-box {
	background: #fff;
	border-radius: 16px;
	max-width: 440px;
	width: 90%;
	position: relative;
	animation: modalFadeIn 0.25s ease;
}
@keyframes modalFadeIn {
	from { opacity: 0; transform: translateY(-20px); }
	to { opacity: 1; transform: translateY(0); }
}
.login-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 30px 0;
}
.login-modal-header h3 {
	font-size: 20px;
	font-weight: 700;
	color: #333;
	margin: 0;
}
.login-modal-close {
	background: none;
	border: none;
	font-size: 24px;
	color: #999;
	cursor: pointer;
	padding: 0;
	line-height: 1;
}
.login-modal-close:hover { color: #333; }
.login-modal-body {
	padding: 24px 30px;
}
.login-modal-body .form-control {
	min-height: 48px;
	border-radius: 10px;
	border: 1px solid #e0e0e0;
	font-size: 14px;
	margin-bottom: 12px;
	padding: 10px 16px;
}
.login-modal-body .form-control:focus {
	border-color: #1e6fda;
	box-shadow: 0 0 0 3px rgba(24, 91, 220, 0.1);
}
.login-modal-body .btn-primary {
	width: 100%;
	min-height: 48px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	background: #1e6fda;
	border-color: #1e6fda;
}
.login-modal-body .btn-primary:hover {
	background: #1350c0;
	border-color: #1350c0;
}
.login-modal-options {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	margin-bottom: 16px;
}
.login-modal-options label { margin: 0; font-weight: 400; color: #888; cursor: pointer; }
.login-modal-options a { color: #1e6fda; text-decoration: none; }
.login-modal-footer {
	padding: 0 30px 24px;
	text-align: center;
	font-size: 14px;
	color: #888;
}
.login-modal-footer a { color: #1e6fda; font-weight: 600; text-decoration: none; margin-left: 4px; }

/* ---- 메인: 공지사항 ---- */
.main-notice {
	background: #fff;
	border-radius: 12px;
	border: 1px solid #eee;
	margin-bottom: 24px;
	overflow: hidden;
}
.main-notice-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #f0f0f0;
}
.main-notice-header h4 {
	font-size: 15px;
	font-weight: 700;
	color: #333;
	margin: 0;
}
.main-notice-header span {
	font-size: 12px;
	color: #999;
}
.main-notice-item {
	display: flex;
	align-items: center;
	padding: 14px 20px;
	border-bottom: 1px solid #f5f5f5;
	cursor: pointer;
	transition: background 0.15s;
	gap: 12px;
}
.main-notice-item:hover { background: #fafbff; }
.main-notice-item:last-child { border-bottom: none; }
.main-notice-date {
	font-size: 12px;
	color: #999;
	white-space: nowrap;
	min-width: 80px;
}
.main-notice-platform {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 5px;
	font-size: 12px;
	color: #fff;
	flex-shrink: 0;
}
.main-notice-platform strong {
	font-size: 13px;
	font-weight: 900;
}
.main-notice-title {
	flex: 1;
	font-size: 13px;
	font-weight: 600;
	color: #333;
}
.badge-new {
	display: inline-block;
	background: #ff4757;
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	padding: 1px 5px;
	border-radius: 3px;
	margin-left: 6px;
	vertical-align: middle;
}
.main-notice-arrow {
	color: #ccc;
	font-size: 12px;
	flex-shrink: 0;
}

/* ---- 메인: 단계 섹션 ---- */
.step-section {
	background: #fff;
	border-radius: 12px;
	border: 2px solid #e2e8f0;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	margin-bottom: 24px;
	overflow: hidden;
}
.step-header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 24px;
}
.step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #1e6fda;
	color: #fff;
	font-size: 16px;
	font-weight: 800;
	flex-shrink: 0;
}
.step-info {
	flex: 1;
}
.step-title {
	font-size: 16px;
	font-weight: 700;
	color: #333;
	margin: 0 0 2px;
}
.step-desc {
	font-size: 12px;
	color: #999;
	margin: 0;
}
.step-divider {
	height: 1px;
	background: #f0f0f0;
	margin: 0 24px;
}
.step-body {
	padding: 20px 24px;
}
.step-guide-text {
	font-size: 13px;
	color: #666;
	margin: 0 0 12px;
}

/* ---- 채널 선택 영역 ---- */
.channel-section {
	padding: 16px 24px 20px;
}
.channel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}
.channel-label {
	font-size: 14px;
	font-weight: 600;
	color: #555;
}
.channel-label i {
	color: #999;
	margin-right: 4px;
}
.channel-toggle {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 5px 12px;
	font-size: 12px;
	color: #777;
	cursor: pointer;
	transition: all 0.2s;
}
.channel-toggle:hover {
	border-color: #1e6fda;
	color: #1e6fda;
}
.channel-toggle i {
	margin-left: 4px;
	font-size: 10px;
	transition: transform 0.3s;
}
.channel-toggle.collapsed i {
	transform: rotate(180deg);
}

/* ---- 카테고리 아이콘 그리드 ---- */
.cat-icon-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0;
	transition: max-height 0.4s ease, opacity 0.3s ease;
	overflow: hidden;
}
.cat-icon-grid.hidden {
	max-height: 0 !important;
	opacity: 0;
	margin: 0;
}
.cat-icon-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.2s;
	border: 2px solid transparent;
	background: none;
	padding: 0;
}
.cat-icon-item:hover {
	background: #f0f6ff;
	transform: translateY(-1px);
}
.cat-icon-item.active {
	border-color: #1e6fda;
	background: #e8f0fe;
}
.cat-icon-item .cat-icon-circle {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: #fff;
	margin-bottom: 4px;
}
.cat-icon-item .cat-icon-label {
	font-size: 11px;
	color: #555;
	font-weight: 500;
	white-space: nowrap;
}
.cat-icon-item.active .cat-icon-label { color: #1e6fda; font-weight: 700; }

/* 아이콘 색상 */
.ci-ig { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.ci-ig-overseas { background: linear-gradient(135deg, #e6683c, #dc2743); }
.ci-ig-popular { background: linear-gradient(135deg, #cc2366, #bc1888); }
.ci-ig-account { background: linear-gradient(135deg, #f09433, #e6683c); }
.ci-yt { background: #FF0000; }
.ci-fb { background: #1877F2; }
.ci-tk { background: #000; }
.ci-tw { background: #1DA1F2; }
.ci-tg { background: #2AABEE; }
.ci-kk { background: #FEE500; color: #391B1B !important; }
.ci-th { background: #000; }
.ci-nv { background: #03C75A; }
.ci-web { background: #6c63ff; }
.ci-etc { background: #6c757d; }
.ci-auto { background: #495057; }
.nv-text {
	font-size: 16px;
	font-weight: 900;
}

/* ---- 서비스 종류 목록 (Step 1) ---- */
.service-type-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.service-type-item {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	border: 1px solid #f0f0f0;
	border-radius: 8px;
	margin-bottom: 8px;
	cursor: pointer;
	transition: all 0.15s;
	font-size: 13px;
	color: #555;
	gap: 8px;
	background: #fff;
}
.service-type-item:hover {
	border-color: #1e6fda;
	background: #f0f6ff;
	color: #1e6fda;
}
.service-type-item.active {
	border-color: #1e6fda;
	background: #EBF1FF;
	color: #1e6fda;
	font-weight: 700;
}
.service-type-item .stype-icon {
	width: 24px;
	height: 24px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: #fff;
	flex-shrink: 0;
}
.service-type-item .stype-name {
	flex: 1;
}

/* ---- 서비스 선택 드롭다운 (Step 2) ---- */
.service-select-area {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.service-select-label {
	font-size: 14px;
	font-weight: 600;
	color: #333;
}
.service-select-num {
	font-size: 12px;
	color: #1e6fda;
	font-weight: 600;
}
.service-select-dropdown {
	min-height: 46px;
	border-radius: 10px;
	border: 1px solid #e0e0e0;
	font-size: 13px;
	padding: 10px 16px;
	color: #555;
	background: #fff;
	cursor: pointer;
}
.service-select-dropdown:focus {
	border-color: #1e6fda;
	box-shadow: 0 0 0 3px rgba(24, 91, 220, 0.1);
}

/* ---- 주문하기 버튼 ---- */
.order-submit-section {
	text-align: center;
	margin-bottom: 24px;
}
.order-submit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	max-width: 400px;
	padding: 16px 32px;
	background: linear-gradient(135deg, #1e6fda, #1557b0);
	color: #fff;
	border-radius: 12px;
	font-size: 18px;
	font-weight: 800;
	text-decoration: none;
	transition: all 0.25s;
	box-shadow: 0 4px 16px rgba(24, 91, 220, 0.3);
}
.order-submit-btn:hover {
	background: linear-gradient(135deg, #1350c0, #2850e8);
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 6px 24px rgba(24, 91, 220, 0.4);
}
.order-submit-btn:active {
	transform: translateY(0);
}
.order-submit-btn i {
	font-size: 20px;
}

/* ---- 우측: 배너 슬라이더 ---- */
.right-banner {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 20px;
}
.right-banner-track {
	display: flex;
	transition: transform 0.5s ease;
}
.right-banner-slide {
	min-width: 100%;
	padding: 32px 24px;
	color: #fff;
}
.right-banner-slide.rb-dark { background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460); }
.right-banner-slide.rb-blue { background: linear-gradient(135deg, #1e6fda, #1557b0); }
.right-banner-slide.rb-purple { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.right-banner-title {
	font-size: 16px;
	font-weight: 800;
	margin-bottom: 8px;
	line-height: 1.4;
}
.right-banner-desc {
	font-size: 12px;
	opacity: 0.8;
	line-height: 1.5;
}
.right-banner-counter {
	position: absolute;
	bottom: 10px;
	right: 14px;
	font-size: 11px;
	color: rgba(255,255,255,0.6);
}

/* ---- 우측: 주문 방법 ---- */
.right-method {
	background: #fff;
	border-radius: 12px;
	border: 1px solid #eee;
	margin-bottom: 20px;
	overflow: hidden;
}
.right-method-header {
	padding: 16px 20px;
	border-bottom: 1px solid #f0f0f0;
}
.right-method-header h4 {
	font-size: 15px;
	font-weight: 700;
	color: #333;
	margin: 0;
}
.right-method-header h4 i {
	color: #1e6fda;
	margin-right: 6px;
}
.right-method-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	border-bottom: 1px solid #f5f5f5;
	font-size: 13px;
	font-weight: 500;
	color: #333;
	text-decoration: none;
	transition: background 0.15s;
}
.right-method-item:hover {
	background: #fafbff;
	color: #1e6fda;
	text-decoration: none;
}
.right-method-item:last-child { border-bottom: none; }
.right-method-item i {
	color: #ccc;
	font-size: 12px;
}

/* ---- 우측: 주문 전 주의사항 ---- */
.right-caution-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 16px 20px;
	background: linear-gradient(135deg, #ff6b35, #f7453d);
	color: #fff;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	margin-bottom: 20px;
	transition: all 0.2s;
}
.right-caution-btn:hover {
	opacity: 0.9;
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(247, 69, 61, 0.3);
}
.right-caution-btn .fa-exclamation-triangle {
	margin-right: 8px;
}
.right-caution-btn .fa-chevron-right {
	font-size: 12px;
}

/* ---- 우측: FAQ ---- */
.right-faq {
	background: #fff;
	border-radius: 12px;
	border: 1px solid #eee;
	margin-bottom: 20px;
	overflow: hidden;
}
.right-faq-header {
	padding: 16px 20px;
	border-bottom: 1px solid #f0f0f0;
}
.right-faq-header h4 {
	font-size: 15px;
	font-weight: 700;
	color: #333;
	margin: 0;
}
.right-faq-header h4 i {
	color: #1e6fda;
	margin-right: 6px;
}
.faq-item {
	border-bottom: 1px solid #f1f5f9;
}
.faq-item:last-child { border-bottom: none; }
.faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: #1e293b;
	user-select: none;
	transition: background 0.2s ease;
}
.faq-question:hover {
	background: #f8fafc;
}
.faq-question i {
	font-size: 14px;
	color: #94a3b8;
	transition: transform 0.3s ease, color 0.2s ease;
	flex-shrink: 0;
	margin-left: 10px;
}
.faq-item.open .faq-question i {
	transform: rotate(45deg);
	color: #1e6fda;
}
.faq-item.open .faq-question {
	color: #1e6fda;
}
.faq-answer {
	max-height: 0;
	overflow: hidden;
	padding: 0 20px;
	font-size: 12px;
	color: #64748b;
	line-height: 1.7;
	transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.open .faq-answer {
	max-height: 500px;
	padding: 0 20px 14px;
}

/* ---- 우측: 궁금하신게 있으신가요? ---- */
.right-contact {
	background: #fff;
	border-radius: 12px;
	border: 1px solid #eee;
	overflow: hidden;
	margin-bottom: 20px;
}
.right-contact-header {
	padding: 16px 20px;
	border-bottom: 1px solid #f0f0f0;
}
.right-contact-header h4 {
	font-size: 15px;
	font-weight: 700;
	color: #333;
	margin: 0;
}
.right-contact-header h4 i {
	color: #1e6fda;
	margin-right: 6px;
}
.right-contact-btns {
	display: flex;
	gap: 10px;
	padding: 16px 20px;
}
.right-contact-kakao {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 16px;
	background: #FEE500;
	color: #391B1B;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.2s;
}
.right-contact-kakao:hover {
	opacity: 0.9;
	color: #391B1B;
	text-decoration: none;
}
.right-contact-board {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 16px;
	background: #f0f1f5;
	color: #555;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.2s;
}
.right-contact-board:hover {
	background: #e4e5ea;
	color: #333;
	text-decoration: none;
}

/* ---- 반응형 ---- */
@media (max-width: 1399px) {
	.landing-wrapper.landing-v2 .landing-right {
		width: 340px;
		min-width: 340px;
	}
}

@media (max-width: 1199px) {
	.landing-wrapper.landing-v2 .landing-right {
		display: none;
	}
	.landing-wrapper.landing-v2 .landing-main {
		padding: 20px;
	}
}

@media (max-width: 991px) {
	.landing-wrapper.landing-v2 .landing-sidebar {
		display: none;
	}
	.landing-wrapper.landing-v2 .landing-main {
		padding: 16px;
	}
	.cat-icon-grid {
		overflow-x: auto;
		flex-wrap: nowrap;
		gap: 4px;
	}
	.cat-icon-item {
		width: 64px;
		height: 64px;
		flex-shrink: 0;
	}
	.cat-icon-item .cat-icon-circle {
		width: 36px;
		height: 36px;
		font-size: 16px;
	}
	.cat-icon-item .cat-icon-label {
		font-size: 10px;
	}
	.step-header {
		padding: 16px 18px;
	}
	.channel-section {
		padding: 12px 18px 16px;
	}
	.step-body {
		padding: 16px 18px;
	}
}

@media (max-width: 575px) {
	.hero-banner {
		padding: 32px 16px 28px;
	}
	.hero-title {
		font-size: 22px;
	}
	.hero-stats {
		gap: 30px;
	}
	.hero-stat-info strong {
		font-size: 20px;
	}
	.hero-stat-info span {
		font-size: 11px;
	}
	.hero-stat > i {
		font-size: 24px;
	}
	.step-number {
		width: 30px;
		height: 30px;
		font-size: 14px;
	}
	.step-title {
		font-size: 14px;
	}
	.order-submit-btn {
		font-size: 16px;
		padding: 14px 24px;
	}
}

/* ===========================================
   Neworder Page - 주문 페이지 스타일
   =========================================== */

/* 빈 요소 숨김 */
.alert:empty,
.help-block:empty,
.text-danger:empty,
.invalid-feedback:empty {
  display: none !important;
}

/* 카테고리 드롭다운 아이콘 제거 */
.category-dropdown-btn::before {
  display: none !important;
}

/* 로딩 스피너 */


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* FAQ 아코디언 */


.faq-accordion-header {
  padding: 18px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f9fc;
}

.faq-accordion-header:hover {
  background: #f0f2f8;
}

.faq-accordion-header.active {
  background: linear-gradient(135deg, #e8f0fe 0%, #f0f7ff 100%);
}


.faq-accordion-icon {
  color: #b0b7c3;
  font-size: 18px;
  min-width: 20px;
  text-align: center;
}

.faq-accordion-header.active .faq-accordion-icon {
  color: #5B8DEE;
}

.faq-accordion-content {
  max-height: 0;
  overflow: hidden;
  background: white;
}

.faq-accordion-content.active {
  max-height: 1000px;
}


/* 공지사항 아이템 호버 */


/* 가이드 박스 호버 */


/* 연락처 버튼 호버 */


/* 공용 모달 */
.common-modal .modal-content {
  border: none;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.common-modal .modal-header {
  border: none;
  padding: 25px 30px;
  position: relative;
}

.common-modal .modal-header .close {
  color: white;
  opacity: 1;
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 28px;
  font-weight: 300;
  text-shadow: none;
}

.common-modal .modal-body {
  padding: 30px;
  line-height: 1.8;
}

.common-modal .modal-footer {
  background: #f8f9fa;
  border-top: 1px solid #dee2e6;
  padding: 20px 30px;
}

/* 콘텐츠 카드 */


.neworder-dropdown-btn {
  background: white !important;
  border: 2px solid #E9ECEF !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  height: auto !important;
  min-height: 50px !important;
  line-height: 1.5 !important;
}

/* 모바일 최적화 */
@media (max-width: 768px) {
  
  
  
  
  
  

  .d-card, .neworder-content-card, .modal-content,
  .faq-accordion-item, .guide-box-hover,
  .btn, .form-control {
    box-shadow: none !important;
    border: 1px solid #e1e5eb !important;
  }

  .common-modal .modal-header,
  .d-card.dc-dblue > div:first-child:not(.d-card-body) {
    background-image: none !important;
    background-color: #5B8DEE !important;
  }

  .faq-accordion-item, .faq-accordion-content,
  .guide-box-hover, .category-dropdown-btn, .dropdown-menu {
    transition: none !important;
  }

  .modal-backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ============================================================
   서비스 아이콘 (ikon() 함수용 - 전역)
   ============================================================ */
.fs-ig, .fs-yt, .fs-fb, .fs-tw, .fs-tiktok, .fs-dm,
.fs-sc, .fs-sp, .fs-snap, .fs-pt, .fs-twc, .fs-lnk,
.fs-gp, .fs-fsq, .fs-pc, .fs-vn, .fs-apple, .fs-music,
.fs-videmo, .fs-eksi, .fs-telegram, .fs-amaz, .fs-tumb,
.fs-yndx, .fs-yahoo, .fs-default {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  margin-right: 6px;
  font-size: 12px;
  flex-shrink: 0;
  vertical-align: middle;
}
.fs-ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; }
.fs-yt { background: #FF0000; color: #fff; }
.fs-fb { background: #1877f2; color: #fff; }
.fs-tw { background: #1DA1F2; color: #fff; }
.fs-tiktok { background: #000; color: #fff; }
.fs-dm { background: #0088cc; color: #fff; }
.fs-gp { background: #DB4437; color: #fff; }
.fs-sc { background: #ff8800; color: #fff; }
.fs-sp { background: #1DB954; color: #fff; }
.fs-snap { background: #FFFC00; color: #000; }
.fs-pt { background: #E60023; color: #fff; }
.fs-twc { background: #9146FF; color: #fff; }
.fs-lnk { background: #0077B5; color: #fff; }
.fs-fsq { background: #4d4dff; color: #fff; }
.fs-pc { background: #6c757d; color: #fff; }
.fs-vn { background: #FF9800; color: #fff; }
.fs-apple { background: #333; color: #fff; }
.fs-music { background: #e91e63; color: #fff; }
.fs-videmo { background: #03C75A; color: #fff; }
.fs-eksi { background: #3498db; color: #fff; }
.fs-telegram { background: #FEE500; color: #3C1E1E; }
.fs-amaz { background: #FF9900; color: #fff; }
.fs-tumb { background: #35465c; color: #fff; }
.fs-yndx { background: #fc0; color: #000; }
.fs-yahoo { background: #6001d2; color: #fff; }
.fs-default { background: #94a3b8; color: #fff; }

/* ===== 모바일 하단 고정 네비게이션 ===== */
.mob-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    justify-content: space-around;
    align-items: center;
    padding: 6px 0;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
}
.mob-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none !important;
    color: #9ca3af;
    font-size: 10px;
    font-weight: 500;
    padding: 4px 12px;
    transition: color 0.2s;
}
.mob-bottom-nav__item i {
    font-size: 18px;
}
.mob-bottom-nav__item--active,
.mob-bottom-nav__item:hover {
    color: #1e6fda;
}
/* 태블릿까지 표시 — 비로그인 옛 하단 메뉴(.app-navbar, 991px 이하)를 대신함 */
@media (max-width: 991.98px) {
    .mob-bottom-nav { display: flex; }
    body.light { padding-bottom: 64px; }
}

/* ===== 적립금 충전 (addfunds) ===== */

/* 카드 공통 */
.af-card { border-radius: 12px; overflow: hidden; }
.af-card-body { padding: 24px; }

/* 탭 헤더 */
.af-tab-header {
    display: flex;
    border-bottom: 1px solid #e2e8f0;
}
.af-tab-btn {
    flex: 1;
    padding: 16px;
    background: #f8fafc;
    border: none;
    font-size: 15px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.af-tab-btn.active {
    background: #fff;
    color: #1e293b;
    font-weight: 600;
    border-bottom: 2px solid #1e6fda;
}
.af-tab-btn:hover:not(.active) { background: #f1f5f9; }
.af-tab-btn i { font-size: 16px; }

/* 탭 콘텐츠 */
.af-tab-content { display: none; }
.af-tab-content.active { display: block; }

/* 섹션 */
.af-section { margin-bottom: 24px; }
.af-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 10px;
}

/* 금액 버튼 그리드 (무통장) */
.af-amount-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.af-amount-btn {
    padding: 14px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    font-size: 15px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s;
}
.af-amount-btn:hover { border-color: #93c5fd; background: #f0f7ff; }
.af-amount-btn.active {
    border-color: #1e6fda;
    background: #1e6fda;
    color: #fff;
}
.af-custom-input { margin-top: 12px; }
.af-custom-input input { font-size: 15px; padding: 12px 14px; border-radius: 10px; }
.af-custom-hint {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #94a3b8;
}
.af-input::placeholder {
    color: #c0c8d4 !important;
    opacity: 1 !important;
}
.af-input::-webkit-input-placeholder { color: #c0c8d4 !important; }
.af-input::-moz-placeholder { color: #c0c8d4 !important; opacity: 1 !important; }

/* 충전 후 잔액 */
.af-balance-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 12px;
}
.af-balance-label { font-size: 14px; color: #475569; }
.af-balance-value { font-size: 20px; font-weight: 700; color: #1e293b; }

/* 금액 초기화 */
.af-reset-row {
    text-align: right;
    margin-bottom: 24px;
}
.af-reset-link {
    font-size: 13px;
    color: #1e6fda;
    text-decoration: none;
}
.af-reset-link:hover { text-decoration: underline; }

/* 입금자명 입력 */
.af-input {
    font-size: 15px;
    padding: 12px 14px;
    border-radius: 10px;
}

/* 입금자명 안내 DO/DONT 카드 */
.af-name-guide {
    margin-bottom: 24px;
}
.af-guide-desc {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 14px;
    line-height: 1.6;
}
.af-guide-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.af-guide-do {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 14px;
}
.af-guide-dont {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 14px;
}
.af-guide-do-head {
    font-size: 13px;
    font-weight: 700;
    color: #16a34a;
    margin-bottom: 12px;
}
.af-guide-do-head i { margin-right: 4px; }
.af-guide-dont-head {
    font-size: 13px;
    font-weight: 700;
    color: #dc2626;
    margin-bottom: 12px;
}
.af-guide-dont-head i { margin-right: 4px; }
.af-guide-do-item,
.af-guide-dont-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #334155;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.7);
    margin-bottom: 6px;
}
.af-guide-do-item:last-child,
.af-guide-dont-item:last-child { margin-bottom: 0; }
.af-guide-do-item i,
.af-guide-dont-item i { font-size: 10px; color: #94a3b8; }
.af-guide-match { font-weight: 500; }
.af-guide-wrong { font-weight: 500; color: #dc2626; text-decoration: line-through; }
.af-guide-do-tag {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    background: #dcfce7;
    color: #16a34a;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
}
.af-guide-dont-tag {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    background: #fee2e2;
    color: #dc2626;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
}
.af-tab-disabled { opacity: 0.5; cursor: not-allowed !important; }

/* 결제 하단 */
.af-pay-bottom {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    gap: 16px;
}
.af-pay-left { flex: 1; min-width: 0; }
.af-pay-amount-label {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
}
.af-pay-amount-value {
    font-size: 20px;
    font-weight: 700;
    color: #1e6fda;
    white-space: nowrap;
    flex-shrink: 0;
}
.af-pay-amount-sub {
    font-size: 13px;
    color: #94a3b8;
    white-space: nowrap;
}
.af-submit-btn {
    display: inline-block !important;
    width: auto !important;
    max-width: 180px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    flex-grow: 0;
    background: #4f7df9;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}
.af-submit-btn:hover { background: #3b6de8; }

/* 직접입력 버튼 강조 */
.af-amount-btn[data-amount="0"] {
    background: #eff6ff;
    border: 1px dashed #93c5fd;
    color: #1e6fda;
}
.af-amount-btn[data-amount="0"]:hover {
    background: #dbeafe;
    border-color: #1e6fda;
}
.af-amount-btn[data-amount="0"].active {
    background: #1e6fda;
    border-style: solid;
    color: #fff;
}

/* 안내 섹션 (아이콘형) */
.af-notice-new {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}
.af-notice-new-head {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.af-notice-new-head i { color: #1e6fda; margin-right: 6px; }
.af-notice-new-body { padding: 6px 0; }
.af-notice-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
}
.af-notice-item i {
    margin-top: 2px;
    font-size: 13px;
    color: #94a3b8;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}
.af-notice-item a { color: #1e6fda; font-weight: 500; }
.af-notice-highlight {
    background: #eff6ff;
    border-left: 3px solid #1e6fda;
    margin: 4px 8px;
    border-radius: 0 8px 8px 0;
    padding: 10px 14px !important;
}
.af-notice-highlight i { color: #1e6fda !important; }
.af-notice-warn i { color: #f59e0b !important; }

/* 충전내역 (우측) */
.af-history-header {
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    border-bottom: 2px solid #1e6fda;
}
.af-history-header i { margin-right: 6px; color: #1e6fda; }
.af-history-body { padding: 0; }
.af-history-table {
    width: 100%;
    font-size: 13px;
}
.af-history-table thead th {
    padding: 12px 16px;
    font-weight: 500;
    color: #94a3b8;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
}
.af-history-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    text-align: center;
    color: #475569;
}
.af-history-amount { font-weight: 600; color: #1e293b !important; }
.af-history-date { font-size: 12px; }
.af-history-method { font-size: 12px; }
.af-history-empty {
    padding: 60px 20px;
    text-align: center;
    color: #94a3b8;
}
.af-history-empty i { font-size: 36px; margin-bottom: 12px; display: block; }
.af-history-empty p { font-size: 14px; margin: 0; }

/* PG 카드결제 탭 공통 */
.pg-method-group {
    display: flex;
    gap: 10px;
}
.pg-method-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    background: #fff;
    margin: 0;
}
.pg-method-card input[type="radio"] { display: none; }
.pg-method-card i { font-size: 22px; color: #64748b; }
.pg-method-card span { font-size: 13px; font-weight: 500; color: #475569; }
.pg-method-card.active { border-color: #1e6fda; background: #eff6ff; }
.pg-method-card.active i { color: #1e6fda; }
.pg-method-card.active span { color: #1e6fda; font-weight: 600; }
.pg-method-card:hover { border-color: #93c5fd; }

.pg-amount-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.pg-amount-btn {
    padding: 12px 8px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s;
}
.pg-amount-btn:hover { border-color: #93c5fd; background: #f8fafc; }
.pg-amount-btn.active { border-color: #1e6fda; background: #1e6fda; color: #fff; }

.pg-custom-amount { margin-top: 10px; }
.pg-custom-amount input { font-size: 15px; padding: 10px 14px; }

.pg-pay-summary {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}
.pg-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}
.pg-summary-row span:first-child { font-size: 14px; color: #475569; }
.pg-summary-amount { font-size: 18px; font-weight: 700; color: #1e293b; }
.pg-summary-sub span:first-child { font-size: 13px; color: #94a3b8; }
.pg-summary-sub span:last-child { font-size: 13px; color: #94a3b8; }
.pg-credit-highlight { color: #1e6fda !important; font-weight: 600 !important; }

.pg-pay-btn {
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
}
.pg-pay-btn i { margin-right: 6px; }

/* 적립금 충전 반응형 */
@media (max-width: 576px) {
    .af-amount-grid { grid-template-columns: repeat(2, 1fr); }
    .af-pay-bottom { flex-wrap: wrap; }
    .af-pay-left { flex-basis: 100%; }
    .af-pay-amount-value { flex: 1; }
    .af-submit-btn { flex: none; }
    .pg-amount-grid { grid-template-columns: repeat(3, 1fr); }
    .pg-method-card { padding: 10px 6px; }
    .pg-method-card i { font-size: 18px; }
    .pg-method-card span { font-size: 12px; }
    .af-card-body { padding: 16px; }
}

/* ============================================================
   즐겨찾기 (Favorites)
   ============================================================ */
/* Step 2 헤더 버튼 */
.auth-fav-manage-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid #f59e0b;
  background: #fffbeb;
  color: #b45309;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.auth-fav-manage-btn:hover {
  background: #fef3c7;
  border-color: #d97706;
}
.auth-fav-manage-btn i { color: #f59e0b; font-size: 12px; }

/* 서비스 목록 인라인 별 토글 */
.svc-fav-toggle {
  color: #cbd5e1;
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  transition: color 0.15s, transform 0.15s;
}
.svc-fav-toggle:hover { color: #f59e0b; transform: scale(1.15); }
.svc-fav-toggle.active { color: #f59e0b; }

/* 즐겨찾기 뷰 내 별 */
.fav-inline-star {
  color: #f59e0b;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.fav-inline-star:hover { transform: scale(1.2); }

/* 모달 서비스 항목 */
.fav-manage-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.15s;
}
.fav-manage-item:hover { background: #f8fafc; }
.fav-manage-item:last-child { border-bottom: none; }
.fav-manage-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fav-manage-name { font-size: 14px; color: #334155; font-weight: 500; }
.fav-manage-price { font-size: 12px; color: #10b981; font-weight: 600; }
.fav-manage-star { font-size: 18px; color: #cbd5e1; flex-shrink: 0; transition: color 0.15s; }
.fav-manage-item.fav-active .fav-manage-star { color: #f59e0b; }

/* 다크모드 */
body.dark .auth-fav-manage-btn {
  background: rgba(245,158,11,0.1);
  border-color: rgba(245,158,11,0.4);
  color: #fbbf24;
}
body.dark .svc-fav-toggle { color: #475569; }
body.dark .svc-fav-toggle.active { color: #f59e0b; }
body.dark .fav-manage-item { border-color: #232842; }
body.dark .fav-manage-item:hover { background: #1a1d2e; }
body.dark .fav-manage-name { color: #e2e8f0; }
body.dark .fav-manage-star { color: #475569; }
body.dark .fav-manage-item.fav-active .fav-manage-star { color: #f59e0b; }
body.dark #favManageModal .modal-content { background: #1a1b2e; }
body.dark #favManageModal .modal-footer { border-color: #232842; }

/* =====================================================
   파란 버튼 정리 (2026-09-25)
   - 행동 버튼(충전하기·주문하기): 은은한 그라데이션 + 윗면 하이라이트 + 파란 그림자, 호버 시 살짝 떠오름
   - 적립금 표시(헤더·사이드바): 정보이므로 연파랑 바탕 + 파란 글씨 (버튼과 구분)
   - 사이드바 적립금 a.user-balance의 display는 접힘/펼침 미디어쿼리가 제어 → 여기서 display 변경 금지
   ===================================================== */
.dash-info-charge-btn,
#spOrderSheet .sp-submit:not(.is-short),
.guest-sidebar-btn-signup,
.guest-guide-cta,
.lk-contact-btn-board {
  background: linear-gradient(180deg, #2f80ec 0%, #1a66d2 100%) !important;
  border: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 12px rgba(30,111,218,.28) !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}
.dash-info-charge-btn { border-radius: 10px; padding: 8px 16px; font-weight: 700; }
.dash-info-charge-btn:hover,
#spOrderSheet .sp-submit:not(.is-short):hover,
.guest-sidebar-btn-signup:hover,
.guest-guide-cta:hover,
.lk-contact-btn-board:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 18px rgba(30,111,218,.32) !important;
}
.dash-info-charge-btn:active,
#spOrderSheet .sp-submit:not(.is-short):active,
.guest-sidebar-btn-signup:active,
.guest-guide-cta:active,
.lk-contact-btn-board:active {
  transform: translateY(0);
  filter: brightness(.97);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12), 0 2px 6px rgba(30,111,218,.22) !important;
}

/* 헤더 적립금: 연파랑 알약 */
.app-header-balance {
  background: #eef4fd !important;
  color: #1557b0 !important;
  border: 1px solid #d6e5fb;
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  font-weight: 700;
  transition: background .15s ease, border-color .15s ease;
}
.app-header-balance:hover { background: #e2edfc !important; border-color: #b9d3f6; color: #1557b0 !important; opacity: 1; }
.app-header-balance i { color: #1e6fda; }
body.dark .app-header-balance { background: #14233d !important; border-color: #22385c; color: #8fb8f0 !important; }
body.dark .app-header-balance i { color: #8fb8f0; }

/* 사이드바 적립금: '적립금 / 금액 / +' 미니 카드 */
.app-sidebar .sidebar-header .app-user .user-balance {
  width: 100%;
  background: #eef4fd !important;
  color: #1557b0 !important;
  border: 1px solid #d6e5fb;
  border-radius: 12px;
  padding: 9px 10px 9px 12px;
  letter-spacing: 0;
  text-align: left;
}
.app-sidebar .sidebar-header .app-user .user-balance:hover {
  background: #e2edfc !important;
  border-color: #b9d3f6;
  box-shadow: none;
}
.user-balance .ub-inner { display: flex; align-items: center; gap: 6px; }
.user-balance .ub-label { font-size: 12px; font-weight: 600; color: #4e5968; }
.user-balance .ub-amount { flex: 1; min-width: 0; text-align: right; font-size: 14px; font-weight: 800; color: #1557b0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-balance .ub-plus {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #2f80ec 0%, #1a66d2 100%); color: #fff; font-size: 10px;
  box-shadow: 0 2px 6px rgba(30,111,218,.3);
}
.user-balance .ub-plus i { margin: 0 !important; color: #fff !important; }
body.dark .app-sidebar .sidebar-header .app-user .user-balance { background: #14233d !important; border-color: #22385c; }
body.dark .user-balance .ub-label { color: #94a3b8; }
body.dark .user-balance .ub-amount { color: #8fb8f0; }

/* 헤더 확성기 칸: 연파랑 */
.app-header .hea-ann-title { background: #eef4fd !important; }
.app-header .hea-ann-title i { color: #1e6fda !important; }
body.dark .app-header .hea-ann-title { background: #14233d !important; }
body.dark .app-header .hea-ann-title i { color: #8fb8f0 !important; }

/* =====================================================
   주문 화면 v2 (로그인 neworder + 비로그인 layout 공용)
   ===================================================== */
/* ============================================================
   주문 화면 v2 토큰: 글자 #191f28 / 보조 #4e5968 / 흐림 #8b95a1 / 선 #e5e8eb / 면 #f2f4f6·#f9fafb / 파랑 #1e6fda
   글자 단계: 12(경로·보조) · 13~14(라벨·본문) · 15(입력·탭) · 16(상품명) · 20(결제 금액)
   ============================================================ */

/* === 링크로 찾기 === */
.sp-linkfinder{padding:18px 24px 4px;}
.sp-lf-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.sp-lf-title{margin:0;font-size:15px;font-weight:700;color:#191f28;}
.sp-lf-desc{font-size:13px;color:#8b95a1;}
.sp-lf-box{display:flex;align-items:center;gap:10px;height:48px;padding:0 8px 0 16px;border:1px solid transparent;border-radius:12px;background:#f2f4f6;transition:border-color .15s,box-shadow .15s,background .15s;}
.sp-lf-box:focus-within{background:#fff;border-color:#1e6fda;box-shadow:0 0 0 3px rgba(30,111,218,.14);}
.sp-lf-box>i{color:#8b95a1;font-size:15px;margin:0!important;}
.sp-lf-box input{flex:1;min-width:0;height:44px;border:none;background:transparent;font-size:15px;color:#191f28;outline:none;}
.sp-lf-box input::placeholder{color:#8b95a1;}
.sp-lf-clear{border:none;background:#e5e8eb;color:#4e5968;border-radius:8px;padding:6px 11px;font-size:12.5px;font-weight:600;cursor:pointer;}
.sp-lf-status:empty{display:none;}
.sp-lf-status{margin-top:8px;display:flex;align-items:flex-start;gap:6px;font-size:13px;line-height:1.55;}
.sp-lf-status i{margin:2px 0 0!important;font-size:13px;}
.sp-lf-status strong{font-weight:700;margin-right:4px;}
.sp-lf-status>div{display:inline;}
.sp-lf-status.is-ok{color:#0f7b3f;}
.sp-lf-status.is-warn{color:#b54708;}
.sp-or-divider{display:flex;align-items:center;gap:12px;padding:16px 24px 10px;font-size:12.5px;font-weight:600;color:#8b95a1;}
.sp-or-divider::before,.sp-or-divider::after{content:'';flex:1;height:1px;background:#f2f4f6;}
/* 링크와 맞지 않는 카테고리 (막지 않고 흐리게 + 안내) */
.guest-cat-item.sp-cat-mismatch{color:#8b95a1;}
.guest-cat-item[data-kind-note]::after{content:attr(data-kind-note);display:block;margin-top:2px;font-size:11px;font-weight:500;color:#8b95a1;}

/* === 공지 한 줄 === */
#authNoticeTicker.lk-notice-ticker{margin:14px 24px 0;padding:11px 16px;gap:10px;background:#f9fafb;border:none;border-radius:10px;}
#authNoticeTicker.lk-notice-ticker:hover{background:#f2f4f6;}
#authNoticeTicker .lk-ticker-badge{background:none;color:#1e6fda;padding:0;font-size:13px;font-weight:700;border-radius:0;}
#authNoticeTicker .lk-ticker-title{font-size:14px;font-weight:500;color:#333d4b;}
#authNoticeTicker .lk-ticker-right{gap:8px;}
#authNoticeTicker .lk-ticker-date{font-size:12px;color:#8b95a1;}
#authNoticeTicker .lk-ticker-right i{font-size:11px;color:#b0b8c1;margin:0!important;}
body.dark #authNoticeTicker.lk-notice-ticker{background:#1f2133;}
body.dark #authNoticeTicker .lk-ticker-title{color:#cbd5e1;}

/* === 주문서 === */
#spOrderSheet{overflow:hidden;}
.sp-sheet-summary{padding:18px 22px 16px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid #f2f4f6;}
.sp-sheet-path{font-size:12px;color:#8b95a1;}
.sp-sheet-path:empty{display:none;}
.sp-sheet-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.sp-sheet-name{font-size:16px;font-weight:700;color:#191f28;line-height:1.4;word-break:keep-all;min-width:0;}
.sp-sheet-name .guest-svc-item-id{margin-top:-2px;}
.sp-sheet-price{flex-shrink:0;text-align:right;line-height:1.3;white-space:nowrap;}
.sp-sheet-price strong{font-size:16px;font-weight:800;color:#191f28;}
.sp-sheet-price span{font-size:12px;color:#8b95a1;}
.sp-sheet-meta:empty{display:none;}
.sp-sheet-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:12.5px;color:#4e5968;}
.sp-meta-item{display:inline-flex;align-items:center;gap:4px;}
.sp-meta-item i{margin:0!important;font-size:11px;}
.sp-meta-item .fa-bolt{color:#d97706;}
.sp-meta-item .fa-shield-alt{color:#1e6fda;}
.sp-meta-dot{width:3px;height:3px;border-radius:50%;background:#d1d6db;}
.sp-meta-avg{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:#eef4fd;color:#1557b0;font-weight:600;}
.sp-meta-avg i{margin:0!important;font-size:11px;color:#1557b0;}
.sp-meta-avg small{font-size:12px;font-weight:500;color:#5b86c5;}
#spOrderSheet .sp-sheet-body{padding:18px 22px 20px;}
.sp-charge-raw{display:none!important;} /* PerfectPanel updateCharge()가 부모 .form-group에 show()를 걸어도 숨김 유지 */

/* PerfectPanel 입력칸(#fields): style.css의 카드형(테두리 2px·여백 25px·▶·회색 안내칸)을 주문서 안에서만 평평하게 */
#spOrderSheet #fields .form-group{background:transparent!important;border:none!important;border-radius:0!important;padding:0!important;margin:0 0 18px!important;box-shadow:none!important;}
#spOrderSheet #fields .form-group:hover{box-shadow:none!important;}
#spOrderSheet #fields .form-group > label{display:flex!important;align-items:baseline!important;justify-content:space-between!important;gap:8px!important;margin:0 0 8px!important;font-size:14px!important;font-weight:700!important;color:#191f28!important;}
#spOrderSheet #fields .form-group > label::before{display:none!important;content:none!important;}
#spOrderSheet #fields .form-group > label .sp-label-hint{font-size:12px;font-weight:500;color:#8b95a1;}
#spOrderSheet #fields .form-group .form-control,#spOrderSheet #fields .form-group input[type="text"],#spOrderSheet #fields .form-group input[type="number"],#spOrderSheet #fields .form-group textarea{height:48px;border:1px solid #e5e8eb!important;border-radius:10px!important;padding:0 14px!important;font-size:15px!important;font-weight:500!important;color:#191f28!important;background:#fff!important;box-shadow:none!important;}
#spOrderSheet #fields .form-group textarea{height:auto;min-height:110px!important;padding:12px 14px!important;}
#spOrderSheet #fields .form-group .form-control:focus,#spOrderSheet #fields .form-group input:focus,#spOrderSheet #fields .form-group textarea:focus{border-color:#1e6fda!important;box-shadow:0 0 0 3px rgba(30,111,218,.14)!important;}
#spOrderSheet #fields .form-group .form-control::placeholder,#spOrderSheet #fields .form-group input::placeholder,#spOrderSheet #fields .form-group textarea::placeholder{color:#b0b8c1!important;}
#spOrderSheet #fields .form-group small{margin-top:6px!important;padding:0!important;background:none!important;border:none!important;font-size:12.5px!important;color:#8b95a1!important;}
/* 수량 범위는 라벨 오른쪽에 표시 → PerfectPanel 최소/최대 안내칸 숨김, 평균 완료 시간 칸은 요약 줄로 이동 */
#spOrderSheet #order_quantity .min-max{display:none!important;}
#spOrderSheet #order_average_time{display:none!important;}
.sp-qty-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px;}
.sp-qty-btn{height:32px;border:none;border-radius:8px;background:#f2f4f6;color:#4e5968;font-size:13px;font-weight:600;cursor:pointer;}
.sp-qty-btn:hover{background:#e8ebee;}
.sp-qty-btn.active,body.dark .sp-qty-btn.active{background:#eef4fd;color:#1557b0;font-weight:700;box-shadow:inset 0 0 0 1px #b9d3f6;}
.sp-link-check:empty{display:none;}
.sp-link-check{margin-top:6px;font-size:12.5px;line-height:1.5;}
.sp-link-check.is-ok{color:#0f7b3f;font-weight:600;}
.sp-link-check.is-warn{color:#b42318;}
#spOrderSheet #fields .form-group.sp-link-bad input{border-color:#f3b3ae!important;}

/* 금액 */
.sp-receipt{background:#f9fafb;border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.sp-receipt-main{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:#4e5968;}
.sp-receipt-main strong{font-size:20px;font-weight:800;color:#191f28;}
.sp-receipt-sub{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:#8b95a1;}
.sp-receipt-sub strong{font-weight:700;color:#4e5968;}
.sp-receipt.is-short #spAfterWrap,.sp-receipt.is-short #spAfterWrap strong{color:#b42318;font-weight:700;}
.sp-charge-row{margin-top:6px;display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #e5e8eb;border-radius:10px;padding:10px 12px;font-size:13px;color:#191f28!important;text-decoration:none!important;}
.sp-charge-row strong{font-weight:700;}
.sp-charge-rest{color:#8b95a1;}
.sp-charge-row i{color:#8b95a1;font-size:12px;margin:0!important;}
.sp-terms{margin:0 0 12px!important;padding:0!important;border:none!important;background:none!important;box-shadow:none!important;font-size:13px;}
#spOrderSheet .sp-submit{height:52px;border-radius:12px!important;font-size:16px!important;font-weight:800!important;background:#1e6fda!important;}
#spOrderSheet .sp-submit:hover{background:#1557b0!important;}
#spOrderSheet .sp-submit.is-short{background:#e5e8eb!important;color:#8b95a1!important;box-shadow:none!important;}
.sp-sheet-note{margin:8px 0 0;font-size:12px;color:#8b95a1;text-align:center;}
.sp-sheet-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #f2f4f6;}
.sp-sheet-links>a,.sp-sheet-links>button{padding:13px 0;text-align:center;font-size:13px;color:#4e5968!important;background:transparent;border:none;text-decoration:none!important;cursor:pointer;}
.sp-sheet-links>*+*{border-left:1px solid #f2f4f6!important;}
.sp-sheet-links>*:hover{background:#f9fafb;}

/* 최근 주문 */
.sp-recent-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid #f2f4f6;}
.sp-recent-item:first-child{border-top:none;padding-top:2px;}
.sp-recent-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.sp-recent-name{font-size:14px;font-weight:700;color:#191f28;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sp-recent-meta{font-size:12px;color:#8b95a1;}
.sp-recent-btn{flex-shrink:0;border:none;background:#f2f4f6;color:#1557b0;border-radius:8px;padding:6px 11px;font-size:13px;font-weight:700;cursor:pointer;}

/* === 상품 설명 탭 (상품 설명 / 링크 입력 방법 / 주문 전 확인) === */

.sp-desc-tab{border:none;background:transparent;padding:12px 0 11px;font-size:15px;font-weight:600;color:#8b95a1;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap;}
.sp-desc-tab.active{color:#191f28;font-weight:700;border-bottom-color:#191f28;}
.sp-desc-tab:focus{outline:none;}
.sp-desc-tab:focus-visible{outline:2px solid #1e6fda;outline-offset:2px;}
.sp-desc-count{margin-left:3px;font-size:12px;font-weight:700;color:#b42318;}


.sp-desc-morebtn{margin-top:12px;border:none;background:#f2f4f6;color:#4e5968;border-radius:8px;padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer;}

.sp-desc-flag{margin-top:18px;border-radius:12px;background:#f9fafb;padding:14px 16px;font-size:13.5px;color:#4e5968;}
.sp-desc-flag summary{cursor:pointer;font-size:14px;font-weight:700;color:#191f28;}
.sp-desc-flag p{margin:10px 0 0;line-height:1.65;}
.sp-desc-flag ol{margin:8px 0 0;padding-left:20px;line-height:1.75;}
.sp-desc-flag .sp-desc-note{color:#b42318;}

/* === 다크모드 === */
body.dark .sp-lf-title,body.dark .sp-sheet-name,body.dark .sp-sheet-price strong,body.dark .sp-recent-name,body.dark .sp-receipt-main strong,body.dark .sp-desc-tab.active,body.dark .sp-desc-flag summary{color:#e2e8f0;}
body.dark .sp-desc-tab.active{border-bottom-color:#e2e8f0;}
body.dark .sp-lf-desc,body.dark .sp-sheet-path,body.dark .sp-sheet-meta,body.dark .sp-recent-meta,body.dark .sp-receipt-main,body.dark .sp-receipt-sub,body.dark .sp-sheet-note,body.dark .sp-or-divider,body.dark .sp-desc-tab{color:#94a3b8;}
body.dark .sp-lf-box{background:#1f2133;}
body.dark .sp-lf-box:focus-within{background:#151722;}
body.dark .sp-lf-box input{color:#e2e8f0;}
body.dark .sp-sheet-summary,body.dark .sp-sheet-links,body.dark .sp-sheet-links>*+*,body.dark .sp-desc-tabs,body.dark .sp-recent-item{border-color:#232842!important;}
body.dark .sp-or-divider::before,body.dark .sp-or-divider::after{background:#232842;}
body.dark .sp-receipt,body.dark .sp-qty-btn,body.dark .sp-desc-flag,body.dark .sp-desc-url,body.dark .sp-desc-morebtn,body.dark .sp-recent-btn,body.dark .sp-lf-clear{background:#1f2133;color:#cbd5e1;}
body.dark .sp-meta-avg{background:#14233d;color:#8fb8f0;}
body.dark #spOrderSheet #fields .form-group > label{color:#e2e8f0!important;}
body.dark #spOrderSheet #fields .form-group .form-control,body.dark #spOrderSheet #fields .form-group input[type="text"],body.dark #spOrderSheet #fields .form-group textarea{background:#151722!important;border-color:#2a2c44!important;color:#e2e8f0!important;}
body.dark .sp-charge-row{background:#151722;border-color:#2a2c44;color:#e2e8f0!important;}


/* === 비로그인: 상품 상세 (요약 + 탭 + 로그인 후 주문) === */
.sp-guest-detail{background:#fff;border:1px solid #e5e7eb;border-radius:14px;margin:0 0 20px;overflow:hidden;}
.sp-guest-detail-body{padding:4px 22px 18px;}

.sp-guest-cta-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 22px;border-top:1px solid #f2f4f6;background:#f9fafb;}
.sp-guest-cta-note{font-size:13px;color:#4e5968;}
.sp-guest-cta{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border:none;border-radius:12px;color:#fff;font-size:15px;font-weight:800;cursor:pointer;background:linear-gradient(180deg,#2f80ec 0%,#1a66d2 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 12px rgba(30,111,218,.28);transition:transform .15s ease,box-shadow .15s ease;}
.sp-guest-cta:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 18px rgba(30,111,218,.32);}
.sp-guest-cta i{margin:0!important;color:#fff!important;}
/* 비로그인 히어로: Since 2016 골드 배지 (로그인 상단 바와 같은 톤) */


body.dark .sp-guest-detail{background:#151722;border-color:#232842;}
body.dark .sp-guest-cta-row{background:#1a1b2e;border-color:#232842;}
body.dark .sp-guest-cta-note{color:#94a3b8;}
/* 같은 행동 버튼 스타일로 통일한 예전 버튼들: 글자색 흰색 유지 */
.guest-sidebar-btn-signup, .guest-sidebar-btn-signup:hover,
.lk-contact-btn-board, .lk-contact-btn-board:hover { color: #fff !important; }


/* =====================================================
   소개 카드(비로그인 상단) · 이용 안내 카드(오른쪽, 로그인/비로그인 공용) · 배너 번호
   ===================================================== */
.sp-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:28px;background:#fff;border:1px solid #edf0f5;border-radius:20px;padding:30px 34px;margin-bottom:16px;}
.sp-hero::before{content:'';position:absolute;right:-90px;top:-130px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#e8f1fe 0%,rgba(232,241,254,0) 70%);pointer-events:none;}
.sp-hero-text{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;}
.sp-hero-since{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 4px;border-radius:999px;background:#fff7e6;border:1px solid #f5dca8;font-size:12px;font-weight:800;color:#b45309;}
.sp-hero-since i{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#fbbf24,#f59e0b);color:#fff!important;font-size:10px;margin:0!important;}
.sp-hero-title{margin:0;font-size:30px;font-weight:800;line-height:1.3;letter-spacing:-.6px;color:#191f28;}
.sp-hero-desc{margin:0;font-size:15px;line-height:1.6;color:#4e5968;}
.sp-hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;}
.sp-btn-primary,.sp-btn-ghost{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 20px;border-radius:12px;font-size:15px;font-weight:800;text-decoration:none!important;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;}
.sp-btn-primary{color:#fff!important;background:linear-gradient(180deg,#2f80ec 0%,#1a66d2 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 16px rgba(30,111,218,.28);}
.sp-btn-primary:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 20px rgba(30,111,218,.32);}
.sp-btn-ghost{color:#191f28!important;background:#f2f4f6;font-weight:700;}
.sp-btn-ghost:hover{background:#e8ebee;}
.sp-hero-stats{position:relative;flex-shrink:0;width:300px;display:flex;flex-direction:column;gap:10px;}
.sp-hero-stat-main{display:flex;align-items:center;gap:14px;background:#f5f9ff;border:1px solid #dbe8fb;border-radius:14px;padding:14px 16px;}
.sp-hero-live{flex-shrink:0;width:40px;height:40px;border-radius:12px;background:#fff;box-shadow:0 2px 6px rgba(30,111,218,.12);position:relative;}
.sp-hero-live::after{content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#12b76a;animation:spLivePulse 2s ease-out infinite;}
@keyframes spLivePulse{0%{box-shadow:0 0 0 0 rgba(18,183,106,.45)}70%{box-shadow:0 0 0 7px rgba(18,183,106,0)}100%{box-shadow:0 0 0 0 rgba(18,183,106,0)}}
@media (prefers-reduced-motion:reduce){.sp-hero-live::after{animation:none;}}
.sp-hero-stat-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.sp-hero-stat{background:#f9fafb;border-radius:14px;padding:12px 14px;}
.sp-hero-stat-label{font-size:12.5px;color:#8b95a1;}
.sp-hero-stat-main .sp-hero-stat-label{color:#4e5968;}
.sp-hero-stat-value strong{font-size:22px;font-weight:800;color:#1e6fda;letter-spacing:-.4px;font-variant-numeric:tabular-nums;}
.sp-hero-stat-value.sm strong{font-size:18px;color:#191f28;}
.sp-hero-stat-value small{font-size:13px;font-weight:600;color:#8b95a1;}
@media (max-width:991.98px){.sp-hero{flex-direction:column;align-items:stretch;padding:24px 22px;}.sp-hero-stats{width:auto;}.sp-hero-title{font-size:25px;}}
body.dark .sp-hero{background:#151722;border-color:#232842;}
body.dark .sp-hero::before{background:radial-gradient(circle at 30% 30%,#14233d 0%,rgba(20,35,61,0) 70%);}
body.dark .sp-hero-title,body.dark .sp-hero-stat-value.sm strong{color:#e2e8f0;}
body.dark .sp-hero-desc{color:#94a3b8;}
body.dark .sp-hero-stat-main{background:#132440;border-color:#22385c;}
body.dark .sp-hero-stat{background:#1f2133;}
body.dark .sp-btn-ghost{background:#1f2133;color:#e2e8f0!important;}

/* 주문하기 카드 머리 (비로그인) */
.guest-order-header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.sp-order-note{font-size:13px;color:#8b95a1;}

/* 이용 안내 카드 */
.sp-help{background:#fff;border:1px solid #edf0f5;border-radius:20px;padding:20px 20px 18px;display:flex;flex-direction:column;gap:14px;margin-bottom:16px;}
.sp-help-title{margin:0;font-size:17px;font-weight:800;color:#191f28;}
.sp-help-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:#f2f4f6;border-radius:12px;padding:4px;}
.sp-help-tab{height:36px;border:none;border-radius:9px;background:transparent;font-size:14px;font-weight:600;color:#8b95a1;cursor:pointer;}
.sp-help-tab.active{background:#fff;color:#191f28;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.sp-help-tab:focus{outline:none;}
.sp-help-tab:focus-visible{outline:2px solid #1e6fda;outline-offset:2px;}
.sp-help-panel{display:flex;flex-direction:column;}
.sp-help-panel[hidden]{display:none;}
.sp-help-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 4px;border:none;border-bottom:1px solid #f2f4f6;background:transparent;text-align:left;cursor:pointer;color:#191f28;}
.sp-help-row:last-child{border-bottom:none;}
.sp-help-row:hover .sp-help-label{color:#1e6fda;}
.sp-help-ico{flex-shrink:0;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;}
.sp-help-ico i{margin:0!important;}
.sp-help-ico.is-pink{background:#fdecf3;color:#e4405f;}
.sp-help-ico.is-blue{background:#eef4fd;color:#1e6fda;}
.sp-help-ico.is-purple{background:#f3effd;color:#7c3aed;}
.sp-help-label{flex-grow:1;font-size:14.5px;font-weight:600;transition:color .15s;}
.sp-help-chev{font-size:12px;color:#b0b8c1!important;margin:0!important;}
.sp-help-warn{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;border-radius:12px;background:#fffaeb;border:1px solid #fde8b0;color:#92400e;font-size:14px;font-weight:700;text-align:left;cursor:pointer;}
.sp-help-warn span{flex-grow:1;}
.sp-help-warn i{color:#d97706!important;margin:0!important;}
.sp-help-warn:hover{background:#fff4d6;}
.sp-help-contact{border-top:1px solid #f2f4f6;padding-top:14px;display:flex;flex-direction:column;gap:10px;}
.sp-help-contact-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.sp-help-contact-head strong{font-size:15px;font-weight:800;color:#191f28;}
.sp-help-contact-head span{font-size:12px;color:#8b95a1;}
.sp-help-contact-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.sp-help-kakao,.sp-help-board{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;border-radius:12px;font-size:14px;font-weight:800;text-decoration:none!important;}
.sp-help-kakao{background:#fee500;color:#3c1e1e!important;}
.sp-help-kakao:hover{background:#fbdc00;}
.sp-help-board{background:#fff;border:1px solid #e5e8eb;color:#191f28!important;font-weight:700;}
.sp-help-board:hover{background:#f9fafb;}
.sp-help-kakao i,.sp-help-board i{margin:0!important;}
/* 자주 묻는 질문 (기존 아코디언을 카드 안에 맞춤) */
.sp-help .lk-faq-scroll{max-height:340px;overflow-y:auto;}
.sp-help .lk-faq-accordion-item{border:none!important;border-bottom:1px solid #f2f4f6!important;border-radius:0!important;margin:0!important;background:transparent!important;}
.sp-help .lk-faq-accordion-header{padding:12px 4px!important;background:transparent!important;}
.sp-help .lk-faq-accordion-title{font-size:14px!important;font-weight:600!important;color:#191f28!important;}
.sp-help .lk-faq-accordion-body{padding:0 4px 12px!important;font-size:13.5px;color:#4e5968;line-height:1.65;}
body.dark .sp-help{background:#151722;border-color:#232842;}
body.dark .sp-help-title,body.dark .sp-help-contact-head strong,body.dark .sp-help-row,body.dark .sp-help .lk-faq-accordion-title{color:#e2e8f0!important;}
body.dark .sp-help-tabs{background:#1f2133;}
body.dark .sp-help-tab.active{background:#2a2c44;color:#e2e8f0;}
body.dark .sp-help-row,body.dark .sp-help .lk-faq-accordion-item{border-color:#232842!important;}
body.dark .sp-help-warn{background:#2a1f0e;border-color:#4f3a14;color:#fcd34d;}
body.dark .sp-help-contact{border-color:#232842;}
body.dark .sp-help-board{background:#151722;border-color:#2a2c44;color:#e2e8f0!important;}


/* 약관 동의 체크(패널에서 켠 경우): 예전 라벨 박스 스타일 제거 */
.sp-terms label,.sp-terms .control-label{border:none!important;background:none!important;padding:0!important;box-shadow:none!important;display:flex!important;align-items:center;gap:6px;font-size:13px!important;}
#spOrderSheet .form-group.sp-terms{border:none!important;background:none!important;padding:0!important;box-shadow:none!important;margin:0 0 12px!important;}

/* =====================================================
   상품 목록 정돈: 카테고리 아이콘 + 짧은 이름, 상품명 정리(내부코드·이모지 제거), 홍보 칩, 모바일 글자 크기
   (로그인 #auth-* / 비로그인 #guest-* 공용 — .guest-browser-content 하위로 우선순위 확보)
   ===================================================== */
.guest-browser-content .guest-cat-item{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:13px 16px;font-size:15px;font-weight:500;color:#333d4b;line-height:1.35;}
.guest-browser-content .guest-cat-item.active{color:#1557b0;font-weight:700;background:#f0f6ff;}
.guest-browser-content .guest-cat-item[data-kind-note]::after{flex-basis:100%;margin:-4px 0 0 34px;}
.sp-cat-ico{flex-shrink:0;width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;}
.sp-cat-ico i{margin:0!important;}
.sp-cat-ico.is-pink{background:#fdecf3;color:#e4405f;}
.sp-cat-ico.is-blue{background:#eef4fd;color:#1e6fda;}
.sp-cat-ico.is-green{background:#e8f7ef;color:#12a150;}
.sp-cat-ico.is-red{background:#fdecec;color:#e02424;}
.sp-cat-ico.is-purple{background:#f3effd;color:#7c3aed;}
.sp-cat-ico.is-orange{background:#fff1e6;color:#ea580c;}
.sp-cat-ico.is-slate{background:#f2f4f6;color:#4e5968;}
.sp-cat-label{min-width:0;}
.guest-cat-item.sp-cat-mismatch .sp-cat-ico{opacity:.55;}

.guest-browser-right .guest-svc-item{padding:13px 18px;gap:12px;}
.guest-browser-right .guest-svc-item-name{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:15px;font-weight:500;color:#191f28;line-height:1.45;}
.guest-browser-right .guest-svc-item-name .guest-svc-item-id{margin-right:4px!important;}
.guest-browser-right .guest-svc-item.active .sp-svc-title{color:#1557b0;font-weight:600;}
.guest-browser-right .guest-svc-item-price{font-size:14px;font-weight:600;color:#4e5968;}
.guest-browser-right .guest-svc-item.active .guest-svc-item-price{color:#1e6fda;font-weight:700;}
.sp-svc-tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;background:#f2f4f6;color:#4e5968;font-size:11.5px;font-weight:600;white-space:nowrap;}
.sp-svc-tag.is-hot{background:#fff1e6;color:#c2410c;}
.sp-sheet-name .sp-svc-tag{vertical-align:2px;margin-left:4px;}
.auth-svc-search-item .sp-svc-tag{margin-left:4px;}
body.dark .guest-browser-content .guest-cat-item{color:#cbd5e1;}
body.dark .guest-browser-content .guest-cat-item.active{background:#14233d;color:#8fb8f0;}
body.dark .guest-browser-right .guest-svc-item-name{color:#e2e8f0;}
body.dark .guest-browser-right .guest-svc-item-price{color:#94a3b8;}
body.dark .sp-svc-tag{background:#1f2133;color:#cbd5e1;}
body.dark .sp-svc-tag.is-hot{background:#3a2412;color:#fdba74;}

/* 모바일: 글자 키우고 줄 간격 확보 (기존 12~13px → 14~15px) */
@media (max-width:767.98px){
  .guest-browser-content .guest-browser-left .guest-cat-item{font-size:14px!important;padding:12px 12px!important;gap:8px;}
  .guest-browser-content .guest-browser-left .guest-cat-item .sp-cat-ico{width:22px;height:22px;}
  .guest-browser-content .guest-browser-right .guest-svc-item{padding:12px 14px!important;}
  .guest-browser-content .guest-browser-right .guest-svc-item-name{font-size:14.5px!important;line-height:1.45;}
  .guest-browser-content .guest-browser-right .guest-svc-item-price{font-size:14px!important;}
  .guest-browser-content .guest-cat-item[data-kind-note]::after{margin-left:30px;}
  
  .sp-sheet-name{font-size:16px;}
}
/* 모바일: 카테고리를 목록 위 칩으로(여러 줄로 감싸 전부 보이게 — 가로 스크롤은 오른쪽 칩이 가려짐) → 상품명이 화면 폭을 모두 쓰게 */
@media (max-width:767.98px){
  .guest-browser-box .guest-browser-content,#authBox2 .guest-browser-content{flex-direction:column!important;}
  .guest-browser-content .guest-browser-left{width:100%!important;max-width:none!important;min-width:0!important;max-height:none!important;display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:6px;overflow:visible!important;padding:10px 12px!important;border-right:none!important;border-bottom:1px solid #f2f4f6!important;background:#fff!important;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-shrink:0;}
  .guest-browser-content .guest-browser-left::-webkit-scrollbar{display:none;}
  .guest-browser-content .guest-browser-left .guest-cat-item{display:flex!important;flex:0 0 auto!important;flex-wrap:nowrap!important;white-space:nowrap!important;max-width:100%;border:1px solid #e5e8eb!important;border-left-width:1px!important;border-radius:999px!important;padding:5px 12px 5px 5px!important;background:#fff!important;font-size:14px!important;}
  .guest-browser-content .guest-browser-left .guest-cat-item.active{border-color:#1e6fda!important;background:#eef4fd!important;}
  .guest-browser-content .guest-browser-left .guest-cat-item[data-kind-note]::after{display:none;}
  .guest-browser-content .guest-browser-right{max-height:460px!important;width:100%;}
  .guest-browser-content .guest-browser-right .guest-svc-item-id{font-size:10.5px!important;padding:2px 6px!important;}
  body.dark .guest-browser-content .guest-browser-left{background:#151722!important;border-color:#232842!important;}
  body.dark .guest-browser-content .guest-browser-left .guest-cat-item{background:#151722!important;border-color:#2a2c44!important;}
  body.dark .guest-browser-content .guest-browser-left .guest-cat-item.active{background:#14233d!important;border-color:#1e6fda!important;}
}
@media (max-width:767.98px){.guest-browser-content .guest-browser-left .guest-cat-item .sp-cat-label{overflow:hidden;text-overflow:ellipsis;}}

/* =====================================================
   로그인 팝업 (홈 인라인 + 다른 페이지 iframe 공용)
   ===================================================== */
.login-modal-overlay{background:rgba(15,23,42,.55)!important;backdrop-filter:blur(2px);}
.login-modal-box.sp-login{max-width:420px;width:92%;border-radius:24px;overflow:hidden;box-shadow:0 24px 60px rgba(15,23,42,.28);background:#fff;}
.guest-modal-box.guest-login-modal{max-width:420px!important;width:92%!important;border-radius:24px!important;overflow:hidden;}
.guest-login-modal iframe{border-radius:24px!important;display:block;}
.sp-login-close{position:absolute;right:14px;top:14px;z-index:2;width:36px;height:36px;border:none;border-radius:50%;background:rgba(255,255,255,.75);color:#4e5968;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.sp-login-close:hover{background:#fff;color:#191f28;}
.sp-login-close i{margin:0!important;}
.sp-login-head{position:relative;overflow:hidden;padding:26px 26px 22px;background:linear-gradient(160deg,#f3f8ff 0%,#ffffff 70%);border-bottom:1px solid #eef2f7;}
.sp-login-head::after{content:'';position:absolute;right:-60px;top:-70px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,#dcebfd 0%,rgba(220,235,253,0) 70%);pointer-events:none;}
.sp-login-brand{position:relative;z-index:1;display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.sp-login-brand img{height:26px;width:auto;}
.sp-login-brand strong{font-size:18px;font-weight:800;color:#1e6fda;}
.sp-login-since{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 3px;border-radius:999px;background:#fff7e6;border:1px solid #f5dca8;font-size:11.5px;font-weight:800;color:#b45309;}
.sp-login-since i{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#fbbf24,#f59e0b);color:#fff!important;font-size:9px;margin:0!important;}
.sp-login-title{position:relative;z-index:1;margin:0;font-size:23px;font-weight:800;line-height:1.35;letter-spacing:-.5px;color:#191f28;}
.sp-login-title .sp-trust-years{color:#1e6fda;}
.sp-login-stat{position:relative;z-index:1;margin:10px 0 0;display:flex;align-items:center;gap:7px;font-size:13px;color:#4e5968;}
.sp-login-stat strong{font-weight:800;color:#1e6fda;font-variant-numeric:tabular-nums;}
.sp-login-live{width:8px;height:8px;border-radius:50%;background:#12b76a;flex-shrink:0;animation:spLivePulse 2s ease-out infinite;}
@media (prefers-reduced-motion:reduce){.sp-login-live{animation:none;}}
.sp-login-pending{display:flex;align-items:center;gap:8px;margin:16px 26px 0;padding:10px 12px;border-radius:10px;background:#eef4fd;color:#1557b0;font-size:13px;font-weight:600;}
.sp-login-pending[hidden]{display:none;}
.sp-login-pending i{margin:0!important;}
.sp-login-form{padding:20px 26px 6px;display:flex;flex-direction:column;gap:14px;}
.sp-login-alert{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:10px;font-size:13.5px;line-height:1.5;}
.sp-login-alert i{margin:2px 0 0!important;}
.sp-login-alert.is-error{background:#fef3f2;color:#b42318;}
.sp-login-alert.is-ok{background:#ecfdf3;color:#0f7b3f;}
.sp-login-field{display:flex;flex-direction:column;gap:7px;}
.sp-login-field label,.sp-login-label-row label{margin:0;font-size:14px;font-weight:700;color:#191f28;}
.sp-login-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.sp-login-label-row a{font-size:12.5px;font-weight:600;color:#1e6fda;text-decoration:none!important;}
.sp-login-field input{height:50px;border:1px solid #e5e8eb;border-radius:12px;padding:0 16px;font-size:15px;color:#191f28;background:#f9fafb;transition:border-color .15s,box-shadow .15s,background .15s;}
.sp-login-field input:focus{outline:none;background:#fff;border-color:#1e6fda;box-shadow:0 0 0 3px rgba(30,111,218,.14);}
.sp-login-field input::placeholder{color:#b0b8c1;}
.sp-login-remember{display:flex;align-items:center;gap:8px;margin:0;font-size:13.5px;color:#4e5968;cursor:pointer;}
.sp-login-remember input{width:17px;height:17px;accent-color:#1e6fda;margin:0;}
.sp-login-submit{height:52px;border:none;border-radius:12px;color:#fff;font-size:16px;font-weight:800;cursor:pointer;background:linear-gradient(180deg,#2f80ec 0%,#1a66d2 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 16px rgba(30,111,218,.28);transition:transform .15s ease,box-shadow .15s ease;}
.sp-login-submit:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 20px rgba(30,111,218,.32);}
.sp-login-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:14px 26px 24px;padding:14px 16px;border-radius:12px;background:#f9fafb;font-size:13.5px;color:#4e5968;}
.sp-login-signup{font-weight:800;color:#1e6fda!important;text-decoration:none!important;}
.sp-login-signup i{margin-left:4px;font-size:12px;}
@media (max-width:480px){.sp-login-head{padding:22px 20px 18px;}.sp-login-form{padding:18px 20px 4px;}.sp-login-pending{margin:14px 20px 0;}.sp-login-foot{margin:12px 20px 20px;}.sp-login-title{font-size:21px;}}
body.dark .login-modal-box.sp-login{background:#151722;}
body.dark .sp-login-head{background:linear-gradient(160deg,#14233d 0%,#151722 70%);border-color:#232842;}
body.dark .sp-login-title,body.dark .sp-login-field label,body.dark .sp-login-label-row label{color:#e2e8f0;}
body.dark .sp-login-stat,body.dark .sp-login-remember,body.dark .sp-login-foot{color:#94a3b8;}
body.dark .sp-login-field input{background:#1f2133;border-color:#2a2c44;color:#e2e8f0;}
body.dark .sp-login-foot{background:#1f2133;}


/* =====================================================
   사이드바 정리 (2026-09-25) — 로그인 .app-sidebar + 비로그인 .guest-sidebar-left
   - 프로필 카드(이니셜·아이디·계정설정) + 적립금 줄 + '충전' 칩
   - 메뉴 묶음 라벨(주문/내역 관리/계정·지원, script.js spInitSidebar), 부드러운 활성 알약
   - 접힘(64px): 이니셜만 남기고 라벨은 얇은 구분선. user-balance의 display는 건드리지 않음
   ===================================================== */
.app-sidebar .sidebar-header { padding-top: 18px; }
.app-sidebar .sidebar-header .app-user.sp-sb-user {
  margin: 16px 14px 14px; padding: 12px !important;
  background: #f7f9fc; border: 1px solid #edf1f7; border-radius: 16px; text-align: left;
}

.sp-sb-avatar {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #3b8cf0 0%, #1a66d2 100%); color: #fff;
  font-size: 16px; font-weight: 800; box-shadow: 0 3px 10px rgba(30,111,218,.25);
}
.sp-sb-avatar i { margin: 0 !important; font-size: 15px; color: #fff !important; }


.sp-sb-account { font-size: 12px; color: #8b95a1; text-decoration: none !important; }
.sp-sb-account i { font-size: 9px; margin-left: 2px; }
.sp-sb-account:hover { color: #1e6fda; }
.app-sidebar .sidebar-header .app-user.sp-sb-user .user-balance { background: #fff !important; border-color: #e3ebf7; }
.app-sidebar .sidebar-header .app-user.sp-sb-user .user-balance:hover { background: #f3f8ff !important; border-color: #b9d3f6; }
.user-balance .ub-plus { width: auto; padding: 0 9px 0 7px; border-radius: 999px; gap: 3px; font-size: 9px; height: 24px; }
.user-balance .ub-plus-text { font-size: 12px; font-weight: 700; color: #fff; }

/* 메뉴 */
.app-sidebar .sidebar-content { border-top: none; padding-top: 0; }
.app-sidebar .sidebar-menu { padding: 0 12px; }
.app-sidebar .sidebar-menu li { margin-bottom: 2px; }
.app-sidebar .sidebar-menu li.sp-sb-label,
.guest-sidebar-nav .sp-sb-label {
  display: block; padding: 12px 12px 5px; margin: 0;
  font-size: 11.5px; font-weight: 700; color: #a0a9b5; letter-spacing: .02em;
}
.app-sidebar .sidebar-menu li.sp-sb-label:first-child { padding-top: 4px; }
.app-sidebar .sidebar-menu li a.menu-link {
  display: flex; align-items: center; padding: 9px 12px; border-radius: 10px;
  font-size: 14.5px; font-weight: 500; color: #4e5968;
}
.app-sidebar .sidebar-menu li a.menu-link .menu-icon {
  flex-shrink: 0; margin-right: 12px; font-size: 16px; color: #a0a9b5; transition: color .14s ease;
}
.app-sidebar .sidebar-menu li a.menu-link:hover { background: #f2f4f6; color: #191f28; }
.app-sidebar .sidebar-menu li a.menu-link:hover .menu-icon { color: #4e5968; }
.app-sidebar .sidebar-menu li.active > a.menu-link { background: #eaf2fd; color: #1e6fda !important; font-weight: 700; }
.app-sidebar .sidebar-menu li.active > a.menu-link .menu-icon { color: #1e6fda; }
/* 플레이스·쇼핑 트래픽: 원색 그라데이션 대신 은은한 강조 */
.app-sidebar .sidebar-menu li.sp-sb-promo > a.menu-link { background: linear-gradient(90deg, #fff0f4 0%, #fff6f0 100%); color: #e0386b; font-weight: 700; }
.app-sidebar .sidebar-menu li.sp-sb-promo > a.menu-link .menu-icon { color: #f25a86; }
.app-sidebar .sidebar-menu li.sp-sb-promo > a.menu-link:hover { background: linear-gradient(90deg, #ffe4ec 0%, #ffeee4 100%); }

/* 하단 상담 카드 (로그인·비로그인 공용) */
.sp-sb-help {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin-bottom: 12px;
  background: #fffbe6; border: 1px solid #f7e9a8; border-radius: 12px; text-decoration: none !important;
  transition: background .15s ease, border-color .15s ease;
}
.sp-sb-help:hover { background: #fff6cc; border-color: #f0d96b; }
.sp-sb-help-ico {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; background: #fee500;
  display: inline-flex; align-items: center; justify-content: center;
}
.sp-sb-help-ico i { margin: 0 !important; font-size: 14px; color: #3c1e1e !important; }
.sp-sb-help-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sp-sb-help-txt strong { font-size: 13px; font-weight: 700; color: #191f28; }
.sp-sb-help-txt small { font-size: 11.5px; color: #8b95a1; }
.sp-sb-help-arrow { font-size: 10px; color: #b0b8c1; margin: 0 !important; }

/* 접힘(64px): 데스크톱=.sidebar-inact, 태블릿=기본 상태 */
@media (min-width: 1200px) {
  .app-sidebar.sidebar-inact .app-user.sp-sb-user { margin: 12px 0 8px; padding: 0 !important; background: none; border: none; }
  
  
  .app-sidebar.sidebar-inact .sidebar-menu { padding: 0 8px; }
  .app-sidebar.sidebar-inact .sidebar-menu li.sp-sb-label { font-size: 0; padding: 0; height: 1px; background: #edf1f7; margin: 8px 6px; }
  .app-sidebar.sidebar-inact .sidebar-menu li a.menu-link { justify-content: center; padding: 11px 0; }
  .app-sidebar.sidebar-inact .sidebar-menu li a.menu-link .menu-icon { margin: 0; width: auto; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .app-sidebar:not(.sidebar-inact) .app-user.sp-sb-user { margin: 12px 0 8px; padding: 0 !important; background: none; border: none; }
  
  
  .app-sidebar:not(.sidebar-inact) .sidebar-header .app-user .user-balance { display: none; } /* 기존 규칙 우선순위 때문에 태블릿 64px에 적립금이 끼어 보이던 문제 */
  .app-sidebar:not(.sidebar-inact) .sidebar-menu { padding: 0 8px; }
  .app-sidebar:not(.sidebar-inact) .sidebar-menu li.sp-sb-label { font-size: 0; padding: 0; height: 1px; background: #edf1f7; margin: 8px 6px; }
  .app-sidebar:not(.sidebar-inact) .sidebar-menu li a.menu-link { justify-content: center; padding: 11px 0; }
  .app-sidebar:not(.sidebar-inact) .sidebar-menu li a.menu-link .menu-icon { margin: 0; width: auto; }
}
@media (max-width: 1199.98px) {
  .app-sidebar.sidebar-inact .sidebar-menu li a.menu-link { justify-content: flex-start; padding: 9px 12px; }
  .app-sidebar.sidebar-inact .sidebar-menu li a.menu-link .menu-icon { margin-right: 12px; }
}

/* 비로그인 사이드바 */
.guest-sidebar-left { padding: 20px 14px; }
.guest-sidebar-logo { margin: 0 4px 16px; }
.sp-gsb-welcome {
  padding: 16px 14px 14px; margin-bottom: 6px; border-radius: 16px;
  background: linear-gradient(160deg, #f3f8ff 0%, #eaf2fd 100%); border: 1px solid #dbe8fb;
}


.sp-gsb-welcome .guest-sidebar-auth { margin-bottom: 0; }
.sp-gsb-welcome .guest-sidebar-btn-login { background: #fff; border: 1px solid #d6e5fb; border-radius: 10px; padding: 9px 0; color: #1e6fda; font-weight: 700; }
.sp-gsb-welcome .guest-sidebar-btn-login:hover { background: #f3f8ff; border-color: #b9d3f6; color: #1557b0; }
.sp-gsb-welcome .guest-sidebar-btn-signup { border-radius: 10px; padding: 9px 0; font-weight: 700; }
.guest-sidebar-nav { gap: 2px; margin-bottom: 14px; }
.guest-sidebar-nav .sp-sb-label { padding-top: 12px; }
.guest-sidebar-link { padding: 10px 12px; border-radius: 10px; font-size: 14.5px; color: #4e5968; }
.guest-sidebar-link i { font-size: 15px; color: #a0a9b5; }
.guest-sidebar-link:hover { background: #f2f4f6; color: #191f28; }
.guest-sidebar-link:hover i { color: #4e5968; }
.guest-sidebar-link.is-active { background: #eaf2fd; color: #1e6fda; font-weight: 700; }
.guest-sidebar-link.is-active i { color: #1e6fda; }
.guest-sidebar-left .guest-sidebar-footer { margin-top: auto; }

/* 다크 모드 */
body.dark .app-sidebar .sidebar-header .app-user.sp-sb-user { background: #161a2e; border-color: #232842; }


body.dark .app-sidebar .sidebar-header .app-user.sp-sb-user .user-balance { background: #14233d !important; border-color: #22385c; }
body.dark .app-sidebar .sidebar-menu li.sp-sb-label { color: #5b6478; }
body.dark .app-sidebar .sidebar-menu li a.menu-link { color: #aab2c0; }
body.dark .app-sidebar .sidebar-menu li a.menu-link .menu-icon { color: #5b6478; }
body.dark .app-sidebar .sidebar-menu li a.menu-link:hover { background: #1b2036; color: #e5e7eb; }
body.dark .app-sidebar .sidebar-menu li.active > a.menu-link { background: #14233d; color: #8fb8f0 !important; }
body.dark .app-sidebar .sidebar-menu li.active > a.menu-link .menu-icon { color: #8fb8f0; }
body.dark .app-sidebar .sidebar-menu li.sp-sb-promo > a.menu-link { background: #2a1822; color: #ff8fb0; }
body.dark .app-sidebar .sp-sb-help { background: #2a2614; border-color: #463f1c; }
body.dark .app-sidebar .sp-sb-help-txt strong { color: #e5e7eb; }
body.dark .app-sidebar.sidebar-inact .sidebar-menu li.sp-sb-label { background: #232842; }
@media (max-width: 767.98px) { .app-sidebar .sidebar-menu { padding-bottom: 50px; } }

/* 비로그인 사이드바 카드: 히어로(Since 2016·N년째)와 겹치지 않게 '게스트 계정 카드'로 — 로그인 프로필 카드와 같은 모양 */
.sp-gsb-welcome { background: #f7f9fc; border: 1px solid #edf1f7; padding: 14px; }
.sp-gsb-profile { display: flex; align-items: center; gap: 10px; }
.sp-gsb-avatar {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e5e8eb; color: #8b95a1;
}
.sp-gsb-avatar i { margin: 0 !important; font-size: 15px; }
.sp-gsb-who { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.sp-gsb-who strong { font-size: 15px; font-weight: 700; color: #191f28; }
.sp-gsb-who small { font-size: 12px; color: #8b95a1; }
.sp-gsb-perks { list-style: none; margin: 12px 0; padding: 10px 12px; background: #fff; border: 1px solid #edf1f7; border-radius: 12px; }
.sp-gsb-perks li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #4e5968; padding: 3px 0; }
.sp-gsb-perks i { margin: 0 !important; font-size: 10px; color: #1e6fda; }
/* 게스트 카드 네모: 사람 아이콘 대신 'SINCE 2016' 배지 (히어로 Since 알약과 같은 골드 톤) */
.sp-gsb-avatar.sp-gsb-since-box {
  width: 46px; height: 46px; border-radius: 13px; flex-direction: column; gap: 1px;
  background: linear-gradient(160deg, #fff8e6 0%, #fdecc4 100%);
  border: 1px solid #f3d98f; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 3px 8px rgba(199,146,34,.18);
  color: #9a6512; line-height: 1;
}
.sp-gsb-since-box small { font-size: 8px; font-weight: 800; letter-spacing: .12em; color: #b7832a; }
.sp-gsb-since-box b { font-size: 14px; font-weight: 800; letter-spacing: -.02em; color: #8a5a0e; }
/* 사이드바 적립금: 큰 금액이 잘리지 않게 '적립금' 위 · 금액 아래 2줄, 충전 칩은 오른쪽 */
.app-sidebar .sidebar-header .app-user.sp-sb-user .user-balance { padding: 8px 8px 8px 12px; }
.sp-sb-user .user-balance .ub-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto;
  column-gap: 8px; row-gap: 1px; align-items: center;
}
.sp-sb-user .user-balance .ub-label { grid-column: 1; grid-row: 1; font-size: 11.5px; line-height: 1.3; color: #6b7684; }
.sp-sb-user .user-balance .ub-amount { grid-column: 1; grid-row: 2; text-align: left; font-size: 16px; line-height: 1.3; letter-spacing: -.01em; }
.sp-sb-user .user-balance .ub-amount.is-long { font-size: 14px; }
.sp-sb-user .user-balance .ub-amount.is-xlong { font-size: 12.5px; }
.sp-sb-user .user-balance .ub-plus { grid-column: 2; grid-row: 1 / span 2; }
body.dark .sp-sb-user .user-balance .ub-label { color: #94a3b8; }

/* =====================================================
   내역·목록 페이지 공용 (2026-09-26) — 주문내역/자동처리/연속작업/리필/서비스목록/문의/API
   주문 화면과 같은 톤: 흰 카드(16px 라운드, 얇은 테두리) · 연한 칩 · 상태는 점+연한 배지 · 숫자는 굵게
   ===================================================== */
.sp-pg { padding: 28px 0 40px; max-width: 1280px; margin: 0 auto; color: #191f28; }
.sp-pg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.sp-pg-title { margin: 0 0 4px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: #191f28; }
.sp-pg-sub { margin: 0; font-size: 14px; color: #6b7684; }
.sp-pg-cta {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 12px;
  background: linear-gradient(180deg, #2f80ec 0%, #1a66d2 100%); color: #fff !important; font-size: 14px; font-weight: 700;
  text-decoration: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 12px rgba(30,111,218,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.sp-pg-cta:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 18px rgba(30,111,218,.3); }
.sp-pg-cta i { margin: 0 !important; font-size: 12px; }
.sp-pg-cta.is-soft { background: #eef4fd; color: #1e6fda !important; box-shadow: none; border: 1px solid #d6e5fb; }
.sp-pg-cta.is-soft:hover { background: #e2edfc; box-shadow: none; }

.sp-pg-card { background: #fff; border: 1px solid #edf1f7; border-radius: 18px; padding: 18px 20px 20px; box-shadow: 0 1px 2px rgba(15,23,42,.03); }
.sp-pg-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sp-pg-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; padding: 2px; }
.sp-pg-tabs::-webkit-scrollbar { display: none; }
.sp-pg-tabs a {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px;
  background: #f2f4f6; color: #4e5968; font-size: 13.5px; font-weight: 600; text-decoration: none !important; white-space: nowrap;
  transition: background .14s ease, color .14s ease;
}
.sp-pg-tabs a:hover { background: #e8ebee; color: #191f28; }
.sp-pg-tabs a.is-active { background: #191f28; color: #fff; }


  
  

.sp-pg-search { position: relative; flex: 0 0 240px; margin: 0; }
.sp-pg-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); margin: 0 !important; color: #b0b8c1; font-size: 13px; pointer-events: none; }
.sp-pg-search input {
  width: 100%; height: 38px; padding: 0 12px 0 36px; border-radius: 12px; border: 1px solid #e5e8eb; background: #f9fafb;
  font-size: 13.5px; color: #191f28; outline: none; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.sp-pg-search input::placeholder { color: #b0b8c1; }
.sp-pg-search input:focus { border-color: #1e6fda; background: #fff; box-shadow: 0 0 0 3px rgba(30,111,218,.1); }

/* 상태 배지 */
.sp-st { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 700; background: #f2f4f6; color: #6b7684; white-space: nowrap; }
.sp-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sp-st.is-pending { background: #fff7e0; color: #b7791f; }
.sp-st.is-progress { background: #e8f1fd; color: #1e6fda; }
.sp-st.is-progress::before { animation: spPulse 1.6s ease-in-out infinite; }
.sp-st.is-done { background: #e6f7ee; color: #0f9d58; }
.sp-st.is-partial { background: #e3f6f8; color: #0b8a99; }
.sp-st.is-processing { background: #f2f4f6; color: #6b7684; }
.sp-st.is-canceled { background: #fdecee; color: #e03444; }
@keyframes spPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .sp-st.is-progress::before { animation: none; } }

/* 내역 행 */


/* 버튼 */
.sp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 38px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent;
  font-size: 13.5px; font-weight: 700; text-decoration: none !important; white-space: nowrap; cursor: pointer; transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.sp-btn i { margin: 0 !important; font-size: 11px; }
.sp-btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 9px; }
.sp-btn-primary { background: linear-gradient(180deg, #2f80ec 0%, #1a66d2 100%); color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.sp-btn-primary:hover { filter: brightness(1.05); }
.sp-btn-soft { background: #eef4fd; color: #1e6fda !important; }
.sp-btn-soft:hover { background: #e2edfc; }


.sp-btn-ghost { background: #f2f4f6; color: #4e5968 !important; }
.sp-btn-ghost:hover { background: #e8ebee; }
.sp-btn.is-disabled { background: #f2f4f6; color: #b0b8c1 !important; cursor: default; }

/* 빈 상태 */
.sp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 20px 48px; }
.sp-empty-ico { width: 56px; height: 56px; border-radius: 18px; background: #f2f4f6; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.sp-empty-ico i { margin: 0 !important; font-size: 22px; color: #b0b8c1; }
.sp-empty strong { font-size: 16px; font-weight: 700; color: #191f28; }
.sp-empty p { margin: 6px 0 16px; font-size: 13.5px; color: #8b95a1; }

/* 페이지 번호 */
.sp-pg .sp-pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin: 18px 0 0; padding: 0; list-style: none; }
.sp-pg .sp-pager li { margin: 0; }
.sp-pg .sp-pager li a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 10px;
  background: transparent; border: none; color: #4e5968; font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.sp-pg .sp-pager li a:hover { background: #f2f4f6; }
.sp-pg .sp-pager li.active a { background: #191f28; color: #fff; }

/* 태블릿·모바일 */
@media (max-width: 767.98px) {
  .sp-pg { padding: 18px 0 28px; }
  .sp-pg-head { align-items: flex-start; margin-bottom: 14px; }
  .sp-pg-title { font-size: 21px; }
  .sp-pg-sub { font-size: 13px; }
  .sp-pg-cta { height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
  .sp-pg-card { padding: 14px 14px 16px; border-radius: 16px; }
  .sp-pg-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .sp-pg-search { flex-basis: auto; }
}

/* 다크 모드 */
body.dark .sp-pg, body.dark .sp-pg-title, body.dark .sp-empty strong { color: #e5e7eb; }
body.dark .sp-pg-sub { color: #94a3b8; }
body.dark .sp-pg-card { background: #161a2e; border-color: #232842; box-shadow: none; }
body.dark .sp-pg-tabs a { background: #1f2438; color: #aab2c0; }
body.dark .sp-pg-tabs a:hover { background: #262c44; color: #e5e7eb; }
body.dark .sp-pg-tabs a.is-active { background: #e5e7eb; color: #111827; }
body.dark .sp-pg-search input { background: #1b2036; border-color: #2a3050; color: #e5e7eb; }

body.dark .sp-btn-soft { background: #14233d; color: #8fb8f0 !important; }
body.dark .sp-btn-ghost, body.dark .sp-empty-ico { background: #1f2438; color: #aab2c0 !important; }
body.dark .sp-st { background: #1f2438; }
body.dark .sp-st.is-pending { background: #2e2512; } body.dark .sp-st.is-progress { background: #14233d; color: #8fb8f0; }
body.dark .sp-st.is-done { background: #0f2a1f; color: #4ade80; } body.dark .sp-st.is-partial { background: #0f2a2e; color: #5ad3e0; }
body.dark .sp-st.is-canceled { background: #2e1418; color: #ff7b86; }
body.dark .sp-pg .sp-pager li a { color: #aab2c0; }
body.dark .sp-pg .sp-pager li.active a { background: #e5e7eb; color: #111827; }

/* 서비스 가격표 (/services) */
.sp-svc-total { flex-shrink: 0; padding: 7px 12px; border-radius: 999px; background: #eef4fd; color: #1e6fda; font-size: 13px; font-weight: 700; }
.sp-svc-chips a i { margin: 0 !important; font-size: 13px; }
.sp-ico-ig { color: #e1306c; } .sp-ico-yt { color: #ff0000; } .sp-ico-tt { color: #111; } .sp-ico-fb { color: #1877f2; }
.sp-ico-th { color: #111; } .sp-ico-x { color: #111; } .sp-ico-nv { color: #03c75a; } .sp-ico-auto { color: #1e6fda; }
.sp-svc-chips a.is-active i { color: #fff; }
.sp-svc-head, .sp-svc-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 120px 150px 150px; align-items: center; gap: 16px; }
.sp-pg-svc.has-time .sp-svc-head, .sp-pg-svc.has-time .sp-svc-row { grid-template-columns: 64px minmax(0, 1fr) 120px 150px 96px 150px; }
.sp-svc-head { padding: 4px 14px 10px; font-size: 12px; font-weight: 600; color: #8b95a1; border-bottom: 1px solid #f2f4f6; }
.sp-svc-head .is-r, .sp-svc-price, .sp-svc-range, .sp-svc-time { text-align: right; }
.sp-svc-group { margin-top: 8px; }
.sp-svc-group[hidden], .sp-svc-row[hidden] { display: none !important; }
.sp-svc-cat {
  position: sticky; top: 60px; z-index: 2; display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; padding: 10px 14px;
  background: #f7f9fc; border: 1px solid #edf1f7; border-radius: 12px;
}
.sp-svc-cat-ico { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: #e5e8eb; color: #fff; }
.sp-svc-cat-ico i { margin: 0 !important; font-size: 13px; color: inherit !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
.sp-svc-cat-ico.is-ig { background: linear-gradient(45deg, #f9a13a, #e1306c 55%, #8a3ab9); } .sp-svc-cat-ico.is-yt { background: #ff0000; }
.sp-svc-cat-ico.is-tt, .sp-svc-cat-ico.is-th, .sp-svc-cat-ico.is-x { background: #111; } .sp-svc-cat-ico.is-fb { background: #1877f2; }
.sp-svc-cat-ico.is-tg { background: #229ed9; } .sp-svc-cat-ico.is-kk { background: #fee500; color: #3c1e1e; } .sp-svc-cat-ico.is-nv { background: #03c75a; }
.sp-svc-cat-ico.is-web { background: #1e6fda; } .sp-svc-cat-ico.is-etc { background: #8b95a1; }
.sp-svc-cat-name { min-width: 0; font-size: 14.5px; font-weight: 800; color: #191f28; letter-spacing: -.01em; }
.sp-svc-cat-count { margin-left: auto; flex-shrink: 0; font-size: 12px; font-weight: 600; color: #8b95a1; }
.sp-svc-row { padding: 12px 14px; border-bottom: 1px solid #f2f4f6; border-radius: 10px; transition: background .12s ease; }
.sp-svc-row:hover { background: #f9fafb; }
.sp-svc-group .sp-svc-row:last-child { border-bottom: none; }
.sp-svc-id { justify-self: start; padding: 2px 7px; border-radius: 6px; background: #f2f4f6; color: #6b7684; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-svc-name { min-width: 0; font-size: 14.5px; font-weight: 600; color: #191f28; line-height: 1.45; }
.sp-svc-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-svc-price b { font-size: 15px; font-weight: 800; color: #191f28; }
.sp-svc-price small { margin-left: 1px; font-size: 12px; color: #6b7684; }
.sp-svc-range { font-size: 13px; color: #4e5968; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-svc-range em { margin: 0 4px; font-style: normal; color: #b0b8c1; }
.sp-svc-time { font-size: 13px; color: #4e5968; white-space: nowrap; }
.sp-svc-time.is-empty { color: #d1d6db; }
.sp-svc-btns { display: flex; justify-content: flex-end; gap: 6px; }

/* 설명 팝업 */
.sp-svc-modal { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15,23,42,.45); }
.sp-svc-modal[hidden] { display: none; }
.sp-svc-modal-box { width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column; background: #fff; border-radius: 20px; box-shadow: 0 24px 60px rgba(15,23,42,.25); overflow: hidden; }
.sp-svc-modal-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 6px; }
.sp-svc-modal-id { display: inline-block; margin-bottom: 6px; padding: 2px 7px; border-radius: 6px; background: #eef4fd; color: #1e6fda; font-size: 12px; font-weight: 700; }
.sp-svc-modal-hd h3 { margin: 0; font-size: 17px; font-weight: 800; color: #191f28; line-height: 1.4; }
.sp-svc-modal-x { flex-shrink: 0; width: 34px; height: 34px; border: none; border-radius: 10px; background: #f2f4f6; color: #6b7684; cursor: pointer; }
.sp-svc-modal-x:hover { background: #e8ebee; color: #191f28; }
.sp-svc-modal-x i { margin: 0 !important; }
.sp-svc-modal-bd { padding: 8px 22px 18px; overflow-y: auto; font-size: 14px; line-height: 1.7; color: #333d4b; }
.sp-svc-modal-ft { display: flex; gap: 8px; padding: 14px 22px 18px; border-top: 1px solid #f2f4f6; }
.sp-svc-modal-ft .sp-btn { flex: 1; height: 44px; }
.sp-svc-modal-ft .sp-btn-ghost { flex: 0 0 96px; }

@media (max-width: 1199.98px) {
  .sp-svc-head { display: none; }
  .sp-svc-row, .sp-pg-svc.has-time .sp-svc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
  .sp-svc-id { display: none; }
  .sp-svc-name { flex: 0 0 100%; }
  .sp-svc-price, .sp-svc-range, .sp-svc-time { text-align: left; }
  .sp-svc-range::before { content: "수량 "; color: #8b95a1; }
  .sp-svc-time::before { content: "평균 "; color: #8b95a1; }
  .sp-svc-btns { margin-left: auto; }
}
@media (max-width: 767.98px) {
  .sp-svc-cat { top: 56px; padding: 9px 12px; }
  .sp-svc-row { padding: 12px 6px; }
  .sp-svc-name { font-size: 14px; }
  .sp-svc-time { display: none; }
  .sp-svc-total { display: none; }
  .sp-svc-modal { align-items: flex-end; padding: 0; }
  .sp-svc-modal-box { max-width: none; border-radius: 20px 20px 0 0; max-height: 90vh; }
}

body.dark .sp-svc-cat { background: #1b2036; border-color: #232842; }
body.dark .sp-svc-cat-name, body.dark .sp-svc-name, body.dark .sp-svc-price b, body.dark .sp-svc-modal-hd h3 { color: #e5e7eb; }
body.dark .sp-svc-row { border-color: #232842; }
body.dark .sp-svc-row:hover { background: #1b2036; }
body.dark .sp-svc-id { background: #1f2438; color: #aab2c0; }
body.dark .sp-svc-range, body.dark .sp-svc-time, body.dark .sp-svc-modal-bd { color: #aab2c0; }
body.dark .sp-svc-head { border-color: #232842; }
body.dark .sp-svc-modal-box { background: #161a2e; }
body.dark .sp-svc-modal-ft { border-color: #232842; }
body.dark .sp-svc-modal-x { background: #1f2438; color: #aab2c0; }
body.dark .sp-ico-tt, body.dark .sp-ico-th, body.dark .sp-ico-x { color: #e5e7eb; }
@media (max-width: 767.98px) {
  .sp-svc-row, .sp-pg-svc.has-time .sp-svc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "price btns" "range btns"; gap: 4px 10px; }
  .sp-svc-name { grid-area: name; margin-bottom: 2px; }
  .sp-svc-price { grid-area: price; }
  .sp-svc-range { grid-area: range; font-size: 12.5px; }
  .sp-svc-btns { grid-area: btns; align-self: center; margin-left: 0; }
}

/* 문의하기 (/tickets) */
.sp-pg-cta.is-kakao { background: #fee500; color: #3c1e1e !important; box-shadow: 0 4px 12px rgba(254,229,0,.35); }
.sp-pg-cta.is-kakao:hover { box-shadow: 0 8px 18px rgba(230,200,0,.4); }
.sp-pg-tickets .d-card { border: 1px solid #edf1f7; border-radius: 18px; box-shadow: 0 1px 2px rgba(15,23,42,.03); height: 100%; }
.sp-pg-tickets .d-card .d-card-head { margin: 0; padding: 20px 22px 4px; font-size: 16px; font-weight: 800; color: #191f28; }
.sp-pg-tickets .d-card .d-card-head::after { display: none; }
.sp-pg-tickets .d-card .d-card-body { padding: 14px 22px 22px; }
.sp-pg-tickets label, .sp-pg-tickets .control-label { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: #4e5968; }
.sp-pg-tickets label[style] { margin-top: 14px !important; }
.sp-pg-tickets #optional { font-weight: 500; color: #8b95a1; }
.sp-pg-tickets .form-group { margin-bottom: 16px; }
.sp-pg-tickets .form-control {
  height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid #e5e8eb; background: #f9fafb; font-size: 14.5px; color: #191f28; box-shadow: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.sp-pg-tickets select.form-control { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b95a1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 14px center !important; }
.sp-pg-tickets textarea.form-control { height: auto; min-height: 140px; padding: 12px 14px; line-height: 1.6; resize: vertical; }
.sp-pg-tickets .form-control:focus { border-color: #1e6fda; background-color: #fff; box-shadow: 0 0 0 3px rgba(30,111,218,.1); }
.sp-pg-tickets .form-control::placeholder { color: #b0b8c1; }
.sp-tk-submit { width: 100%; height: 50px; font-size: 15px; border-radius: 12px; }

.sp-tk-tabs { display: flex; gap: 4px; margin: 18px 22px 0; padding: 4px; background: #f2f4f6; border-radius: 12px; flex-wrap: nowrap; }
.sp-tk-tabs .nav-item { flex: 1; margin: 0; padding: 0; }
.sp-tk-tabs .nav-link { display: block; height: 38px; line-height: 38px; padding: 0 6px; text-align: center; border-radius: 9px; background: transparent !important; color: #6b7684 !important; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.sp-tk-tabs .nav-link:hover { color: #191f28 !important; }
.sp-tk-tabs .nav-link.active { background: #fff !important; color: #191f28 !important; box-shadow: 0 1px 3px rgba(15,23,42,.1); }
.sp-pg-tickets #dc2-body { max-height: 560px; overflow-y: auto; }

.sp-tk-list { display: flex; flex-direction: column; }
.sp-tk-row { display: flex; align-items: center; gap: 12px; padding: 13px 8px; border-top: 1px solid #f2f4f6; border-radius: 10px; text-decoration: none !important; transition: background .12s ease; }
.sp-tk-row:first-child { border-top: none; }
.sp-tk-row:hover { background: #f9fafb; }
.sp-tk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sp-tk-subj { font-size: 14.5px; font-weight: 600; color: #191f28; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-tk-row.is-new .sp-tk-subj { font-weight: 800; }
.sp-tk-dot { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: #f04452; vertical-align: 3px; }
.sp-tk-meta { font-size: 12px; color: #8b95a1; font-variant-numeric: tabular-nums; }
.sp-tk-arrow { margin: 0 !important; font-size: 11px; color: #d1d6db; }
.sp-empty.is-sm { padding: 36px 16px 28px; }

.sp-tk-kakao { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 16px 16px; }
.sp-tk-kakao-ico { width: 60px; height: 60px; border-radius: 20px; background: #fee500; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.sp-tk-kakao-ico i { margin: 0 !important; font-size: 26px; color: #3c1e1e !important; }
.sp-tk-kakao strong { font-size: 16px; font-weight: 800; color: #191f28; }
.sp-tk-kakao p { margin: 6px 0 16px; font-size: 13.5px; color: #6b7684; }
.sp-tk-kakao-btn { height: 46px; padding: 0 28px; background: #fee500; color: #3c1e1e !important; border-radius: 12px; font-size: 14.5px; }
.sp-tk-kakao-btn:hover { background: #fada0a; }
.sp-tk-kakao small { margin-top: 14px; font-size: 12px; color: #8b95a1; line-height: 1.5; }

/* 자주 묻는 질문 아코디언: 파란 통채움 → 얇은 카드 */
.sp-pg-tickets #sssTab .faq-ss-tabs .home-ss-tab { margin: 0 0 8px; padding: 14px 16px; border: 1px solid #edf1f7; border-radius: 12px; background: #fff; color: #191f28; }
.sp-pg-tickets #sssTab .faq-ss-tabs .home-ss-tab .ss-tab-head { font-size: 14.5px; font-weight: 700; color: #191f28; }
.sp-pg-tickets #sssTab .faq-ss-tabs .home-ss-tab .ss-tab-head .right-p { font-size: 12px; height: auto; line-height: 1.6; color: #b0b8c1; }
.sp-pg-tickets #sssTab .faq-ss-tabs .home-ss-tab .ss-tab-content { padding-top: 10px; font-size: 13.5px; line-height: 1.7; color: #4e5968; }
.sp-pg-tickets #sssTab .faq-ss-tabs .home-ss-tab.active { background: #f7f9fc; border-color: #d6e5fb; color: #191f28; }
.sp-pg-tickets #sssTab .faq-ss-tabs .home-ss-tab.active .ss-tab-head, .sp-pg-tickets #sssTab .faq-ss-tabs .home-ss-tab.active .ss-tab-head .right-p { color: #1e6fda; }
.sp-pg-tickets #sssTab .faq-ss-tabs .home-ss-tab .ss-tab-content a { color: #1e6fda; font-weight: 600; }

@media (max-width: 991.98px) { .sp-pg-tickets .d-card { height: auto; } .sp-pg-tickets .col-lg-6 + .col-lg-6 { margin-top: 16px; } }
@media (max-width: 767.98px) {
  .sp-pg-tickets .sp-pg-cta.is-kakao { display: none; }
  .sp-pg-tickets .d-card .d-card-head { padding: 16px 16px 2px; }
  .sp-pg-tickets .d-card .d-card-body { padding: 12px 16px 18px; }
  .sp-tk-tabs { margin: 14px 16px 0; }
  .sp-tk-tabs .nav-link { font-size: 13px; }
}

body.dark .sp-pg-tickets .d-card { background: #161a2e; border-color: #232842; }
body.dark .sp-pg-tickets .d-card .d-card-head, body.dark .sp-tk-subj, body.dark .sp-tk-kakao strong { color: #e5e7eb; }
body.dark .sp-pg-tickets .form-control { background: #1b2036; border-color: #2a3050; color: #e5e7eb; }
body.dark .sp-pg-tickets label { color: #aab2c0; }
body.dark .sp-tk-tabs { background: #1b2036; }
body.dark .sp-tk-tabs .nav-link.active { background: #2a3050 !important; color: #e5e7eb !important; }
body.dark .sp-tk-row { border-color: #232842; }
body.dark .sp-tk-row:hover { background: #1b2036; }
body.dark .sp-pg-tickets #sssTab .faq-ss-tabs .home-ss-tab { background: #161a2e; border-color: #232842; }
body.dark .sp-pg-tickets #sssTab .faq-ss-tabs .home-ss-tab .ss-tab-head { color: #e5e7eb; }
body.dark .sp-pg-tickets #sssTab .faq-ss-tabs .home-ss-tab .ss-tab-content { color: #aab2c0; }
body.dark .sp-pg-tickets #sssTab .faq-ss-tabs .home-ss-tab.active { background: #1b2036; }

/* API (/api) */
.sp-api-basic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 6px 4px; margin-bottom: 14px; }
.sp-api-kv { display: flex; flex-direction: column; gap: 6px; padding: 12px 18px; border-left: 1px solid #f2f4f6; min-width: 0; }
.sp-api-kv:first-child { border-left: none; }
.sp-api-k { font-size: 12px; font-weight: 600; color: #8b95a1; }
.sp-api-v { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14.5px; font-weight: 700; color: #191f28; }
.sp-api-v code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; background: none; color: #191f28; font-size: 13.5px; font-weight: 600; }
.sp-api-verb { padding: 2px 8px; border-radius: 6px; background: #e6f7ee; color: #0f9d58; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; }
.sp-api-link { color: #1e6fda; font-size: 14px; text-decoration: none !important; }
.sp-api-link i { margin: 0 0 0 2px !important; font-size: 10px; }
.sp-api-copy { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 7px; border: none; border-radius: 7px; background: #f2f4f6; color: #8b95a1; font-size: 12px; font-weight: 700; cursor: pointer; }
.sp-api-copy i { margin: 0 !important; font-size: 12px; }
.sp-api-copy:hover { background: #e8f1fd; color: #1e6fda; }
.sp-api-copy.is-copied { background: #e6f7ee; color: #0f9d58; }
.sp-api-copy.is-dark { background: rgba(255,255,255,.08); color: #aab2c0; }
.sp-api-copy.is-dark:hover { background: rgba(255,255,255,.16); color: #fff; }
.sp-api-copy.is-dark.is-copied { background: rgba(18,183,106,.2); color: #4ade80; }
.sp-api-nav { margin: 0 0 14px; }
.sp-api-method { scroll-margin-top: 80px; }
article.sp-api-method { margin-bottom: 14px; padding: 0; overflow: hidden; }
.sp-api-mhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid #f2f4f6; }
.sp-api-mhead h2 { margin: 0; font-size: 16px; font-weight: 800; color: #191f28; }
.sp-api-action { padding: 3px 9px; border-radius: 7px; background: #f2f4f6; color: #6b7684; font-family: 'SFMono-Regular', Consolas, Menlo, monospace; font-size: 12px; }
.sp-api-action b { color: #1e6fda; font-weight: 700; }
.sp-api-mbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sp-api-params { padding: 16px 22px 20px; }
.sp-api-example { padding: 16px 22px 20px; background: #0f172a; min-width: 0; }
.sp-api-label { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: #8b95a1; letter-spacing: .02em; }
.sp-api-codehead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sp-api-codehead .sp-api-label { margin: 0; color: #64748b; }
.sp-api-code { margin: 0; padding: 0; background: none; color: #cbd5e1; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 12.5px; line-height: 1.65; white-space: pre; overflow: auto; max-height: 420px; }
.sp-api-table { width: 100%; border-collapse: collapse; }
.sp-api-table td { padding: 10px 0; border-top: 1px solid #f2f4f6; font-size: 13.5px; color: #4e5968; vertical-align: top; }
.sp-api-table tr:first-child td { border-top: none; }
.sp-api-table td:first-child { width: 42%; padding-right: 12px; }
.sp-api-table code { padding: 2px 7px; border-radius: 6px; background: #eef4fd; color: #1557b0; font-size: 12.5px; font-weight: 600; }
.sp-api-type { width: 100%; height: 40px; margin-bottom: 10px; padding: 0 12px; border: 1px solid #e5e8eb; border-radius: 10px; background: #f9fafb; font-size: 13.5px; color: #191f28; outline: none; cursor: pointer; }
.sp-api-type:focus { border-color: #1e6fda; box-shadow: 0 0 0 3px rgba(30,111,218,.1); }
@media (max-width: 1199.98px) { .sp-api-mbody { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767.98px) {
  .sp-api-basic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-api-kv:nth-child(3) { border-left: none; }
  .sp-api-kv:nth-child(n+3) { border-top: 1px solid #f2f4f6; }
  .sp-api-mhead, .sp-api-params, .sp-api-example { padding-left: 16px; padding-right: 16px; }
  .sp-api-code { font-size: 12px; }
}
body.dark .sp-api-kv, body.dark .sp-api-mhead, body.dark .sp-api-table td { border-color: #232842; }
body.dark .sp-api-v, body.dark .sp-api-v code, body.dark .sp-api-mhead h2 { color: #e5e7eb; }
body.dark .sp-api-action { background: #1f2438; color: #aab2c0; }
body.dark .sp-api-table td { color: #aab2c0; }
body.dark .sp-api-table code { background: #14233d; color: #8fb8f0; }
body.dark .sp-api-example { background: #0b1020; }
body.dark .sp-api-type { background: #1b2036; border-color: #2a3050; color: #e5e7eb; }
.sp-api-table td { font-weight: 400; }
.sp-api-code { font-weight: 400; }
body.dark .sp-btn.is-disabled { background: #1f2438; color: #5b6478 !important; }
body.dark .sp-svc-total, body.dark .sp-pg-cta.is-soft { background: #14233d; border-color: #22385c; color: #8fb8f0 !important; }

/* =====================================================
   내역 카드 (주문내역·자동처리·연속작업·리필) — 2026-09-26 최종
   - 큰 흰 틀 안에 카드, 넓은 화면에서도 왼쪽(메뉴 쪽) 정렬
   - 배치는 SNSPOP식 '영수증': 상태·번호 → 상품명 → 링크 → 세로 목록(마지막 줄 사용금액만 강조) → 날짜·버튼
   - 글자는 서포터 수준으로 작고 차분하게: 상품명 14/700, 나머지 12~13/400~500, 강조는 금액 한 곳
   ===================================================== */
.sp-pg { margin-left: 0; margin-right: auto; }
.sp-pg-orders, .sp-pg-subs, .sp-pg-drip, .sp-pg-refill {
  margin: 24px auto 40px 0; padding: 26px 28px 28px; background: #fff; border: 1px solid #edf1f7; border-radius: 18px;
  box-shadow: 0 1px 3px rgba(15,23,42,.03);
}
.sp-oc-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.sp-oc-bar .sp-pg-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: #191f28; }
.sp-oc-bar .sp-pg-search { flex: 0 0 260px; }
.sp-oc-bar .sp-pg-search input { height: 38px; background: #f9fafb; font-size: 13px; }
.sp-oc-chips { display: flex; gap: 6px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #f2f4f6; overflow-x: auto; scrollbar-width: none; }
.sp-oc-chips::-webkit-scrollbar { display: none; }
.sp-oc-chips a {
  flex-shrink: 0; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px;
  background: #f2f4f6; color: #4e5968; font-size: 13px; font-weight: 500; text-decoration: none !important; white-space: nowrap; transition: background .14s ease, color .14s ease;
}
.sp-oc-chips a:hover { background: #e8ebee; color: #191f28; }
.sp-oc-chips a.is-active { background: #1e6fda; color: #fff; font-weight: 600; }

.sp-oc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sp-oc { display: flex; flex-direction: column; min-width: 0; padding: 16px 16px 14px; background: #fff; border: 1px solid #e9edf3; border-radius: 12px; transition: border-color .15s ease, box-shadow .15s ease; }
.sp-oc:hover { border-color: #cfe0f7; box-shadow: 0 4px 14px rgba(30,111,218,.06); }
.sp-oc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.sp-oc-st { padding: 2px 7px; border-radius: 5px; font-size: 11px; font-weight: 600; background: #f2f4f6; color: #6b7684; white-space: nowrap; }
.sp-oc-st.is-pending { background: #fff4d6; color: #b7791f; }
.sp-oc-st.is-progress { background: #e8f1fd; color: #1e6fda; }
.sp-oc-st.is-done { background: #e6f7ee; color: #0f9d58; }
.sp-oc-st.is-partial { background: #e3f6f8; color: #0b8a99; }
.sp-oc-st.is-canceled { background: #fdecee; color: #e03444; }
.sp-oc-copyid { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: #8b95a1; font-variant-numeric: tabular-nums; cursor: pointer; }
.sp-oc-copyid i { margin: 0 !important; font-size: 10.5px; color: #c4cad1; }
.sp-oc-copyid:hover, .sp-oc-copyid:hover i { color: #1e6fda; }
.sp-oc-copyid.is-copied, .sp-oc-copyid.is-copied i { color: #0f9d58; }
.sp-oc-name { margin-bottom: 4px; font-size: 14px; font-weight: 700; line-height: 1.45; color: #191f28; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; }
.sp-oc-link { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 12px; font-weight: 400; color: #8b95a1; }
.sp-oc-link > i { flex-shrink: 0; margin: 0 !important; font-size: 10.5px; color: #c4cad1; }
.sp-oc-link span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-oc-link a { color: #8b95a1; text-decoration: none; }
.sp-oc-link a:hover { color: #1e6fda; text-decoration: underline; }
.sp-oc-lcopy { flex-shrink: 0; width: 22px; height: 22px; padding: 0; border: none; border-radius: 6px; background: transparent; color: #b0b8c1; font-size: 11px; cursor: pointer; }
.sp-oc-lcopy i { margin: 0 !important; }
.sp-oc-lcopy:hover { background: #f2f4f6; color: #1e6fda; }
.sp-oc-lcopy.is-copied { color: #0f9d58; }

.sp-oc-rc { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed #e5e8eb; }
.sp-oc-rc > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 0; }
.sp-oc-rc dt { margin: 0; font-size: 12px; font-weight: 400; color: #8b95a1; white-space: nowrap; }
.sp-oc-rc dd { margin: 0; min-width: 0; font-size: 13px; font-weight: 500; color: #333d4b; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-oc-rc dd a { color: #1e6fda; text-decoration: none; font-weight: 600; }
.sp-oc-rc dd.is-empty { color: #c4cad1; }
.sp-oc-rc > div.is-total { margin-top: 6px; padding-top: 8px; border-top: 1px solid #f2f4f6; }
.sp-oc-rc > div.is-total dt { font-weight: 600; color: #4e5968; }
.sp-oc-rc > div.is-total dd { font-size: 14px; font-weight: 700; color: #1e6fda; }

.sp-oc-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; min-height: 42px; }
.sp-oc-date { font-size: 12px; font-weight: 400; color: #b0b8c1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-oc-acts { display: flex; gap: 6px; flex-shrink: 0; }
.sp-oc-btn { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 7px; border: 1px solid #e5e8eb; background: #fff; color: #4e5968 !important; font-size: 12px; font-weight: 600; text-decoration: none !important; white-space: nowrap; }
.sp-oc-btn:hover { border-color: #c9d3df; color: #191f28 !important; }
.sp-oc-btn.is-blue { background: #eef4fd; border-color: #eef4fd; color: #1e6fda !important; }
.sp-oc-btn.is-blue:hover { background: #e2edfc; }
.sp-oc-btn.is-off { background: #f2f4f6; border-color: #f2f4f6; color: #b0b8c1 !important; cursor: default; }
.sp-oc.is-short .sp-oc-bottom { min-height: 0; }
.sp-oc-page .sp-empty { background: #fff; border: 1px solid #edf1f7; border-radius: 12px; }

@media (max-width: 1399.98px) { .sp-oc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
  .sp-pg-orders, .sp-pg-subs, .sp-pg-drip, .sp-pg-refill { margin: 12px 0 24px; padding: 18px 14px; border-radius: 16px; }
  .sp-oc-bar { flex-wrap: wrap; gap: 10px; }
  .sp-oc-bar .sp-pg-search { flex: 1 1 100%; }
  .sp-oc-chips { margin-bottom: 14px; padding-bottom: 14px; }
  .sp-oc-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sp-oc { padding: 14px; }
}

body.dark .sp-pg-orders, body.dark .sp-pg-subs, body.dark .sp-pg-drip, body.dark .sp-pg-refill { background: #161a2e; border-color: #232842; box-shadow: none; }
body.dark .sp-oc-bar .sp-pg-title, body.dark .sp-oc-name { color: #e5e7eb; }
body.dark .sp-oc-bar .sp-pg-search input { background: #1b2036; }
body.dark .sp-oc-chips { border-color: #232842; }
body.dark .sp-oc-chips a { background: #1f2438; color: #aab2c0; }
body.dark .sp-oc-chips a.is-active { background: #1e6fda; color: #fff; }
body.dark .sp-oc, body.dark .sp-oc-page .sp-empty { background: #1b2036; border-color: #2a3050; }
body.dark .sp-oc-rc { border-color: #2a3050; }
body.dark .sp-oc-rc > div.is-total { border-color: #2a3050; }
body.dark .sp-oc-rc dd { color: #cbd2dc; }
body.dark .sp-oc-rc > div.is-total dt { color: #aab2c0; }
body.dark .sp-oc-rc > div.is-total dd { color: #8fb8f0; }
body.dark .sp-oc-st { background: #1f2438; }
body.dark .sp-oc-st.is-pending { background: #2e2512; } body.dark .sp-oc-st.is-progress { background: #14233d; color: #8fb8f0; }
body.dark .sp-oc-st.is-done { background: #0f2a1f; color: #4ade80; } body.dark .sp-oc-st.is-partial { background: #0f2a2e; color: #5ad3e0; }
body.dark .sp-oc-st.is-canceled { background: #2e1418; color: #ff7b86; }
body.dark .sp-oc-btn { background: transparent; border-color: #2a3050; color: #aab2c0 !important; }
body.dark .sp-oc-btn.is-blue { background: #14233d; border-color: #14233d; color: #8fb8f0 !important; }
body.dark .sp-oc-lcopy:hover { background: #1f2438; }
/* 복사 알림 */
.sp-toast {
  position: fixed; left: 50%; bottom: 32px; z-index: 10100; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  padding: 11px 18px; border-radius: 12px; background: rgba(25,31,40,.92); color: #fff; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(15,23,42,.2); transition: opacity .18s ease, transform .18s ease; white-space: nowrap;
}
.sp-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 767.98px) { .sp-toast { bottom: 84px; } }
@media (prefers-reduced-motion: reduce) { .sp-toast { transition: none; } }

/* =====================================================
   왼쪽 메뉴 C안 '바로가기 타일' (2026-09-26 사용자 선택)
   이름·계정설정 한 줄 → 적립금 칸(+충전) → 주문하기·주문내역·문의하기 타일 → 나머지 작은 목록(가는 선으로 구분) → 카톡 안내
   타일·아이콘·구분선은 script.js spInitSidebar가 관리자 메뉴 이름을 보고 만듦
   ===================================================== */
.app-sidebar .sidebar-header .app-user.sp-sb-user { margin: 12px 12px 12px; padding: 0 !important; background: none; border: none; }
.app-sidebar .sp-sb-user > .sp-sb-avatar { display: none; }
.sp-sbc-me { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px 10px; }
.app-sidebar .sidebar-header .app-user .sp-sbc-me .user-name-row { margin: 0; justify-content: flex-start; gap: 2px; min-width: 0; }
.app-sidebar .sidebar-header .app-user .sp-sbc-me .user-name { font-size: 15px; font-weight: 700; color: #191f28; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-sbc-me .user-copy-btn { width: 22px; height: 22px; border: none; background: transparent; font-size: 11px; color: #c4cad1; }
.sp-sbc-me .user-copy-btn:hover { background: #f2f4f6; color: #1e6fda; }
.sp-sbc-me .sp-sb-account { flex-shrink: 0; font-size: 12px; color: #8b95a1; }
.app-sidebar .sidebar-header .app-user.sp-sb-user .user-balance { padding: 11px 10px 11px 14px; background: #f7f9fc !important; border: none; border-radius: 12px; }
.app-sidebar .sidebar-header .app-user.sp-sb-user .user-balance:hover { background: #eff3f8 !important; }
.sp-sb-user .user-balance .ub-label { font-size: 11.5px; font-weight: 500; color: #8b95a1; }
.sp-sb-user .user-balance .ub-amount { font-size: 16px; font-weight: 800; color: #191f28; }
.sp-sb-user .user-balance .ub-amount.is-long { font-size: 14.5px; }
.sp-sb-user .user-balance .ub-amount.is-xlong { font-size: 13px; }
.sp-sb-user .user-balance .ub-plus { height: 30px; padding: 0 12px; border-radius: 8px; background: #1e6fda; box-shadow: none; }
.sp-sb-user .user-balance .ub-plus-text { font-size: 12.5px; font-weight: 700; }

.sp-sbc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 2px 12px 12px; }
.sp-sbc-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 12px 2px 10px; border: 1px solid #edf1f7; border-radius: 12px;
  background: #fff; color: #4e5968 !important; font-size: 12px; font-weight: 600; text-decoration: none !important; transition: border-color .14s ease, box-shadow .14s ease;
}
.sp-sbc-tile span { white-space: nowrap; }
.sp-sbc-tile:hover { border-color: #cfe0f7; box-shadow: 0 3px 10px rgba(30,111,218,.08); }
.sp-sbc-tile.is-active { border-color: #1e6fda; color: #1e6fda !important; }
.sp-sbc-ti { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; margin: 0 !important; font-size: 14px; }
.sp-sbc-ti.t1 { background: #e8f1fd; color: #1e6fda; } .sp-sbc-ti.t2 { background: #e6f7ee; color: #0f9d58; } .sp-sbc-ti.t3 { background: #fff4d6; color: #b7791f; }

.app-sidebar .sidebar-menu li a.menu-link { height: 38px; padding: 0 10px; font-size: 13.5px; font-weight: 500; color: #4e5968; }
.app-sidebar .sidebar-menu li a.menu-link .menu-icon { font-size: 14px; color: #b0b8c1; }
.app-sidebar .sidebar-menu li.active > a.menu-link { background: #f2f4f6; color: #191f28 !important; font-weight: 700; }
.app-sidebar .sidebar-menu li.active > a.menu-link .menu-icon { color: #1e6fda; }
.app-sidebar .sidebar-menu li.sp-sb-sep { height: 1px; margin: 8px 10px; padding: 0; background: #f2f4f6; }
.app-sidebar .sidebar-menu li.sp-sb-hide { display: none !important; }
.sp-sbc-hint { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 400; color: #c4cad1; }
.sp-sbc-help { display: block; padding: 2px 6px 12px; font-size: 12px; line-height: 1.6; color: #8b95a1 !important; text-decoration: none !important; }
.sp-sbc-help b { color: #1e6fda; font-weight: 700; }
.sp-sbc-help small { display: block; font-size: 12px; color: #b0b8c1; }

/* 접힘(64px): 이니셜 + 타일은 아이콘만 세로로 */
@media (min-width: 1200px) {
  .app-sidebar.sidebar-inact .sp-sb-user { display: flex; justify-content: center; }
  .app-sidebar.sidebar-inact .sp-sb-user > .sp-sb-avatar { display: inline-flex; }
  .app-sidebar.sidebar-inact .sp-sbc-me { display: none; }
  .app-sidebar.sidebar-inact .sp-sbc-tiles { grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0 8px 4px; }
  .app-sidebar.sidebar-inact .sp-sbc-tile { padding: 6px 0; border: none; }
  .app-sidebar.sidebar-inact .sp-sbc-tile span, .app-sidebar.sidebar-inact .sp-sbc-hint { display: none; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .app-sidebar:not(.sidebar-inact) .sp-sb-user { display: flex; justify-content: center; }
  .app-sidebar:not(.sidebar-inact) .sp-sb-user > .sp-sb-avatar { display: inline-flex; }
  .app-sidebar:not(.sidebar-inact) .sp-sbc-me { display: none; }
  .app-sidebar:not(.sidebar-inact) .sp-sbc-tiles { grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0 8px 4px; }
  .app-sidebar:not(.sidebar-inact) .sp-sbc-tile { padding: 6px 0; border: none; }
  .app-sidebar:not(.sidebar-inact) .sp-sbc-tile span, .app-sidebar:not(.sidebar-inact) .sp-sbc-hint { display: none; }
}

body.dark .app-sidebar .sidebar-header .app-user .sp-sbc-me .user-name { color: #e5e7eb; }
body.dark .app-sidebar .sidebar-header .app-user.sp-sb-user .user-balance { background: #1b2036 !important; }
body.dark .sp-sb-user .user-balance .ub-amount { color: #e5e7eb; }
body.dark .sp-sbc-tile { background: transparent; border-color: #2a3050; color: #aab2c0 !important; }
body.dark .sp-sbc-tile.is-active { border-color: #5a9be6; color: #8fb8f0 !important; }
body.dark .sp-sbc-ti.t1 { background: #14233d; } body.dark .sp-sbc-ti.t2 { background: #0f2a1f; color: #4ade80; } body.dark .sp-sbc-ti.t3 { background: #2e2512; color: #f5c451; }
body.dark .app-sidebar .sidebar-menu li.sp-sb-sep { background: #232842; }
body.dark .app-sidebar .sidebar-menu li.active > a.menu-link { background: #1f2438; color: #e5e7eb !important; }
body.dark .app-sidebar .sidebar-header .app-user.sp-sb-user { background: none; border: none; }
body.dark .sp-sbc-hint { color: #5b6478; }
body.dark .sp-sbc-help small { color: #5b6478; }

/* =====================================================
   AI 주문 도우미 · AI 상담 (2026-09-26, script.js SP_AI_URL 있을 때만 나타남)
   ===================================================== */
.sp-ai-seg { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 12px; background: #f2f4f6; border-radius: 12px; }
.sp-ai-seg button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: none; border-radius: 9px; background: transparent; color: #6b7684; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.sp-ai-seg button i { margin: 0 !important; font-size: 12px; }
.sp-ai-seg button[data-t="ai"] i { color: #1e6fda; }
.sp-ai-seg button.is-on { background: #fff; color: #191f28; box-shadow: 0 1px 3px rgba(15,23,42,.1); }
.sp-ai-ask { display: flex; align-items: center; gap: 10px; height: 52px; margin: 0; padding: 0 7px 0 16px; border: 1.5px solid #1e6fda; border-radius: 14px; background: #fff; box-shadow: 0 0 0 4px rgba(30,111,218,.08); }
.sp-ai-ask > i { margin: 0 !important; color: #1e6fda; }
.sp-ai-ask input { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: transparent; font-size: 15px; color: #191f28; }
.sp-ai-ask input::placeholder { color: #b0b8c1; }
.sp-ai-ask button { flex-shrink: 0; height: 38px; padding: 0 16px; border: none; border-radius: 10px; background: #1e6fda; color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.sp-ai-ask button:disabled { opacity: .6; cursor: default; }
.sp-ai-ex { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.sp-ai-ex button { padding: 6px 11px; border: 1px solid #edf1f7; border-radius: 999px; background: #f7f9fc; color: #4e5968; font-size: 12.5px; cursor: pointer; }
.sp-ai-ex button:hover { border-color: #b9d3f6; color: #1e6fda; }
.sp-ai-out:empty { display: none; }
.sp-ai-out { margin-top: 14px; }
.sp-ai-reply { display: flex; gap: 10px; margin-bottom: 12px; }
.sp-ai-reply p { margin: 5px 0 0; font-size: 14px; line-height: 1.6; color: #333d4b; }
.sp-ai-av { flex-shrink: 0; width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #4a9bff, #1e6fda); color: #fff; font-size: 12px; }
.sp-ai-av i { margin: 0 !important; color: #fff !important; }
.sp-ai-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sp-ai-pick { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px; border: 1px solid #e9edf3; border-radius: 12px; background: #fff; }
.sp-ai-pick.is-best { border-color: #1e6fda; box-shadow: 0 4px 14px rgba(30,111,218,.08); }
.sp-ai-badge { align-self: flex-start; padding: 2px 7px; border-radius: 5px; background: #f2f4f6; color: #6b7684; font-size: 11px; font-weight: 700; }
.sp-ai-pick.is-best .sp-ai-badge { background: #e8f1fd; color: #1e6fda; }
.sp-ai-nm { font-size: 14px; font-weight: 700; line-height: 1.4; color: #191f28; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-ai-why { font-size: 12.5px; line-height: 1.5; color: #6b7684; }
.sp-ai-kv { display: flex; justify-content: space-between; font-size: 12px; color: #8b95a1; }
.sp-ai-kv b { font-weight: 600; color: #191f28; } .sp-ai-kv b.is-won { font-weight: 700; color: #1e6fda; }
.sp-ai-put { margin-top: auto; height: 34px; border: none; border-radius: 9px; background: #eef4fd; color: #1e6fda; font-size: 13px; font-weight: 700; cursor: pointer; }
.sp-ai-pick.is-best .sp-ai-put { background: #1e6fda; color: #fff; }
.sp-ai-disc { margin: 10px 0 0; font-size: 11.5px; color: #b0b8c1; }
.sp-ai-kakao, .sp-ai-b-kk { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; background: #fee500; color: #3c1e1e !important; font-size: 12.5px; font-weight: 700; text-decoration: none !important; }
.sp-ai-wait { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #8b95a1; }
.sp-ai-wait span { width: 6px; height: 6px; border-radius: 50%; background: #b0b8c1; animation: spAiDot 1s infinite ease-in-out; }
.sp-ai-wait span:nth-child(2) { animation-delay: .15s; } .sp-ai-wait span:nth-child(3) { animation-delay: .3s; margin-right: 4px; }
@keyframes spAiDot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .sp-ai-wait span { animation: none; } }

.sp-ai-fab {
  position: fixed; right: 88px; bottom: 24px; z-index: 10040; display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 18px;
  border: none; border-radius: 25px; background: linear-gradient(135deg, #4a9bff, #1e6fda); color: #fff; font-size: 14px; font-weight: 700;
  box-shadow: 0 8px 22px rgba(30,111,218,.3); cursor: pointer;
}
.sp-ai-fab i { margin: 0 !important; color: #fff !important; }
.sp-ai-fab.is-open { box-shadow: 0 4px 12px rgba(30,111,218,.25); }
.sp-ai-chat { position: fixed; right: 24px; bottom: 88px; z-index: 10045; display: flex; flex-direction: column; width: 360px; height: min(560px, calc(100vh - 120px)); background: #fff; border-radius: 18px; box-shadow: 0 18px 44px rgba(15,23,42,.18); overflow: hidden; }
.sp-ai-chat[hidden] { display: none; }
.sp-ai-ch-hd { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #f2f4f6; }
.sp-ai-ch-hd strong { display: block; font-size: 14.5px; font-weight: 700; color: #191f28; }
.sp-ai-ch-hd small { font-size: 11.5px; color: #0f9d58; }
.sp-ai-ch-hd small::before { content: "●"; font-size: 8px; margin-right: 4px; vertical-align: 1px; }
.sp-ai-x { margin-left: auto; width: 32px; height: 32px; border: none; border-radius: 9px; background: transparent; color: #b0b8c1; cursor: pointer; }
.sp-ai-x:hover { background: #f2f4f6; color: #191f28; }
.sp-ai-x i { margin: 0 !important; }
.sp-ai-ch-bd { flex: 1; overflow-y: auto; padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 10px; }
.sp-ai-b { max-width: 84%; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
.sp-ai-b.is-ai { align-self: flex-start; background: #f2f4f6; color: #191f28; border-top-left-radius: 4px; }
.sp-ai-b.is-me { align-self: flex-end; background: #1e6fda; color: #fff; border-top-right-radius: 4px; }
.sp-ai-b .sp-ai-b-kk { display: flex; width: max-content; margin-top: 8px; }
.sp-ai-b.sp-ai-wait { padding: 12px 14px; }
.sp-ai-qs { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-ai-qs button { padding: 6px 10px; border: 1px solid #d6e5fb; border-radius: 999px; background: #fff; color: #1e6fda; font-size: 12px; cursor: pointer; }
.sp-ai-ch-ft { padding: 10px 12px 12px; border-top: 1px solid #f2f4f6; }
.sp-ai-ch-in { display: flex; align-items: center; gap: 8px; margin: 0; height: 44px; padding: 0 6px 0 12px; border-radius: 12px; background: #f7f9fc; }
.sp-ai-ch-in input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 14px; color: #191f28; }
.sp-ai-ch-in button { width: 34px; height: 34px; border: none; border-radius: 9px; background: #1e6fda; color: #fff; cursor: pointer; }
.sp-ai-ch-in button i { margin: 0 !important; }
.sp-ai-ch-kk { display: block; margin-top: 8px; text-align: center; font-size: 11.5px; color: #8b95a1 !important; text-decoration: none !important; }
.sp-ai-ch-kk b { padding: 1px 6px; border-radius: 4px; background: #fee500; color: #3c1e1e; }

@media (max-width: 991.98px) { .sp-ai-picks { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767.98px) {
  .sp-ai-fab { right: 16px; bottom: 84px; height: 44px; padding: 0 14px; font-size: 13px; }
  .sp-ai-chat { inset: 0; width: auto; height: auto; border-radius: 0; }
  body.sp-ai-lock { overflow: hidden; }
  .sp-ai-ask { height: 48px; }
  .sp-ai-ask input { font-size: 16px; } /* iOS 확대 방지 */
  .sp-ai-ch-in input { font-size: 16px; }
}
body.dark .sp-ai-seg { background: #1b2036; }
body.dark .sp-ai-seg button.is-on { background: #2a3050; color: #e5e7eb; }
body.dark .sp-ai-ask { background: #161a2e; }
body.dark .sp-ai-ask input, body.dark .sp-ai-nm, body.dark .sp-ai-kv b, body.dark .sp-ai-ch-hd strong, body.dark .sp-ai-ch-in input { color: #e5e7eb; }
body.dark .sp-ai-ex button { background: #1b2036; border-color: #2a3050; color: #aab2c0; }
body.dark .sp-ai-reply p { color: #cbd2dc; }
body.dark .sp-ai-pick { background: #1b2036; border-color: #2a3050; }
body.dark .sp-ai-chat { background: #161a2e; }
body.dark .sp-ai-ch-hd, body.dark .sp-ai-ch-ft { border-color: #232842; }
body.dark .sp-ai-b.is-ai { background: #1f2438; color: #e5e7eb; }
body.dark .sp-ai-ch-in { background: #1b2036; }
body.dark .sp-ai-qs button { background: transparent; border-color: #2a3050; color: #8fb8f0; }
/* AI 아이콘(반짝이는 별) + 탭 다듬기 */
.sp-ai-ico { width: 1.15em; height: 1.15em; flex-shrink: 0; overflow: visible; fill: currentColor; vertical-align: -0.18em; }
.sp-ai-ico path { transform-box: fill-box; transform-origin: center; }
.sp-ai-ico .s1 { animation: spAiStar 2.6s ease-in-out infinite; }
.sp-ai-ico .s2 { animation: spAiTwinkle 2.6s ease-in-out infinite .5s; }
.sp-ai-ico .s3 { animation: spAiTwinkle 2.6s ease-in-out infinite 1.3s; }
@keyframes spAiStar { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(.82) rotate(12deg); } }
@keyframes spAiTwinkle { 0%, 100% { opacity: 1; transform: scale(1); } 45% { opacity: .15; transform: scale(.4); } }
@media (prefers-reduced-motion: reduce) { .sp-ai-ico path { animation: none !important; } }
.sp-ai-seg button[data-t="ai"] .sp-ai-ico { color: #1e6fda; width: 1.25em; height: 1.25em; }
.sp-ai-seg button[data-t="ai"] { color: #5b3fe0; }
.sp-ai-seg button.is-on[data-t="ai"] { color: #191f28; }
.sp-ai-seg button:focus { outline: none; box-shadow: none; }
.sp-ai-seg button.is-on { box-shadow: 0 1px 3px rgba(15,23,42,.1); }
.sp-ai-seg button:focus-visible { outline: 2px solid #1e6fda; outline-offset: 1px; }
.sp-linkfinder.has-ai .sp-lf-head { display: none; }
.sp-ai-ask > .sp-ai-ico { color: #1e6fda; width: 20px; height: 20px; }
.sp-ai-av .sp-ai-ico { width: 16px; height: 16px; color: #fff; }
.sp-ai-fab .sp-ai-ico { width: 20px; height: 20px; color: #fff; }
/* AI 상담 버튼: 은은한 빛 번짐으로 눈에 띄게 */
.sp-ai-fab { overflow: visible; }
.sp-ai-fab::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(30,111,218,.45); animation: spAiPulse 2.6s ease-out infinite; pointer-events: none; }
.sp-ai-fab.is-open::after { animation: none; }
@keyframes spAiPulse { 0% { box-shadow: 0 0 0 0 rgba(30,111,218,.45); } 70%, 100% { box-shadow: 0 0 0 12px rgba(30,111,218,0); } }
@media (prefers-reduced-motion: reduce) { .sp-ai-fab::after { animation: none; } }
.sp-ai-fab:focus { outline: none; }
.sp-ai-fab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px #1e6fda; }
.sp-ai-left { margin: 8px 0 0; font-size: 11.5px; color: #b0b8c1; }
.sp-ai-ch-ft .sp-ai-left { margin: 6px 0 0; text-align: center; }

/* =====================================================
   상품 설명 2탭 (2026-09-26): [설명 | 주의사항]
   설명 탭 = 서비스 설명 · 주문 링크 넣는 법 · 시작 시간을 구분선으로 한 번에 (더보기 없음)
   주문 화면(로그인·비로그인)과 가격표 팝업이 같은 spRenderDescHtml 사용
   ===================================================== */
.sp-ds-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; padding: 4px; margin: 0 0 10px; background: #f2f4f6; border-radius: 12px; border: none; overflow: visible; }
.sp-ds-tabs .sp-desc-tab { height: 40px; margin: 0; padding: 0 10px; border: none; border-radius: 9px; background: transparent; color: #6b7684; font-size: 14px; font-weight: 600; cursor: pointer; }
.sp-ds-tabs .sp-desc-tab.active { background: #fff; color: #191f28; font-weight: 700; border: none; box-shadow: 0 1px 3px rgba(15,23,42,.1); }
.sp-ds-tabs .sp-desc-tab:focus { outline: none; }
.sp-ds-tabs .sp-desc-tab:focus-visible { outline: 2px solid #1e6fda; outline-offset: 1px; }
.sp-ds-tabs .sp-desc-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: #fdecee; color: #e03444; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.sp-ds-panel { padding: 4px 18px; background: #f9fafb; border: 1px solid #f0f2f5; border-radius: 12px; }
.sp-ds-panel[hidden] { display: none; }
.sp-ds-sec { padding: 14px 0; border-top: 1px solid #eceff3; }
.sp-ds-sec:first-child { border-top: none; }
.sp-ds-sec h4 { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #191f28; }
.sp-ds-list, .sp-ds-steps { margin: 0; padding: 0; list-style: none; }
.sp-ds-list li { position: relative; padding: 2px 0 2px 13px; font-size: 14px; line-height: 1.65; color: #333d4b; word-break: keep-all; overflow-wrap: anywhere; }
.sp-ds-list li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 4px; height: 4px; border-radius: 50%; background: #8b95a1; }
.sp-ds-list li.sp-ds-sub { padding-left: 0; margin-top: 6px; font-weight: 700; color: #191f28; }
.sp-ds-list li.sp-ds-sub::before { display: none; }
.sp-ds-steps { counter-reset: sp-step; margin-top: 4px; }
.sp-ds-steps li { counter-increment: sp-step; position: relative; padding: 3px 0 3px 26px; font-size: 14px; line-height: 1.6; color: #333d4b; }
.sp-ds-steps li::before { content: counter(sp-step); position: absolute; left: 0; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: #e8f1fd; color: #1e6fda; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.sp-ds-url { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding: 9px 12px; background: #fff; border: 1px solid #e5e8eb; border-radius: 10px; }
.sp-ds-url span { font-size: 12px; font-weight: 700; color: #8b95a1; }
.sp-ds-url code { padding: 0; background: none; color: #1557b0; font-size: 13px; word-break: break-all; }
.sp-ds-empty { margin: 0; font-size: 13.5px; color: #8b95a1; }
.sp-ds-list.is-caution { padding: 12px 0 6px; }
.sp-ds-list li.is-warn { color: #d22f40; }
.sp-ds-list li.is-warn::before { background: #f04452; }
.sp-ds-panel .sp-desc-flag { margin: 8px 0 12px; }
@media (max-width: 767.98px) {
  .sp-ds-panel { padding: 2px 14px; }
  .sp-ds-list li, .sp-ds-steps li { font-size: 13.5px; }
}
body.dark .sp-ds-tabs { background: #1b2036; }
body.dark .sp-ds-tabs .sp-desc-tab.active { background: #2a3050; color: #e5e7eb; }
body.dark .sp-ds-panel { background: #161a2e; border-color: #232842; }
body.dark .sp-ds-sec { border-color: #232842; }
body.dark .sp-ds-sec h4, body.dark .sp-ds-list li.sp-ds-sub { color: #e5e7eb; }
body.dark .sp-ds-list li, body.dark .sp-ds-steps li { color: #cbd2dc; }
body.dark .sp-ds-url { background: #1b2036; border-color: #2a3050; }
body.dark .sp-ds-url code { color: #8fb8f0; }
/* AI 상담 버튼: 카카오톡 버튼(56×56, 모서리 16, 오른쪽 20·아래 90)과 같은 모양으로 바로 위에 세로로 (PC·모바일 공통)
   2026-09-29: 왼쪽에 나란히 두면 주문서 금액·주문 버튼을 가려서 위로 옮김. 보라(likemon 잔재)도 블루로 */
.sp-ai-fab, .sp-ai-fab.is-open {
  right: 20px; bottom: 158px; width: 56px; height: 56px; padding: 0; gap: 1px; border-radius: 16px;
  flex-direction: column; justify-content: center; font-size: 11px; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 4px 12px rgba(0,0,0,.15); z-index: 9999;
}
.sp-ai-fab .sp-ai-ico { width: 24px; height: 24px; }
.sp-ai-fab .sp-ai-fab-t { line-height: 1; }
.sp-ai-chat { right: 20px; bottom: 226px; height: min(560px, calc(100vh - 260px)); }
@media (max-width: 767.98px) {
  .sp-ai-fab, .sp-ai-fab.is-open { right: 20px; bottom: 158px; height: 56px; padding: 0; font-size: 11px; }
  .sp-ai-chat { inset: 0; bottom: 0; height: auto; }
}

/* 주문 화면 상품 목록 글자 위계 (2026-09-27): 상품명이 주인공, 가격은 조연
   상품명 16/400 진회색 → 선택 시 파랑 600 · 가격 13.5/500 회색 + '1개당' 작은 머리말 → 선택 시 파랑 700 */
.guest-browser-right .guest-svc-item { padding: 14px 20px; gap: 16px; align-items: center; }
.guest-browser-right .guest-svc-item-name { font-size: 16px; font-weight: 400; color: #333d4b; line-height: 1.5; letter-spacing: -.01em; }
.guest-browser-right .guest-svc-item-name .sp-svc-title { font-weight: 400; }
.guest-browser-right .guest-svc-item:hover .guest-svc-item-name { color: #191f28; }
.guest-browser-right .guest-svc-item.active .guest-svc-item-name,
.guest-browser-right .guest-svc-item.active .sp-svc-title { color: #1e6fda; font-weight: 600; }
.guest-browser-right .guest-svc-item-price { flex-shrink: 0; font-size: 13.5px; font-weight: 500; color: #6b7684; white-space: nowrap; font-variant-numeric: tabular-nums; }
.guest-browser-right .guest-svc-item-price::before { content: "1개당 "; font-size: 12px; font-weight: 400; color: #b0b8c1; }
.guest-browser-right .guest-svc-item.active .guest-svc-item-price { color: #1e6fda; font-weight: 700; }
.guest-browser-right .guest-svc-item.active .guest-svc-item-price::before { color: #8fb3ec; }
.guest-browser-right .guest-svc-item .sp-svc-tag { height: 19px; font-size: 11px; font-weight: 600; }
@media (max-width: 767.98px) {
  .guest-browser-content .guest-browser-right .guest-svc-item { padding: 13px 14px !important; }
  .guest-browser-content .guest-browser-right .guest-svc-item-name { font-size: 15px !important; }
  .guest-browser-content .guest-browser-right .guest-svc-item-price { font-size: 13px !important; }
}
body.dark .guest-browser-right .guest-svc-item-name { color: #cbd2dc; }
body.dark .guest-browser-right .guest-svc-item.active .guest-svc-item-name, body.dark .guest-browser-right .guest-svc-item.active .sp-svc-title { color: #8fb8f0; }
body.dark .guest-browser-right .guest-svc-item-price::before { color: #5b6478; }
/* 서포터 캡처와 같은 배율로 비교 후 한 단계 작고 얇게 (2026-09-27): 상품명 15/400 · 가격 13/400 */
.guest-browser-right .guest-svc-item { padding: 13px 20px; }
.guest-browser-right .guest-svc-item-name { font-size: 15px; font-weight: 400; color: #333d4b; }
.guest-browser-right .guest-svc-item.active .guest-svc-item-name,
.guest-browser-right .guest-svc-item.active .sp-svc-title { font-weight: 600; }
.guest-browser-right .guest-svc-item-price { font-size: 13px; font-weight: 400; color: #6b7684; }
.guest-browser-right .guest-svc-item-price::before { font-size: 11.5px; }
.guest-browser-right .guest-svc-item.active .guest-svc-item-price { font-weight: 600; }
@media (max-width: 767.98px) {
  .guest-browser-content .guest-browser-right .guest-svc-item-name { font-size: 14.5px !important; }
  .guest-browser-content .guest-browser-right .guest-svc-item-price { font-size: 12.5px !important; }
}
/* 목록 더 촘촘하게 (2026-09-27, 사용자 요청): 줄 높이 약 48 → 40px, 상품명 14 · 가격 12.5 */
.guest-browser-right .guest-svc-item { padding: 10px 18px; gap: 12px; }
.guest-browser-right .guest-svc-item:hover { background: #f9fafb; }
.guest-browser-right .guest-svc-item.active { background: #f0f6ff; }
.guest-browser-right .guest-svc-item-name { font-size: 14px; line-height: 1.4; gap: 3px 5px; }
.guest-browser-right .guest-svc-item-price { font-size: 12.5px; }
.guest-browser-right .guest-svc-item-price::before { font-size: 11px; }
.guest-browser-right .guest-svc-item .sp-svc-tag { height: 18px; padding: 0 6px; font-size: 10.5px; }
.guest-browser-right .guest-svc-item-name .guest-svc-item-id { font-size: 10.5px !important; padding: 3px 6px !important; margin-right: 3px !important; }
@media (max-width: 767.98px) {
  .guest-browser-content .guest-browser-right .guest-svc-item { padding: 10px 14px !important; }
  .guest-browser-content .guest-browser-right .guest-svc-item-name { font-size: 14px !important; }
  .guest-browser-content .guest-browser-right .guest-svc-item-price { font-size: 12.5px !important; }
}
body.dark .guest-browser-right .guest-svc-item:hover { background: #1b2036; }
/* 내역 카드 숫자 영역을 연회색 상자로 묶음 (2026-09-27): 주문번호~사용금액을 한 상자에 — 세로 영수증 형태 유지, 날짜는 상단 오른쪽, 버튼만 하단 */
.sp-oc-rc { margin: 12px 0 0; padding: 10px 14px; background: #f6f8fb; border: none; border-radius: 10px; }
.sp-oc-rc > div.is-id dd { overflow: visible; }
.sp-oc-rc .sp-oc-copyid { gap: 5px; font-size: 13px; font-weight: 600; color: #333d4b; }
.sp-oc-rc .sp-oc-copyid i { font-size: 11px; color: #b0b8c1; }
.sp-oc-rc > div.is-total { margin-top: 6px; padding-top: 8px; border-top: 1px solid #e6eaf0; }
.sp-oc-head .sp-oc-date { font-size: 12px; }
.sp-oc-bottom { justify-content: flex-end; min-height: 0; }
.sp-oc.is-short .sp-oc-rc { margin-bottom: 0; }
body.dark .sp-oc-rc { background: rgba(255,255,255,.04); }
body.dark .sp-oc-rc > div.is-total { border-color: rgba(255,255,255,.08); }
/* 서비스 가격표 글자 위계 (2026-09-27): 전부 굵어 구분이 안 되던 것 → 카테고리 > 가격 > 상품명 > 보조정보 순으로 굵기·색 차등 */
.sp-svc-cat-name { font-size: 14px; font-weight: 700; }
.sp-svc-cat-count { font-weight: 400; }
.sp-svc-row { padding: 10px 14px; }
.sp-svc-id { padding: 1px 6px; font-size: 11.5px; font-weight: 500; color: #8b95a1; }
.sp-svc-name { font-size: 14px; font-weight: 400; color: #333d4b; }
.sp-svc-price b { font-size: 14px; font-weight: 600; color: #191f28; }
.sp-svc-price small { font-size: 11.5px; color: #8b95a1; }
.sp-svc-range, .sp-svc-time { font-size: 12.5px; font-weight: 400; color: #6b7684; }
.sp-svc-row .sp-svc-tag { font-weight: 500; color: #6b7684; }
body.dark .sp-svc-name { color: #cbd5e1; }
/* 서비스 가격표 색 포인트 (2026-09-27): 가격=브랜드 블루, 번호=연블루 배지, 평균 완료=초록, 카테고리 바=연블루 */
.sp-svc-cat { background: #f4f8fe; border-color: #e3edfb; }
.sp-svc-cat-count { color: #1e6fda; font-weight: 500; }
.sp-svc-id { background: #eef4fd; color: #1e6fda; }
.sp-svc-price b { color: #1e6fda; }
.sp-svc-time { color: #0f9d58; }
.sp-svc-time.is-empty { color: #d1d6db; }
.sp-svc-row:hover { background: #f7faff; }
.sp-svc-row:hover .sp-svc-name { color: #191f28; }
.sp-svc-order:hover { background: #1e6fda; color: #fff !important; }
body.dark .sp-svc-cat { background: #1a2340; border-color: #25325a; }
body.dark .sp-svc-id { background: #1d2a4a; color: #7fb0ff; }
body.dark .sp-svc-price b, body.dark .sp-svc-cat-count { color: #7fb0ff; }
body.dark .sp-svc-time { color: #4ade80; }
/* 내역 카드 글자 크기 정돈 (2026-09-27): 제목 굵기 한 단계 낮춤, 라벨↔값 크기 차이를 분명히, 상자 줄 간격 압축 */
.sp-oc-name { font-size: 14px; font-weight: 600; line-height: 1.4; margin-bottom: 5px; }
.sp-oc-head { margin-bottom: 8px; }
.sp-oc-head .sp-oc-date { font-size: 12px; color: #8b95a1; }
.sp-oc-rc { padding: 8px 14px; }
.sp-oc-rc > div { padding: 2px 0; align-items: center; }
.sp-oc-rc dt { font-size: 12px; color: #8b95a1; }
.sp-oc-rc dd, .sp-oc-rc .sp-oc-copyid { font-size: 13px; font-weight: 500; color: #191f28; }
.sp-oc-rc > div.is-total { margin-top: 5px; padding-top: 7px; }
.sp-oc-rc > div.is-total dt { font-size: 12px; font-weight: 600; color: #4e5968; }
.sp-oc-rc > div.is-total dd { font-size: 14px; font-weight: 700; color: #1e6fda; }
body.dark .sp-oc-rc dd, body.dark .sp-oc-rc .sp-oc-copyid { color: #e5e7eb; }

/* ============================================================
   블로그 목록·글 (2026-09-28) — B-1안: 파스텔 표지 + 플랫폼 타일(주문 화면 타일과 같은 모양)
   분류·아이콘·요약은 script.js spInitBlog가 글 제목/본문으로 채움
   ============================================================ */
.sp-pg-blog, .sp-pg-post { margin: 24px auto 40px 0; padding: 26px 28px 30px; background: #fff; border: 1px solid #edf1f7; border-radius: 18px; box-shadow: 0 1px 3px rgba(15,23,42,.03); }
.sp-pg-blog .sp-pg-title { font-size: 22px; font-weight: 700; }
.sp-pg-blog .sp-pg-sub { font-size: 13.5px; }
.sp-bl-intro { margin-top: 14px; font-size: 14px; line-height: 1.7; color: #4e5968; }
.sp-bl-chips { display: flex; gap: 6px; margin: 18px 0 20px; padding-bottom: 18px; border-bottom: 1px solid #f2f4f6; overflow-x: auto; scrollbar-width: none; }
.sp-bl-chips::-webkit-scrollbar { display: none; }
.sp-bl-chips[hidden] { display: none; }
.sp-bl-chips button { flex-shrink: 0; padding: 7px 14px; border: none; border-radius: 999px; background: #f2f4f6; color: #4e5968; font-size: 13px; font-weight: 500; cursor: pointer; }
.sp-bl-chips button:hover { background: #e8ebee; color: #191f28; }
.sp-bl-chips button.is-active { background: #1e6fda; color: #fff; font-weight: 600; }
/* 2026-09-29: 누른 뒤 초점 테두리가 가로 스크롤 영역(overflow)에 잘려 모서리가 찌그러져 보이던 문제 → 마우스는 테두리 없음, 키보드는 안쪽에 */
.sp-bl-chips button:focus { outline: none; box-shadow: none; }
.sp-bl-chips button:focus-visible { outline: 2px solid #0b4fa8; outline-offset: -2px; }
.sp-bl-head + .sp-bl-grid { margin-top: 22px; }
.sp-bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sp-bl-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid #e9edf3; border-radius: 16px; overflow: hidden; background: #fff; color: inherit !important; text-decoration: none !important; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.sp-bl-card:hover { border-color: #c9ddf5; box-shadow: 0 10px 24px rgba(15,23,42,.07); transform: translateY(-2px); }
.sp-bl-card[hidden] { display: none; }
.sp-bl-cover { position: relative; height: 150px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #eef4fd; --c: #1e6fda; }
.sp-bl-cover::before { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; right: -60px; top: -70px; background: rgba(255,255,255,.55); }
.sp-bl-cover::after { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; left: -30px; bottom: -50px; background: rgba(255,255,255,.45); }
.sp-bl-cover img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
.sp-bl-tile { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 18px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(15,23,42,.08); transition: transform .2s ease; }
.sp-bl-tile i { margin: 0 !important; font-size: 30px !important; line-height: 1; color: var(--c) !important; }
.sp-bl-card:hover .sp-bl-tile { transform: scale(1.06); }
.sp-bl-cat { position: absolute; left: 14px; top: 12px; z-index: 3; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.88); color: var(--c); font-size: 11.5px; font-weight: 600; }
.sp-bl-cat:empty { display: none; }
.sp-bl-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px; }
.sp-bl-title { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.42; letter-spacing: -.01em; color: #191f28; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; }
.sp-bl-ex { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: #6b7684; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-bl-ex:empty { display: none; }
.sp-bl-meta { display: flex; justify-content: flex-end; align-items: center; margin-top: auto; padding-top: 14px; font-size: 12px; color: #8b95a1; }
.sp-bl-more { font-weight: 600; color: #1e6fda; }
.sp-bl-more i { margin: 0 0 0 2px !important; font-size: 11px; transition: transform .15s ease; }
.sp-bl-card:hover .sp-bl-more i { transform: translateX(3px); }
.sp-pg-blog .sp-pager { margin-top: 24px; }
/* 분류별 색 */
.is-ig { --c: #e1306c; } .sp-bl-cover.is-ig { background: #fdf0f5; }
.is-yt { --c: #ff0000; } .sp-bl-cover.is-yt { background: #fdefee; }
.is-tt { --c: #111; } .sp-bl-cover.is-tt { background: #eef0f3; }
.is-fb { --c: #1877f2; } .sp-bl-cover.is-fb { background: #edf3fe; }
.is-th { --c: #111; } .sp-bl-cover.is-th { background: #eef0f3; }
.is-x { --c: #111; } .sp-bl-cover.is-x { background: #eef0f3; }
.is-nv { --c: #03c75a; } .sp-bl-cover.is-nv { background: #eaf8f0; }
.is-guide { --c: #1e6fda; } .sp-bl-cover.is-guide { background: #eef4fd; }
.is-tip { --c: #f59e0b; } .sp-bl-cover.is-tip { background: #fdf6e7; }

/* 글 상세 */
.sp-pg-post { max-width: 880px; padding: 30px 40px 34px; }
.sp-post-crumb { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #8b95a1; }
.sp-post-crumb a { color: #6b7684; text-decoration: none; }
.sp-post-crumb a:hover { color: #1e6fda; }
.sp-post-crumb i { margin: 0 !important; font-size: 9px; color: #c4cad1; }
.sp-post-cat { font-weight: 600; color: var(--c, #1e6fda); }
.sp-post-title { margin: 12px 0 8px; font-size: 26px; font-weight: 800; line-height: 1.38; letter-spacing: -.025em; color: #191f28; word-break: keep-all; }
.sp-post-meta { font-size: 13px; color: #8b95a1; }
.sp-post-meta:empty { display: none; }
.sp-post-cover { margin: 22px 0 0; border-radius: 14px; overflow: hidden; background: #f2f4f6; }
.sp-post-cover img { display: block; width: 100%; height: auto; }
.sp-post-body { margin-top: 26px; font-size: 16px; line-height: 1.85; color: #333d4b; word-break: keep-all; overflow-wrap: anywhere; }
.sp-post-body > *:first-child { margin-top: 0; }
.sp-post-body p { margin: 0 0 16px; }
.sp-post-body h2 { margin: 38px 0 14px; padding-top: 6px; font-size: 21px; font-weight: 700; line-height: 1.4; letter-spacing: -.02em; color: #191f28; }
.sp-post-body h3 { margin: 28px 0 10px; font-size: 17.5px; font-weight: 700; line-height: 1.45; color: #191f28; }
.sp-post-body h4 { margin: 22px 0 8px; font-size: 16px; font-weight: 700; color: #191f28; }
.sp-post-body ul, .sp-post-body ol { margin: 0 0 18px; padding-left: 22px; }
.sp-post-body li { margin: 6px 0; }
.sp-post-body li::marker { color: #1e6fda; font-weight: 700; }
.sp-post-body strong, .sp-post-body b { font-weight: 700; color: #191f28; }
.sp-post-body a { color: #1e6fda; text-decoration: underline; text-underline-offset: 3px; }
.sp-post-body img { display: block; max-width: min(100%, 400px) !important; height: auto !important; margin: 10px auto 22px; border-radius: 14px; border: 1px solid #edf1f7; }
.sp-post-body img.is-wide, .sp-post-body .sp-wide img { max-width: 100% !important; }
.sp-post-body blockquote { margin: 0 0 18px; padding: 14px 18px; border-left: 4px solid #1e6fda; background: #f6f8fb; border-radius: 0 10px 10px 0; color: #4e5968; }
.sp-post-body table { width: 100%; margin: 0 0 20px; border-collapse: collapse; font-size: 14.5px; }
.sp-post-body th, .sp-post-body td { padding: 10px 12px; border-bottom: 1px solid #edf1f7; text-align: left; vertical-align: top; }
.sp-post-body th { background: #f6f8fb; font-weight: 600; color: #191f28; }
.sp-post-body hr { margin: 30px 0; border: none; border-top: 1px solid #edf1f7; }
.sp-post-body code { padding: 2px 6px; border-radius: 6px; background: #f2f4f6; color: #d6336c; font-size: .9em; }
/* 글 안에서 쓰는 상자: <div class="sp-tip">…</div> / sp-warn / sp-summary */
.sp-post-body .sp-summary { margin: 0 0 24px; padding: 16px 20px; border-radius: 12px; background: #f6f8fb; font-size: 15px; }
.sp-post-body .sp-summary > strong:first-child { display: block; margin-bottom: 6px; color: #1e6fda; }
/* 2026-09-30 복원: sp-tip·sp-warn은 관리자에 붙여 넣는 블로그 본문(tools/blog/*.html)에서만 쓰여 템플릿 검색에 안 잡힘 — CSS 정리 때 지우지 말 것 */
.sp-post-body .sp-tip, .sp-post-body .sp-warn { margin: 0 0 18px; padding: 14px 18px; border-radius: 12px; font-size: 15px; line-height: 1.7; }
.sp-post-body .sp-tip { background: #eef4fd; color: #1a4f9c; }
.sp-post-body .sp-warn { background: #fff7e8; color: #8a5a00; }
body.dark .sp-post-body .sp-tip { background: #1d2a4a; color: #a9c8ff; }
body.dark .sp-post-body .sp-warn { background: #3a2c12; color: #f5d08a; }
.sp-post-body .sp-tip p:last-child, .sp-post-body .sp-warn p:last-child, .sp-post-body .sp-summary p:last-child { margin-bottom: 0; }
.sp-post-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 36px; padding: 20px 22px; border-radius: 16px; background: linear-gradient(135deg, #f4f8fe, #eef4fd); border: 1px solid #e3edfb; }
.sp-post-cta-text strong { display: block; font-size: 16px; font-weight: 700; color: #191f28; }
.sp-post-cta-text span { display: block; margin-top: 3px; font-size: 13.5px; color: #6b7684; }
.sp-post-cta-btns { display: flex; gap: 8px; flex-shrink: 0; }
.sp-post-cta-btns .sp-btn-primary, .sp-post-cta-btns .sp-btn-ghost { height: 42px; padding: 0 18px; font-size: 14px; border-radius: 10px; }
.sp-post-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid #f2f4f6; }
.sp-post-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #4e5968 !important; text-decoration: none !important; }
.sp-post-back:hover { color: #1e6fda !important; }
.sp-post-back i { margin: 0 !important; font-size: 12px; }

@media (max-width: 1199px) { .sp-bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .sp-pg-blog, .sp-pg-post { margin: 12px 0 24px; padding: 20px 16px 24px; border-radius: 16px; }
  .sp-bl-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sp-bl-cover { height: 130px; }
  .sp-post-title { font-size: 22px; }
  .sp-post-body { font-size: 15.5px; }
  .sp-post-body h2 { font-size: 19px; }
  .sp-post-cta { flex-direction: column; align-items: stretch; }
  .sp-post-cta-btns .sp-btn-primary, .sp-post-cta-btns .sp-btn-ghost { flex: 1; }
}
body.dark .sp-pg-blog, body.dark .sp-pg-post { background: #161a2e; border-color: #232842; box-shadow: none; }
body.dark .sp-bl-card { background: #1b2036; border-color: #232842; }
body.dark .sp-bl-title, body.dark .sp-post-title, body.dark .sp-post-body h2, body.dark .sp-post-body h3, body.dark .sp-post-body strong, body.dark .sp-post-cta-text strong { color: #e5e7eb; }
body.dark .sp-bl-cover { filter: brightness(.9); }
body.dark .sp-post-body { color: #cbd2dc; }
body.dark .sp-post-cta { background: #1b2036; border-color: #25325a; }
body.dark .sp-post-body .sp-summary, body.dark .sp-post-body blockquote, body.dark .sp-post-body th { background: #1b2036; }
body.dark .sp-bl-chips button { background: #1f2438; color: #aab2c0; }
body.dark .sp-bl-chips button.is-active { background: #1e6fda; color: #fff; }

/* ===== 회원 등급 배지 — 보석 컷 (2026-09-29) : script.js spRenderTier()가 그림 ===== */
.sp-tier { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; white-space: nowrap; }
.sp-tier .sp-tier-gem { width: 26px; height: 26px; flex: none; overflow: visible; }
.sp-tier-spk { fill: #fff; stroke: #fff; stroke-width: .6; animation: spTierTw 1.8s ease-in-out infinite; }
.sp-tier-shine { fill: #fff; opacity: .6; transform: translateX(0) skewX(-18deg); animation: spTierShine 3.2s ease-in-out infinite; }
@keyframes spTierShine { 0%, 45% { transform: translateX(0) skewX(-18deg); } 100% { transform: translateX(190px) skewX(-18deg); } }
@keyframes spTierTw { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .sp-tier-spk, .sp-tier-shine { animation: none; } .sp-tier-shine { display: none; } }
.sp-tier.is-bronze .sp-tier-nm { color: #a9582a; }
.sp-tier.is-silver .sp-tier-nm { color: #66778e; }
.sp-tier.is-gold .sp-tier-nm { color: #c07f00; }
.sp-tier.is-platinum .sp-tier-nm { color: #3f64a8; }
.sp-tier.is-diamond .sp-tier-nm { background: linear-gradient(90deg, #1e8fff, #29c3e8 55%, #e46fc0); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.dark .sp-tier.is-bronze .sp-tier-nm { color: #f0a468; }
body.dark .sp-tier.is-silver .sp-tier-nm { color: #d5dde8; }
body.dark .sp-tier.is-gold .sp-tier-nm { color: #ffd23f; }
body.dark .sp-tier.is-platinum .sp-tier-nm { color: #b3cbff; }
body.dark .sp-tier.is-diamond .sp-tier-nm { background: linear-gradient(90deg, #8eecff, #bff7ff 55%, #ffb8e6); -webkit-background-clip: text; background-clip: text; }

/* ===== 주문서 금액 강조 (2026-09-29) : 결제 금액만 블루, 할인 칩은 빨강 (잔액 부족 빨강은 .sp-receipt.is-short) ===== */
.sp-receipt-main strong { color: #1e6fda; font-variant-numeric: tabular-nums; }
body.dark .sp-receipt-main strong { color: #6aa5f5; }
.sp-svc-tag.is-sale, .sp-svc-row .sp-svc-tag.is-sale { background: #fff0f1; color: #e03444; }
body.dark .sp-svc-tag.is-sale { background: #3a1a20; color: #ff8a94; }

/* ===== 주문 화면 좌우 비율 (2026-09-29) : 8:4 → 주문서 40% (380~480px, 칸 여백 30px 포함 410~510px) =====
   창 1,200px대에서 주문서가 260px까지 줄어 링크가 잘리고 수량 버튼이 3개만 들어가던 문제 */
@media (min-width: 992px) {
  .order-side #order-form > .row { flex-wrap: nowrap; }
  /* 2026-09-30: 비로그인 화면과 같은 2:1 비율로 (510px 상한 때문에 넓은 화면에서 주문서가 좁아 보였음). 410px 아래로는 안 줄어듦 */
  .order-side #order-form > .row > .col-lg-8 { flex: 2 1 0; max-width: none; min-width: 0; }
  .order-side #order-form > .row > .col-lg-4 { flex: 1 1 0; max-width: none; min-width: 410px; }
  /* 왼쪽 칸이 좁아져 플랫폼 아이콘이 5·5·5·1로 끊기던 것 → 칸 폭에 따라 한 줄 8개 또는 6개로 반듯하게 */
  /* 기준은 격자 바로 바깥 칸 (왼쪽 칸 전체에 걸면 안의 즐겨찾기 관리 팝업(position:fixed) 위치가 틀어짐) */
  .order-side div:has(> .auth-platform-grid) { container-type: inline-size; }
  /* neworder.twig 안 <style>의 .auth-platform-grid가 뒤에 나와서 .order-side를 붙여 이김 */
  /* 2026-09-30: 고정 72px 칸이라 넓은 화면에서 왼쪽에 몰려 보였음 → 칸 폭을 나눠 가로로 고르게. 아주 넓으면(1,300px 이상) 한 줄로 */
  .order-side .auth-platform-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  @container (min-width: 1300px) { .order-side .auth-platform-grid { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); } }
  @container (max-width: 679px) { .order-side .auth-platform-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 4px; } }
  @container (max-width: 419px) { .order-side .auth-platform-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
}

/* ===== 오른쪽 배너 (2026-09-29) : 이미지 대신 HTML+SVG 밝은 카드 (layout.twig 비로그인·neworder.twig 로그인 공통)
   광고마다 --bn-c(강조색)·--bn-tint(바탕 끝색)·--bn-line(테두리)만 바꿈. 넘김은 script.js spInitBanners ===== */
.sp-bn-slider { position: relative; margin-bottom: 14px; border-radius: 16px; overflow: hidden; }
.sp-bn { position: relative; display: flex; align-items: center; gap: 12px; height: 96px; padding: 0 18px; border: 1px solid var(--bn-line); border-radius: 16px; background: linear-gradient(100deg, #fff 30%, var(--bn-tint)); text-decoration: none !important; }
.sp-bn-slider .sp-bn { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.sp-bn-slider .sp-bn:first-child { position: relative; }
.sp-bn-slider .sp-bn.active { opacity: 1; pointer-events: auto; z-index: 1; }
.sp-bn:focus-visible { outline: 2px solid #1e6fda; outline-offset: -2px; }
.sp-bn-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sp-bn-kicker { font-size: 11px; font-weight: 700; color: var(--bn-c); }
.sp-bn-txt strong { font-size: 15.5px; font-weight: 800; line-height: 1.3; letter-spacing: -.02em; color: #191f28; word-break: keep-all; }
.sp-bn-txt strong em { font-style: normal; color: var(--bn-c); }
.sp-bn-sub { font-size: 12px; font-weight: 500; color: #6b7684; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-bn-art { flex: none; width: 64px; height: 64px; }
.sp-bn-art svg { display: block; width: 100%; height: 100%; }
.sp-bn-dots { position: absolute; right: 14px; bottom: 8px; z-index: 2; display: flex; gap: 4px; }
.sp-bn-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: rgba(25,31,40,.18); cursor: pointer; transition: width .3s, background .3s; }
.sp-bn-dots button.active { width: 16px; background: #191f28; }
.sp-bn-dots button:focus-visible { outline: 2px solid #1e6fda; outline-offset: 2px; }
.sp-bn--aura { --bn-c: #0e9f5b; --bn-tint: #e3f7ec; --bn-line: #d5f1e2; --bn-tint-d: #15332a; }
.sp-bn--medi { --bn-c: #0b8fa6; --bn-tint: #e0f6f9; --bn-line: #d0f0f4; --bn-tint-d: #123640; }
@media (prefers-reduced-motion: reduce) { .sp-bn-slider .sp-bn { transition: none; } }
body.dark .sp-bn { background: linear-gradient(100deg, #1b2036 30%, var(--bn-tint-d)); border-color: #2a3050; }
body.dark .sp-bn-txt strong { color: #e5e7eb; }
body.dark .sp-bn-sub { color: #94a3b8; }
body.dark .sp-bn-dots button { background: rgba(255,255,255,.25); }
body.dark .sp-bn-dots button.active { background: #fff; }
body.dark .sp-bn--aura { --bn-c: #3fd08a; }
body.dark .sp-bn--medi { --bn-c: #4fd6e6; }

/* ===== 블로그 글 작성자·날짜 (2026-09-29) : SEO·GEO용 작성일·수정일, 운영팀 소개(E-E-A-T) ===== */
.sp-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.sp-post-meta > span:empty { display: none; }
.sp-post-by { font-weight: 600; color: #4e5968; }
.sp-post-author { display: flex; align-items: flex-start; gap: 14px; margin-top: 36px; padding: 18px 20px; border: 1px solid #eef1f5; border-radius: 16px; background: #fff; }
.sp-post-author-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, #4a9bff, #1e6fda); color: #fff; font-size: 16px; font-weight: 800; }
.sp-post-author strong { display: block; font-size: 15px; font-weight: 700; color: #191f28; }
.sp-post-author p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; color: #6b7684; }
.sp-post-author + .sp-post-cta { margin-top: 14px; }
body.dark .sp-post-by { color: #cbd2dc; }
body.dark .sp-post-author { background: #1b2036; border-color: #25325a; }
body.dark .sp-post-author strong { color: #e5e7eb; }
body.dark .sp-post-author p { color: #94a3b8; }