/* ============================================================
   FluxHub — 플러그인 화면 라이트 오버라이드
   ------------------------------------------------------------
   대상: FluxBoard 게시판 · FluxShop 상점이 숏코드로 그리는 마크업.
   플러그인 파일은 건드리지 않고 색·형태만 여기서 덮는다.

   기준: 웹쟁이(webjangi.com) 목록 화면을 1:1로 대조.
     · 배경 흰색, 카드 흰색 + 아주 옅은 그림자, 테두리 없음
     · 카드 라디우스 12px, 커버 이미지가 카드 상단을 꽉 채움
     · 필터/카테고리는 알약 칩 — 활성=채운 포인트색, 비활성=흰 배경+연회색 테두리
     · 버튼도 알약
     · 메타(작성자·조회수)는 카드 하단 한 줄, 회색 13~14px
   ============================================================ */

.fs-plugin {
    /* 플러그인 마크업이 어두운 색을 상속하지 않게 기준을 다시 세운다 */
    color: var(--fs-ink);
    font-size: 15.5px;
}

/*
 * 글꼴 통일.
 * 플러그인 화면 일부(카테고리·필터·정렬)에서 한글이 □□□ 로 깨져 나왔다.
 * 그 요소들만 다른 글꼴 스택을 지정하고 있었고 그 글꼴이 없으면 두부가 된다.
 * 화면 전체를 사이트 글꼴로 묶어 둔다.
 */
.fs-plugin,
.fs-plugin * {
    /* 플러그인 CSS 가 !important 로 글꼴을 잡고 있어 같은 무기가 필요하다.
       지정된 글꼴이 서버·기기에 없으면 한글이 두부(□)로 렌더된다 —
       웹폰트로 강제해 어느 환경에서나 같게 보이도록 한다. */
    font-family: var(--fs-font) !important;
}

/* 아이콘 폰트는 글꼴 통일 대상이 아니다.
 * 위 규칙이 `*` 로 전부 잡아 아이콘 글리프(dashicons)까지 본문 글꼴로 덮어썼다 —
 * 그 코드포인트가 Pretendard 에는 없어 두부(▤)로 렌더됐다(마이페이지 사이드바 실제 증상).
 * 기존 규칙의 의도(한글 두부 방지)는 그대로 두고, 아이콘 글꼴만 되돌린다.
 * 이 테마 안에서 확인된 아이콘 폰트는 dashicons 뿐이다(FluxBoard·FluxShop 은
 * 자체 아이콘 폰트가 없음 — @font-face 미검출). 다른 아이콘 폰트가 추가되면
 * 같은 방식으로 선택자를 더한다. */
.fs-plugin .dashicons,
.fs-plugin .dashicons-before::before,
.fs-plugin [class^="dashicons-"],
.fs-plugin [class*=" dashicons-"] {
    font-family: dashicons !important;
}

/* ── 배경·문자색 정규화 ───────────────────────────────

   예전에는 위 목록의 모든 요소에 background-color:transparent 를 걸어
   다크 스킨의 표면을 통째로 지웠다. 그 방식은 두 가지를 같이 죽였다 —
   지우려던 '다크 표면'과, 지우면 안 되는 '의미 있는 표면'(모달 패널,
   쿠폰 금액 패널, 뱃지 등). 실제로 취소 모달이 배경을 잃어 글자가 겹쳤고,
   쿠폰 금액은 흰 글자가 흰 배경에 얹혀 사라졌다.

   지금은 아래 '토큰 정규화'(--fhs-*, --fm-*)가 표면 색 자체를 라이트로
   바꾸므로, 배경을 지울 이유가 없다. 테두리 색만 우리 톤으로 맞춘다.
   (하드코딩된 다크 배경이 남아 있으면 개별 예외로 잡는다.) */
.fs-plugin,
.fs-plugin div,
.fs-plugin section,
.fs-plugin article,
.fs-plugin aside,
.fs-plugin header,
.fs-plugin footer,
.fs-plugin table,
.fs-plugin thead,
.fs-plugin tbody,
.fs-plugin tr,
.fs-plugin ul,
.fs-plugin ol,
.fs-plugin li,
.fs-plugin form,
.fs-plugin nav {
    border-color: var(--fs-line);
}

/* 배경 정규화의 예외 — 떠 있는 레이어(모달).
   위 규칙은 `.fs-plugin div`(0,1,1)라 플러그인의 `.fhs-modal__panel`(0,1,0)을 이긴다.
   그래서 취소·반품 신청 모달이 배경을 잃고 뒤 화면과 글자가 겹쳐 읽을 수 없었다.
   (예전 로그인 카드에서 겪은 것과 같은 결함이다 — 예외는 그때그때가 아니라 여기 모아 둔다.) */
.fs-plugin .fhs-modal__overlay {
    background-color: rgba(17, 24, 39, .55);
}

.fs-plugin .fhs-modal__panel {
    background-color: #fff;
    border: 1px solid var(--fs-line);
    border-radius: 14px;
}

.fs-plugin h1, .fs-plugin h2, .fs-plugin h3,
.fs-plugin h4, .fs-plugin h5, .fs-plugin strong, .fs-plugin b,
.fs-plugin td, .fs-plugin th, .fs-plugin p, .fs-plugin span, .fs-plugin li {
    color: var(--fs-ink);
}
.fs-plugin a { color: var(--fs-ink); }
.fs-plugin a:hover { color: var(--fs-accent); }

