/* Footori My Points v1.0.0
 * 스타일 격리: 모든 규칙을 .fmp-wrapper 하위로 한정한다(테마 오염 방지).
 * 접두사 .fmp- 전용. 색은 Footori 걷기/여행 톤 — 흙길·이정표 느낌의 차분한 초록 + 종이질감 배경.
 */
.fmp-wrapper {
  --fmp-ink: #23301f;        /* 짙은 숲 잉크 */
  --fmp-ink-2: #5b6b52;      /* 흐린 잉크 */
  --fmp-line: #e2e0d5;       /* 종이 경계선 */
  --fmp-paper: #fbfaf5;      /* 종이 배경 */
  --fmp-card: #ffffff;
  --fmp-brand: #3f7d4e;      /* 이정표 초록 */
  --fmp-brand-ink: #2c5b38;
  --fmp-gold: #c8901f;       /* 이벤트 금 */
  --fmp-plus: #2c7a4b;
  --fmp-minus: #b4472e;
  --fmp-muted: #8a917f;
  --fmp-radius: 14px;

  max-width: 1140px;   /* footori.com Elementor 콘텐츠 폭에 정렬(다른 메뉴와 일관) */
  margin: 0 auto;
  color: var(--fmp-ink);
  font-family: inherit;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
.fmp-wrapper * { box-sizing: border-box; }

/* ── 로딩·에러·게이트 ─────────────────────────────── */
.fmp-loading {
  padding: 32px 0; text-align: center; color: var(--fmp-muted); font-size: 15px;
}
.fmp-gate {
  text-align: center; padding: 48px 24px;
  background: var(--fmp-paper); border: 1px solid var(--fmp-line);
  border-radius: var(--fmp-radius);
}
.fmp-gate-mark { font-size: 40px; margin-bottom: 12px; }
.fmp-gate-msg { margin: 0 0 20px; color: var(--fmp-ink-2); font-size: 15px; }
.fmp-gate-btn {
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  background: var(--fmp-brand); color: #fff !important; text-decoration: none;
  font-weight: 600; font-size: 15px; border: none; cursor: pointer;
}
.fmp-gate-btn:hover { background: var(--fmp-brand-ink); }

/* ── 상단 5카드 : 색으로 섹션 구분 (밋밋함 방지) ──── */
.fmp-cards {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  margin-bottom: 20px;
}
.fmp-card {
  border-radius: 16px; padding: 18px 16px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  border: 1px solid transparent;
}
.fmp-card-k { font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }
.fmp-card-v {
  font-size: 22px; font-weight: 800; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fmp-card-sub { font-size: 11.5px; font-weight: 500; opacity: 0.75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 등급 = 브랜드 초록(정체성, 최강조) */
.fmp-card-level { background: linear-gradient(155deg, #2f6b42, #274f36); border-color: #24422f; }
.fmp-card-level .fmp-card-k { color: #bfe3c9; }
.fmp-card-level .fmp-card-v { color: #ffffff; }
.fmp-card-level .fmp-card-sub { color: #a9d4b5; }

/* 보유 = 크림 + 초록 숫자(현재 자산) */
.fmp-card-balance { background: #f4efe2; border-color: #e6dcc5; }
.fmp-card-balance .fmp-card-k { color: #8a7e5f; }
.fmp-card-balance .fmp-card-v { color: #2c5b38; }

/* 사용 = 흐린 크림(지난 소비, 덜 강조) */
.fmp-card-used { background: #f6f3ec; border-color: #e6ddcb; }
.fmp-card-used .fmp-card-k { color: #8f8a7a; }
.fmp-card-used .fmp-card-v { color: #5b6b52; }

/* 적립목표 = 금빛(목표는 귀함, 시선 유도) */
.fmp-card-goal { background: linear-gradient(155deg, #fdf6e3, #f7ead0); border-color: #ecd9a8; }
.fmp-card-goal .fmp-card-k { color: #9a7d2e; }
.fmp-card-goal .fmp-card-v { color: #8a6a12; }
.fmp-card-goal .fmp-card-sub { color: #a58a3e; }

/* 목표까지 = 연초록 + 진행바(동기) */
.fmp-card-remain { background: #eaf3ec; border-color: #cfe4d6; }
.fmp-card-remain .fmp-card-k { color: #5a8266; }
.fmp-card-remain .fmp-card-v { color: #2c7a4b; }
.fmp-card-bar { height: 6px; border-radius: 999px; background: #d4e6da; overflow: hidden; margin-top: 2px; }
.fmp-card-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #3f7d4e, #5aa06a); border-radius: 999px; }

/* ── 목표 설정 줄 (구형처럼 단순: 입력 + 저장) ────── */
.fmp-goalset {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 22px; padding: 14px 16px;
  background: #fbfaf5; border: 1px solid #e7e3d5; border-radius: 12px;
}
.fmp-goalset-label { font-size: 13.5px; font-weight: 700; color: #5b6b52; }
.fmp-goalset input {
  flex: 0 0 200px; padding: 10px 12px; border: 1px solid #d8d3c2;
  border-radius: 8px; font-size: 15px; color: var(--fmp-ink); background: #fff;
}
.fmp-goalset button {
  appearance: none; padding: 10px 20px; border: none; border-radius: 8px;
  background: var(--fmp-brand); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer;
}
.fmp-goalset button:hover { background: var(--fmp-brand-ink); }
.fmp-goalset button:disabled { opacity: 0.6; cursor: default; }
.fmp-goalset-hint { font-size: 12.5px; color: #9a9382; flex: 1 1 200px; min-width: 0; }
.fmp-goalset-ok { color: var(--fmp-plus); font-weight: 600; }

/* ── 입체 탭 (종이가 튀어나온 느낌) ───────────────── */
.fmp-tabs {
  display: flex; gap: 4px; align-items: flex-end;
  border-bottom: 2px solid #e0dccb; padding: 0 4px; margin-bottom: 0;
}
.fmp-tab {
  position: relative; appearance: none; cursor: pointer;
  padding: 12px 22px; font-size: 15px; font-weight: 700; white-space: nowrap;
  color: var(--fmp-muted); background: #ece7d8;
  border: 1px solid #e0dccb; border-bottom: none;
  border-radius: 12px 12px 0 0; margin-bottom: -2px; top: 3px;
  transition: background 0.12s, color 0.12s, top 0.12s;
}
.fmp-tab:hover { background: #f0ece0; color: var(--fmp-ink-2); }
.fmp-tab.is-on {
  background: #fff; color: var(--fmp-ink); top: 0; padding-bottom: 14px;
  box-shadow: 0 -3px 8px rgba(0,0,0,0.04); z-index: 2;
}
.fmp-tab.is-on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: #fff;
}
/* 데스크톱: 영어 라벨 표시, 짧은 라벨 숨김 */
.fmp-tab-short { display: none; }
.fmp-tab-full { display: inline; }

/* 탭 내용 패널 — 탭과 이어지는 카드 */
.fmp-body {
  background: #fff; border: 1px solid #e0dccb; border-top: none;
  border-radius: 0 0 12px 12px; padding: 20px; min-height: 120px;
}
.fmp-list { display: flex; flex-direction: column; gap: 8px; }
.fmp-empty {
  text-align: center; padding: 40px 20px; color: var(--fmp-muted);
  background: var(--fmp-paper); border: 1px dashed var(--fmp-line);
  border-radius: var(--fmp-radius);
}
.fmp-empty-t { margin: 0 0 6px; font-weight: 600; color: var(--fmp-ink-2); }
.fmp-empty-s { margin: 0; font-size: 14px; }

/* ── ① 포인트 통장 행 ─────────────────────────────── */
.fmp-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: var(--fmp-card);
  border: 1px solid var(--fmp-line); border-radius: 12px; gap: 12px;
}
.fmp-row-l { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.fmp-row-date { font-size: 13px; color: var(--fmp-muted); }
.fmp-row-note { font-size: 13px; color: var(--fmp-ink-2); }
.fmp-chip {
  font-size: 12px; padding: 2px 8px; border-radius: 999px;
  background: #eef1ea; color: var(--fmp-ink-2); font-weight: 600;
}
.fmp-chip-earn { background: #e6f2ea; color: var(--fmp-plus); }
.fmp-chip-use { background: #f6ece8; color: var(--fmp-minus); }
.fmp-chip-refund { background: #eef1ea; color: var(--fmp-ink-2); }
.fmp-chip-expire { background: #f0efe9; color: var(--fmp-muted); }
.fmp-chip-adjust { background: #eef0f4; color: #4a5570; }
.fmp-row-amt { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.fmp-row-amt.is-plus { color: var(--fmp-plus); }
.fmp-row-amt.is-minus { color: var(--fmp-minus); }

/* ── ② 걸음 내역 (시그니처: 분류 뱃지) ────────────── */
.fmp-walk {
  background: var(--fmp-card); border: 1px solid var(--fmp-line);
  border-radius: 12px; padding: 14px; position: relative;
}
.fmp-walk-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.fmp-walk-date { font-size: 13px; color: var(--fmp-muted); flex: none; }
.fmp-walk-name { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fmp-walk-mid { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fmp-cat {
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  border: 1px solid transparent;
}
.fmp-cat.cat-event { background: #fdf3dd; color: var(--fmp-gold); border-color: #f0dca6; }
.fmp-cat.cat-normal { background: #e9f1ec; color: var(--fmp-brand-ink); border-color: #cfe1d5; }
.fmp-cat.cat-free { background: #eeeeea; color: var(--fmp-muted); border-color: #dcdcd4; }
.fmp-walk-dist { font-size: 13px; color: var(--fmp-ink-2); font-variant-numeric: tabular-nums; }
.fmp-walk-comp { font-size: 12px; padding: 2px 8px; border-radius: 6px; font-weight: 600; }
.fmp-walk-comp.is-ok { background: #e6f2ea; color: var(--fmp-plus); }
.fmp-walk-comp.is-part { background: #f7efe0; color: #a5731a; }
.fmp-walk-pt {
  position: absolute; top: 14px; right: 14px;
  font-weight: 800; font-variant-numeric: tabular-nums; font-size: 15px;
}
.fmp-walk-pt.is-plus { color: var(--fmp-plus); }
.fmp-walk-pt.is-zero { color: var(--fmp-muted); }
.fmp-walk-hint {
  margin-top: 10px; padding: 8px 10px; font-size: 12.5px; line-height: 1.45;
  background: #f6f6f1; border-radius: 8px; color: var(--fmp-ink-2);
}

/* ── ③④ 위시 ─────────────────────────────────────── */
.fmp-goods-cap { font-size: 13px; color: var(--fmp-muted); padding: 2px 2px 6px; }
.fmp-wish, .fmp-goods {
  display: flex; align-items: center; gap: 12px;
  background: var(--fmp-card); border: 1px solid var(--fmp-line);
  border-radius: 12px; padding: 12px 14px;
}
.fmp-wish-body, .fmp-goods-body { flex: 1; min-width: 0; }
.fmp-wish-name, .fmp-goods-name {
  margin: 0; font-weight: 700; font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fmp-wish-meta { margin: 4px 0 0; font-size: 13px; color: var(--fmp-muted); }
.fmp-goods-price { margin: 4px 0 0; font-size: 14px; color: var(--fmp-brand-ink); font-weight: 600; }
.fmp-goods-img {
  width: 56px; height: 56px; border-radius: 10px; flex: none;
  background-size: cover; background-position: center; background-color: #eee;
}
.fmp-wish-go, .fmp-goods-go {
  flex: none; font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--fmp-brand-ink); padding: 6px 10px; border: 1px solid var(--fmp-line);
  border-radius: 8px;
}
.fmp-wish-go:hover, .fmp-goods-go:hover { background: var(--fmp-paper); }
.fmp-wish.is-missing, .fmp-goods.is-missing { opacity: 0.6; }
.fmp-rm {
  flex: none; appearance: none; background: none; cursor: pointer;
  border: 1px solid var(--fmp-line); border-radius: 8px;
  font-size: 12.5px; color: var(--fmp-muted); padding: 6px 10px; font-weight: 600;
}
.fmp-rm:hover { color: var(--fmp-minus); border-color: #e6c7bd; }

/* ── ⑤ 등급 (마스코트 아이콘 + 등급표) ────────────────
 * CSS 도형 엠블럼을 버리고 브랜드 마스코트 이미지로 간다.
 * 현재 등급 큰 아이콘 + 5등급 표(헤더·미니아이콘·현재 강조). */
.fmp-level { padding: 8px 0 24px; }

.fmp-level-hero {
  display: flex; align-items: center; justify-content: center; gap: 28px;
  padding: 24px 0 28px; flex-wrap: wrap;
}
.fmp-level-hero-l { text-align: center; flex: none; }
.fmp-level-img { width: 148px; height: 148px; object-fit: contain; display: inline-block; }
.fmp-level-name {
  margin-top: 6px; font-size: 24px; font-weight: 800; letter-spacing: 0.02em;
  color: var(--fmp-brand-ink);
}
/* 카피 배너 — B급 구호. PC·모바일 공통 가운데 정렬, 줄 사이 여백 없음. */
.fmp-level-slogan {
  flex: 1 1 320px; max-width: 460px;
  padding: 8px 4px; text-align: center;
}
.fmp-slogan-l1, .fmp-slogan-l2 {
  margin: 0 !important; padding: 0; font-size: 23px; font-weight: 800; line-height: 1.35;
  letter-spacing: -0.01em; color: var(--fmp-brand-ink);
}
.fmp-slogan-l2 { color: #8a6a12; }  /* 두 번째 줄 = 포인트(금빛) */
.fmp-slogan-sub {
  margin: 8px 0 0 !important; padding: 0; font-size: 13.5px; color: var(--fmp-ink-2); line-height: 1.5;
}

/* 등급표 = div 행(테이블 아님) — 아이콘·강조·모바일 유리 */
.fmp-grade-table {
  border: 1px solid var(--fmp-line); border-radius: 14px; overflow: hidden;
  background: #fff;
}
.fmp-grade-head, .fmp-grade-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center;
}
.fmp-grade-head {
  background: linear-gradient(155deg, #2f6b42, #274f36); border-bottom: none;
}
.fmp-gh { padding: 10px 16px; font-size: 12.5px; font-weight: 700; color: #ffffff; }
.gh-range, .gh-maintain { display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.gh-t1 { font-size: 12.5px; font-weight: 700; }
.gh-t2 { font-size: 11px; font-weight: 500; opacity: 0.85; }
.gh-name { text-align: left; }
.gh-range, .gh-maintain { text-align: center; }

.fmp-grade-row { border-bottom: 1px solid #f0eee4; }
.fmp-grade-row:last-child { border-bottom: none; }
.fmp-gc { padding: 14px 16px; font-size: 14.5px; color: var(--fmp-ink); }
.gc-range, .gc-maintain { text-align: center; font-variant-numeric: tabular-nums; color: var(--fmp-ink-2); }
.gc-name { display: flex; align-items: center; gap: 10px; }
.fmp-grade-mini { width: 34px; height: 34px; object-fit: contain; flex: none; }
.fmp-grade-en { font-weight: 700; }
.fmp-grade-now {
  font-size: 11px; font-weight: 700; color: var(--fmp-brand);
  background: #e6f2ea; border-radius: 999px; padding: 2px 8px; margin-left: 2px;
}

/* 현재 등급 행 강조 — 금빛 배경 + 왼쪽 바 */
.fmp-grade-row.is-current {
  background: linear-gradient(90deg, #fdf6e3, #fffdf6);
  position: relative;
}
.fmp-grade-row.is-current::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #d9b24e, #b98f2a);
}
.fmp-grade-row.is-current .fmp-grade-en { color: #8a6a12; }

@media (max-width: 560px) {
  .fmp-level-img { width: 120px; height: 120px; }
  .fmp-gh, .fmp-gc { padding: 11px 10px; font-size: 13px; }
  .fmp-grade-mini { width: 28px; height: 28px; }
  .fmp-grade-en { font-size: 13.5px; }
}


/* ── 더보기 ───────────────────────────────────────── */
.fmp-more {
  appearance: none; margin: 6px auto 0; display: block; cursor: pointer;
  background: var(--fmp-paper); border: 1px solid var(--fmp-line);
  border-radius: 999px; padding: 10px 24px; font-weight: 600; font-size: 14px;
  color: var(--fmp-ink-2);
}
.fmp-more:hover { background: #f2f1ea; }
.fmp-more:disabled { opacity: 0.6; cursor: default; }

/* ── 접근성·반응형 ────────────────────────────────── */
.fmp-wrapper :focus-visible { outline: 2px solid var(--fmp-brand); outline-offset: 2px; }

@media (max-width: 720px) {
  .fmp-cards { grid-template-columns: repeat(2, 1fr); }
  .fmp-card-v { font-size: 19px; }
  /* 등급 카드는 첫 줄 전체 폭으로 강조 */
  .fmp-card-level { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .fmp-card-v { font-size: 18px; }
  .fmp-walk-name { max-width: 60vw; }
  /* 탭 안 C: 5등분 균등 1줄(카드형). 영어 유지, 긴 라벨은 2줄. */
  .fmp-tabs {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px;
    border-bottom: none; padding: 4px; background: #ece7d8; border-radius: 12px;
  }
  .fmp-tab {
    top: 0; margin-bottom: 0; border: none; border-radius: 9px;
    padding: 8px 2px; font-size: 12px; line-height: 1.2; text-align: center;
    background: transparent; color: var(--fmp-muted); min-height: 42px;
    display: flex; align-items: center; justify-content: center;
  }
  .fmp-tab.is-on {
    top: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    background: #fff; color: var(--fmp-ink);
  }
  .fmp-tab.is-on::after { display: none; }
  /* 모바일: 짧은 라벨(영어, 긴 것은 강제 2줄) 표시, full 숨김 */
  .fmp-tab-full { display: none; }
  .fmp-tab-short { display: inline; white-space: pre-line; }
  .fmp-body { border-radius: 12px; border: 1px solid #e0dccb; margin-top: 8px; }
  /* 카피 배너 모바일: 세로 배치 + 가운데, 여백 축소 */
  .fmp-level-hero { flex-direction: column; gap: 8px; padding: 12px 0 8px; }
  .fmp-level { padding: 0 0 8px; }
  .fmp-level-slogan { flex: 0 0 auto; max-width: 100%; padding: 0; }
  .fmp-slogan-l1, .fmp-slogan-l2 { font-size: 21px; }
  .fmp-slogan-sub { margin-top: 6px !important; }
  .fmp-level-img { width: 110px; height: 110px; }
  .fmp-level-name { margin-top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .fmp-wrapper * { transition: none !important; animation: none !important; }
}