@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 변수만 재정의해 테마 적용. */

/**
 * Mublo Front High-end Skin - CSS
 * 기존 레이아웃 시스템 스타일 통합 버전
 */

/* ========================================
   Skin Scope — basic 스킨 토큰 오버라이드
   body[data-skin="basic"] 안에서만 적용 → 스킨 캡슐화
   (tokens.css 의 기본값을 이 스킨 전용으로 재정의)
   ======================================== */
[data-skin="basic"] {
    color-scheme: light;

    /* 스킨 고유: 하이엔드 감성을 위한 Pure Black 텍스트 (tokens 기본: zinc-900) */
    --color-text: #000000;
    --color-text-muted: #64748b;           /* slate-500 (tokens 기본: zinc-500) */

    /* 스킨 고유: 더 연하고 세련된 보더 (tokens 기본: zinc-200) */
    --color-border: #f0f0f0;

    /* tokens.css 에 없는 스킨 전용 변수 */
    --color-secondary: #64748b;
    --color-bg-secondary: #f8fafc;

    /* 전체 너비 레이아웃 (tokens 기본: 1280px) */
    --site-max-width: none;
    --content-max-width: var(--site-max-width);
}

/* ========================================
   Reset & Base
   ======================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Plus Jakarta Sans', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease;
}

img {
    max-width: 100%;
    height: auto;
}

/* ========================================
   Layout
   ======================================== */
.mublo-container {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

.mublo-content {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

.mublo-content--wide {
    max-width: none;
    padding: 0;
}

/* .mublo-content 가 이미 좌우 padding 을 제공하므로
   안에 중첩된 컨테이너 클래스는 padding 을 무력화 → 이중 패딩 방지.
   (헤더/푸터의 standalone .mublo-container 는 영향 없음 — .mublo-content 안이 아니라서.) */
.mublo-content .mublo-container,
.mublo-content > .container,
.mublo-content > .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.mublo-main {
    flex: 1;
    position: relative;
}

.mublo-layout {
    display: flex;
    gap: 2rem;
}

.mublo-layout__content {
    flex: 1;
    min-width: 0;
}

.mublo-layout__sidebar--left {
    width: var(--sidebar-left-width);
    flex-shrink: 0;
}

.mublo-layout__sidebar--right {
    width: var(--sidebar-right-width);
    flex-shrink: 0;
}

/* ========================================
   Header — 2행 구조
     Row 1: 로고 | 검색(중앙) | 유틸리티 (균등 3분할 grid)
     Row 2: GNB 메뉴 (1행 전체, 좌측 정렬)
   ======================================== */
.mublo-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Row 1 — 로고 · 검색 · 유틸리티 균등 3분할 */
.mublo-header__top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
}

/* 로고 (좌) */
.mublo-header__logo {
    justify-self: start;
    min-width: 0;
}
.mublo-header__logo .logo-link {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.03em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}
.mublo-header__logo .logo-img {
    max-height: 40px;
    width: auto;
    display: block;
}
.mublo-header__logo .logo-pc { display: block; }
.mublo-header__logo .logo-mobile { display: none; }

.logo-text--dot {
    color: var(--color-primary);
    margin-left: 2px;
}

/* 검색 (중앙) */
.mublo-header__search {
    justify-self: center;
    width: 100%;
    max-width: 420px;
}
.header-search-form {
    display: flex;
    align-items: center;
    width: 100%;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg);
    transition: border-color var(--transition-fast);
}
.header-search-form:focus-within {
    border-color: var(--color-primary-hover);
}
.header-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    outline: none;
    color: var(--color-text);
}
.header-search-input::placeholder {
    color: var(--color-text-subtle);
}
.header-search-btn {
    border: none;
    background: transparent;
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    transition: color var(--transition-fast);
}
.header-search-btn:hover {
    color: var(--color-primary-hover);
}
.header-search-btn svg {
    width: 18px;
    height: 18px;
}

/* 유틸리티 메뉴 (우) — 아이콘 위, 라벨 아래 세로 스택 */
.mublo-header__utility {
    justify-self: end;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--space-3);
    align-items: center;
}
.mublo-header__utility li a {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    white-space: nowrap;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
    min-width: 48px;
}
.mublo-header__utility li a:hover {
    color: var(--color-text);
    text-decoration: none;
}
.mublo-header__utility li a i {
    font-size: 1.5rem;
    line-height: 1;
}