/* 회색으로 남겨야 읽기 좋은 보조 정보 */
.fs-plugin .fluxboard-list__meta,
.fs-plugin .fluxboard-post__meta,
.fs-plugin [class*="__date"],
.fs-plugin [class*="__hit"],
.fs-plugin [class*="__count"],
.fs-plugin [class*="-meta"],
.fs-plugin small {
    color: var(--fs-ink-3);
}

/* ── 표(게시판 목록) ────────────────────────────────── */
.fs-plugin table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}
.fs-plugin thead th {
    background: var(--fs-bg-soft);
    color: var(--fs-ink);
    font-size: 14px;
    font-weight: 700;
    padding: 14px 16px;
    border-bottom: 1px solid var(--fs-line);
    white-space: nowrap;
}
.fs-plugin tbody td {
    padding: 16px;
    border-bottom: 1px solid var(--fs-line);
    font-size: 15px;
}
.fs-plugin tbody tr:hover td { background: var(--fs-bg-soft); }

/* 제목 칸은 굵게 — 목록에서 눈이 먼저 가야 하는 곳 */
.fs-plugin td a[href*="post_id"],
.fs-plugin .fluxboard-list__subject a { font-weight: 600; }

/* ── 카드 그리드 (상품·갤러리) ─────────────────────────
   주의: [class*="-card"] 는 부분 일치라 `fhs-coupon-card__amount` 같은
   **하위 요소**까지 붙잡는다. 실제로 쿠폰 금액 패널의 네이비 배경을 흰색으로
   덮어써서 흰 글자가 흰 배경에 얹혔다(대비 1:1). 끝나는 위치로 한정한다.
   (같은 실수를 게시판 탭에서도 한 번 했다 — 부분 일치 선택자는 마지막 수단이다.) */
.fs-plugin [class$="product-card"],
.fs-plugin [class*="product-card "],
.fs-plugin [class$="-card"],
.fs-plugin [class*="-card "],
.fs-plugin [class*="gallery__item"] {
    background: #fff;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
    transition: box-shadow var(--fs-ease), transform var(--fs-ease);
}
.fs-plugin [class*="product-card"]:hover,
.fs-plugin [class*="gallery__item"]:hover {
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
}

/* 커버 이미지 — 카드 상단을 꽉 채운다 */
.fs-plugin [class*="card__image"],
.fs-plugin [class*="card__thumb"],
.fs-plugin [class*="__cover"] {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--fs-bg-sunken);
    overflow: hidden;
}
.fs-plugin [class*="card__image"] img,
.fs-plugin [class*="card__thumb"] img,
.fs-plugin [class*="__cover"] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fs-plugin [class*="card__body"] { padding: 14px 16px 16px; }
.fs-plugin [class*="card__name"],
.fs-plugin [class*="card__title"] {
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--fs-ink);
}
.fs-plugin [class*="card__price"] {
    font-size: 16px;
    font-weight: 700;
    color: var(--fs-ink);
    font-variant-numeric: tabular-nums;
}

/* ── 알약 버튼·칩 ───────────────────────────────────── */
.fs-plugin button,
.fs-plugin .button,
.fs-plugin [class*="btn"],
.fs-plugin input[type="submit"] {
    border-radius: var(--fs-r-full);
    font-family: inherit;
    font-weight: 600;
}

/* 기본(보조) 버튼 — 흰 배경 + 연회색 테두리 */
.fs-plugin button:not([class*="primary"]):not([class*="buy"]):not([class*="submit"]),
.fs-plugin [class*="btn"]:not([class*="primary"]):not([class*="buy"]) {
    background: #fff;
    border: 1px solid var(--fs-line-strong);
    color: var(--fs-ink);
}
.fs-plugin button:not([class*="primary"]):not([class*="buy"]):not([class*="submit"]):hover {
    border-color: var(--fs-ink-3);
}

/* 주 버튼 — 채운 포인트색 */
.fs-plugin [class*="primary"],
.fs-plugin [class*="buy"],
.fs-plugin input[type="submit"] {
    background: var(--fs-accent);
    border: 1px solid var(--fs-accent);
    color: #fff;
}
.fs-plugin [class*="primary"]:hover,
.fs-plugin [class*="buy"]:hover,
.fs-plugin input[type="submit"]:hover {
    background: var(--fs-accent-ink);
    border-color: var(--fs-accent-ink);
    color: #fff;
}

/*
 * 카테고리·필터 칩.
 *
 * 주의: `[class*="tab"] a` 같은 넓은 셀렉터를 쓰면 안 된다.
 * 게시판 표가 `fluxboard-board__table` 이라 "tab" 에 걸리고, 표 안의
 * 글 제목까지 알약 테두리를 뒤집어썼다(실제로 그렇게 깨졌다).
 * 칩은 실제 클래스명을 확인한 것만 지정한다.
 */
.fs-plugin .fluxboard-board__cat-link,
.fs-plugin .fluxshop-category__link,
.fs-plugin .fluxshop-filter__chip {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 18px;
    border: 1px solid var(--fs-line-strong);
    border-radius: var(--fs-r-full);
    background: #fff;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--fs-ink);
}
.fs-plugin .fluxboard-board__cat-link:hover,
.fs-plugin .fluxshop-category__link:hover { border-color: var(--fs-ink-3); }
.fs-plugin .fluxboard-board__cat-link.is-active,
.fs-plugin .fluxshop-category__link.is-active,
.fs-plugin .fluxshop-filter__chip.is-active {
    background: var(--fs-accent);
    border-color: var(--fs-accent);
    color: #fff;
}

