/* =====================================================================
 * SKS Design System
 * ---------------------------------------------------------------------
 * 모든 프론트 화면의 공통 토큰 + 기본 컴포넌트.
 * 다른 CSS보다 먼저 로드되며, 페이지별 CSS가 이 위에 얹힌다.
 *
 * 설계 원칙
 *   1. 색상·간격·그림자는 전부 토큰으로. CSS에 색상 하드코딩 금지.
 *   2. 버튼/뱃지의 "의미"는 변형 클래스로 표현. 인라인 style 금지.
 *   3. 클래스는 sks-fe- 접두사 유지 — .btn/.card/.modal은 워드프레스
 *      플러그인과 충돌 위험이 매우 크다.
 * ===================================================================== */

:root {
    /* ═══════════════════════════════════════════════════════════
       0) 원시 토큰 (Primitive) — 색 팔레트 그 자체
       ───────────────────────────────────────────────────────────
       여기 값만 바꾸면 아래 역할 토큰이 전부 따라온다.
       화면 CSS에서는 이 층을 직접 쓰지 말 것.
       ═══════════════════════════════════════════════════════════ */

    /* 중립 */
    --neutral-0:   #FFFFFF;
    --neutral-5:   #F7F8FA;
    --neutral-10:  #EFF1F4;
    --neutral-20:  #E1E4EA;
    --neutral-30:  #D1D6DE;
    --neutral-40:  #B9C0CC;
    --neutral-50:  #9FA7B5;
    --neutral-60:  #7F8898;
    --neutral-70:  #5F6774;
    --neutral-80:  #3F4550;
    --neutral-90:  #22262E;
    --neutral-95:  #15181E;
    --neutral-100: #000000;

    /* 브랜드 */
    --brand-5:  #F2FCFB;
    --brand-10: #D8F5F2;
    --brand-20: #B7ECE7;
    --brand-30: #7EDDD6;
    --brand-40: #00C3BE;
    --brand-50: #00A9A4;
    --brand-60: #008F8A;
    --brand-70: #007671;
    --brand-80: #005D59;
    --brand-90: #004543;
    --brand-95: #002E2C;

    /* 상태 */
    --status-success-50: #12B76A;  --status-success-5: #ECFDF3;  --status-success-70: #027A48;
    --status-warning-50: #F79009;  --status-warning-5: #FFFAEB;  --status-warning-70: #B54708;
    --status-danger-50:  #D92D20;  --status-danger-5:  #FDF2F2;  --status-danger-70:  #B42318;
    --status-info-60:    #1570EF;  --status-info-5:    #EFF8FF;  --status-info-70:    #175CD3;

    /* 모양 — 5단계 + full */
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   10px;
    --radius-xl:   12px;
    --radius-full: 9999px;

    /* 타이포 */
    --font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
                   "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-mono:   "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;

    /* 그림자 — 옅게 겹쳐 쌓는 방식 */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);

    /* 전환 */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.2s ease;


    /* ═══════════════════════════════════════════════════════════
       1) 역할 토큰 (Semantic) — 화면 CSS는 이 층만 쓴다
       ───────────────────────────────────────────────────────────
       기존 --sks-* 이름을 그대로 유지해 마크업 수정 없이 갈아끼운다.
       ═══════════════════════════════════════════════════════════ */

    /* 브랜드 */
    --sks-primary:          var(--brand-50);
    --sks-primary-hover:    var(--brand-60);
    --sks-primary-soft:     var(--brand-5);
    --sks-primary-border:   var(--brand-20);
    --sks-primary-light:    var(--brand-30);
    --sks-primary-deep:     var(--brand-80);

    /* 의미 색상 */
    --sks-success:          var(--status-success-50);
    --sks-success-hover:    var(--status-success-70);
    --sks-success-soft:     var(--status-success-5);
    --sks-success-text:     var(--status-success-70);
    --sks-success-tint:     #A6F4C5;

    --sks-danger:           var(--status-danger-50);
    --sks-danger-hover:     var(--status-danger-70);
    --sks-danger-soft:      var(--status-danger-5);
    --sks-danger-text:      var(--status-danger-70);
    --sks-danger-tint:      #FECDCA;

    --sks-warning:          var(--status-warning-50);
    --sks-warning-hover:    var(--status-warning-70);
    --sks-warning-soft:     var(--status-warning-5);
    --sks-warning-text:     var(--status-warning-70);
    --sks-warning-tint:     #FEDF89;

    --sks-info:             var(--status-info-60);
    --sks-info-hover:       var(--status-info-70);
    --sks-info-soft:        var(--status-info-5);
    --sks-info-text:        var(--status-info-70);

    --sks-accent:           var(--brand-40);
    --sks-accent-hover:     var(--brand-60);
    --sks-accent-soft:      var(--brand-5);

    /* 표면 */
    --sks-bg:               var(--neutral-5);
    --sks-surface:          var(--neutral-0);
    --sks-surface-alt:      var(--neutral-5);
    --sks-surface-sunken:   var(--neutral-10);

    /* 텍스트 */
    --sks-text:             var(--neutral-90);
    --sks-text-strong:      var(--neutral-95);
    --sks-text-muted:       var(--neutral-70);
    --sks-text-subtle:      var(--neutral-60);
    --sks-text-body:        var(--neutral-80);

    /* 테두리 */
    --sks-border:           var(--neutral-20);
    --sks-border-strong:    var(--neutral-30);

    /* 타이포 */
    --sks-font: var(--font-family);
    --sks-text-xs:          12px;
    --sks-text-sm:          13px;
    --sks-text-base:        14px;
    --sks-text-lg:          16px;
    --sks-text-xl:          20px;
    --sks-text-2xl:         24px;

    /* 간격 */
    --sks-spacing-xs:       4px;
    --sks-spacing-sm:       8px;
    --sks-spacing-md:       16px;
    --sks-spacing-lg:       24px;
    --sks-spacing-xl:       32px;
    --sks-touch-target:     44px;
    --sks-font-size-mobile: 16px; /* iOS 확대 방지 */

    /* 모양 */
    --sks-radius-sm:        var(--radius-md);
    --sks-radius:           var(--radius-lg);
    --sks-radius-lg:        var(--radius-xl);
    --sks-radius-pill:      var(--radius-full);

    --sks-shadow-sm:        var(--shadow-sm);
    --sks-shadow:           var(--shadow-sm);
    --sks-shadow-md:        var(--shadow-md);
    --sks-shadow-lg:        var(--shadow-lg);
    --sks-shadow-modal:     var(--shadow-xl);

    --sks-transition:       all var(--transition-fast);

    /* 레이어 */
    --sks-z-sticky:         50;
    --sks-z-sidebar:        900;
    --sks-z-modal:          100000;
    --sks-z-modal-stacked:  100010;
    --sks-z-modal-stacked-2: 100020;
    --sks-z-toast:          100100;
}


