/* ══ thisisbjj — custom.css (Tailwind 병행) ════════════════ */

/* ── CSS Variables ── */
:root {
    --bjj-primary:   #0D1B2A;
    --bjj-primary-l: #1E3A5F;
    --bjj-accent:    #C9A84C;
    --bjj-surface:   #F8F9FA;
    --sns-instagram: #E1306C;
    --sns-youtube:   #FF0000;
}

/* ── Base ── */
html { scroll-behavior: smooth; }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:focus-visible { outline: 2px solid var(--bjj-accent); outline-offset: 2px; }

/* ── SNS Icon Colors ── */
.icon-instagram { color: var(--sns-instagram); }
.icon-youtube   { color: var(--sns-youtube); }

/* ── Belt Badge (프로필 뷰 전용) ── */
.belt-badge {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.75rem; border-radius: 9999px;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.01em;
}
.belt-white  { background: #fff; color: #374151; border: 1.5px solid #d1d5db; }
.belt-blue   { background: #3b82f6; color: #fff; }
.belt-purple { background: #7c3aed; color: #fff; }
.belt-brown  { background: #92400e; color: #fff; }
.belt-black  { background: #1a1a1a; color: #fff; }
.belt-none   { background: #e9ecef; color: #6c757d; }

/* ── OAuth Buttons (브랜드 예외) ── */
.btn-kakao { background: #FEE500; color: #191919; font-weight: 700; }
.btn-kakao:hover { background: #e6d000; }
.btn-naver { background: #03C75A; color: #fff; font-weight: 700; }
.btn-naver:hover { background: #02a84c; }

/* ══ Belt Selector UI ═══════════════════════════════════════ */

.belt-pill {
    display: inline-flex; align-items: center;
    padding: 0.375rem 1rem; border-radius: 9999px;
    font-size: 0.875rem; font-weight: 700;
    cursor: pointer; border: 2px solid transparent;
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap; user-select: none; line-height: 1;
}
.belt-pill:hover:not(.belt-pill--inactive) { transform: translateY(-1px); }

/* 선택된 벨트: Gold ring + 확대 */
.belt-pill--active {
    transform: scale(1.08);
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.55), 0 4px 14px rgba(0,0,0,0.18);
}

/* 비선택 벨트: 축소 + 반투명 */
.belt-pill--inactive {
    opacity: 0.3;
    transform: scale(0.8);
    padding: 0.25rem 0.7rem;
    font-size: 0.72rem;
}

/* ── Grau Container (slide-in below belt row) ── */
.grau-container {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition:
        max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.22s ease,
        margin-top 0.3s ease;
    margin-top: 0;
}
.grau-container--visible {
    max-height: 64px;
    opacity: 1;
    margin-top: 0.875rem;
}

/* ── Grau Segmented Control ── */
.grau-seg-track {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #f3f4f6;
    border-radius: 0.875rem;
    padding: 0.3rem;
    border: 1.5px solid #ececec;
}

.grau-seg-btn {
    display: inline-flex;
    align-items: center; justify-content: center;
    min-width: 2.125rem; height: 2.125rem;
    border-radius: 0.625rem;
    font-size: 0.72rem; font-weight: 800;
    cursor: pointer;
    background: transparent;
    color: #b0b7c3;
    border: none;
    transition: all 0.16s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    letter-spacing: -0.01em;
    padding: 0 0.35rem;
}
.grau-seg-btn:hover:not(.grau-seg-btn--active) {
    background: #fff;
    color: #374151;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.grau-seg-btn--active {
    /* background / color / box-shadow set dynamically via JS */
    border-radius: 0.5rem;
}

/* ══ Kakao Place Dropdown ══════════════════════════════════ */

.kakao-place-dropdown {
    position: absolute; left: 0; right: 0; top: 100%;
    margin-top: 0.25rem; z-index: 50;
    background: #fff; border: 1.5px solid #e5e7eb; border-radius: 0.875rem;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
    max-height: 280px; overflow-y: auto;
}

.kakao-place-item {
    padding: 0.75rem 1rem; cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.12s;
}
.kakao-place-item:last-child { border-bottom: none; }
.kakao-place-item:hover { background: #f9fafb; }
.kakao-place-item:first-child { border-radius: 0.875rem 0.875rem 0 0; }
.kakao-place-item:last-child { border-radius: 0 0 0.875rem 0.875rem; }

/* ══ Toast (vanilla JS) ═════════════════════════════════════ */
#bjjToastContainer {
    position: fixed; bottom: 1rem; left: 1rem; right: 1rem;
    z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    pointer-events: none;
}
@media (min-width: 640px) {
    #bjjToastContainer { left: auto; right: 1.5rem; bottom: 1.5rem; align-items: flex-end; }
}
.bjj-toast {
    pointer-events: auto;
    display: flex; align-items: center; gap: 0.75rem;
    background: #fff; border: 1px solid #f3f4f6; border-radius: 0.875rem;
    padding: 0.875rem 1rem;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
    width: 100%; max-width: 360px;
    font-size: 0.875rem; color: #374151;
    opacity: 0; transform: translateY(0.5rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
@media (min-width: 640px) {
    .bjj-toast { width: auto; min-width: 280px; }
}
.bjj-toast--in { opacity: 1; transform: translateY(0); }

/* ══ Modals (vanilla JS) ════════════════════════════════════ */

/* Shared backdrop */
.bjj-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.48);
    backdrop-filter: blur(4px);
}

/* Confirm Modal */
#bjjConfirmModal {
    position: fixed; inset: 0; z-index: 9998;
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
#bjjConfirmModal.hidden { display: none; }

/* Gym Search Modal — bottom sheet on mobile, centered on desktop */
#gymSearchModal {
    position: fixed; inset: 0; z-index: 9997;
    display: flex; align-items: flex-end; justify-content: center;
}
#gymSearchModal.hidden { display: none; }
@media (min-width: 640px) { #gymSearchModal { align-items: center; padding: 1rem; } }

.gym-modal-sheet {
    background: #fff; width: 100%; max-width: 520px;
    max-height: 82vh; display: flex; flex-direction: column;
    border-radius: 1.25rem 1.25rem 0 0;
    box-shadow: 0 -12px 48px rgba(0,0,0,0.15);
    overflow: hidden; position: relative; z-index: 1;
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 640px) {
    .gym-modal-sheet { border-radius: 1.25rem; animation: fadeIn 0.2s ease; }
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}

.gym-result-item {
    display: flex; align-items: center; gap: 0.875rem;
    padding: 0.75rem 1rem; cursor: pointer;
    border-bottom: 1px solid #f3f4f6; transition: background 0.12s;
}
.gym-result-item:hover { background: #f9fafb; }
.gym-result-item:last-child { border-bottom: none; }

/* ══ Inline Alert (Thymeleaf fragment) ══════════════════════ */

.bjj-alert {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 0.875rem 1rem; border-radius: 0.875rem;
    border: 1px solid transparent; font-size: 0.875rem;
    margin-bottom: 1rem; position: relative;
}
.bjj-alert--success { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.bjj-alert--danger  { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.bjj-alert--warning { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.bjj-alert--info    { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }

.bjj-alert-close {
    margin-left: auto; flex-shrink: 0;
    background: none; border: none; cursor: pointer;
    opacity: 0.6; padding: 0; line-height: 1; font-size: 1rem;
    color: inherit;
}
.bjj-alert-close:hover { opacity: 1; }

/* ══ Breadcrumb ══════════════════════════════════════════════ */

.bjj-breadcrumb {
    display: flex; align-items: center; gap: 0.375rem;
    font-size: 0.8125rem; margin-bottom: 1.25rem;
    min-width: 0; overflow: hidden;
}
.bjj-breadcrumb a { color: #9ca3af; text-decoration: none; transition: color 0.15s; }
.bjj-breadcrumb a:hover { color: #6b7280; }
.bjj-breadcrumb .sep { color: #d1d5db; font-size: 0.75rem; }
.bjj-breadcrumb .current { color: #111827; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══ Form Inputs (Tailwind-era) ══════════════════════════════ */

.bjj-input {
    width: 100%; padding: 0.625rem 1rem;
    border: 1.5px solid #e5e7eb; border-radius: 0.75rem;
    font-size: 0.875rem; color: #111827; background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
.bjj-input:focus {
    border-color: #C9A84C;
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
}
.bjj-input::placeholder { color: #9ca3af; }
textarea.bjj-input { resize: vertical; min-height: 7rem; }

/* ══ Buttons ════════════════════════════════════════════════ */

.bjj-btn {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.625rem 1.25rem; border-radius: 0.75rem;
    font-size: 0.875rem; font-weight: 600;
    cursor: pointer; border: none; transition: all 0.15s;
    white-space: nowrap; text-decoration: none;
}
.bjj-btn-primary {
    background: #C9A84C; color: #0D1B2A;
}
.bjj-btn-primary:hover { background: #b8963d; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(201,168,76,0.35); }

.bjj-btn-secondary {
    background: #fff; color: #374151;
    border: 1.5px solid #e5e7eb;
}
.bjj-btn-secondary:hover { background: #f9fafb; transform: translateY(-1px); }

.bjj-btn-danger {
    background: #ef4444; color: #fff;
}
.bjj-btn-danger:hover { background: #dc2626; transform: translateY(-1px); }

/* ══ Filter Tabs ═════════════════════════════════════════ */

.bjj-filter-tab {
    display: inline-flex; align-items: center;
    padding: 0.375rem 0.875rem; border-radius: 9999px;
    font-size: 0.8125rem; font-weight: 600;
    color: #6b7280; background: #f3f4f6;
    text-decoration: none; white-space: nowrap;
    transition: all 0.15s;
}
.bjj-filter-tab:hover { background: #e5e7eb; color: #374151; }
.bjj-filter-tab--active {
    background: var(--bjj-primary); color: #fff;
}
.bjj-filter-tab--active:hover { background: var(--bjj-primary-l); color: #fff; }

/* ══ Role Badge (Fragment: role-badge.html) ══════════════════ */

.role-badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-weight: 700; border-radius: 9999px;
    white-space: nowrap; line-height: 1;
}

/* Sizes */
.role-badge--sm   { font-size: 0.625rem; padding: 0.125rem 0.5rem; }
.role-badge--sm .role-badge__icon { font-size: 7px; }
.role-badge--md   { font-size: 0.75rem; padding: 0.25rem 0.625rem; }
.role-badge--md .role-badge__icon { font-size: 9px; }

/* Light variant (white/gray backgrounds) */
.role-badge-leader    { background: rgba(201,168,76,0.15); color: var(--bjj-accent); }
.role-badge-professor { background: rgba(59,130,246,0.12); color: #3b82f6; }
.role-badge-member    { background: #f3f4f6; color: #9ca3af; }

/* Dark variant (--bjj-primary backgrounds) */
.role-badge-leader-dark    { background: rgba(201,168,76,0.2); color: var(--bjj-accent); }
.role-badge-professor-dark { background: rgba(59,130,246,0.15); color: #93bbfd; }
.role-badge-member-dark    { background: rgba(255,255,255,0.1); color: #d1d5db; }
.role-badge-visitor-dark   { background: rgba(255,255,255,0.08); color: #9ca3af; font-weight: 500; }

/* ══ Avatar (Fragment: avatar.html) ══════════════════════════ */

.avatar { flex-shrink: 0; overflow: hidden; position: relative; }
.avatar__img { width: 100%; height: 100%; object-fit: cover; }
.avatar__fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: #f3f4f6; color: #d1d5db;
}

/* Sizes */
.avatar--xs { width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; }
.avatar--xs .avatar__icon { font-size: 1.125rem; }
.avatar--sm { width: 3.5rem; height: 3.5rem; border-radius: 0.75rem; }
.avatar--sm .avatar__icon { font-size: 1.25rem; }
.avatar--md { width: 4rem; height: 4rem; border-radius: 1rem; }
.avatar--md .avatar__icon { font-size: 1.5rem; }
.avatar--lg { width: 5rem; height: 5rem; border-radius: 1rem; }
.avatar--lg .avatar__icon { font-size: 2.25rem; }

/* Dark variant (on --bjj-primary backgrounds) */
.avatar--dark .avatar__img { box-shadow: 0 0 0 2px rgba(201,168,76,0.4); }
.avatar--dark .avatar__fallback {
    background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.2);
}

/* ══ SNS Link (Fragment: sns-link.html) ══════════════════════ */

.sns-link {
    display: inline-flex; align-items: center;
    text-decoration: none; transition: all 0.15s;
}

/* Button style (card-like, for profile view) */
.sns-link--button {
    gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.75rem;
    background: #fff; border: 1px solid #f3f4f6;
    font-size: 0.875rem; font-weight: 500; color: #4b5563;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.sns-link--button.sns-link--instagram:hover { border-color: #fbcfe8; color: #db2777; }
.sns-link--button.sns-link--youtube:hover   { border-color: #fecaca; color: #dc2626; }

/* Inline style (minimal text link, for gym detail) */
.sns-link--inline {
    gap: 0.375rem; font-size: 0.875rem; color: #374151;
}
.sns-link--inline.sns-link--instagram:hover { color: #db2777; }
.sns-link--inline.sns-link--youtube:hover   { color: #dc2626; }

/* ══ Expandable Text (bio, description) ══════════════════════ */

.bjj-text-expandable {
    position: relative;
    white-space: pre-line;
    word-break: break-word;
}
.bjj-text-expandable--clamped {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bjj-text-expand-btn {
    display: inline-flex; align-items: center; gap: 0.25rem;
    margin-top: 0.5rem;
    padding: 0;
    background: none; border: none; cursor: pointer;
    font-size: 0.8125rem; font-weight: 600;
    color: var(--bjj-accent);
    transition: color 0.15s;
}
.bjj-text-expand-btn:hover { color: #b8963d; }