/* 게시판 표 안의 링크는 본문 링크다 — 버튼처럼 보이면 안 된다 */
.fs-plugin table a {
    display: inline;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

/* ── 입력 요소 ──────────────────────────────────────── */
.fs-plugin input[type="text"],
.fs-plugin input[type="search"],
.fs-plugin input[type="email"],
.fs-plugin input[type="password"],
.fs-plugin input[type="number"],
.fs-plugin input[type="tel"],
.fs-plugin select,
.fs-plugin textarea {
    background: #fff;
    border: 1px solid var(--fs-line-strong);
    border-radius: var(--fs-r-full);
    color: var(--fs-ink);
    padding: 0 16px;
    height: 44px;
    font-family: inherit;
    font-size: 15px;
}
.fs-plugin textarea {
    height: auto;
    min-height: 120px;
    padding: 12px 16px;
    border-radius: var(--fs-r);
    line-height: 1.7;
}
.fs-plugin input:focus,
.fs-plugin select:focus,
.fs-plugin textarea:focus {
    outline: none;
    border-color: var(--fs-accent);
    box-shadow: 0 0 0 3px var(--fs-accent-soft);
}
.fs-plugin ::placeholder { color: #a4abb7; }

/* ── 페이지네이션 ───────────────────────────────────── */
.fs-plugin [class*="paging"] a,
.fs-plugin [class*="pagination"] a,
.fs-plugin [class*="paging"] span,
.fs-plugin [class*="pagination"] span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--fs-r-full);
    background: #fff;
    border: 1px solid var(--fs-line);
    color: var(--fs-ink-2);
    font-size: 14px;
}
.fs-plugin [class*="paging"] .active,
.fs-plugin [class*="pagination"] .active,
.fs-plugin [class*="paging"] [aria-current],
.fs-plugin [class*="pagination"] [aria-current] {
    background: var(--fs-accent);
    border-color: var(--fs-accent);
    color: #fff;
}

/* ── 이미지 자리 표시 ──────────────────────────────── */
.fs-plugin [class*="no-image"],
.fs-plugin [class*="placeholder"] {
    background: var(--fs-bg-sunken);
    color: var(--fs-ink-3);
}


/* ======================== 모바일 상품 그리드 ========================
   390px 에서 상품 카드가 4열로 눌려 상품명이 "핸드!원…" 처럼 잘렸다.
   좁은 화면에서는 2열로 고정한다. */
@media (max-width: 640px) {
    .fs-plugin .fluxshop-grid,
    .fs-plugin .fhs-shop-grid,
    .fs-plugin [class*="products"][class*="grid"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }
    .fs-plugin [class*="card__name"],
    .fs-plugin [class*="card__title"] {
        font-size: 14px;
        line-height: 1.45;
        white-space: normal;
        overflow: visible;
    }
    .fs-plugin [class*="card__price"] { font-size: 14.5px; }
    .fs-plugin [class*="card__body"] { padding: 10px 10px 12px; }
}

@media (max-width: 380px) {
    .fs-plugin .fluxshop-grid,
    .fs-plugin .fhs-shop-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* 취소 모달의 '결제 전' 안내 — 경고가 아니라 사실 고지다. 포인트색을 쓰지 않는다. */
.fs-plugin .fhs-claim-unpaid {
    margin: 4px 0 14px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--fs-ink-2);
}

/* ── 마이페이지 모바일 가로 넘침 ─────────────────────────
   .fluxmember-mypage 는 그리드인데 항목들의 자동 최소너비(min-width:auto)가 풀려 있지 않다.
   탭 메뉴 15개가 한 줄로 늘어서면서 그리드 트랙이 1,149px 로 벌어지고, 그 안의
   주문·취소내역 표가 화면 밖으로 밀려 나갔다 — 폰에서 환불 금액이 잘려 안 보였다.
   플러그인 파일을 고치는 대신 마케팅 레이어에서 최소너비만 풀어 준다(되돌리기 쉬움). */