/* =====================================================================
 *  버튼
 *  ---------------------------------------------------------------------
 *  구조:  .sks-fe-btn [변형] [크기] [상태]
 *  변형:  -primary -secondary -success -danger -warning -info -accent
 *         -outline -ghost
 *  크기:  -sm  -lg  -block  -icon
 *  상태:  .is-loading  .sks-fe-btn-active  :disabled
 *
 *  ⚠️ 버튼에 style="color:#ef4444" 같은 인라인 색상을 넣지 말 것.
 *     해당하는 변형 클래스를 쓰거나, 없으면 여기에 추가한다.
 * ===================================================================== */

.sks-fe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 20px;
    border: 1px solid var(--sks-border);
    border-radius: var(--sks-radius);
    background: var(--sks-surface);
    color: var(--sks-text-body);
    font-family: inherit;
    font-size: var(--sks-text-base);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: var(--sks-transition);
}

.sks-fe-btn:hover:not(:disabled) {
    background: var(--sks-surface-alt);
    border-color: var(--sks-border-strong);
    color: var(--sks-text);
}

.sks-fe-btn:focus-visible {
    outline: 2px solid var(--sks-primary);
    outline-offset: 2px;
}

.sks-fe-btn:disabled,
.sks-fe-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 아이콘은 인라인 SVG(.sks-icon). 글자색을 그대로 따라간다. */
.sks-icon {
    flex-shrink: 0;
    vertical-align: -0.15em;
}

.sks-fe-btn .sks-icon,
.sks-fe-btn .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 16px;
    flex-shrink: 0;
}

/* ── 채움 변형 ── */
.sks-fe-btn-primary {
    background: var(--sks-primary);
    border-color: var(--sks-primary);
    color: #fff;
}
.sks-fe-btn-primary:hover:not(:disabled) {
    background: var(--sks-primary-hover);
    border-color: var(--sks-primary-hover);
    color: #fff;
}

.sks-fe-btn-success {
    background: var(--sks-success);
    border-color: var(--sks-success);
    color: #fff;
}
.sks-fe-btn-success:hover:not(:disabled) {
    background: var(--sks-success-hover);
    border-color: var(--sks-success-hover);
    color: #fff;
}

.sks-fe-btn-danger {
    background: var(--sks-danger);
    border-color: var(--sks-danger);
    color: #fff;
}
.sks-fe-btn-danger:hover:not(:disabled) {
    background: var(--sks-danger-hover);
    border-color: var(--sks-danger-hover);
    color: #fff;
}

.sks-fe-btn-warning {
    background: var(--sks-warning);
    border-color: var(--sks-warning);
    color: #fff;
}
.sks-fe-btn-warning:hover:not(:disabled) {
    background: var(--sks-warning-hover);
    border-color: var(--sks-warning-hover);
    color: #fff;
}

