/* ==========================================================================
   KEYWORK Filter v3 (2026-04-08)
   앱(Flutter)과 동일한 필터 UI 스타일
   ========================================================================== */

.kwf3 {
    --kwf-primary: #3B82F6;
    --kwf-primary-bg: #EFF6FF;
    --kwf-border: #E5E8EB;
    --kwf-text: #1F2937;
    --kwf-text-sub: #6B7684;
    --kwf-bg-white: #FFFFFF;
    --kwf-bg-panel: #F2F4F6;
    --kwf-star: #FFB800;

    background: #FFFFFF;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #F3F4F6;
}

/* ─── 카테고리 칩 줄 ─── */
.kwf3__row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.kwf3__left {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.kwf3__left::-webkit-scrollbar { display: none; }

.kwf3__right {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
}

/* ─── 카테고리 칩 ─── */
.kwf3__cat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--kwf-border);
    border-radius: 100px;
    background: var(--kwf-bg-white);
    color: var(--kwf-text);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
    -webkit-tap-highlight-color: transparent;
}
.kwf3__cat:hover { border-color: #CBD5E1; }

.kwf3__cat.is-active {
    background: var(--kwf-primary-bg);
    border-color: var(--kwf-primary);
    color: var(--kwf-primary);
}
.kwf3__cat[aria-expanded="true"] {
    background: var(--kwf-primary-bg);
    border-color: var(--kwf-primary);
    color: var(--kwf-primary);
}
.kwf3__cat[aria-expanded="true"] .kwf3__cat-caret {
    transform: rotate(180deg);
}

.kwf3__cat-label { font-weight: 600; }
.kwf3__cat-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--kwf-primary);
    color: #fff;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    margin-left: 2px;
}
.kwf3__cat.is-active .kwf3__cat-count,
.kwf3__cat[aria-expanded="true"] .kwf3__cat-count { background: var(--kwf-primary); }

.kwf3__cat-caret {
    font-size: 10px;
    color: var(--kwf-text-sub);
    transition: transform .2s;
    margin-left: 1px;
}
.kwf3__cat.is-active .kwf3__cat-caret,
.kwf3__cat[aria-expanded="true"] .kwf3__cat-caret { color: var(--kwf-primary); }

/* ─── 별 칩 (★) ─── */
.kwf3__star {
    width: 44px;
    height: 44px;
    border: 1px solid var(--kwf-border);
    border-radius: 50%;
    background: var(--kwf-bg-white);
    color: var(--kwf-text-sub);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s, border-color .15s, color .15s;
    -webkit-tap-highlight-color: transparent;
}
.kwf3__star:not(.is-disabled):hover {
    border-color: var(--kwf-star);
    color: var(--kwf-star);
}
.kwf3__star.is-on {
    color: var(--kwf-star);
    border-color: var(--kwf-star);
}
.kwf3__star.is-disabled {
    cursor: not-allowed;
    opacity: .5;
}