@media (max-width: 768px) {
    .fs-plugin .fluxmember-mypage {
        max-width: 100%;
    }

    .fs-plugin .fluxmember-mypage > * {
        min-width: 0;
    }

    .fs-plugin .fluxmember-mypage__menu {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* 마이페이지 요약 카드(적립금·쿠폰·예치금)는 <a> 라서 위의 배경 정규화(div·section…)에
   걸리지 않았다. 그 결과 네이비 스킨의 카드 표면(#0f1729) 위에 라이트 톤 글자색(#14161a)이
   얹혀 대비 1.1:1 — 사실상 보이지 않았다. 표면을 흰색으로 되돌린다. */
.fs-plugin .fhs-dash__card {
    background-color: #fff;
    border-color: var(--fs-line);
}

/* ══════════════════════════════════════════════════════
   FluxShop 다크(네이비) 스킨 토큰 → 라이트 톤 정규화

   네이비 스킨은 :root 에서 "표면=딥네이비, 글자=거의 흰색"으로 팔레트를 잡는다.
   그런데 이 레이어(.fs-plugin)는 글자색을 라이트 톤(#14161a 계열)으로 되돌린다.
   두 규칙이 만나면 **딥네이비 표면 위에 검은 글자** — 대비 1.0~1.3:1, 사실상 안 보인다.
   실제로 마이페이지 요약 카드·바로가기·활성 탭에서 그 일이 벌어지고 있었다.

   개별 요소를 하나씩 잡는 대신 토큰을 이 레이어 안에서만 라이트로 재정의한다.
   플러그인 파일은 건드리지 않고, 이 파일만 지우면 원래 스킨으로 되돌아간다.
   ══════════════════════════════════════════════════════ */
.fs-plugin {
    --fhs-white:        #ffffff;
    --fhs-bg:           #ffffff;
    --fhs-bg-soft:      var(--fs-bg-soft);
    --fhs-bg-gray:      var(--fs-bg-soft);
    --fhs-text:         var(--fs-ink);
    --fhs-text-sub:     var(--fs-ink-2);
    --fhs-text-muted:   var(--fs-ink-3);
    --fhs-text-light:   var(--fs-ink-3);
    --fhs-border:       var(--fs-line);
    --fhs-border-light: var(--fs-line);
    --fhs-border-faint: var(--fs-line);
}

/* 활성 탭의 글자색은 화면 폭에 따라 다르다.
   - 폰(≤768px): 솔리드 네이비 알약 → 흰 글자
   - 데스크톱: 옅은 틴트 배경 → 진한 글자 (흰 글자를 쓰면 배경에 묻힌다)
   한 벌로 흰색을 강제했더니 데스크톱에서 대비 1.0:1 이 났다. 폭으로 나눈다. */
.fs-plugin .fluxmember-mypage__menu-item.is-active a,
.fs-plugin .fluxmember-mypage__menu-item.is-active a span,
.fs-plugin .fluxmember-mypage__menu-item.is-active a strong {
    color: var(--fs-ink);
}

@media (max-width: 768px) {
    .fs-plugin .fluxmember-mypage__menu-item.is-active a,
    .fs-plugin .fluxmember-mypage__menu-item.is-active a span,
    .fs-plugin .fluxmember-mypage__menu-item.is-active a strong {
        color: #fff;
    }
}

/* ══════════════════════════════════════════════════════
   FluxMember 다크 프리셋 토큰 → 라이트 톤 정규화 (마이페이지 한정)

   FluxMember 설정이 '다크 프리셋'이라 :root 에 --fm-text:#e5e7eb 등이 주입된다.
   로그인·회원가입 화면(.fs-authbody)은 그 다크 톤이 맞다. 하지만 마이페이지는
   흰 배경 위에 얹히므로, 폼 라벨이 흰 글자로 나와 대비 1.24:1 — 보이지 않았다.
   (회원정보 수정·회원탈퇴 화면 전체 라벨이 그랬다.)

   프리셋 설정을 바꾸면 인증 화면 디자인이 함께 뒤집히므로, 이 레이어 안에서만 되돌린다.
   ══════════════════════════════════════════════════════ */
.fs-plugin {
    --fm-text:           var(--fs-ink);
    --fm-text-secondary: var(--fs-ink-3);
    --fm-bg:             var(--fs-bg-soft);
    --fm-bg-white:       #ffffff;
    --fm-border:         var(--fs-line);
}

/* 다크 프리셋이 인라인으로 하드코딩해 넣는 입력창 색까지 되돌린다. */
.fs-plugin .fluxmember-form__input,
.fs-plugin .fluxmember-form__textarea,
.fs-plugin .fluxmember-form__select {
    background: #fff;
    color: var(--fs-ink);
    border-color: var(--fs-line);
}

.fs-plugin .fluxmember-form__input::placeholder,
.fs-plugin .fluxmember-form__textarea::placeholder {
    color: var(--fs-ink-3);
}

/* 짙은 배경을 가진 배지·패널 안의 글자만 흰색으로 지킨다.
   (.fs-plugin span/strong 의 글자색 정규화가 그 안까지 들어가 네이비 위에 검은 글자를 만들었다)
   주의: 상태 배지(fhs-badge--completed 등)는 **옅은** 배경이라 여기 넣으면 안 된다 —
   넣었다가 연녹색 위 흰 글자(1.1:1)를 만들었고, 되돌렸다. */
.fs-plugin .fhs-coupon-count,
.fs-plugin .fhs-coupon-card__amount,
.fs-plugin .fhs-coupon-card__amount * {
    color: #fff;
}

/* FluxMember 다크 프리셋이 인라인으로 박아 넣는 하드코딩 배경들.
   토큰이 아니라 고정 헥사값이라 위의 토큰 정규화로는 안 잡힌다.
   마이페이지(흰 배경) 위에서만 라이트로 되돌린다 — 인증 화면은 그대로 다크. */
.fs-plugin .fluxmember-widget {
    background: #fff;
    border-color: var(--fs-line);
}

.fs-plugin .fluxmember-widget__title {
    background: var(--fs-bg-soft);
    border-color: var(--fs-line);
    color: var(--fs-ink);
}

.fs-plugin .fluxmember-table th {
    background: var(--fs-bg-soft);
    color: var(--fs-ink-2);
}

.fs-plugin .fluxmember-coupon-card {
    background: #fff;
    border-color: var(--fs-line);
}

.fs-plugin .fluxmember-coupon-card__code code {
    background: var(--fs-bg-sunken);
    color: var(--fs-ink);
}

.fs-plugin .fluxmember-form__agreements {
    background: var(--fs-bg-soft);
}

.fs-plugin .fluxmember-mypage__menu-item a:hover {
    background: var(--fs-bg-soft);
}

/* 흐린 보조 텍스트가 AA(4.5:1)에 못 미치던 자리 — 우리 토큰으로 통일 */
.fs-plugin .fhs-order-line__qty,
.fs-plugin .fhs-dash__label,
.fs-plugin .fhs-empty {
    color: var(--fs-ink-3);
}

/* 알림 박스(성공·경고·오류)도 다크 프리셋 하드코딩 대상이다.
   흰 화면 위에서 짙은 갈색/초록 박스에 검은 글자가 얹혀 읽히지 않았다(회원탈퇴 주의사항). */
.fs-plugin .fluxmember-notice {
    border-radius: var(--fs-r-sm);
}

.fs-plugin .fluxmember-notice--warning {
    background: #fff8e6;
    border-color: #f0d38a;
    color: #6b4e00;
}

.fs-plugin .fluxmember-notice--success {
    background: #eef8f0;
    border-color: #bfe3c8;
    color: #1c5b2c;
}

.fs-plugin .fluxmember-notice--error {
    background: #fdf1f1;
    border-color: #efc3c3;
    color: #8a1c1c;
}

.fs-plugin .fluxmember-notice *,
.fs-plugin .fluxmember-notice strong,
.fs-plugin .fluxmember-notice li {
    color: inherit;
}

/* ══════════════════════════════════════════════════════
   마이페이지 > 내 사이트 탭

   이 화면은 대시보드 디자인 시스템(.flux-*, main.css)으로 만들어졌는데,
   마이페이지에는 main.css 가 실리지 않는다. 그래서 카드도 버튼도 없이
   글자만 남고, 버튼은 파란 형광펜처럼 보였다.
   대시보드 파일은 건드리지 않고, 이 레이어에서 마이페이지 톤으로 입힌다.
   ══════════════════════════════════════════════════════ */
.fs-plugin .fhb-sites__empty {
    text-align: center;
    padding: 44px 24px;
    background: #fff;
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-r);
}

.fs-plugin .fhb-sites__empty-icon {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--fs-bg-soft);
    color: var(--fs-ink-3);
}

.fs-plugin .fhb-sites__empty h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--fs-ink);
}