.sks-fe-btn-secondary {
    background: var(--sks-text-muted);
    border-color: var(--sks-text-muted);
    color: #fff;
}
.sks-fe-btn-secondary:hover:not(:disabled) {
    background: var(--sks-text-body);
    border-color: var(--sks-text-body);
    color: #fff;
}

/* ── 연한 변형 — 툴바의 보조 액션용.
      기존에 style="color:#..." 로 표현하던 의미를 대체한다. ── */
.sks-fe-btn-soft-danger {
    background: var(--sks-surface);
    border-color: var(--sks-border);
    color: var(--sks-danger);
}
.sks-fe-btn-soft-danger:hover:not(:disabled) {
    background: var(--sks-danger-soft);
    border-color: var(--sks-danger);
    color: var(--sks-danger-hover);
}

.sks-fe-btn-soft-info {
    background: var(--sks-surface);
    border-color: var(--sks-border);
    color: var(--sks-info);
}
.sks-fe-btn-soft-info:hover:not(:disabled) {
    background: var(--sks-info-soft);
    border-color: var(--sks-info);
    color: var(--sks-info-hover);
}

.sks-fe-btn-soft-accent {
    background: var(--sks-surface);
    border-color: var(--sks-border);
    color: var(--sks-accent);
}
.sks-fe-btn-soft-accent:hover:not(:disabled) {
    background: var(--sks-accent-soft);
    border-color: var(--sks-accent);
    color: var(--sks-accent-hover);
}

.sks-fe-btn-soft-warning {
    background: var(--sks-surface);
    border-color: var(--sks-border);
    color: var(--sks-warning-hover);
}
.sks-fe-btn-soft-warning:hover:not(:disabled) {
    background: var(--sks-warning-soft);
    border-color: var(--sks-warning);
    color: var(--sks-warning-text);
}

.sks-fe-btn-soft-success {
    background: var(--sks-surface);
    border-color: var(--sks-border);
    color: var(--sks-success-text);
}
.sks-fe-btn-soft-success:hover:not(:disabled) {
    background: var(--sks-success-soft);
    border-color: var(--sks-success);
    color: var(--sks-success-text);
}

/* ── 테두리/투명 변형 ── */
.sks-fe-btn-outline {
    background: transparent;
    border-color: var(--sks-border-strong);
    color: var(--sks-text);
}
.sks-fe-btn-outline:hover:not(:disabled) {
    background: var(--sks-surface-alt);
    border-color: var(--sks-text-subtle);
}

.sks-fe-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--sks-text-muted);
}
.sks-fe-btn-ghost:hover:not(:disabled) {
    background: var(--sks-surface-sunken);
    border-color: transparent;
    color: var(--sks-text);
}

/* ── 크기 ── */
.sks-fe-btn-sm {
    padding: 6px 12px;
    font-size: var(--sks-text-sm);
}
.sks-fe-btn-sm .sks-icon,
.sks-fe-btn-sm .dashicons {
    width: 14px;
    height: 14px;
    font-size: 14px;
    line-height: 14px;
}

.sks-fe-btn-lg {
    padding: 13px 24px;
    font-size: var(--sks-text-lg);
}

.sks-fe-btn-block {
    display: flex;
    width: 100%;
}

/* 아이콘만 있는 정사각 버튼 */
.sks-fe-btn-icon {
    padding: 9px;
    aspect-ratio: 1;
}
.sks-fe-btn-icon.sks-fe-btn-sm {
    padding: 6px;
}

/* ── 상태 ── */
.sks-fe-btn-active,
.sks-fe-btn.active {
    background: var(--sks-primary);
    border-color: var(--sks-primary);
    color: #fff;
}
.sks-fe-btn-active:hover:not(:disabled),
.sks-fe-btn.active:hover:not(:disabled) {
    background: var(--sks-primary-hover);
    border-color: var(--sks-primary-hover);
    color: #fff;
}

/* 로딩 — 아이콘을 스피너로 바꾸지 않고도 처리 가능 */
.sks-fe-btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.sks-fe-btn.is-loading > * {
    visibility: hidden;
}
.sks-fe-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    animation: sks-spin 0.7s linear infinite;
    color: var(--sks-text-muted);
}
.sks-fe-btn-primary.is-loading::after,
.sks-fe-btn-success.is-loading::after,
.sks-fe-btn-danger.is-loading::after,
.sks-fe-btn-warning.is-loading::after,
.sks-fe-btn-secondary.is-loading::after {
    color: #fff;
}

@keyframes sks-spin {
    to { transform: rotate(360deg); }
}

/* 회전 아이콘 — SVG/dashicons 공통 */
.sks-spin {
    animation: sks-spin 1s linear infinite;
    transform-origin: center;
}

