/**
* SLECS 반응형 CSS 프레임워크
* ================================
* 파일명: responsive.css
* 버전: 1.0.0
* 생성일: 2026-01-20
*
* 브레이크포인트 정의:
* - Mobile: 0px ~ 767px
* - Tablet: 768px ~ 1023px
* - Desktop: 1024px ~
*
* 사용법:
* 1. HTML 에 viewport meta 태그 추가 필수:
*
*
* 2. CSS 파일 로드 순서:
*
*
*
* 네이밍 규칙:
* - 기존 common.css와 충돌 방지를 위해 'rsp-' 접두사 사용
* - 브레이크포인트별 접미사: -mobile, -tablet, -desktop
*/
/* ================================
CSS 변수 (Custom Properties)
================================ */
:root {
/* 브레이크포인트 */
--rsp-breakpoint-mobile: 767px;
--rsp-breakpoint-tablet: 1023px;
--rsp-breakpoint-desktop: 1024px;
/* 컨테이너 최대 너비 */
--rsp-container-mobile: 100%;
--rsp-container-tablet: 720px;
--rsp-container-desktop: 1200px;
/* 기본 간격 */
--rsp-spacing-xs: 4px;
--rsp-spacing-sm: 8px;
--rsp-spacing-md: 16px;
--rsp-spacing-lg: 24px;
--rsp-spacing-xl: 32px;
--rsp-spacing-xxl: 48px;
/* 타이포그래피 */
--rsp-font-size-xs: 12px;
--rsp-font-size-sm: 14px;
--rsp-font-size-base: 16px;
--rsp-font-size-lg: 18px;
--rsp-font-size-xl: 20px;
--rsp-font-size-xxl: 24px;
--rsp-font-size-h1: 32px;
--rsp-font-size-h2: 28px;
--rsp-font-size-h3: 24px;
--rsp-font-size-h4: 20px;
--rsp-font-size-h5: 18px;
--rsp-font-size-h6: 16px;
/* 라인 높이 */
--rsp-line-height-tight: 1.25;
--rsp-line-height-normal: 1.5;
--rsp-line-height-relaxed: 1.75;
/* 그리드 */
--rsp-grid-columns: 12;
--rsp-grid-gutter: 16px;
}
/* ================================
반응형 컨테이너
================================ */
.rsp-container {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: var(--rsp-spacing-md);
padding-right: var(--rsp-spacing-md);
box-sizing: border-box;
}
/* Mobile: 전체 너비 */
@media (max-width: 767px) {
.rsp-container {
max-width: 100%;
padding-left: var(--rsp-spacing-sm);
padding-right: var(--rsp-spacing-sm);
}
}
/* Tablet: 720px */
@media (min-width: 768px) and (max-width: 1023px) {
.rsp-container {
max-width: var(--rsp-container-tablet);
}
}
/* Desktop: 1200px */
@media (min-width: 1024px) {
.rsp-container {
max-width: var(--rsp-container-desktop);
padding-left: var(--rsp-spacing-lg);
padding-right: var(--rsp-spacing-lg);
}
}
/* 컨테이너 변형 */
.rsp-container--fluid {
max-width: 100% !important;
}
.rsp-container--narrow {
max-width: 800px !important;
}
.rsp-container--wide {
max-width: 1400px !important;
}
/* ================================
12컬럼 그리드 시스템
================================ */
.rsp-row {
display: flex;
flex-wrap: wrap;
margin-left: calc(var(--rsp-grid-gutter) / -2);
margin-right: calc(var(--rsp-grid-gutter) / -2);
}
.rsp-row--no-gutter {
margin-left: 0;
margin-right: 0;
}
.rsp-row--no-gutter > [class*="rsp-col"] {
padding-left: 0;
padding-right: 0;
}
/* 컬럼 기본 스타일 */
[class*="rsp-col"] {
position: relative;
width: 100%;
padding-left: calc(var(--rsp-grid-gutter) / 2);
padding-right: calc(var(--rsp-grid-gutter) / 2);
box-sizing: border-box;
}
/* 기본 컬럼 (모든 화면) */
.rsp-col { flex: 1 0 0%; }
.rsp-col-auto { flex: 0 0 auto; width: auto; }
.rsp-col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.rsp-col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.rsp-col-3 { flex: 0 0 25%; max-width: 25%; }
.rsp-col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.rsp-col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.rsp-col-6 { flex: 0 0 50%; max-width: 50%; }
.rsp-col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.rsp-col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.rsp-col-9 { flex: 0 0 75%; max-width: 75%; }
.rsp-col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.rsp-col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.rsp-col-12 { flex: 0 0 100%; max-width: 100%; }
/* Mobile 컬럼 (0 ~ 767px) */
@media (max-width: 767px) {
.rsp-col-mobile { flex: 1 0 0%; }
.rsp-col-mobile-auto { flex: 0 0 auto; width: auto; }
.rsp-col-mobile-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.rsp-col-mobile-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.rsp-col-mobile-3 { flex: 0 0 25%; max-width: 25%; }
.rsp-col-mobile-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.rsp-col-mobile-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.rsp-col-mobile-6 { flex: 0 0 50%; max-width: 50%; }
.rsp-col-mobile-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.rsp-col-mobile-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.rsp-col-mobile-9 { flex: 0 0 75%; max-width: 75%; }
.rsp-col-mobile-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.rsp-col-mobile-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.rsp-col-mobile-12 { flex: 0 0 100%; max-width: 100%; }
}
/* Tablet 컬럼 (768px ~ 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
.rsp-col-tablet { flex: 1 0 0%; }
.rsp-col-tablet-auto { flex: 0 0 auto; width: auto; }
.rsp-col-tablet-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.rsp-col-tablet-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.rsp-col-tablet-3 { flex: 0 0 25%; max-width: 25%; }
.rsp-col-tablet-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.rsp-col-tablet-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.rsp-col-tablet-6 { flex: 0 0 50%; max-width: 50%; }
.rsp-col-tablet-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.rsp-col-tablet-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.rsp-col-tablet-9 { flex: 0 0 75%; max-width: 75%; }
.rsp-col-tablet-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.rsp-col-tablet-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.rsp-col-tablet-12 { flex: 0 0 100%; max-width: 100%; }
}
/* Desktop 컬럼 (1024px ~) */
@media (min-width: 1024px) {
.rsp-col-desktop { flex: 1 0 0%; }
.rsp-col-desktop-auto { flex: 0 0 auto; width: auto; }
.rsp-col-desktop-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.rsp-col-desktop-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.rsp-col-desktop-3 { flex: 0 0 25%; max-width: 25%; }
.rsp-col-desktop-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.rsp-col-desktop-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.rsp-col-desktop-6 { flex: 0 0 50%; max-width: 50%; }
.rsp-col-desktop-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.rsp-col-desktop-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.rsp-col-desktop-9 { flex: 0 0 75%; max-width: 75%; }
.rsp-col-desktop-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.rsp-col-desktop-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.rsp-col-desktop-12 { flex: 0 0 100%; max-width: 100%; }
}
/* 오프셋 (기본) */
.rsp-offset-0 { margin-left: 0; }
.rsp-offset-1 { margin-left: 8.333333%; }
.rsp-offset-2 { margin-left: 16.666667%; }
.rsp-offset-3 { margin-left: 25%; }
.rsp-offset-4 { margin-left: 33.333333%; }
.rsp-offset-5 { margin-left: 41.666667%; }
.rsp-offset-6 { margin-left: 50%; }
.rsp-offset-7 { margin-left: 58.333333%; }
.rsp-offset-8 { margin-left: 66.666667%; }
.rsp-offset-9 { margin-left: 75%; }
.rsp-offset-10 { margin-left: 83.333333%; }
.rsp-offset-11 { margin-left: 91.666667%; }
/* 오프셋 (Mobile) */
@media (max-width: 767px) {
.rsp-offset-mobile-0 { margin-left: 0; }
.rsp-offset-mobile-1 { margin-left: 8.333333%; }
.rsp-offset-mobile-2 { margin-left: 16.666667%; }
.rsp-offset-mobile-3 { margin-left: 25%; }
.rsp-offset-mobile-4 { margin-left: 33.333333%; }
.rsp-offset-mobile-5 { margin-left: 41.666667%; }
.rsp-offset-mobile-6 { margin-left: 50%; }
}
/* 오프셋 (Tablet) */
@media (min-width: 768px) and (max-width: 1023px) {
.rsp-offset-tablet-0 { margin-left: 0; }
.rsp-offset-tablet-1 { margin-left: 8.333333%; }
.rsp-offset-tablet-2 { margin-left: 16.666667%; }
.rsp-offset-tablet-3 { margin-left: 25%; }
.rsp-offset-tablet-4 { margin-left: 33.333333%; }
.rsp-offset-tablet-5 { margin-left: 41.666667%; }
.rsp-offset-tablet-6 { margin-left: 50%; }
}
/* 오프셋 (Desktop) */
@media (min-width: 1024px) {
.rsp-offset-desktop-0 { margin-left: 0; }
.rsp-offset-desktop-1 { margin-left: 8.333333%; }
.rsp-offset-desktop-2 { margin-left: 16.666667%; }
.rsp-offset-desktop-3 { margin-left: 25%; }
.rsp-offset-desktop-4 { margin-left: 33.333333%; }
.rsp-offset-desktop-5 { margin-left: 41.666667%; }
.rsp-offset-desktop-6 { margin-left: 50%; }
}
/* ================================
Display 유틸리티
================================ */
/* 기본 display */
.rsp-d-none { display: none !important; }
.rsp-d-block { display: block !important; }
.rsp-d-inline { display: inline !important; }
.rsp-d-inline-block { display: inline-block !important; }
.rsp-d-flex { display: flex !important; }
.rsp-d-inline-flex { display: inline-flex !important; }
.rsp-d-grid { display: grid !important; }
.rsp-d-table { display: table !important; }
.rsp-d-table-cell { display: table-cell !important; }
.rsp-d-table-row { display: table-row !important; }
/* Mobile 전용 숨김/표시 */
@media (max-width: 767px) {
.rsp-d-none-mobile { display: none !important; }
.rsp-d-block-mobile { display: block !important; }
.rsp-d-inline-mobile { display: inline !important; }
.rsp-d-inline-block-mobile { display: inline-block !important; }
.rsp-d-flex-mobile { display: flex !important; }
.rsp-d-inline-flex-mobile { display: inline-flex !important; }
.rsp-d-grid-mobile { display: grid !important; }
}
/* Tablet 전용 숨김/표시 */
@media (min-width: 768px) and (max-width: 1023px) {
.rsp-d-none-tablet { display: none !important; }
.rsp-d-block-tablet { display: block !important; }
.rsp-d-inline-tablet { display: inline !important; }
.rsp-d-inline-block-tablet { display: inline-block !important; }
.rsp-d-flex-tablet { display: flex !important; }
.rsp-d-inline-flex-tablet { display: inline-flex !important; }
.rsp-d-grid-tablet { display: grid !important; }
}
/* Desktop 전용 숨김/표시 */
@media (min-width: 1024px) {
.rsp-d-none-desktop { display: none !important; }
.rsp-d-block-desktop { display: block !important; }
.rsp-d-inline-desktop { display: inline !important; }
.rsp-d-inline-block-desktop { display: inline-block !important; }
.rsp-d-flex-desktop { display: flex !important; }
.rsp-d-inline-flex-desktop { display: inline-flex !important; }
.rsp-d-grid-desktop { display: grid !important; }
}
/* 특정 디바이스에서만 표시 */
.rsp-mobile-only {
display: none !important;
}
.rsp-tablet-only {
display: none !important;
}
.rsp-desktop-only {
display: none !important;
}
@media (max-width: 767px) {
.rsp-mobile-only {
display: block !important;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.rsp-tablet-only {
display: block !important;
}
}
@media (min-width: 1024px) {
.rsp-desktop-only {
display: block !important;
}
}
/* ================================
Flexbox 유틸리티
================================ */
/* Flex direction */
.rsp-flex-row { flex-direction: row !important; }
.rsp-flex-row-reverse { flex-direction: row-reverse !important; }
.rsp-flex-column { flex-direction: column !important; }
.rsp-flex-column-reverse { flex-direction: column-reverse !important; }
/* Flex wrap */
.rsp-flex-wrap { flex-wrap: wrap !important; }
.rsp-flex-nowrap { flex-wrap: nowrap !important; }
.rsp-flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
/* Justify content */
.rsp-justify-start { justify-content: flex-start !important; }
.rsp-justify-end { justify-content: flex-end !important; }
.rsp-justify-center { justify-content: center !important; }
.rsp-justify-between { justify-content: space-between !important; }
.rsp-justify-around { justify-content: space-around !important; }
.rsp-justify-evenly { justify-content: space-evenly !important; }
/* Align items */
.rsp-align-start { align-items: flex-start !important; }
.rsp-align-end { align-items: flex-end !important; }
.rsp-align-center { align-items: center !important; }
.rsp-align-baseline { align-items: baseline !important; }
.rsp-align-stretch { align-items: stretch !important; }
/* Align self */
.rsp-align-self-auto { align-self: auto !important; }
.rsp-align-self-start { align-self: flex-start !important; }
.rsp-align-self-end { align-self: flex-end !important; }
.rsp-align-self-center { align-self: center !important; }
.rsp-align-self-stretch { align-self: stretch !important; }
/* Flex grow & shrink */
.rsp-flex-grow-0 { flex-grow: 0 !important; }
.rsp-flex-grow-1 { flex-grow: 1 !important; }
.rsp-flex-shrink-0 { flex-shrink: 0 !important; }
.rsp-flex-shrink-1 { flex-shrink: 1 !important; }
/* Gap */
.rsp-gap-0 { gap: 0 !important; }
.rsp-gap-xs { gap: var(--rsp-spacing-xs) !important; }
.rsp-gap-sm { gap: var(--rsp-spacing-sm) !important; }
.rsp-gap-md { gap: var(--rsp-spacing-md) !important; }
.rsp-gap-lg { gap: var(--rsp-spacing-lg) !important; }
.rsp-gap-xl { gap: var(--rsp-spacing-xl) !important; }
/* Mobile Flexbox */
@media (max-width: 767px) {
.rsp-flex-row-mobile { flex-direction: row !important; }
.rsp-flex-column-mobile { flex-direction: column !important; }
.rsp-justify-start-mobile { justify-content: flex-start !important; }
.rsp-justify-center-mobile { justify-content: center !important; }
.rsp-justify-between-mobile { justify-content: space-between !important; }
.rsp-align-start-mobile { align-items: flex-start !important; }
.rsp-align-center-mobile { align-items: center !important; }
.rsp-gap-sm-mobile { gap: var(--rsp-spacing-sm) !important; }
.rsp-gap-md-mobile { gap: var(--rsp-spacing-md) !important; }
}
/* Tablet Flexbox */
@media (min-width: 768px) and (max-width: 1023px) {
.rsp-flex-row-tablet { flex-direction: row !important; }
.rsp-flex-column-tablet { flex-direction: column !important; }
.rsp-justify-start-tablet { justify-content: flex-start !important; }
.rsp-justify-center-tablet { justify-content: center !important; }
.rsp-justify-between-tablet { justify-content: space-between !important; }
.rsp-align-start-tablet { align-items: flex-start !important; }
.rsp-align-center-tablet { align-items: center !important; }
.rsp-gap-sm-tablet { gap: var(--rsp-spacing-sm) !important; }
.rsp-gap-md-tablet { gap: var(--rsp-spacing-md) !important; }
}
/* Desktop Flexbox */
@media (min-width: 1024px) {
.rsp-flex-row-desktop { flex-direction: row !important; }
.rsp-flex-column-desktop { flex-direction: column !important; }
.rsp-justify-start-desktop { justify-content: flex-start !important; }
.rsp-justify-center-desktop { justify-content: center !important; }
.rsp-justify-between-desktop { justify-content: space-between !important; }
.rsp-align-start-desktop { align-items: flex-start !important; }
.rsp-align-center-desktop { align-items: center !important; }
.rsp-gap-sm-desktop { gap: var(--rsp-spacing-sm) !important; }
.rsp-gap-md-desktop { gap: var(--rsp-spacing-md) !important; }
}
/* ================================
반응형 타이포그래피
================================ */
/* 기본 폰트 사이즈 */
.rsp-text-xs { font-size: var(--rsp-font-size-xs) !important; }
.rsp-text-sm { font-size: var(--rsp-font-size-sm) !important; }
.rsp-text-base { font-size: var(--rsp-font-size-base) !important; }
.rsp-text-lg { font-size: var(--rsp-font-size-lg) !important; }
.rsp-text-xl { font-size: var(--rsp-font-size-xl) !important; }
.rsp-text-xxl { font-size: var(--rsp-font-size-xxl) !important; }
/* 반응형 헤딩 */
.rsp-h1 {
font-size: var(--rsp-font-size-h1);
font-weight: 700;
line-height: var(--rsp-line-height-tight);
margin-bottom: var(--rsp-spacing-md);
}
.rsp-h2 {
font-size: var(--rsp-font-size-h2);
font-weight: 700;
line-height: var(--rsp-line-height-tight);
margin-bottom: var(--rsp-spacing-md);
}
.rsp-h3 {
font-size: var(--rsp-font-size-h3);
font-weight: 600;
line-height: var(--rsp-line-height-tight);
margin-bottom: var(--rsp-spacing-sm);
}
.rsp-h4 {
font-size: var(--rsp-font-size-h4);
font-weight: 600;
line-height: var(--rsp-line-height-normal);
margin-bottom: var(--rsp-spacing-sm);
}
.rsp-h5 {
font-size: var(--rsp-font-size-h5);
font-weight: 500;
line-height: var(--rsp-line-height-normal);
margin-bottom: var(--rsp-spacing-xs);
}
.rsp-h6 {
font-size: var(--rsp-font-size-h6);
font-weight: 500;
line-height: var(--rsp-line-height-normal);
margin-bottom: var(--rsp-spacing-xs);
}
/* 본문 텍스트 */
.rsp-body {
font-size: var(--rsp-font-size-base);
line-height: var(--rsp-line-height-normal);
}
.rsp-body-sm {
font-size: var(--rsp-font-size-sm);
line-height: var(--rsp-line-height-normal);
}
.rsp-body-lg {
font-size: var(--rsp-font-size-lg);
line-height: var(--rsp-line-height-relaxed);
}
/* 라인 높이 */
.rsp-leading-tight { line-height: var(--rsp-line-height-tight) !important; }
.rsp-leading-normal { line-height: var(--rsp-line-height-normal) !important; }
.rsp-leading-relaxed { line-height: var(--rsp-line-height-relaxed) !important; }
/* 텍스트 정렬 */
.rsp-text-left { text-align: left !important; }
.rsp-text-center { text-align: center !important; }
.rsp-text-right { text-align: right !important; }
.rsp-text-justify { text-align: justify !important; }
/* Mobile 타이포그래피 */
@media (max-width: 767px) {
:root {
--rsp-font-size-h1: 24px;
--rsp-font-size-h2: 22px;
--rsp-font-size-h3: 20px;
--rsp-font-size-h4: 18px;
--rsp-font-size-h5: 16px;
--rsp-font-size-h6: 14px;
}
.rsp-text-xs-mobile { font-size: var(--rsp-font-size-xs) !important; }
.rsp-text-sm-mobile { font-size: var(--rsp-font-size-sm) !important; }
.rsp-text-base-mobile { font-size: var(--rsp-font-size-base) !important; }
.rsp-text-lg-mobile { font-size: var(--rsp-font-size-lg) !important; }
.rsp-text-left-mobile { text-align: left !important; }
.rsp-text-center-mobile { text-align: center !important; }
.rsp-text-right-mobile { text-align: right !important; }
}
/* Tablet 타이포그래피 */
@media (min-width: 768px) and (max-width: 1023px) {
:root {
--rsp-font-size-h1: 28px;
--rsp-font-size-h2: 24px;
--rsp-font-size-h3: 22px;
--rsp-font-size-h4: 18px;
}
.rsp-text-xs-tablet { font-size: var(--rsp-font-size-xs) !important; }
.rsp-text-sm-tablet { font-size: var(--rsp-font-size-sm) !important; }
.rsp-text-base-tablet { font-size: var(--rsp-font-size-base) !important; }
.rsp-text-lg-tablet { font-size: var(--rsp-font-size-lg) !important; }
.rsp-text-left-tablet { text-align: left !important; }
.rsp-text-center-tablet { text-align: center !important; }
.rsp-text-right-tablet { text-align: right !important; }
}
/* Desktop 타이포그래피 */
@media (min-width: 1024px) {
.rsp-text-xs-desktop { font-size: var(--rsp-font-size-xs) !important; }
.rsp-text-sm-desktop { font-size: var(--rsp-font-size-sm) !important; }
.rsp-text-base-desktop { font-size: var(--rsp-font-size-base) !important; }
.rsp-text-lg-desktop { font-size: var(--rsp-font-size-lg) !important; }
.rsp-text-left-desktop { text-align: left !important; }
.rsp-text-center-desktop { text-align: center !important; }
.rsp-text-right-desktop { text-align: right !important; }
}
/* ================================
반응형 간격 (Margin & Padding)
================================ */
/* Margin - 모든 방향 */
.rsp-m-0 { margin: 0 !important; }
.rsp-m-xs { margin: var(--rsp-spacing-xs) !important; }
.rsp-m-sm { margin: var(--rsp-spacing-sm) !important; }
.rsp-m-md { margin: var(--rsp-spacing-md) !important; }
.rsp-m-lg { margin: var(--rsp-spacing-lg) !important; }
.rsp-m-xl { margin: var(--rsp-spacing-xl) !important; }
.rsp-m-xxl { margin: var(--rsp-spacing-xxl) !important; }
.rsp-m-auto { margin: auto !important; }
/* Margin - 개별 방향 */
.rsp-mt-0 { margin-top: 0 !important; }
.rsp-mt-xs { margin-top: var(--rsp-spacing-xs) !important; }
.rsp-mt-sm { margin-top: var(--rsp-spacing-sm) !important; }
.rsp-mt-md { margin-top: var(--rsp-spacing-md) !important; }
.rsp-mt-lg { margin-top: var(--rsp-spacing-lg) !important; }
.rsp-mt-xl { margin-top: var(--rsp-spacing-xl) !important; }
.rsp-mt-xxl { margin-top: var(--rsp-spacing-xxl) !important; }
.rsp-mr-0 { margin-right: 0 !important; }
.rsp-mr-xs { margin-right: var(--rsp-spacing-xs) !important; }
.rsp-mr-sm { margin-right: var(--rsp-spacing-sm) !important; }
.rsp-mr-md { margin-right: var(--rsp-spacing-md) !important; }
.rsp-mr-lg { margin-right: var(--rsp-spacing-lg) !important; }
.rsp-mr-xl { margin-right: var(--rsp-spacing-xl) !important; }
.rsp-mr-auto { margin-right: auto !important; }
.rsp-mb-0 { margin-bottom: 0 !important; }
.rsp-mb-xs { margin-bottom: var(--rsp-spacing-xs) !important; }
.rsp-mb-sm { margin-bottom: var(--rsp-spacing-sm) !important; }
.rsp-mb-md { margin-bottom: var(--rsp-spacing-md) !important; }
.rsp-mb-lg { margin-bottom: var(--rsp-spacing-lg) !important; }
.rsp-mb-xl { margin-bottom: var(--rsp-spacing-xl) !important; }
.rsp-mb-xxl { margin-bottom: var(--rsp-spacing-xxl) !important; }
.rsp-ml-0 { margin-left: 0 !important; }
.rsp-ml-xs { margin-left: var(--rsp-spacing-xs) !important; }
.rsp-ml-sm { margin-left: var(--rsp-spacing-sm) !important; }
.rsp-ml-md { margin-left: var(--rsp-spacing-md) !important; }
.rsp-ml-lg { margin-left: var(--rsp-spacing-lg) !important; }
.rsp-ml-xl { margin-left: var(--rsp-spacing-xl) !important; }
.rsp-ml-auto { margin-left: auto !important; }
/* Margin - 수평/수직 */
.rsp-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.rsp-mx-xs { margin-left: var(--rsp-spacing-xs) !important; margin-right: var(--rsp-spacing-xs) !important; }
.rsp-mx-sm { margin-left: var(--rsp-spacing-sm) !important; margin-right: var(--rsp-spacing-sm) !important; }
.rsp-mx-md { margin-left: var(--rsp-spacing-md) !important; margin-right: var(--rsp-spacing-md) !important; }
.rsp-mx-lg { margin-left: var(--rsp-spacing-lg) !important; margin-right: var(--rsp-spacing-lg) !important; }
.rsp-mx-xl { margin-left: var(--rsp-spacing-xl) !important; margin-right: var(--rsp-spacing-xl) !important; }
.rsp-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.rsp-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.rsp-my-xs { margin-top: var(--rsp-spacing-xs) !important; margin-bottom: var(--rsp-spacing-xs) !important; }
.rsp-my-sm { margin-top: var(--rsp-spacing-sm) !important; margin-bottom: var(--rsp-spacing-sm) !important; }
.rsp-my-md { margin-top: var(--rsp-spacing-md) !important; margin-bottom: var(--rsp-spacing-md) !important; }
.rsp-my-lg { margin-top: var(--rsp-spacing-lg) !important; margin-bottom: var(--rsp-spacing-lg) !important; }
.rsp-my-xl { margin-top: var(--rsp-spacing-xl) !important; margin-bottom: var(--rsp-spacing-xl) !important; }
/* Padding - 모든 방향 */
.rsp-p-0 { padding: 0 !important; }
.rsp-p-xs { padding: var(--rsp-spacing-xs) !important; }
.rsp-p-sm { padding: var(--rsp-spacing-sm) !important; }
.rsp-p-md { padding: var(--rsp-spacing-md) !important; }
.rsp-p-lg { padding: var(--rsp-spacing-lg) !important; }
.rsp-p-xl { padding: var(--rsp-spacing-xl) !important; }
.rsp-p-xxl { padding: var(--rsp-spacing-xxl) !important; }
/* Padding - 개별 방향 */
.rsp-pt-0 { padding-top: 0 !important; }
.rsp-pt-xs { padding-top: var(--rsp-spacing-xs) !important; }
.rsp-pt-sm { padding-top: var(--rsp-spacing-sm) !important; }
.rsp-pt-md { padding-top: var(--rsp-spacing-md) !important; }
.rsp-pt-lg { padding-top: var(--rsp-spacing-lg) !important; }
.rsp-pt-xl { padding-top: var(--rsp-spacing-xl) !important; }
.rsp-pt-xxl { padding-top: var(--rsp-spacing-xxl) !important; }
.rsp-pr-0 { padding-right: 0 !important; }
.rsp-pr-xs { padding-right: var(--rsp-spacing-xs) !important; }
.rsp-pr-sm { padding-right: var(--rsp-spacing-sm) !important; }
.rsp-pr-md { padding-right: var(--rsp-spacing-md) !important; }
.rsp-pr-lg { padding-right: var(--rsp-spacing-lg) !important; }
.rsp-pr-xl { padding-right: var(--rsp-spacing-xl) !important; }
.rsp-pb-0 { padding-bottom: 0 !important; }
.rsp-pb-xs { padding-bottom: var(--rsp-spacing-xs) !important; }
.rsp-pb-sm { padding-bottom: var(--rsp-spacing-sm) !important; }
.rsp-pb-md { padding-bottom: var(--rsp-spacing-md) !important; }
.rsp-pb-lg { padding-bottom: var(--rsp-spacing-lg) !important; }
.rsp-pb-xl { padding-bottom: var(--rsp-spacing-xl) !important; }
.rsp-pb-xxl { padding-bottom: var(--rsp-spacing-xxl) !important; }
.rsp-pl-0 { padding-left: 0 !important; }
.rsp-pl-xs { padding-left: var(--rsp-spacing-xs) !important; }
.rsp-pl-sm { padding-left: var(--rsp-spacing-sm) !important; }
.rsp-pl-md { padding-left: var(--rsp-spacing-md) !important; }
.rsp-pl-lg { padding-left: var(--rsp-spacing-lg) !important; }
.rsp-pl-xl { padding-left: var(--rsp-spacing-xl) !important; }
/* Padding - 수평/수직 */
.rsp-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.rsp-px-xs { padding-left: var(--rsp-spacing-xs) !important; padding-right: var(--rsp-spacing-xs) !important; }
.rsp-px-sm { padding-left: var(--rsp-spacing-sm) !important; padding-right: var(--rsp-spacing-sm) !important; }
.rsp-px-md { padding-left: var(--rsp-spacing-md) !important; padding-right: var(--rsp-spacing-md) !important; }
.rsp-px-lg { padding-left: var(--rsp-spacing-lg) !important; padding-right: var(--rsp-spacing-lg) !important; }
.rsp-px-xl { padding-left: var(--rsp-spacing-xl) !important; padding-right: var(--rsp-spacing-xl) !important; }
.rsp-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.rsp-py-xs { padding-top: var(--rsp-spacing-xs) !important; padding-bottom: var(--rsp-spacing-xs) !important; }
.rsp-py-sm { padding-top: var(--rsp-spacing-sm) !important; padding-bottom: var(--rsp-spacing-sm) !important; }
.rsp-py-md { padding-top: var(--rsp-spacing-md) !important; padding-bottom: var(--rsp-spacing-md) !important; }
.rsp-py-lg { padding-top: var(--rsp-spacing-lg) !important; padding-bottom: var(--rsp-spacing-lg) !important; }
.rsp-py-xl { padding-top: var(--rsp-spacing-xl) !important; padding-bottom: var(--rsp-spacing-xl) !important; }
/* Mobile 간격 */
@media (max-width: 767px) {
.rsp-m-0-mobile { margin: 0 !important; }
.rsp-m-sm-mobile { margin: var(--rsp-spacing-sm) !important; }
.rsp-m-md-mobile { margin: var(--rsp-spacing-md) !important; }
.rsp-mt-0-mobile { margin-top: 0 !important; }
.rsp-mt-sm-mobile { margin-top: var(--rsp-spacing-sm) !important; }
.rsp-mt-md-mobile { margin-top: var(--rsp-spacing-md) !important; }
.rsp-mt-lg-mobile { margin-top: var(--rsp-spacing-lg) !important; }
.rsp-mb-0-mobile { margin-bottom: 0 !important; }
.rsp-mb-sm-mobile { margin-bottom: var(--rsp-spacing-sm) !important; }
.rsp-mb-md-mobile { margin-bottom: var(--rsp-spacing-md) !important; }
.rsp-mb-lg-mobile { margin-bottom: var(--rsp-spacing-lg) !important; }
.rsp-mx-0-mobile { margin-left: 0 !important; margin-right: 0 !important; }
.rsp-mx-sm-mobile { margin-left: var(--rsp-spacing-sm) !important; margin-right: var(--rsp-spacing-sm) !important; }
.rsp-p-0-mobile { padding: 0 !important; }
.rsp-p-sm-mobile { padding: var(--rsp-spacing-sm) !important; }
.rsp-p-md-mobile { padding: var(--rsp-spacing-md) !important; }
.rsp-px-0-mobile { padding-left: 0 !important; padding-right: 0 !important; }
.rsp-px-sm-mobile { padding-left: var(--rsp-spacing-sm) !important; padding-right: var(--rsp-spacing-sm) !important; }
.rsp-px-md-mobile { padding-left: var(--rsp-spacing-md) !important; padding-right: var(--rsp-spacing-md) !important; }
.rsp-py-0-mobile { padding-top: 0 !important; padding-bottom: 0 !important; }
.rsp-py-sm-mobile { padding-top: var(--rsp-spacing-sm) !important; padding-bottom: var(--rsp-spacing-sm) !important; }
.rsp-py-md-mobile { padding-top: var(--rsp-spacing-md) !important; padding-bottom: var(--rsp-spacing-md) !important; }
}
/* Tablet 간격 */
@media (min-width: 768px) and (max-width: 1023px) {
.rsp-m-0-tablet { margin: 0 !important; }
.rsp-m-sm-tablet { margin: var(--rsp-spacing-sm) !important; }
.rsp-m-md-tablet { margin: var(--rsp-spacing-md) !important; }
.rsp-mt-0-tablet { margin-top: 0 !important; }
.rsp-mt-sm-tablet { margin-top: var(--rsp-spacing-sm) !important; }
.rsp-mt-md-tablet { margin-top: var(--rsp-spacing-md) !important; }
.rsp-mt-lg-tablet { margin-top: var(--rsp-spacing-lg) !important; }
.rsp-mb-0-tablet { margin-bottom: 0 !important; }
.rsp-mb-sm-tablet { margin-bottom: var(--rsp-spacing-sm) !important; }
.rsp-mb-md-tablet { margin-bottom: var(--rsp-spacing-md) !important; }
.rsp-mb-lg-tablet { margin-bottom: var(--rsp-spacing-lg) !important; }
.rsp-p-0-tablet { padding: 0 !important; }
.rsp-p-sm-tablet { padding: var(--rsp-spacing-sm) !important; }
.rsp-p-md-tablet { padding: var(--rsp-spacing-md) !important; }
.rsp-px-0-tablet { padding-left: 0 !important; padding-right: 0 !important; }
.rsp-px-sm-tablet { padding-left: var(--rsp-spacing-sm) !important; padding-right: var(--rsp-spacing-sm) !important; }
.rsp-px-md-tablet { padding-left: var(--rsp-spacing-md) !important; padding-right: var(--rsp-spacing-md) !important; }
.rsp-py-0-tablet { padding-top: 0 !important; padding-bottom: 0 !important; }
.rsp-py-sm-tablet { padding-top: var(--rsp-spacing-sm) !important; padding-bottom: var(--rsp-spacing-sm) !important; }
.rsp-py-md-tablet { padding-top: var(--rsp-spacing-md) !important; padding-bottom: var(--rsp-spacing-md) !important; }
}
/* Desktop 간격 */
@media (min-width: 1024px) {
.rsp-m-0-desktop { margin: 0 !important; }
.rsp-m-sm-desktop { margin: var(--rsp-spacing-sm) !important; }
.rsp-m-md-desktop { margin: var(--rsp-spacing-md) !important; }
.rsp-m-lg-desktop { margin: var(--rsp-spacing-lg) !important; }
.rsp-mt-0-desktop { margin-top: 0 !important; }
.rsp-mt-sm-desktop { margin-top: var(--rsp-spacing-sm) !important; }
.rsp-mt-md-desktop { margin-top: var(--rsp-spacing-md) !important; }
.rsp-mt-lg-desktop { margin-top: var(--rsp-spacing-lg) !important; }
.rsp-mb-0-desktop { margin-bottom: 0 !important; }
.rsp-mb-sm-desktop { margin-bottom: var(--rsp-spacing-sm) !important; }
.rsp-mb-md-desktop { margin-bottom: var(--rsp-spacing-md) !important; }
.rsp-mb-lg-desktop { margin-bottom: var(--rsp-spacing-lg) !important; }
.rsp-p-0-desktop { padding: 0 !important; }
.rsp-p-sm-desktop { padding: var(--rsp-spacing-sm) !important; }
.rsp-p-md-desktop { padding: var(--rsp-spacing-md) !important; }
.rsp-p-lg-desktop { padding: var(--rsp-spacing-lg) !important; }
.rsp-px-0-desktop { padding-left: 0 !important; padding-right: 0 !important; }
.rsp-px-sm-desktop { padding-left: var(--rsp-spacing-sm) !important; padding-right: var(--rsp-spacing-sm) !important; }
.rsp-px-md-desktop { padding-left: var(--rsp-spacing-md) !important; padding-right: var(--rsp-spacing-md) !important; }
.rsp-px-lg-desktop { padding-left: var(--rsp-spacing-lg) !important; padding-right: var(--rsp-spacing-lg) !important; }
.rsp-py-0-desktop { padding-top: 0 !important; padding-bottom: 0 !important; }
.rsp-py-sm-desktop { padding-top: var(--rsp-spacing-sm) !important; padding-bottom: var(--rsp-spacing-sm) !important; }
.rsp-py-md-desktop { padding-top: var(--rsp-spacing-md) !important; padding-bottom: var(--rsp-spacing-md) !important; }
.rsp-py-lg-desktop { padding-top: var(--rsp-spacing-lg) !important; padding-bottom: var(--rsp-spacing-lg) !important; }
}
/* ================================
이미지 반응형
================================ */
/* 기본 반응형 이미지 */
.rsp-img-fluid {
max-width: 100%;
height: auto;
display: block;
}
/* 이미지 컨테이너에 맞춤 */
.rsp-img-cover {
width: 100%;
height: 100%;
object-fit: cover;
}
.rsp-img-contain {
width: 100%;
height: 100%;
object-fit: contain;
}
/* 비율 유지 컨테이너 */
.rsp-ratio {
position: relative;
width: 100%;
}
.rsp-ratio::before {
content: "";
display: block;
}
.rsp-ratio > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 주요 비율 */
.rsp-ratio-1x1::before { padding-top: 100%; }
.rsp-ratio-4x3::before { padding-top: 75%; }
.rsp-ratio-16x9::before { padding-top: 56.25%; }
.rsp-ratio-21x9::before { padding-top: 42.857%; }
.rsp-ratio-3x4::before { padding-top: 133.333%; }
.rsp-ratio-9x16::before { padding-top: 177.778%; }
/* 반응형 배경 이미지 */
.rsp-bg-cover {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.rsp-bg-contain {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
/* ================================
Width & Height 유틸리티
================================ */
/* 너비 */
.rsp-w-auto { width: auto !important; }
.rsp-w-25 { width: 25% !important; }
.rsp-w-50 { width: 50% !important; }
.rsp-w-75 { width: 75% !important; }
.rsp-w-100 { width: 100% !important; }
.rsp-w-screen { width: 100vw !important; }
.rsp-max-w-100 { max-width: 100% !important; }
.rsp-min-w-0 { min-width: 0 !important; }
/* 높이 */
.rsp-h-auto { height: auto !important; }
.rsp-h-25 { height: 25% !important; }
.rsp-h-50 { height: 50% !important; }
.rsp-h-75 { height: 75% !important; }
.rsp-h-100 { height: 100% !important; }
.rsp-h-screen { height: 100vh !important; }
.rsp-min-h-screen { min-height: 100vh !important; }
/* Mobile 너비/높이 */
@media (max-width: 767px) {
.rsp-w-100-mobile { width: 100% !important; }
.rsp-w-auto-mobile { width: auto !important; }
.rsp-h-auto-mobile { height: auto !important; }
}
/* Tablet 너비/높이 */
@media (min-width: 768px) and (max-width: 1023px) {
.rsp-w-100-tablet { width: 100% !important; }
.rsp-w-auto-tablet { width: auto !important; }
.rsp-h-auto-tablet { height: auto !important; }
}
/* Desktop 너비/높이 */
@media (min-width: 1024px) {
.rsp-w-100-desktop { width: 100% !important; }
.rsp-w-auto-desktop { width: auto !important; }
.rsp-h-auto-desktop { height: auto !important; }
}
/* ================================
Position 유틸리티
================================ */
.rsp-position-static { position: static !important; }
.rsp-position-relative { position: relative !important; }
.rsp-position-absolute { position: absolute !important; }
.rsp-position-fixed { position: fixed !important; }
.rsp-position-sticky { position: sticky !important; }
/* Sticky 위치 */
.rsp-sticky-top { position: sticky !important; top: 0; z-index: 1020; }
.rsp-sticky-bottom { position: sticky !important; bottom: 0; z-index: 1020; }
/* Fixed 위치 */
.rsp-fixed-top { position: fixed !important; top: 0; left: 0; right: 0; z-index: 1030; }
.rsp-fixed-bottom { position: fixed !important; bottom: 0; left: 0; right: 0; z-index: 1030; }
/* ================================
Overflow 유틸리티
================================ */
.rsp-overflow-auto { overflow: auto !important; }
.rsp-overflow-hidden { overflow: hidden !important; }
.rsp-overflow-visible { overflow: visible !important; }
.rsp-overflow-scroll { overflow: scroll !important; }
.rsp-overflow-x-auto { overflow-x: auto !important; }
.rsp-overflow-x-hidden { overflow-x: hidden !important; }
.rsp-overflow-y-auto { overflow-y: auto !important; }
.rsp-overflow-y-hidden { overflow-y: hidden !important; }
/* ================================
기타 유틸리티
================================ */
/* Z-index */
.rsp-z-0 { z-index: 0 !important; }
.rsp-z-10 { z-index: 10 !important; }
.rsp-z-20 { z-index: 20 !important; }
.rsp-z-30 { z-index: 30 !important; }
.rsp-z-40 { z-index: 40 !important; }
.rsp-z-50 { z-index: 50 !important; }
.rsp-z-auto { z-index: auto !important; }
/* Border radius */
.rsp-rounded-none { border-radius: 0 !important; }
.rsp-rounded-sm { border-radius: 4px !important; }
.rsp-rounded { border-radius: 8px !important; }
.rsp-rounded-lg { border-radius: 12px !important; }
.rsp-rounded-xl { border-radius: 16px !important; }
.rsp-rounded-full { border-radius: 9999px !important; }
/* Box shadow */
.rsp-shadow-none { box-shadow: none !important; }
.rsp-shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; }
.rsp-shadow { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; }
.rsp-shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; }
.rsp-shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1) !important; }
.rsp-shadow-xl { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1) !important; }
/* Cursor */
.rsp-cursor-pointer { cursor: pointer !important; }
.rsp-cursor-default { cursor: default !important; }
.rsp-cursor-not-allowed { cursor: not-allowed !important; }
/* User select */
.rsp-select-none { user-select: none !important; }
.rsp-select-text { user-select: text !important; }
.rsp-select-all { user-select: all !important; }
/* ================================
터치 디바이스 최적화
================================ */
@media (max-width: 1023px) {
/* 터치 타겟 최소 크기 확보 */
.rsp-touch-target {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* 터치 시 하이라이트 제거 */
.rsp-no-tap-highlight {
-webkit-tap-highlight-color: transparent;
}
/* 스크롤 최적화 */
.rsp-scroll-smooth {
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
}
/* ================================
Print 스타일
================================ */
@media print {
.rsp-d-print-none { display: none !important; }
.rsp-d-print-block { display: block !important; }
.rsp-d-print-inline { display: inline !important; }
.rsp-d-print-inline-block { display: inline-block !important; }
/* 인쇄 시 그리드 단순화 */
.rsp-row {
display: block;
}
[class*="rsp-col"] {
width: 100%;
max-width: 100%;
}
}
/* ================================
접근성 (Accessibility)
================================ */
/* 스크린 리더 전용 */
.rsp-sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* 포커스 시 표시 */
.rsp-sr-only-focusable:focus,
.rsp-sr-only-focusable:active {
position: static !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
clip: auto !important;
white-space: normal !important;
}
/* 포커스 표시 개선 */
.rsp-focus-visible:focus-visible {
outline: 2px solid #007bff;
outline-offset: 2px;
}
/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
.rsp-container,
[class*="rsp-col"] {
border: 1px solid currentColor;
}
}
/* 모션 감소 선호 */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}