.fs-plugin .fhb-sites__empty p {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--fs-ink-2);
}

.fs-plugin .fhb-sites__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.fs-plugin .fhb-sites__header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--fs-ink);
}

.fs-plugin .fhb-sites__count {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--fs-ink);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.fs-plugin .fhb-sites__grid {
    display: grid;
    gap: 14px;
    margin-bottom: 28px;
}

.fs-plugin .fhb-sites__loading,
.fs-plugin .fhb-sites__no-data {
    padding: 32px 0;
    text-align: center;
    font-size: 14px;
    color: var(--fs-ink-3);
}

/* 대시보드 사이트 카드(.fhb-site, mypage-home.css)와 같은 왼쪽 상태 띠를 준다
   (2026-09-16) — 같은 정보(내 사이트)가 두 화면에서 다른 언어로 보이지 않게. */
.fs-plugin .fhb-site-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-r);
    padding: 18px 18px 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.fs-plugin .fhb-site-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 4px;
    background: var(--fs-ink-4, #9298a6);
}
.fs-plugin .fhb-site-card:has(.fhb-site-card__status--success)::before {
    background: var(--fs-accent);
}
.fs-plugin .fhb-site-card__resources { display: flex; flex-direction: column; gap: 10px; }
.fs-plugin .fhb-site-card__creds {
    padding-top: 14px;
    border-top: 1px solid var(--fs-line);
}
.fs-plugin .fhb-site-card__actions { padding-top: 2px; }

/* 대시보드 버튼 클래스가 마이페이지로 새어 나온 자리 — 우리 버튼 모양으로 */
.fs-plugin a.flux-btn,
.fs-plugin button.flux-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    padding: 0 20px;
    border: 1px solid var(--fs-line-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--fs-ink);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}

.fs-plugin a.flux-btn--primary,
.fs-plugin button.flux-btn--primary {
    background: var(--fs-accent);
    border-color: var(--fs-accent);
    color: #fff;
}

.fs-plugin a.flux-btn--sm,
.fs-plugin button.flux-btn--sm {
    height: 36px;
    padding: 0 14px;
    font-size: 13.5px;
}

/* 그라디언트 배너(적립금 잔액·대시보드 인사말) — 다크 프리셋이 주입하는 배경이라
   토큰 정규화로 안 잡힌다. 배경이 짙으므로 안쪽 글자는 흰색이어야 한다.
   (자동 대비 점검은 background-color 만 보기 때문에 이런 그라디언트는 놓친다 —
   눈으로 확인해야 잡히는 자리다.) */
.fs-plugin .fluxmember-points__balance,
.fs-plugin .fluxmember-points__balance *,
.fs-plugin .fluxmember-dashboard__greeting,
.fs-plugin .fluxmember-dashboard__greeting *,
.fs-plugin .fhs-points-balance,
.fs-plugin .fhs-points-balance * {
    color: #fff;
}

/* ══════════════════════════════════════════════════════
   마이페이지 — 웹쟁이 톤 (2026-09-15)
   specs/2026-09-14-webjangi-style-redesign/spec.md P7
   메뉴 구조는 테마 오버라이드 fluxmember/mypage/mypage.php 가 만든다.
   ══════════════════════════════════════════════════════ */

/* FluxMember 포인트 토큰이 남색(#1f2a48)·파랑(#2563EB)이라 현재 메뉴 막대가 옛 톤으로 나왔다. */
.fs-plugin .fluxmember-mypage {
    --fm-primary:       var(--fs-accent);
    --fm-primary-hover: var(--fs-accent-ink);
}