/* 관리자 항목 — 유틸리티 스타일 유지하되 강조 (굵게 + primary) */
.mublo-header__utility li.mublo-header__utility-admin a {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}
.mublo-header__utility li.mublo-header__utility-admin a:hover {
    color: var(--color-primary-hover);
}

/* Row 2 wrap — 전체 화면 너비 구분선 */
.mublo-header__nav-wrap {
    border-top: 1px solid var(--color-border);
}

/* Row 2 GNB (전체 너비, 좌측 정렬) */
.mublo-header__nav {
    padding: 0;
}
.mublo-header__nav .mublo-menu__list--depth-1 {
    display: flex;
    list-style: none;
    justify-content: flex-start;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
}

/* 모바일 토글 (Row 1 우측, PC 에선 숨김) */
.mublo-header__toggle {
    display: none;
    justify-self: end;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.mublo-header__toggle .line {
    width: 22px;
    height: 2px;
    background: var(--color-text);
    border-radius: 1px;
}

/* ========================================
   모바일 패널 (Offcanvas)
   ======================================== */
.mublo-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    background: var(--color-bg, #fff);
    z-index: 2000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.mublo-panel.is-open {
    transform: translateX(0);
}
.mublo-panel__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1999;
}
.mublo-panel__backdrop.is-open {
    display: block;
}
.mublo-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}
.mublo-panel__title {
    font-size: 1.1rem;
    font-weight: 700;
}
.mublo-panel__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text);
    padding: 0;
}
.mublo-panel__body {
    padding: 1rem 1.25rem;
}

/* 패널 검색 */
.mublo-panel__search {
    margin-bottom: 1.25rem;
}
.panel-search-form {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-bg-secondary, #f5f5f5);
}
.panel-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    outline: none;
    color: var(--color-text);
}
.panel-search-btn {
    border: none;
    background: transparent;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
}

