.lesson-centers-page .club-card-actions {
  gap: 6px;
}

.lesson-centers-page .club-card-actions .club-join-button {
  box-sizing: border-box;
  min-width: 72px;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 12px;
}

.lesson-centers-page .club-card,
.lesson-centers-page .lesson-center-card {
  min-height: 132px;
  padding: 20px 28px;
  background: transparent;
  box-shadow: none;
}

.lesson-centers-page .lesson-center-card.is-active {
  box-shadow: none;
}

.lesson-centers-page .lesson-center-card-main {
  gap: 2px;
}

.lesson-centers-page .lesson-center-card-image {
  align-self: start;
}

.lesson-centers-page .lesson-center-card-chips {
  display: none;
}

.lesson-centers-page .lesson-center-card-chips .lesson-center-like-button {
  min-height: 24px;
  justify-content: flex-start;
  margin-left: 0;
}

.lesson-centers-page .lesson-center-card-actions .primary-button {
  box-sizing: border-box;
  min-width: 72px;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 12px;
}

.club-create-logo-control {
  min-width: 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.club-create-logo-preview {
  width: 72px;
  height: 72px;
  grid-row: 1 / span 2;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.club-create-dialog .club-create-name-location-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 12px;
}

.club-create-dialog .club-create-name-location-row,
.club-create-dialog .club-create-logo-field {
  grid-column: 1 / -1;
}

.club-create-dialog .club-create-name-location-row input,
.club-create-dialog .club-create-name-location-row select {
  width: 100%;
  font-size: 16px;
}

/* 사진 원본의 비율과 모서리를 유지한다. 공용 CSS의 원형/cover 규칙보다 나중에 적용한다. */
.lesson-centers-page .club-card-logo[src] {
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.club-create-logo-hint {
  align-self: end;
  color: var(--sub);
  font-size: 12.5px;
  line-height: 1.4;
}

.club-create-logo-control input[type="file"] {
  min-width: 0;
  align-self: start;
}

.club-create-logo-hint[hidden],
.club-create-logo-preview[hidden] {
  display: none;
}

@media (max-width: 1023px) {
  .club-create-dialog .club-create-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .club-create-logo-control {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .club-create-logo-preview {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 640px) {
  .lesson-centers-page .club-card {
    grid-template-columns: 64px minmax(0, 1fr) 70px;
    gap: 12px;
    min-height: 0;
    padding: 12px 16px;
    border-radius: 20px;
  }

  .lesson-centers-page .lesson-center-card {
    grid-template-columns: 64px minmax(0, 1fr) 64px;
    gap: 10px;
    min-height: 0;
    padding: 12px 14px;
    border-radius: 20px;
  }

  .lesson-centers-page .club-card-actions .club-join-button {
    min-width: 70px;
  }

  .lesson-centers-page .lesson-center-card-actions .primary-button {
    min-width: 64px;
  }
}

/* 목록 버튼의 기본 글자색과 테두리. */
.lesson-centers-page .lesson-center-card-actions .primary-button,
.lesson-centers-page .lesson-center-card-actions .primary-button:hover,
.lesson-centers-page .club-join-button,
.lesson-centers-page .club-join-button:hover {
  color: var(--ink);
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* 입장 링크는 흰 배경에 검정 글자로 표시한다. */
.lesson-centers-page .lesson-center-card-actions a.primary-button,
.lesson-centers-page .lesson-center-card-actions a.primary-button:hover,
.lesson-centers-page a.club-join-button,
.lesson-centers-page a.club-join-button:hover {
  background: var(--surface);
}

/* 가입 마감·승인 대기(비활성)는 연하게 — 누를 수 없다는 것이 보이게 */
.lesson-centers-page .club-join-button:disabled,
.lesson-centers-page .club-join-button.is-pending {
  color: var(--mute);
  background: transparent;
  border-color: var(--line);
  opacity: 1;
}

/* 홈 아이콘 줄 자리에 들어간 클럽 영역: 목록 페이지 규칙을 그대로 쓰되 페이지 배경은 홈 것을 따른다. */
.home-page .home-clubs-section,
.home-page .home-lesson-centers-section {
  width: 100%;
  background: transparent;
}

.home-page .home-club-search-section {
  display: grid;
  gap: 24px;
  min-width: 0;
}

/* 배너 → 내클럽 → 클럽 검색 → 클럽 목록 사이 간격은 모두 24px */
.home-page .home-clubs-section .lesson-centers-content-stack {
  gap: 24px;
}

/* 가입한 클럽: 제목·클럽 줄의 위아래 여백(14px)으로 간격을 만든다(2026-10-02). */
.home-page .home-clubs-section .lesson-centers-content-stack > .lesson-centers-club-panel {
  gap: 0;
}

/* 클럽 줄 사이는 얇은 선 — 줄마다 위아래 14px, 마지막 줄 아래는 카드 안쪽 여백이 맡는다 */
.home-page .home-clubs-section .club-list {
  gap: 0;
}

.home-page .home-clubs-section .club-card {
  min-height: 0;
  padding-block: 14px;
  /* 목록 페이지의 둥근 모서리(20px)가 남으면 줄 사이 선이 양 끝에서 휜다 */
  border-radius: 0;
}

.home-page .home-clubs-section .club-card + .club-card {
  border-top: 1px solid var(--line);
}

.home-page .home-clubs-section .club-card:last-child {
  padding-bottom: 0;
}

/* 클럽 이름은 터치 후 남는 hover 상태에서도 기존 글자색을 유지한다. */
.home-page .home-clubs-section .club-card strong {
  color: var(--ink);
}

/* 버튼의 위아래 여백이 제목 줄을 키워 검색 칸과의 간격이 24px 보다 벌어지지 않게 한다 */
.home-page .home-club-list-block .club-create-toggle {
  margin-block: -8px;
}

/* 내클럽·클럽 목록 제목은 같은 크기(headline-1, 18px) */
.home-page .home-clubs-section .club-list-header h2 {
  font-size: var(--font-headline-1);
  line-height: var(--leading-headline-1);
  letter-spacing: var(--tracking-headline-1);
}

/* 홈 A안(2026-10-01 사용자 선택): 내클럽·클럽 목록·게스트 모집을 섹션마다 한 장의 카드로 묶는다.
   제목·버튼·내용이 카드 안에 들어가 섹션 경계가 보이고, 검색 칸은 클럽 목록 카드 안(제목 아래)으로 옮겼다.
   카드 모양은 같은 화면의 날씨 카드(.home-weather-card)와 맞춘다. 게스트 모집 규칙은 style.css 에도 있어
   여기(나중에 로드)서 덮는다. */
.home-page .home-clubs-section .lesson-centers-content-stack > .lesson-centers-club-panel,
.home-page .home-clubs-section .home-club-list-block,
.home-page .guest-recruit-section {
  padding: 20px 18px;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* 클럽 찾기: 제목 → 검색 14px → 클럽 줄. 빈 안내는 검색 바로 아래 12px */
.home-page .home-clubs-section .home-club-list-block {
  gap: 0;
}

.home-page .home-clubs-section .club-list-header {
  margin: 0;
}

/* 견본 클럽 빼기는 제목 오른쪽에 두되, 42px 터치 영역이 제목 줄 간격을 늘리지 않게 한다. */
.home-page .home-clubs-section .club-list-header .club-sample-toggle {
  margin-block: -8px;
  padding: 0 12px;
  font-size: 12.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 가입한 클럽 제목 아래와 검색 아래 구분선은 없애고 기존 간격을 유지한다(2026-10-02 사용자 요청). */
.home-page .home-clubs-section .lesson-centers-content-stack > .lesson-centers-club-panel .club-list-header {
  padding-bottom: 14px;
}

.home-page .home-clubs-section .home-club-list-block .lesson-center-search-box {
  margin-top: 14px;
}

.home-page .home-clubs-section .home-club-list-block .club-list:has(.club-card) {
  margin-top: 14px;
}

.home-page .home-clubs-section .home-club-list-block .club-list:has(.empty-state) {
  margin-top: 12px;
}

.home-page .home-clubs-section .lesson-centers-content-stack > .lesson-centers-club-panel .club-list:has(.empty-state) {
  margin-top: 14px;
}

/* 입장·가입 버튼은 제목 줄 '견본 빼기'와 같은 세로줄(2026-10-04 사용자 요청) — 카드의 오른쪽 안쪽 여백을
   제목 줄과 같은 2px 로, 두 버튼 폭은 74px 로 같게 해 왼쪽·오른쪽 끝이 함께 맞는다. */
.home-page .home-clubs-section .club-list .club-card {
  padding-right: 2px;
}

.home-page .home-clubs-section .club-card-actions .club-join-button,
.home-page .home-clubs-section .club-list-header .club-sample-toggle {
  min-width: 74px;
}

/* 입장·가입은 파란 글자 + 파란 테두리, 승인 대기·가입 마감(비활성)은 회색 테두리. 제목 줄의 클럽 생성은 글자 링크 그대로 */
.home-page .home-clubs-section .club-join-button,
.home-page .home-clubs-section .club-join-button:hover {
  color: var(--primary);
  background: var(--surface);
  border: 2px solid var(--primary);
}

/* 클럽 찾기 넘기기(2026-10-05) — 목록 아래 가운데 '‹ 1 / 2 ›' */
.home-page .home-clubs-section .club-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}

.home-page .home-clubs-section .club-pager[hidden] {
  display: none;
}

.home-page .home-clubs-section .club-pager button {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  touch-action: manipulation;
}

.home-page .home-clubs-section .club-pager button:disabled {
  color: var(--mute);
  opacity: 0.5;
}

.home-page .home-clubs-section .club-pager span {
  min-width: 52px;
  color: var(--sub);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

/* 체험용 클럽 로고는 흰 바탕에 '체험용' 글자(2026-10-06 — '체험' 배지·초록 기본 로고 대신).
   '둘러보기' 버튼은 '입장'과 같은 파란 테두리(2026-10-06 사용자 요청 — 채운 파랑을 뺐다) */
.home-page .home-clubs-section .club-sample-logo {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid #e5e8eb;
  border-radius: 16px; /* 다른 클럽 기본 로고(둥근 사각 그림)와 같은 모양 */
  background: #fff;
  color: #333d4b;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* 둘러보기는 입장 버튼과 같은 높이로 고정한다. 기존 가로 너비는 유지한다. */
.home-page .home-clubs-section .is-sample-club .club-join-button {
  height: 42px;
}

/* 설명이 두 줄일 때 낱말 중간('않/아요')에서 끊지 않는다 */
.home-page .home-clubs-section .is-sample-club .club-card-detail {
  word-break: keep-all;
}

.home-page .home-clubs-section .club-join-button:disabled,
.home-page .home-clubs-section .club-join-button.is-pending {
  color: var(--mute);
  background: transparent;
  border-color: var(--line);
}

/* 임원이 수정을 요청한 신청(2026-10-06 사용자 요청) — 버튼은 주황 테두리 "수정 요청", 누르면 내 정보로 */
.home-page .home-clubs-section .club-join-button.is-revise,
.home-page .home-clubs-section .club-join-button.is-revise:hover {
  color: var(--amber);
  background: var(--surface);
  border-color: var(--amber);
}

/* 가입한 클럽 칸 맨 위 안내 — 수정 요청(주황, 누르면 내 정보), 다시 신청함(파랑) */
.home-page .home-clubs-section .club-revision-notice {
  display: block;
  margin-bottom: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: var(--font-label-1, 14px);
  font-weight: 600;
  line-height: 1.55;
  text-decoration: none;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.home-page .home-clubs-section .club-revision-notice b {
  font-weight: 800;
}

.home-page .home-clubs-section .club-revision-notice.is-requested {
  color: var(--amber);
  background: var(--amber-soft);
}

.home-page .home-clubs-section .club-revision-notice.is-resubmitted {
  color: var(--primary);
  background: var(--primary-tint, #EAF2FE);
}

.home-page .home-clubs-section .club-revision-message {
  display: block;
  margin-top: 4px;
  font-weight: 500;
}

/* 카드 안 제목은 모두 같은 크기(headline-1, 18px) — 게스트 모집만 22px 이던 것을 맞춘다 */
.home-page .guest-recruit-section .guest-recruit-header h2 {
  font-size: var(--font-headline-1);
  line-height: var(--leading-headline-1);
  letter-spacing: var(--tracking-headline-1);
}

/* 게스트 모집 버튼도 클럽 생성처럼 제목 줄 높이를 키우지 않게 */
.home-page .guest-recruit-section .guest-recruit-header .primary-button {
  margin-block: -8px;
  padding-inline: 0;
}

/* 제목 줄 오른쪽 글자 버튼(클럽 생성·모집하기)은 카드 안쪽 끝에 맞추고, 제목보다 2px 작게(16px, 2026-10-02) */
.home-page .home-clubs-section .home-club-list-block .club-create-toggle {
  padding-inline: 0;
}

.home-page .home-clubs-section .home-club-list-block .club-create-toggle,
.home-page .guest-recruit-section .guest-recruit-header .primary-button {
  font-size: calc(var(--font-headline-1) - 2px);
  line-height: var(--leading-headline-1);
  letter-spacing: var(--tracking-headline-1);
}

/* 폰에서는 날씨 카드가 모서리 26px·안쪽 18/16px 로 바뀐다 — 같은 화면의 카드끼리 맞춘다 */
@media (max-width: 640px) {
  .home-page .home-clubs-section .lesson-centers-content-stack > .lesson-centers-club-panel,
  .home-page .home-clubs-section .home-club-list-block,
  .home-page .guest-recruit-section {
    padding: 18px 16px;
    border-radius: 26px;
  }
}

/* 카드 안 빈 상태는 흰 카드 속 흰 상자가 되지 않게 옅은 점선 칸으로 */
.home-page .home-clubs-section .club-list .empty-state,
.home-page .guest-recruit-section .guest-recruit-list .empty-state {
  min-height: 0;
  padding: 18px 12px;
  color: var(--sub);
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: 12px;
  box-shadow: none;
  font-size: var(--font-label-1);
  text-align: center;
}

/* 홈 레슨장 목록은 당분간 숨김(2026-10-01). hidden 을 지우면 되살아난다. */
.home-page .home-lesson-centers-section[hidden] {
  display: none;
}

/* 클럽 입장 버튼 글자 '입 장' — 두 글자 사이 2px(사용자 요청 2026-10-11) */
.club-join-button .club-enter-first {
  margin-right: 2px;
}