/* 현재 메뉴 — 두 폭 모두 같은 틴트(모바일 솔리드 알약 규칙을 덮는다) */
.fs-plugin .fluxmember-mypage__menu-item.is-active a,
.fs-plugin .fluxmember-mypage__menu-item.is-active a span,
.fs-plugin .fluxmember-mypage__menu-item.is-active a strong {
    color: var(--fs-accent);   /* #e9f7f1 위 4.97:1 */
    font-weight: 700;
}
.fs-plugin .fluxmember-mypage .fluxmember-mypage__menu-item.is-active a {
    background: var(--fs-accent-soft);
    border-left-color: var(--fs-accent);
}
.fs-plugin .fluxmember-mypage__menu-item a:focus-visible {
    outline: 2px solid var(--fs-accent);
    outline-offset: -2px;
}

/* 하위 탐색 (결제·구독 / 쿠폰·적립금 / 회원정보) — C-PILL */
.fs-plugin .fhb-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
}
.fs-plugin a.fhb-subnav__item {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 20px;
    border: 1px solid #dddddd;
    border-radius: var(--fs-r-full);
    background: #fff;
    color: var(--fs-ink);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--fs-ease), border-color var(--fs-ease), color var(--fs-ease);
}
.fs-plugin a.fhb-subnav__item:hover { border-color: var(--fs-ink); color: var(--fs-ink); }
.fs-plugin a.fhb-subnav__item.is-on,
.fs-plugin a.fhb-subnav__item.is-on:hover {
    background: var(--fs-accent);
    border-color: var(--fs-accent);
    color: #fff;
}
.fs-plugin a.fhb-subnav__item:focus-visible {
    outline: 2px solid var(--fs-accent);
    outline-offset: 3px;
}

/* 찜한 템플릿 탭·/wishlist/ 카드 — C-CARD 상품 카드(열 수·썸네일 비율은 그대로) */
.fs-plugin .fluxshop-wishlist .fluxshop-product-card {
    overflow: hidden;
    border: 0;
    border-radius: 15px;
    background: #fff;
    box-shadow: 5px 38px 90px 0 rgba(102, 102, 102, .1) !important;   /* navy 스킨 [class*="fluxshop"]{box-shadow:none!important} */
}
.fs-plugin .fluxshop-wishlist .fluxshop-product-card__image-link { border-radius: 15px 15px 0 0; }
.fs-plugin .fluxshop-wishlist .fluxshop-product-card__body { padding: 16px 20px 20px; background: #fff; }
.fs-plugin .fluxshop-wishlist .fluxshop-product-card__name { font-size: 18px; font-weight: 700; line-height: 1.5; }

/* 찜 빈 상태 — 다음 행동(템플릿 둘러보기)으로 안내 (fluxshop/mypage/wishlist.php 오버라이드) */
.fs-plugin .fhb-wish-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 56px 24px;
    border-radius: var(--fs-r);
    background: var(--fs-bg-soft);
    text-align: center;
}
.fs-plugin .fhb-wish-empty .fhb-wish-empty__t { margin: 0; font-size: 18px; font-weight: 700; color: var(--fs-ink); }
.fs-plugin .fhb-wish-empty .fhb-wish-empty__d { margin: 0; font-size: 15px; line-height: 1.6; color: var(--fs-ink-2); }
.fs-plugin .fhb-wish-empty a.fhb-wish-empty__cta {
    display: inline-flex;
    align-items: center;
    height: 44px;
    margin-top: 12px;
    padding: 0 20px;
    border-radius: var(--fs-r-full);
    background: var(--fs-ink);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}
.fs-plugin .fhb-wish-empty a.fhb-wish-empty__cta:hover { background: #222; color: #fff; }

/* ══════════════════════════════════════════════════════
   게시판 도구 막대 — 알약 (2026-09-15, spec P8 AC-99)
   공지·업데이트·가이드·FAQ(.fluxboard-skin-default). 표 구조는 그대로 두고
   정렬·상세검색·빠른 날짜·초기화·검색 버튼만 알약으로 맞춘다.
   이 버튼들은 위 보조 버튼 규칙 `.fs-plugin button:not(…)`(0,4,1)에 걸리므로
   .fluxboard-board.fluxboard-skin-default 두 단계를 붙여 (0,5,0)으로 이긴다.
   ══════════════════════════════════════════════════════ */
.fs-plugin .fluxboard-board.fluxboard-skin-default .fluxboard-board__toolbar .fluxboard-board__filter-toggle,
.fs-plugin .fluxboard-board.fluxboard-skin-default .fluxboard-board__toolbar .fluxboard-board__sort-select,
.fs-plugin .fluxboard-board.fluxboard-skin-default .fluxboard-board__filter-panel .fluxboard-board__filter-quick-btn,
.fs-plugin .fluxboard-board.fluxboard-skin-default .fluxboard-board__filter-panel .fluxboard-board__filter-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--fs-r-full);
    background-color: var(--fs-bg-soft);
    color: var(--fs-ink);
    font-size: 15px;
    font-weight: 500;
}
.fs-plugin .fluxboard-board.fluxboard-skin-default .fluxboard-board__toolbar .fluxboard-board__sort-select { padding-right: 36px; }
.fs-plugin .fluxboard-board.fluxboard-skin-default .fluxboard-board__toolbar .fluxboard-board__filter-toggle:hover,
.fs-plugin .fluxboard-board.fluxboard-skin-default .fluxboard-board__filter-panel .fluxboard-board__filter-quick-btn:hover,
.fs-plugin .fluxboard-board.fluxboard-skin-default .fluxboard-board__filter-panel .fluxboard-board__filter-reset:hover { background-color: #ebebeb; }
.fs-plugin .fluxboard-board.fluxboard-skin-default .fluxboard-board__filter-panel .fluxboard-board__filter-quick-btn--active,
.fs-plugin .fluxboard-board.fluxboard-skin-default .fluxboard-board__filter-panel .fluxboard-board__filter-quick-btn--active:hover {
    background-color: var(--fs-accent);
    color: #fff;
}
.fs-plugin .fluxboard-board.fluxboard-skin-default .fluxboard-board__filter-panel .fluxboard-board__filter-submit {
    min-height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--fs-r-full);
    background-color: var(--fs-ink);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}
