:root {
--sidebar-width-collapsed: 72px;
--sidebar-transition: 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-collapsed {
--sidebar-width: var(--sidebar-width-collapsed) !important;
}

@media (min-width: 992px) {
#sidebar.offcanvas {
width: var(--sidebar-width) !important;
transition: width var(--sidebar-transition) !important;
overflow: hidden !important;
}

#sidebar .offcanvas-body.sidebar-shell {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
min-height: 0 !important;
padding: 24px 0 0 !important;
padding-bottom: 0 !important;
overflow: hidden !important;
}

#sidebar .sidebar-shell-menu {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
width: 100% !important;
}

#sidebar .sidebar-contact-fixed {
flex-shrink: 0 !important;
display: grid !important;
gap: 0.55rem !important;
padding: 1rem 1.5rem 1.25rem !important;
border-top: 1px solid #e2e8f0 !important;
background: #fff !important;
}

#sidebar .sidebar-contact-btn,
.mobile-sidebar .sidebar-contact-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.45rem !important;
min-height: 44px !important;
padding: 0.65rem 0.85rem !important;
border-radius: 10px !important;
font-size: 0.92rem !important;
font-weight: 700 !important;
text-decoration: none !important;
width: 100% !important;
margin: 0 !important;
border: 0 !important;
box-shadow: none !important;
line-height: 1.2 !important;
}

#sidebar .sidebar-contact-btn:hover,
.mobile-sidebar .sidebar-contact-btn:hover {
opacity: 0.92 !important;
transform: translateY(-1px) !important;
color: inherit !important;
}

#sidebar .sidebar-contact-telegram,
.mobile-sidebar .sidebar-contact-telegram {
background: #0088cc !important;
color: #fff !important;
}

#sidebar .sidebar-contact-kakao,
.mobile-sidebar .sidebar-contact-kakao {
background: #fee500 !important;
color: #3c1e1e !important;
}

.main-wrapper,
.notice-page main,
.notice-page .notice-foot,
.notice-detail-wrap,
.blog-detail-wrap {
transition: margin-left var(--sidebar-transition) !important;
}

.sidebar-collapse-toggle {
position: fixed;
top: calc(var(--header-height, 64px) + 50%);
left: calc(var(--sidebar-width, 280px) - 14px);
transform: translateY(-50%);
z-index: 110;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid #e2e8f0;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
color: #52677d;
cursor: pointer;
transition: left var(--sidebar-transition), transform var(--sidebar-transition), color 0.2s ease;
}

.sidebar-collapse-toggle:hover {
color: #155dfc;
}

.sidebar-collapse-toggle i {
font-size: 0.95rem;
transition: transform var(--sidebar-transition);
}

body.sidebar-collapsed .sidebar-collapse-toggle i {
transform: rotate(180deg);
}

body.sidebar-collapsed #sidebar .sidebar-shell-menu .nav-header,
body.sidebar-collapsed #sidebar .sidebar-shell-menu .nav-link {
font-size: 0 !important;
justify-content: center !important;
padding-left: 12px !important;
padding-right: 12px !important;
}

body.sidebar-collapsed #sidebar .sidebar-shell-menu .nav-link i {
font-size: 1.05rem !important;
margin: 0 !important;
}

body.sidebar-collapsed #sidebar .sidebar-contact-fixed {
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
}

body.sidebar-collapsed #sidebar .sidebar-contact-btn {
font-size: 0 !important;
padding-left: 0.55rem !important;
padding-right: 0.55rem !important;
}

body.sidebar-collapsed #sidebar .sidebar-contact-btn i {
font-size: 1.05rem !important;
margin: 0 !important;
}
}

@media (max-width: 768px) {
.mobile-sidebar {
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}

.mobile-sidebar-scroll {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
}

.mobile-sidebar .sidebar-contact-fixed {
flex-shrink: 0 !important;
display: grid !important;
gap: 0.55rem !important;
padding: 1rem 1.25rem 1.25rem !important;
border-top: 1px solid #e2e8f0 !important;
background: #fff !important;
}
}
@media (min-width: 1400px) {
.right-floating-banners {
position: fixed;
right: 24px;
top: 140px;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 16px;
width: 240px;
}
.floating-banner-card {
background: #ffffff;
border: 1px solid #f1f5f9;
border-radius: 16px;
padding: 24px 16px;
text-align: center;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
text-decoration: none;
transition: transform 0.22s ease, box-shadow 0.22s ease;
display: block;
color: #1e293b;
}
.floating-banner-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
color: #1e293b;
}
.banner-logo-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.banner-logo-wrap .logo-svg {
width: 100px;
height: 100px;
margin-bottom: 8px;
}
.banner-logo-wrap .logo-text {
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.5px;
}
.banner-dailystock .logo-text {
color: #0da895;
}
.banner-title {
font-size: 1.15rem;
font-weight: 800;
color: #0f172a;
margin: 0 0 8px;
letter-spacing: -0.3px;
}
.banner-desc {
font-size: 0.88rem;
font-weight: 500;
color: #64748b;
line-height: 1.45;
margin: 0 0 16px;
letter-spacing: -0.2px;
}
.banner-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 44px;
border-radius: 10px;
font-size: 0.92rem;
font-weight: 700;
color: #ffffff;
transition: opacity 0.2s ease;
}
.banner-dailystock .banner-btn {
background: #0da895;
}
.banner-dev-inquiry .banner-btn {
background: #ff6f0f;
}
.banner-btn:hover {
opacity: 0.95;
}
}
@media (max-width: 1399px) {
.right-floating-banners {
display: none !important;
}
}

.btn-scroll-top {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 1010;
width: 48px;
height: 48px;
border-radius: 50%;
background-color: #ff6f0f;
color: #ffffff;
border: none;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.22s ease, opacity 0.22s ease, background-color 0.2s ease;
opacity: 0;
pointer-events: none;
transform: scale(0.8);
}
.btn-scroll-top.show {
opacity: 1;
pointer-events: auto;
transform: scale(1);
}
.btn-scroll-top:hover {
background-color: #e55e00;
transform: translateY(-2px) scale(1.05);
color: #ffffff;
}
.btn-scroll-top i {
font-size: 1.25rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}