/**
 * 고집사 DS v2.1 — §6 컴포넌트 스펙
 * 시맨틱 토큰만 사용. Bootstrap 클래스(.btn-primary 등)와 병행(bridge).
 * tokens.css 는 <link> 로 먼저 로드.
 */

/* ── Lucide inline SVG icons (DS §6) ── */
.gj-icon {
    display: block;
    flex-shrink: 0;
    width: var(--icon-md);
    height: var(--icon-md);
    color: inherit;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--icon-stroke-width);
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    shape-rendering: geometricPrecision;
}

.gj-icon--lg {
    width: var(--icon-lg);
    height: var(--icon-lg);
}

.gj-icon--md {
    width: var(--icon-md);
    height: var(--icon-md);
}

.gj-icon__heart {
    fill: transparent;
    transition: fill var(--duration-fast) var(--ease-standard);
}

.is-active > .gj-icon__heart,
.is-active .gj-icon__heart,
.gj-icon__heart.is-filled {
    fill: currentColor;
}

/* ── Button base ── */
.btn,
a.btn,
button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition:
        background-color var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard);
    border: 1px solid transparent;
}

.btn:focus-visible,
a.btn:focus-visible,
button.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.btn:disabled,
.btn.disabled {
    background: var(--bg-muted) !important;
    border-color: var(--bg-muted) !important;
    color: var(--text-disabled) !important;
    cursor: not-allowed;
    opacity: 1;
}

.btn--lg,
.btn-lg.btn--lg {
    height: 52px;
    padding: 0 var(--space-6);
    font-size: var(--fs-body-lg);
}

.btn--md {
    height: 44px;
    padding: 0 var(--space-5);
    font-size: var(--fs-body);
}

.btn--sm,
.btn-sm.btn--sm {
    height: 36px;
    padding: 0 var(--space-4);
    font-size: var(--fs-13);
}

.btn--full {
    width: 100%;
}

/* Primary */
.btn--primary,
.btn-primary:not(.btn-outline-primary):not(.btn-link):not(.btn-check) {
    background: var(--action-primary);
    border-color: var(--action-primary);
    color: var(--text-on-brand);
}

.btn--primary:hover,
.btn-primary:not(.btn-outline-primary):not(.btn-link):not(.btn-check):hover {
    background: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
    color: var(--text-on-brand);
}

.btn--primary:active,
.btn-primary:not(.btn-outline-primary):not(.btn-link):not(.btn-check):active {
    background: var(--action-primary-pressed);
    border-color: var(--action-primary-pressed);
    color: var(--text-on-brand);
}

/* Secondary */
.btn--secondary,
.btn-outline-secondary,
.btn-secondary:not(.btn-link) {
    background: var(--bg-page);
    color: var(--text-primary);
    border-color: var(--border-default);
}

.btn--secondary:hover,
.btn-outline-secondary:hover,
.btn-secondary:not(.btn-link):hover {
    background: var(--bg-subtle);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

/* Outline primary → ghost-like brand */
.btn-outline-primary {
    background: var(--bg-page);
    color: var(--text-brand);
    border-color: var(--border-brand);
}

.btn-outline-primary:hover {
    background: var(--bg-brand-subtle);
    color: var(--text-brand);
    border-color: var(--border-brand);
}

.btn--ghost {
    background: transparent;
    color: var(--text-brand);
    border-color: transparent;
}

.btn--ghost:hover {
    background: var(--bg-brand-subtle);
    color: var(--text-brand);
}

.btn--danger,
.btn-danger:not(.btn-link) {
    background: var(--color-error);
    border-color: var(--color-error);
    color: var(--text-on-brand);
}

.btn--danger:hover,
.btn-danger:not(.btn-link):hover {
    filter: brightness(0.95);
    color: var(--text-on-brand);
}

/* B2C 대형 CTA (기존 btn-bt-primary) */
a.btn-bt-primary,
button.btn-bt-primary {
    background: var(--action-primary) !important;
    border: none !important;
    color: var(--text-on-brand) !important;
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-md) !important;
    text-decoration: none;
}