/* 작성일이 "2026-/08-16" 두 줄로 꺾였다 — 한 줄로 */
.fs-plugin .fluxboard-board.fluxboard-skin-default .fluxboard-board__date-cell { white-space: nowrap; }

/* ══════════════════════════════════════════════════════
   1:1 문의 — /support/ticket/ 게시판(.fhq) + 마이페이지 탭(.fhb-tickets) (2026-09-15)
   마크업: fluxboard/skins/qna/board/*.php(테마 오버라이드), inc/class-fluxhub-tickets.php
   클래스 이름에 btn/primary 를 넣지 않는다 — 위 버튼 재색칠 규칙(205~230행)에 걸린다.
   ══════════════════════════════════════════════════════ */
.fs-plugin .fhq__toolbar,
.fs-plugin .fhb-tickets__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
}
.fs-plugin .fhq__total { font-size: 14px; color: var(--fs-ink-3); }
.fs-plugin .fhq__total strong { color: var(--fs-ink); font-variant-numeric: tabular-nums; }

.fs-plugin a.fhq__cta,
.fs-plugin button.fhq__cta,
.fs-plugin a.fhb-tickets__new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--fs-r-full);
    background: var(--fs-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.fs-plugin a.fhq__cta:hover,
.fs-plugin button.fhq__cta:hover,
.fs-plugin a.fhb-tickets__new:hover { background: var(--fs-accent-ink); color: #fff; }
.fs-plugin a.fhq__ghost {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 18px;
    border: 1px solid #dddddd;
    border-radius: var(--fs-r-full);
    background: #fff;
    color: var(--fs-ink);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}
.fs-plugin a.fhq__ghost:hover { border-color: var(--fs-ink); color: var(--fs-ink); }
.fs-plugin .fhq a:focus-visible,
.fs-plugin .fhq button:focus-visible,
.fs-plugin .fhb-tickets a:focus-visible {
    outline: 2px solid var(--fs-accent);
    outline-offset: 3px;
}

/* 목록 행 */
.fs-plugin .fhq__list,
.fs-plugin .fhb-tickets__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--fs-line);
}
.fs-plugin .fhq__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 16px;
    min-height: 64px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--fs-line);
}
.fs-plugin .fhq__item.is-mine { background: linear-gradient(90deg, var(--fs-accent-soft), transparent 60%); }
.fs-plugin .fhq__subject {
    min-width: 0;
    overflow: hidden;
    font-size: 16px;
    font-weight: 600;
    color: var(--fs-ink);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fs-plugin a.fhq__subject:hover { text-decoration: underline; color: var(--fs-ink); }
.fs-plugin .fhq__subject--locked,
.fs-plugin .fhq__subject--locked * { color: var(--fs-ink-3); font-weight: 500; }
.fs-plugin .fhq__lock {
    display: inline-block;
    width: 10px;
    height: 12px;
    margin-right: 6px;
    vertical-align: -1px;
    border: 1.6px solid currentColor;
    border-radius: 2px;
    box-shadow: inset 0 -5px 0 -3.4px currentColor;
    opacity: .55;
}
.fs-plugin .fhq__meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0;
    font-size: 13px;
    color: var(--fs-ink-3);
}
.fs-plugin .fhq__meta span,
.fs-plugin .fhq__meta em { color: var(--fs-ink-3); font-style: normal; }
.fs-plugin .fhq__meta .fhq__mine { color: var(--fs-accent); font-weight: 700; }

/* 상태 — 색만이 아니라 글자로도 구분한다(대기중/답변완료) */
.fs-plugin .fhq__status,
.fs-plugin .fhb-tickets__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    height: 28px;
    padding: 0 10px;
    border-radius: var(--fs-r-full);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.fs-plugin .fhq__status--wait,
.fs-plugin .fhb-tickets__status--wait { background: var(--fs-bg-soft); color: var(--fs-ink-2); }         /* 5.80:1 */
.fs-plugin .fhq__status--done,
.fs-plugin .fhb-tickets__status--done { background: var(--fs-accent-soft); color: var(--fs-accent); }     /* 4.97:1 */

/* 빈 상태 */
.fs-plugin .fhq__empty,
.fs-plugin .fhb-tickets__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 56px 24px;
    border-radius: var(--fs-r);
    background: var(--fs-bg-soft);
    text-align: center;
}
.fs-plugin .fhq__empty-t,
.fs-plugin .fhb-tickets__empty-t { margin: 0; font-size: 18px; font-weight: 700; color: var(--fs-ink); }
.fs-plugin .fhq__empty-d,
.fs-plugin .fhb-tickets__empty-d { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: var(--fs-ink-2); }
.fs-plugin .fhq__login,
.fs-plugin .fhb-tickets__foot { margin: 20px 0 0; font-size: 14px; line-height: 1.6; color: var(--fs-ink-2); }
.fs-plugin .fhq__login a,
.fs-plugin .fhb-tickets__foot a,
.fs-plugin .fhq__empty-d a { color: var(--fs-accent); text-decoration: underline; }

