:root {
  --bg-color: #0d0d0d;
  --container-bg: #141414;
  --card-bg: #1a1a1a;
  --accent-color: #ef4444; 
  --accent-hover: #dc2626; 
  --accent-glow: rgba(239, 68, 68, 0.25);
  --text-main: #f3f4f6;
  --text-sub: #9ca3af;
  --border-color: #2e2e2e;
  --shadow-plate: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  --shadow-card: 0 4px 15px rgba(0, 0, 0, 0.25);
}

body {
    background-color: var(--bg-color);
}

.card { 
    background: var(--card-bg); 
    border-radius: 18px; 
    border: 1px solid var(--border-color); 
    box-shadow: var(--shadow-card); 
}

.modern-input { 
    background: #111111 !important; 
    color: var(--text-main) !important; 
    border: 1px solid #333 !important; 
    border-radius: 12px; 
    transition: all 0.2s ease; 
    padding: 10px 14px; 
    font-size: 13px; 
    width: 100%; 
    outline: none; 
}

.modern-input:focus { 
    border-color: var(--accent-color) !important; 
    box-shadow: 0 0 0 2px var(--accent-glow) !important; 
    background: #000 !important; 
}

/* プレビューエリアのチェッカーボード（透過背景の視覚化用） */
.checkerboard-bg {
    background-image: linear-gradient(45deg, #e5e5e5 25%, transparent 25%), 
                      linear-gradient(-45deg, #e5e5e5 25%, transparent 25%), 
                      linear-gradient(45deg, transparent 75%, #e5e5e5 75%), 
                      linear-gradient(-45deg, transparent 75%, #e5e5e5 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    background-color: #ffffff;
}

/* スクロールバーのカスタマイズ */
.custom-scrollbar::-webkit-scrollbar, ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--container-bg);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 流れる境界線のキーフレーム定義 */
@keyframes march-border {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -1000; }
}

@keyframes custom-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes scroll-left {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.pulse-effect {
    animation: custom-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ワイプ内のバナー表示用 */
.wipe-banner {
    position: absolute;
    left: 0;
    width: 100%;
    background-color: rgba(13, 13, 13, 0.8);
    text-align: center;
    font-weight: bold;
    padding: 2px 0;
    box-sizing: border-box;
    pointer-events: none;
}