/* 상태색 아이콘 */
.sks-icon-success { color: var(--sks-success); }
.sks-icon-danger  { color: var(--sks-danger); }
.sks-icon-muted   { color: var(--sks-text-subtle); }

/* ── 버튼 그룹 ── */
.sks-fe-btn-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.sks-fe-btn-group-attached {
    display: inline-flex;
}
.sks-fe-btn-group-attached .sks-fe-btn {
    border-radius: 0;
    margin-left: -1px;
}
.sks-fe-btn-group-attached .sks-fe-btn:first-child {
    border-radius: var(--sks-radius) 0 0 var(--sks-radius);
    margin-left: 0;
}
.sks-fe-btn-group-attached .sks-fe-btn:last-child {
    border-radius: 0 var(--sks-radius) var(--sks-radius) 0;
}


/* =====================================================================
 *  칩 (필터 / 토글) — 알약형
 *  ---------------------------------------------------------------------
 *  버튼과 역할이 다르다.
 *    .sks-fe-btn   → "행동한다" (업로드, 저장, 삭제)   — 사각형
 *    .sks-fe-chip  → "고른다"   (카테고리 필터, 토글)  — 알약형
 *
 *  둘 다 같은 토큰을 쓰므로 색·테두리·전환이 자동으로 일치한다.
 *  페이지별로 알약 버튼을 새로 만들지 말고 이 클래스를 쓸 것.
 *
 *  ⚠️ 아래 페이지 전용 클래스들은 JS 셀렉터가 이미 물려 있어 이름을 유지하되,
 *     스타일은 여기 한곳에서만 정의한다(단일 출처).
 * ===================================================================== */

.sks-fe-chip,
.sks-img-category-tag,
.sks-sample-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid var(--sks-border);
    border-radius: var(--sks-radius-pill);
    background: var(--sks-surface);
    color: var(--sks-text-muted);
    font-family: inherit;
    font-size: var(--sks-text-sm);
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: var(--sks-transition);
}

.sks-fe-chip:hover,
.sks-img-category-tag:hover,
.sks-sample-toggle:hover {
    border-color: var(--sks-primary-border);
    background: var(--sks-primary-soft);
    color: var(--sks-primary);
}

/* 선택됨 */
.sks-fe-chip.active,
.sks-fe-chip.is-active,
.sks-img-category-tag.active {
    border-color: var(--sks-primary);
    background: var(--sks-primary);
    color: #fff;
    font-weight: 600;
}

.sks-fe-chip.active:hover,
.sks-img-category-tag.active:hover {
    border-color: var(--sks-primary-hover);
    background: var(--sks-primary-hover);
    color: #fff;
}

.sks-fe-chip .sks-icon,
.sks-img-category-tag .sks-icon,
.sks-sample-toggle .sks-icon,
.sks-fe-chip .dashicons,
.sks-img-category-tag .dashicons,
.sks-sample-toggle .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
    line-height: 15px;
    flex-shrink: 0;
}

/* 칩 안의 개수 배지 */
.sks-fe-chip-count,
.sks-cat-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 19px;
    padding: 0 6px;
    margin-left: 2px;
    border-radius: var(--sks-radius-pill);
    font-size: 11px;
    font-weight: 700;
    background: rgba(15, 23, 42, 0.07);
    color: inherit;
}

.sks-fe-chip.active .sks-fe-chip-count,
.sks-img-category-tag.active .sks-cat-count {
    background: rgba(255, 255, 255, 0.25);
}

/* ── 강조 색상 변형 — 의미가 다른 토글에 사용 ── */
.sks-fe-chip-warning,
.sks-sample-toggle {
    border-color: var(--sks-warning-tint);
    background: var(--sks-warning-soft);
    color: var(--sks-warning-text);
    font-weight: 600;
}

.sks-fe-chip-warning:hover,
.sks-sample-toggle:hover {
    border-color: var(--sks-warning);
    background: #fef3c7;
    color: var(--sks-warning-text);
}

.sks-fe-chip-warning.active,
.sks-sample-toggle.active {
    border-color: var(--sks-warning-hover);
    background: var(--sks-warning-hover);
    color: #fff;
}

.sks-fe-chip-warning.active:hover,
.sks-sample-toggle.active:hover {
    border-color: #b45309;
    background: #b45309;
    color: #fff;
}


/* =====================================================================
 *  통계 타일 (요약 지표)
 *  ---------------------------------------------------------------------
 *  ⚠️ 이 컴포넌트는 지금까지 @media 블록 안에만 정의돼 있어서
 *     데스크탑에서 카드 없이 세로로 흘러내렸다. 기본 정의를 여기 둔다.
 * ===================================================================== */

.sks-fe-summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.sks-fe-summary-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
    background: var(--sks-surface);
    border: 1px solid var(--sks-border);
    border-radius: var(--sks-radius-lg);
    box-shadow: var(--sks-shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
}