/* 패널 GNB (세로) */
.mublo-panel__nav {
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
}
.mublo-panel__nav .mublo-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mublo-panel__nav .mublo-menu__list--depth-1 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
.mublo-panel__nav .mublo-menu__link {
    display: block;
    text-decoration: none;
    transition: color 0.15s, background-color 0.15s;
}
.mublo-panel__nav .mublo-menu__link--depth-1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    border-radius: 0.375rem;
}
.mublo-panel__nav .mublo-menu__link--depth-1:hover {
    background: var(--color-bg-secondary, #f5f5f5);
    color: var(--color-primary);
}
.mublo-panel__nav .mublo-menu__item--active > .mublo-menu__link--depth-1 {
    color: var(--color-primary);
    background: var(--color-bg-secondary, #f5f5f5);
}
/* 패널: 하위메뉴 화살표 → 아래 방향, 우측 중앙 */
.mublo-panel__nav .mublo-menu__item--has-children > .mublo-menu__link--depth-1::after {
    content: '';
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    border-right: 1.5px solid var(--color-text-muted);
    border-bottom: 1.5px solid var(--color-text-muted);
    transform: rotate(45deg);
    margin-top: -0.125rem;
    flex-shrink: 0;
}
.mublo-panel__nav .mublo-menu__list--depth-2 {
    position: static;
    display: block;
    box-shadow: none;
    border: none;
    background: none;
    padding: 0 0 0.25rem 1rem;
    min-width: auto;
}
.mublo-panel__nav .mublo-menu__link--depth-2 {
    font-size: 0.875rem;
    font-weight: 400;
    padding: 0.4rem 0.75rem;
    color: var(--color-text-muted);
    border-radius: 0.25rem;
}
.mublo-panel__nav .mublo-menu__link--depth-2:hover {
    color: var(--color-primary);
    background: var(--color-bg-secondary, #f5f5f5);
}
.mublo-panel__nav .mublo-menu__item--active > .mublo-menu__link--depth-2 {
    color: var(--color-primary);
}
.mublo-panel__nav .mublo-menu__list--depth-3 {
    position: static;
    display: block;
    box-shadow: none;
    border: none;
    background: none;
    padding: 0 0 0 1.5rem;
    min-width: auto;
}
.mublo-panel__nav .mublo-menu__link--depth-3 {
    font-size: 0.8125rem;
    padding: 0.35rem 0.75rem;
    color: var(--color-text-muted);
}
.mublo-panel__nav .mublo-menu__link--depth-3:hover {
    color: var(--color-primary);
}

/* 패널 유틸리티 */
.mublo-panel__utility {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.mublo-panel__utility-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    border-radius: 0.375rem;
    transition: color 0.15s, background-color 0.15s;
}
.mublo-panel__utility-link:hover {
    color: var(--color-primary);
    background: var(--color-bg-secondary, #f5f5f5);
}
.mublo-panel__utility-link i {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}
.mublo-panel__utility-link--admin {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}
.mublo-panel__utility-link--admin:hover {
    color: var(--color-primary-hover);
}



/* ========================================
   Mublo Menu (Header Nav)
   ======================================== */
.mublo-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Depth 1: 가로 배열 */
.mublo-menu__list--depth-1 {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.mublo-menu__link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s, background-color 0.15s;
}

.mublo-menu__link:hover {
    text-decoration: none;
}

/* Depth 1 링크 — active 시 primary 색 + 2px primary underline */
.mublo-menu__link--depth-1 {
    position: relative;
    padding: var(--space-3) var(--space-2);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    border-radius: 0;
    transition: color var(--transition-fast);
}

/* item hover 기반 — 커서가 2depth 에 있어도 1depth 색/밑줄 유지 */
.mublo-menu__item--depth-1:hover > .mublo-menu__link--depth-1,
.mublo-menu__item--active > .mublo-menu__link--depth-1,
.mublo-menu__item--ancestor > .mublo-menu__link--depth-1 {
    color: var(--color-primary);
    background-color: transparent;
    text-decoration: none;
}

/* Underline — 기본은 접혀있고(scaleX 0), hover/active 시 왼→오른쪽으로 펼쳐짐 */
.mublo-menu__link--depth-1::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition-base);
}
.mublo-menu__item--depth-1:hover > .mublo-menu__link--depth-1::before,
.mublo-menu__item--active > .mublo-menu__link--depth-1::before,
.mublo-menu__item--ancestor > .mublo-menu__link--depth-1::before {
    transform: scaleX(1);
}

/* Depth 2: 드롭다운 */
.mublo-menu__item--depth-1 {
    position: relative;
}

.mublo-menu__list--depth-2 {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    min-width: 200px;
    background: var(--color-bg);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-3);
    z-index: 110;

    /* 아래서 위로 페이드인 */
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

/* 1depth ↔ 2depth 사이 투명 bridge — hover 끊기지 않도록 */
.mublo-menu__list--depth-2::before {
    content: '';
    position: absolute;
    top: calc(var(--space-1) * -1);
    left: 0;
    right: 0;
    height: var(--space-1);
}

.mublo-menu__item--depth-1:hover > .mublo-menu__list--depth-2 {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.mublo-menu__link--depth-2 {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    display: flex;
    justify-content: space-between;
    border-radius: var(--radius-sm);
}

.mublo-header__nav-wrap .mublo-menu__link--depth-2:hover {
    background-color: var(--color-bg-subtle);
    color: var(--color-primary);
    text-decoration: none;
}

.mublo-menu__item--active > .mublo-menu__link--depth-2,
.mublo-menu__item--ancestor > .mublo-menu__link--depth-2 {
    color: var(--color-primary);
    background-color: var(--color-bg-subtle);
}

/* 하위 메뉴 화살표 (depth 2) */
.mublo-menu__item--has-children > .mublo-menu__link--depth-2::after {
    content: '';
    display: inline-block;
    width: 0.3125rem;
    height: 0.3125rem;
    border-right: 1.5px solid var(--color-text-muted);
    border-bottom: 1.5px solid var(--color-text-muted);
    transform: rotate(-45deg);
    flex-shrink: 0;
    margin-left: 0.5rem;
}

/* Depth 3: 플라이아웃 (오른쪽) */
.mublo-menu__item--depth-2 {
    position: relative;
}

.mublo-menu__list--depth-3 {
    display: none;
    position: absolute;
    top: calc(var(--space-2) * -1);
    left: 100%;
    min-width: 180px;
    background: var(--color-bg);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2) 0;
    z-index: 120;
}

.mublo-menu__item--depth-2:hover > .mublo-menu__list--depth-3 {
    display: block;
}

.mublo-menu__link--depth-3 {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
}

.mublo-menu__link--depth-3:hover {
    background-color: var(--color-bg-subtle);
    color: var(--color-primary);
}

.mublo-menu__item--active > .mublo-menu__link--depth-3,
.mublo-menu__item--ancestor > .mublo-menu__link--depth-3 {
    color: var(--color-primary);
    background-color: var(--color-bg-subtle);
}

/* ========================================
   Footer (다크 surface — on-dark 토큰 사용)
   ======================================== */
.mublo-footer {
    position: relative;
    z-index: 1;
    background: var(--color-surface-dark);
    color: var(--color-text-on-dark-muted);
    padding: var(--space-6) 0 var(--space-4);
    margin-top: auto;
}

/* 푸터 메뉴 */
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: var(--space-5) 0 var(--space-3);
    border-bottom: 1px solid var(--color-border-on-dark);
    margin-bottom: var(--space-8);
}
.footer-nav a {
    font-size: var(--font-size-sm);
    color: var(--color-text-on-dark-muted);
    text-decoration: none;
    padding: 2px 24px 2px 0;
    white-space: nowrap;
    transition: color var(--transition-fast);
}
.footer-nav a:last-child { padding-right: 0; }
.mublo-footer .footer-nav a:hover { color: var(--color-text-on-dark); text-decoration: none; }

/* 본문: 왼쪽(로고+회사정보) / 오른쪽(SNS+고객센터) */
.footer-body {
    display: flex;
    justify-content: space-between;
    gap: var(--space-10);
    padding-bottom: var(--space-6);
}
.footer-left { flex: 1; min-width: 0; }
.footer-right {
    flex-shrink: 0;
    text-align: right;
}

/* 로고/브랜드 */
.footer-brand { margin-bottom: var(--space-4); }
.footer-logo { display: inline-block; }
.footer-logo img { max-height: 36px; max-width: 160px; }
.footer-logo-text {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-on-dark);
    text-decoration: none;
}