a.btn-bt-primary:hover,
button.btn-bt-primary:hover {
    background: var(--action-primary-hover) !important;
    color: var(--text-on-brand) !important;
}

/* ── Card (DS §6.2) ── */
.gj-card,
.card.gj-card {
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: none;
    overflow: hidden;
}

.gj-card:hover,
.card.gj-card:hover {
    box-shadow: none;
    transform: none;
}

.gj-card__thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--bg-muted);
}

.gj-card__body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.gj-card__title {
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.gj-card__meta {
    font-size: var(--fs-caption);
    color: var(--text-tertiary);
    margin: 0;
}

.gj-card__price {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    margin: 0;
}

/* ── Badge (DS §6.3) ── */
.gj-badge,
.badge.gj-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 22px;
    padding: 0 var(--space-2);
    font-size: var(--fs-tiny);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-xs);
    line-height: 1;
}

.gj-badge--brand,
.badge.gj-badge--brand {
    background: var(--bg-brand-subtle);
    color: var(--text-brand);
}

.gj-badge--point {
    background: var(--bg-point-subtle);
    color: var(--text-point);
}

.gj-badge--rating {
    background: transparent;
    color: var(--color-rating);
}

.gj-badge--new {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.gj-badge--success {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.gj-badge--warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.gj-badge--muted {
    background: var(--bg-muted);
    color: var(--text-secondary);
}

/* ── Input (DS §6.4) ── */
.gj-input,
.input.gj-input {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-4);
    font-size: var(--fs-body);
    color: var(--text-primary);
    background: var(--bg-page);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-fast) var(--ease-standard);
}

.gj-input::placeholder {
    color: var(--text-disabled);
}

.gj-input:focus {
    outline: none;
    border-color: var(--border-brand);
    box-shadow: var(--focus-ring);
}

/* Bootstrap form-control bridge (공개·파트너 공통) */
.form-control:focus,
.form-select:focus {
    border-color: var(--border-brand);
    box-shadow: var(--focus-ring);
}

/* ── Filter chip (DS §6.5) ── */
.gj-chip,
.chip.gj-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 36px;
    padding: 0 var(--space-4);
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
    background: var(--bg-page);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-standard);
}

.gj-chip:hover {
    border-color: var(--border-strong);
}

.gj-chip--active,
.gj-chip.is-active {
    color: var(--text-brand);
    background: var(--bg-brand-subtle);
    border-color: var(--border-brand);
}

/* ── Search bar (DS §6.4) ── */
.gj-search,
.search.gj-search,
.bt-search-wrap.gj-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: 0 var(--space-4);
    background: var(--bg-muted);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    transition: border-color var(--duration-fast) var(--ease-standard);
}

.gj-search:focus-within,
.bt-search-wrap:focus-within {
    border-color: var(--border-brand);
    box-shadow: var(--focus-ring);
}

.gj-search input,
.bt-search-wrap input {
    border: none;
    background: transparent;
    flex: 1;
    min-width: 0;
    font-size: var(--fs-body);
    color: var(--text-primary);
}

.gj-search input:focus,
.bt-search-wrap input:focus {
    outline: none;
}

.gj-search input::placeholder,
.bt-search-wrap input::placeholder {
    color: var(--text-disabled);
}

/* ── GNB (DS §6.6) ── */
.gj-gnb,
.bt-topbar.gj-gnb {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    height: 56px;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 0 var(--container-pad);
    background: var(--bg-page);
    border-bottom: 1px solid var(--border-subtle);
}

/* ── Mobile tabbar (DS §6.6) ── */
.gj-tabbar,
.bt-tabbar.gj-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-fixed);
    min-height: 60px;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background: var(--bg-page);
    border-top: 1px solid var(--border-subtle);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.gj-tabbar__item,
.bt-tabbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-0-5);
    font-size: var(--fs-tiny);
    font-weight: var(--fw-medium);
    color: var(--text-tertiary);
    text-decoration: none;
}

.gj-tabbar__item--active,
.bt-tabbar a.active {
    color: var(--text-brand);
}

.bt-tabbar .gj-icon {
    width: var(--icon-lg);
    height: var(--icon-lg);
}