.sks-fe-summary-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sks-shadow-lg);
}

.sks-fe-summary-value {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--sks-text-strong);
}

.sks-fe-summary-label {
    font-size: var(--sks-text-sm);
    font-weight: 500;
    color: var(--sks-text-muted);
}

/* 샘플 지표는 강조색 */
.sks-fe-summary-card-sample .sks-fe-summary-value {
    color: var(--sks-warning-hover);
}


/* =====================================================================
 *  뱃지
 * ===================================================================== */

.sks-fe-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: var(--sks-radius-pill);
    font-size: var(--sks-text-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.sks-fe-badge-primary { background: var(--sks-primary-soft);  color: var(--sks-primary-hover); border-color: var(--sks-primary-border); }
.sks-fe-badge-success { background: var(--sks-success-soft);  color: var(--sks-success-text);  border-color: var(--sks-success-tint); }
.sks-fe-badge-danger  { background: var(--sks-danger-soft);   color: var(--sks-danger-text);   border-color: var(--sks-danger-tint); }
.sks-fe-badge-warning { background: var(--sks-warning-soft);  color: var(--sks-warning-text);  border-color: var(--sks-warning-tint); }
.sks-fe-badge-info    { background: var(--sks-info-soft);     color: var(--sks-info-text);     border-color: #c7d2fe; }
.sks-fe-badge-neutral { background: var(--sks-surface-sunken); color: var(--sks-text-muted);   border-color: var(--sks-border); }


/* =====================================================================
 *  패널 (헤더/본문/푸터를 가진 컨테이너)
 *  ---------------------------------------------------------------------
 *  ⚠️ .sks-fe-card 는 이미 "통계 타일"(라벨 + 큰 숫자)로 쓰이고 있어
 *     이름을 재사용하지 않는다. 컨테이너형 카드는 panel 이라고 부른다.
 * ===================================================================== */

.sks-fe-panel {
    background: var(--sks-surface);
    border: 1px solid var(--sks-border);
    border-radius: var(--sks-radius-lg);
    box-shadow: var(--sks-shadow-sm);
    overflow: hidden;
}

.sks-fe-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--sks-border);
}

.sks-fe-panel-title {
    margin: 0;
    font-size: var(--sks-text-lg);
    font-weight: 700;
    color: var(--sks-text);
}

.sks-fe-panel-body {
    padding: 20px;
}

.sks-fe-panel-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--sks-border);
    background: var(--sks-surface-alt);
}


/* =====================================================================
 *  섹션 헤더 — 페이지 안의 구획 제목 + 우측 액션
 * ===================================================================== */

.sks-fe-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.sks-fe-section-header h2,
.sks-fe-section-header h3 {
    margin: 0;
    font-size: var(--sks-text-lg);
    font-weight: 700;
    color: var(--sks-text);
}

.sks-fe-section-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


/* =====================================================================
 *  빈 상태
 * ===================================================================== */

/* ⚠️ .sks-fe-empty 기본 규칙은 frontend-dashboard.css 가 이미 갖고 있고
   (text-align:center + padding) 기존 마크업 다수가 의존한다.
   여기서는 새 구조를 쓰는 화면을 위한 하위 요소만 추가한다(가산적).
   기존 마크업은 손대지 않아도 그대로 동작한다. */

/* 새 구조를 쓸 때만 붙인다 — 아이콘/제목/설명/액션을 세로 정렬 */
.sks-fe-empty-rich {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 48px 24px;
    text-align: center;
    color: var(--sks-text-muted);
}

.sks-fe-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--sks-surface-sunken);
    color: var(--sks-text-subtle);
}

.sks-fe-empty-icon .sks-icon { width: 28px; height: 28px; }
.sks-fe-empty-icon .dashicons {
    font-size: 30px;
    width: 30px;
    height: 30px;
    line-height: 30px;
}

.sks-fe-empty-title {
    margin: 0;
    font-size: var(--sks-text-lg);
    font-weight: 600;
    color: var(--sks-text);
}

.sks-fe-empty-text {
    margin: 0;
    font-size: var(--sks-text-base);
    color: var(--sks-text-muted);
}

.sks-fe-empty-rich .sks-fe-btn {
    margin-top: 10px;
}


/* =====================================================================
 *  탭
 *  ---------------------------------------------------------------------
 *  business / editor / discovery 가 각자 탭을 구현하고 있었다.
 *  기존 클래스명은 JS 셀렉터 때문에 유지하되 스타일은 여기서만 정의한다.
 * ===================================================================== */

.sks-fe-tabs,
.sks-biz-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid var(--sks-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.sks-fe-tabs::-webkit-scrollbar,
.sks-biz-tabs::-webkit-scrollbar { display: none; }

.sks-fe-tab,
.sks-biz-tab,
.sks-editor-tab {
    padding: 11px 20px;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    background: none;
    color: var(--sks-text-muted);
    font-family: inherit;
    font-size: var(--sks-text-base);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--sks-transition);
}