/* 보기 */
.fs-plugin .fhq__saved {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: var(--fs-r-sm);
    background: var(--fs-accent-soft);
    color: var(--fs-accent);
    font-weight: 600;
}
.fs-plugin .fhq__view-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 24px; }
.fs-plugin .fhq__view-subject { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.4; letter-spacing: -.03em; }
.fs-plugin .fhq__thread { display: flex; flex-direction: column; gap: 16px; }
.fs-plugin .fhq__msg {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 16px;
    padding: 24px;
    border-radius: var(--fs-r);
    background: var(--fs-bg-soft);
}
.fs-plugin .fhq__msg--a { background: var(--fs-accent-soft); }
.fs-plugin .fhq__badge {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--fs-ink);
    color: #fff;
    font-weight: 800;
}
.fs-plugin .fhq__msg--a .fhq__badge { background: var(--fs-accent); color: #fff; }
.fs-plugin .fhq__body { min-width: 0; font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; }
.fs-plugin .fhq__body p { margin: 0 0 12px; }
.fs-plugin .fhq__date { margin: 12px 0 0; font-size: 13px; color: var(--fs-accent-ink); }
.fs-plugin .fhq__waiting { margin: 0; padding: 16px 20px; border-radius: var(--fs-r-sm); border: 1px dashed var(--fs-line-strong); color: var(--fs-ink-2); }

.fs-plugin .fhq__answer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 24px 0 0;
    padding: 24px;
    border: 1px solid var(--fs-accent);
    border-radius: var(--fs-r);
}
.fs-plugin .fhq__answer-label { font-size: 16px; font-weight: 700; color: var(--fs-ink); }
.fs-plugin .fhq__answer-label small { margin-left: 6px; font-size: 13px; font-weight: 500; color: var(--fs-ink-3); }
.fs-plugin .fhq__answer-help { margin: 0; font-size: 13px; color: var(--fs-ink-3); }
.fs-plugin .fhq__view-actions,
.fs-plugin .fhq__form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; }

/* 쓰기 */
.fs-plugin .fhq__form { display: flex; flex-direction: column; gap: 20px; }
.fs-plugin .fhq__field { display: flex; flex-direction: column; gap: 8px; }
.fs-plugin .fhq__label { font-size: 15px; font-weight: 600; color: var(--fs-ink); }
.fs-plugin .fhq__req { color: #8a1c1c; }
.fs-plugin .fhq__input,
.fs-plugin .fhq__answer-input {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--fs-line-strong);
    border-radius: var(--fs-r-sm);
    background: #fff;
    color: var(--fs-ink);
    font: inherit;
    font-size: 16px;
}
.fs-plugin .fhq__input--area,
.fs-plugin .fhq__answer-input { min-height: 200px; line-height: 1.6; resize: vertical; }
.fs-plugin .fhq__input:focus,
.fs-plugin .fhq__answer-input:focus { outline: 2px solid var(--fs-accent); outline-offset: 0; border-color: var(--fs-accent); }

/* 마이페이지 탭 */
.fs-plugin .fhb-tickets__title { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.fs-plugin .fhb-tickets__desc { margin: 0; font-size: 14px; color: var(--fs-ink-2); }
.fs-plugin a.fhb-tickets__link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--fs-line);
    color: var(--fs-ink);
    text-decoration: none;
}
.fs-plugin a.fhb-tickets__link:hover .fhb-tickets__subject { text-decoration: underline; }
.fs-plugin .fhb-tickets__subject { min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.fs-plugin .fhb-tickets__date { font-size: 13px; color: var(--fs-ink-3); font-variant-numeric: tabular-nums; }

@media (max-width: 767px) {
    .fs-plugin .fhq__item { grid-template-columns: auto minmax(0, 1fr); }
    .fs-plugin .fhq__item .fhq__meta { grid-column: 1 / -1; }
    .fs-plugin .fhq__msg { grid-template-columns: minmax(0, 1fr); padding: 20px; }
    .fs-plugin .fhq__view-subject { font-size: 20px; }
    .fs-plugin a.fhb-tickets__link { grid-template-columns: auto minmax(0, 1fr); }
    .fs-plugin .fhb-tickets__date { grid-column: 2; }
}

@media (max-width: 768px) {
    /* 메뉴가 15개일 때 넣은 가로 스크롤 띠 → 7개라 줄바꿈으로 모두 보인다(spec AC-61) */
    .fs-plugin .fluxmember-mypage__menu {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        overflow-x: visible;
    }
    .fs-plugin .fluxmember-mypage__menu-item a { min-height: 44px; }
    .fs-plugin .fluxmember-mypage__menu-item.is-active a,
    .fs-plugin .fluxmember-mypage__menu-item.is-active a span,
    .fs-plugin .fluxmember-mypage__menu-item.is-active a strong {
        color: var(--fs-accent);
    }
    .fs-plugin a.fhb-subnav__item { padding: 0 16px; font-size: 14px; }
    .fs-plugin .fluxshop-wishlist .fluxshop-product-card__name { font-size: 16px; }
}