/* bfitdaily.kr 디자인 시스템 토큰 (web/packages/design-system tokens + web.css 웹 값). 이름 · 값을 그대로 맞춘다 */
:root {
  --bg-app: #F2F5F3;
  --surface-card: #FFFFFF;
  --surface-accent: #E4F2EB;
  --surface-sunken: #E6ECE9;
  --text-primary: #191F1D;
  --text-secondary: #4A5B55;
  --text-tertiary: #5A6B65;
  --text-muted: #8C9A94;
  --text-accent: #0F7038;
  --text-on-accent: #FFFFFF;
  --accent: #1EAA5A;
  --accent-strong: #12813F;
  --accent-on-dark: #7FE0B0;
  --border: #C9D4D0;
  --border-subtle: #E2E9E6;
  --border-strong: #8C9A94;
  --divider: #EEF2F0;
  --danger: #D9363E;
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

* { box-sizing: border-box; }
  html { scroll-behavior: smooth; text-rendering: optimizeLegibility; }
  body {
    margin: 0;
    background: var(--bg-app);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
  }
  a { color: inherit; text-decoration: none; }
  a:hover { color:var(--text-accent); }

  /* 접근성: 키보드 포커스 표시 (마우스 클릭 시에는 표시하지 않음) */
  a, button, input, textarea, select, sc-raw-select, [tabindex] {
    outline: none;
  }
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  sc-raw-select:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 3px;
    border-radius: 2px;
  }

  /* 모바일 내비게이션 (햄버거 메뉴) */
  .nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: none;
    cursor: pointer;
    padding: 0;
  }
  .nav-toggle svg { display: block; }

  @media (max-width: 860px) {
    header { flex-wrap: nowrap !important; gap: 8px !important; }
    .nav-toggle { display: inline-flex; order: 3; flex-shrink: 0; }
    header .site-nav {
      display: none !important;
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      flex-direction: column;
      flex-wrap: nowrap !important;
      gap: 0 !important;
      margin: 4px clamp(16px,4vw,56px) 0;
      background: var(--surface-card);
      border: 1px solid var(--border-subtle);
      border-radius: 12px;
      overflow: hidden;
      z-index: 29;
    }
    header .site-nav.is-open { display: flex !important; }
    header .site-nav a {
      width: 100%;
      padding: 13px 16px !important;
      border-bottom: 1px solid var(--divider);
      white-space: normal !important;
    }
    header .site-nav a:last-child { border-bottom: none; }
    header .header-actions { order: 2; width: auto; margin-left: auto; flex-shrink: 0; gap: 6px !important; }
    header .header-actions a { padding: 9px 12px !important; font-size: 12.5px !important; }
    .hero-cta .btn { flex: 1 1 0; }
    /* 떠 있는 채팅 버튼(높이 약 48px, 아래 20px)이 푸터 마지막 줄을 가리지 않게 */
    footer { padding-bottom: 96px !important; }
  }

  /* 캐러셀 화살표 · 점 — 보이는 크기는 작게 두고 누르는 영역만 넓힌다(화살표 44px, 점 24px) */
  #pds-prev, #pds-next, #pbf-prev, #pbf-next, #sws-prev, #sws-next, #bps-prev, #bps-next, #bfs-prev, #bfs-next {
    width: 36px !important; height: 36px !important; font-size: 17px !important;
  }
  #pds-prev::before, #pds-next::before, #pbf-prev::before, #pbf-next::before, #sws-prev::before, #sws-next::before,
  #bps-prev::before, #bps-next::before, #bfs-prev::before, #bfs-next::before, #bht-prev::before, #bht-next::before {
    content: ""; position: absolute; inset: -4px; border-radius: 999px;
  }
  #pds-dots, #pbf-dots, #sws-dots, #bps-dots, #bht-dots { gap: 17px !important; }
  [data-pds-dot], [data-pbf-dot], [data-sws-dot], [data-bps-dot], [data-bht-dot] {
    position: relative; width: 7px !important; height: 7px !important;
  }
  [data-pds-dot]::before, [data-pbf-dot]::before, [data-sws-dot]::before, [data-bps-dot]::before, [data-bht-dot]::before {
    content: ""; position: absolute; inset: -8.5px; border-radius: 999px;
  }

  /* 초대장 행사 항목 — 가운뎃점 대신 칩(줄이 어디서 바뀌어도 점이 홀로 남지 않게) */
  .inv-tags > span { padding: 6px 12px; border-radius: 999px; background: var(--bg-app); line-height: 1.5; }

  /* 히어로 — 문구는 사진에 그리지 않고 글자로 둔다(번역 · 폰 가독성 · 검색).
     폰: 사진 아래. 861px 이상: 사진 오른쪽 위에 얹고, 사진 폭에 비례해 커진다 */
  .hero { max-width: 1340px; margin: 0 auto; position: relative; }
  .hero-copy {
    display: grid; gap: 8px;
    padding: clamp(20px, 3vw, 28px) clamp(16px, 4vw, 56px) 0;
  }
  .hero-kicker { font-size: 13px; font-weight: 600; color: var(--text-accent); }
  .hero-title {
    margin: 0; font-size: clamp(25px, 6.6vw, 30px); font-weight: 800;
    line-height: 1.28; letter-spacing: -0.025em; color: var(--text-primary); text-wrap: balance;
  }
  .hero-sub { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-secondary); text-wrap: balance; }
  .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

  @media (min-width: 861px) {
    .hero { --hero-w: min(100vw, 1340px); }
    .hero::after {
      content: ""; position: absolute; inset: 0 0 auto 40%; height: 42%; pointer-events: none;
      background: linear-gradient(to bottom, rgba(15, 26, 22, 0.55), rgba(15, 26, 22, 0));
      -webkit-mask-image: linear-gradient(to right, transparent, #000 30%);
              mask-image: linear-gradient(to right, transparent, #000 30%);
    }
    .hero-copy {
      position: absolute; z-index: 1; top: 2.6%; bottom: 4.5%; left: 53%; right: 2.5%;
      display: flex; flex-direction: column;
      padding: 0; gap: calc(var(--hero-w) * 0.006);
      text-shadow: 0 1px 12px rgba(15, 26, 22, 0.45);
    }
    .hero-kicker { font-size: max(12.5px, calc(var(--hero-w) * 0.0125)); font-weight: 500; color: var(--text-on-accent); }
    .hero-title { font-size: calc(var(--hero-w) * 0.029); color: var(--text-on-accent); }
    .hero-sub { font-size: max(14.5px, calc(var(--hero-w) * 0.0165)); line-height: 1.5; color: var(--text-on-accent); text-wrap: pretty; max-width: 21em; }
    /* 버튼은 사진 오른쪽 아래 바닥 위에 둔다 — 문구 바로 밑은 기기 손잡이 · 거치대 폰 화면을 가린다. 문구용 그림자는 주지 않는다 */
    .hero-cta { margin-top: auto; align-self: flex-end; text-shadow: none; }
  }

  @media (max-width: 400px) {
    header > a:first-child span:first-child { font-size: 18px !important; }
    header .header-actions a { padding: 8px 9px !important; font-size: 11.5px !important; }
  }

  /* 버튼 — bfitdaily.kr 디자인 시스템 Button 과 같은 모양 (주 버튼 초록 채움, 보조 버튼 흰 채움 + 진한 테두리) */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 22px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: background-color .15s, transform .1s;
  }
  .btn:active { transform: scale(0.98); }
  .btn-primary, .btn-primary:hover { background: var(--accent-strong); color: var(--text-on-accent); }
  .btn-primary:hover { background: #168A48; }
  .btn-secondary, .btn-secondary:hover { background: var(--surface-card); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-strong); }
  .btn-secondary:hover { background: #E8EDEA; }
  .btn-sm { height: 40px; padding: 0 14px; border-radius: 12px; font-size: 14px; font-weight: 700; }
  @media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:active { transform: none; } }