.sks-fe-tab:hover,
.sks-biz-tab:hover,
.sks-editor-tab:hover {
    color: var(--sks-text);
    background: var(--sks-surface-alt);
}

.sks-fe-tab.active,
.sks-biz-tab.active,
.sks-editor-tab.active {
    color: var(--sks-primary);
    border-bottom-color: var(--sks-primary);
    font-weight: 600;
    background: none;
}


/* =====================================================================
 *  아코디언
 *  ---------------------------------------------------------------------
 *  부수적인 항목을 접어 두고 본질에 집중시키기 위한 컴포넌트.
 *  <details>/<summary> 기반이라 JS 없이 동작하고 접근성도 확보된다.
 * ===================================================================== */

.sks-fe-acc {
    border: 1px solid var(--sks-border);
    border-radius: var(--sks-radius);
    background: var(--sks-surface);
    overflow: hidden;
}

.sks-fe-acc + .sks-fe-acc {
    margin-top: 8px;
}

.sks-fe-acc > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--sks-surface-alt);
    color: var(--sks-text-muted);
    font-size: var(--sks-text-sm);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: var(--sks-transition);
}

.sks-fe-acc > summary::-webkit-details-marker { display: none; }

.sks-fe-acc > summary:hover {
    background: var(--sks-surface-sunken);
    color: var(--sks-text);
}

/* 펼침 화살표 */
.sks-fe-acc > summary::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.sks-fe-acc[open] > summary::before {
    transform: rotate(90deg);
}

.sks-fe-acc[open] > summary {
    border-bottom: 1px solid var(--sks-border);
}

/* 접혀 있을 때 안에 무엇이 들었는지 알려주는 요약 */
.sks-fe-acc-hint {
    margin-left: auto;
    font-size: var(--sks-text-xs);
    font-weight: 400;
    color: var(--sks-text-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 내용이 채워져 있으면 요약에 점을 찍어 알린다 */
.sks-fe-acc-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sks-primary);
    flex-shrink: 0;
}

.sks-fe-acc-body {
    padding: 14px;
}

/* 여백 없는 변형 — 장면 카드처럼 촘촘한 곳 */
.sks-fe-acc-compact > summary {
    padding: 7px 10px;
    font-size: var(--sks-text-xs);
}
.sks-fe-acc-compact .sks-fe-acc-body {
    padding: 10px;
}


/* =====================================================================
 *  프로그레스 바
 *  ---------------------------------------------------------------------
 *  같은 것이 5번 따로 구현돼 있었다 (fe / serp / img / disc / admin).
 *  전부 이 규격으로 통일한다.
 * ===================================================================== */

.sks-fe-progress,
.sks-serp-progress-bar,
.sks-img-progress-bar,
.sks-disc-progress-bar {
    position: relative;
    width: 100%;
    height: 8px;
    border-radius: var(--sks-radius-pill);
    background: var(--sks-surface-sunken);
    overflow: hidden;
}

.sks-fe-progress-bar,
.sks-serp-progress-fill,
.sks-img-progress-fill,
.sks-disc-progress-fill {
    height: 100%;
    border-radius: var(--sks-radius-pill);
    background: linear-gradient(90deg, var(--sks-primary), var(--sks-primary-light));
    transition: width 0.3s ease;
}

/* 상태 변형 */
.sks-fe-progress-success .sks-fe-progress-bar,
.sks-fe-progress-bar.is-success {
    background: linear-gradient(90deg, var(--sks-success), #34d399);
}
.sks-fe-progress-danger .sks-fe-progress-bar,
.sks-fe-progress-bar.is-danger {
    background: linear-gradient(90deg, var(--sks-danger), #f87171);
}


/* =====================================================================
 *  페이지네이션
 * ===================================================================== */

.sks-fe-pagination,
.sks-img-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 24px;
}

.sks-fe-page-btn,
.sks-img-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--sks-border);
    border-radius: var(--sks-radius-sm);
    background: var(--sks-surface);
    color: var(--sks-text-body);
    font-family: inherit;
    font-size: var(--sks-text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: var(--sks-transition);
}

.sks-fe-page-btn:hover,
.sks-img-page-btn:hover {
    border-color: var(--sks-primary-border);
    background: var(--sks-primary-soft);
    color: var(--sks-primary);
}

.sks-fe-page-btn.is-active,
.sks-img-page-active {
    border-color: var(--sks-primary);
    background: var(--sks-primary);
    color: #fff;
    font-weight: 700;
}

.sks-fe-page-btn:disabled,
.sks-img-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* =====================================================================
 *  표 (테이블)
 * ===================================================================== */

.sks-fe-table {
    width: 100%;
    border-collapse: collapse;
}