/* 회사 정보 (왼쪽) */
.footer-info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 20px;
    font-size: var(--font-size-xs);
    color: var(--color-text-on-dark-subtle);
}
.footer-info-company {
    width: 100%;
    font-size: var(--font-size-sm);
    color: var(--color-text-on-dark);
    font-weight: var(--font-weight-medium);
    margin-bottom: 6px;
}
.footer-info-line {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}
.footer-info em {
    font-style: normal;
    color: var(--color-text-on-dark-disabled);
    margin-right: 2px;
}
.footer-info span { white-space: nowrap; }
.footer-info a {
    color: var(--color-text-on-dark-muted);
    text-decoration: none;
}
.mublo-footer .footer-info a:hover { color: var(--color-text-on-dark); text-decoration: none; }

/* SNS 아이콘 (오른쪽) */
.footer-sns {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-bottom: var(--space-5);
}
.footer-sns-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--color-bg-on-dark-subtle);
    color: var(--color-text-on-dark-subtle);
    text-decoration: none;
    transition: background var(--transition-base), color var(--transition-base);
}
.footer-sns-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.mublo-footer .footer-sns-btn:hover {
    background: var(--sns-color, var(--color-primary));
    color: var(--color-text-inverse);
    text-decoration: none;
}

/* 고객센터 (오른쪽, SNS 아래) */
.footer-cs-tel {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-on-dark);
    text-decoration: none;
    text-align: right;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}
.mublo-footer .footer-cs-tel:hover { color: var(--color-text-inverse); text-decoration: none; }
.footer-cs-time {
    font-size: 0.813rem; /* 13px — 토큰 스케일 밖 */
    color: var(--color-text-on-dark-subtle);
    line-height: 1.6;
    text-align: right;
}

/* 하단 바 */
.footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 18px 0;
    flex-wrap: wrap;
    border-top: 1px solid var(--color-border-on-dark);
}
.footer-copy {
    font-size: var(--font-size-xs);
    color: var(--color-text-on-dark-disabled);
    margin: 0;
}