/* ─── 내 필터 칩 (⚙) ─── */
.kwf3__mine {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--kwf-border);
    border-radius: 100px;
    background: var(--kwf-bg-white);
    color: var(--kwf-text);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
}
.kwf3__mine:hover { border-color: #CBD5E1; }
.kwf3__mine i { font-size: 14px; color: var(--kwf-text-sub); }

/* ─── 펼친 옵션 패널 ─── */
.kwf3__panel {
    margin-top: 10px;
    padding: 14px;
    background: #FFFFFF;
    border: 1px solid var(--kwf-border);
    border-radius: 12px;
    animation: kwf3-fade-in .2s ease;
}
.kwf3__panel[hidden] { display: none; }

@keyframes kwf3-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.kwf3__opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.kwf3__opt {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 18px;
    background: var(--kwf-bg-white);
    color: var(--kwf-text);
    border: 1px solid var(--kwf-border);
    border-radius: 100px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
    -webkit-tap-highlight-color: transparent;
}
.kwf3__opt:hover { border-color: #CBD5E1; }
.kwf3__opt.is-selected {
    background: var(--kwf-primary);
    border-color: var(--kwf-primary);
    color: #fff;
}

.kwf3__more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 40px;
    padding: 0 16px;
    background: transparent;
    color: var(--kwf-text-sub);
    border: 1px dashed #D1D5DB;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.kwf3__more:hover { color: var(--kwf-primary); border-color: var(--kwf-primary); }
.kwf3__more i { font-size: 10px; transition: transform .2s; }
.kwf3__more.is-open i { transform: rotate(180deg); }

/* ─── 선택된 필터 태그 ─── */
.kwf3__selected {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    min-height: 32px;
}
.kwf3__selected.is-empty { display: none; }

.kwf3__selected-scroll {
    display: flex;
    gap: 7px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.kwf3__selected-scroll::-webkit-scrollbar { display: none; }

.kwf3__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    background: var(--kwf-primary-bg);
    color: var(--kwf-primary);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
}
.kwf3__tag:hover { background: #DBEAFE; }
.kwf3__tag i { font-size: 10px; opacity: .7; }

.kwf3__reset {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--kwf-text-sub);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
    text-decoration: underline;
    -webkit-tap-highlight-color: transparent;
}
.kwf3__reset:hover { color: var(--kwf-text); }

/* ─── 모바일 ≤768px ─── */
@media (max-width: 768px) {
    /* sticky 필터를 위해 부모 overflow 해제 */
    .board-card { overflow: visible; }
    .kwf3 { padding: 10px 12px 8px; position: sticky; top: 0; z-index: 50; }
    .kwf3__row { gap: 8px; }
    .kwf3__left { gap: 7px; }
    .kwf3__cat { font-size: 14px; padding: 0 14px; height: 42px; }
    .kwf3__mine { font-size: 14px; padding: 0 14px; height: 42px; }
    .kwf3__star { width: 42px; height: 42px; font-size: 17px; }
    .kwf3__panel { padding: 12px; }
    .kwf3__opt { height: 38px; padding: 0 16px; font-size: 14px; }
    .kwf3__more { height: 38px; font-size: 13px; }
    .kwf3__tag { font-size: 12px; height: 28px; padding: 0 10px; }
}

@media (max-width: 480px) {
    .kwf3 { padding: 10px 10px 8px; }
    .kwf3__row { gap: 6px; }
    .kwf3__left { gap: 6px; }
    .kwf3__right { gap: 6px; }
    .kwf3__cat { padding: 0 12px; font-size: 14px; gap: 4px; height: 40px; }
    .kwf3__mine { padding: 0 12px; font-size: 14px; height: 40px; }
    .kwf3__star { width: 40px; height: 40px; }
    .kwf3__opt { height: 36px; padding: 0 14px; font-size: 14px; }
}

/* ==========================================================================
   내 필터 저장 모달
   ========================================================================== */
.kwf3-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.kwf3-modal[hidden] { display: none; }

.kwf3-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    animation: kwf3-bd-in .2s ease;
}
@keyframes kwf3-bd-in { from { opacity: 0; } to { opacity: 1; } }

.kwf3-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    background: #fff;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    animation: kwf3-dlg-up .25s cubic-bezier(.2,.9,.3,1);
}
@keyframes kwf3-dlg-up {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@media (min-width: 768px) {
    .kwf3-modal { align-items: center; }
    .kwf3-modal__dialog {
        border-radius: 16px;
        max-height: 80vh;
    }
}

.kwf3-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #F1F5F9;
}
.kwf3-modal__head h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.3px;
}
.kwf3-modal__head h3 i { color: var(--kwf-primary, #3B82F6); font-size: 17px; }
.kwf3-modal__x {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #9CA3AF;
    font-size: 19px;
    cursor: pointer;
    border-radius: 50%;
    transition: background .15s;
}
.kwf3-modal__x:hover { background: #F3F4F6; color: #4B5563; }

.kwf3-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}
.kwf3-modal__section { margin-bottom: 24px; }
.kwf3-modal__section:last-child { margin-bottom: 0; }
.kwf3-modal__section-title {
    font-size: 15px;
    font-weight: 700;
    color: #374151;
    margin: 0 0 12px;
}
.kwf3-modal__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.kwf3-modal__chip {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 18px;
    background: #F3F4F6;
    color: #374151;
    border: 1px solid transparent;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, border-color .15s, color .15s;
}
.kwf3-modal__chip:hover { background: #E5E7EB; }
.kwf3-modal__chip.is-selected {
    background: #EFF6FF;
    border-color: #3B82F6;
    color: #3B82F6;
    font-weight: 600;
}

.kwf3-modal__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 16px;
    background: transparent;
    color: #6B7280;
    border: 1px dashed #D1D5DB;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s, border-color .15s;
}
.kwf3-modal__more:hover { color: #3B82F6; border-color: #3B82F6; }
.kwf3-modal__more i { font-size: 10px; transition: transform .2s; }
.kwf3-modal__more.is-open i { transform: rotate(180deg); }

.kwf3-modal__foot {
    display: flex;
    gap: 12px;
    padding: 16px 24px 24px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #F1F5F9;
}
.kwf3-modal__btn {
    flex: 1;
    height: 56px;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, color .15s;
}
.kwf3-modal__btn--ghost {
    background: #F3F4F6;
    color: #6B7280;
    flex: 0 0 30%;
}
.kwf3-modal__btn--ghost:hover { background: #E5E7EB; }
.kwf3-modal__btn--primary {
    background: #3B82F6;
    color: #fff;
}
.kwf3-modal__btn--primary:hover { background: #2563EB; }
.kwf3-modal__btn--primary:disabled {
    background: #9CA3AF;
    cursor: not-allowed;
}

/* ==========================================================================
   다크모드
   ========================================================================== */
[data-theme="dark"] .kwf3 {
    background: var(--bg-primary, #111827);
    border-bottom-color: var(--border-color, #374151);
}
[data-theme="dark"] .kwf3__cat,
[data-theme="dark"] .kwf3__mine,
[data-theme="dark"] .kwf3__star {
    background: var(--bg-secondary, #1F2937);
    border-color: var(--border-color, #374151);
    color: var(--text-primary, #E5E7EB);
}
[data-theme="dark"] .kwf3__panel { background: var(--bg-tertiary, #1F2937); }
[data-theme="dark"] .kwf3__opt {
    background: var(--bg-primary, #111827);
    border-color: var(--border-color, #374151);
    color: var(--text-primary, #E5E7EB);
}
[data-theme="dark"] .kwf3__opt.is-selected {
    background: #3B82F6;
    border-color: #3B82F6;
    color: #fff;
}
[data-theme="dark"] .kwf3-modal__dialog {
    background: var(--bg-primary, #111827);
}
[data-theme="dark"] .kwf3-modal__head,
[data-theme="dark"] .kwf3-modal__foot {
    border-color: var(--border-color, #374151);
}
[data-theme="dark"] .kwf3-modal__head h3 { color: var(--text-primary, #E5E7EB); }
[data-theme="dark"] .kwf3-modal__chip {
    background: var(--bg-secondary, #1F2937);
    color: var(--text-primary, #E5E7EB);
}
[data-theme="dark"] .kwf3-modal__chip.is-selected {
    background: #1E3A8A;
    border-color: #3B82F6;
    color: #93C5FD;
}

/* ─── 모바일 필터칩 컴팩트화 (2026-04-23) ─── */
/* 지역·공종·직종·조건 + ★·내필터가 한 줄에 들어가도록 축소 */
@media (max-width: 640px) {
    .kwf3__row { gap: 6px; }
    .kwf3__left { gap: 4px; }
    .kwf3__right { gap: 4px; }

    .kwf3__cat {
        height: 34px;
        padding: 0 10px;
        font-size: 13px;
        gap: 3px;
    }
    .kwf3__cat-caret { font-size: 9px; }
    .kwf3__cat-count {
        min-width: 16px;
        height: 16px;
        font-size: 10px;
        padding: 0 4px;
    }

    .kwf3__star {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .kwf3__mine {
        height: 34px;
        padding: 0 10px;
        font-size: 13px;
        gap: 4px;
    }
    .kwf3__mine i { font-size: 12px; }
}