.sks-fe-table th,
.sks-fe-table td {
    padding: 12px 16px;
    text-align: left;
    /* 본문은 15px지만 표는 데이터 밀도 유지를 위해 14px 고정 */
    font-size: var(--sks-text-base);
    border-bottom: 1px solid var(--sks-surface-sunken);
}

.sks-fe-table th {
    font-size: var(--sks-text-xs);
    font-weight: 700;
    color: var(--sks-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--sks-surface-alt);
    white-space: nowrap;
}

.sks-fe-table tbody tr {
    transition: background 0.12s;
}

.sks-fe-table tbody tr:hover {
    background: var(--sks-surface-alt);
}

.sks-fe-table tbody tr:last-child td {
    border-bottom: none;
}

/* 가로 스크롤 래퍼 — 컬럼 많은 표가 페이지를 밀어내지 않도록 */
.sks-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* =====================================================================
 *  알림 (토스트)
 * ===================================================================== */

.sks-fe-notify {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: var(--sks-z-toast);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 380px;
    padding: 13px 18px;
    border: 1px solid var(--sks-border);
    border-left: 4px solid var(--sks-text-subtle);
    border-radius: var(--sks-radius);
    background: var(--sks-surface);
    box-shadow: var(--sks-shadow-lg);
    color: var(--sks-text);
    font-size: var(--sks-text-base);
    line-height: 1.5;
    animation: sks-notify-in 0.22s ease;
}

@keyframes sks-notify-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sks-fe-notify-success { border-left-color: var(--sks-success); }
.sks-fe-notify-error   { border-left-color: var(--sks-danger); }
.sks-fe-notify-info    { border-left-color: var(--sks-primary); }
.sks-fe-notify-warning { border-left-color: var(--sks-warning); }


/* =====================================================================
 *  폼 컨트롤 (input / select / textarea)
 *  ---------------------------------------------------------------------
 *  ⚠️ .sks-fe-input 은 지금까지 keyword-discovery.css 에만 정의돼 있었다.
 *     그 파일은 "키워드 발견" 페이지에서만 로드되므로, 설정·이미지·통계 등
 *     나머지 모든 화면에서 입력창이 브라우저 기본 스타일(두꺼운 검은 테두리)로
 *     그려지고 있었다. 전역 규격을 여기 둔다.
 *
 *  버튼과 높이를 맞춘다 — 같은 줄에 놓았을 때 어긋나지 않도록.
 * ===================================================================== */

.sks-fe-input,
.sks-fe-select,
.sks-fe-textarea,
.sks-fe-modal input[type="text"],
.sks-fe-modal input[type="number"],
.sks-fe-modal input[type="date"],
.sks-fe-modal textarea,
.sks-fe-modal select {
    display: inline-block;
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--sks-border-strong);
    border-radius: var(--sks-radius);
    background: var(--sks-surface);
    color: var(--sks-text);
    font-family: inherit;
    font-size: var(--sks-text-base);
    line-height: 1.4;
    transition: var(--sks-transition);
    box-sizing: border-box;
}

.sks-fe-input:hover:not(:disabled):not([readonly]),
.sks-fe-select:hover:not(:disabled),
.sks-fe-textarea:hover:not(:disabled) {
    border-color: var(--sks-text-subtle);
}

.sks-fe-input:focus,
.sks-fe-select:focus,
.sks-fe-textarea:focus,
.sks-fe-modal input:focus,
.sks-fe-modal textarea:focus,
.sks-fe-modal select:focus {
    outline: none;
    border-color: var(--sks-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.sks-fe-input:disabled,
.sks-fe-select:disabled,
.sks-fe-textarea:disabled {
    background: var(--sks-surface-sunken);
    color: var(--sks-text-subtle);
    cursor: not-allowed;
}

/* 읽기 전용 — 값은 보이되 편집 불가임을 시각적으로 알린다 */
.sks-fe-input[readonly],
.sks-fe-textarea[readonly] {
    background: var(--sks-surface-alt);
    color: var(--sks-text-muted);
}

.sks-fe-input::placeholder,
.sks-fe-textarea::placeholder {
    color: var(--sks-text-subtle);
}

.sks-fe-textarea,
.sks-fe-modal textarea {
    display: block;
    width: 100%;
    min-height: 72px;
    resize: vertical;
}

/* 셀렉트 — 기본 화살표 대신 통일된 caret */
.sks-fe-select,
.sks-fe-modal select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

/* 모노스페이스 값(API Key, 토큰 등) */
.sks-fe-input-mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: var(--sks-text-sm);
    letter-spacing: 0.02em;
}

/* 남은 공간을 채우는 입력창 */
.sks-fe-input-grow { flex: 1; min-width: 0; }

/* 라벨 / 설명 */
.sks-fe-label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--sks-text-sm);
    font-weight: 600;
    color: var(--sks-text);
}