/* 반응형 */
@media (max-width: 767.98px) {
    .mublo-footer { padding-top: 40px; }
    .footer-body {
        flex-direction: column;
        gap: 24px;
    }
    .footer-right { text-align: left; }
    .footer-sns { justify-content: flex-start; }
    .footer-cs-tel,
    .footer-cs-time { text-align: left; }
    .footer-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ========================================
   Page
   ======================================== */
.page-index__empty,
.page-view__empty {
    padding: 3rem 0;
    text-align: center;
    color: var(--color-text-muted);
}

/* ========================================
   Block Section
   ======================================== */
.block-section {
    padding: 0;
}

/* .btn 관련 스타일은 basic 스킨 common.css 에서 제공 */

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 768px) {
    /* Row 1 을 2-column 으로 단순화: 로고 + 토글 */
    .mublo-header__top {
        grid-template-columns: auto auto;
        justify-content: space-between;
    }

    .mublo-header__nav-wrap,
    .mublo-header__search,
    .mublo-header__utility {
        display: none;
    }

    .mublo-header__toggle {
        display: flex;
    }

    .mublo-header__logo .logo-pc { display: none; }
    .mublo-header__logo .logo-mobile { display: block; }

    .mublo-layout {
        flex-direction: column;
    }

    .mublo-layout__sidebar--left,
    .mublo-layout__sidebar--right {
        width: 100%;
    }

    .mublo-layout__sidebar--mobile-hidden {
        display: none;
    }

    .mublo-container,
    .mublo-content {
        padding: 0 10px;
    }
}

/* ========================================
   MubloItemLayout — 공용 아이템 레이아웃
   ======================================== */
.mublo-item-layout > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* List 모드: CSS Grid */
.mublo-item-layout.is-list > ul {
    display: grid;
    gap: 1rem;
}

/* PC 열 수 */
.mublo-item-layout.is-list[data-pc-cols="1"] > ul { grid-template-columns: 1fr; }
.mublo-item-layout.is-list[data-pc-cols="2"] > ul { grid-template-columns: repeat(2, 1fr); }
.mublo-item-layout.is-list[data-pc-cols="3"] > ul { grid-template-columns: repeat(3, 1fr); }
.mublo-item-layout.is-list[data-pc-cols="4"] > ul { grid-template-columns: repeat(4, 1fr); }
.mublo-item-layout.is-list[data-pc-cols="5"] > ul { grid-template-columns: repeat(5, 1fr); }

/* Mobile 열 수 */
@media (max-width: 768px) {
    .mublo-item-layout.is-list[data-mo-cols="1"] > ul { grid-template-columns: 1fr; }
    .mublo-item-layout.is-list[data-mo-cols="2"] > ul { grid-template-columns: repeat(2, 1fr); }
    .mublo-item-layout.is-list[data-mo-cols="3"] > ul { grid-template-columns: repeat(3, 1fr); }
}

/* Slide 모드: 컨테이너에 overflow 제어 (Swiper CDN CSS 로드 전 보호) */
.mublo-item-layout.is-slide {
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* ========================================
   SNS 로그인 버튼 (SnsLogin 플러그인)
   ======================================== */
.sns-login-section { margin-top: 20px; }
.sns-login-divider {
    position: relative; text-align: center;
    margin: 16px 0; color: var(--color-text-subtle); font-size: var(--font-size-xs);
}
.sns-login-divider::before, .sns-login-divider::after {
    content: ''; position: absolute; top: 50%;
    width: calc(50% - 24px); height: 1px; background: var(--color-border);
}
.sns-login-divider::before { left: 0; }
.sns-login-divider::after  { right: 0; }
.sns-login-buttons { display: flex; flex-direction: column; gap: 10px; }
.btn-sns {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 10px 16px; border-radius: 6px;
    font-size: 0.9rem; font-weight: 500; text-decoration: none;
    border: 1px solid transparent; cursor: pointer; transition: opacity 0.15s;
}
.btn-sns:hover { opacity: 0.88; text-decoration: none; }
.btn-sns--naver  { background: #03C75A; color: #fff; border-color: #03C75A; }
.btn-sns--kakao  { background: #FEE500; color: #191919; border-color: #FEE500; }
.btn-sns--google { background: #fff; color: #3c4043; border-color: #dadce0; }