/* 모바일 대응을 위한 최소한의 스타일 */ .jd-main-container { width: 100%; overflow-x: hidden; } .responsive-flex { display: flex; flex-direction: row; } .side-title { position: sticky; top: 100px; width: 150px; flex-shrink: 0; display: flex; justify-content: center; } .content-area { flex-grow: 1; padding-left: 50px; padding-right: 20px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 1024px) { .responsive-flex { flex-direction: column; align-items: center; } .side-title { position: static; width: 100%; height: auto; margin-bottom: 50px; writing-mode: horizontal-tb; } .side-title h2 { font-size: 40px !important; letter-spacing: 2px !important; } .content-area { padding-left: 20px; padding-right: 20px; width: 100%; box-sizing: border-box; } .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .step-item { padding-left: 0 !important; text-align: center; } .step-header { justify-content: center !important; } .vertical-line { display: none; } .partner-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 600px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } .hero-title { font-size: 32px !important; letter-spacing: 5px !important; } }