.trideko-toc-box {
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
padding: 0;
margin: 24px 0;
box-shadow: 
0 8px 32px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
overflow: hidden;
position: relative;
}
.trideko-toc-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}
.toc-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 18px;
background: linear-gradient(135deg, rgba(59,130,246,0.12) 0%, rgba(147,51,234,0.08) 100%);
border-bottom: 1px solid rgba(255,255,255,0.08);
cursor: pointer;
}
.toc-title {
font-size: 14px;
font-weight: 700;
color: #e2e8f0;
display: flex;
align-items: center;
gap: 10px;
letter-spacing: 0.3px;
}
.toc-title::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20'/%3E%3C/svg%3E");
background-size: contain;
opacity: 0.8;
}
.toc-toggle {
background: rgba(59, 130, 246, 0.15);
color: #94a3b8;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 6px 14px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.3s ease;
}
.toc-toggle:hover {
background: rgba(59, 130, 246, 0.3);
color: #fff;
}
.toggle-icon {
font-size: 10px;
transition: transform 0.3s ease;
}
.toc-list {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
opacity: 0;
background: rgba(0, 0, 0, 0.08);
}
.toc-list.open {
max-height: 700px;
opacity: 1;
padding: 14px 18px;
}
.toc-items {
list-style: none;
margin: 0;
padding: 0;
}
.toc-item {
margin: 0;
padding: 0;
}
.toc-item:not(:last-child) {
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.toc-link {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
color: #94a3b8;
text-decoration: none;
font-size: 13px;
line-height: 1.5;
transition: all 0.2s ease;
border-radius: 6px;
}
.toc-link::before {
content: '#';
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 5px;
font-size: 10px;
font-weight: 700;
color: #60a5fa;
flex-shrink: 0;
}
.toc-link:hover {
color: #fff;
background: rgba(59, 130, 246, 0.1);
padding-left: 14px;
}
.toc-link.active {
color: #fff;
background: rgba(59, 130, 246, 0.15);
font-weight: 600;
}
.toc-link.active::before {
background: #3b82f6;
color: #fff;
}
.level-1 { padding-left: 14px; }
.level-2 { padding-left: 28px; }
.level-3 { padding-left: 42px; }
.level-4 { padding-left: 56px; } .trideko-archive-toc .toc-title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E");
}
.toc-num {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: rgba(59, 130, 246, 0.15);
border: 1px solid rgba(59, 130, 246, 0.25);
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #60a5fa;
flex-shrink: 0;
margin-right: 4px;
}
.trideko-archive-toc .toc-link:hover .toc-num {
background: #3b82f6;
color: #fff;
border-color: #3b82f6;
} .trideko-tel-button {
position: fixed;
right: 20px;
bottom: 96px;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
text-decoration: none;
z-index: 9999;
box-shadow: 
0 4px 15px rgba(59, 130, 246, 0.4),
0 0 0 0 rgba(59, 130, 246, 0.5);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
animation: telPulse 2s infinite;
}
.trideko-tel-button:hover {
transform: scale(1.1) translateY(-3px);
box-shadow: 
0 8px 25px rgba(59, 130, 246, 0.5),
0 0 0 0 rgba(59, 130, 246, 0.3);
}
@keyframes telPulse {
0% { box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4), 0 0 0 0 rgba(59, 130, 246, 0.5); }
70% { box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4), 0 0 0 12px rgba(59, 130, 246, 0); }
100% { box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4), 0 0 0 0 rgba(59, 130, 246, 0); }
}
.tel-tooltip {
position: absolute;
right: 65px;
background: rgba(15, 23, 42, 0.9);
backdrop-filter: blur(10px);
color: #fff;
padding: 8px 14px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transform: translateX(10px);
transition: all 0.3s ease;
pointer-events: none;
border: 1px solid rgba(255,255,255,0.1);
}
.tel-tooltip::after {
content: '';
position: absolute;
right: -6px;
top: 50%;
transform: translateY(-50%);
border-width: 6px 0 6px 6px;
border-style: solid;
border-color: transparent transparent transparent rgba(15, 23, 42, 0.9);
}
.trideko-tel-button:hover .tel-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(0);
} .trideko-wa-button {
position: fixed;
right: 20px;
bottom: 30px;
width: 56px;
height: 56px;
background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
text-decoration: none;
z-index: 9999;
box-shadow: 
0 4px 20px rgba(37, 211, 102, 0.4),
0 0 0 0 rgba(37, 211, 102, 0.6);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
animation: waPulse 2s infinite;
}
.trideko-wa-button:hover {
transform: scale(1.1) translateY(-3px);
box-shadow: 
0 8px 30px rgba(37, 211, 102, 0.5),
0 0 0 0 rgba(37, 211, 102, 0.4);
}
.wa-pulse {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
border: 2px solid rgba(37, 211, 102, 0.5);
animation: waRing 2s infinite;
}
@keyframes waPulse {
0% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0.6); }
70% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 15px rgba(37, 211, 102, 0); }
100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0); }
}
@keyframes waRing {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(1.6); opacity: 0; }
}
.wa-tooltip {
position: absolute;
right: 70px;
background: rgba(15, 23, 42, 0.9);
backdrop-filter: blur(10px);
color: #fff;
padding: 8px 14px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transform: translateX(10px);
transition: all 0.3s ease;
pointer-events: none;
border: 1px solid rgba(255,255,255,0.1);
}
.wa-tooltip::after {
content: '';
position: absolute;
right: -6px;
top: 50%;
transform: translateY(-50%);
border-width: 6px 0 6px 6px;
border-style: solid;
border-color: transparent transparent transparent rgba(15, 23, 42, 0.9);
}
.trideko-wa-button:hover .wa-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(0);
} .trideko-scroll-top {
position: fixed;
left: 20px;
bottom: 30px;
width: 44px;
height: 44px;
background: linear-gradient(135deg, rgba(59,130,246,0.2) 0%, rgba(147,51,234,0.15) 100%);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 9998;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
color: #e2e8f0;
}
.trideko-scroll-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.trideko-scroll-top:hover {
background: linear-gradient(135deg, rgba(59,130,246,0.35) 0%, rgba(147,51,234,0.25) 100%);
transform: translateY(-3px);
} @media (max-width: 768px) {
.trideko-toc-box {
margin: 16px 0;
border-radius: 12px;
}
.trideko-tel-button {
right: 12px;
bottom: 88px;
width: 46px;
height: 46px;
}
.trideko-wa-button {
right: 12px;
bottom: 20px;
width: 50px;
height: 50px;
}
.trideko-wa-button svg {
width: 24px;
height: 24px;
}
.wa-tooltip,
.tel-tooltip {
display: none;
}
.trideko-scroll-top {
left: 12px;
bottom: 20px;
width: 40px;
height: 40px;
}
}