@charset "utf-8";
/**
* basic 스킨 공용 CSS
*
* basic 스킨에서만 사용하는 스타일 레이어:
* - Form element reset (input 폰트 상속 등)
* - Typography 계층 (h1~h6, .display-*, .text-lead/body/caption/overline, .prose)
* - Color / Background / Weight / Align utility (토큰 참조)
* - 공용 컴포넌트 (.btn, .card, .badge, .alert, .form-field)
* - BS-호환 유틸 (.container, .row, .col-*, .g-*, .mb-*, .d-flex 등) — framework view 가 BS 클래스명 사용
* - BS-호환 컴포넌트 (.btn-primary, .form-control, .modal, .accordion 등) — framework view 용
* - .ratio, .object-fit-* — 런타임 JS 삽입 마크업 지원
*
* 토큰 기반 작성 → tokens.css 에서 변수 재정의 시 전체 톤 동반 변경.
* default 등 다른 스킨에는 로드되지 않음 (스킨 캡슐화).
*
* 페이지네이션(.pagination, .page-link 등) 의 element 스타일은
* 그 컴포넌트를 렌더링하는 각 패키지(Rental/Board)가 소유한다.
* 아래 Pagination 변수 블록은 그 패키지가 `:root` 에 노출한 변수를
* basic 스킨 토큰 기반으로 재정의하는 테마 오버라이드.
*/
/* ============================================
Form element reset
- input/textarea/select/button 은 브라우저 기본 시스템 폰트 사용 →
부모 폰트 상속받도록 명시
* ============================================ */
input,
textarea,
select,
button {
font-family: inherit;
}
/* ============================================
Typography — 중요도 계층 + 가독성
원칙:
- h1~h6 태그에 기본값 부여 (의미=시각 일치)
- 시각 계층만 조절하려면 .h1~.h6, .display-*, .text-* 유틸 사용
- 스킨이 reset 한 영역(a 등)은 건드리지 않음 — .prose 안에서만 복원
* ============================================ */
/* Headings — 문서 중요도 계층 */
h1, .h1 {
font-size: var(--font-size-3xl); /* 30px */
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
letter-spacing: -0.02em;
color: var(--color-text);
margin: 0 0 var(--space-4);
}
h2, .h2 {
font-size: var(--font-size-2xl); /* 24px */
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
letter-spacing: -0.01em;
color: var(--color-text);
margin: 0 0 var(--space-3);
}
h3, .h3 {
font-size: var(--font-size-xl); /* 20px */
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
color: var(--color-text);
margin: 0 0 var(--space-3);
}
h4, .h4 {
font-size: var(--font-size-lg); /* 18px */
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
color: var(--color-text);
margin: 0 0 var(--space-2);
}
h5, .h5 {
font-size: var(--font-size-base); /* 16px */
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-normal);
color: var(--color-text);
margin: 0 0 var(--space-2);
}
h6, .h6 {
font-size: var(--font-size-sm); /* 14px */
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-normal);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text-muted);
margin: 0 0 var(--space-2);
}
/* Display — 랜딩/히어로용 초대형 */
.display-1 {
font-size: 4.5rem; /* 72px */
font-weight: var(--font-weight-bold);
line-height: 1.1;
letter-spacing: -0.03em;
}
.display-2 {
font-size: 3.5rem; /* 56px */
font-weight: var(--font-weight-bold);
line-height: 1.1;
letter-spacing: -0.03em;
}
.display-3 {
font-size: 2.75rem; /* 44px */
font-weight: var(--font-weight-bold);
line-height: 1.15;
letter-spacing: -0.02em;
}
/* Body / Caption / Overline */
.text-lead {
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
color: var(--color-text-muted);
}
.text-body {
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
}
.text-body-sm {
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
}
.text-caption {
font-size: var(--font-size-xs);
line-height: var(--line-height-normal);
color: var(--color-text-muted);
}
.text-overline {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
}
/* p 기본값 */
p {
margin: 0 0 var(--space-4);
line-height: var(--line-height-normal);
color: var(--color-text);
}
p:last-child {
margin-bottom: 0;
}
/* small / strong / em */
small {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
/* strong/b 는 의미상 강조/굵기 element. 색상은 부모/맥락에서 상속받도록 두고
여기서는 굵기만 명시 (UA 기본 'bolder' → 토큰 기반 weight 로 통일). */
strong, b {
font-weight: var(--font-weight-semibold);
}
/* ============================================
Color & Text Utilities
중요도별 텍스트 / 상태 색 / 배경
* ============================================ */
/* 텍스트 색 — 중요도별 */
.text-default { color: var(--color-text); }
.text-muted { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }
.text-inverse { color: var(--color-text-inverse); }
.text-link { color: var(--color-text-link); }
.text-primary { color: var(--color-primary); }
/* 텍스트 색 — 상태 */
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }
.text-info { color: var(--color-info); }
/* 배경 — 중요도별 */
.bg-default { background: var(--color-bg); }
.bg-subtle { background: var(--color-bg-subtle); }
.bg-muted { background: var(--color-bg-muted); }
.bg-inverse { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
/* Weight 유틸 */
.fw-regular { font-weight: var(--font-weight-regular); }
.fw-medium { font-weight: var(--font-weight-medium); }
.fw-semibold { font-weight: var(--font-weight-semibold); }
.fw-bold { font-weight: var(--font-weight-bold); }
/* Align 유틸 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
/* ============================================
Prose — 문서 콘텐츠 래퍼
게시판 글, 정책, FAQ, 도움말 등 사용자가 작성한 긴 글
이 래퍼 안에서만 a/blockquote/code/list 등을 풀어놓음
(전역 스킨 reset 과 충돌하지 않도록 스코프 안에만)
* ============================================ */
.prose {
max-width: 72ch;
color: var(--color-text);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
}
/* 헤딩 간격: 섹션 구분감 */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
margin-top: var(--space-8);
}
.prose > :first-child {
margin-top: 0;
}
.prose > :last-child {
margin-bottom: 0;
}
/* 리스트 */
.prose ul,
.prose ol {
margin: 0 0 var(--space-4);
padding-left: var(--space-6);
}
.prose li {
margin-bottom: var(--space-2);
}
.prose li:last-child {
margin-bottom: 0;
}
.prose li > p {
margin-bottom: var(--space-2);
}
/* 링크 */
.prose a {
color: var(--color-text-link);
text-decoration: underline;
text-underline-offset: 2px;
transition: color var(--transition-fast);
}
.prose a:hover {
color: var(--color-primary-hover);
}
/* 인용 */
.prose blockquote {
margin: 0 0 var(--space-4);
padding: var(--space-3) var(--space-4);
border-left: 3px solid var(--color-primary);
background: var(--color-bg-subtle);
color: var(--color-text-muted);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.prose blockquote > :last-child {
margin-bottom: 0;
}
/* 코드 */
.prose code {
font-family: var(--font-mono);
font-size: 0.9em;
padding: 2px 6px;
background: var(--color-bg-muted);
border-radius: var(--radius-sm);
color: var(--color-text);
}
.prose pre {
font-family: var(--font-mono);
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
padding: var(--space-4);
background: var(--color-bg-subtle);
border-radius: var(--radius-md);
overflow-x: auto;
margin: 0 0 var(--space-4);
}
.prose pre code {
padding: 0;
background: transparent;
font-size: inherit;
}
/* 구분선 */
.prose hr {
border: none;
border-top: 1px solid var(--color-border);
margin: var(--space-8) 0;
}
/* 미디어 */
.prose img,
.prose video {
max-width: 100%;
height: auto;
border-radius: var(--radius-md);
margin: var(--space-4) 0;
}
/* 표 */
.prose table {
width: 100%;
border-collapse: collapse;
margin: 0 0 var(--space-4);
font-size: var(--font-size-sm);
}
.prose th,
.prose td {
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--color-border);
text-align: left;
}
.prose th {
font-weight: var(--font-weight-semibold);
color: var(--color-text);
background: var(--color-bg-subtle);
}
/* ============================================
Pagination 변수 — basic 스킨 테마 오버라이드
(각 패키지가 `:root` 에 정의한 기본값을 basic 토큰으로 재정의)
* ============================================ */
:root {
--pagination-gap: var(--space-1);
--pagination-border-radius: var(--radius-md);
--pagination-color: var(--color-text-muted);
--pagination-hover-bg: var(--color-bg-muted);
--pagination-hover-color: var(--color-text);
--pagination-active-bg: var(--color-bg-inverse);
--pagination-active-color: var(--color-text-inverse);
--pagination-disabled-color: var(--color-text-subtle);
}
/* ============================================
Button — .btn + variants + sizes
* ============================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
line-height: 1.2;
border-radius: var(--radius-md);
border: 1px solid transparent;
background: transparent;
color: var(--color-text);
cursor: pointer;
text-decoration: none;
transition:
background-color var(--transition-fast),
color var(--transition-fast),
border-color var(--transition-fast);
white-space: nowrap;
}
.btn:disabled,
.btn.is-disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Variants */
.btn--primary {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-text-inverse);
}
.btn--primary:hover {
background: var(--color-primary-hover);
border-color: var(--color-primary-hover);
color: var(--color-text-inverse);
text-decoration: none;
}
.btn--primary:active {
background: var(--color-primary-active);
border-color: var(--color-primary-active);
}
.btn--outline {
background: var(--color-bg);
border-color: var(--color-border-strong);
color: var(--color-text);
}
.btn--outline:hover {
background: var(--color-bg-subtle);
border-color: var(--color-primary);
color: var(--color-primary);
text-decoration: none;
}
.btn--subtle {
background: var(--color-bg-muted);
color: var(--color-text);
}
.btn--subtle:hover {
background: var(--color-border);
color: var(--color-text);
text-decoration: none;
}
.btn--danger {
background: var(--color-danger);
border-color: var(--color-danger);
color: var(--color-text-inverse);
}
.btn--danger:hover {
filter: brightness(0.92);
color: var(--color-text-inverse);
text-decoration: none;
}
.btn--ghost {
background: transparent;
color: var(--color-text-muted);
}
.btn--ghost:hover {
background: var(--color-bg-subtle);
color: var(--color-text);
text-decoration: none;
}
/* Sizes */
.btn--sm {
padding: var(--space-1) var(--space-3);
font-size: var(--font-size-xs);
}
.btn--lg {
padding: var(--space-3) var(--space-5);
font-size: var(--font-size-base);
}
.btn--block {
display: flex;
width: 100%;
}
/* ============================================
Card
* ============================================ */
/* Mublo card primitive — basic 스킨 자체 카드 컴포넌트.
.card/.card-* 는 BS 의 컨벤션이라 Rental 같은 BS 사용 패키지와 충돌하므로
`.mublo-card*` 네임스페이스로 격리. 향후 framework view 가 카드 UI 가
필요할 때 사용. */
.mublo-card {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.mublo-card:hover {
box-shadow: var(--shadow-md);
border-color: var(--color-border-strong);
}
.mublo-card--flat {
box-shadow: none;
}
.mublo-card--flat:hover {
box-shadow: none;
}
.mublo-card__title {
margin: 0 0 var(--space-2);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
letter-spacing: -0.01em;
}
.mublo-card__desc {
margin: 0 0 var(--space-4);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
line-height: var(--line-height-relaxed);
}
.mublo-card__desc:last-child {
margin-bottom: 0;
}
/* ============================================
Badge
* ============================================ */
.badge {
display: inline-block;
padding: 2px var(--space-2);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-full);
background: var(--color-bg-muted);
color: var(--color-text);
line-height: 1.4;
}
.badge--success {
background: color-mix(in srgb, var(--color-success) 12%, transparent);
color: var(--color-success);
}
.badge--warning {
background: color-mix(in srgb, var(--color-warning) 15%, transparent);
color: var(--color-warning);
}
.badge--danger {
background: color-mix(in srgb, var(--color-danger) 12%, transparent);
color: var(--color-danger);
}
.badge--info {
background: color-mix(in srgb, var(--color-info) 15%, transparent);
color: var(--color-info);
}
/* ============================================
Alert
* ============================================ */
.alert {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
border-left: 4px solid;
font-size: var(--font-size-sm);
color: var(--color-text);
background: var(--color-bg);
}
.alert__title {
font-weight: var(--font-weight-semibold);
}
.alert--success {
background: color-mix(in srgb, var(--color-success) 8%, var(--color-bg));
border-left-color: var(--color-success);
}
.alert--warning {
background: color-mix(in srgb, var(--color-warning) 12%, var(--color-bg));
border-left-color: var(--color-warning);
}
.alert--danger {
background: color-mix(in srgb, var(--color-danger) 8%, var(--color-bg));
border-left-color: var(--color-danger);
}
.alert--info {
background: color-mix(in srgb, var(--color-info) 10%, var(--color-bg));
border-left-color: var(--color-info);
}
/* ============================================
Form Field
* ============================================ */
.form-field {
display: block;
margin-bottom: var(--space-4);
}
.form-field__label {
display: block;
margin-bottom: var(--space-2);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text);
}
.form-field__input,
.form-field__select,
.form-field__textarea {
display: block;
width: 100%;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
color: var(--color-text);
background: var(--color-bg);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-field__input:focus,
.form-field__select:focus,
.form-field__textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-subtle);
}
.form-field__textarea {
min-height: 80px;
resize: vertical;
}
.form-field__hint {
margin-top: var(--space-2);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.form-field__error {
margin-top: var(--space-2);
font-size: var(--font-size-xs);
color: var(--color-danger);
}
.form-field.has-error .form-field__input,
.form-field.has-error .form-field__select,
.form-field.has-error .form-field__textarea {
border-color: var(--color-danger);
}
.form-field.has-error .form-field__input:focus,
.form-field.has-error .form-field__select:focus,
.form-field.has-error .form-field__textarea:focus {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 20%, transparent);
}
/* .pagination / .page-link element 스타일은 그 컴포넌트를 쓰는 패키지(Rental/Board)가
자체 front.css 에서 소유. basic 스킨은 위 Pagination 변수만 재정의해 테마 적용. */
/* ============================================
Bootstrap-Compatible Utilities
framework view (views/Front/Auth, Member, Mypage, Search, Error, Policy 등)
가 BS 클래스명을 사용하는 동안의 호환 레이어.
basic skin 자체 보유 — 어떤 패키지가 설치되어도/없어도 framework view 가 동작.
※ 패키지(Rental 등)는 자체 BS-compat 사본을 가질 것 (패키지 독립성).
Spacing scale 매핑:
0 → 0
1 → var(--space-1) ( 4px)
2 → var(--space-2) ( 8px)
3 → var(--space-4) (16px)
4 → var(--space-6) (24px)
5 → var(--space-12) (48px)
Breakpoints: sm 576 / md 768 / lg 992 / xl 1200
* ============================================ */
/* ── Container ────────────────────────────── */
.container,
.container-fluid {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: var(--space-4);
padding-left: var(--space-4);
}
.container { max-width: var(--site-max-width); }
/* ── Grid ─────────────────────────────────── */
.row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(-1 * var(--bs-gutter-y));
margin-right: calc(-0.5 * var(--bs-gutter-x));
margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
box-sizing: border-box;
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * 0.5);
padding-left: calc(var(--bs-gutter-x) * 0.5);
margin-top: var(--bs-gutter-y);
}
/* Gutter scale */
.g-0, .gx-0 { --bs-gutter-x: 0; }
.g-0, .gy-0 { --bs-gutter-y: 0; }
.g-1, .gx-1 { --bs-gutter-x: 0.25rem; }
.g-1, .gy-1 { --bs-gutter-y: 0.25rem; }
.g-2, .gx-2 { --bs-gutter-x: 0.5rem; }
.g-2, .gy-2 { --bs-gutter-y: 0.5rem; }
.g-3, .gx-3 { --bs-gutter-x: 1rem; }
.g-3, .gy-3 { --bs-gutter-y: 1rem; }
.g-4, .gx-4 { --bs-gutter-x: 1.5rem; }
.g-4, .gy-4 { --bs-gutter-y: 1.5rem; }
.g-5, .gx-5 { --bs-gutter-x: 3rem; }
.g-5, .gy-5 { --bs-gutter-y: 3rem; }
@media (min-width: 576px) {
.g-sm-0, .gx-sm-0 { --bs-gutter-x: 0; }
.g-sm-0, .gy-sm-0 { --bs-gutter-y: 0; }
.g-sm-1, .gx-sm-1 { --bs-gutter-x: 0.25rem; }
.g-sm-1, .gy-sm-1 { --bs-gutter-y: 0.25rem; }
.g-sm-2, .gx-sm-2 { --bs-gutter-x: 0.5rem; }
.g-sm-2, .gy-sm-2 { --bs-gutter-y: 0.5rem; }
.g-sm-3, .gx-sm-3 { --bs-gutter-x: 1rem; }
.g-sm-3, .gy-sm-3 { --bs-gutter-y: 1rem; }
.g-sm-4, .gx-sm-4 { --bs-gutter-x: 1.5rem; }
.g-sm-4, .gy-sm-4 { --bs-gutter-y: 1.5rem; }
.g-sm-5, .gx-sm-5 { --bs-gutter-x: 3rem; }
.g-sm-5, .gy-sm-5 { --bs-gutter-y: 3rem; }
}
@media (min-width: 768px) {
.g-md-0, .gx-md-0 { --bs-gutter-x: 0; }
.g-md-0, .gy-md-0 { --bs-gutter-y: 0; }
.g-md-1, .gx-md-1 { --bs-gutter-x: 0.25rem; }
.g-md-1, .gy-md-1 { --bs-gutter-y: 0.25rem; }
.g-md-2, .gx-md-2 { --bs-gutter-x: 0.5rem; }
.g-md-2, .gy-md-2 { --bs-gutter-y: 0.5rem; }
.g-md-3, .gx-md-3 { --bs-gutter-x: 1rem; }
.g-md-3, .gy-md-3 { --bs-gutter-y: 1rem; }
.g-md-4, .gx-md-4 { --bs-gutter-x: 1.5rem; }
.g-md-4, .gy-md-4 { --bs-gutter-y: 1.5rem; }
.g-md-5, .gx-md-5 { --bs-gutter-x: 3rem; }
.g-md-5, .gy-md-5 { --bs-gutter-y: 3rem; }
}
@media (min-width: 992px) {
.g-lg-0, .gx-lg-0 { --bs-gutter-x: 0; }
.g-lg-0, .gy-lg-0 { --bs-gutter-y: 0; }
.g-lg-1, .gx-lg-1 { --bs-gutter-x: 0.25rem; }
.g-lg-1, .gy-lg-1 { --bs-gutter-y: 0.25rem; }
.g-lg-2, .gx-lg-2 { --bs-gutter-x: 0.5rem; }
.g-lg-2, .gy-lg-2 { --bs-gutter-y: 0.5rem; }
.g-lg-3, .gx-lg-3 { --bs-gutter-x: 1rem; }
.g-lg-3, .gy-lg-3 { --bs-gutter-y: 1rem; }
.g-lg-4, .gx-lg-4 { --bs-gutter-x: 1.5rem; }
.g-lg-4, .gy-lg-4 { --bs-gutter-y: 1.5rem; }
.g-lg-5, .gx-lg-5 { --bs-gutter-x: 3rem; }
.g-lg-5, .gy-lg-5 { --bs-gutter-y: 3rem; }
}
@media (min-width: 1200px) {
.g-xl-4, .gx-xl-4 { --bs-gutter-x: 1.5rem; }
.g-xl-4, .gy-xl-4 { --bs-gutter-y: 1.5rem; }
.g-xl-5, .gx-xl-5 { --bs-gutter-x: 3rem; }
.g-xl-5, .gy-xl-5 { --bs-gutter-y: 3rem; }
}
.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 auto; width: 8.333333%; }
.col-2 { flex: 0 0 auto; width: 16.666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.333333%; }
.col-5 { flex: 0 0 auto; width: 41.666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.333333%; }
.col-8 { flex: 0 0 auto; width: 66.666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }
@media (min-width: 576px) {
.col-sm { flex: 1 0 0%; }
.col-sm-auto { flex: 0 0 auto; width: auto; }
.col-sm-1 { flex: 0 0 auto; width: 8.333333%; }
.col-sm-2 { flex: 0 0 auto; width: 16.666667%; }
.col-sm-3 { flex: 0 0 auto; width: 25%; }
.col-sm-4 { flex: 0 0 auto; width: 33.333333%; }
.col-sm-5 { flex: 0 0 auto; width: 41.666667%; }
.col-sm-6 { flex: 0 0 auto; width: 50%; }
.col-sm-7 { flex: 0 0 auto; width: 58.333333%; }
.col-sm-8 { flex: 0 0 auto; width: 66.666667%; }
.col-sm-9 { flex: 0 0 auto; width: 75%; }
.col-sm-10 { flex: 0 0 auto; width: 83.333333%; }
.col-sm-11 { flex: 0 0 auto; width: 91.666667%; }
.col-sm-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 768px) {
.col-md { flex: 1 0 0%; }
.col-md-auto { flex: 0 0 auto; width: auto; }
.col-md-1 { flex: 0 0 auto; width: 8.333333%; }
.col-md-2 { flex: 0 0 auto; width: 16.666667%; }
.col-md-3 { flex: 0 0 auto; width: 25%; }
.col-md-4 { flex: 0 0 auto; width: 33.333333%; }
.col-md-5 { flex: 0 0 auto; width: 41.666667%; }
.col-md-6 { flex: 0 0 auto; width: 50%; }
.col-md-7 { flex: 0 0 auto; width: 58.333333%; }
.col-md-8 { flex: 0 0 auto; width: 66.666667%; }
.col-md-9 { flex: 0 0 auto; width: 75%; }
.col-md-10 { flex: 0 0 auto; width: 83.333333%; }
.col-md-11 { flex: 0 0 auto; width: 91.666667%; }
.col-md-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 992px) {
.col-lg { flex: 1 0 0%; }
.col-lg-auto { flex: 0 0 auto; width: auto; }
.col-lg-1 { flex: 0 0 auto; width: 8.333333%; }
.col-lg-2 { flex: 0 0 auto; width: 16.666667%; }
.col-lg-3 { flex: 0 0 auto; width: 25%; }
.col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
.col-lg-5 { flex: 0 0 auto; width: 41.666667%; }
.col-lg-6 { flex: 0 0 auto; width: 50%; }
.col-lg-7 { flex: 0 0 auto; width: 58.333333%; }
.col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
.col-lg-9 { flex: 0 0 auto; width: 75%; }
.col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
.col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
.col-lg-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 1200px) {
.col-xl { flex: 1 0 0%; }
.col-xl-auto { flex: 0 0 auto; width: auto; }
.col-xl-1 { flex: 0 0 auto; width: 8.333333%; }
.col-xl-2 { flex: 0 0 auto; width: 16.666667%; }
.col-xl-3 { flex: 0 0 auto; width: 25%; }
.col-xl-4 { flex: 0 0 auto; width: 33.333333%; }
.col-xl-5 { flex: 0 0 auto; width: 41.666667%; }
.col-xl-6 { flex: 0 0 auto; width: 50%; }
.col-xl-7 { flex: 0 0 auto; width: 58.333333%; }
.col-xl-8 { flex: 0 0 auto; width: 66.666667%; }
.col-xl-9 { flex: 0 0 auto; width: 75%; }
.col-xl-10 { flex: 0 0 auto; width: 83.333333%; }
.col-xl-11 { flex: 0 0 auto; width: 91.666667%; }
.col-xl-12 { flex: 0 0 auto; width: 100%; }
}
/* row-cols-N — 한 행에 N 개씩 자동 배치
BS 공식 순서: .col / .col-* 뒤에 선언되어야 덮어쓰기 가능 (cascade 순서 의존) */
.row-cols-auto > * { flex: 0 0 auto; width: auto; }
.row-cols-1 > * { flex: 0 0 auto; width: 100%; }
.row-cols-2 > * { flex: 0 0 auto; width: 50%; }
.row-cols-3 > * { flex: 0 0 auto; width: 33.333333%; }
.row-cols-4 > * { flex: 0 0 auto; width: 25%; }
.row-cols-5 > * { flex: 0 0 auto; width: 20%; }
.row-cols-6 > * { flex: 0 0 auto; width: 16.666667%; }
@media (min-width: 576px) {
.row-cols-sm-auto > * { flex: 0 0 auto; width: auto; }
.row-cols-sm-1 > * { flex: 0 0 auto; width: 100%; }
.row-cols-sm-2 > * { flex: 0 0 auto; width: 50%; }
.row-cols-sm-3 > * { flex: 0 0 auto; width: 33.333333%; }
.row-cols-sm-4 > * { flex: 0 0 auto; width: 25%; }
.row-cols-sm-5 > * { flex: 0 0 auto; width: 20%; }
.row-cols-sm-6 > * { flex: 0 0 auto; width: 16.666667%; }
}
@media (min-width: 768px) {
.row-cols-md-auto > * { flex: 0 0 auto; width: auto; }
.row-cols-md-1 > * { flex: 0 0 auto; width: 100%; }
.row-cols-md-2 > * { flex: 0 0 auto; width: 50%; }
.row-cols-md-3 > * { flex: 0 0 auto; width: 33.333333%; }
.row-cols-md-4 > * { flex: 0 0 auto; width: 25%; }
.row-cols-md-5 > * { flex: 0 0 auto; width: 20%; }
.row-cols-md-6 > * { flex: 0 0 auto; width: 16.666667%; }
}
@media (min-width: 992px) {
.row-cols-lg-auto > * { flex: 0 0 auto; width: auto; }
.row-cols-lg-1 > * { flex: 0 0 auto; width: 100%; }
.row-cols-lg-2 > * { flex: 0 0 auto; width: 50%; }
.row-cols-lg-3 > * { flex: 0 0 auto; width: 33.333333%; }
.row-cols-lg-4 > * { flex: 0 0 auto; width: 25%; }
.row-cols-lg-5 > * { flex: 0 0 auto; width: 20%; }
.row-cols-lg-6 > * { flex: 0 0 auto; width: 16.666667%; }
}
@media (min-width: 1200px) {
.row-cols-xl-auto > * { flex: 0 0 auto; width: auto; }
.row-cols-xl-1 > * { flex: 0 0 auto; width: 100%; }
.row-cols-xl-2 > * { flex: 0 0 auto; width: 50%; }
.row-cols-xl-3 > * { flex: 0 0 auto; width: 33.333333%; }
.row-cols-xl-4 > * { flex: 0 0 auto; width: 25%; }
.row-cols-xl-5 > * { flex: 0 0 auto; width: 20%; }
.row-cols-xl-6 > * { flex: 0 0 auto; width: 16.666667%; }
}
/* ── Spacing (m/p × t/b/s/e/x/y × 0-5) ─────── */
.m-0 { margin: 0 !important; }
.m-1 { margin: var(--space-1) !important; }
.m-2 { margin: var(--space-2) !important; }
.m-3 { margin: var(--space-4) !important; }
.m-4 { margin: var(--space-6) !important; }
.m-5 { margin: var(--space-12) !important; }
.m-auto { margin: auto !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-4) !important; }
.mt-4 { margin-top: var(--space-6) !important; }
.mt-5 { margin-top: var(--space-12) !important; }
.mt-auto { margin-top: auto !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-4) !important; }
.mb-4 { margin-bottom: var(--space-6) !important; }
.mb-5 { margin-bottom: var(--space-12) !important; }
.mb-auto { margin-bottom: auto !important; }
.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: var(--space-1) !important; }
.ms-2 { margin-left: var(--space-2) !important; }
.ms-3 { margin-left: var(--space-4) !important; }
.ms-4 { margin-left: var(--space-6) !important; }
.ms-5 { margin-left: var(--space-12) !important; }
.ms-auto { margin-left: auto !important; }
.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: var(--space-1) !important; }
.me-2 { margin-right: var(--space-2) !important; }
.me-3 { margin-right: var(--space-4) !important; }
.me-4 { margin-right: var(--space-6) !important; }
.me-5 { margin-right: var(--space-12) !important; }
.me-auto { margin-right: auto !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
.mx-2 { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
.mx-3 { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
.mx-4 { margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
.mx-5 { margin-left: var(--space-12) !important; margin-right: var(--space-12) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
.my-2 { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
.my-3 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
.my-4 { margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }
.my-5 { margin-top: var(--space-12) !important; margin-bottom: var(--space-12) !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
.p-0 { padding: 0 !important; }
.p-1 { padding: var(--space-1) !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-4) !important; }
.p-4 { padding: var(--space-6) !important; }
.p-5 { padding: var(--space-12) !important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--space-1) !important; }
.pt-2 { padding-top: var(--space-2) !important; }
.pt-3 { padding-top: var(--space-4) !important; }
.pt-4 { padding-top: var(--space-6) !important; }
.pt-5 { padding-top: var(--space-12) !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: var(--space-1) !important; }
.pb-2 { padding-bottom: var(--space-2) !important; }
.pb-3 { padding-bottom: var(--space-4) !important; }
.pb-4 { padding-bottom: var(--space-6) !important; }
.pb-5 { padding-bottom: var(--space-12) !important; }
.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: var(--space-1) !important; }
.ps-2 { padding-left: var(--space-2) !important; }
.ps-3 { padding-left: var(--space-4) !important; }
.ps-4 { padding-left: var(--space-6) !important; }
.ps-5 { padding-left: var(--space-12) !important; }
.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: var(--space-1) !important; }
.pe-2 { padding-right: var(--space-2) !important; }
.pe-3 { padding-right: var(--space-4) !important; }
.pe-4 { padding-right: var(--space-6) !important; }
.pe-5 { padding-right: var(--space-12) !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
.px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px-3 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.px-4 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
.px-5 { padding-left: var(--space-12) !important; padding-right: var(--space-12) !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-3 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-4 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
.py-5 { padding-top: var(--space-12) !important; padding-bottom: var(--space-12) !important; }
/* ── Gap ──────────────────────────────────── */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-4) !important; }
.gap-4 { gap: var(--space-6) !important; }
.gap-5 { gap: var(--space-12) !important; }
/* ── Display ──────────────────────────────── */
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-grid { display: grid !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
@media (min-width: 576px) {
.d-sm-none { display: none !important; }
.d-sm-inline { display: inline !important; }
.d-sm-inline-block { display: inline-block !important; }
.d-sm-block { display: block !important; }
.d-sm-flex { display: flex !important; }
.d-sm-inline-flex { display: inline-flex !important; }
.d-sm-grid { display: grid !important; }
}
@media (min-width: 768px) {
.d-md-none { display: none !important; }
.d-md-inline { display: inline !important; }
.d-md-inline-block { display: inline-block !important; }
.d-md-block { display: block !important; }
.d-md-flex { display: flex !important; }
.d-md-inline-flex { display: inline-flex !important; }
.d-md-grid { display: grid !important; }
}
@media (min-width: 992px) {
.d-lg-none { display: none !important; }
.d-lg-inline { display: inline !important; }
.d-lg-inline-block { display: inline-block !important; }
.d-lg-block { display: block !important; }
.d-lg-flex { display: flex !important; }
.d-lg-inline-flex { display: inline-flex !important; }
.d-lg-grid { display: grid !important; }
}
/* ── Flex ─────────────────────────────────── */
.flex-row { flex-direction: row !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column { flex-direction: column !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }
.flex-fill { flex: 1 1 auto !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.justify-content-evenly { justify-content: space-evenly !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }
.align-self-start { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }
.align-self-center { align-self: center !important; }
.align-self-baseline { align-self: baseline !important; }
.align-self-stretch { align-self: stretch !important; }
.align-content-start { align-content: flex-start !important; }
.align-content-end { align-content: flex-end !important; }
.align-content-center { align-content: center !important; }
.align-content-between { align-content: space-between !important; }
.align-content-around { align-content: space-around !important; }
.align-content-stretch { align-content: stretch !important; }
/* ── Position ─────────────────────────────── */
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }
.top-0 { top: 0 !important; }
.bottom-0 { bottom: 0 !important; }
.start-0 { left: 0 !important; }
.end-0 { right: 0 !important; }
/* ── Sizing ───────────────────────────────── */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }
.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }
.vh-100 { height: 100vh !important; }
.vw-100 { width: 100vw !important; }
/* ── Text ─────────────────────────────────── */
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
/* .text-center 는 위 Typography 섹션에 이미 정의됨 */
.text-nowrap { white-space: nowrap !important; }
.text-wrap { white-space: normal !important; }
.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
.text-white { color: #fff !important; }
.text-black { color: #000 !important; }
/* .text-muted / .text-primary / .text-success / .text-warning / .text-danger / .text-info 는
위 Color Utilities 섹션에 이미 정의됨 */
.fs-1 { font-size: var(--font-size-4xl) !important; }
.fs-2 { font-size: var(--font-size-3xl) !important; }
.fs-3 { font-size: var(--font-size-2xl) !important; }
.fs-4 { font-size: var(--font-size-xl) !important; }
.fs-5 { font-size: var(--font-size-lg) !important; }
.fs-6 { font-size: var(--font-size-base) !important; }
.fw-light { font-weight: 300 !important; }
.fw-normal { font-weight: var(--font-weight-regular) !important; }
.fw-medium { font-weight: var(--font-weight-medium) !important; }
.fw-semibold { font-weight: var(--font-weight-semibold) !important; }
.fw-bold { font-weight: var(--font-weight-bold) !important; }
.lh-1 { line-height: 1 !important; }
.lh-sm { line-height: var(--line-height-tight) !important; }
.lh-base { line-height: var(--line-height-normal) !important; }
.lh-lg { line-height: var(--line-height-relaxed) !important; }
.font-monospace { font-family: var(--font-mono) !important; }
/* ── Border ───────────────────────────────── */
.border { border: 1px solid var(--color-border) !important; }
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid var(--color-border) !important; }
.border-top-0 { border-top: 0 !important; }
.border-bottom { border-bottom: 1px solid var(--color-border) !important; }
.border-bottom-0 { border-bottom: 0 !important; }
.border-start { border-left: 1px solid var(--color-border) !important; }
.border-start-0 { border-left: 0 !important; }
.border-end { border-right: 1px solid var(--color-border) !important; }
.border-end-0 { border-right: 0 !important; }
.border-primary { border-color: var(--color-primary) !important; }
.border-success { border-color: var(--color-success) !important; }
.border-warning { border-color: var(--color-warning) !important; }
.border-danger { border-color: var(--color-danger) !important; }
.border-info { border-color: var(--color-info) !important; }
.rounded { border-radius: var(--radius-md) !important; }
.rounded-0 { border-radius: 0 !important; }
.rounded-1 { border-radius: var(--radius-sm) !important; }
.rounded-2 { border-radius: var(--radius-md) !important; }
.rounded-3 { border-radius: var(--radius-lg) !important; }
.rounded-4 { border-radius: var(--radius-xl) !important; }
.rounded-pill { border-radius: var(--radius-full) !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-top { border-top-left-radius: var(--radius-md) !important; border-top-right-radius: var(--radius-md) !important; }
.rounded-bottom { border-bottom-left-radius: var(--radius-md) !important; border-bottom-right-radius: var(--radius-md) !important; }
/* ── Background ───────────────────────────── */
.bg-white { background-color: var(--color-bg) !important; }
.bg-light { background-color: var(--color-bg-subtle) !important; }
.bg-body { background-color: var(--color-bg) !important; }
.bg-dark { background-color: var(--color-bg-inverse) !important; color: var(--color-text-inverse); }
.bg-primary { background-color: var(--color-primary) !important; color: var(--color-text-inverse); }
.bg-success { background-color: var(--color-success) !important; color: var(--color-text-inverse); }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-danger { background-color: var(--color-danger) !important; color: var(--color-text-inverse); }
.bg-info { background-color: var(--color-info) !important; color: var(--color-text-inverse); }
.bg-transparent { background-color: transparent !important; }
/* ── Overflow ─────────────────────────────── */
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }
/* ── Ratio (aspect-ratio 컨테이너) ──────────
BS 의 .ratio 유틸. JS 로 삽입되는 마크업이 .ratio.ratio-1x1 을 쓰기 때문에
Swiper·Modal·갤러리 등의 이미지 컨테이너 aspect-ratio 유지에 필요. */
.ratio {
position: relative;
width: 100%;
}
.ratio::before {
display: block;
padding-top: var(--bs-aspect-ratio);
content: "";
}
.ratio > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ratio-1x1 { --bs-aspect-ratio: 100%; }
.ratio-4x3 { --bs-aspect-ratio: calc(3 / 4 * 100%); }
.ratio-16x9 { --bs-aspect-ratio: calc(9 / 16 * 100%); }
.ratio-21x9 { --bs-aspect-ratio: calc(9 / 21 * 100%); }
/* ── Object-fit ─────────────────────────── */
.object-fit-contain { object-fit: contain !important; }
.object-fit-cover { object-fit: cover !important; }
.object-fit-fill { object-fit: fill !important; }
.object-fit-scale { object-fit: scale-down !important; }
.object-fit-none { object-fit: none !important; }
/* ── Shadow ───────────────────────────────── */
.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
/* ── Cursor ───────────────────────────────── */
.cursor-pointer { cursor: pointer !important; }
/* ============================================
Bootstrap-Compatible Components
framework view 가 BS 클래스명을 사용하는 동안의 호환 레이어.
basic skin 자체 보유 — 패키지 의존 없이 동작.
※ 패키지(Rental 등)는 자체 BS-compat 사본을 가질 것.
* ============================================ */
/* ── BS Button variants ────────────────────
기본 .btn 레이아웃은 Typography/Component 섹션의 .btn 정의 재활용.
여기서는 BS-스타일 색상 변형(.btn-primary/.btn-outline-primary 등)만 추가.
*/
.btn-primary {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-text-inverse);
}
.btn-primary:hover {
background: var(--color-primary-hover);
border-color: var(--color-primary-hover);
color: var(--color-text-inverse);
}
.btn-secondary {
background: var(--color-zinc-600);
border-color: var(--color-zinc-600);
color: var(--color-text-inverse);
}
.btn-secondary:hover {
background: var(--color-zinc-700);
border-color: var(--color-zinc-700);
color: var(--color-text-inverse);
}
.btn-success {
background: var(--color-success);
border-color: var(--color-success);
color: var(--color-text-inverse);
}
.btn-success:hover { filter: brightness(0.92); color: var(--color-text-inverse); }
.btn-warning {
background: var(--color-warning);
border-color: var(--color-warning);
color: var(--color-text);
}
.btn-warning:hover { filter: brightness(0.92); }
.btn-danger {
background: var(--color-danger);
border-color: var(--color-danger);
color: var(--color-text-inverse);
}
.btn-danger:hover { filter: brightness(0.92); color: var(--color-text-inverse); }
.btn-info {
background: var(--color-info);
border-color: var(--color-info);
color: var(--color-text-inverse);
}
.btn-info:hover { filter: brightness(0.92); color: var(--color-text-inverse); }
.btn-light {
background: var(--color-bg-subtle);
border-color: var(--color-border);
color: var(--color-text);
}
.btn-light:hover { background: var(--color-bg-muted); }
.btn-dark {
background: var(--color-bg-inverse);
border-color: var(--color-bg-inverse);
color: var(--color-text-inverse);
}
.btn-dark:hover {
background: var(--color-zinc-800);
border-color: var(--color-zinc-800);
color: var(--color-text-inverse);
}
.btn-link {
background: transparent;
border-color: transparent;
color: var(--color-text-link);
text-decoration: underline;
}
.btn-link:hover { color: var(--color-primary-hover); }
.btn-outline-primary {
background: transparent;
border-color: var(--color-primary);
color: var(--color-primary);
}
.btn-outline-primary:hover {
background: var(--color-primary);
color: var(--color-text-inverse);
}
.btn-outline-secondary {
background: transparent;
border-color: var(--color-zinc-500);
color: var(--color-zinc-700);
}
.btn-outline-secondary:hover {
background: var(--color-zinc-600);
color: var(--color-text-inverse);
}
.btn-outline-success {
background: transparent;
border-color: var(--color-success);
color: var(--color-success);
}
.btn-outline-success:hover { background: var(--color-success); color: var(--color-text-inverse); }
.btn-outline-warning {
background: transparent;
border-color: var(--color-warning);
color: var(--color-warning);
}
.btn-outline-warning:hover { background: var(--color-warning); color: var(--color-text); }
.btn-outline-danger {
background: transparent;
border-color: var(--color-danger);
color: var(--color-danger);
}
.btn-outline-danger:hover { background: var(--color-danger); color: var(--color-text-inverse); }
.btn-outline-info {
background: transparent;
border-color: var(--color-info);
color: var(--color-info);
}
.btn-outline-info:hover { background: var(--color-info); color: var(--color-text-inverse); }
.btn-outline-light {
background: transparent;
border-color: var(--color-border-strong);
color: var(--color-text);
}
.btn-outline-light:hover { background: var(--color-bg-subtle); }
.btn-outline-dark {
background: transparent;
border-color: var(--color-zinc-900);
color: var(--color-zinc-900);
}
.btn-outline-dark:hover { background: var(--color-zinc-900); color: var(--color-text-inverse); }
.btn-sm {
padding: var(--space-1) var(--space-3);
font-size: var(--font-size-xs);
}
.btn-lg {
padding: var(--space-3) var(--space-5);
font-size: var(--font-size-base);
}
/* ── btn-check ─────────────────────────────
radio/checkbox 을 시각적으로 숨기고 label 을 버튼으로 쓰는 BS 패턴.
*/
.btn-check {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;
}
.btn-check[disabled] + .btn,
.btn-check:disabled + .btn {
pointer-events: none;
filter: none;
opacity: 0.65;
}
.btn-check:focus-visible + .btn {
box-shadow: 0 0 0 3px var(--color-primary-subtle);
}
/* ── BS Form ─────────────────────────────── */
.form-control,
.form-select {
display: block;
width: 100%;
padding: var(--space-2) var(--space-3);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
color: var(--color-text);
background-color: var(--color-bg);
background-clip: padding-box;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2352525b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right var(--space-3) center;
background-size: 16px 12px;
padding-right: var(--space-8);
appearance: none;
}
.form-control:focus,
.form-select:focus {
outline: 0;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-subtle);
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
background-color: var(--color-bg-muted);
color: var(--color-text-muted);
cursor: not-allowed;
}
.form-control::placeholder { color: var(--color-text-subtle); }
.form-control-sm { padding: var(--space-1) var(--space-2); font-size: var(--font-size-xs); }
.form-control-lg { padding: var(--space-3) var(--space-4); font-size: var(--font-size-base); }
.form-label {
display: inline-block;
margin-bottom: var(--space-2);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text);
}
.form-text {
margin-top: var(--space-1);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
/* (.form-check / .form-check-input / .form-check-label / .form-switch 정의 제거 —
framework view 는 사용처 없음. BS 컨벤션 클래스라 BS 사용 패키지(Rental 등) 의
.form-check 마크업과 충돌만 유발. ) */
.form-range {
width: 100%;
height: 1.5rem;
padding: 0;
background-color: transparent;
appearance: none;
}
.form-range::-webkit-slider-runnable-track {
width: 100%;
height: 0.5rem;
background: var(--color-bg-muted);
border-radius: var(--radius-full);
}
.form-range::-webkit-slider-thumb {
margin-top: -0.25rem;
width: 1rem;
height: 1rem;
background: var(--color-primary);
border: 0;
border-radius: 50%;
appearance: none;
}
.form-range::-moz-range-track {
width: 100%;
height: 0.5rem;
background: var(--color-bg-muted);
border-radius: var(--radius-full);
}
.form-range::-moz-range-thumb {
width: 1rem;
height: 1rem;
background: var(--color-primary);
border: 0;
border-radius: 50%;
}
.input-group {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: stretch;
width: 100%;
}
.input-group > .form-control,
.input-group > .form-select {
position: relative;
flex: 1 1 auto;
width: 1%;
min-width: 0;
}
.input-group > :not(:first-child) {
margin-left: -1px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group-text {
display: flex;
align-items: center;
padding: var(--space-2) var(--space-3);
font-size: var(--font-size-sm);
color: var(--color-text);
background-color: var(--color-bg-muted);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
white-space: nowrap;
}
/* (BS Card extensions 제거 — basic 스킨은 Mublo card primitive 인 .mublo-card 만
보유. .card/.card-* 는 BS 컨벤션이라 BS 사용 패키지(Rental 등) 와 충돌하므로
여기서 정의하지 않는다. framework view 도 .card 를 사용하지 않음. ) */
/* (.alert-primary / .alert-secondary / .alert-light / .alert-dark 정의 제거 —
framework view 의 .alert-danger 등은 각 view 가 자체 스코프 (.auth-*-wrapper
.alert-danger / .member-*-wrapper .alert-danger / .mypage-profile .alert-danger)
로 정의. BS 컨벤션 .alert-* 클래스는 BS 사용 패키지의 .alert 마크업과 충돌.
Mublo BEM .alert (위 line 523+) 의 .alert--success/.alert--danger 가 자체
상태 표현 담당. ) */
/* (.accordion / .accordion-item / .accordion-header / .accordion-button /
.accordion-body / .accordion-button::after / focus shadow 정의 제거 —
framework view 는 사용처 없음. BS 컨벤션 클래스라 BS 사용 패키지의
.accordion 마크업과 충돌 (보더/그림자/패딩/펴짐 화살표 중첩). ) */
/* ── BS Table ────────────────────────────── */
.table {
width: 100%;
margin-bottom: var(--space-4);
color: var(--color-text);
vertical-align: top;
border-color: var(--color-border);
caption-side: bottom;
border-collapse: collapse;
}
.table > :not(caption) > * > * {
padding: var(--space-2) var(--space-3);
background-color: transparent;
border-bottom: 1px solid var(--color-border);
}
.table > tbody { vertical-align: inherit; }
.table > thead {
vertical-align: bottom;
background-color: var(--color-bg-subtle);
}
.table > thead th { font-weight: var(--font-weight-semibold); }
.table-bordered > :not(caption) > * { border-width: 1px 0; }
.table-bordered > :not(caption) > * > * { border-width: 0 1px; }
.table-borderless > :not(caption) > * > * { border-bottom-width: 0; }
.table-striped > tbody > tr:nth-of-type(odd) > * {
background-color: var(--color-bg-subtle);
}
.table-hover > tbody > tr:hover > * {
background-color: var(--color-bg-muted);
}
.table-sm > :not(caption) > * > * {
padding: var(--space-1) var(--space-2);
}
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* (.list-group* / .dropdown* / .nav / .nav-link / .nav-tabs* / .nav-pills* /
.tab-content > .tab-pane / .tab-content > .active 정의 제거 —
framework view 는 사용처 없음. BS 컨벤션 클래스라 BS 사용 패키지의 마크업과
충돌만 유발 (Rental Goods/View 의 BS Tab/Dropdown 마크업 등). ) */
/* (.modal / .modal-* / .btn-close / .modal-fullscreen 정의 제거 —
framework view 는 사용처 없음. BS 컨벤션 클래스라 BS 사용 패키지의
modal 마크업 (Goods/View 의 modal, MubloModal.js 사용처 등) 과 충돌. ) */
/* ── BS Collapse ─────────────────────────── */
.collapse:not(.show) { display: none; }
.collapsing {
height: 0;
overflow: hidden;
transition: height var(--transition-base);
}
/* ── BS Tooltip / Popover (minimal) ──────── */
.tooltip {
position: absolute;
z-index: var(--z-popover);
display: block;
margin: 0;
font-family: var(--font-sans);
font-size: var(--font-size-xs);
word-wrap: break-word;
opacity: 0;
}
.tooltip.show { opacity: 0.9; }
.tooltip-inner {
max-width: 200px;
padding: var(--space-1) var(--space-2);
color: var(--color-text-inverse);
text-align: center;
background-color: var(--color-bg-inverse);
border-radius: var(--radius-sm);
}
.popover {
position: absolute;
z-index: var(--z-popover);
max-width: 276px;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
background-color: var(--color-bg);
background-clip: padding-box;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
}
.popover-header {
padding: var(--space-2) var(--space-3);
background-color: var(--color-bg-subtle);
border-bottom: 1px solid var(--color-border);
border-top-left-radius: var(--radius-md);
border-top-right-radius: var(--radius-md);
font-weight: var(--font-weight-semibold);
}
.popover-body {
padding: var(--space-3);
color: var(--color-text);
}
/* ── BS Progress ─────────────────────────── */
.progress {
display: flex;
height: 1rem;
overflow: hidden;
font-size: var(--font-size-xs);
background-color: var(--color-bg-muted);
border-radius: var(--radius-md);
}
.progress-bar {
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
color: var(--color-text-inverse);
text-align: center;
white-space: nowrap;
background-color: var(--color-primary);
transition: width var(--transition-slow);
}
.progress-bar-striped {
background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
background-size: 1rem 1rem;
}
/* ── BS Breadcrumb ───────────────────────── */
.breadcrumb {
display: flex;
flex-wrap: wrap;
padding: 0;
margin-bottom: var(--space-4);
list-style: none;
font-size: var(--font-size-sm);
}
.breadcrumb-item + .breadcrumb-item {
padding-left: var(--space-2);
}
.breadcrumb-item + .breadcrumb-item::before {
content: '/';
float: left;
padding-right: var(--space-2);
color: var(--color-text-subtle);
}
.breadcrumb-item.active { color: var(--color-text-muted); }
.breadcrumb-item a {
color: var(--color-text-muted);
text-decoration: none;
}
.breadcrumb-item a:hover { color: var(--color-primary); }
/* ── BS Close ────────────────────────────── */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }
/* ── Accessibility ───────────────────────── */
/* 시각적으로만 숨김 (스크린리더 보존) — a11y 표준 헬퍼 */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}