/* 컨트롤과 같은 줄에 놓는 라벨 */
.sks-fe-label-inline {
    display: inline-block;
    margin: 0;
    white-space: nowrap;
}

.sks-fe-hint,
.sks-fe-desc {
    font-size: var(--sks-text-xs);
    color: var(--sks-text-muted);
    line-height: 1.6;
}

/* =====================================================================
 *  유틸리티
 *  ---------------------------------------------------------------------
 *  템플릿에 반복되던 인라인 style을 대체한다.
 *  ⚠️ display:none 은 JS가 토글하므로 인라인으로 남겨둔다 (여기서 다루지 않음).
 * ===================================================================== */

.sks-w-full   { width: 100%; }
.sks-mt-1     { margin-top: 4px; }
.sks-mt-2     { margin-top: 8px; }
.sks-mt-3     { margin-top: 12px; }
.sks-mt-4     { margin-top: 16px; }
.sks-mt-5     { margin-top: 24px; }
.sks-ml-auto  { margin-left: auto; }
.sks-text-center { text-align: center; }
.sks-text-right  { text-align: right; }
.sks-flex-1   { flex: 1; min-width: 0; }
.sks-required { color: var(--sks-danger); }

/* 세로 스크롤이 필요한 영역 */
.sks-fe-scroll-y {
    max-height: 70vh;
    overflow-y: auto;
}

/* 좁은 숫자 입력 */
.sks-fe-input-xs { width: 70px;  max-width: 100%; }
.sks-fe-input-sm { width: 100px; max-width: calc(100vw - 48px); }
.sks-fe-input-xxs { width: 32px; max-width: 100%; }

/* 인라인 코드 */
.sks-fe-code {
    display: inline-block;
    margin: 4px 0;
    padding: 2px 6px;
    border: 1px solid var(--sks-border);
    border-radius: var(--sks-radius-sm);
    background: var(--sks-surface-sunken);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: var(--sks-text-sm);
    color: var(--sks-text-body);
}

/* 안내 상자 (사용법·주의사항) */
.sks-fe-callout {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--sks-border);
    border-radius: var(--sks-radius);
    background: var(--sks-surface-alt);
    font-size: var(--sks-text-sm);
    line-height: 1.7;
    color: var(--sks-text-body);
}
.sks-fe-callout strong { color: var(--sks-text); }

/* 체크박스 묶음 */
.sks-fe-check-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 8px 0;
}
.sks-fe-check-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--sks-text-sm);
    color: var(--sks-text-body);
    cursor: pointer;
}

/* 범례용 색 점 */
.sks-fe-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sks-text-subtle);
}
.sks-fe-dot-success { background: var(--sks-success); }
.sks-fe-dot-warning { background: var(--sks-warning); }
.sks-fe-dot-danger  { background: var(--sks-danger); }
.sks-fe-dot-primary { background: var(--sks-primary); }

/* 큰 상태 아이콘 */
.sks-fe-icon-xl {
    font-size: 48px !important;
    width: 48px;
    height: 48px;
}
.sks-fe-icon-success { color: var(--sks-success); }
.sks-fe-icon-danger  { color: var(--sks-danger); }
.sks-fe-icon-muted   { color: var(--sks-text-subtle); }

/* 차트가 들어가는 고정 높이 영역 */
.sks-fe-chart-box {
    position: relative;
    height: 300px;
    margin-top: 16px;
}

/* 로딩 / 비어있음 안내 (표·차트 아래).
   그리드 안에 놓이면 한 칸(최소폭)에 갇혀 글자가 세로로 깨지므로 전체 폭을 차지시킨다. */
.sks-fe-state-msg {
    grid-column: 1 / -1;
    padding: 40px 20px;
    text-align: center;
    color: var(--sks-text-subtle);
    font-size: var(--sks-text-base);
}

/* 컨트롤을 가로로 늘어놓는 줄 (입력 + 버튼 조합) */
.sks-fe-control-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

/* iOS 확대 방지 — 모바일에서 입력 글씨는 16px 이상 */
@media (max-width: 768px) {
    .sks-fe-input,
    .sks-fe-select,
    .sks-fe-textarea {
        font-size: var(--sks-font-size-mobile);
    }
}


/* =====================================================================
 *  폼 필드
 * ===================================================================== */

.sks-fe-field {
    margin-bottom: 16px;
}

.sks-fe-field > label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--sks-text-sm);
    font-weight: 600;
    color: var(--sks-text);
}

.sks-fe-field-hint {
    display: block;
    margin-top: 4px;
    font-size: var(--sks-text-xs);
    color: var(--sks-text-subtle);
    line-height: 1.5;
}

.sks-fe-field-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.sks-fe-field-row > .sks-fe-field {
    flex: 1;
    min-width: 180px;
}