/**
 * 주보플러스 브랜드 디자인 토큰
 * 시안 보드 / z_project/styles.css 기준 — 기존 surface·brand 토큰과 매핑
 * 전역 클래스명(.btn, .nav, .card 등)은 정의하지 않음
 */
:root {
  /* Surface */
  --jp-peach: #FFF2E9;       /* surface.base */
  --jp-cream: #FFF8F3;       /* 교차 섹션 */
  --jp-card: #FFFFFF;        /* surface.card */
  --jp-line: #E6DBD2;        /* surface.border (시안 보정) */
  --jp-line-2: #D6CBC0;      /* surface.divider */
  --jp-ink: #2F2A25;         /* text.primary */
  --jp-ink-2: #6B625B;       /* text.secondary */
  --jp-brown: #4B3A2E;       /* brand.brown / footer */

  /* Brand orange — 용도 구분 */
  --jp-brand: #E86F3A;       /* 브랜드 메인 */
  --jp-brand-strong: #E86F3A;/* Primary 버튼 배경 */
  --jp-brand-hover: #D9652F; /* Primary hover */
  --jp-brand-ink: #C4521D;   /* 작은 강조 문구 */
  --jp-brand-tint: #FDE4D5;

  /* Sage */
  --jp-sage: #7FA78C;
  --jp-sage-ink: #3E6A4D;
  --jp-sage-tint: #E4F0E8;

  --jp-focus: #2F2A25;
  --jp-font: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;

  --jp-r-sm: 10px;
  --jp-r-md: 16px;
  --jp-r-lg: 24px;
  --jp-r-pill: 999px;

  --jp-shadow-1: 0 1px 2px rgba(75, 58, 46, 0.06), 0 4px 16px rgba(75, 58, 46, 0.06);
  --jp-shadow-2: 0 2px 4px rgba(75, 58, 46, 0.06), 0 18px 40px rgba(75, 58, 46, 0.10);

  --jp-container: 1200px;
  --jp-gutter: 24px;
  --jp-section-y: 112px;
}

@media (max-width: 760px) {
  :root {
    --jp-gutter: 20px;
    --jp-section-y: 72px;
  }
}

/* 공통 포커스·유틸 (기존 UI와 충돌 최소) */
.jp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Primary 액션 — 흰 글자 + 브랜드 오렌지 */
.jp-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--jp-r-sm) !important;
  font-family: var(--jp-font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: var(--jp-brand-strong) !important;
  color: #fff !important;
  border: 1.5px solid transparent !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: background 0.15s, transform 0.15s;
  white-space: nowrap;
}
.jp-btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--jp-brand-hover) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.jp-btn-primary:focus-visible {
  outline: 3px solid var(--jp-focus);
  outline-offset: 3px;
}
.jp-btn-primary:disabled,
.jp-btn-primary[aria-disabled="true"] {
  background: #F3EEEA !important;
  color: #8A817A !important;
  cursor: not-allowed;
}
.jp-btn-sm {
  min-height: 40px;
  padding: 0 16px;
  font-size: 14px;
}
.jp-btn-block {
  width: 100%;
}

.jp-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--jp-r-sm) !important;
  font-family: var(--jp-font);
  font-size: 15px;
  font-weight: 700;
  background: var(--jp-card) !important;
  color: var(--jp-ink) !important;
  border: 1.5px solid var(--jp-line-2) !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.jp-btn-secondary:hover:not(:disabled) {
  border-color: var(--jp-ink) !important;
  color: var(--jp-ink) !important;
  background: var(--jp-card) !important;
}
.jp-btn-secondary:focus-visible {
  outline: 3px solid var(--jp-focus);
  outline-offset: 3px;
}

/* 상태 칩 */
.jp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--jp-r-pill);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.jp-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.jp-chip-live {
  background: var(--jp-sage-tint);
  color: var(--jp-sage-ink);
}
.jp-chip-plan {
  background: var(--jp-card);
  color: var(--jp-brand-ink);
  box-shadow: inset 0 0 0 1.5px #F0C3A8;
}
.jp-chip-plan::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.jp-chip-example {
  background: rgba(47, 42, 37, 0.78);
  color: #fff;
}
.jp-chip-example::before {
  display: none;
}
.jp-chip-rec {
  background: var(--jp-brand-strong);
  color: #fff;
}
.jp-chip-rec::before {
  display: none;
}
.jp-chip-soon {
  background: #EFE9E4;
  color: #5E554E;
}
.jp-chip-soon::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

/* 푸터 브라운 톤 (기존 링크·구조 유지) */
.jp-site-footer {
  background: var(--jp-brown) !important;
  color: #F6EDE4;
}
.jp-site-footer a {
  color: #F6EDE4 !important;
}
.jp-site-footer a:hover {
  color: #FFB48E !important;
}
.jp-site-footer .jp-footer-muted {
  color: #BCA999 !important;
}
.jp-site-footer .jp-footer-brand {
  color: #FFB48E !important;
}
.jp-site-footer .jp-footer-divider {
  border-color: rgba(246, 237, 228, 0.16) !important;
}