#caseJJ_box{position:relative;z-index: 1;background-color: #f7f7f7;}
#caseJJ_box *{box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;}
.bg-decor-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: hidden; }
.decor-circle-red { position: absolute; top: -8rem; left: -8rem; width: 24rem; height: 24rem; background-color: rgba(234,67,53,0.05); border-radius: 50%; filter: blur(40px); }
.decor-circle-blue { position: absolute; top: 5rem; left: 2.5rem; width: 16rem; height: 16rem; background-color: rgba(66,133,244,0.03); border-radius: 50%; filter: blur(30px); }
.decor-circle-green { position: absolute; bottom: -8rem; right: -8rem; width: 30rem; height: 30rem; background-color: rgba(52,168,83,0.05); border-radius: 50%; filter: blur(40px); }
.page-wrapper { max-width: 1200px; width: 100%; margin: 0 auto; padding: 4rem 1rem; position: relative; }
.header-section {text-align: center;margin-bottom: 1rem;}
.header-subtitle { color: #6b7280; font-size: 1.1rem; font-weight: 500; letter-spacing: 0.1em; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 0.5rem; }
.google-icon {width: 20px;height: 20px;margin: 0;}
.header-title { font-size: 3.5rem; font-weight: 900; color: #1f2937; letter-spacing: 0.1em; display: flex; align-items: center; justify-content: center; gap: 1.25rem; }
.hollow-dot { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 4px solid; background-color: transparent; }
.dot-red { border-color: #EA4335; }
.dot-yellow { border-color: #FBBC05; }
.dot-green { border-color: #34A853; }
.table-scroll-area {width: 100%;overflow-x: scroll;padding: 20px;-ms-overflow-style: none;scrollbar-width: none;}
.table-scroll-area::-webkit-scrollbar { display: none; }
.table-card {border-radius: 12px;position: relative;padding: 40px 0;margin: 0px auto 0px auto;}
.pricing-table {width: 100%;min-width: 800px;border-collapse: separate;border-spacing: 0;text-align: center;box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.08);}
.pricing-table th,.pricing-table td {border-bottom: 1px solid #f3f4f6;border-right: 1px solid #f3f4f6;padding: 1.25rem 1.5rem;vertical-align: middle;}
.pricing-table th:last-child,.pricing-table td:last-child { border-right: none; }
.pricing-table tr:last-child td { border-bottom: none; }
.pricing-table th:first-child { border-top-left-radius: 12px; }
.pricing-table th:last-child { border-top-right-radius: 12px; }
.pricing-table tr:last-child td:first-child { border-bottom-left-radius: 12px; }
.pricing-table tr:last-child td:last-child { border-bottom-right-radius: 12px; }
.pricing-table tbody tr { transition: background-color 0.2s; }
.pricing-table tbody tr:hover { background-color: rgba(249,250,251,0.8); }
.th-title-cell { width: 20%; background-color: #f9fafb; text-align: left; vertical-align: bottom; }
.th-title-eng { font-size: 0.875rem; color: #9ca3af; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; }
.th-title-cht { font-size: 1.25rem; font-weight: bold; color: #374151; margin-top: 4px; }
.th-basic { width: 26.6%; position: relative; border-top: 4px solid #4285F4; padding-top: 2rem !important; }
.th-advanced { width: 26.6%; position: relative; border-top: 4px solid #FBBC05; background-color: rgba(251,188,5,0.03); padding-top: 2rem !important; }
.th-pro { width: 26.6%; position: relative; border-top: 4px solid #EA4335; background-color: rgba(234,67,53,0.03); padding-top: 2rem !important; }
.col-title {font-size: 1.5rem;font-weight: bold;color: #1f2937;margin-bottom: 0.25rem;text-align: center;}
.col-title-red { font-size: 1.5rem; font-weight: bold; color: #EA4335; margin-bottom: 0.25rem; }
.col-desc {font-size: 0.875rem;color: #6b7280;font-weight: normal;text-align: center;}
.pro-badge { position: absolute; top: -16px; left: 50%; transform: translateX(-50%) skewX(-12deg); background-color: #EA4335; color: white; font-size: 0.875rem; font-weight: bold; padding: 4px 20px; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); border: 2px solid white; white-space: nowrap; z-index: 10; }
.pro-badge-text { display: inline-block; transform: skewX(12deg); }
.td-label { font-weight: bold; color: #374151; text-align: left; background-color: #f9fafb; }
.bg-yellow-light { background-color: rgba(251,188,5,0.03); }
.bg-red-light { background-color: rgba(234,67,53,0.03); }
.price-blue { color: #4285F4; font-weight: 900; font-size: 1.5rem; }
.price-yellow { color: #FBBC05; font-weight: 900; font-size: 1.5rem; text-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.price-red-box { display: inline-block; background-color: white; border: 2px solid rgba(234,67,53,0.15); padding: 0.5rem 1rem; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); transition: transform 0.2s; }
.price-red-box:hover { transform: translateY(-4px); }
.price-red { color: #EA4335; font-weight: 900; font-size: 1.875rem; }
.price-unit { font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-left: 0.25rem; }
.text-bold { font-weight: bold; }
.text-red { color: #EA4335; font-weight: bold; }
.text-gray-icon { color: #d1d5db; font-size: 1.25rem; }
.check-container { display: flex; flex-direction: column; items-align: center; justify-content: center; gap: 4px; }
.check-circle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background-color: #34A853; color: white; border-radius: 50%; font-size: 12px; margin: 0 auto; }
.sub-text { display: block; font-size: 0.75rem; color: #6b7280; font-weight: normal; margin-top: 4px; }
.badge-gray { display: inline-block; font-size: 0.875rem; color: #6b7280; background-color: #f3f4f6; border-radius: 6px; padding: 4px 8px; margin-top: 6px; }
.badge-yellow { display: inline-block; font-size: 0.875rem; color: #d97706; background-color: #fef3c7; border-radius: 6px; padding: 4px 8px; margin-top: 6px; font-weight: 500; }
.badge-red { display: inline-block; font-size: 0.875rem; color: #b91c1c; background-color: #fee2e2; border-radius: 6px; padding: 4px 8px; margin-top: 6px; font-weight: bold; }
.swipe-indicator { display: none; text-align: right; color: #6b7280; font-size: 0.875rem; font-weight: bold; margin-bottom: 0.5rem; padding-right: 10px; }
.swipe-icon { display: inline-block; color: #4285F4; margin-left: 0.5rem; animation: slideRight 1.5s infinite; }
.check-container span{text-align:center;}
@keyframes slideRight {
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}
@media (max-width:950px) {
  .swipe-indicator { display: block; }
  .th-title-cell {position: sticky;left: 0;z-index: 21;box-shadow: 4px 0 10px -2px rgba(0,0,0,0.08);width: 15%;}
  .td-label { position: sticky; left: 0; z-index: 20; box-shadow: 4px 0 10px -2px rgba(0,0,0,0.08); }
  .table-card{overflow-x: scroll;padding: 10px 0;}
  .pricing-table th, .pricing-table td{padding: 5px 10px;}
}
@media (max-width:768px) {
  .header-title { font-size: 2.5rem; gap: 0.75rem; }
  .hollow-dot { width: 14px; height: 14px; border-width: 3px; }
  .page-wrapper { padding: 2rem 1rem; }
}