/* refreshed: local style.css v277 */
:root {
  --primary: #2563EB;
  --primary-dark: #1D4ED8;
  --primary-tint: #EAF1FF;
  --ink: #0F172A;
  --sub: #64748B;
  --mute: #94A3B8;
  --line: #E7EBF2;
  --bg: #F5F7FB;
  --surface: #FFFFFF;
  --green: #15803D;
  --green-dark: #166534;
  --green-soft: #E5F6EC;
  --amber: #B45309;
  --amber-soft: #FFF3DE;
  --lime: #D8E35F;
  --navy: #101F42;
  --radius-card: 18px;
  --radius-btn: 12px;
  --radius-thumb: 14px;
  --shadow-card: 0 5px 14px rgba(11, 27, 58, 0.06);
  --surface-strong: var(--primary-tint);
  --text: var(--ink);
  --muted: var(--sub);
  --mint: var(--primary-tint);
  --blue: var(--primary);
  --blue-soft: var(--primary-tint);
  --red: #c84646;
  --red-soft: #ffe5e5;
  --shadow: 0 18px 48px rgba(37, 99, 235, 0.1);
  --bottom-tabbar-height: calc(78px + env(safe-area-inset-bottom));
  font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* =========================================================================
   Typography scale — Wanted Design System (2026-07-19 도입)
   - 크기·행간·자간은 Wanted 스펙 그대로 (Pretendard 기준).
   - 이 블록은 "토큰 + 유틸리티 클래스"만 추가한다. 기존 규칙은 건드리지 않으므로
     현재 화면은 바뀌지 않고, class="ds-title-1"처럼 붙일 때만 적용된다.
   - 소형(Label/Caption)의 자간은 스케일 램프에서 추정한 값(원본 PDF 미표기).
   ========================================================================= */
:root {
  /* font-size */
  --font-display-1: 56px;
  --font-display-2: 40px;
  --font-display-3: 36px;
  --font-title-1: 32px;
  --font-title-2: 28px;
  --font-title-3: 24px;
  --font-heading-1: 22px;
  --font-heading-2: 20px;
  --font-headline-1: 18px;
  --font-headline-2: 17px;
  --font-body-1: 16px;
  --font-body-2: 15px;
  --font-label-1: 14px;
  --font-label-2: 13px;
  --font-caption-1: 12px;
  --font-caption-2: 11px;

  /* line-height (px 고정 — Wanted 스펙) */
  --leading-display-1: 72px;
  --leading-display-2: 52px;
  --leading-display-3: 48px;
  --leading-title-1: 44px;
  --leading-title-2: 38px;
  --leading-title-3: 32px;
  --leading-heading-1: 30px;
  --leading-heading-2: 28px;
  --leading-headline-1: 26px;
  --leading-headline-2: 24px;
  --leading-body-1: 24px;
  --leading-body-2: 22px;
  --leading-label-1: 20px;
  --leading-label-2: 18px;
  --leading-caption-1: 16px;
  --leading-caption-2: 14px;

  /* letter-spacing */
  --tracking-display-1: -0.0319em;
  --tracking-display-2: -0.0282em;
  --tracking-display-3: -0.027em;
  --tracking-title-1: -0.0253em;
  --tracking-title-2: -0.0236em;
  --tracking-title-3: -0.023em;
  --tracking-heading-1: -0.0194em;
  --tracking-heading-2: -0.012em;
  --tracking-headline-1: -0.002em;
  --tracking-headline-2: 0em;
  --tracking-body-1: 0.0057em;
  --tracking-body-2: 0.0096em;
  --tracking-label-1: 0.0145em;   /* 추정 */
  --tracking-label-2: 0.0194em;   /* 추정 */
  --tracking-caption-1: 0.0252em; /* 추정 */
  --tracking-caption-2: 0.0311em; /* 추정 */

  /* font-weight (opt-in용 — 유틸리티 클래스에는 강제하지 않음) */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
}

/* 타이포 유틸리티 클래스
   - size / line-height / letter-spacing 만 지정한다.
   - weight·color는 건드리지 않아, 기존 요소에 붙여도 metric만 바뀐다(drop-in 안전). */
.ds-display-1 { font-size: var(--font-display-1); line-height: var(--leading-display-1); letter-spacing: var(--tracking-display-1); }
.ds-display-2 { font-size: var(--font-display-2); line-height: var(--leading-display-2); letter-spacing: var(--tracking-display-2); }
.ds-display-3 { font-size: var(--font-display-3); line-height: var(--leading-display-3); letter-spacing: var(--tracking-display-3); }
.ds-title-1 { font-size: var(--font-title-1); line-height: var(--leading-title-1); letter-spacing: var(--tracking-title-1); }
.ds-title-2 { font-size: var(--font-title-2); line-height: var(--leading-title-2); letter-spacing: var(--tracking-title-2); }
.ds-title-3 { font-size: var(--font-title-3); line-height: var(--leading-title-3); letter-spacing: var(--tracking-title-3); }
.ds-heading-1 { font-size: var(--font-heading-1); line-height: var(--leading-heading-1); letter-spacing: var(--tracking-heading-1); }
.ds-heading-2 { font-size: var(--font-heading-2); line-height: var(--leading-heading-2); letter-spacing: var(--tracking-heading-2); }
.ds-headline-1 { font-size: var(--font-headline-1); line-height: var(--leading-headline-1); letter-spacing: var(--tracking-headline-1); }
.ds-headline-2 { font-size: var(--font-headline-2); line-height: var(--leading-headline-2); letter-spacing: var(--tracking-headline-2); }
.ds-body-1 { font-size: var(--font-body-1); line-height: var(--leading-body-1); letter-spacing: var(--tracking-body-1); }
.ds-body-2 { font-size: var(--font-body-2); line-height: var(--leading-body-2); letter-spacing: var(--tracking-body-2); }
.ds-label-1 { font-size: var(--font-label-1); line-height: var(--leading-label-1); letter-spacing: var(--tracking-label-1); }
.ds-label-2 { font-size: var(--font-label-2); line-height: var(--leading-label-2); letter-spacing: var(--tracking-label-2); }
.ds-caption-1 { font-size: var(--font-caption-1); line-height: var(--leading-caption-1); letter-spacing: var(--tracking-caption-1); }
.ds-caption-2 { font-size: var(--font-caption-2); line-height: var(--leading-caption-2); letter-spacing: var(--tracking-caption-2); }

/* Lesson center place-style home */

.lesson-center-home-page .app {
  background: #f4f6f5;
}

.lesson-center-home-workspace {
  width: min(100%, 860px);
}

.lesson-center-place-shell,
.lesson-center-info-grid,
.lesson-center-coach-panel,
.lesson-center-inquiry-panel,
.lesson-center-edit-panel,
.lesson-center-inquiry-list-panel {
  background: #fff;
}

.lesson-center-place-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 64px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 8px;
  padding: 8px 22px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #edf0ee;
  backdrop-filter: blur(14px);
}

.lesson-center-place-topbar strong {
  min-width: 0;
  color: #17191d;
  font-size: 24px;
  font-weight: 950;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-center-place-icon-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #17191d;
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-size: 40px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
}

.lesson-center-place-icon-button.is-favorite {
  color: #08b657;
  font-size: 34px;
}

.lesson-center-home-hero h1 {
  font-size: clamp(22px, 5.5vw, 28px);
}

.lesson-center-place-category {
  margin: 0;
  color: #666b72;
  font-size: clamp(17px, 3.4vw, 24px);
  font-weight: 750;
  line-height: 1.35;
}

.lesson-center-place-actions,
.lesson-center-floating-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.lesson-center-action-pill {
  min-width: 0;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 25px;
  color: #0878ff;
  background: #eaf3ff;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.lesson-center-action-pill.is-primary {
  color: #fff;
  background: #0878ff;
}

.lesson-center-action-pill.is-disabled {
  opacity: 0.72;
}

.lesson-center-hero-visual::before,
.lesson-center-hero-visual::after {
  display: none;
}

.lesson-center-gallery-slider {
  display: grid;
  gap: 10px;
}

.lesson-center-gallery-frame {
  min-width: 0;
}

.lesson-center-gallery-tile {
  position: relative;
  min-height: 310px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: 0;
  color: #12171c;
  background: #fff;
  border: 1px solid #e2e8e4;
  border-radius: 8px;
  animation: lesson-gallery-slide-in 0.32s ease;
}

.lesson-center-gallery-tile img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.lesson-center-gallery-tile.is-main {
  min-height: 310px;
}

.lesson-center-gallery-tile.is-empty {
  align-content: center;
  gap: 10px;
  padding: 24px;
  background: #fff;
}

.lesson-center-gallery-tile.is-empty img {
  width: 82px;
  height: 82px;
  object-fit: contain;
}

.lesson-center-gallery-tile figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 4px;
  padding: 34px 18px 16px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.68));
  color: #fff;
}

.lesson-center-gallery-tile.is-empty figcaption {
  position: static;
  padding: 0;
  background: transparent;
  color: #14191f;
  text-align: center;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0;
}

.lesson-center-gallery-tile figcaption span {
  font-size: 13px;
  font-weight: 850;
  opacity: 0.9;
}

.lesson-center-gallery-tile figcaption strong {
  font-size: 22px;
  font-weight: 950;
  line-height: 1.1;
  word-break: keep-all;
}

.lesson-center-gallery-indicators {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.lesson-center-gallery-indicators[hidden] {
  display: none;
}

.lesson-center-gallery-indicators button {
  width: 8px;
  height: 8px;
  padding: 0;
  background: #cbd7d0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.lesson-center-gallery-indicators button.is-active {
  width: 22px;
  background: #16865e;
}

.lesson-center-gallery-indicators button:focus-visible {
  outline: 3px solid rgba(22, 134, 94, 0.22);
  outline-offset: 3px;
}

@keyframes lesson-gallery-slide-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.lesson-center-place-tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  gap: 34px;
  overflow-x: auto;
  margin: 0 -24px;
  padding: 18px 24px 0;
  background: #fff;
  border-bottom: 1px solid #e9ecea;
  scrollbar-width: none;
}

.lesson-center-place-tabs::-webkit-scrollbar {
  display: none;
}

.lesson-center-place-tabs a {
  position: relative;
  flex: 0 0 auto;
  padding: 0 0 17px;
  color: #8b8f94;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.lesson-center-place-tabs a.is-active {
  color: #17191d;
}

.lesson-center-place-tabs a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: #17191d;
  border-radius: 999px;
}

.lesson-center-place-save-row,
.lesson-center-place-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 13px 0;
  color: #474c53;
  border-bottom: 1px solid #eef0ef;
  font-size: 20px;
  font-weight: 750;
  line-height: 1.45;
}

.lesson-center-place-save-row {
  align-items: center;
  color: #474c53;
}

.lesson-center-place-save-row b {
  color: #17191d;
}

.lesson-center-place-save-star {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #10c464;
  border-radius: 50%;
  font-size: 18px;
}

.lesson-center-place-row-icon {
  width: 42px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  color: #9aa1a9;
  font-size: 13px;
  font-weight: 950;
}

.lesson-center-place-row strong,
.lesson-center-place-row p,
.lesson-center-price-lines strong {
  margin: 0;
  color: #363a40;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
  white-space: pre-line;
  word-break: keep-all;
}

.lesson-center-hero-intro {
  font-size: 20px;
}

.lesson-center-price-lines {
  display: grid;
  gap: 8px;
}

.lesson-center-price-lines > div {
  display: grid;
  grid-template-columns: minmax(116px, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
}

.lesson-center-price-lines span {
  color: #555b62;
  font-size: 18px;
  font-weight: 750;
}

.lesson-center-price-lines strong {
  justify-self: end;
  color: #17191d;
  font-size: 22px;
  font-weight: 950;
  text-align: right;
}

.lesson-center-price-group[hidden] {
  display: none;
}

.lesson-center-place-row[hidden] {
  display: none;
}

.lesson-center-price-item-list {
  display: grid;
  gap: 7px;
}

.lesson-center-price-item {
  display: grid;
  grid-template-columns: auto minmax(0, auto) minmax(22px, 1fr) auto;
  align-items: baseline;
  gap: 8px;
}

.lesson-center-price-item::after {
  content: "";
  grid-column: 3;
  border-bottom: 1px dashed #d7ded9;
  transform: translateY(-4px);
}

.lesson-center-price-item i {
  width: 8px;
  height: 8px;
  background: #16865e;
  border-radius: 50%;
}

.lesson-center-price-item span {
  color: #4c5550;
  font-size: 18px;
  font-weight: 850;
}

.lesson-center-price-item b {
  color: #17191d;
  font-size: 22px;
  font-weight: 950;
  white-space: nowrap;
}

.lesson-price-editor {
  display: grid;
  gap: 8px;
}

.lesson-price-editor-title {
  color: #11171d;
  font-size: 13px;
  font-weight: 900;
}

.lesson-price-editor-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(120px, 0.75fr);
  gap: 8px;
}

/* display:grid 라 [hidden] 만으론 안 숨겨진다 — 공동구매 글에만 보이는 가격표 편집기용 */
.lesson-price-editor[hidden] {
  display: none;
}

/* 가격표 행 묶음: 편집기 안에서 행 간격을 유지한다 */
.store-price-editor-rows {
  display: grid;
  gap: 8px;
}

.lesson-center-coach-panel,
.lesson-center-inquiry-panel,
.lesson-center-notice-panel,
.lesson-center-edit-panel,
.lesson-center-inquiry-list-panel {
  margin: 0;
  padding: 26px 24px;
  border: 0;
  border-top: 10px solid #f1f3f2;
  border-radius: 0;
  box-shadow: none;
}

.lesson-center-coach-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.lesson-center-coach-card {
  grid-template-columns: 62px minmax(0, 1fr) auto;
}

.lesson-center-coach-avatar,
.coach-detail-avatar {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: #176647;
  border-radius: 8px;
  font-size: 24px;
  font-weight: 950;
}

.lesson-center-coach-avatar.has-photo,
.coach-detail-avatar.has-photo {
  background: #e6ece8;
}

.lesson-center-coach-avatar img,
.coach-detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lesson-center-coach-card span {
  color: #6b727a;
  font-size: 13px;
  font-weight: 900;
}

.lesson-center-coach-card strong {
  display: block;
  margin-top: 3px;
  color: #17191d;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.2;
}

.lesson-center-coach-card p {
  margin: 6px 0 0;
  font-weight: 750;
  line-height: 1.45;
}

.lesson-center-coach-card em {
  padding: 8px 10px;
  color: #0f7c51;
  background: #edf8f1;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.lesson-center-inquiry-form {
  grid-template-columns: minmax(0, 1fr) minmax(132px, 0.72fr);
}

.lesson-center-floating-actions {
  position: fixed;
  left: 50%;
  bottom: calc(70px + env(safe-area-inset-bottom));
  z-index: 20;
  width: min(calc(100% - 28px), 820px);
  transform: translateX(-50%);
  padding: 14px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #e5e9e6;
  border-radius: 24px;
  box-shadow: 0 14px 38px rgba(23, 28, 24, 0.14);
  backdrop-filter: blur(14px);
}

.lesson-center-floating-actions .lesson-center-action-pill {
  flex: 1 1 132px;
  min-height: 54px;
}

.coach-detail-dialog {
  width: min(calc(100% - 24px), 720px);
  max-height: min(86dvh, 900px);
  padding: 0;
  overflow: visible;
  color: #17191d;
  background: transparent;
  border: 0;
}

.coach-detail-dialog::backdrop {
  background: rgba(0, 0, 0, 0.58);
}

.coach-detail-shell {
  position: relative;
  max-height: min(86dvh, 900px);
  overflow: auto;
  padding: 22px;
  background: #fff;
  border-radius: 8px;
}

.coach-detail-close {
  position: sticky;
  top: 0;
  z-index: 2;
  float: right;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #111;
  background: #f0f2f1;
  border: 0;
  border-radius: 50%;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.coach-detail-hero {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 6px 46px 18px 0;
}

.coach-detail-avatar {
  width: 78px;
  height: 78px;
  font-size: 30px;
}

.coach-detail-hero span {
  color: #0f7c51;
  font-size: 13px;
  font-weight: 950;
}

.coach-detail-hero h2 {
  margin: 3px 0 6px;
  color: #17191d;
  font-size: clamp(20px, 5vw, 24px);
  font-weight: 950;
  line-height: 1.1;
}

.coach-detail-hero p {
  margin: 0;
  color: #5a6168;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.55;
}

.coach-detail-poster {
  margin: 0 0 16px;
  overflow: hidden;
  background: #f4f6f5;
  border: 1px solid #e6eae7;
  border-radius: 8px;
}

.coach-detail-poster img {
  width: 100%;
  display: block;
  object-fit: contain;
}

.coach-detail-card {
  display: grid;
  gap: 14px;
  padding: 22px;
  background: linear-gradient(135deg, #ffffff 0%, #f6faf8 100%);
  border: 1px solid #e2e8e4;
  border-radius: 8px;
}

.coach-detail-section h3 {
  width: fit-content;
  margin: 0 0 10px;
  padding: 8px 16px;
  color: #fff;
  background: #1b4c67;
  border-radius: 2px;
  font-size: 18px;
  font-weight: 950;
}

.coach-detail-section ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0 0 0 18px;
  color: #30363c;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.55;
}

.coach-profile-photo-editor.is-history-image {
  grid-template-columns: minmax(118px, 178px) minmax(0, 1fr);
}

.coach-profile-photo-editor.is-history-image .coach-profile-photo-preview.has-photo {
  border-style: solid;
}

@media (max-width: 720px) {

  .lesson-center-place-topbar {
    min-height: 56px;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    padding: 8px 14px;
  }

  .lesson-center-place-icon-button {
    width: 36px;
    height: 36px;
    font-size: 34px;
  }

  .lesson-center-place-icon-button.is-favorite {
    font-size: 30px;
  }

  .lesson-center-place-topbar strong {
    font-size: 22px;
  }

  .lesson-center-place-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lesson-center-action-pill {
    min-height: 48px;
    padding: 0 14px;
    font-size: 17px;
  }

  .lesson-center-hero-visual,
  .lesson-center-hero-visual.has-image {
    grid-template-columns: minmax(0, 1.15fr) minmax(108px, 0.85fr);
    gap: 8px;
  }

  .lesson-center-place-tabs {
    top: 0;
    gap: 28px;
    margin: 0 -18px;
    padding: 17px 18px 0;
  }

  .lesson-center-place-tabs a {
    font-size: 21px;
  }

  .lesson-center-info-grid,
  .lesson-center-coach-panel,
  .lesson-center-inquiry-panel,
  .lesson-center-edit-panel,
  .lesson-center-inquiry-list-panel {
    padding-left: 18px;
    padding-right: 18px;
  }

  .lesson-center-place-save-row,
  .lesson-center-place-row {
    grid-template-columns: 42px minmax(0, 1fr);
    font-size: 17px;
  }

  .lesson-center-place-row strong,
  .lesson-center-place-row p,
  .lesson-center-price-lines strong {
    font-size: 17px;
  }

  .lesson-center-price-lines > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .lesson-center-price-lines strong {
    justify-self: start;
    text-align: left;
  }

  .lesson-center-coach-list {
    grid-template-columns: 1fr;
  }

  .lesson-center-inquiry-form,
  .lesson-center-info-form {
    grid-template-columns: 1fr;
  }

  .lesson-center-floating-actions {
    width: min(calc(100% - 18px), 820px);
    gap: 8px;
    padding: 10px;
    border-radius: 20px;
  }

  .lesson-center-floating-actions .lesson-center-action-pill {
    flex: 1 1 calc(50% - 8px);
  }

  .coach-detail-shell {
    padding: 18px;
  }

  .coach-detail-hero {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
  }

  .coach-detail-avatar {
    width: 64px;
    height: 64px;
  }

}

/* compact profile dialog + store page */
.profile-dialog {
  width: min(calc(100% - 24px), 450px);
  max-height: calc(100dvh - 86px);
}

.profile-dialog-shell {
  max-height: calc(100dvh - 86px);
}

/* 프로필 카드는 세로 한 줄 — 사진 · 이름 · 역할 순으로 가운데 (2026-08-06 사용자 요청) */

.profile-dialog .profile-form .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.store-workspace {
  width: min(calc(100% - 32px), 1240px);
  margin: 0 auto;
  padding: 22px 0 calc(var(--bottom-tabbar-height) + 28px);
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 12px;
}

.store-topbar {
  width: min(100%, 760px);
}

.store-banner-section {
  width: min(100%, 760px);
  margin-top: 0;
}

.store-banner-section .home-banner {
  min-height: 132px;
}

.store-banner-section .home-banner img {
  min-height: 108px;
  max-height: 138px;
}

.store-banner-section .home-banner.has-no-image .home-banner-copy {
  min-height: 120px;
}

.store-banner-section .home-banner.is-image-only img {
  height: clamp(140px, 30vw, 220px);
  min-height: 0;
  max-height: none;
}

.store-panel {
  width: min(100%, 760px);
  display: grid;
  gap: 14px;
  padding: 16px;
  margin-top: clamp(48px, 10vh, 112px);
  background: #fff;
}

.store-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.store-section-header h1 {
  margin: 0 0 4px;
  color: #101814;
  font-size: 26px;
  line-height: 1.15;
}

.store-section-header p {
  margin: 0;
  color: #6d7e75;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.store-create-button {
  width: auto;
  min-width: 74px;
  min-height: 42px;
  padding: 0 18px;
  font-size: 15px;
}

.store-filter-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid #dce7e1;
  border-radius: 8px;
}

.store-filter-tabs button {
  min-height: 38px;
  color: #66786f;
  background: transparent;
  border: 0;
  border-radius: 7px;
  font-weight: 900;
}

.store-filter-tabs button.is-active {
  background: #fff;
  box-shadow: 0 1px 4px rgba(13, 48, 31, 0.08);
}

.store-list {
  display: grid;
  gap: 10px;
}

.store-empty {
  display: grid;
  gap: 6px;
  padding: 28px 16px;
  color: #6c7d74;
  background: #fbfcfb;
  border: 1px solid #e2ebe6;
  border-radius: 8px;
  text-align: center;
}

.store-empty strong {
  color: #1b2922;
  font-size: 17px;
}

.store-empty span {
  font-size: 13px;
  font-weight: 800;
}

.store-card {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: #fbfcfb;
  border: 1px solid #dde7e1;
  border-radius: 8px;
}

.store-thumb {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #75857d;
  background: #eef4f1;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 900;
}

.store-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.store-card-body {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.store-card-topline,
.store-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.store-type,
.store-status,
.store-meta span {
  color: #52645a;
  font-size: 12px;
  font-weight: 900;
}

.store-type {
  color: #0d7353;
}

.store-status.is-done {
  color: #9a4949;
}

.store-card h3 {
  margin: 0;
  color: #101814;
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.store-card p {
  margin: 0;
  color: #4f6057;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.store-card-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #718179;
  font-size: 12px;
  font-weight: 800;
}

.store-card-footer a {
  color: #0d7353;
  text-decoration: none;
  font-weight: 950;
}

.store-card-actions {
  display: grid;
  gap: 7px;
}

.store-card-actions .ghost-button,
.store-card-actions .danger-button {
  min-width: 64px;
  min-height: 34px;
  padding: 0 10px;
  font-size: 13px;
}

.store-dialog textarea {
  min-height: 96px;
  resize: vertical;
}

.store-price-field {
  display: grid;
  gap: 7px;
}

.store-price-field-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

/* 가격 · 할인률 · 기준 세 칸 — 좁은 화면에서도 한 줄에 들어간다 (2026-08-03) */
.store-price-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 92px;
  gap: 8px;
}

.store-price-controls select {
  font-weight: 850;
}

.store-image-field {
  display: grid;
  gap: 8px;
}

.store-image-field-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.store-image-picker {
  position: relative;
  min-height: 72px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 7px 12px 7px 7px;
  color: var(--text);
  background: #f9fbfa;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.store-image-picker input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.store-image-preview {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--muted);
  background: #eef4f1;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 900;
}

.store-image-preview.has-image {
  background: #dfe7e2;
}

.store-image-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.store-image-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.store-image-copy strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}

.store-image-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.store-image-remove-button {
  width: fit-content;
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
}

.store-image-remove-button[hidden] {
  display: none;
}

.store-dialog > form {
  padding: 20px;
}

@media (max-width: 520px) {
  .profile-dialog {
    width: calc(100vw - 24px);
  }

  .store-workspace {
    padding: 14px 12px calc(var(--bottom-tabbar-height) + 18px);
  }

  .store-panel {
    margin-top: clamp(34px, 8vh, 78px);
  }

  .store-banner-section {
    margin-top: 0;
  }

  .store-banner-section .home-banner {
    min-height: 124px;
  }

  .store-section-header {
    align-items: flex-start;
  }

  .store-section-header h1 {
    font-size: 24px;
  }

  .store-section-header p {
    max-width: 260px;
  }

  .store-card {
    grid-template-columns: 70px minmax(0, 1fr);
    align-items: start;
  }

  .store-thumb {
    width: 70px;
    height: 70px;
  }

  .store-card-actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }

  .store-dialog > form {
    padding: 18px;
  }
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body,
body * {
  touch-action: manipulation;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background: var(--bg);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.topbar {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 28px;
  color: white;
  background: #18241f;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.eyebrow,
.section-label {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.topbar .eyebrow {
  color: #a8c7b5;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 25px;
  line-height: 1.2;
}

h2 {
  margin-bottom: 0;
  font-size: 18px;
  line-height: 1.25;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.month-topbar {
  justify-content: flex-end;
}

.date-input,
select,
input,
textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-inline-size: 0;
  min-height: 42px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.25;
  padding: 9px 12px;
  outline: none;
}

input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
}

input[type="date"]::-webkit-date-and-time-value {
  min-width: 0;
  text-align: center;
}

textarea {
  resize: vertical;
}

.date-input:focus,
select:focus,
input:focus,
textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(20, 124, 85, 0.14);
}

.icon-button,
.primary-button,
.ghost-button,
.danger-button {
  min-height: 42px;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0 14px;
  font-weight: 800;
}

/* 링크를 버튼 모양으로 쓸 때 <button>과 똑같이 보이게 —
   <a>는 기본이 inline이라 글자가 위로 붙고 밑줄이 생긴다. */
a.icon-button,
a.primary-button,
a.ghost-button,
a.danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.icon-button {
  width: 42px;
  padding: 0;
  color: inherit;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  font-size: 24px;
}

.primary-button {
  color: white;
  background: linear-gradient(135deg, #3B7BFF 0%, var(--primary-dark) 100%);
  border-color: transparent;
  border-radius: var(--radius-btn);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.16);
}

.primary-button:hover {
  background: linear-gradient(135deg, #2F6DF2 0%, #1E40AF 100%);
}

.primary-button:disabled {
  cursor: default;
  color: white;
  background: linear-gradient(135deg, #3B7BFF 0%, var(--primary-dark) 100%);
  border-color: transparent;
  opacity: 0.9;
}

.ghost-button {
  color: var(--text);
  background: white;
  border-color: var(--line);
}

.nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
}

.bottom-tabbar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: repeat(var(--bottom-tab-count, 5), minmax(0, 1fr));
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  backdrop-filter: blur(16px);
  transform: translateZ(0);
}

.bottom-tabbar.is-lesson-center-nav {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bottom-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 8px 4px;
  background: transparent;
  border: 0;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
  line-height: 1.25;
  word-break: keep-all;
  cursor: pointer;
}

.bottom-all-menu-popup {
  position: absolute;
  right: 12px;
  bottom: calc(100% + 8px);
  width: min(220px, calc(100vw - 24px));
  display: grid;
  gap: 6px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 36px rgba(20, 38, 29, 0.16);
}

.bottom-all-menu-popup[hidden] {
  display: none;
}

.bottom-all-menu-item {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  color: var(--text);
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 900;
}

.bottom-all-menu-item:hover,
.bottom-all-menu-item:focus-visible,
.bottom-all-menu-item.is-active {
  color: var(--green);
  background: var(--surface-strong);
}

.danger-button {
  color: var(--red);
  background: var(--red-soft);
  border-color: #ffc7c7;
}

.profile-page {
  background: #f4f7f5;
}

.profile-page .app {
  background: linear-gradient(180deg, #f8faf9 0%, #eef3f0 100%);
}

.profile-workspace {
  width: min(calc(100% - 28px), 580px);
  margin: 0 auto;
  padding: 24px 0 calc(var(--bottom-tabbar-height) + 28px);
  display: grid;
  gap: 14px;
}

.profile-overview {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 13px;
  padding: 28px 20px 22px;
  text-align: center;
  background: #fff;
  border-color: #e3ebe6;
  box-shadow: 0 18px 36px rgba(25, 47, 35, 0.08);
}

.profile-overview .section-label {
  margin-bottom: 7px;
  color: #77877e;
  font-size: 12px;
  font-weight: 850;
  text-transform: none;
}

.profile-photo-control {
  position: relative;
  width: 104px;
  height: 104px;
}

.profile-photo-picker {
  position: relative;
  display: block;
  width: 104px;
  height: 104px;
  cursor: pointer;
}

.profile-avatar {
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  color: #17684f;
  background: #f4f8f6;
  border: 1px solid #dde8e2;
  border-radius: 50%;
  box-shadow: 0 12px 24px rgba(20, 38, 29, 0.12);
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
}

.profile-photo-badge {
  position: absolute;
  right: -1px;
  bottom: 3px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #16845f;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 7px 14px rgba(20, 38, 29, 0.16);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.profile-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.profile-avatar.has-photo,
.signup-photo-preview {
  overflow: hidden;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
}

.profile-avatar img,
.member-coach-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.profile-heading {
  min-width: 0;
  width: 100%;
}

.profile-heading h1 {
  margin-bottom: 4px;
  color: #111b16;
  font-size: 28px;
  line-height: 1.18;
}

.profile-heading p:last-child {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  justify-content: center;
  margin: 4px auto 0;
  padding: 7px 12px;
  color: #62736a;
  background: #f4f7f5;
  border: 1px solid #e3ebe6;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

/* 위 규칙의 display 가 hidden 속성을 이겨서 내용 없는 알약이 보이던 것 방지 */
.profile-heading p:last-child[hidden] {
  display: none;
}



.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
  gap: 14px;
  align-items: start;
}

.profile-grid-single {
  grid-template-columns: 1fr;
}

.profile-form-panel {
  padding: 22px;
  background: #fff;
  border-color: #dfe8e2;
  box-shadow: 0 14px 34px rgba(25, 47, 35, 0.06);
}

.profile-form-panel .section-header.compact {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e8eee9;
}

.profile-form-panel .section-header.compact h2 {
  color: #101814;
  font-size: 24px;
  letter-spacing: 0;
}

.profile-form {
  display: grid;
  gap: 16px;
}

.profile-form .form-grid {
  gap: 12px;
}

.profile-form label {
  position: relative;
  padding: 10px 12px 12px;
  color: #62736a;
  background: #fbfcfb;
  border: 1px solid #dfe7e2;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 850;
}

.profile-form label:focus-within {
  border-color: #93b7a5;
  box-shadow: 0 0 0 3px rgba(20, 124, 85, 0.1);
}

.profile-form input,
.profile-form select,
.profile-form textarea {
  min-height: 30px;
  color: #111b16;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-weight: 850;
}

.profile-form input:focus,
.profile-form select:focus,
.profile-form textarea:focus {
  box-shadow: none;
}

.profile-form textarea {
  min-height: 76px;
  padding-top: 2px;
}

.profile-form input::placeholder,
.profile-form textarea::placeholder {
  color: #87958e;
  font-weight: 750;
}

.profile-save-button {
  min-height: 52px;
  font-size: 16px;
  box-shadow: none;
}

.profile-info-list {
  display: grid;
  gap: 9px;
}

.profile-info-row {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  background: #fbfdfb;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.profile-info-row span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.profile-info-row strong {
  min-width: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
  text-align: right;
  overflow-wrap: anywhere;
}

.profile-tournament-status {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding: 14px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.profile-tournament-status strong {
  color: var(--text);
  font-size: 17px;
  font-weight: 950;
}

.profile-tournament-status p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.profile-auth-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 14px;
  background: #fbfcfb;
  border: 1px solid #e3ebe6;
  border-radius: 8px;
}

.profile-auth-panel > div {
  min-width: 160px;
  flex: 1 1 auto;
  display: grid;
  gap: 4px;
}

.profile-auth-panel span {
  color: #73837b;
  font-size: 12px;
  font-weight: 850;
}

.profile-auth-panel strong {
  color: #1c2922;
  font-size: 15px;
  font-weight: 950;
  text-align: left;
}

.profile-logout-button {
  width: auto;
  min-width: 96px;
  min-height: 38px;
  color: #c43d3d;
  background: #fff6f6;
  border-color: #ffd1d1;
}

.profile-logout-result {
  flex-basis: 100%;
  min-height: 18px;
  margin: 0;
  color: #73837b;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

.profile-dialog {
  width: min(calc(100% - 24px), 560px);
  max-height: min(88dvh, 900px);
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 12px;
}

.profile-dialog::backdrop {
  background: rgba(10, 22, 16, 0.42);
}

.profile-dialog-shell {
  max-height: min(88dvh, 900px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #dce7e1;
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(15, 35, 24, 0.26);
}

.profile-dialog-header {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #e3ebe6;
}

.profile-dialog-workspace {
  width: 100%;
  margin: 0;
  overflow: auto;
}

.profile-dialog .profile-overview,
.profile-dialog .profile-form-panel {
  box-shadow: none;
}

.login-page {
  background: #fff;
}

.login-workspace {
  width: min(100%, 520px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: 42px 24px 42px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.login-page .bottom-tabbar {
  display: none;
}

.login-header {
  min-height: 96px;
  display: flex;
  align-items: center;
}

.login-brand-logo {
  width: 58px;
  height: 58px;
  display: block;
  border-radius: 15px;
  object-fit: cover;
  box-shadow: 0 10px 24px rgba(30, 122, 70, 0.16);
}

.login-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 44px;
}

.login-message {
  text-align: center;
}

.login-message h2 {
  font-size: 34px;
  font-weight: 950;
}

.login-message p {
  margin: 16px 0 0;
  color: #8b8f8d;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
}

.login-actions {
  display: grid;
  gap: 14px;
}

.login-auto-login {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 4px;
  color: #5f6863;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
}

/* 공용 input 규칙(min-height 42px·배경·테두리)이 체크박스에도 붙어, 삼성폰에서 세로로 늘어난
   연한 테두리 칸이 보였다(2026-10-07 사용자 제보) — 체크박스 크기 그대로로 되돌린다. */
.login-auto-login input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  border: 0;
  background: none;
  accent-color: #0066ff;
}

.login-auto-login:has(input:disabled) {
  cursor: default;
  opacity: 0.68;
}

.guest-member-login-form {
  display: grid;
  gap: 10px;
}

.guest-member-login-form:not(.is-open) .guest-login-fields {
  display: none;
}

.guest-login-fields {
  overflow: hidden;
  background: #fff;
  border: 1px solid #d9dedb;
  border-radius: 8px;
}

.guest-login-row {
  min-height: 54px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-top: 1px solid #edf1ef;
}

.guest-login-row:first-child {
  border-top: 0;
}

.guest-login-row > label {
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}

.guest-login-fields input {
  width: 100%;
  min-width: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 17px;
  font-weight: 850;
}

.guest-login-fields input::placeholder {
  color: #a2aaa5;
}

/* 비밀번호 칸은 글자 칸 + 가림(2026-10-14 사용자 요청): type="password" 면 안드로이드 크롬이
   '비밀번호를 저장하시겠습니까?'·'저장된 비밀번호 확인하기' 창을 띄워 앱 오류처럼 보였다. */
.masked-password {
  -webkit-text-security: disc;
}

.guest-password-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.guest-password-toggle {
  min-width: 52px;
  height: 36px;
  padding: 0 12px;
  color: #a2aaa5;
  background: #fff;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 950;
}

.login-button {
  min-height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.2;
}

.login-button:disabled {
  cursor: default;
  opacity: 0.68;
}

.google-login-button {
  color: #202124;
  background: #fff;
  border-color: #d9dedb;
  box-shadow: 0 1px 0 rgba(20, 38, 29, 0.04);
}

.google-login-icon {
  width: 28px;
  height: 28px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.guest-login-icon {
  width: 28px;
  height: 28px;
  display: block;
  border-radius: 7px;
  object-fit: cover;
}

.guest-login-button {
  color: var(--green);
  background: #fff;
  border-color: #d9dedb;
}

.login-signup-link {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: -28px;
  /* 위 "게스트 로그인" 버튼의 글자 끝과 오른쪽 끝이 맞도록 살짝 이동 */
  transform: translateX(12px);
  color: var(--green);
  background: #fff;
  border: 0;
  border-radius: 0;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  font-size: 17px;
  font-weight: 950;
}

/* 홈 화면에 설치 — 로그인·회원가입보다 한 단 아래 무게의 보조 버튼. */
.login-install-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 14px;
  color: var(--sub);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}

/* ‼️ display 를 주는 규칙에는 [hidden] 도 같이 — 이게 없으면 숨겨도 계속 보인다. */
.login-install-button[hidden] {
  display: none;
}

.login-install-notice {
  display: block;
  /* 패널이 gap:36px 플렉스다 — 그대로 두면 버튼과 떨어져 페이지 안내처럼 보인다.
     위 .login-signup-link 와 같은 방식으로 끌어올려 버튼에 붙인다. */
  margin-top: -22px;
  color: var(--sub);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.login-install-notice[hidden] {
  display: none;
}

/* 설치 확인창 — 크롬 설치 창을 열기 전에 한 번 묻는다. 로그인 화면에서만 쓰므로 좁게. */
.install-confirm-dialog {
  width: min(420px, calc(100vw - 28px));
}

.install-confirm-text {
  margin: 0;
  color: #64748B;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.6;
}

body.signup-page {
  background: #fff;
}

.signup-app {
  min-height: 100vh;
  min-height: 100dvh;
  background: #fff;
}

.signup-screen {
  width: min(100%, 520px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  /* 로그인 링크까지 스크롤 없이 한 화면(아이폰 세로)에 들어오도록 세로 여백 압축 */
  padding: 28px 24px 20px;
}

.signup-brand {
  height: 68px;
  display: flex;
  align-items: center;
}

.signup-brand img {
  width: 58px;
  height: 58px;
  display: block;
  border-radius: 15px;
  object-fit: cover;
  box-shadow: 0 10px 24px rgba(0, 118, 255, 0.14);
}

.naver-signup-form {
  display: grid;
  gap: 20px;
  margin-top: clamp(18px, 3.5vh, 40px);
}

.signup-approval-notice {
  margin: 0 0 -6px;
  color: #777;
  font-size: 16px;
  font-weight: 850;
  text-align: center;
  line-height: 1.45;
}

.naver-form-group {
  overflow: hidden;
  background: #fff;
  border: 2px solid #d0d0d0;
  border-radius: 8px;
}

.naver-input-row {
  min-height: 72px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-top: 1px solid #e5e5e5;
}

.naver-input-row:first-child {
  border-top: 0;
}

.signup-row-icon {
  color: #111;
  font-size: 15px;
  font-weight: 950;
  text-align: center;
}

.naver-input-row input {
  width: 100%;
  min-width: 0;
  color: #242424;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 22px;
  font-weight: 850;
}

.naver-input-row input::placeholder {
  color: #a8a8a8;
  opacity: 1;
}

.password-toggle-button {
  min-width: 48px;
  height: 36px;
  color: #8d8d8d;
  background: transparent;
  border: 0;
  font-size: 15px;
  font-weight: 900;
}

/* 아이디 중복확인 — 옆줄의 "보기"(투명·회색 글자)와 달리 반드시 눌러야 하는 버튼이라
   테두리를 줘서 눌러야 할 것으로 보이게 한다. 라벨이 곧 상태다(중복확인/확인 중/확인 완료). */
.signup-id-check-button {
  min-width: 76px;
  height: 38px;
  padding: 0 12px;
  color: #06b75b;
  background: #fff;
  border: 1px solid #06b75b;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 900;
}

.signup-id-check-button:disabled {
  color: #a8a8a8;
  border-color: #d8d8d8;
}

.signup-id-check-button.is-done {
  color: #8d8d8d;
  background: #f5f5f5;
  border-color: #d8d8d8;
}

.signup-segment-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 16px 18px;
  border-top: 1px solid #e5e5e5;
}

.signup-segment-row label {
  min-width: 0;
}

.signup-segment-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.signup-segment-row span {
  min-height: 48px;
  display: grid;
  place-items: center;
  color: #8f8f8f;
  background: #fff;
  border: 1px solid #d0d0d0;
  font-size: 20px;
  font-weight: 850;
}

.signup-segment-row label:first-child span {
  border-radius: 6px 0 0 6px;
}

.signup-segment-row label:last-child span {
  border-left: 0;
  border-radius: 0 6px 6px 0;
}

.signup-segment-row input:checked + span {
  position: relative;
  z-index: 1;
  color: #06b75b;
  border-color: #06b75b;
  box-shadow: inset 0 0 0 1px #06b75b;
}

.signup-photo-row {
  grid-template-columns: 62px 56px minmax(0, 1fr);
  gap: 12px;
  min-height: 82px;
}

.signup-photo-preview {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: #06b75b;
  background-color: #f4f7f5;
  border: 1px solid #d8dfdb;
  font-size: 13px;
  font-weight: 950;
}

.signup-photo-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 14px;
  color: #242424;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 7px;
  font-size: 16px;
  font-weight: 900;
}

.signup-photo-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.signup-submit-button {
  min-height: 56px;
  width: 100%;
  margin-top: clamp(30px, 7vh, 70px);
  color: #fff;
  background: #06b75b;
  border: 0;
  border-radius: 8px;
  font-size: 21px;
  font-weight: 950;
}

.signup-login-link {
  display: inline-flex;
  justify-content: center;
  color: #555;
  text-decoration: none;
  font-size: 16px;
  font-weight: 850;
}

/* 아이디 중복 확인 등 안내 문구 — 계정 정보와 회원 정보 카드 사이에 표시 */
.signup-result {
  min-height: 22px;
  margin: -10px 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.naver-signup-form .signup-submit-button {
  margin-top: clamp(8px, 2vh, 20px);
}

@media (max-width: 520px) {
  .signup-screen {
    padding: 18px 24px 16px;
  }

  .signup-brand {
    height: 58px;
  }

  .signup-brand img {
    width: 54px;
    height: 54px;
    border-radius: 14px;
  }

  .naver-signup-form {
    gap: 16px;
    margin-top: 20px;
  }

  .naver-input-row {
    min-height: 66px;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    padding: 0 14px;
  }

  .signup-row-icon {
    font-size: 13px;
  }

  .naver-input-row input {
    font-size: 20px;
  }

  .signup-segment-row {
    padding: 14px;
  }

  .signup-segment-row span {
    min-height: 44px;
    font-size: 18px;
  }

  .signup-photo-row {
    grid-template-columns: 54px 50px minmax(0, 1fr);
    min-height: 78px;
  }

  .signup-photo-preview {
    width: 48px;
    height: 48px;
    font-size: 12px;
  }

  .signup-photo-button {
    min-height: 42px;
    font-size: 15px;
  }

  .signup-submit-button {
    min-height: 54px;
    font-size: 20px;
  }
}

.login-result {
  min-height: 22px;
  margin: -18px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.login-result.success {
  color: var(--green);
}

.login-result.error {
  color: var(--red);
}

.workspace {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(600px, 1fr) minmax(260px, 340px);
  gap: 18px;
  padding: 18px 18px calc(96px + env(safe-area-inset-bottom));
  min-height: 0;
}

.booking-workspace {
  grid-template-columns: minmax(600px, 1fr) minmax(260px, 340px);
}

.side-panel,
.right-panel,
.schedule-area {
  min-width: 0;
}

.side-panel,
.right-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.panel-section,
.schedule-area {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(13, 48, 31, 0.03);
}

.panel-section {
  padding: 16px;
}

.overview-panel {
  display: grid;
  gap: 16px;
}

.overview-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.summary-item {
  min-height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: center;
}

.summary-item span {
  display: block;
  color: var(--green);
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
}

.summary-item p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

.court-summary-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 900;
}

.court-summary-title::before,
.court-summary-title::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

.court-list {
  display: grid;
  gap: 8px;
}

.court-chip {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  color: var(--text);
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 800;
}

.court-chip-main,
.court-chip-detail {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.court-chip-main strong {
  min-width: 0;
  overflow: hidden;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.court-chip-count {
  color: var(--green);
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.court-chip-detail {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.court-chip:hover {
  border-color: var(--green);
}

.court-chip.is-active {
  color: white;
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 10px 24px rgba(21, 128, 85, 0.18);
}

.court-chip.is-active .court-chip-count,
.court-chip.is-active .court-chip-detail {
  color: rgba(255, 255, 255, 0.86);
}

.court-switcher {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 16px;
  background: #fbfcfb;
  border-bottom: 1px solid var(--line);
}

.court-switcher .court-chip {
  min-height: 64px;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  background: white;
}

.court-switcher .court-chip.is-active {
  background: var(--green);
}

.court-switcher .court-chip-main {
  width: 100%;
  justify-content: space-between;
}

.court-switcher .court-chip-detail {
  font-size: 13px;
}

.schedule-area {
  display: flex;
  flex-direction: column;
  min-height: 640px;
  overflow: hidden;
}

.section-header {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.schedule-header {
  align-items: center;
}

.schedule-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.schedule-registration-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.schedule-registration-actions .ghost-button {
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
}

.topbar-registration-actions {
  align-items: center;
  margin-right: 6px;
}

.lesson-record-actions {
  flex: 0 0 auto;
}

.date-navigator {
  width: min(100%, 390px);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: center;
}

.date-navigator .icon-button {
  color: var(--text);
  background: var(--surface-strong);
  border-color: var(--line);
}

.date-navigator .date-input {
  width: 100%;
  min-width: 0;
}

.date-display {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.date-display .date-input {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.weekday-label {
  min-width: 58px;
  padding: 0 12px 0 8px;
  color: var(--green);
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
}

#scheduleTitle {
  color: #12201a;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.18;
}

.section-header.compact {
  min-height: auto;
  padding: 0 0 12px;
  border-bottom: 0;
}

.status-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.legend-dot {
  width: 9px;
  height: 9px;
  display: inline-block;
  margin-right: 5px;
  border-radius: 50%;
}

.legend-dot.confirmed {
  background: var(--green);
}

.legend-dot.lesson {
  background: var(--blue);
}

.schedule-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.schedule-grid {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: 64px minmax(0, 1fr);
  --slot-height: 88px;
}

.grid-cell {
  min-height: 0;
  padding: 4px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: white;
}

.grid-cell.header,
.time-cell {
  position: sticky;
  z-index: 2;
  background: #fbfcfb;
}

.grid-cell.header {
  top: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.time-cell {
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a978f;
  font-size: 11px;
  font-weight: 800;
}

.time-cell.major-time {
  color: var(--text);
  background: #f0f5f2;
}

.grid-cell.header:first-child,
.time-header {
  left: 0;
  z-index: 3;
}

.slot-cell {
  position: relative;
}

.slot-cell:hover {
  background: #f7fbf8;
}

.slot-cell.is-clickable {
  cursor: pointer;
}

.slot-cell.is-clickable:hover {
  background: var(--mint);
}

.slot-cell.major-row {
  background: #fcfdfc;
}

.slot-add {
  width: 100%;
  height: 100%;
  min-height: 0;
  color: #8b9890;
  background: transparent;
  border: 1px dashed transparent;
  border-radius: 8px;
}

.slot-add:hover {
  color: var(--green);
  border-color: #b8d9c8;
  background: var(--mint);
}

.reservation-card {
  position: relative;
  width: var(--card-width, calc(100% - 8px));
  height: var(--card-height, calc(100% - 8px));
  min-height: 0;
  min-width: 0;
  align-self: stretch;
  justify-self: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: start;
  gap: 4px 9px;
  margin: var(--card-offset, 4px) 0 4px var(--card-left, 4px);
  padding: 12px 14px;
  color: var(--text);
  text-align: left;
  background: var(--mint);
  border: 1px solid #bfe6d1;
  border-radius: 8px;
  overflow: hidden;
  z-index: 4;
}

.reservation-card.has-memo {
  grid-template-columns: minmax(0, 1fr) minmax(72px, 36%);
}

.reservation-card.half-area {
  padding: 10px 12px;
}

.reservation-card.half-area.has-memo {
  grid-template-columns: minmax(0, 1fr) minmax(54px, 34%);
}

.reservation-card.lesson {
  background: var(--blue-soft);
  border-color: #c5dafd;
}

.reservation-card.coach-park {
  background: #e5efff;
  border-color: #bfd6ff;
}

.reservation-card.coach-kim {
  background: #e3f7eb;
  border-color: #bbe8cf;
}

.reservation-card strong {
  grid-column: 1;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reservation-card .reservation-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: inherit;
  font-weight: inherit;
  text-overflow: ellipsis;
}

.reservation-card .reservation-duration {
  flex: 0 0 auto;
  padding: 2px 6px;
  color: #0f6b47;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(15, 107, 71, 0.18);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
}

.reservation-card span {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reservation-card .reservation-time-range {
  grid-column: 1;
  color: #0f6b47;
  font-size: 15px;
  font-weight: 900;
}

.reservation-card .reservation-meta {
  grid-column: 1;
  font-size: 13px;
  font-weight: 800;
}

.reservation-card .reservation-memo-inline {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
  justify-self: end;
  width: auto;
  max-width: 100%;
  display: block;
  max-height: 2.5em;
  color: #315242;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  text-align: right;
  white-space: normal;
  word-break: keep-all;
  overflow: hidden;
}

.reservation-card.half-area .reservation-memo-inline {
  font-size: 12px;
}

.reservation-card.compact-duration {
  justify-content: center;
  gap: 3px;
  padding: 7px 10px;
}

.reservation-card.compact-duration strong {
  font-size: 16px;
  line-height: 1.15;
}

.reservation-card.compact-duration .reservation-time-range {
  font-size: 13px;
  line-height: 1.15;
}

.reservation-card.compact-duration .reservation-duration {
  padding: 1px 5px;
  font-size: 11px;
}

.reservation-card.compact-duration .reservation-memo-inline {
  font-size: 11px;
}

.reservation-card.compact-duration .reservation-meta {
  font-size: 12px;
  line-height: 1.15;
}

.reservation-card.half-area strong {
  font-size: 16px;
}

.reservation-card.half-area .reservation-time-range {
  font-size: 13px;
}

.reservation-card.half-area .reservation-duration {
  padding: 1px 5px;
  font-size: 11px;
}

.reservation-card.half-area .reservation-meta {
  font-size: 12px;
}

.reservation-list {
  display: grid;
  gap: 10px;
}

.list-item {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.list-item button {
  width: 100%;
  padding: 0;
  text-align: left;
  color: inherit;
  background: transparent;
  border: 0;
}

.list-item strong {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
}

.list-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.empty-state {
  padding: 18px;
  color: var(--muted);
  text-align: center;
  background: var(--surface-strong);
  border: 1px dashed #cfdad3;
  border-radius: 8px;
}

.next-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.9;
  font-size: 14px;
}

.home-workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 18px calc(96px + env(safe-area-inset-bottom));
}

.home-topbar {
  width: min(100%, 760px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.home-brand-logo {
  width: 58px;
  height: 58px;
  display: block;
  border-radius: 15px;
  object-fit: cover;
  box-shadow: none;
}

.home-profile-link {
  width: 48px;
  height: 48px;
  display: block;
  overflow: hidden;
  background: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(20, 38, 29, 0.16);
}

.home-profile-link img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.home-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-message-button {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #a9b2b8;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

.home-message-button svg {
  width: 27px;
  height: 27px;
  fill: currentColor;
}

.home-message-button:hover {
  color: #8f9aa1;
  background: transparent;
}

.home-message-badge {
  position: absolute;
  top: calc(50% - 21px);
  left: calc(50% + 11px);
  transform: translateX(-50%);
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--surface);
  background: var(--red);
  border: 2px solid var(--bg);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}

.home-message-badge[hidden] {
  display: none;
}

.home-content-stack {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: clamp(48px, 10vh, 112px);
}

.home-banner-section {
  width: min(100%, 760px);
}

.home-shortcut-section {
  width: min(100%, 760px);
}

.home-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 12px;
  padding: 4px 0 8px;
}

.home-shortcut-item {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: #555;
  text-decoration: none;
  font-family: inherit;
}

.home-shortcut-icon {
  width: clamp(78px, 21vw, 116px);
  height: clamp(78px, 21vw, 116px);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #111;
  background: #f3f3f3;
  border: 1px solid #f0f0f0;
  border-radius: 50%;
  font-size: clamp(30px, 7vw, 43px);
  line-height: 1;
}

.home-shortcut-icon img {
  width: 58%;
  height: 58%;
  display: block;
  object-fit: contain;
}

/* 3D 일러스트 아이콘: 이미지가 자체 파스텔 원형 배경을 포함하므로 원을 꽉 채운다 */
.home-shortcut-icon.has-image {
  border: 0;
}

.home-shortcut-icon.has-image img,
.home-page .home-shortcut-icon.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.home-shortcut-item strong {
  max-width: 100%;
  color: #555;
  font-size: clamp(16px, 4vw, 21px);
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
  word-break: keep-all;
}

.home-shortcut-item:hover .home-shortcut-icon,
.home-shortcut-item:focus-visible .home-shortcut-icon {
  background: #ededed;
}

.lesson-centers-workspace {
  width: min(100%, 1040px);
  min-height: 100dvh;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 18px;
  margin: 0 auto;
  padding: 22px 18px calc(112px + env(safe-area-inset-bottom));
}

.lesson-centers-topbar {
  width: min(100%, 760px);
}

.lesson-centers-content-stack {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-top: clamp(48px, 10vh, 112px);
}

.lesson-centers-content-stack > .home-notice-section,
.lesson-centers-content-stack > .home-banner-section,
.lesson-centers-content-stack > .lesson-centers-club-panel,
.lesson-centers-content-stack > .lesson-centers-header,
.lesson-centers-content-stack > .lesson-center-list-panel {
  width: min(100%, 760px);
}

.lesson-centers-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px;
  border-radius: 8px;
}

.lesson-centers-header .lesson-center-open-register {
  min-width: 112px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 950;
}

.lesson-centers-header h1 {
  margin: 2px 0 6px;
  color: #fff;
  font-size: clamp(20px, 5vw, 24px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.02;
}

.lesson-centers-header span {
  display: block;
  max-width: 640px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.lesson-center-register-panel,
.lesson-centers-club-panel,
.lesson-center-list-panel {
  background: rgba(255, 255, 255, 0.9);
  border-color: #e0e8e2;
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(28, 46, 38, 0.08);
}

.lesson-center-register-dialog {
  width: min(calc(100% - 24px), 820px);
  max-height: min(88dvh, 760px);
  padding: 0;
  overflow: auto;
  background: transparent;
  border: 0;
  border-radius: 8px;
}

.lesson-center-register-dialog::backdrop {
  background: rgba(8, 20, 16, 0.46);
  backdrop-filter: blur(3px);
}

.lesson-center-register-dialog .lesson-center-register-panel {
  margin: 0;
  background: #fff;
  box-shadow: 0 22px 60px rgba(8, 20, 16, 0.26);
}

.lesson-center-register-dialog .dialog-header {
  margin-bottom: 16px;
}

.lesson-center-register-dialog .lesson-center-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.club-create-dialog .club-create-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.club-create-dialog .club-create-form-actions {
  grid-column: 1 / -1;
}

.club-create-dialog .club-create-logo-field input[type="file"] {
  padding: 11px 12px;
}

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

  .club-create-dialog .club-create-form-actions {
    grid-column: 1;
  }
}

.lesson-center-register-dialog .lesson-center-image-field {
  grid-column: 1 / -1;
}

.lesson-center-register-dialog .lesson-center-form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lesson-center-register-dialog .lesson-center-form-actions .ghost-button,
.lesson-center-register-dialog .lesson-center-form-actions .danger-button {
  justify-self: flex-start;
}

.lesson-center-register-dialog .lesson-center-form-actions .primary-button {
  margin-left: auto;
  min-width: 195px;
  min-height: 50px;
}

.lesson-center-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(164px, 0.74fr) auto;
  align-items: end;
  gap: 10px;
}

.lesson-center-form label {
  min-width: 0;
  display: grid;
  gap: 8px;
  color: #3d4a42;
  font-size: 13px;
  font-weight: 900;
}

.lesson-center-form input,
.lesson-center-form select {
  min-width: 0;
  height: 50px;
  padding: 0 14px;
  color: #0e1013;
  background: #f9fbfa;
  border: 1px solid #d9e4dc;
  border-radius: 8px;
  font: inherit;
  font-weight: 850;
}

.lesson-center-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #6e7a72 50%), linear-gradient(135deg, #6e7a72 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 12px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.lesson-center-image-picker {
  position: relative;
  min-height: 50px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 5px 11px 5px 5px;
  background: #f9fbfa;
  border: 1px solid #d9e4dc;
  border-radius: 8px;
  cursor: pointer;
}

.lesson-center-image-picker input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.lesson-center-image-preview {
  width: 42px;
  height: 40px;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  color: #6e7a72;
  background: #edf3ef;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 900;
}

.lesson-center-image-preview.has-image {
  background: #dfe7e2;
}

.lesson-center-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lesson-center-image-preview.has-image img:only-of-type {
  grid-column: 1 / -1;
}

.lesson-center-image-preview em {
  position: absolute;
  right: 2px;
  bottom: 2px;
  padding: 1px 4px;
  color: #fff;
  background: rgba(0, 0, 0, 0.62);
  border-radius: 999px;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  line-height: 1.2;
}

.lesson-center-image-copy {
  color: #25302a;
  font-size: 14px;
  font-weight: 900;
}

.lesson-center-count {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  color: #166247;
  background: #ecf7f0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 950;
}

.lesson-center-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lesson-center-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 16px;
  background: #fff;
  border: 1px solid #dfe8e2;
  border-radius: 8px;
}

.lesson-center-card-image {
  width: 92px;
  height: 74px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  border-radius: 8px;
  font-size: 26px;
  font-weight: 950;
}

.lesson-center-card-image.has-image {
  background: #e5ece7;
}

.lesson-center-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lesson-center-card-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.lesson-center-card-status {
  width: fit-content;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  color: #166247;
  background: #ecf7f0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
}

.lesson-center-card-main strong {
  color: #0e1013;
  font-size: 21px;
  font-weight: 950;
  line-height: 1.2;
}

.lesson-center-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lesson-center-card-meta span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid #e4ece6;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 850;
}

.lesson-center-card-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.lesson-center-card-actions .primary-button,
.lesson-center-card-actions .danger-button {
  min-width: 86px;
  min-height: 42px;
  justify-content: center;
  border-radius: 8px;
}

.lesson-center-empty-card {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding: 24px;
  border: 1px dashed #cddbd2;
  border-radius: 8px;
  text-align: center;
}

.lesson-center-empty-card strong {
  color: #0e1013;
  font-size: 17px;
  font-weight: 950;
}

.lesson-center-empty-card p {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.lesson-center-contextbar {
  width: min(100% - 24px, 1180px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px auto 0;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e6ebef;
  border-radius: 8px;
}

.lesson-center-contextbar div:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.lesson-center-contextbar span {
  color: #6f7884;
  font-size: 12px;
  font-weight: 850;
}

.lesson-center-context-meta {
  display: block;
}

.lesson-center-context-meta b {
  color: #0e1013;
  font-weight: 950;
}

.lesson-center-contextbar strong {
  min-width: 0;
  overflow: hidden;
  color: #0e1013;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-center-admin-denied-panel {
  width: min(100% - 24px, 760px);
  display: grid;
  gap: 18px;
  margin: 18px auto calc(120px + env(safe-area-inset-bottom));
  padding: 24px;
  text-align: center;
}

.lesson-center-admin-denied-panel[hidden] {
  display: none;
}

.lesson-center-admin-denied-panel h2 {
  margin: 6px 0 8px;
  color: #0e1013;
  font-size: 28px;
  font-weight: 950;
}

.lesson-center-admin-denied-panel p {
  margin: 0;
  color: #5f6873;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
}

.lesson-center-admin-denied-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.lesson-center-context-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
}

.lesson-center-home-workspace {
  width: min(100%, 1080px);
  min-height: 100dvh;
  display: grid;
  align-content: start;
  margin: 0 auto;
  padding: 22px 16px 104px;
}

.lesson-center-home-hero {
  display: grid;
  overflow: hidden;
}

.lesson-center-hero-copy {
  min-width: 0;
  display: grid;
}

.lesson-center-home-hero .section-label {
  width: fit-content;
  margin: 0;
  padding: 7px 11px;
  color: #10231d;
  background: #dff35e;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
}

.lesson-center-home-hero h1 {
  margin: 0;
  font-size: clamp(22px, 5.5vw, 28px);
  font-weight: 950;
  letter-spacing: 0;
  word-break: keep-all;
}

.lesson-center-hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.lesson-center-location,
.lesson-center-owner {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  color: #f6fff8;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
}

.lesson-center-owner b {
  margin-left: 4px;
  font-weight: 950;
}

.lesson-center-hero-intro {
  margin: 0;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.65;
  white-space: pre-line;
}

.lesson-center-home-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.lesson-center-home-actions a {
  min-height: 44px;
  padding: 0 17px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 950;
}

.lesson-center-home-actions .ghost-button {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}

.lesson-center-home-actions .primary-button {
  color: #10231d;
  background: #dff35e;
  border-color: #dff35e;
}

.lesson-center-hero-visual {
  position: relative;
  min-height: 248px;
  display: grid;
  align-content: end;
  gap: 12px;
  overflow: hidden;
  padding: 22px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
}

.lesson-center-hero-visual.has-image {
  min-height: 300px;
  align-content: end;
  border-color: rgba(255, 255, 255, 0.3);
}

.lesson-center-hero-visual.has-image::before {
  inset: 0;
  z-index: 1;
  border: 0;
}

.lesson-center-hero-visual.has-image::after {
  display: none;
}

.lesson-center-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lesson-center-hero-visual::before,
.lesson-center-hero-visual::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  pointer-events: none;
}

.lesson-center-hero-visual::before {
  top: 24px;
  bottom: 24px;
}

.lesson-center-hero-visual::after {
  top: 50%;
}

.lesson-center-hero-mark {
  position: relative;
  z-index: 1;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.17);
}

.lesson-center-hero-mark img {
  width: 54px;
  height: 54px;
  display: block;
  object-fit: contain;
}

.lesson-center-hero-visual span,
.lesson-center-hero-visual strong {
  position: relative;
  z-index: 1;
}

.lesson-center-hero-visual span {
  font-size: 12px;
  font-weight: 950;
}

.lesson-center-hero-visual strong {
  color: #fff;
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 950;
  line-height: 0.94;
}

.lesson-center-hero-visual.has-image strong {
  max-width: 88%;
  font-size: clamp(25px, 4vw, 40px);
  line-height: 1.05;
  word-break: keep-all;
}

.lesson-center-info-board {
  display: grid;
  background: #fff;
}

.lesson-center-info-board-header {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 12px;
}

.lesson-center-info-row span,
.lesson-center-info-contact span {
  color: #68746e;
  font-size: 12px;
  font-weight: 950;
}

.lesson-center-info-board-header h2 {
  margin: 0;
  color: #0e1013;
  font-size: clamp(22px, 3.6vw, 34px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.08;
}

.lesson-center-info-list {
  display: grid;
  border: 1px solid #e8eee9;
  border-radius: 8px;
  overflow: hidden;
}

.lesson-center-info-row {
  display: grid;
  grid-template-columns: minmax(82px, 0.34fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px 18px;
  background: #fbfdfb;
}

.lesson-center-info-row + .lesson-center-info-row {
  border-top: 1px solid #e8eee9;
}

.lesson-center-info-row strong,
.lesson-center-info-contact strong {
  color: #0e1013;
  font-size: clamp(18px, 2.6vw, 25px);
  font-weight: 950;
  line-height: 1.25;
  white-space: pre-line;
  word-break: keep-all;
}

.lesson-center-info-contact {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  background: #f1f8f4;
  border: 1px solid #d8eadf;
  border-radius: 8px;
}

.lesson-center-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1.08fr);
  align-items: start;
  gap: 14px;
}

.lesson-center-intro-text {
  margin: 0;
  color: #333b45;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.65;
  white-space: pre-line;
}

.lesson-center-coach-list,
.lesson-center-inquiry-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.lesson-center-coach-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  border-radius: 8px;
}

.lesson-center-coach-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  border-radius: 8px;
  font-weight: 950;
}

.lesson-center-coach-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lesson-center-inquiry-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  background: #fff;
  border: 1px solid #e3e8e4;
  border-radius: 8px;
}

.lesson-center-coach-card span,
.lesson-center-inquiry-card span {
  color: #68746e;
  font-size: 12px;
  font-weight: 850;
}

.lesson-center-coach-card strong,
.lesson-center-inquiry-card strong {
  display: block;
  margin-top: 2px;
  color: #0e1013;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.25;
}

.lesson-center-coach-card p,
.lesson-center-inquiry-card p,
.lesson-center-empty-text {
  margin: 4px 0 0;
  color: #5f6873;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

.lesson-center-coach-profile,
.lesson-center-coach-career {
  white-space: pre-line;
}

.lesson-center-coach-career {
  padding-top: 8px;
  color: #303a34;
  border-top: 1px solid #e2e9e4;
}

.lesson-center-coach-career b {
  display: inline-block;
  margin-right: 6px;
  font-weight: 950;
}

.lesson-center-inquiry-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(128px, 0.82fr);
  gap: 10px;
}

.lesson-center-info-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.lesson-center-inquiry-form label,
.lesson-center-info-form label {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: #56645c;
  font-size: 13px;
  font-weight: 900;
}

.lesson-center-inquiry-form input,
.lesson-center-inquiry-form select,
.lesson-center-inquiry-form textarea,
.lesson-center-info-form input,
.lesson-center-info-form textarea {
  min-width: 0;
  padding: 0 13px;
  color: #0e1013;
  border: 1px solid #dbe5dc;
  border-radius: 8px;
  font: inherit;
  font-weight: 850;
}

.lesson-center-inquiry-form input:focus,
.lesson-center-inquiry-form select:focus,
.lesson-center-inquiry-form textarea:focus,
.lesson-center-info-form input:focus,
.lesson-center-info-form textarea:focus {
  outline: 2px solid #166247;
  outline-offset: 1px;
}

.lesson-center-inquiry-form input,
.lesson-center-inquiry-form select,
.lesson-center-info-form input {
  height: 48px;
}

.lesson-center-inquiry-form textarea,
.lesson-center-info-form textarea {
  min-height: 112px;
  padding-top: 13px;
  line-height: 1.45;
  resize: vertical;
}

/* 이름·연락처, 희망 코치·시간처럼 짝지어 보여줄 칸 — 좁은 화면에서도 두 칸을 유지한다
   (폼 자체는 760px 이하에서 1열로 접히므로 이 줄만 따로 2열로 잡는다) */
.lesson-center-inquiry-form .lesson-center-inquiry-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ‼️ 위 규칙이 display:grid 라 [hidden] 만으론 안 숨겨진다 — 이 코드베이스의 반복 함정.
   대관 문의로 바꾸면 희망 코치·시간 줄을 감춘다(lesson-center-home.js). */
.lesson-center-inquiry-form .lesson-center-inquiry-row[hidden] {
  display: none;
}

.lesson-center-inquiry-form .full-field,
.lesson-center-info-form .full-field {
  grid-column: 1 / -1;
}

.lesson-center-inquiry-form button,
.lesson-center-info-form button {
  justify-self: start;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  white-space: nowrap;
}

.lesson-center-inquiry-form button {
  grid-column: 1 / -1;
  min-width: 128px;
}

.lesson-center-edit-panel summary {
  cursor: pointer;
  color: #0e1013;
  font-size: 17px;
  font-weight: 950;
}

.lesson-center-edit-panel[open] summary {
  margin-bottom: 14px;
}

@media (max-width: 760px) {
  .lesson-center-home-workspace {
    padding: 14px 12px 96px;
  }

  .lesson-center-hero-visual {
    min-height: 182px;
  }

  .lesson-center-info-grid,
  .lesson-center-main-grid,
  .lesson-center-info-form {
    grid-template-columns: 1fr;
  }

  .lesson-center-info-board-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .lesson-center-info-row {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 14px;
  }
}

.member-home-workspace {
  min-height: 100dvh;
}

.member-content-stack {
  margin-top: clamp(104px, 22vh, 260px);
}

.member-content-stack > .panel-section,
.member-content-stack > .home-notice-section,
.member-content-stack > .home-banner-section {
  width: min(100%, 760px);
}

.member-banner-section {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.member-notice-section {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.home-banner {
  min-height: 210px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(180px, 0.95fr);
  overflow: hidden;
  color: white;
  text-decoration: none;
  /* 기본 배너 공통 배경(시안 B): 로열 블루 그라데이션 + 부드러운 빛망울 2개 (2026-07-26) */
  background:
    radial-gradient(circle 86px at 89% 13%, rgba(255, 255, 255, 0.34), transparent),
    radial-gradient(circle 54px at 75% 86%, rgba(255, 255, 255, 0.34), transparent),
    linear-gradient(135deg, #0052CC 0%, #0066FF 55%, #4F8DFD 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(20, 38, 29, 0.13);
}

.home-banner-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  align-content: end;
  gap: 10px;
  padding: 24px;
}

.home-banner-copy span {
  width: fit-content;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  color: #135237;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.home-banner-copy strong {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.2;
}

.home-banner-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.45;
}

.home-banner img {
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: cover;
}

.home-banner.has-no-image {
  grid-template-columns: 1fr;
}

.home-banner.has-no-image .home-banner-copy {
  min-height: 210px;
}

.home-banner.is-disabled {
  opacity: 0.58;
  filter: grayscale(1);
}

.home-banner.is-image-only {
  min-height: 0;
  display: block;
  background: #f8fbf7;
  border-color: #dbe5df;
}

.home-banner.is-image-only .home-banner-copy {
  display: none;
}

.home-banner.is-image-only img {
  display: block;
  width: 100%;
  height: clamp(170px, 38vw, 320px);
  min-height: 0;
  max-height: none;
  object-fit: contain;
  background: #f8fbf7;
}

.home-banner-section .home-banner {
  min-height: 150px;
}

.home-banner-section .home-banner-copy {
  align-content: center;
  padding: 20px 22px;
}

.home-banner-section .home-banner img {
  min-height: 150px;
  max-height: 210px;
}

.home-banner-section .home-banner.has-no-image .home-banner-copy {
  min-height: 132px;
}

.home-banner-section .home-banner.is-image-only img {
  height: clamp(140px, 30vw, 260px);
  min-height: 0;
  max-height: none;
}

.home-banner.has-image-error img {
  display: none;
}

.home-notice-section {
  width: min(100%, 760px);
}

.home-notice-ticker {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  color: var(--text);
  text-align: left;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(20, 38, 29, 0.08);
}

.home-notice-ticker:not(.is-empty) {
  cursor: pointer;
}

.home-notice-ticker:not(.is-empty):hover {
  border-color: #b8d9c8;
  background: #fbfffc;
}

.home-notice-ticker:disabled {
  cursor: default;
}

.home-notice-label {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  color: white;
  background: var(--green);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.home-notice-text {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-notice-ticker.is-empty .home-notice-text {
  color: var(--muted);
}

.home-notice-text.is-sliding {
  animation: notice-slide 0.36s ease;
}

@keyframes notice-slide {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.guest-recruit-section {
  width: min(100%, 760px);
  display: grid;
  gap: 12px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.guest-recruit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.guest-recruit-header h2 {
  font-size: 24px;
  font-weight: 900;
}

.guest-recruit-header .primary-button {
  flex: 0 0 auto;
  min-width: 84px;
  width: auto;
  background: #fff;
  border: 1px solid #d8dedb;
  color: #38443e;
  box-shadow: none;
}

.guest-recruit-header .primary-button:hover {
  background: #f8faf9;
}

.guest-realtime-alert {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 10px 14px;
  color: #9f1239;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.4;
}

.guest-realtime-alert[hidden] {
  display: none;
}

.guest-recruit-list {
  display: grid;
  gap: 10px;
}

.guest-recruit-card {
  position: relative;
  display: grid;
  gap: 7px;
  padding: 13px 104px 13px 14px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.guest-recruit-card.has-wide-guest-action {
  padding-right: 140px;
}

.guest-recruit-card.has-bottom-guest-action,
.guest-recruit-card.has-bottom-guest-action.has-wide-guest-action {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding-right: 14px;
}

.guest-card-info {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.guest-card-main {
  min-width: 0;
}

.guest-card-main strong {
  display: block;
  color: var(--text);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.35;
  word-break: keep-all;
}

.guest-card-author {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.3;
}

.guest-card-time {
  color: var(--green);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}

.guest-card-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.guest-card-actions.is-owner-actions {
  position: absolute;
  top: 14px;
  right: 12px;
}

.guest-card-actions.is-guest-actions {
  justify-self: end;
  align-self: end;
}

.guest-card-actions.is-recruit-actions {
  align-self: start;
  margin-top: 48px;
}

.guest-card-detail {
  display: flex;
  gap: 4px 8px;
  flex-wrap: wrap;
  align-items: center;
}

.guest-card-detail span {
  min-height: 0;
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: #315242;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.guest-card-detail span + span::before {
  content: "·";
  margin-right: 8px;
  color: #8b9a92;
  font-weight: 900;
}

.guest-delete-button {
  width: 68px;
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.guest-delete-button.is-recruit-delete {
  width: 104px;
  min-height: 40px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 900;
}

.guest-edit-button {
  width: 104px;
  min-height: 40px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 900;
}

.guest-apply-button {
  width: 96px;
  min-height: 40px;
  padding: 0 16px;
  color: #38443e;
  background: #f2f5f3;
  border-color: #d8dedb;
  font-size: 15px;
  font-weight: 900;
}

.guest-apply-button:disabled,
.guest-approval-status {
  width: 104px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  color: var(--green);
  background: #ecf8f1;
  border: 1px solid #cdebd9;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 900;
}

.guest-apply-button:disabled {
  border-color: #cdebd9;
  opacity: 1;
}

.guest-cancel-apply-button {
  width: 104px;
  min-height: 40px;
  padding: 0 14px;
  color: #d34242;
  background: #ffe5e5;
  border-color: #ffcaca;
  font-size: 14px;
  font-weight: 900;
}

.guest-applicant-list {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  display: grid;
  gap: 6px;
  margin-top: 3px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.guest-applicant-list strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
}

.guest-applicant-item {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.guest-applicant-profile {
  justify-self: start;
  min-width: 0;
  display: grid;
  gap: 3px;
}

.guest-applicant-name-line {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.guest-applicant-profile strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.25;
}

.guest-applicant-profile span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.guest-applicant-profile .guest-applicant-gender {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.guest-applicant-profile .guest-applicant-gender.is-male {
  color: #2563eb;
  background: #eff6ff;
}

.guest-applicant-profile .guest-applicant-gender.is-female {
  color: #db2777;
  background: #fdf2f8;
}

.guest-applicant-item em {
  justify-self: end;
  min-height: 34px;
  min-width: 126px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  color: var(--green);
  background: #f2f5f3;
  border: 1px solid #d8e0db;
  border-radius: 8px;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.guest-approve-button {
  justify-self: end;
  min-height: 34px;
  min-width: 92px;
  padding: 0 12px;
  color: var(--green);
  background: #f2f5f3;
  border-color: #d8e0db;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
}

.guest-approval-cancel-button {
  justify-self: end;
  min-height: 34px;
  min-width: 126px;
  padding: 0 12px;
  color: #d34242;
  background: #fff;
  border-color: #e3d8d8;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
}

.guest-applicant-list.is-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.guest-dialog {
  width: min(640px, calc(100vw - 28px));
}

.guest-dialog .guest-date-field {
  grid-column: 1 / -1;
}

.guest-dialog .guest-court-field {
  grid-column: 1;
  grid-row: 2;
}

.guest-dialog .guest-people-field {
  grid-column: 2;
  grid-row: 2;
}

.guest-dialog .guest-start-time-field {
  grid-column: 1;
  grid-row: 3;
}

.guest-dialog .guest-end-time-field {
  grid-column: 2;
  grid-row: 3;
}

.guest-dialog .guest-time-field select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 42px;
  min-height: 42px;
  padding: 0 9px;
  font-size: 16px;
  line-height: 40px;
  text-align: center;
}

.home-panel {
  width: min(100%, 760px);
  display: grid;
  gap: 18px;
  justify-self: center;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.home-panel h2 {
  font-size: 28px;
  font-weight: 900;
}

.home-action-grid {
  display: grid;
  gap: 12px;
}

.home-action-card {
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 18px;
  color: var(--text);
  text-decoration: none;
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.home-action-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.home-action-card strong {
  font-size: 23px;
  font-weight: 900;
}

.primary-home-card {
  color: white;
  background: var(--green);
  border-color: var(--green);
}

.primary-home-card span {
  color: rgba(255, 255, 255, 0.78);
}

.integration-home-card {
  border-color: #b9d9e0;
  background: #f2fbfd;
}

.integration-home-card span {
  color: #21616d;
}

.integration-home-card strong {
  color: #103c45;
}

.banner-admin-panel {
  display: grid;
  gap: 14px;
}

.banner-admin-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.banner-form {
  display: grid;
  gap: 12px;
}

.banner-target-tabs {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  background: #eef4f0;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.developer-page-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.banner-target-tabs button {
  min-height: 42px;
  padding: 0 10px;
  color: #5f6c65;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: clamp(12px, 3.4vw, 15px);
  font-weight: 900;
  line-height: 1.15;
  word-break: keep-all;
  cursor: pointer;
}

.banner-target-tabs button.is-active {
  color: var(--green);
  background: #fff;
  box-shadow: 0 1px 0 rgba(18, 80, 52, 0.08);
}

@media (max-width: 480px) {
  .developer-page-tabs button {
    padding: 0 5px;
    font-size: 11px;
  }
}

.checkbox-row {
  min-height: 42px;
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 10px;
  color: var(--text);
}

.checkbox-row input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  min-height: 22px;
}

.banner-form.is-image-only-mode [data-banner-copy-field] {
  opacity: 0.52;
}

.banner-form input[type="file"] {
  min-height: 46px;
  padding: 10px 12px;
  line-height: 1.4;
  background: #fff;
}

.banner-file-picker {
  position: relative;
}

.banner-file-picker input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.banner-file-control {
  min-height: 46px;
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  color: #5e6a63;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.4;
}

.banner-file-status-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  color: var(--muted);
  background: #f8fbf9;
  border: 1px dashed #cbd8d2;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
}

.banner-file-status-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.banner-file-status-row .ghost-button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
}

.banner-preview-shell {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.banner-preview-card {
  min-height: 190px;
  box-shadow: none;
}

.banner-preview-card.is-image-only img {
  height: 190px;
}

.banner-preview-card .home-banner-copy {
  min-height: 190px;
}

.notice-admin-panel {
  display: grid;
  gap: 14px;
}

.notice-admin-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  gap: 16px;
}

.notice-form {
  display: grid;
  gap: 12px;
}

.notice-admin-list-shell {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
}

.notice-admin-list {
  display: grid;
  gap: 10px;
}

.notice-admin-card {
  display: grid;
  gap: 9px;
  padding: 13px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.notice-admin-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.notice-admin-main strong {
  min-width: 0;
  overflow: hidden;
  font-size: 17px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-admin-main span {
  flex: 0 0 auto;
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
}

.notice-admin-content-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.notice-admin-card p {
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  max-height: 2.9em;
}

.notice-admin-card .danger-button {
  justify-self: end;
  min-height: 36px;
  padding: 0 12px;
}

.admin-workspace {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 18px;
  padding: 18px 18px calc(96px + env(safe-area-inset-bottom));
}

.registration-workspace {
  justify-items: center;
}

.registration-workspace.admin-workspace {
  min-height: calc(100dvh - 88px);
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
}

.member-workspace {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 18px 18px calc(96px + env(safe-area-inset-bottom));
}

.club-form,
.club-list {
  display: grid;
  gap: 12px;
}

.club-form[hidden] {
  display: none !important;
}

.club-create-toggle {
  width: auto;
  min-width: 78px;
  min-height: 36px;
  flex: 0 0 auto;
  padding: 0 12px;
  font-size: 13px;
}

.club-list-header {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-direction: row;
}

.club-list-header h2 {
  margin: 0;
  white-space: nowrap;
  word-break: keep-all;
}

.club-list-header > div {
  min-width: max-content;
  flex: 0 0 auto;
}

.club-inline-form {
  margin: 0 0 14px;
  padding: 14px;
  background: #fbfdfc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.club-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.club-card-link {
  display: block;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}

.club-card-link:hover strong {
  color: var(--green);
}

.club-card-main {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.club-card-logo {
  width: 44px;
  height: 44px;
  border: 1px solid #dfe7e2;
  border-radius: 8px;
  background: #f5f8f6;
  object-fit: cover;
}

.club-card-logo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
}

.club-card-copy {
  min-width: 0;
}

.club-join-button {
  min-width: 78px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.club-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.club-delete-button {
  min-width: 68px;
  min-height: 42px;
}

.club-card strong {
  display: block;
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 900;
}

.club-card-detail,
.club-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.club-app {
  background: #f1f4f6;
}

.club-landing-hero {
  position: relative;
  min-height: 300px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 34px 22px 38px;
  text-align: center;
  background: #fff;
  border-bottom: 1px solid #e8edf0;
}

.club-hero-back {
  position: absolute;
  top: 16px;
  left: 18px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.club-brand-mark {
  width: min(100%, 360px);
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  color: #d9e867;
}

.club-brand-ball {
  width: 84px;
  aspect-ratio: 1;
  display: block;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 48%, #fff 49% 54%, transparent 55%),
    linear-gradient(135deg, #cfe15e, #e5ef77);
  box-shadow: inset 0 0 0 1px rgba(20, 38, 29, 0.04);
}

.club-brand-mark strong {
  display: block;
  color: #dce86c;
  font-size: 82px;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0;
}

.club-brand-mark span {
  display: block;
  margin-top: 14px;
  color: #d1dc67;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
}

.club-landing-hero h1 {
  margin: 10px 0 0;
  color: #0d5f54;
  font-size: 24px;
  font-weight: 900;
}

.club-landing-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.club-page-workspace {
  flex: 1;
  width: min(100%, 760px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 0 auto;
  padding: 24px 22px calc(112px + env(safe-area-inset-bottom));
}

.club-notice-card,
.attendance-vote-card,
.club-management-card {
  background: #fff;
  border: 1px solid #edf1f2;
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(40, 58, 52, 0.08);
}

.club-notice-card {
  padding: 18px;
  cursor: pointer;
}

.club-notice-line {
  min-height: 58px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  color: #123d37;
  background: #eefdf5;
  border: 1px solid #cdeee0;
  border-radius: 8px;
}

.club-notice-line span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  min-height: 36px;
  padding: 0 14px;
  color: white;
  background: #10816f;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 900;
}

.club-notice-line strong {
  min-width: 0;
  overflow: hidden;
  font-size: 20px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.club-notice-line em {
  color: #6a7483;
  font-style: normal;
  font-size: 18px;
  font-weight: 900;
}

.club-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  background: #fff;
  border: 1px solid #edf1f2;
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(40, 58, 52, 0.06);
}

.club-tab {
  min-height: 48px;
  color: #65717c;
  background: #eef3f1;
  border: 0;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 900;
}

.club-tab.is-active {
  color: white;
  background: #10816f;
}

.club-tab-panel {
  display: none;
  gap: 14px;
}

.club-tab-panel.is-active {
  display: grid;
}

.attendance-vote-card,
.club-management-card {
  display: grid;
  gap: 20px;
  padding: 24px;
}

.attendance-vote-title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #0f665b;
}

.attendance-vote-title span {
  font-size: 34px;
  line-height: 1;
}

.attendance-vote-title h2 {
  font-size: 34px;
  font-weight: 900;
}

.attendance-week-toggle {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.9fr);
  gap: 12px;
}

.attendance-week-button {
  min-height: 58px;
  color: white;
  background: #b9c0c3;
  border: 0;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 900;
}

.attendance-week-button.is-active {
  background: #10816f;
}

.attendance-summary {
  margin: 0;
  color: #0f665b;
  font-size: 15px;
  font-weight: 900;
}

.attendance-feed,
.monthly-list,
.club-member-list {
  display: grid;
  gap: 20px;
}

.vote-day-card {
  display: grid;
  gap: 16px;
  padding: 2px 0 22px;
  border-bottom: 1px solid #e1e5e8;
}

.vote-day-card:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.vote-day-card.is-today .vote-day-heading strong {
  color: #0f665b;
}

.vote-day-heading {
  display: flex;
  align-items: baseline;
  gap: 28px;
  color: #1f2429;
}

.vote-day-heading strong,
.vote-day-heading span {
  font-size: 24px;
  font-weight: 900;
}

.attendance-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.attendance-chip {
  min-height: 44px;
  padding: 0 18px;
  color: white;
  border: 0;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 900;
}

.attendance-chip.is-blue {
  background: #2f9af2;
}

.attendance-chip.is-pink {
  background: #f7479a;
}

.attendance-chip.is-off {
  color: #707a83;
  background: #edf1f4;
}

.vote-close-button {
  min-height: 58px;
  color: white;
  background: #9ca5b0;
  border: 0;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 900;
}

.attendance-empty-card {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: #f5f8f6;
  border: 1px dashed #cbd8d1;
  border-radius: 8px;
  font-weight: 800;
}

.club-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.club-panel-header h2,
.club-panel-header h3 {
  font-size: 26px;
  font-weight: 900;
}

.club-inner-form {
  display: grid;
  gap: 12px;
}

@media (max-width: 640px) {
  .club-landing-hero {
    min-height: 260px;
    padding: 34px 18px 32px;
  }

  .club-brand-mark {
    width: min(100%, 310px);
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 14px;
  }

  .club-brand-ball {
    width: 68px;
  }

  .club-brand-mark strong {
    font-size: 58px;
  }

  .club-brand-mark span {
    margin-top: 8px;
    font-size: 13px;
  }

  .club-page-workspace {
    gap: 14px;
    padding: 18px 14px calc(112px + env(safe-area-inset-bottom));
  }

  .club-notice-card,
  .attendance-vote-card,
  .club-management-card {
    padding: 18px;
  }

  .club-notice-line {
    min-height: 54px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    padding: 0 12px;
  }

  .club-notice-line span {
    min-width: 52px;
    min-height: 34px;
    padding: 0 10px;
    font-size: 15px;
  }

  .club-notice-line strong {
    font-size: 17px;
  }

  .attendance-vote-title h2 {
    font-size: 30px;
  }

  .attendance-week-button {
    min-height: 54px;
    font-size: 18px;
  }

  .vote-day-heading {
    gap: 16px;
    flex-wrap: wrap;
  }

  .vote-day-heading strong,
  .vote-day-heading span {
    font-size: 21px;
  }

  .attendance-chip-list {
    gap: 10px;
  }

  .attendance-chip {
    min-height: 40px;
    padding: 0 14px;
    font-size: 16px;
  }

  .vote-close-button {
    min-height: 54px;
    font-size: 18px;
  }
}

@media (max-width: 380px) {
  .club-brand-mark {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .club-brand-ball {
    width: 56px;
  }

  .club-brand-mark strong {
    font-size: 48px;
  }

  .attendance-week-toggle {
    grid-template-columns: 1fr;
  }

  .club-notice-line strong {
    font-size: 15px;
  }
}

.monthly-card,
.club-member-card {
  display: grid;
  gap: 9px;
  padding: 13px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.monthly-card-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.monthly-card-main strong,
.club-member-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 17px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-card-main span {
  flex: 0 0 auto;
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
}

.monthly-card p,
.club-member-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.monthly-card .danger-button,
.club-member-card .danger-button {
  justify-self: end;
  min-height: 36px;
  padding: 0 12px;
}

.club-member-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.admin-console-workspace {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 18px;
  padding-bottom: calc(150px + env(safe-area-inset-bottom));
}

.admin-section-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
}

.admin-section-tab {
  min-height: 54px;
  display: grid;
  place-items: center;
  padding: 0 16px;
  color: var(--text);
  background: #f7faf8;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 16px;
  font-weight: 950;
  cursor: pointer;
}

.admin-section-tab.is-active {
  color: #fff;
  background: #157f6f;
  border-color: #157f6f;
  box-shadow: 0 12px 26px rgba(16, 95, 78, 0.18);
}

[data-admin-section][hidden] {
  display: none !important;
}

.admin-page .bottom-tabbar {
  min-height: calc(92px + env(safe-area-inset-bottom));
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}

.admin-page .bottom-tab {
  min-height: 66px;
  font-size: 14px;
}

.developer-workspace {
  flex: 1;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 18px 18px calc(96px + env(safe-area-inset-bottom));
}

.developer-admin-panel,
.developer-notice-panel,
.developer-owner-panel,
.developer-store-panel,
.developer-member-panel {
  display: grid;
  gap: 14px;
}

.developer-page .developer-banner-panel[hidden],
.developer-page .developer-notice-panel[hidden],
.developer-page .developer-member-panel[hidden],
.developer-page .developer-tournament-panel[hidden],
.developer-page .developer-store-panel[hidden],
.developer-page .developer-admin-panel[hidden],
.developer-page .developer-owner-panel[hidden] {
  display: none !important;
}

.developer-page:not(.developer-access-granted) .app {
  visibility: hidden;
}

.developer-admin-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.developer-admin-summary span {
  min-height: 50px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 10px 12px;
  color: var(--muted);
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 850;
}

.developer-admin-summary strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 950;
}

.developer-store-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.developer-store-summary span {
  min-height: 50px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 10px 12px;
  color: var(--muted);
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 850;
}

.developer-store-summary strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 950;
}

.developer-admin-list {
  display: grid;
  gap: 10px;
}

/* 아이디 선점 풀기 — 회원 명부 아래 한 줄. 낡은 memberSignupIds 문서를 지운다. */
.developer-signup-id-release {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.developer-signup-id-release label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.developer-signup-id-release input {
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  color: var(--text);
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
}

.developer-signup-id-release-hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
}

/* 지운 아이디의 Firebase Auth 계정 이메일. 해시라 콘솔에서 찾을 수가 없어 여기서 보여준다. */
.developer-signup-id-account {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 12px;
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* ‼️ display 를 주는 규칙에는 [hidden] 도 같이 — 안 그러면 hidden 이 무시된다. */
.developer-signup-id-account[hidden] {
  display: none;
}

.developer-signup-id-account code {
  overflow-x: auto;
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.developer-store-list {
  display: grid;
  gap: 10px;
}

.developer-store-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.developer-store-thumb {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--green);
  background: #eef4f0;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 950;
}

.developer-store-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.developer-store-main {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.developer-store-title {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.developer-store-title strong {
  min-width: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.developer-store-title span {
  flex: 0 0 auto;
  padding: 4px 8px;
  color: var(--green);
  border: 1px solid #cfe9d8;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.developer-store-title span.is-done {
  color: #9a4949;
  background: #fff0f0;
  border-color: #ffd4d4;
}

.developer-store-main p,
.developer-store-main small {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.developer-store-actions {
  display: grid;
  min-width: 74px;
}

.developer-store-actions .danger-button {
  min-height: 38px;
  padding: 0 12px;
}

.developer-admin-subhead {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.developer-admin-subhead h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
}

.developer-owner-list {
  display: grid;
  gap: 16px;
}

.developer-owner-group {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.developer-owner-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

.developer-owner-group-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
}

.developer-owner-group-head span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.developer-owner-group-list {
  display: grid;
  gap: 10px;
}

.developer-owner-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.developer-owner-card.has-owner {
  background: #f3fbf6;
  border-color: #bfe3cc;
}

.developer-owner-type {
  min-height: 46px;
  display: grid;
  place-items: center;
  color: var(--green);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 950;
}

.developer-owner-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.developer-owner-title {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.developer-owner-title strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.developer-owner-title span {
  flex: 0 0 auto;
  padding: 4px 8px;
  color: var(--green);
  background: #ecf8f1;
  border: 1px solid #cdebd9;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.developer-owner-card.has-no-owner .developer-owner-title span {
  color: var(--muted);
  background: #f6f8f7;
  border-color: var(--line);
}

.developer-owner-main p,
.developer-owner-main small {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.developer-owner-actions {
  display: grid;
  gap: 8px;
  min-width: 74px;
}

.developer-owner-actions .ghost-button,
.developer-owner-actions .danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 12px;
  text-align: center;
}

.developer-owner-actions .developer-owner-open-button {
  text-decoration: none;
  line-height: 1;
}

.developer-owner-actions .developer-owner-open-button:hover,
.developer-owner-actions .developer-owner-open-button:focus {
  text-decoration: none;
}

.developer-admin-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.developer-admin-card.is-admin,
.developer-admin-card.has-managed-place {
  background: #f3fbf6;
  border-color: #bfe3cc;
}

.developer-admin-photo {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--green);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 16px;
  font-weight: 950;
}

.developer-admin-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.developer-admin-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.developer-admin-title {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.developer-admin-title strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.developer-admin-title span {
  flex: 0 0 auto;
  padding: 4px 8px;
  color: var(--green);
  background: #ecf8f1;
  border: 1px solid #cdebd9;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.developer-admin-card:not(.is-admin) .developer-admin-title span {
  color: var(--muted);
  background: #f6f8f7;
  border-color: var(--line);
}

/* 개발자 홈 탭: 가입 회원 목록 (구글/게스트) */
.developer-member-card.is-google-member .developer-admin-title span {
  color: var(--green);
  background: #ecf8f1;
  border-color: #cdebd9;
}

.developer-member-card.is-guest-member .developer-admin-title span {
  color: #7a6a2f;
  background: #fbf6e7;
  border-color: #ecdfb6;
}

.developer-member-card.is-developer-member .developer-admin-title span {
  color: #4f46e5;
  background: #eef2ff;
  border-color: #c7d2fe;
}

.developer-member-card.is-developer-member {
  background: #f8f9ff;
  border-color: #dfe3fb;
}

.developer-member-card .developer-admin-actions button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.developer-member-card .developer-member-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.developer-admin-main p {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.developer-admin-role-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.developer-admin-role-list span {
  width: fit-content;
  padding: 5px 8px;
  color: var(--green);
  background: #ecf8f1;
  border: 1px solid #cdebd9;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.developer-admin-role-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.developer-admin-actions {
  display: grid;
  gap: 8px;
  min-width: 108px;
}

.developer-admin-actions .ghost-button,
.developer-admin-actions .danger-button {
  min-height: 38px;
  padding: 0 12px;
}

.developer-admin-actions button:disabled {
  cursor: default;
  opacity: 0.55;
}

@media (max-width: 520px) {
  .developer-admin-summary {
    grid-template-columns: 1fr;
  }

  .developer-store-summary {
    grid-template-columns: 1fr;
  }

  .developer-admin-card {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .developer-owner-card,
  .developer-store-card {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .developer-admin-actions {
    grid-column: 1 / -1;
  }

  .developer-admin-actions .ghost-button,
  .developer-admin-actions .danger-button {
    width: 100%;
  }

  .developer-owner-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .developer-owner-actions .ghost-button,
  .developer-owner-actions .danger-button {
    width: 100%;
  }

  .developer-store-actions {
    grid-column: 1 / -1;
  }

  .developer-store-actions .danger-button {
    width: 100%;
  }
}

.admin-registration-stack {
  width: 100%;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
}

.registration-stack {
  width: min(100%, 760px);
  display: grid;
  gap: 18px;
}

.admin-summary-panel {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) minmax(280px, 1.2fr) minmax(320px, 1.7fr);
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}

.admin-summary-panel .section-header {
  padding: 0;
}

.admin-summary-panel .summary-header-spacer {
  min-height: 0;
  padding: 0;
}

.admin-summary-panel .section-header h2 {
  font-size: 20px;
}

.admin-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.top-summary-month-control {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: fit-content;
  grid-template-columns: 24px minmax(44px, auto) 24px;
  gap: 4px;
  margin-bottom: 2px;
}

.top-summary-month-control .summary-month-nav {
  width: 24px;
  height: 28px;
  min-height: 28px;
}

.top-summary-month-control .summary-month-title {
  min-height: 28px;
  padding: 0 2px;
  font-size: 16px;
}

.summary-month-control {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(92px, 1fr) 32px;
  gap: 6px;
  align-items: center;
  width: min(100%, 190px);
  margin: 0;
}

.summary-month-title {
  min-height: 34px;
  padding: 0 6px;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 17px;
  line-height: 1.1;
  font-weight: 950;
  text-align: center;
  cursor: pointer;
}

.summary-month-title:hover {
  background: #f0f5f1;
}

.summary-month-nav {
  min-width: 0;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  color: var(--green);
  background: #f7faf8;
}

.summary-month-picker {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.lesson-record-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.summary-total-item {
  grid-column: 1;
  grid-row: 2;
}

.summary-lesson-item {
  grid-column: 2;
  grid-row: 2;
}

.summary-rental-item {
  grid-column: 3;
  grid-row: 2;
}

.admin-summary-grid .summary-item {
  min-height: 74px;
  padding: 10px 8px;
}

.admin-summary-grid .summary-item span {
  font-size: 28px;
}

.admin-summary-grid .summary-item p {
  margin-top: 6px;
  font-size: 13px;
}

.admin-main-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.recurring-lesson-panel {
  display: grid;
  gap: 14px;
}

.rental-registration-panel {
  display: grid;
  gap: 14px;
}

.recurring-lesson-form {
  display: grid;
  gap: 12px;
}

.form-grid.compact-grid {
  gap: 10px;
}

.weekday-field {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.weekday-field legend {
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.rental-time-summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: var(--green);
  background: #eff7f2;
  border: 1px solid #cfe5d8;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 900;
}

.weekday-checkbox-group {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.weekday-checkbox-group label {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  color: var(--text);
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
}

.weekday-checkbox-group input {
  width: 15px;
  height: 15px;
}

.recurring-result {
  min-height: 20px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.recurring-result.success {
  color: var(--green);
}

.recurring-result.warn {
  color: var(--amber);
}

.recurring-result.error {
  color: var(--red);
}

.lesson-record-panel {
  display: grid;
  gap: 12px;
}

.lesson-record-section-header {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(170px, 1fr) minmax(170px, 1fr);
  align-items: center;
}

.lesson-record-section-header > div:first-child {
  min-width: 0;
}

.lesson-record-month-control {
  justify-self: center;
}

.lesson-record-section-header .lesson-record-actions {
  justify-self: end;
}

.lesson-record-list {
  display: grid;
  gap: 12px;
}

.lesson-inquiry-admin-list {
  display: grid;
  gap: 10px;
}

.lesson-inquiry-admin-card {
  display: grid;
  gap: 7px;
  padding: 14px;
  background: #fbfcfe;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.lesson-inquiry-admin-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lesson-inquiry-admin-badge {
  padding: 4px 9px;
  color: #2563eb;
  background: #eaf1ff;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 900;
}

.lesson-inquiry-admin-badge.is-rental {
  color: #c2540a;
  background: #fff0e2;
}

.lesson-inquiry-admin-meta small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.lesson-inquiry-admin-meta button {
  margin-left: auto;
  min-height: 30px;
  padding: 0 11px;
  color: #b3261e;
  background: #fdecea;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.lesson-inquiry-admin-card strong {
  font-size: 15px;
  font-weight: 900;
}

.lesson-inquiry-admin-card strong a {
  color: #2563eb;
  text-decoration: none;
}

.lesson-inquiry-admin-preference {
  color: #2563eb;
  font-size: 12px;
  font-weight: 850;
}

.lesson-inquiry-admin-card p {
  margin: 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.lesson-inquiry-admin-empty {
  margin: 0;
  padding: 18px 0 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.lesson-center-group-operations-toolbar {
  display: grid;
  gap: 14px;
  align-self: start;
}

.lesson-center-group-operations-toolbar .section-header {
  align-items: center;
  flex-wrap: wrap;
}

.visually-hidden {
  width: 1px !important;
  height: 1px !important;
  position: absolute !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.lesson-center-group-manage-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
}

.lesson-center-group-manage-actions .ghost-button {
  width: auto;
  min-width: 0;
  min-height: 34px;
  padding: 0 10px;
  color: #0F6D4E;
  background: #F0F9F5;
  border-color: #CFE9DD;
  font-size: 12px;
  text-decoration: none;
}

.lesson-center-group-manage-actions .ghost-button.is-remove {
  color: #C2413B;
  background: #FFF7F6;
  border-color: #F4D4D1;
}

.lesson-center-operations-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 4px;
  background: #F1F5F9;
  border-radius: 8px;
  scrollbar-width: none;
}

.lesson-center-operations-filter[hidden] {
  display: none;
}

.lesson-center-operations-filter::-webkit-scrollbar {
  display: none;
}

.lesson-center-operations-filter-link {
  min-width: max-content;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  color: #64748B;
  background: transparent;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.lesson-center-operations-filter-link.is-active {
  color: #fff;
  background: #157F6F;
  box-shadow: 0 5px 14px rgba(21, 127, 111, 0.18);
}

.lesson-center-group-manage-dialog {
  width: min(520px, calc(100vw - 28px));
}

.lesson-center-group-manage-dialog .reservation-form {
  display: grid;
  gap: 14px;
}

.lesson-center-group-manage-dialog .dialog-header {
  margin-bottom: 0;
}

.lesson-center-group-manage-description {
  margin: 0;
  color: #64748B;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.55;
}

.lesson-center-group-manage-list {
  display: grid;
  gap: 8px;
}

.lesson-center-group-manage-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: #F8FAF9;
  border: 1px solid #DDE7E2;
  border-radius: 8px;
}

.lesson-center-group-manage-row > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.lesson-center-group-manage-row strong {
  color: #0F172A;
  font-size: 15px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.lesson-center-group-manage-row span {
  color: #64748B;
  font-size: 12px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.lesson-center-group-manage-row button {
  width: auto;
  min-width: max-content;
  min-height: 36px;
  flex: 0 0 auto;
  padding: 0 12px;
}

.lesson-center-group-manage-row button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.lesson-center-group-manage-empty {
  margin: 0;
  padding: 22px 14px;
  color: #64748B;
  background: #F8FAF9;
  border: 1px dashed #CBD5E1;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 750;
  text-align: center;
}

.lesson-center-group-operations-overview {
  display: grid;
  gap: 22px;
  align-self: start;
}

.coach-management-center-filter-shell {
  min-width: 0;
}

.lesson-center-group-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  background: #F7F9FC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
}

.lesson-center-group-summary-item {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 16px;
  border-right: 1px solid #E2E8F0;
}

.lesson-center-group-summary-item:last-child {
  border-right: 0;
}

.lesson-center-group-summary-item span {
  color: #64748B;
  font-size: 12px;
  font-weight: 800;
}

.lesson-center-group-summary-item strong {
  color: #0F172A;
  font-size: 24px;
  font-weight: 950;
}

.lesson-center-group-summary-item.is-lesson strong {
  color: #2563EB;
}

.lesson-center-group-summary-item.is-rental strong {
  color: #C2540A;
}

.lesson-center-group-summary-item.is-inquiry strong {
  color: #0F8A5F;
}

.lesson-center-group-registration-list {
  display: grid;
  border-top: 1px solid #E2E8F0;
}

.lesson-center-group-registration-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #E2E8F0;
}

.lesson-center-group-registration-main {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.lesson-center-group-registration-main > strong {
  color: #0F172A;
  font-size: 15px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.lesson-center-group-registration-main > span,
.lesson-center-group-registration-main > small {
  color: #64748B;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.lesson-center-group-registration-row > .ghost-button {
  width: auto;
  min-width: 64px;
  min-height: 36px;
  flex: 0 0 auto;
  padding: 0 12px;
  text-decoration: none;
}

.lesson-center-group-block {
  display: grid;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #E2E8F0;
}

.lesson-center-group-inquiry-card {
  background: #fff;
}

/* 문의 카드에서 바로 레슨/대관 등록으로 가는 버튼 — 카드 오른쪽 아래 */
.lesson-center-group-inquiry-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}

.lesson-center-group-inquiry-actions .ghost-button {
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
  white-space: nowrap;
}

.lesson-center-group-branch-badge {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  color: #0F6D4E;
  background: #E6F7EF;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.lesson-center-group-registration-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.lesson-center-group-month-control {
  display: grid;
  grid-template-columns: 38px minmax(90px, auto) 38px;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.lesson-center-group-month-control .icon-button {
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  color: #0F7A5B;
  background: #F7FAF8;
  border: 0;
  font-size: 24px;
  font-weight: 900;
}

.lesson-center-group-month-control strong {
  color: #0F172A;
  font-size: 17px;
  font-weight: 950;
  text-align: center;
}

.lesson-center-group-month-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.lesson-center-group-month-summary > div {
  min-width: 0;
  min-height: 86px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: #EDF3FF;
  border: 1px solid #D9E4F7;
  border-radius: 8px;
}

.lesson-center-group-month-summary strong {
  color: #0F7A5B;
  font-size: 26px;
  font-weight: 950;
}

.lesson-center-group-month-summary span {
  color: #53657B;
  font-size: 12px;
  font-weight: 850;
}

.lesson-center-group-month-summary .is-lesson strong {
  color: #2563EB;
}

.lesson-center-group-month-summary .is-rental strong {
  color: #C2540A;
}

.lesson-center-group-month-reservation-list,
.lesson-center-group-payroll-list {
  display: grid;
  border-top: 1px solid #E2E8F0;
}

.lesson-center-group-month-reservation-row,
.lesson-center-group-payroll-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #E2E8F0;
}

.lesson-center-group-month-reservation-row > div,
.lesson-center-group-payroll-row > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.lesson-center-group-month-reservation-row strong,
.lesson-center-group-payroll-row strong {
  color: #0F172A;
  font-size: 15px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.lesson-center-group-month-reservation-row small,
.lesson-center-group-payroll-row span,
.lesson-center-group-payroll-row small {
  color: #64748B;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.lesson-center-group-month-reservation-row .ghost-button,
.lesson-center-group-payroll-row .ghost-button {
  width: auto;
  min-width: max-content;
  min-height: 36px;
  flex: 0 0 auto;
  padding: 0 12px;
  text-decoration: none;
}

.lesson-center-group-payroll-row .ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.lesson-center-group-payroll-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.lesson-center-group-payroll-summary > div {
  min-width: 0;
  min-height: 106px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px;
  background: #F8FAF9;
  border: 1px solid #DDE7E2;
  border-radius: 8px;
}

.lesson-center-group-payroll-summary span {
  color: #64748B;
  font-size: 11px;
  font-weight: 850;
}

.lesson-center-group-payroll-summary strong {
  color: #0F7A5B;
  font-size: 20px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.lesson-center-group-payroll-summary small {
  color: #64748B;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.35;
}

.lesson-center-group-payroll-summary .is-rental strong,
.lesson-center-group-payroll-summary .is-other strong {
  color: #C2540A;
}

.lesson-center-group-payroll-summary .is-coach strong {
  color: #DC2626;
}

.lesson-center-group-payroll-summary .is-owner strong {
  color: #2563EB;
}

.lesson-center-group-empty {
  margin: 0;
  padding: 20px 14px;
  color: #64748B;
  background: #EDF3FF;
  border: 1px dashed #C8D7EF;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 750;
  text-align: center;
}

/* [정산 내역 탭] 지점별로 묶은 코치 정산서 목록 (2026-07-29) */
.lesson-center-group-settlement-list {
  display: grid;
  gap: 14px;
}

.lesson-center-group-settlement-branch {
  display: grid;
  gap: 8px;
}

.lesson-center-group-settlement-branch-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.lesson-center-group-settlement-branch-head strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
}

.lesson-center-group-settlement-branch-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

/* 누르면 정산서 원본이 열리는 줄 — <button> 이라 기본 스타일을 눌러준다 */
.lesson-center-group-settlement-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--line);
  border-radius: 11px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lesson-center-group-settlement-row:hover,
.lesson-center-group-settlement-row:focus-visible {
  border-color: var(--primary);
  background: var(--primary-tint, #eaf2fe);
}

.lesson-center-group-settlement-chevron {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}

.lesson-center-group-settlement-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.lesson-center-group-settlement-title {
  display: flex;
  align-items: center;
  gap: 7px;
}

.lesson-center-group-settlement-title strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.lesson-center-group-settlement-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.lesson-center-group-settlement-row b {
  flex: 0 0 auto;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.coach-payroll-panel {
  display: grid;
  gap: 12px;
}

@media (max-width: 640px) {
  .lesson-center-group-operations-toolbar {
    gap: 11px;
  }

  .lesson-center-group-operations-toolbar .section-header {
    gap: 8px;
  }

  .lesson-center-group-manage-actions {
    gap: 4px;
  }

  .lesson-center-group-manage-actions .ghost-button {
    min-height: 32px;
    padding: 0 8px;
    font-size: 11px;
  }

  .lesson-center-operations-filter {
    margin: 0 -4px;
  }

  .lesson-center-operations-filter-link {
    min-height: 38px;
    padding: 0 8px;
    font-size: 12px;
  }

  .lesson-center-group-operations-overview {
    gap: 18px;
  }

  .lesson-center-group-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lesson-center-group-summary-item {
    padding: 13px;
  }

  .lesson-center-group-summary-item:nth-child(2) {
    border-right: 0;
  }

  .lesson-center-group-summary-item:nth-child(-n + 2) {
    border-bottom: 1px solid #E2E8F0;
  }

  .lesson-center-group-summary-item strong {
    font-size: 21px;
  }

  .lesson-center-group-registration-row,
  .lesson-center-group-month-reservation-row,
  .lesson-center-group-payroll-row {
    gap: 10px;
    padding: 12px 0;
  }

  .lesson-center-group-block {
    padding-top: 16px;
  }

  .lesson-center-group-payroll-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lesson-center-group-payroll-summary > div {
    min-height: 98px;
    padding: 11px;
  }

  .lesson-center-group-payroll-summary strong {
    font-size: 18px;
  }

  .lesson-center-group-inquiry-card .lesson-inquiry-admin-meta {
    flex-wrap: wrap;
  }

  .lesson-center-group-inquiry-card .lesson-inquiry-admin-meta button {
    margin-left: 0;
  }
}

.coach-payroll-section-header {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(170px, 1fr) minmax(170px, 1fr);
  align-items: center;
}

.coach-payroll-section-header > div:first-child {
  min-width: 0;
}

.coach-payroll-month-control {
  justify-self: center;
}

.coach-payroll-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(118px, 1fr));
  gap: 10px;
}

.coach-payroll-summary-item {
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 10px 11px;
  background: #f8faf8;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.coach-payroll-summary-item.is-compact {
  padding-inline: 10px;
}

.coach-payroll-summary-item.is-money {
  min-width: 0;
}

.coach-payroll-summary-item span,
.coach-payroll-summary-item small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.coach-payroll-summary-item strong {
  min-width: 0;
  color: var(--green);
  font-size: clamp(16px, 1.25vw, 19px);
  font-weight: 950;
  line-height: 1.15;
  white-space: nowrap;
}

.coach-payroll-summary-item.is-compact strong {
  font-size: 18px;
}

.coach-payroll-summary-item.is-coach-pay strong {
  color: var(--amber);
}

.coach-payroll-summary-item.is-rental-pay strong {
  color: var(--amber);
}

.coach-payroll-summary-item.is-owner-pay strong {
  color: var(--blue);
}

.coach-payroll-summary-item.is-other-pay strong {
  color: var(--green);
}

.coach-payroll-list {
  display: grid;
  align-content: start;
  gap: 10px;
}

.coach-payroll-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.coach-payroll-card.is-rental-payroll-card {
  background: #fffdf8;
}

.coach-payroll-card-head {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.coach-payroll-card-title {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.coach-payroll-card-title strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 17px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-payroll-card-title strong span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.coach-payroll-card-title span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.coach-payroll-rate-control {
  justify-self: end;
  width: max-content;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.coach-payroll-rate-control.is-invalid {
  background: var(--red-soft);
  border-color: #f4b4b4;
}

.coach-payroll-rate-control label {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.coach-payroll-rate-field {
  position: relative;
  display: block;
  width: 70px;
}

.coach-payroll-rate-field span {
  position: absolute;
  top: 50%;
  right: 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

.coach-payroll-rate-number {
  width: 100%;
  min-height: 34px;
  padding: 0 24px 0 9px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 950;
}

.coach-payroll-rate-number::-webkit-outer-spin-button,
.coach-payroll-rate-number::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.coach-payroll-rate-number[type="number"] {
  appearance: textfield;
}

.coach-payroll-rate-control small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.coach-payroll-rate-control.is-rental-rate {
  background: transparent;
  border-color: transparent;
}

.coach-payroll-rate-control.is-readonly {
  grid-template-columns: auto auto minmax(0, 1fr);
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.coach-payroll-rate-control.is-readonly strong,
.coach-payroll-rate-control.is-readonly span {
  color: var(--muted);
  font-weight: 950;
  white-space: nowrap;
}

.coach-payroll-rate-control.is-readonly small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* [클로드] 급여 정산 배분률 클릭 편집 (2026-07-20) */
.coach-payroll-rate-control.is-editable {
  cursor: pointer;
  padding: 5px 8px 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.coach-payroll-rate-control.is-editable strong,
.coach-payroll-rate-control.is-editable span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.coach-payroll-rate-control.is-editable:hover,
.coach-payroll-rate-control.is-editable:focus-visible {
  border-color: var(--primary);
  background: var(--primary-tint);
}

.coach-payroll-rate-control.is-editable .coach-payroll-rate-edit-hint {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.coach-payroll-rate-editor {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 9px;
  background: #f8faf9;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.coach-payroll-rate-editor.is-invalid {
  background: var(--red-soft);
  border-color: #f4b4b4;
}

.coach-payroll-rate-editor-grid {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}

.coach-payroll-rate-editor .coach-rate-edit-input {
  gap: 3px;
}

.coach-payroll-rate-editor .coach-payroll-rate-field {
  width: 58px;
}

.coach-payroll-rate-editor .coach-payroll-rate-number {
  min-height: 32px;
  padding: 0 15px 0 6px;
}

.coach-payroll-rate-editor-actions {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  gap: 6px;
}

.coach-payroll-rate-editor-actions .ghost-button {
  min-height: 32px;
  padding: 0 11px;
  font-size: 13px;
}

.coach-payroll-rate-editor-actions .ghost-button.is-save {
  color: var(--primary);
  border-color: var(--primary);
}

.coach-payroll-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(86px, 0.75fr)) repeat(4, minmax(116px, 1.1fr));
  gap: 8px;
}

.coach-payroll-metrics div {
  min-height: 50px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 8px 9px;
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.coach-payroll-metrics span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.coach-payroll-metrics strong {
  min-width: 0;
  color: var(--text);
  font-size: clamp(13px, 1vw, 14px);
  font-weight: 950;
  line-height: 1.2;
  white-space: nowrap;
}

.coach-payroll-metrics .is-count-metric strong {
  font-size: 14px;
}

.coach-payroll-metrics .is-coach-pay strong {
  color: var(--amber);
}

.coach-payroll-metrics .is-owner-pay strong {
  color: var(--blue);
}

.coach-payroll-metrics .is-other-pay strong {
  color: var(--green);
}

.coach-payroll-detail-list {
  display: grid;
  align-content: start;
  gap: 6px;
  padding-top: 2px;
}

.coach-payroll-detail-head,
.coach-payroll-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.coach-payroll-detail-head {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 30px;
  padding: 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
  list-style: none;
}

.coach-payroll-detail-head::-webkit-details-marker {
  display: none;
}

.coach-payroll-detail-head:focus {
  outline: none;
}

.coach-payroll-detail-head:focus-visible {
  border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(24, 132, 81, 0.18);
}

.coach-payroll-detail-head::after {
  content: "⌄";
  align-self: center;
  justify-self: end;
  color: var(--green);
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  margin-left: 4px;
}

.coach-payroll-detail-list[open] .coach-payroll-detail-head::after {
  content: "⌃";
}

.coach-payroll-detail-head span {
  justify-self: end;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.coach-payroll-detail-row {
  min-height: 48px;
  padding: 8px 10px;
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.coach-payroll-detail-row div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.coach-payroll-detail-row strong,
.coach-payroll-detail-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-payroll-detail-row strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
}

.coach-payroll-detail-row span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.coach-payroll-detail-row b {
  color: var(--green);
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.coach-payroll-detail-row.is-rental-detail-row b {
  color: var(--amber);
}

.lesson-record-card {
  position: relative;
  display: grid;
  gap: 0;
  padding: 12px 14px;
  background: #f8fbff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.lesson-record-card.rental-record-card {
  background: #fffaf0;
  border-color: #f0d9a9;
}

.lesson-record-main {
  display: grid;
  grid-template-columns: 1fr;
  align-items: flex-start;
  gap: 4px;
}

.lesson-record-content {
  min-width: 0;
  display: grid;
  gap: 4px;
  align-content: start;
  padding-right: 84px;
}

.lesson-record-name {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.lesson-record-name strong {
  min-width: 0;
  overflow: hidden;
  font-size: 18px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-record-type {
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.lesson-record-type.is-lesson {
  color: var(--blue);
  background: var(--blue-soft);
  border: 1px solid #c5d9ff;
}

.lesson-record-type.is-rental {
  color: var(--amber);
  background: var(--amber-soft);
  border: 1px solid #edcf96;
}

.lesson-record-phone {
  color: var(--muted);
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
}

.lesson-record-meta {
  flex: 0 0 auto;
  width: 100%;
  display: grid;
  justify-items: end;
  gap: 4px;
}

.lesson-record-meta span {
  color: var(--green);
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
}

.lesson-record-detail,
.lesson-record-count,
.lesson-record-fee-summary,
.lesson-record-period,
.lesson-record-memo {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.lesson-record-count {
  color: var(--text);
}

.lesson-record-fee-summary {
  color: var(--green);
  font-weight: 900;
}

.lesson-record-period {
  color: var(--muted);
  font-weight: 900;
}

.rental-record-card .lesson-record-meta span,
.rental-record-card .lesson-record-fee-summary {
  color: var(--amber);
}

.lesson-record-card-actions {
  width: 72px;
  display: grid;
  grid-template-columns: 1fr;
  flex: 0 0 auto;
  gap: 4px;
  margin-left: auto;
  justify-self: end;
  white-space: nowrap;
}

.lesson-record-meta .lesson-record-card-actions {
  margin-left: 0;
}

/* 삭제는 카드 위, 수정·연장은 카드 아래로 벌려 배치 */
.lesson-record-name .lesson-record-card-actions {
  position: absolute;
  top: 12px;
  right: 14px;
  bottom: 12px;
  margin-left: 0;
  align-self: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 2번째(수정)부터 아래로 밀어 삭제와 분리 */
.lesson-record-name .lesson-record-card-actions > button:nth-child(2) {
  margin-top: auto;
}

.lesson-record-card-actions .ghost-button,
.lesson-record-card-actions .danger-button {
  min-height: 28px;
  padding: 0 12px;
  font-size: 12px;
}


.coach-admin-workspace {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 18px 18px calc(96px + env(safe-area-inset-bottom));
  align-items: start;
}

.admin-console-column {
  min-width: 0;
  display: grid;
  gap: 18px;
  align-content: start;
}

.coach-admin-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.coach-admin-form-panel,
.coach-list-panel,
.member-coach-panel {
  width: 100%;
  display: grid;
  gap: 14px;
}

.coach-form,
.court-manage-form {
  display: grid;
  gap: 12px;
}

.court-form {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.court-form .ghost-button {
  width: 100%;
}

.court-select-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.court-select-row select {
  min-width: 0;
}

.court-delete-button {
  min-width: 64px;
  padding: 0 12px;
}

.court-delete-button[hidden] {
  display: none;
}

.court-assignment-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.court-assignment-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(84px, 0.45fr) minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.court-assignment-row > strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.court-assignment-row > div {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.court-assignment-row span {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.court-assignment-row span > strong {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.court-assignment-row span > small,
.court-assignment-row span.is-empty,
.court-assignment-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.court-assignment-row span > small {
  flex: 0 0 auto;
}

.court-assignment-empty {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.coach-branch-list {
  display: grid;
  gap: 12px;
}

.coach-branch-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.coach-branch-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.coach-branch-title strong {
  font-size: 18px;
  font-weight: 900;
}

.coach-branch-title span {
  color: var(--green);
  font-size: 14px;
  font-weight: 900;
}

.coach-row-list {
  display: grid;
  gap: 8px;
}

.coach-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 11px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.coach-row-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.coach-row strong {
  overflow: hidden;
  font-size: 16px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-row span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.coach-row-profile {
  margin: 4px 0 0;
  color: #3f4a44;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.5;
  white-space: pre-line;
}

.coach-row-profile.is-career {
  color: var(--muted);
}

.coach-row-profile b {
  display: inline-block;
  margin-right: 6px;
  color: var(--green);
  font-weight: 950;
}

.coach-row-actions {
  display: grid;
  gap: 6px;
}

/* 고정 64px가 지점 뷰 "프로필 설정" 라벨을 세 줄로 갈랐음 — 내용에 맞춰 늘어나게 */
.coach-row-actions .ghost-button,
.coach-row-actions .danger-button {
  width: auto;
  min-width: 64px;
  min-height: 36px;
  padding: 0 12px;
  white-space: nowrap;
}

#lessonCenterGroupCoachProfileList .coach-row-actions {
  align-self: center;
}

#lessonCenterGroupCoachProfileList .coach-row-actions .ghost-button {
  width: auto;
  min-width: 92px;
  padding: 0 14px;
  white-space: nowrap;
}

@media (max-width: 360px) {
  #lessonCenterGroupCoachProfileList .coach-row {
    grid-template-columns: minmax(0, 1fr);
  }

  #lessonCenterGroupCoachProfileList .coach-row-actions,
  #lessonCenterGroupCoachProfileList .coach-row-actions .ghost-button {
    width: 100%;
    min-width: 0;
  }
}

.coach-profile-photo-editor {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  background: #f8faf8;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.coach-profile-photo-preview {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: var(--green);
  border-radius: 8px;
  font-size: 20px;
  font-weight: 950;
}

.coach-profile-photo-preview.has-photo {
  background: #e5ece7;
}

.coach-profile-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coach-profile-photo-controls {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.coach-profile-photo-controls > span {
  width: 100%;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.coach-profile-photo-picker {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.coach-profile-photo-picker input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.coach-profile-edit-grid {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.coach-profile-edit-input {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.coach-profile-edit-input textarea {
  width: 100%;
  min-height: 78px;
  resize: vertical;
  padding: 10px 11px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-weight: 750;
  line-height: 1.45;
}

.member-coach-list {
  display: grid;
  gap: 10px;
}

.member-approval-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.member-approval-summary span {
  min-height: 44px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 8px 10px;
  color: var(--muted);
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 850;
}

.member-approval-summary strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
}

.member-coach-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.member-coach-card.is-pending {
  background: #fffdf7;
  border-color: #ead6aa;
}

.member-coach-photo {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--green);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 16px;
  font-weight: 950;
}

.member-coach-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.member-coach-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.member-coach-main strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-coach-main span,
.member-coach-main em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.member-coach-main em {
  color: var(--green);
}

.member-status-badge {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.member-status-badge.is-pending {
  color: #8a5500;
  background: #fff1d7;
  border: 1px solid #efd099;
}

.member-status-badge.is-approved {
  color: var(--green);
  background: #ecf8f1;
  border: 1px solid #cdebd9;
}

.member-approval-note,
.member-info-details {
  grid-column: 1 / -1;
}

.member-approval-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.member-info-details {
  padding: 0;
}

.member-info-details summary {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 950;
}

.member-info-details summary::-webkit-details-marker {
  display: none;
}

.member-info-details summary {
  color: var(--green);
}

.member-info-details[open] summary {
  color: var(--muted);
}

.member-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.member-info-grid div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.member-info-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.member-info-grid strong {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.member-info-actions {
  display: grid;
  margin-top: 8px;
}

.member-info-actions .danger-button {
  width: 100%;
  min-height: 36px;
}

.member-coach-controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.member-coach-controls.approval-only {
  grid-template-columns: 1fr;
}

.member-coach-controls button {
  grid-column: 1 / -1;
  width: 100%;
}

@media (max-width: 520px) {
  .member-approval-summary,
  .member-info-grid {
    grid-template-columns: 1fr;
  }
}

.coach-rate-edit-box,
.rental-rate-settings {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 9px;
  background: #f8faf9;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.coach-rate-edit-box.is-invalid,
.rental-rate-settings.is-invalid {
  background: var(--red-soft);
  border-color: #f4b4b4;
}

.coach-rate-edit-grid,
.rental-rate-settings-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.coach-rate-edit-input {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 5px;
  color: var(--green);
  font-size: 12px;
  font-weight: 950;
}

.rental-rate-settings {
  background: #fffdf8;
  border-color: #f0d9a9;
}

.rental-rate-settings-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rental-rate-settings-title strong {
  font-size: 14px;
  font-weight: 950;
}

.rental-rate-settings-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.rental-rate-save-button {
  min-height: 32px;
  padding: 0 12px;
}

.tournament-page {
  background:
    linear-gradient(180deg, #f3f8ff 0, #ffffff 360px, #f6faff 100%);
}

.tournament-workspace {
  flex: 1;
  width: min(calc(100% - 32px), 1240px);
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  margin: 0 auto;
  padding: 22px 0 calc(110px + env(safe-area-inset-bottom));
}

.tournament-topbar {
  grid-column: 1 / -1;
  justify-self: center;
}

.tournament-hero-stack {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: clamp(48px, 10vh, 112px);
}

.tournament-notice-section,
.tournament-banner-section,
.tournament-title-panel {
  width: min(100%, 760px);
}

.tournament-banner-section .home-banner {
  min-height: 136px;
  /* 기본 배너 공통 배경(시안 B)과 통일 (2026-07-26) */
  background:
    radial-gradient(circle 86px at 89% 13%, rgba(255, 255, 255, 0.34), transparent),
    radial-gradient(circle 54px at 75% 86%, rgba(255, 255, 255, 0.34), transparent),
    linear-gradient(135deg, #0052CC 0%, #0066FF 55%, #4F8DFD 100%);
  box-shadow: 0 14px 34px rgba(0, 103, 232, 0.12);
}

.tournament-banner-section .home-banner-copy {
  align-content: center;
  padding: 20px 22px;
}

.tournament-banner-section .home-banner img {
  min-height: 136px;
  max-height: 178px;
}

.tournament-banner-section .home-banner.has-no-image .home-banner-copy {
  min-height: 128px;
}

.tournament-banner-section .home-banner.is-image-only img {
  height: clamp(150px, 28vw, 240px);
  min-height: 0;
  max-height: none;
}

.tournament-banner-section .home-banner.has-image-error img {
  display: none;
}

.home-banner-section .home-banner,
.member-banner-section .home-banner,
.tournament-banner-section .home-banner {
  min-height: 150px;
}

.home-banner-section .home-banner img,
.member-banner-section .home-banner img,
.tournament-banner-section .home-banner img {
  min-height: 150px;
  max-height: 210px;
}

.home-banner-section .home-banner.has-no-image .home-banner-copy,
.member-banner-section .home-banner.has-no-image .home-banner-copy,
.tournament-banner-section .home-banner.has-no-image .home-banner-copy {
  min-height: 132px;
}

.home-banner-section .home-banner.is-image-only img,
.member-banner-section .home-banner.is-image-only img,
.tournament-banner-section .home-banner.is-image-only img {
  height: clamp(140px, 30vw, 260px);
  min-height: 0;
  max-height: none;
}

.tournament-notice-section .home-notice-ticker {
  min-height: 48px;
  border-color: #dbe8f7;
  box-shadow: 0 8px 22px rgba(0, 103, 232, 0.06);
}

.tournament-empty-panel {
  grid-column: 1 / -1;
  min-height: 220px;
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: 0 10px 28px rgba(20, 38, 29, 0.06);
}

.tournament-empty-panel[hidden] {
  display: none;
}

.tournament-title-panel[hidden],
.tournament-player-panel[hidden],
.tournament-main-panel[hidden] {
  display: none;
}

.tournament-empty-panel strong {
  color: var(--green);
  font-size: 24px;
  font-weight: 950;
}

.tournament-title-panel {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 22px;
  color: var(--text);
  background: linear-gradient(135deg, #ffffff 0%, #f5faf7 100%);
  border: 1px solid #d8e5de;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(20, 38, 29, 0.06);
}

.tournament-title-panel h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
}

.tournament-current-title-panel {
  min-height: 0;
}

.tournament-current-title-panel > div {
  display: grid;
  gap: 6px;
}

.tournament-current-title-panel span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.tournament-player-header {
  align-items: center;
}

.tournament-player-method {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 15px;
  font-weight: 900;
  text-align: right;
}

.tournament-view-tabs-panel {
  min-height: 0;
  justify-content: center;
  padding: 10px 12px;
  background: #ffffff;
  border-color: #d6e4dc;
  box-shadow: 0 8px 22px rgba(20, 38, 29, 0.05);
}

.tournament-view-tabs-panel .tournament-main-tabs {
  min-width: 260px;
}

.tournament-main-tabs,
.tournament-division-tabs {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 6px;
  padding: 5px;
  background: #f1f6f3;
  border: 1px solid #d8e6de;
  border-radius: 8px;
}

.tournament-division-tabs {
  background: #f1f5f2;
  border-color: var(--line);
}

.tournament-main-tabs button,
.tournament-division-tabs button {
  min-height: 40px;
  padding: 0 16px;
  color: #66776e;
  background: transparent;
  border: 0;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.tournament-division-tabs button {
  color: var(--muted);
}

.tournament-main-tabs button.is-active,
.tournament-division-tabs button.is-active {
  color: var(--green);
  background: white;
  box-shadow: 0 3px 10px rgba(20, 38, 29, 0.07);
}

.tournament-method-tabs {
  grid-template-columns: 1fr;
}

.tournament-player-panel,
.tournament-main-panel {
  display: grid;
  gap: 14px;
  border-color: #d8e5de;
  box-shadow: 0 10px 26px rgba(20, 38, 29, 0.06);
}

.tournament-main-panel {
  min-width: 0;
}

.tournament-mode-section {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.tournament-mode-section[hidden] {
  display: none;
}

.section-header.compact.tournament-section-head {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 10px;
}

.tournament-section-heading-row {
  width: auto;
  justify-self: center;
  min-width: 0;
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 6px;
}

.tournament-section-heading-row h3 {
  min-width: 0;
  text-align: center;
  white-space: nowrap;
}

.tournament-mode-switch-button {
  width: 22px;
  min-width: 22px;
  height: 28px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  color: var(--green);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

.tournament-mode-switch-button:hover,
.tournament-mode-switch-button:focus-visible {
  background: #eef7f2;
}

.tournament-player-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, 0.55fr);
  gap: 8px;
}

.tournament-player-form .primary-button {
  grid-column: 1 / -1;
}

.tournament-player-actions,
.tournament-control-buttons,
.doubles-round-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tournament-player-summary,
.tournament-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.tournament-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tournament-player-summary div,
.tournament-summary-grid div {
  min-height: 52px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 8px 10px;
  background: #f8faf8;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.tournament-player-summary span,
.tournament-summary-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.tournament-player-summary strong,
.tournament-summary-grid strong {
  min-width: 0;
  color: var(--green);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.tournament-player-list {
  display: grid;
  gap: 8px;
}

.tournament-player-list-title {
  margin-top: 2px;
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}

.tournament-player-chip {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.tournament-player-chip span,
.tournament-select-chip span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  color: var(--blue);
  background: var(--blue-soft);
  border: 1px solid #c5d9ff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.tournament-player-chip.female span,
.tournament-select-chip.female span {
  color: #a23b6b;
  background: #ffe8f1;
  border-color: #f5c2d7;
}

.tournament-player-chip strong {
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tournament-player-chip-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.tournament-player-chip-main small {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tournament-player-chip .danger-button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.tournament-player-chip.is-readonly {
  grid-template-columns: auto minmax(0, 1fr);
}

.tournament-control-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.tournament-control-row .tournament-control-buttons {
  width: auto;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 8px;
}

.tournament-control-row .tournament-control-buttons .primary-button,
.tournament-control-row .tournament-control-buttons .ghost-button,
.tournament-control-row .tournament-control-buttons .danger-button {
  min-width: 96px;
  padding-left: 14px;
  padding-right: 14px;
  white-space: nowrap;
}

.tournament-bracket-actions {
  width: min(100%, 360px);
  justify-self: end;
}

.tournament-select-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.tournament-select-chip {
  min-height: 48px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 10px;
  color: var(--text);
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 900;
  text-align: left;
}

.tournament-select-chip strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tournament-select-chip.is-selected {
  color: var(--green);
  background: #eef7f2;
  border-color: #9bcab1;
}

.tournament-select-chip.is-used {
  color: var(--muted);
  background: #eef1ef;
  opacity: 0.74;
}

.tournament-empty-box {
  min-height: 58px;
  display: grid;
  place-items: center;
  padding: 12px;
  color: var(--muted);
  background: #f8faf8;
  border: 1px dashed #ccd8d0;
  border-radius: 8px;
  text-align: center;
}

.tournament-admin-panel {
  min-width: 0;
  display: grid;
  gap: 16px;
}

body.admin-page:not(.developer-page) .tournament-admin-panel {
  display: none;
}

.tournament-admin-panel .tournament-main-tabs {
  justify-self: center;
  width: min(260px, 100%);
  background: #f1f5f2;
  border-color: var(--line);
}

.tournament-admin-panel .tournament-main-tabs button {
  color: var(--muted);
}

.tournament-admin-panel .tournament-main-tabs button.is-active {
  color: var(--green);
  background: white;
}

.tournament-admin-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(250px, 0.86fr) minmax(420px, 1.14fr);
  gap: 20px;
  align-items: start;
}

.tournament-admin-block {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.tournament-admin-block h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 950;
}

.tournament-admin-block-head,
.tournament-section-head {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.tournament-admin-grid > .tournament-admin-block:first-child {
  padding-right: 18px;
  border-right: 1px solid var(--line);
}

.tournament-admin-panel .tournament-player-list {
  max-height: 280px;
  overflow: auto;
  padding-right: 4px;
}

.tournament-admin-main .tournament-mode-section {
  gap: 12px;
}

.tournament-admin-participant-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  margin-top: 2px;
  padding: 14px;
  background: #f8faf8;
  border: 1px solid #d8e5de;
  border-radius: 8px;
}

.tournament-group-panel {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.tournament-group-panel strong {
  font-size: 17px;
  font-weight: 950;
}

.tournament-group-create {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto;
  align-items: end;
  gap: 6px;
  padding: 4px;
  background: #edf4f0;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.tournament-group-create label {
  min-width: 0;
  gap: 4px;
  font-size: 12px;
  font-weight: 950;
}

.tournament-group-create select {
  min-height: 34px;
  padding: 0 28px 0 10px;
  background: #ffffff;
  font-size: 13px;
}

.tournament-group-create .ghost-button {
  min-height: 34px;
  padding: 0 13px;
  background: #ffffff;
  font-size: 13px;
}

.tournament-admin-participant-list .tournament-player-summary {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}

.tournament-admin-participant-list .tournament-player-list-title {
  margin-top: 0;
  padding-top: 2px;
  font-size: 16px;
}

.tournament-admin-participant-list .tournament-player-list {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  max-height: 360px;
}

.tournament-admin-participant-list .tournament-player-list.is-grouped {
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.tournament-player-group-column {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.tournament-player-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
}

.tournament-player-group-title strong {
  font-size: 16px;
  font-weight: 950;
}

.tournament-player-group-title span {
  color: var(--green);
  font-size: 13px;
  font-weight: 950;
}

.tournament-player-group-stack {
  display: grid;
  gap: 8px;
}

.tournament-admin-participant-list .tournament-player-chip {
  min-height: 58px;
  padding: 11px 12px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(20, 38, 29, 0.04);
}

.tournament-player-chip-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.tournament-player-group-select {
  width: auto;
  min-width: 72px;
  min-height: 32px;
  padding: 0 24px 0 9px;
  font-size: 13px;
  font-weight: 900;
}

.tournament-admin-participant-list .tournament-player-chip .danger-button {
  min-height: 32px;
  padding: 0 11px;
}

.tournament-admin-panel .tournament-control-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.tournament-admin-panel .tournament-control-buttons .primary-button {
  min-width: 132px;
}

.tournament-admin-panel .tournament-player-actions {
  grid-template-columns: minmax(0, 1fr) 118px;
}

.tournament-admin-panel .tournament-select-list {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.tournament-admin-panel .single-bracket-scroll {
  max-width: 100%;
}

.single-bracket-shell {
  display: grid;
  gap: 12px;
}

.single-bracket-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #f8faf8;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.single-bracket-title strong {
  min-width: 0;
  overflow: hidden;
  font-size: 18px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.single-bracket-title span {
  color: var(--amber);
  font-weight: 950;
  white-space: nowrap;
}

.single-bracket-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.single-round-column {
  min-width: 226px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.single-round-column h3 {
  margin: 0;
  color: var(--green);
  font-size: 16px;
}

.single-match-stack {
  display: grid;
  gap: 10px;
}

.single-tournament-match,
.doubles-match-card,
.doubles-standing-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.single-match-number,
.doubles-match-head strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.single-player-score-row {
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  padding: 6px 7px;
  background: #f8faf8;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.single-player-score-row.winner {
  background: #eef7f2;
  border-color: #b8dbc8;
}

.single-player-score-row.empty {
  color: var(--muted);
}

.single-player-score-row span {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.single-player-score-row input,
.doubles-score-inputs input {
  min-height: 30px;
  padding: 0 5px;
  text-align: center;
  font-size: 14px;
  font-weight: 950;
}

.single-advance-line {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.doubles-builder-area,
.doubles-match-area,
.doubles-standing-area {
  display: grid;
  gap: 10px;
}

.doubles-actions {
  width: min(100%, 360px);
}

.doubles-team-list {
  display: grid;
  gap: 8px;
}

.doubles-team-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.doubles-team-chip span {
  color: var(--green);
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.doubles-team-chip strong {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doubles-team-chip .danger-button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.doubles-round-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.doubles-round-slots div {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 9px 10px;
  background: #f8faf8;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.doubles-round-slots div.filled {
  background: #eef7f2;
  border-color: #b8dbc8;
}

.doubles-round-slots span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.doubles-round-slots strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doubles-match-list {
  display: grid;
  gap: 10px;
}

.doubles-tournament-rounds {
  display: grid;
  gap: 18px;
}

.doubles-tournament-round {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #fbfcfb;
  border: 1px solid #d7e2db;
  border-radius: 8px;
}

.doubles-tournament-round-head {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: #f4f7f5;
  border: 1px solid #dce6df;
  border-radius: 8px;
}

.doubles-tournament-round-head strong {
  color: #12201a;
  font-size: 20px;
  font-weight: 950;
}

.doubles-tournament-round-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.doubles-tournament-round.prelim-round {
  background: #fcfdfc;
}

.doubles-tournament-round.final-round {
  background: #f9fbfa;
  border-color: #cfded5;
}

.doubles-tournament-round.final-round.is-waiting {
  opacity: 0.78;
}

.tournament-group-standing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.tournament-group-standing div {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 4px 8px;
  padding: 9px 10px;
  background: #ffffff;
  border: 1px solid #dce6df;
  border-radius: 8px;
}

.tournament-group-standing div.is-qualified {
  background: #f4faf6;
  border-color: #bcd9c7;
}

.tournament-group-standing span {
  grid-row: span 2;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  color: var(--green);
  background: #eef7f2;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 950;
}

.tournament-group-standing strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tournament-group-standing small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doubles-tournament-round .doubles-match-list {
  gap: 12px;
}

.tournament-match-card {
  background: #ffffff;
  border-color: #cddbd2;
  border-radius: 8px;
  box-shadow: none;
}

.tournament-match-card.is-waiting {
  opacity: 0.72;
  background: #fbfcfb;
}

.match-waiting-badge {
  grid-column: 3;
  justify-self: end;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  color: var(--muted);
  background: #f3f6f4;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
}

.doubles-match-card {
  gap: 12px;
  padding: 14px;
  border: 2px solid #d8e1da;
  border-radius: 18px;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.06);
}

.doubles-match-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.doubles-match-head strong {
  grid-column: 2;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
  padding: 5px 16px;
  color: #047857;
  background: #ecfdf5;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 950;
}

.doubles-match-head .danger-button {
  grid-column: 3;
  justify-self: end;
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

.doubles-match-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 166px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.doubles-team-side {
  min-width: 0;
  min-height: 78px;
  display: grid;
  place-items: center;
  align-content: center;
  overflow: hidden;
  padding: 12px 10px;
  background: #ffffff;
  border: 0;
  border-radius: 18px;
  text-align: center;
}

.doubles-team-side strong {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: #111827;
  font-size: 22px;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: normal;
}

.doubles-score-inputs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.doubles-score-inputs input {
  width: 62px;
  min-height: 67px;
  padding: 0 3px;
  background: #ffffff;
  border: 3px solid #cfd8d2;
  border-radius: 15px;
  color: #111827;
  font-size: 22px;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.06);
  appearance: textfield;
}

.doubles-score-inputs input:focus {
  border-color: #9aa8a0;
  box-shadow: 0 0 0 4px rgba(154, 168, 160, 0.16);
}

.doubles-score-inputs input.is-winning-score,
.doubles-score-inputs input.is-winning-score:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.18);
}

.doubles-score-inputs b {
  color: #111827;
  font-size: 18px;
  font-weight: 950;
}

.doubles-standing-card h3 {
  margin: 0;
  font-size: 17px;
}

.standing-table-wrap {
  overflow-x: visible;
}

.standing-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.standing-table th,
.standing-table td {
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  white-space: nowrap;
}

.standing-table th {
  color: var(--muted);
  background: #f8faf8;
  font-weight: 950;
}

.standing-table .standing-name-col,
.standing-table .standing-name-cell {
  width: 28%;
  text-align: left;
}

.standing-table .standing-name-cell {
  overflow: hidden;
  font-weight: 900;
  text-overflow: ellipsis;
}

.standing-table .standing-rank-col,
.standing-table .standing-rank-cell {
  width: 12%;
  color: var(--green);
  font-weight: 950;
}

@media (max-width: 520px) {
  .doubles-standing-card {
    padding: 10px 8px;
  }

  .standing-table {
    font-size: 11px;
  }

  .standing-table th,
  .standing-table td {
    padding: 7px 2px;
  }

  .standing-table .standing-name-col,
  .standing-table .standing-name-cell {
    width: 26%;
  }
}

@media (min-width: 841px) {
  .admin-page {
    background: #eef2ef;
  }

  .admin-page .topbar {
    width: min(calc(100% - 56px), 1440px);
    min-height: 72px;
    margin: 24px auto 0;
    padding: 18px 24px;
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(20, 38, 29, 0.12);
  }

  .admin-page .topbar h1 {
    font-size: 20px;
  }

  .admin-page .topbar-actions {
    flex-wrap: nowrap;
  }

  .admin-page .topbar-actions .date-input {
    width: 180px;
  }

  .admin-page .admin-console-workspace {
    width: min(calc(100% - 56px), 1440px);
    margin: 0 auto;
    padding: 22px 0 118px;
  }

  .admin-page .admin-console-column {
    gap: 20px;
  }

  .admin-page .panel-section {
    padding: 18px;
    box-shadow: 0 10px 28px rgba(20, 38, 29, 0.06);
  }

  .admin-page .section-header.compact {
    padding-bottom: 14px;
  }

  .admin-page .section-header.compact h2 {
    font-size: 18px;
  }

  .admin-page .notice-admin-grid,
  .admin-page .coach-admin-grid {
    gap: 14px;
  }

  .admin-page .notice-admin-grid {
    grid-template-columns: 1fr;
  }

  .admin-page .notice-form textarea {
    min-height: 112px;
  }

  .admin-page .admin-summary-panel {
    gap: 16px;
    padding: 18px;
  }

  .admin-page .admin-summary-grid {
    gap: 10px;
  }

  .admin-page .admin-summary-grid .summary-item {
    min-height: 82px;
  }

  .admin-page .notice-admin-list,
  .admin-page .coach-branch-list {
    max-height: 420px;
    overflow: auto;
    padding-right: 4px;
  }

  .admin-page .lesson-record-list {
    max-height: 700px;
    overflow: auto;
    padding-right: 4px;
  }

  .admin-page .coach-payroll-list {
    min-height: 455px;
    max-height: min(650px, 65vh);
    overflow: auto;
    padding-right: 4px;
  }

  .admin-page .notice-admin-list:empty,
  .admin-page .lesson-record-list:empty,
  .admin-page .coach-payroll-list:empty,
  .admin-page .coach-branch-list:empty {
    display: block;
  }

  .admin-page .banner-admin-grid {
    grid-template-columns: minmax(420px, 520px) minmax(0, 1fr);
    gap: 20px;
  }

  .admin-page .banner-preview-card,
  .admin-page .banner-preview-card .home-banner-copy {
    min-height: 260px;
  }

  .admin-page .banner-preview-card.is-image-only img {
    height: 260px;
  }

  .admin-page .bottom-tabbar {
    right: auto;
    bottom: 28px;
    left: 32px;
    width: min(380px, calc(100vw - 64px));
    min-height: 92px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 18px 42px rgba(20, 38, 29, 0.18);
  }

  .admin-page .bottom-tab {
    min-height: 72px;
    font-size: 16px;
    border-radius: 9px;
  }

  .admin-page .bottom-all-menu-popup {
    right: auto;
    left: 0;
  }

  .developer-page .developer-workspace {
    width: min(calc(100% - 56px), 1120px);
    margin: 0 auto;
    padding: 22px 0 118px;
  }

  .developer-page .developer-banner-panel {
    padding: 22px;
  }

  .developer-page .banner-admin-grid {
    grid-template-columns: minmax(360px, 480px) minmax(0, 1fr);
    gap: 22px;
  }

  .developer-page .banner-preview-card,
  .developer-page .banner-preview-card .home-banner-copy {
    min-height: 300px;
  }

  .developer-page .banner-preview-card.is-image-only img {
    height: 300px;
  }
}

@media (min-width: 1280px) {
  .admin-page .admin-console-workspace {
    grid-auto-rows: auto;
  }

  .admin-page .admin-console-column {
    display: contents;
  }

  /* 홈 편집 탭 1열: 소식 등록 대신 레슨장 정보 수정을 먼저 (소식 등록은 그 다음 자동 배치) */
  .admin-page .lesson-center-admin-home-panel {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .admin-page .admin-summary-panel {
    grid-column: 2 / 4;
    grid-row: 1;
    grid-template-columns: minmax(170px, 0.85fr) minmax(280px, 1fr) minmax(340px, 1.25fr);
  }

  .admin-page .lesson-record-panel {
    grid-column: 2 / 4;
    grid-row: 2;
  }

  .admin-page .coach-payroll-panel {
    grid-column: 2 / 4;
    grid-row: 3;
  }

  .admin-page .tournament-admin-panel {
    grid-column: 2 / 4;
    grid-row: 4;
  }

  .admin-page .coach-admin-grid {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: 1fr;
  }

  .admin-page .banner-admin-panel {
    grid-column: 1 / -1;
    grid-row: 5;
  }
}

@media (min-width: 841px) and (max-width: 1279px) {
  .admin-page .topbar,
  .admin-page .admin-console-workspace {
    width: min(calc(100% - 32px), 1180px);
  }

  .admin-page .admin-console-left {
    grid-column: 1;
    grid-row: 1;
  }

  .admin-page .admin-console-right {
    grid-column: 2;
    grid-row: 1;
  }

  .admin-page .admin-summary-panel {
    grid-template-columns: 1fr;
  }

  .admin-page .coach-admin-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-page .banner-admin-panel {
    grid-column: 2;
    grid-row: 4;
  }

}

.admin-list {
  display: grid;
  gap: 10px;
}

.admin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.admin-row-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 108px minmax(120px, 1fr);
  gap: 8px 12px;
  align-items: center;
  padding: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
}

.admin-time {
  color: var(--green);
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
}

.admin-name {
  min-width: 0;
  overflow: hidden;
  font-size: 17px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-badges,
.admin-row-memo {
  grid-column: 1 / -1;
}

.admin-badges {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  color: var(--muted);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.badge.lesson,
.badge.coach-park {
  color: #174d96;
  background: #e5efff;
  border-color: #bfd6ff;
}

.badge.coach-kim {
  color: #0d7042;
  background: #e3f7eb;
  border-color: #bbe8cf;
}

.badge.reservation {
  color: #875202;
  background: var(--amber-soft);
  border-color: #f3d398;
}

.admin-row-memo {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.admin-row-actions {
  display: flex;
  gap: 8px;
}

.admin-row-actions .ghost-button,
.admin-row-actions .danger-button {
  min-height: 38px;
  padding: 0 12px;
}

.reservation-dialog {
  width: min(720px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  padding: 0;
  border: 0;
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: auto;
}

.reservation-dialog::backdrop {
  background: rgba(16, 24, 20, 0.45);
}

.reservation-form {
  padding: 20px;
}

.registration-dialog {
  width: min(560px, calc(100vw - 28px));
}

.registration-dialog .reservation-form {
  display: grid;
  gap: 12px;
}

.notice-dialog {
  width: min(560px, calc(100vw - 28px));
}

.notice-dialog-content {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.65;
  white-space: pre-wrap;
}

/* 메인홈·대회 공지 — 같은 미니멀 카드와 본문 배치. */
.home-page #homeNoticeDialog,
.tournament-page-body #tournamentNoticeDialog {
  width: min(420px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  border-radius: 24px;
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
}

.home-page #homeNoticeDialog::backdrop,
.tournament-page-body #tournamentNoticeDialog::backdrop {
  background: rgb(0 0 0 / 40%);
}

.home-page #homeNoticeDialog .home-notice-dialog-body,
.tournament-page-body #tournamentNoticeDialog .home-notice-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: calc(100dvh - 48px);
  padding: 24px;
}

.home-page #homeNoticeDialog .home-notice-dialog-header,
.tournament-page-body #tournamentNoticeDialog .home-notice-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 12px;
}

.home-page #homeNoticeDialogTitle,
.tournament-page-body #tournamentNoticeDialogTitle {
  margin: 0;
  color: var(--primary);
  font-size: var(--font-label-1);
  line-height: var(--leading-label-1);
  letter-spacing: var(--tracking-label-1);
  font-weight: 700;
}

.home-page #homeNoticeCloseBtn,
.tournament-page-body #tournamentNoticeCloseBtn {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.home-page #homeNoticeCloseBtn svg,
.tournament-page-body #tournamentNoticeCloseBtn svg {
  width: 24px;
  height: 24px;
}

.home-page #homeNoticeCloseBtn:hover,
.tournament-page-body #tournamentNoticeCloseBtn:hover,
.home-page #homeNoticeCloseBtn:active,
.tournament-page-body #tournamentNoticeCloseBtn:active {
  background: var(--bg);
}

.home-page #homeNoticeDialog .home-notice-list,
.tournament-page-body #tournamentNoticeDialog .home-notice-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.home-page #homeNoticeDialog .home-notice-item,
.tournament-page-body #tournamentNoticeDialog .home-notice-item {
  display: grid;
  gap: 12px;
}

.home-page #homeNoticeDialog .home-notice-item + .home-notice-item,
.tournament-page-body #tournamentNoticeDialog .home-notice-item + .home-notice-item {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.home-page #homeNoticeDialog .home-notice-item h3,
.tournament-page-body #tournamentNoticeDialog .home-notice-item h3 {
  margin: 0;
  color: var(--ink);
  font-size: var(--font-title-3);
  line-height: var(--leading-title-3);
  letter-spacing: var(--tracking-title-3);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.home-page #homeNoticeDialog .home-notice-copy,
.tournament-page-body #tournamentNoticeDialog .home-notice-copy {
  margin: 0;
  color: var(--sub);
  font-size: var(--font-body-1);
  line-height: var(--leading-body-1);
  letter-spacing: var(--tracking-body-1);
  font-weight: 400;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.home-page #homeNoticeDialog .home-notice-contact,
.tournament-page-body #tournamentNoticeDialog .home-notice-contact {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--bg);
}

.home-page #homeNoticeDialog .home-notice-contact span,
.tournament-page-body #tournamentNoticeDialog .home-notice-contact span {
  color: var(--sub);
  font-size: var(--font-label-1);
  line-height: var(--leading-label-1);
}

.home-page #homeNoticeDialog .home-notice-contact strong,
.tournament-page-body #tournamentNoticeDialog .home-notice-contact strong {
  color: var(--primary);
  font-size: var(--font-heading-2);
  line-height: var(--leading-heading-2);
  letter-spacing: var(--tracking-heading-2);
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* 공지 창 설치 카드(2026-10-07 사용자 요청, 시안 1) — 연락처 카드 아래, 닫기 위. 카드 전체가 버튼이다. */
.home-page #homeNoticeDialog .home-notice-install {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 14px 12px 16px;
  border: 1px solid #BFDBFE;
  border-radius: 16px;
  background: var(--primary-tint);
  color: var(--primary);
  box-shadow: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.home-page #homeNoticeDialog .home-notice-install[hidden] {
  display: none;
}

.home-page #homeNoticeDialog .home-notice-install:active {
  background: #DCEAFE;
}

.home-page #homeNoticeDialog .home-notice-install-icon {
  flex: none;
  display: grid;
  place-items: center;
}

.home-page #homeNoticeDialog .home-notice-install-icon svg {
  width: 26px;
  height: 26px;
}

.home-page #homeNoticeDialog .home-notice-install-copy {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.home-page #homeNoticeDialog .home-notice-install-copy strong {
  color: var(--primary-dark);
  font-size: var(--font-body-2);
  line-height: var(--leading-body-2);
  font-weight: 700;
}

.home-page #homeNoticeDialog .home-notice-install-copy small {
  color: var(--primary);
  font-size: var(--font-caption-1);
  line-height: 1.4;
  font-weight: 500;
}

.home-page #homeNoticeDialog .home-notice-install-action {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--primary);
  color: var(--surface);
  font-size: 12.5px;
  font-weight: 700;
}

.home-page #homeNoticeDialog .home-notice-install-notice {
  flex-shrink: 0;
  margin: -8px 0 0;
  color: var(--sub);
  font-size: 13px;
  line-height: 1.5;
}

.home-page #homeNoticeDialog .home-notice-install-notice[hidden] {
  display: none;
}

.home-page #homeNoticeDialog .home-notice-dismiss,
.tournament-page-body #tournamentNoticeDialog .home-notice-dismiss {
  flex-shrink: 0;
  width: 100%;
  height: 42px;
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: var(--primary);
  color: var(--surface);
  box-shadow: none;
  font-size: 12.5px;
  font-weight: 700;
}

.home-page #homeNoticeDialog .home-notice-dismiss:hover,
.tournament-page-body #tournamentNoticeDialog .home-notice-dismiss:hover {
  background: var(--primary-dark);
}

.home-page #homeNoticeDismissBtn:focus-visible,
.tournament-page-body #tournamentNoticeDismissBtn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* 창이 열리면 첫 버튼(X)에 초점이 가 휴대폰에서도 파란 테두리가 그려졌다 — X 는 테두리 없이(2026-10-07 사용자 요청) */
.home-page #homeNoticeCloseBtn:focus,
.tournament-page-body #tournamentNoticeCloseBtn:focus {
  outline: none;
}

dialog.home-message-dialog {
  position: fixed;
  inset: auto;
  width: min(380px, calc(100vw - 32px));
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  color: var(--ink);
  background: var(--surface);
  border: 0;
  border-radius: 22px;
  box-shadow: var(--shadow-card);
}

.home-message-dialog::backdrop {
  background: color-mix(in srgb, var(--ink) 28%, transparent);
}

.home-message-dialog::before {
  content: "";
  position: absolute;
  top: -7px;
  left: calc(var(--notification-arrow-left, 50%) - 8px);
  width: 16px;
  height: 16px;
  background: var(--surface);
  transform: rotate(45deg);
  pointer-events: none;
}

.home-message-dialog[data-anchor-hidden]::before {
  display: none;
}

.home-message-dialog .home-message-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: var(--notification-max-height, calc(100dvh - 120px));
  padding: 0;
  overflow: hidden;
  border-radius: inherit;
}

.home-message-dialog .home-message-header {
  flex: none;
  align-items: center;
  margin: 0;
  padding: 14px 16px 8px 22px;
}

.home-message-dialog .home-message-header > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-message-dialog .home-message-header h2 {
  margin: 0;
  font-size: var(--font-heading-2);
  line-height: var(--leading-heading-2);
}

.home-message-dialog .home-message-header .home-message-count {
  order: 1;
  display: grid;
  place-items: center;
  min-width: 0;
  height: 26px;
  margin: 0;
  padding: 0;
  color: var(--green-dark);
  background: none;
  font-size: var(--font-label-1);
  line-height: 1;
}

.home-message-dialog .home-message-header .home-message-count[hidden] {
  display: none;
}

.home-message-dialog .home-message-header .home-message-close {
  flex: none;
  width: 42px;
  height: 42px;
  padding: 0;
  color: var(--sub);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 26px;
  font-weight: 400;
}

.home-message-dialog .home-message-list {
  min-height: 0;
  padding: 0 16px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.home-message-dialog .home-message-card {
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 14px 12px 6px;
  background: var(--bg);
  border: 0;
  border-radius: 16px;
}

.home-message-dialog .home-message-card.is-linked:hover {
  background: color-mix(in srgb, var(--line) 55%, var(--bg));
}

/* 아이콘 뒤 초록 동그라미는 없앴다(2026-10-07 사용자 요청) — 아래 메뉴줄처럼 채운 아이콘만. 칸 크기는 글 줄맞춤용으로 둔다. */
.home-message-symbol {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--green-dark);
}

.home-message-symbol svg {
  width: 22px;
  height: 22px;
}

.home-message-copy {
  min-width: 0;
  overflow-wrap: anywhere;
}

.home-message-dialog .home-message-card strong {
  display: block;
  color: var(--ink);
  font-size: var(--font-body-2);
  line-height: var(--leading-body-2);
  font-weight: 700;
}

.home-message-dialog .home-message-card p {
  margin-top: 5px;
  color: var(--sub);
  font-size: var(--font-label-1);
  line-height: var(--leading-label-1);
  font-weight: 400;
  white-space: pre-line;
}

.home-message-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.home-message-dialog .home-message-time {
  color: var(--mute);
  font-size: var(--font-caption-1);
  font-weight: 400;
}

.home-message-dialog .home-message-delete-button {
  flex: none;
  min-height: 42px;
  padding: 0 8px;
  color: var(--sub);
  background: transparent;
  border: 0;
  font-size: 12.5px;
  font-weight: 500;
}

.home-message-dialog .home-message-delete-button:hover {
  color: var(--red);
  background: var(--red-soft);
}

.home-message-dialog .home-message-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 26px 8px 34px;
  background: transparent;
  border: 0;
}

.home-message-empty svg {
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  color: var(--mute);
}

.home-message-dialog .home-message-empty strong {
  color: var(--ink);
  font-size: var(--font-body-1);
  line-height: var(--leading-body-1);
}

.home-message-dialog .home-message-empty p {
  margin: 0;
  color: var(--sub);
  font-size: var(--font-label-1);
  line-height: var(--leading-label-1);
  font-weight: 400;
}

.home-weather-dialog {
  width: min(460px, calc(100vw - 28px));
}

.home-weather-dialog-body {
  display: grid;
  gap: 16px;
}

.home-weather-dialog-body > :first-child {
  margin-bottom: 0;
}

.home-weather-dialog-body label {
  display: grid;
  gap: 8px;
}

.home-weather-dialog-body input {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  color: var(--ink);
  background: #F8FAFC;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  font: inherit;
}

/* 지역은 한 줄에 2칸(2026-10-04 사용자 요청 — 한 줄에 하나는 빈 공간이 많았다) */
.home-weather-search-results {
  max-height: min(280px, 42dvh);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  overflow: auto;
}

.home-weather-search-results[hidden] {
  display: none;
}

.home-weather-location-option {
  min-height: 58px;
  display: grid;
  align-items: center;
  padding: 10px 14px;
  color: var(--ink);
  background: #F8FAFC;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  box-shadow: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.home-weather-location-option:hover {
  background: var(--primary-tint);
  border-color: #BFDBFE;
}

.home-weather-location-option strong {
  font-size: var(--font-body-2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-body-2);
}

.home-message-list {
  display: grid;
  gap: 10px;
}

.home-message-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.home-message-card.is-linked {
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.home-message-card.is-linked:hover {
  border-color: var(--primary);
  background: var(--primary-tint);
}

.home-message-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.home-message-card strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
}

.home-message-delete-button {
  min-height: 32px;
  padding: 0 12px;
  color: #d34242;
  background: #fff0f0;
  border: 1px solid #ffcaca;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.home-message-delete-button:hover {
  background: #ffe5e5;
}

.home-message-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.home-message-time {
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
}

.home-message-empty {
  padding: 18px 14px;
  color: var(--muted);
  background: #f8faf9;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.dialog-header .icon-button {
  color: var(--text);
  background: #f2f5f3;
  border-color: var(--line);
}

.registration-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.registration-title-row h2 {
  margin: 0;
}

.registration-switch-button {
  min-height: 30px;
  padding: 0 10px;
  color: #4d5968;
  background: #fff;
  border: 1px solid #dce3ea;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

.registration-switch-button:hover {
  background: #f5f7f9;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

label,
.form-field {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

/* 위 규칙이 display:grid 라 [hidden] 만으론 안 숨겨진다 — 상황에 따라 감추는
   입력칸(공동구매 전용 항목 등)이 있어 명시적으로 눌러준다. */
label[hidden],
.form-field[hidden] {
  display: none;
}

.full-field {
  grid-column: 1 / -1;
}

.dialog-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.dialog-actions > div {
  display: flex;
  gap: 8px;
}

.reservation-form .reservation-edit-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.reservation-form .reservation-edit-actions button {
  width: 100%;
}

.reservation-form .reservation-edit-actions #deleteReservationBtn[hidden] {
  display: none;
}

.reservation-form .reservation-edit-actions.is-save-only {
  grid-template-columns: 1fr;
}

/* 코치 프로필 설정 팝업: 삭제(부정)는 왼쪽, 저장(긍정)은 오른쪽 */
.reservation-form .reservation-edit-actions.coach-profile-edit-dialog-actions {
  grid-template-columns: auto 1fr 1fr;
}

.reservation-form .reservation-edit-actions.coach-profile-edit-dialog-actions button {
  white-space: nowrap;
}

.reservation-form .reservation-edit-actions:has(#deleteReservationBtn[hidden]) {
  grid-template-columns: 1fr;
}

@media (max-width: 1180px) {
  .workspace {
    grid-template-columns: 240px minmax(560px, 1fr);
  }

  .booking-workspace {
    grid-template-columns: 1fr;
  }

  .right-panel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  }
}

@media (max-width: 840px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
    padding: 22px 16px 18px;
  }

  h1 {
    font-size: 20px;
    line-height: 1.16;
  }

  h2 {
    font-size: 25px;
  }

  .profile-workspace {
    width: 100%;
    padding: 14px 12px calc(var(--bottom-tabbar-height) + 18px);
    gap: 12px;
  }

  .profile-overview {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 12px;
    padding: 26px 16px 20px;
    text-align: center;
  }

  .profile-photo-control,
  .profile-photo-picker {
    width: 96px;
    height: 96px;
  }

  .profile-avatar {
    width: 96px;
    height: 96px;
    font-size: 32px;
  }

  .profile-photo-badge {
    width: 24px;
    height: 24px;
    font-size: 17px;
  }

  .profile-heading h1 {
    font-size: 27px;
  }

  .profile-heading p:last-child {
    font-size: 13px;
  }



  .profile-grid {
    grid-template-columns: 1fr;
  }

  .profile-form-panel {
    padding: 18px;
  }

  .profile-form-panel .section-header.compact {
    margin-bottom: 12px;
    padding-bottom: 12px;
  }

  .profile-form-panel .section-header.compact h2 {
    font-size: 23px;
  }

  .profile-form .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .profile-save-button {
    width: 100%;
  }

  .profile-auth-panel {
    align-items: center;
    flex-wrap: nowrap;
  }

  .profile-auth-panel > div {
    min-width: 0;
  }

  .profile-logout-button {
    width: auto;
  }

  .profile-info-row strong {
    font-size: 15px;
  }

  .login-workspace {
    width: 100%;
    padding: 36px 24px;
  }

  .login-header {
    min-height: 88px;
  }

  .login-brand-logo {
    width: 54px;
    height: 54px;
    border-radius: 14px;
  }

  .login-panel {
    gap: 36px;
  }

  .login-message h2 {
    font-size: 28px;
  }

  .login-message p {
    font-size: 16px;
  }

  .login-button {
    min-height: 58px;
    font-size: 18px;
  }

  .guest-login-row {
    min-height: 50px;
    grid-template-columns: 76px minmax(0, 1fr);
    padding: 0 14px;
  }

  .guest-login-row > label {
    font-size: 14px;
  }

  .guest-login-fields input {
    font-size: 16px;
  }

  .login-signup-link {
    min-height: 32px;
    margin-top: -22px;
    font-size: 16px;
  }

  .topbar-actions,
  .date-input,
  input,
  select,
  textarea,
  .primary-button {
    width: 100%;
  }

  .date-input,
  input,
  select,
  textarea {
    min-width: 0;
    max-width: 100%;
    font-size: 16px !important;
    line-height: 1.25;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: 42px 1fr 42px;
  }

  .topbar-actions .primary-button {
    grid-column: 1 / -1;
  }

  .topbar-registration-actions {
    grid-column: 1 / -1;
    width: 100%;
    margin-right: 0;
  }

  .topbar-registration-actions .ghost-button {
    width: 100%;
  }

  .topbar-actions .nav-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .workspace {
    grid-template-columns: 1fr;
    padding: 12px 12px calc(96px + env(safe-area-inset-bottom));
  }

  .home-workspace {
    gap: 12px;
    padding: 18px 12px calc(110px + env(safe-area-inset-bottom));
  }

  .home-topbar {
    width: 100%;
  }

  .home-brand-logo {
    width: 54px;
    height: 54px;
    border-radius: 14px;
  }

  .home-profile-link {
    width: 44px;
    height: 44px;
  }

  .home-top-actions {
    gap: 8px;
  }

  .home-message-button {
    width: 42px;
    height: 42px;
  }

  .home-message-button svg {
    width: 25px;
    height: 25px;
  }

  .home-content-stack {
    gap: 12px;
    margin-top: clamp(34px, 8vh, 78px);
  }

  .home-shortcut-grid {
    gap: 18px 8px;
  }

  .home-shortcut-item {
    gap: 8px;
  }

  .home-shortcut-item strong {
    font-size: 16px;
  }

  .home-banner {
    min-height: 190px;
    grid-template-columns: 1fr;
  }

  .home-banner-copy {
    padding: 18px;
  }

  .home-banner-copy strong {
    font-size: 25px;
  }

  .home-banner-copy p {
    font-size: 14px;
  }

  .home-banner img {
    min-height: 150px;
    max-height: 190px;
  }

  .home-banner.has-no-image .home-banner-copy {
    min-height: 190px;
  }

  .home-banner-section .home-banner {
    min-height: 132px;
  }

  .home-banner-section .home-banner-copy {
    padding: 16px 18px;
  }

  .home-banner-section .home-banner img {
    min-height: 108px;
    max-height: 138px;
  }

  .home-banner-section .home-banner.has-no-image .home-banner-copy {
    min-height: 120px;
  }

  .home-banner-section .home-banner.is-image-only img {
    height: clamp(140px, 42vw, 220px);
    min-height: 0;
    max-height: none;
  }

  .home-notice-ticker {
    min-height: 50px;
    gap: 10px;
    padding: 0 12px;
  }

  .home-notice-text {
    font-size: 15px;
  }

  .guest-recruit-section {
    padding: 14px;
  }

  .guest-recruit-header {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }

  .guest-recruit-header .primary-button {
    width: auto;
  }

  .guest-card-main {
    align-items: center;
  }

  .guest-card-main strong {
    white-space: normal;
  }

  .guest-recruit-card {
    padding-right: 96px;
  }

  .guest-recruit-card.has-wide-guest-action {
    padding-right: 130px;
  }

  .guest-recruit-card.has-bottom-guest-action,
  .guest-recruit-card.has-bottom-guest-action.has-wide-guest-action {
    padding-right: 14px;
  }

  .guest-card-actions.is-owner-actions {
    right: 10px;
  }

  .guest-delete-button,
  .guest-edit-button {
    width: 104px;
    min-height: 40px;
    padding: 0 14px;
    font-size: 14px;
  }

  .home-panel {
    padding: 16px;
  }

  .home-panel h2 {
    font-size: 26px;
  }

  .home-action-card {
    min-height: 96px;
    padding: 18px;
  }

  .member-workspace {
    grid-template-columns: 1fr;
    padding: 12px 12px calc(110px + env(safe-area-inset-bottom));
  }

  .club-list-header {
    align-items: center;
    flex-direction: row;
  }

  .club-list-header .club-create-toggle {
    width: auto;
    min-width: 78px;
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
  }

  .club-page-workspace {
    padding: 12px 12px calc(110px + env(safe-area-inset-bottom));
  }

  .club-panel-header {
    align-items: stretch;
    flex-direction: column;
  }

  .club-panel-header .date-input {
    width: 100%;
  }

  .monthly-card-main {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .admin-workspace {
    grid-template-columns: 1fr;
    padding: 12px 12px calc(110px + env(safe-area-inset-bottom));
  }

  .admin-registration-stack {
    grid-template-columns: 1fr;
  }

  .panel-section {
    padding: 14px;
    border-radius: 8px;
  }

  .admin-summary-panel {
    grid-template-columns: 1fr;
  }

  .admin-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-page .top-summary-month-control {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 190px);
    grid-template-columns: 32px minmax(92px, 1fr) 32px;
    gap: 6px;
  }

  .admin-page .top-summary-month-control .summary-month-nav {
    width: 32px;
    height: 32px;
    min-height: 32px;
  }

  .admin-page .top-summary-month-control .summary-month-title {
    min-height: 34px;
    padding: 0 6px;
    font-size: 17px;
  }

  .admin-summary-grid .summary-item {
    min-height: 70px;
    padding: 9px 6px;
  }

  .admin-summary-grid .summary-item span {
    font-size: 25px;
  }

  .admin-summary-grid .summary-item p {
    font-size: 12px;
  }

  .coach-payroll-summary,
  .coach-payroll-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .coach-payroll-summary-item strong,
  .coach-payroll-metrics strong {
    font-size: clamp(13px, 3.4vw, 16px);
  }

  .coach-payroll-card-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .coach-payroll-rate-control {
    justify-self: end;
    width: max-content;
    justify-content: flex-end;
  }

  .coach-payroll-rate-field {
    width: 70px;
  }

  .admin-main-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .coach-admin-workspace {
    grid-template-columns: 1fr;
    padding: 12px 12px calc(110px + env(safe-area-inset-bottom));
  }

  .admin-page .admin-console-left,
  .admin-page .admin-console-right {
    display: contents;
  }

  /* 홈 편집 탭: 정보 수정 → 소식 등록 → 사진 관리(맨 아래) */
  .admin-page .lesson-center-admin-home-panel {
    order: 1;
  }

  .admin-page .notice-admin-panel {
    order: 2;
  }

  .admin-page .lesson-center-gallery-admin-panel {
    order: 7;
  }

  .admin-page .admin-summary-panel {
    order: 2;
  }

  .admin-page .lesson-record-panel {
    order: 3;
  }

  .admin-page .coach-payroll-panel {
    order: 4;
  }

  .admin-page .coach-admin-grid {
    order: 5;
  }

  .admin-page .tournament-admin-panel {
    order: 6;
  }

  .tournament-workspace {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 12px calc(110px + env(safe-area-inset-bottom));
  }

  .tournament-hero-stack {
    gap: 8px;
    margin-top: clamp(34px, 8vh, 78px);
  }

  .tournament-banner-section .home-banner {
    min-height: 124px;
  }

  .tournament-banner-section .home-banner-copy {
    padding: 16px;
  }

  .tournament-banner-section .home-banner img {
    min-height: 104px;
    max-height: 128px;
  }

  .tournament-banner-section .home-banner.has-no-image .home-banner-copy {
    min-height: 116px;
  }

  .tournament-banner-section .home-banner.is-image-only img {
    height: clamp(150px, 42vw, 220px);
    min-height: 0;
    max-height: none;
  }

  .home-banner-section .home-banner,
  .member-banner-section .home-banner,
  .tournament-banner-section .home-banner {
    min-height: 132px;
  }

  .home-banner-section .home-banner img,
  .member-banner-section .home-banner img,
  .tournament-banner-section .home-banner img {
    min-height: 108px;
    max-height: 138px;
  }

  .home-banner-section .home-banner.has-no-image .home-banner-copy,
  .member-banner-section .home-banner.has-no-image .home-banner-copy,
  .tournament-banner-section .home-banner.has-no-image .home-banner-copy {
    min-height: 120px;
  }

  .home-banner-section .home-banner.is-image-only img,
  .member-banner-section .home-banner.is-image-only img,
  .tournament-banner-section .home-banner.is-image-only img {
    height: clamp(140px, 30vw, 260px);
    min-height: 0;
    max-height: none;
  }

  .tournament-notice-section .home-notice-ticker {
    min-height: 46px;
  }

  .tournament-title-panel {
    align-items: stretch;
    flex-direction: column;
    min-height: 0;
    gap: 10px;
    padding: 15px 16px;
  }

  .tournament-main-tabs,
  .tournament-division-tabs {
    width: 100%;
    grid-auto-flow: initial;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tournament-division-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tournament-main-tabs button,
  .tournament-division-tabs button {
    padding: 0 8px;
  }

  .tournament-admin-grid {
    grid-template-columns: 1fr;
  }

  .tournament-admin-grid > .tournament-admin-block:first-child {
    padding-right: 0;
    padding-bottom: 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .tournament-admin-panel .tournament-main-tabs {
    justify-self: stretch;
  }

  .tournament-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .tournament-control-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .tournament-control-row label {
    min-width: 0;
  }

  .tournament-admin-panel .tournament-control-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tournament-admin-panel .tournament-control-row .tournament-control-buttons {
    width: auto;
    display: flex;
    justify-content: flex-end;
  }

  .tournament-admin-panel .tournament-control-row .tournament-control-buttons .primary-button,
  .tournament-admin-panel .tournament-control-row .tournament-control-buttons .danger-button {
    width: auto;
    min-width: 96px;
    padding-left: 12px;
    padding-right: 12px;
    white-space: nowrap;
  }

  .tournament-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .doubles-round-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .doubles-match-card {
    padding: 10px;
    border-radius: 16px;
  }

  .doubles-tournament-round {
    gap: 10px;
    padding: 10px;
  }

  .doubles-tournament-round-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .doubles-tournament-round-head strong {
    font-size: 19px;
  }

  .doubles-match-row {
    grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr);
    gap: 6px;
  }

  .doubles-team-side {
    min-height: 66px;
    padding: 9px 7px;
    border-radius: 14px;
  }

  .doubles-team-side strong {
    font-size: 20px;
  }

  .doubles-score-inputs {
    gap: 8px;
  }

  .doubles-score-inputs input {
    width: 50px;
    min-height: 58px;
    border-radius: 12px;
    font-size: 20px;
  }

  .doubles-score-inputs b {
    font-size: 13px;
  }

  .banner-admin-grid {
    grid-template-columns: 1fr;
  }

  .notice-admin-grid {
    grid-template-columns: 1fr;
  }

  .coach-admin-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .lesson-record-main {
    align-items: flex-start;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .lesson-record-meta {
    width: 100%;
    justify-items: end;
  }

  .admin-row {
    grid-template-columns: 1fr;
  }

  .admin-row-main {
    grid-template-columns: 1fr;
  }

  .admin-row-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .right-panel {
    display: flex;
  }

  .schedule-area {
    min-height: 560px;
    border-radius: 8px;
  }

  .schedule-header {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
    min-height: auto;
    padding: 18px 16px 14px;
  }

  .schedule-title-row,
  .schedule-registration-actions,
  .lesson-record-header-actions {
    width: 100%;
  }

  .lesson-record-header-actions {
    justify-content: stretch;
  }

  /* 좁은 화면에서는 제목과 오른쪽 버튼을 한 줄에 두고, 월 이동만 아랫줄 가운데로 내린다.
     예약자 관리와 급여 정산 두 패널을 같은 모양으로 맞춘다. */
  .lesson-record-section-header,
  .coach-payroll-section-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .lesson-record-section-header > div:first-child,
  .coach-payroll-section-header > div:first-child {
    grid-area: 1 / 1;
  }

  .lesson-record-section-header .lesson-record-actions,
  .coach-payroll-section-header .coach-payroll-header-actions {
    grid-area: 1 / 2;
    justify-self: end;
  }

  .lesson-record-section-header .lesson-record-month-control,
  .coach-payroll-section-header .coach-payroll-month-control {
    grid-area: 2 / 1 / auto / -1;
  }

  .lesson-record-month-control,
  .coach-payroll-month-control {
    justify-self: center;
  }

  .admin-page .lesson-record-panel > .section-header.compact {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .admin-page .lesson-record-panel > .section-header.compact h2 {
    width: 100%;
    word-break: keep-all;
  }

  .schedule-registration-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .schedule-registration-actions .ghost-button {
    width: 100%;
  }

  .date-navigator {
    width: 100%;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 10px;
  }

  .date-navigator .date-input {
    min-height: 50px;
    font-size: 20px !important;
  }

  .date-display {
    min-height: 50px;
  }

  .weekday-label {
    min-width: 62px;
    padding-right: 10px;
    font-size: 16px;
  }

  .date-navigator .icon-button {
    min-height: 50px;
    width: 42px;
  }

  #scheduleTitle {
    font-size: 30px;
    line-height: 1.15;
  }

  .summary-grid {
    gap: 8px;
  }

  .summary-item {
    min-height: 82px;
    padding: 12px 10px;
  }

  .summary-item span {
    font-size: 32px;
  }

  .summary-item p {
    font-size: 14px;
  }

  .court-chip {
    gap: 8px;
    padding: 13px 12px;
  }

  .court-chip-main strong {
    font-size: 16px;
  }

  .court-chip-count,
  .court-chip-detail {
    font-size: 13px;
  }

  .schedule-scroll {
    overflow-x: hidden;
  }

  .schedule-grid {
    --slot-height: 88px;
  }

  .grid-cell {
    padding: 3px;
  }

  .grid-cell.header {
    font-size: 13px;
  }

  .time-cell {
    font-size: 10px;
  }

  .reservation-card {
    margin: var(--card-offset, 3px) 0 3px var(--card-left, 3px);
    width: var(--card-width, calc(100% - 6px));
    padding: 10px 12px;
  }

  .reservation-card.half-area {
    padding: 8px 9px;
  }

  .reservation-card strong {
    font-size: 16px;
  }

  .reservation-card .reservation-time-range {
    font-size: 13px;
  }

  .reservation-card .reservation-meta {
    font-size: 12px;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .reservation-dialog {
    width: calc(100vw - 30px);
    max-width: 430px;
    max-height: calc(100dvh - 46px);
    border-radius: 8px;
  }

  .reservation-form {
    padding: 14px;
  }

  .dialog-header {
    align-items: center;
    margin-bottom: 12px;
  }

  .dialog-header .section-label {
    display: none;
  }

  .dialog-header h2 {
    font-size: 24px;
  }

  .dialog-header .icon-button {
    width: 38px;
    min-height: 38px;
  }

  .reservation-form .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 10px;
  }

  .reservation-form label {
    gap: 5px;
    font-size: 13px;
  }

  .reservation-form input,
  .reservation-form select,
  .reservation-form textarea {
    min-height: 42px;
    padding: 8px 9px;
  }

  .reservation-form textarea {
    min-height: 72px;
  }

  .reservation-form .full-field {
    grid-column: 1 / -1;
  }

  .dialog-actions {
    gap: 8px;
    margin-top: 10px;
  }

  .dialog-actions {
    flex-direction: column-reverse;
  }

  .dialog-actions > div,
  .dialog-actions button {
    width: 100%;
  }

  .reservation-form .dialog-actions {
    align-items: center;
    flex-direction: row;
  }

  .reservation-form .dialog-actions > div {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .reservation-form .dialog-actions button {
    min-height: 38px;
    padding: 0 10px;
  }
}

@media (max-width: 480px) {
  .profile-form .form-grid {
    grid-template-columns: 1fr;
  }

  .profile-auth-panel {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .profile-auth-panel > div {
    min-width: 100%;
  }

  .profile-logout-button {
    width: 100%;
  }

  .topbar {
    padding: 20px 16px 18px;
  }

  .topbar .eyebrow {
    font-size: 12px;
  }

  .topbar h1 {
    font-size: 29px;
  }

  .booking-workspace,
  .member-workspace,
  .admin-workspace,
  .coach-admin-workspace {
    padding-left: 12px;
    padding-right: 12px;
  }

  .tournament-player-form,
  .tournament-player-actions,
  .tournament-control-buttons,
  .doubles-round-actions {
    grid-template-columns: 1fr;
  }

  .tournament-admin-panel .tournament-control-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .tournament-admin-panel .tournament-control-row .tournament-control-buttons {
    display: flex;
    width: auto;
  }

  .tournament-player-summary,
  .tournament-summary-grid {
    grid-template-columns: 1fr;
  }

  .tournament-admin-participant-list .tournament-player-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tournament-admin-participant-list .tournament-player-list {
    grid-template-columns: 1fr;
    max-height: none;
  }

  .tournament-group-panel {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .tournament-group-create {
    grid-template-columns: 1fr;
  }

  .tournament-player-chip-actions {
    justify-content: stretch;
  }

  .tournament-player-group-select {
    flex: 1 1 auto;
  }

  .tournament-player-chip-actions .danger-button {
    flex: 0 0 auto;
    width: auto;
  }

  .tournament-division-tabs {
    grid-template-columns: 1fr;
  }

  .tournament-player-chip,
  .doubles-team-chip {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .tournament-player-chip .danger-button,
  .doubles-team-chip .danger-button {
    width: 100%;
  }

  .coach-payroll-summary,
  .coach-payroll-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .coach-payroll-summary-item strong,
  .coach-payroll-metrics strong {
    font-size: 16px;
  }

  .coach-payroll-summary-item.is-compact strong {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .coach-payroll-card-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .coach-payroll-rate-control {
    width: max-content;
    justify-content: flex-end;
  }

  .coach-payroll-detail-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .coach-payroll-detail-row b {
    justify-self: start;
  }

  .club-card {
    grid-template-columns: 1fr;
  }

  .club-card .danger-button,
  .club-card .club-join-button {
    width: 100%;
  }

  .club-card-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .club-tabs {
    gap: 6px;
  }

  .club-tab {
    min-height: 48px;
    font-size: 13px;
  }

  .club-member-card {
    grid-template-columns: 1fr;
  }

  .club-member-card .danger-button {
    width: 100%;
  }

  .registration-stack {
    width: 100%;
  }

  .recurring-lesson-panel,
  .rental-registration-panel,
  .lesson-record-panel,
  .coach-payroll-panel,
  .coach-admin-form-panel,
  .coach-list-panel,
  .admin-summary-panel {
    overflow: hidden;
  }

  .recurring-lesson-form,
  .coach-form,
  .court-manage-form {
    gap: 12px;
  }

  .form-grid.compact-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .weekday-checkbox-group {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .weekday-checkbox-group label {
    min-height: 54px;
    padding: 0 8px;
    font-size: 16px;
  }

  .weekday-checkbox-group input {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
  }

  .reservation-dialog {
    width: calc(100vw - 28px);
    max-height: calc(100dvh - 34px);
  }

  .reservation-form .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 폼 바로 아래 홀로 있는 첫 칸만 전체 폭으로 — 자손까지 걸면 2열 그리드
     (.form-grid)의 첫 칸마다 한 줄을 통째로 먹어 등록 창이 두 배로 길어진다. */
  .reservation-form > label:first-of-type,
  .reservation-form .full-field {
    grid-column: 1 / -1;
  }

  .reservation-form input[type="date"] {
    text-align: center;
  }

  .reservation-form .dialog-actions {
    gap: 8px;
  }

  .admin-summary-panel {
    gap: 14px;
  }

  .admin-summary-grid {
    gap: 9px;
  }

  .admin-summary-grid .summary-item {
    min-height: 78px;
  }

}

.profile-dialog {
  width: min(calc(100% - 24px), 450px);
  max-height: calc(100dvh - 86px);
}

.profile-dialog-shell {
  max-height: calc(100dvh - 86px);
}

.profile-dialog-header {
  padding: 12px 14px;
}

.profile-dialog-header .section-label {
  display: none;
}

.profile-dialog-header h2 {
  font-size: 21px;
}

.profile-dialog-workspace {
  max-height: none;
  padding: 10px;
  gap: 9px;
  /* 셸 높이(100dvh 기준)를 넘는 내용(급여·정산 등)을 내려서 볼 수 있게 */
  overflow-y: auto;
}

/* 프로필 카드는 세로 한 줄 — 사진 · 이름 · 역할 순으로 가운데 (2026-08-06 사용자 요청) */
.profile-dialog .profile-overview {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.profile-dialog .profile-photo-control,
.profile-dialog .profile-photo-picker,
.profile-dialog .profile-avatar {
  width: 74px;
  height: 74px;
}

.profile-dialog .profile-avatar {
  font-size: 25px;
}

.profile-dialog .profile-photo-badge {
  right: -2px;
  bottom: 1px;
  width: 22px;
  height: 22px;
  font-size: 15px;
}

.profile-dialog .profile-heading .section-label {
  display: none;
}

.profile-dialog .profile-heading h1 {
  margin: 0;
}

.profile-dialog .profile-form-panel .section-header.compact {
  display: none;
}

.profile-dialog .profile-form .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-dialog .profile-save-button {
  min-height: 42px;
  font-size: 15px;
}

.profile-dialog .recurring-result {
  min-height: 0;
}

.profile-dialog .profile-auth-panel {
  flex-wrap: nowrap;
  margin-top: 8px;
  padding: 8px 10px;
}

.profile-dialog .profile-auth-panel > div {
  min-width: 0;
}

.profile-dialog .profile-auth-panel span {
  font-size: 11px;
}

.profile-dialog .profile-auth-panel strong {
  font-size: 13px;
}

.profile-dialog .profile-logout-button {
  min-width: 76px;
  min-height: 34px;
  padding: 0 10px;
  font-size: 13px;
}

.profile-dialog .profile-logout-result {
  display: none;
}

.profile-dialog .profile-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.profile-dialog .profile-action-row .profile-save-button {
  width: 100%;
}

.profile-dialog .profile-auth-panel {
  display: none;
}

/* Coach calendar page */
.coach-page {
  background: #fff;
}

.coach-page .app {
  min-height: 100dvh;
  background: #fff;
}

.coach-calendar-topbar {
  position: sticky;
  top: 0;
  z-index: 900;
  min-height: 74px;
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
  color: #101820;
  background: #fff;
  border-bottom: 1px solid #edf0f3;
  box-shadow: none;
}

.coach-month-nav-button,
.coach-month-button,
.coach-view-tabs button {
  min-width: 0;
  min-height: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
}

.coach-month-control {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, auto) 38px;
  align-items: center;
  justify-content: start;
  gap: 2px;
}

.coach-month-button {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #05070a;
  font-size: 29px;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
}

.coach-month-nav-button {
  width: 38px;
  height: 38px;
  color: #05070a;
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
}

.coach-hidden-date-input {
  position: absolute;
  inset: auto auto 0 0;
  width: 1px;
  min-height: 1px;
  height: 1px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.coach-view-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.coach-view-tabs button {
  width: 56px;
  height: 56px;
  color: #b8bec7;
  font-size: 21px;
  font-weight: 900;
}

.coach-view-tabs button.is-active {
  color: #05070a;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.coach-month-nav-button:focus-visible,
.coach-month-button:focus-visible,
.coach-view-tabs button:focus-visible,
.coach-date-chip:focus-visible,
.coach-month-day:focus-visible,
.coach-week-header:focus-visible {
  outline: 2px solid rgba(14, 79, 163, 0.32);
  outline-offset: 2px;
}

.coach-view-tabs button:focus,
.coach-view-tabs button:focus-visible,
.coach-page .court-switcher .court-chip:focus,
.coach-page .court-switcher .court-chip:focus-visible {
  outline: 0;
  box-shadow: none;
}

.coach-calendar-workspace {
  position: relative;
  display: block;
  min-height: calc(100dvh - 86px);
  padding: 0 0 calc(var(--bottom-tabbar-height) + 18px);
  background: #fff;
}

.coach-calendar-area {
  min-height: calc(100dvh - 86px - var(--bottom-tabbar-height));
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.coach-mode-panel[hidden] {
  display: none !important;
}

.coach-rangebar {
  min-height: 82px;
  display: grid;
  grid-template-columns: minmax(0, auto) auto;
  justify-content: start;
  align-items: center;
  gap: 18px;
  padding: 0 28px;
  background: #fff;
  border-bottom: 1px solid #edf0f3;
}

.coach-rangebar .icon-button {
  width: 48px;
  min-height: 48px;
  color: #777;
  background: transparent;
  border: 0;
  font-size: 46px;
  font-weight: 300;
}

.coach-rangebar #scheduleTitle {
  color: #20242a;
  font-size: 31px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.coach-rangebar .weekday-label {
  display: none;
}

.coach-view-month .coach-rangebar,
.coach-view-month .coach-date-strip,
.coach-view-week .coach-date-strip {
  display: none;
}

.coach-date-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(96px, 1fr);
  gap: 0;
  overflow-x: auto;
  background: #fff;
  border-bottom: 1px solid #edf0f3;
  scrollbar-width: none;
}

.coach-date-strip::-webkit-scrollbar {
  display: none;
}

.coach-date-chip {
  min-height: 88px;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 10px 8px;
  color: #4c4f54;
  background: #fff;
  border: 0;
  border-right: 1px solid #f1f2f4;
  border-radius: 0;
  font-family: inherit;
  font-weight: 900;
}

.coach-date-chip span {
  font-size: 23px;
}

.coach-date-chip strong {
  font-size: 27px;
  line-height: 1;
}

.coach-date-chip.is-active {
  color: #fff;
  background: #174796;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.coach-date-chip.is-sunday {
  color: #ef635c;
}

.coach-date-chip.is-saturday {
  color: #1866ff;
}

.coach-date-chip.is-active.is-sunday,
.coach-date-chip.is-active.is-saturday {
  color: #fff;
}

.coach-page .court-switcher {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  overflow-x: auto;
  background: #fff;
  border-bottom: 1px solid #edf0f3;
  scrollbar-width: none;
}

.coach-page .court-switcher[hidden] {
  display: none !important;
}

.coach-page .court-switcher::-webkit-scrollbar {
  display: none;
}

.coach-page .court-switcher .court-chip {
  flex: 0 0 auto;
  min-width: 136px;
  min-height: 48px;
  padding: 9px 12px;
  background: #fff;
  border-color: transparent;
  box-shadow: none;
}

.coach-page .court-switcher .court-chip.is-active {
  color: #0e4fa3;
  background: #fff;
  border-color: transparent;
}

.coach-page .court-switcher .court-chip-detail {
  display: none;
}

.coach-page .court-switcher .court-chip.is-active .court-chip-count,
.coach-page .court-switcher .court-chip.is-active .court-chip-detail {
  color: inherit;
}

.coach-month-view {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: #fff;
  border-bottom: 1px solid #edf0f3;
}

.coach-month-weekday {
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 0 28px;
  color: #2f3338;
  font-size: 21px;
  font-weight: 900;
  border-bottom: 1px solid #edf0f3;
}

.coach-month-weekday.is-sunday {
  color: #ff5f5a;
}

.coach-month-weekday.is-saturday {
  color: #1468ff;
}

.coach-month-day {
  min-height: 132px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
  gap: 8px;
  padding: 14px 18px 12px;
  color: #0e1013;
  text-align: left;
  background: #fff;
  border: 0;
  border-right: 1px solid #edf0f3;
  border-bottom: 1px solid #edf0f3;
  border-radius: 0;
  font-family: inherit;
  overflow: hidden;
}

.coach-month-day:nth-child(7n + 7) {
  border-right: 0;
}

.coach-month-day.is-active {
  outline: 2px solid #0e1013;
  outline-offset: -2px;
  z-index: 1;
}

.coach-month-day.is-active .coach-month-day-number {
  color: #0e1013;
}

.coach-month-day.is-outside {
  color: #d5d8dc;
  background: #fdfdfd;
}

.coach-month-day.is-sunday:not(.is-outside) .coach-month-day-number {
  color: #ff5f5a;
}

.coach-month-day.is-saturday:not(.is-outside) .coach-month-day-number {
  color: #1468ff;
}

.coach-month-day-number {
  width: max-content;
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-size: 25px;
  font-weight: 950;
  line-height: 1;
}

.coach-month-count {
  min-height: 18px;
  color: #6f7884;
  font-size: 12px;
  font-weight: 850;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-month-events {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.coach-month-event,
.coach-month-more {
  min-width: 0;
  overflow: hidden;
  padding: 3px 6px;
  color: #123264;
  background: #e9f0ff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-month-event.is-rental {
  color: #713126;
  background: #ffe9e3;
}

.coach-month-more {
  color: #59616d;
  background: #f0f2f5;
}

.coach-day-agenda {
  background: #fbfbfc;
}

.coach-agenda-title {
  min-height: 68px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  color: #05070a;
  background: #fff;
  border-bottom: 1px solid #edf0f3;
  font-size: 28px;
  font-weight: 950;
}

.coach-agenda-row {
  min-height: 78px;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 76px;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  background: #fbfbfc;
  border-bottom: 1px solid #edf0f3;
}

.coach-agenda-row time {
  color: #0d0f13;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
}

.coach-agenda-slot {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.coach-agenda-reservation {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  color: #172033;
  text-align: left;
  background: #e9f0ff;
  border: 1px solid #c9d9fb;
  border-radius: 8px;
  font-family: inherit;
}

.coach-agenda-reservation.confirmed {
  background: #ffe9e3;
  border-color: #ffcabb;
}

.coach-agenda-reservation strong,
.coach-agenda-reservation span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-agenda-reservation strong {
  font-size: 15px;
  font-weight: 950;
}

.coach-agenda-reservation span {
  color: #59616d;
  font-size: 12px;
  font-weight: 850;
}

.coach-agenda-add-wrap {
  position: relative;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.coach-agenda-add {
  width: 28px;
  height: 28px;
  min-height: 28px;
  color: #a5abb3;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}

.coach-agenda-list {
  display: grid;
  gap: 14px;
  padding: 16px 20px 24px;
  background: #f4f7fb;
}

.coach-agenda-group,
.coach-week-group {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dfe6f0;
  border-radius: 14px;
  box-shadow: 0 5px 18px rgba(22, 48, 84, 0.05);
}

.coach-group-header {
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #eef4ff;
  border-bottom: 1px solid #dfe6f0;
}

.coach-group-header h3 {
  min-width: 0;
  margin: 0;
  color: #173a70;
  font-size: 18px;
  font-weight: 950;
}

.coach-group-header > span {
  flex: 0 0 auto;
  color: #6680a7;
  font-size: 13px;
  font-weight: 850;
}

.coach-group-add {
  min-height: 34px;
  margin-left: auto;
  padding: 0 12px;
  color: #075fd3;
  background: #fff;
  border: 1px solid #bcd2f4;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
}

.coach-agenda-group.is-rental .coach-group-header,
.coach-week-group.is-rental .coach-group-header {
  background: #fff0eb;
}

.coach-agenda-group.is-rental .coach-group-header h3,
.coach-week-group.is-rental .coach-group-header h3 {
  color: #8a432f;
}

.coach-group-reservations {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.coach-group-reservation {
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  color: #172033;
  text-align: left;
  background: #e9f0ff;
  border: 1px solid #c9d9fb;
  border-radius: 9px;
  font-family: inherit;
}

.coach-group-reservation.confirmed {
  background: #ffe9e3;
  border-color: #ffcabb;
}

.coach-group-reservation time {
  color: #315784;
  font-size: 14px;
  font-weight: 900;
}

.coach-group-reservation strong,
.coach-group-reservation span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-group-reservation strong {
  font-size: 15px;
  font-weight: 950;
}

.coach-group-reservation span {
  color: #627188;
  font-size: 12px;
  font-weight: 800;
}

.coach-group-reservation.is-readonly,
.coach-week-member.is-readonly {
  cursor: default;
}

.coach-group-empty {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #99a3b0;
  font-size: 13px;
  font-weight: 800;
}

.coach-week-scroll {
  flex: 1;
  overflow: auto;
  background: #fff;
}

.coach-week-grid {
  min-width: 760px;
}

.coach-week-grid.is-coach-list {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: none !important;
  align-content: start;
  gap: 16px;
  padding: 18px 20px 28px;
  background: #f4f7fb;
}

.coach-week-days {
  display: grid;
}

.coach-week-day-row {
  min-height: 62px;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: stretch;
  border-bottom: 1px solid #edf0f4;
}

.coach-week-day-row:last-child {
  border-bottom: 0;
}

.coach-week-day-row.is-active {
  background: #f4f8ff;
}

.coach-week-date {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  color: #38475c;
  text-align: left;
  background: transparent;
  border: 0;
  border-right: 1px solid #edf0f4;
  border-radius: 0;
  font-family: inherit;
}

.coach-week-date strong {
  font-size: 17px;
  font-weight: 950;
}

.coach-week-date span {
  color: #718096;
  font-size: 12px;
  font-weight: 850;
}

.coach-week-day-row.is-sunday .coach-week-date strong {
  color: #ef635c;
}

.coach-week-day-row.is-saturday .coach-week-date strong {
  color: #1468ff;
}

.coach-week-day-row.is-today .coach-week-date {
  background: #eaf2ff;
}

.coach-week-members {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 9px 12px;
}

.coach-week-member {
  width: 100%;
  min-height: 34px;
  overflow: hidden;
  padding: 7px 11px;
  color: #153f79;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #e9f0ff;
  border: 1px solid #c9d9fb;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 950;
}

.coach-week-member.confirmed {
  color: #793b2b;
  background: #ffe9e3;
  border-color: #ffcabb;
}

.coach-week-empty {
  color: #a0a8b3;
  font-size: 13px;
  font-weight: 750;
}

.coach-week-header {
  display: grid !important;
  place-items: center;
  gap: 2px;
  padding: 6px 4px;
  color: #3f444b;
  background: #fff !important;
  border-top: 0;
  border-left: 0;
  border-radius: 0;
  font-family: inherit;
}

.coach-week-header span {
  font-size: 18px;
  font-weight: 900;
}

.coach-week-header strong {
  font-size: 22px;
  line-height: 1;
}

.coach-week-header.is-active {
  color: #fff;
  background: #174796 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.coach-week-header.is-sunday:not(.is-active) {
  color: #ef635c;
}

.coach-week-header.is-saturday:not(.is-active) {
  color: #1468ff;
}

.coach-week-card {
  gap: 2px;
  padding: 7px;
}

.coach-week-card strong {
  font-size: 13px;
}

.coach-week-card .reservation-time-range,
.coach-week-card .reservation-meta {
  font-size: 11px;
}

.coach-page .schedule-scroll {
  background: #fff;
}

.coach-page .schedule-grid {
  --slot-height: 82px;
}

.coach-page .grid-cell {
  border-color: #edf0f3;
}

.coach-page .grid-cell.header,
.coach-page .time-cell {
  background: #fff;
}

.coach-page .daily-coach-header {
  color: #27364d;
  font-size: 14px;
}

.coach-page .daily-reservation-card {
  grid-template-columns: minmax(0, 1fr);
}

.coach-page .daily-reservation-card.is-readonly {
  cursor: default;
}

.coach-page .time-cell {
  color: #586985;
  font-size: 17px;
}

.coach-page .slot-add {
  color: transparent;
  border: 0;
}

.coach-page .slot-add:hover {
  color: #174796;
  background: rgba(23, 71, 150, 0.05);
}

.coach-page .coach-agenda-add,
.coach-page .coach-agenda-add:hover {
  color: #a5abb3;
  background: transparent;
  border: 0;
}

.coach-reservation-list {
  display: none;
}

@media (max-width: 760px) {
  .coach-calendar-topbar {
    grid-template-columns: minmax(150px, 1fr) auto;
    gap: 6px;
    min-height: 66px;
    padding: calc(7px + env(safe-area-inset-top)) 8px 7px;
  }

  .coach-month-control {
    grid-template-columns: 30px minmax(0, auto) 30px;
  }

  .coach-month-button {
    font-size: 25px;
  }

  .coach-month-nav-button {
    width: 30px;
    height: 34px;
    font-size: 30px;
  }

  .coach-view-tabs {
    gap: 0;
  }

  .coach-view-tabs button {
    width: 46px;
    height: 46px;
    font-size: 17px;
  }

  .coach-calendar-workspace {
    min-height: calc(100dvh - 66px);
    padding-bottom: calc(var(--bottom-tabbar-height) + 18px);
  }

  .coach-calendar-area {
    min-height: calc(100dvh - 66px - var(--bottom-tabbar-height));
  }

  .coach-rangebar {
    min-height: 72px;
    grid-template-columns: 38px minmax(0, auto) 38px;
    gap: 10px;
    padding: 0 16px;
  }

  .coach-rangebar .icon-button {
    width: 38px;
    min-height: 38px;
    font-size: 40px;
  }

  .coach-rangebar #scheduleTitle {
    font-size: 26px;
  }

  .coach-date-strip {
    grid-auto-columns: 88px;
  }

  .coach-date-chip {
    min-height: 76px;
  }

  .coach-date-chip span {
    font-size: 20px;
  }

  .coach-date-chip strong {
    font-size: 23px;
  }

  .coach-page .court-switcher {
    padding: 8px 10px;
  }

  .coach-page .court-switcher .court-chip {
    min-width: 118px;
    min-height: 44px;
  }

  .coach-month-weekday {
    min-height: 44px;
    justify-content: center;
    padding: 0;
    font-size: 18px;
  }

  .coach-month-day {
    min-height: 88px;
    gap: 4px;
    padding: 10px 5px 7px;
  }

  .coach-month-day-number {
    min-width: 30px;
    height: 30px;
    font-size: 22px;
  }

  .coach-month-count {
    font-size: 10px;
    text-align: center;
  }

  .coach-month-events {
    gap: 2px;
  }

  .coach-agenda-title {
    min-height: 58px;
    padding: 0 16px;
    font-size: 24px;
  }

  .coach-agenda-row {
    min-height: 74px;
    grid-template-columns: 86px minmax(0, 1fr) 58px;
    gap: 8px;
    padding: 0 14px;
  }

  .coach-agenda-row time {
    font-size: 30px;
  }

  .coach-agenda-add {
    width: 28px;
    height: 28px;
    min-height: 28px;
    font-size: 28px;
  }

  .coach-week-grid {
    min-width: 100%;
    --week-time-column: 54px;
  }

  .coach-week-grid.is-coach-list {
    padding: 12px 10px 22px;
  }

  .coach-agenda-list {
    padding: 12px 10px 20px;
  }

  .coach-group-header {
    min-height: 52px;
    padding: 9px 12px;
  }

  .coach-group-header h3 {
    font-size: 17px;
  }

  .coach-group-add {
    padding: 0 9px;
    font-size: 12px;
  }

  .coach-group-reservation {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 7px;
  }

  .coach-group-reservation span {
    grid-column: 2;
  }

  .coach-week-day-row {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .coach-week-date {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 8px 10px;
  }

  .coach-week-members {
    padding: 8px;
  }

  .coach-week-header {
    padding: 4px 2px;
  }

  .coach-week-header span {
    font-size: 14px;
  }

  .coach-week-header strong {
    font-size: 15px;
  }

  .coach-week-card {
    padding: 5px;
  }

  .coach-week-card strong {
    font-size: 11px;
  }

  .coach-week-card .reservation-time-range,
  .coach-week-card .reservation-meta {
    font-size: 10px;
  }

  .coach-page .schedule-grid {
    --slot-height: 78px;
  }

  .coach-page .time-cell {
    font-size: 16px;
  }

}

@media (max-width: 420px) {
  .coach-calendar-topbar {
    grid-template-columns: minmax(134px, 1fr) auto;
    gap: 4px;
  }

  .coach-month-control {
    grid-template-columns: 26px minmax(0, auto) 26px;
  }

  .coach-month-button {
    font-size: 22px;
  }

  .coach-month-nav-button {
    width: 26px;
    font-size: 27px;
  }

  .coach-view-tabs button {
    width: 42px;
    height: 42px;
    font-size: 16px;
  }

  .coach-month-day {
    min-height: 78px;
  }

  .coach-month-day-number {
    min-width: 28px;
    height: 28px;
    font-size: 20px;
  }

  .coach-month-count {
    font-size: 9px;
  }

  .lesson-centers-workspace {
    padding: 18px 12px 90px;
  }

  .lesson-centers-header,
  .lesson-center-card,
  .lesson-center-contextbar {
    align-items: stretch;
    flex-direction: column;
  }

  .lesson-center-form {
    grid-template-columns: 1fr;
  }

  .lesson-center-card {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .lesson-center-card-image {
    width: 82px;
    height: 68px;
  }

  .lesson-center-image-picker {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .lesson-center-card-actions {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  }

  .lesson-center-context-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .lesson-center-card-actions a,
  .lesson-center-context-actions a {
    min-width: 0;
    justify-content: center;
  }

  .lesson-center-home-workspace {
    padding: 18px 12px 90px;
  }

  .lesson-center-home-hero {
    display: grid;
  }

  .lesson-center-home-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lesson-center-home-actions a {
    min-width: 0;
    justify-content: center;
  }

  .lesson-center-info-grid,
  .lesson-center-info-form {
    grid-template-columns: 1fr;
  }

}

/* Lesson center place-style home final overrides */
.lesson-center-place-topbar,
.lesson-center-place-category,
.lesson-center-floating-actions {
  display: none;
}

.lesson-center-home-workspace {
  width: min(100%, 860px);
  gap: 10px;
  padding: 0 0 calc(96px + env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 0 0 1px rgba(18, 24, 20, 0.04);
}

.lesson-center-home-hero {
  min-height: 0;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 26px 24px 0;
  color: #17191d;
  border: 0;
  border-radius: 0;
}

.lesson-center-home-hero h1 {
  color: #17191d;
  font-size: clamp(22px, 5.5vw, 28px);
  line-height: 1.08;
}

.lesson-center-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lesson-center-title-back {
  flex: 0 0 auto;
  color: #17191d;
  font-size: 0.92em;
  font-weight: 950;
  line-height: 1;
  text-decoration: none;
}

.lesson-center-title-row span {
  min-width: 0;
  word-break: keep-all;
}

.lesson-center-hero-copy {
  align-content: start;
  gap: 12px;
}

.lesson-center-hero-visual,
.lesson-center-hero-visual.has-image {
  min-height: 0;
  display: block;
  padding: 0;
  overflow: visible;
  background: #fff;
  border: 0;
  border-radius: 0;
}

.lesson-center-hero-visual::before,
.lesson-center-hero-visual::after,
.lesson-center-hero-visual.has-image::before,
.lesson-center-hero-visual.has-image::after {
  display: none;
}

.lesson-center-gallery-tile,
.lesson-center-gallery-tile.is-main {
  min-height: 310px;
}

.lesson-center-info-grid {
  display: block;
  padding: 28px 24px 10px;
}

.lesson-center-info-board {
  gap: 0;
  padding: 0;
  border: 0;
  border-top: 0;
  border-radius: 0;
  box-shadow: none;
}

.lesson-center-place-row strong,
.lesson-center-place-row p,
.lesson-center-price-lines strong,
.lesson-center-hero-intro {
  color: #363a40;
  font-size: 20px;
  line-height: 1.5;
  white-space: pre-line;
  word-break: keep-all;
}

.lesson-center-info-link {
  color: #176db7;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
  text-decoration: none;
  word-break: break-word;
}

.lesson-center-hero-intro {
  max-width: none;
  color: #565c64;
  font-weight: 750;
}

.lesson-center-coach-panel,
.lesson-center-inquiry-panel,
.lesson-center-edit-panel,
.lesson-center-inquiry-list-panel {
  margin: 0;
  padding: 26px 24px;
  border: 0;
  border-top: 10px solid #f1f3f2;
  border-radius: 0;
  box-shadow: none;
}

.lesson-center-notice-panel {
  background: #f4f6f5;
}

.lesson-center-notice-text {
  margin: 0;
}

.lesson-center-notice-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid #dfe7e2;
  border-radius: 8px;
  min-height: 74px;
  cursor: pointer;
  animation: lesson-notice-slide-in 0.32s ease;
}

.lesson-center-notice-item:focus-visible {
  outline: 3px solid rgba(22, 134, 94, 0.22);
  outline-offset: 3px;
}

.lesson-center-notice-item:hover {
  border-color: #b8d2c5;
}

@keyframes lesson-notice-slide-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.lesson-center-notice-badge {
  flex: 0 0 auto;
  display: inline-grid;
  min-width: 42px;
  min-height: 28px;
  place-items: center;
  padding: 0 10px;
  color: #fff;
  background: #16865e;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
}

.lesson-center-notice-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.lesson-center-notice-item strong {
  color: #101418;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.45;
  word-break: keep-all;
}

.lesson-center-notice-item p {
  margin: 0;
  color: #4d5651;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.5;
  white-space: pre-line;
  word-break: keep-all;
}

.lesson-center-notice-indicators {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
}

.lesson-center-notice-indicators[hidden] {
  display: none;
}

.lesson-center-notice-indicators button {
  width: 8px;
  height: 8px;
  padding: 0;
  background: #cbd7d0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.lesson-center-notice-indicators button.is-active {
  width: 22px;
  background: #16865e;
}

.lesson-center-notice-indicators button:focus-visible {
  outline: 3px solid rgba(22, 134, 94, 0.22);
  outline-offset: 3px;
}

.lesson-center-notice-dialog {
  width: min(calc(100% - 28px), 480px);
}

.lesson-center-notice-dialog-shell {
  padding: 20px 22px 24px;
  border-radius: 20px;
}

.lesson-center-notice-dialog .coach-detail-close {
  width: 34px;
  height: 34px;
  color: var(--sub);
  background: var(--bg);
  font-size: 22px;
}

.lesson-center-notice-detail-header {
  padding: 2px 40px 0 0;
}

.lesson-center-notice-detail-date {
  margin: 0 0 8px;
  color: var(--mute);
  font-size: 13px;
  font-weight: 700;
}

.lesson-center-notice-detail-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.36;
  letter-spacing: -0.01em;
  word-break: keep-all;
}

.lesson-center-notice-detail-content {
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--bg);
  border-radius: 14px;
}

.lesson-center-notice-detail-content p {
  margin: 0;
  color: var(--sub);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  white-space: pre-line;
  word-break: keep-all;
}

.lesson-center-coach-list {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.lesson-center-coach-card {
  width: 100%;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  padding: 16px;
  text-align: left;
  background: #fff;
  border: 1px solid #e3e7e4;
  box-shadow: 0 10px 24px rgba(21, 30, 24, 0.06);
  font: inherit;
  cursor: pointer;
}

.lesson-center-coach-avatar {
  width: 62px;
  height: 62px;
  font-size: 24px;
}

.lesson-center-coach-card p {
  color: #575e66;
  font-size: 14px;
}

.lesson-center-inquiry-form {
  grid-template-columns: minmax(0, 1fr) minmax(132px, 0.72fr);
}

.coach-profile-photo-editor.is-history-image {
  grid-template-columns: minmax(118px, 178px) minmax(0, 1fr);
}

.coach-profile-photo-editor.is-history-image .coach-profile-photo-preview {
  width: 100%;
  height: 100px;
  color: var(--green);
  background: #edf4f0;
  border: 1px dashed #b9c9c0;
  font-size: 15px;
}

@media (max-width: 720px) {
  .lesson-center-home-workspace {
    width: 100%;
    padding: 0 0 calc(96px + env(safe-area-inset-bottom));
  }

  .lesson-center-home-hero {
    padding: 22px 18px 0;
  }

  .lesson-center-place-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lesson-center-hero-visual,
  .lesson-center-hero-visual.has-image {
    grid-template-columns: minmax(0, 1.15fr) minmax(108px, 0.85fr);
  }

  .lesson-center-gallery-tile,
  .lesson-center-gallery-tile.is-main {
    min-height: 210px;
  }

  .lesson-center-info-grid,
  .lesson-center-coach-panel,
  .lesson-center-inquiry-panel,
  .lesson-center-notice-panel,
  .lesson-center-edit-panel,
  .lesson-center-inquiry-list-panel {
    padding-left: 18px;
    padding-right: 18px;
  }

  .lesson-center-place-row strong,
  .lesson-center-place-row p,
  .lesson-center-price-lines strong,
  .lesson-center-hero-intro,
  .lesson-center-info-link {
    font-size: 17px;
  }

  .lesson-center-coach-list,
  .lesson-center-inquiry-form,
  .lesson-center-info-form {
    grid-template-columns: 1fr;
  }

  .coach-profile-photo-editor.is-history-image {
    grid-template-columns: 1fr;
  }

  /* 모바일에서도 세로로 쌓지 않고 가로 한 줄 유지 */
  .admin-section-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .admin-section-tab {
    min-height: 48px;
    padding: 0 6px;
    font-size: 13px;
    text-align: center;
  }
}

/* Admin segmented pages */
.admin-page .admin-console-workspace {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.admin-page .admin-console-column,
.admin-page .coach-admin-grid {
  display: contents;
}

.admin-page [data-admin-section][hidden] {
  display: none !important;
}

.admin-page .admin-section-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-page .admin-section-tab {
  min-height: 54px;
  display: grid;
  place-items: center;
  padding: 0 16px;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 16px;
  font-weight: 950;
  cursor: pointer;
}

.admin-page .lesson-center-admin-home-panel {
  display: grid;
  gap: 14px;
}

@media (max-width: 640px) {
  /* 모바일에서도 세로로 쌓지 않고 가로 한 줄 유지 */
  .admin-page .admin-section-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .admin-page .admin-section-tab {
    min-height: 48px;
    padding: 0 6px;
    font-size: 13px;
    text-align: center;
  }
}

/* Euddeum blue/white brand theme overrides */
.lesson-centers-page {
  background: #fff;
}

.lesson-centers-page .app {
  background: #fff;
}

.lesson-centers-header {
  color: #fff;
  background:
    linear-gradient(135deg, #005ed8 0%, #0878ff 58%, #3aa0ff 100%),
    #0878ff;
  box-shadow: 0 18px 38px rgba(8, 120, 255, 0.2);
}

.lesson-centers-header .lesson-center-open-register {
  color: #0878ff;
  background: #fff;
  border-color: #fff;
}

.lesson-centers-header span,
.lesson-center-hero-intro {
  color: rgba(255, 255, 255, 0.9);
}

.lesson-center-register-panel,
.lesson-centers-club-panel,
.lesson-center-list-panel,
.lesson-center-info-board,
.lesson-center-coach-panel,
.lesson-center-inquiry-panel,
.lesson-center-edit-panel,
.lesson-center-inquiry-list-panel {
  border-color: #dbe8f7;
  box-shadow: 0 16px 34px rgba(8, 79, 168, 0.08);
}

.lesson-center-count,
.lesson-center-card-status {
  color: #0878ff;
  background: #eaf3ff;
}

.lesson-center-card {
  border-color: #dbe8f7;
  box-shadow: 0 8px 22px rgba(8, 79, 168, 0.06);
}

.lesson-center-card.is-active {
  border-color: #0878ff;
  box-shadow: 0 12px 28px rgba(8, 120, 255, 0.16);
}

.lesson-center-card-image {
  background: linear-gradient(135deg, #0878ff, #005ed8);
}

.lesson-center-card-image.has-default-image {
  background: #fff;
  border: 1px solid #dbe8f7;
}

.lesson-center-card-image.has-default-image img {
  width: 68%;
  height: 68%;
  object-fit: contain;
}

.lesson-center-list-header,
.lesson-center-list-actions {
  gap: 10px;
}

.lesson-center-list-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.lesson-center-list-actions .lesson-center-open-register {
  min-width: 104px;
  min-height: 40px;
  padding: 0 16px;
}

.lesson-centers-club-panel .club-create-toggle {
  min-width: 92px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.lesson-centers-club-panel .club-card,
.lesson-center-list-panel .lesson-center-card {
  border-color: #dbe8f7;
}

.lesson-center-list-panel .lesson-center-list {
  grid-template-columns: 1fr;
}

.lesson-center-list-panel .lesson-center-card {
  grid-template-columns: 92px minmax(0, 1fr) auto;
}

.lesson-center-list-panel .lesson-center-card-actions {
  grid-column: auto;
  width: auto;
  display: flex;
  justify-content: flex-end;
}

.lesson-center-list-panel .lesson-center-card-actions .primary-button,
.lesson-center-list-panel .lesson-center-card-actions .danger-button {
  min-width: 78px;
  min-height: 42px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 800;
}

.lesson-centers-club-panel .club-card-link:hover strong {
  color: #0878ff;
}

@media (max-width: 640px) {
  .lesson-center-list-panel .lesson-center-card {
    grid-template-columns: 82px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 14px;
  }

  .lesson-center-list-panel .lesson-center-card-actions {
    grid-column: auto;
    width: auto;
    display: flex;
    justify-content: flex-end;
  }

  .lesson-center-list-panel .lesson-center-card-actions .primary-button,
  .lesson-center-list-panel .lesson-center-card-actions .danger-button {
    min-width: 78px;
    min-height: 42px;
    padding: 0 14px;
  }

  .lesson-center-list-header,
  .lesson-centers-club-panel .club-list-header {
    align-items: stretch;
  }

  .lesson-center-list-actions {
    width: 100%;
    justify-content: space-between;
  }

  .lesson-center-list-actions .lesson-center-open-register,
  .lesson-centers-club-panel .club-create-toggle {
    width: 100%;
  }
}

.club-card-logo-placeholder {
  background: #fff;
  object-fit: contain;
  padding: 6px;
}

.lesson-center-card-meta span {
  color: #64748b;
  background: #f5f9ff;
  border-color: #dbe8f7;
}

.lesson-center-empty-card {
  color: #64748b;
  background: #f5f9ff;
  border-color: #c8dcf5;
}

.lesson-center-home-page {
  background: linear-gradient(180deg, #eef6ff 0, #ffffff 340px, #f6faff 100%);
}

.lesson-center-home-hero {
  background:
    linear-gradient(135deg, #005ed8 0%, #0878ff 58%, #3aa0ff 100%);
  box-shadow: 0 24px 54px rgba(8, 79, 168, 0.2);
}

.lesson-center-home-hero .section-label,
.lesson-center-home-actions .primary-button {
  color: #0878ff;
  background: #fff;
  border-color: #fff;
}

.lesson-center-location,
.lesson-center-owner,
.lesson-center-home-actions .ghost-button {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.32);
}

.lesson-center-hero-visual.has-image {
  background: #0b3f8f;
}

.lesson-center-hero-visual.has-image::before {
  background:
    linear-gradient(180deg, rgba(5, 30, 70, 0.04), rgba(5, 30, 70, 0.7)),
    linear-gradient(90deg, rgba(5, 30, 70, 0.5), transparent 55%);
}

.lesson-center-hero-visual span {
  color: #d9ecff;
}

.lesson-center-info-board {
  border-top-color: #0878ff;
}

.lesson-center-coach-card,
.lesson-center-inquiry-card {
  background: #f8fbff;
  border-color: #dbe8f7;
}

.lesson-center-coach-avatar {
  background: #0878ff;
}

.lesson-center-coach-avatar.has-photo {
  background: #eaf3ff;
}

.lesson-center-coach-career {
  border-top-color: #dbe8f7;
}

.lesson-center-coach-career b {
  color: #0878ff;
}

.lesson-center-inquiry-form input,
.lesson-center-inquiry-form select,
.lesson-center-inquiry-form textarea,
.lesson-center-info-form input,
.lesson-center-info-form textarea {
  background: #f8fbff;
  border-color: #dbe8f7;
}

.lesson-center-inquiry-form input:focus,
.lesson-center-inquiry-form select:focus,
.lesson-center-inquiry-form textarea:focus,
.lesson-center-info-form input:focus,
.lesson-center-info-form textarea:focus {
  outline-color: #0878ff;
}

.club-card-link:hover strong,
.club-card-logo-placeholder,
.club-brand-mark,
.developer-owner-type,
.developer-admin-photo,
.developer-admin-title span,
.developer-admin-role-list span,
.developer-owner-title span {
  color: #0878ff;
}

.developer-admin-title span,
.developer-admin-role-list span,
.developer-owner-title span {
  background: #eaf3ff;
  border-color: #c9ddfb;
}

.developer-admin-card.is-admin,
.developer-admin-card.has-managed-place,
.developer-owner-card.has-owner {
  background: #f4f9ff;
  border-color: #c9ddfb;
}

.developer-owner-group.is-lesson-center .developer-owner-group-head h3,
.developer-owner-card.is-lesson-center .developer-owner-type,
.developer-owner-card.is-lesson-center .developer-owner-title span {
  color: #0878ff;
}

.developer-owner-card.is-lesson-center.has-owner {
  background: #f4f9ff;
  border-color: #c9ddfb;
}

.developer-owner-card.is-lesson-center .developer-owner-type,
.developer-owner-card.is-lesson-center .developer-owner-title span {
  background: #eaf3ff;
  border-color: #c9ddfb;
}

.developer-owner-group.is-club .developer-owner-group-head h3,
.developer-owner-card.is-club .developer-owner-type,
.developer-owner-card.is-club .developer-owner-title span {
  color: #9a6a00;
}

.developer-owner-card.is-club.has-owner {
  background: #fff9df;
  border-color: #f1d783;
}

.developer-owner-card.is-club .developer-owner-type,
.developer-owner-card.is-club .developer-owner-title span {
  background: #fff4bd;
  border-color: #efd27a;
}

.admin-page .admin-section-tab {
  background: #f5f9ff;
}

.admin-page .admin-section-tab.is-active {
  color: #fff;
  background: #0878ff;
  border-color: #0878ff;
  box-shadow: 0 12px 26px rgba(8, 120, 255, 0.2);
}

.store-page {
  background: #f3f8ff;
}

.store-page .app {
  background: linear-gradient(180deg, #f3f8ff 0%, #ffffff 46%, #f6faff 100%);
}

.store-panel,
.store-empty,
.store-card,
.developer-store-card {
  border-color: #dbe8f7;
  box-shadow: 0 12px 28px rgba(8, 79, 168, 0.06);
}

.store-filter-tabs {
  background: #eef6ff;
  border-color: #dbe8f7;
}

.store-filter-tabs button.is-active {
  color: #0878ff;
}

.store-type,
.store-card-footer a,
.developer-store-thumb,
.developer-store-title span {
  color: #0878ff;
}

.developer-store-title span {
  background: #eaf3ff;
  border-color: #c9ddfb;
}

/* Home redesign - mobile app tone */
.home-page,
.home-page .app {
  color: var(--ink);
  background: var(--bg);
}

.home-page .home-workspace {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 34px 30px calc(var(--bottom-tabbar-height) + 34px);
  gap: 0;
}

.home-page .home-topbar {
  width: 100%;
  min-height: 0;
  align-items: center;
  /* 로고 줄 아래 ↔ 공지 박스 사이를 눈에 보이는 24px 로(최소 높이를 두면 로고 아래 여백이 더 생긴다) */
  margin-bottom: 24px;
}

.home-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

.home-page .home-brand-logo {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  box-shadow: none;
}

.home-brand-name {
  min-width: 0;
  color: var(--ink);
  font-size: clamp(20px, 5vw, 24px);
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.home-page .home-top-actions {
  gap: 14px;
}

.home-page .home-message-button {
  width: 52px;
  height: 52px;
  color: var(--mute);
  background: transparent;
  border: 0;
  border-radius: 999px;
}

.home-page .home-message-button svg {
  width: 27px;
  height: 27px;
  fill: currentColor;
  stroke: none;
}

.home-page .home-profile-link {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  background: #DCE8FF;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
}

.home-page .home-profile-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-page .home-content-stack {
  width: 100%;
  gap: 24px;
  margin-top: 0;
}

.home-page .home-notice-section,
.home-page .home-shortcut-section,
.home-page .home-banner-section,
.home-page .home-weather-section,
.home-page .guest-recruit-section {
  width: 100%;
}

.home-page .home-notice-ticker {
  min-height: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px 16px;
  background: var(--surface);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

.home-page .home-notice-ticker::after {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--mute);
  border-right: 2px solid var(--mute);
  transform: rotate(45deg);
}

.home-page .home-notice-label {
  min-height: 0;
  padding: 4px 9px;
  color: var(--primary);
  background: var(--primary-tint);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
}

.home-page .home-notice-text {
  color: #334155;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}

.home-page .home-shortcut-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 8px 0 0;
}

.home-page .home-shortcut-item {
  gap: 14px;
  color: #334155;
}

.home-page .home-shortcut-icon {
  width: clamp(82px, 18vw, 112px);
  height: clamp(82px, 18vw, 112px);
  color: var(--primary);
  background: #EAF1FF;
  border-radius: 50%;
  box-shadow: none;
  font-size: 0;
}

.home-page .home-shortcut-icon svg {
  width: 38%;
  height: 38%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-page .home-shortcut-icon.is-club {
  color: #15803D;
  background: #E5F6EC;
}

.home-page .home-shortcut-icon.is-club.has-image {
  background: transparent;
}

.home-page .home-shortcut-icon.is-lesson.has-image,
.home-page .home-shortcut-icon.is-store.has-image {
  background: transparent;
}

.home-page .home-shortcut-icon.is-tournament {
  color: #D97706;
  background: #FFF3DE;
}

.home-page .home-shortcut-icon.is-tournament.has-image {
  background: transparent;
}

.home-page .home-shortcut-icon.is-store {
  color: #7C3AED;
  background: #F1E8FF;
}

.home-page .home-shortcut-item strong {
  color: #334155;
  font-size: clamp(13px, 3.4vw, 15px);
  font-weight: 850;
  line-height: 1.12;
}

.home-page .home-banner-section {
  display: grid;
  gap: 16px;
}

.home-page .home-banner {
  position: relative;
  min-height: 124px;
  grid-template-columns: 1fr;
  overflow: hidden;
  color: #fff;
  /* 기본 배너 공통 배경(시안 B): 로열 블루 그라데이션 + 빛망울 — 노란 공·라켓줄 장식 제거 (2026-07-26) */
  background:
    radial-gradient(circle 86px at 89% 13%, rgba(255, 255, 255, 0.34), transparent),
    radial-gradient(circle 54px at 75% 86%, rgba(255, 255, 255, 0.34), transparent),
    linear-gradient(135deg, #0052CC 0%, #0066FF 55%, #4F8DFD 100%);
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.home-page .home-banner-copy {
  min-height: 124px;
  align-content: center;
  gap: 8px;
  padding: 24px 34px;
}

/* 레슨·클럽 배너와 동일한 구조가 되도록 홈 배너의 뱃지도 숨긴다 */
.home-page .home-banner-copy span {
  display: none;
}

.home-page .home-banner-copy strong {
  max-width: 430px;
  font-size: clamp(20px, 5vw, 26px);
  font-weight: 900;
  line-height: 1.08;
}

.home-page .home-banner-copy p {
  max-width: 430px;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(13px, 3.5vw, 16px);
  font-weight: 600;
}

.home-page .home-banner-section .home-banner.has-no-image .home-banner-copy {
  min-height: 124px;
}

.home-page .home-banner-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.home-page .home-banner-dots[hidden] {
  display: none;
}

.home-page .home-banner-dots span {
  width: 12px;
  height: 12px;
  background: #CBD5E1;
  border-radius: 999px;
}

.home-page .home-banner-dots .is-active {
  width: 36px;
  background: var(--primary);
}

.home-page .home-weather-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 24px 28px 18px;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.home-page .home-weather-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.home-page .home-weather-heading h2 {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: var(--font-headline-1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-headline-1);
  letter-spacing: var(--tracking-headline-1);
  white-space: nowrap;
}

.home-page .home-weather-settings-button {
  min-width: 0;
  min-height: 36px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  padding: 0 4px;
  color: var(--primary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-btn);
  box-shadow: none;
  font-family: inherit;
  font-size: var(--font-label-1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-label-1);
  letter-spacing: var(--tracking-label-1);
  white-space: nowrap;
  cursor: pointer;
}

.home-page .home-weather-settings-button:hover {
  background: var(--primary-tint);
}

.home-page .home-weather-settings-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-page .home-weather-now {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}

.home-page .home-weather-day {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 2px 14px 2px 0;
}

.home-page .home-weather-day.is-tomorrow {
  justify-items: center;
  padding: 2px 0 2px 14px;
  border-left: 1px solid var(--line);
  text-align: center;
}

.home-page .home-weather-day-label {
  color: var(--ink);
  font-size: var(--font-label-1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-label-1);
  letter-spacing: var(--tracking-label-1);
}

.home-page .home-weather-updated {
  justify-self: start;
  padding: 0;
  color: var(--ink);
  background: none;
  border: 0;
  font-size: var(--font-label-2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-label-2);
  letter-spacing: var(--tracking-label-2);
}

.home-page .home-weather-primary {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-page .home-weather-primary strong {
  min-width: 0;
  color: var(--ink);
  font-size: var(--font-display-1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-display-1);
  letter-spacing: var(--tracking-display-1);
  white-space: nowrap;
}

.home-page .home-weather-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-size: var(--font-display-2);
  line-height: 1;
}

.home-page .home-weather-day.is-tomorrow .home-weather-icon {
  font-size: var(--font-heading-1);
}

.home-page .home-weather-card.is-error .home-weather-icon {
  filter: grayscale(0.7);
  opacity: 0.72;
}

.home-page .home-weather-summary {
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 8px;
  color: var(--sub);
  font-size: var(--font-label-1);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-label-1);
  letter-spacing: var(--tracking-label-1);
}

.home-page .home-weather-summary strong {
  color: var(--ink);
  font-size: var(--font-body-2);
  font-weight: var(--weight-bold);
}

.home-page .home-weather-card.is-error .home-weather-summary strong {
  color: var(--sub);
  font-size: var(--font-label-2);
}

.home-page .home-weather-range {
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 10px;
  color: var(--sub);
  font-size: var(--font-label-2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-label-2);
  letter-spacing: var(--tracking-label-2);
}

.home-page .home-weather-range span {
  white-space: nowrap;
}

.home-page .home-weather-range strong {
  color: var(--ink);
  font-size: var(--font-body-2);
  font-weight: var(--weight-bold);
}

.home-page .home-weather-tomorrow-condition {
  min-width: 0;
  color: var(--ink);
  font-size: var(--font-label-1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-label-1);
  letter-spacing: var(--tracking-label-1);
}

.home-page .home-weather-card.is-error .home-weather-tomorrow-condition {
  color: var(--sub);
  font-size: var(--font-label-2);
}

.home-page .home-weather-meta {
  color: var(--sub);
  font-size: var(--font-label-2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-label-2);
  letter-spacing: var(--tracking-label-2);
  white-space: nowrap;
}

.home-page .home-weather-meta strong {
  color: var(--ink);
  font-weight: var(--weight-bold);
}

.home-page .home-weather-chips {
  min-width: 0;
  display: flex;
  justify-content: safe center;
  gap: 8px;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.home-page .home-weather-chips::-webkit-scrollbar {
  display: none;
}

.home-page .home-weather-chip {
  flex: 0 0 auto;
  min-width: 72px;
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
}

.home-page .home-weather-chip small {
  color: var(--sub);
  font-size: var(--font-caption-1);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-caption-1);
  letter-spacing: var(--tracking-caption-1);
  white-space: nowrap;
}

.home-page .home-weather-chip strong {
  color: var(--ink);
  font-size: var(--font-body-2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-body-2);
  letter-spacing: var(--tracking-body-2);
  white-space: nowrap;
}

.home-page .home-weather-hourly {
  min-width: 0;
  min-height: 278px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-content: start;
  color: var(--ink);
  font-size: var(--font-label-1);
  font-weight: var(--weight-semibold);
}

.home-page .home-weather-hourly[hidden] {
  display: none;
}

.home-page .home-weather-hourly-labels,
.home-page .home-weather-hour {
  display: grid;
  grid-template-rows: 28px 36px 80px 30px 30px 30px 44px;
  align-items: center;
}

.home-page .home-weather-hourly-labels span {
  color: var(--sub);
  font-size: var(--font-caption-2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-caption-2);
  letter-spacing: var(--tracking-caption-2);
  white-space: nowrap;
}

.home-page .home-weather-hourly-scroll {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.home-page .home-weather-hourly-scroll::-webkit-scrollbar {
  display: none;
}

.home-page .home-weather-hourly-track {
  position: relative;
}

.home-page .home-weather-hourly-line {
  position: absolute;
  top: 64px;
  left: 0;
  z-index: 1;
  color: var(--ink);
  pointer-events: none;
}

.home-page .home-weather-hourly-columns {
  display: flex;
}

.home-page .home-weather-hour {
  flex: 0 0 52px;
  justify-items: center;
  text-align: center;
}

.home-page .home-weather-hour-icon {
  font-size: var(--font-heading-1);
  line-height: 1;
}

.home-page .home-weather-hour-graph {
  position: relative;
  width: 100%;
  height: 100%;
}

.home-page .home-weather-hour-temp {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--ink);
  font-size: var(--font-body-2);
  font-weight: var(--weight-bold);
  line-height: 1.2;
}

.home-page .home-weather-hour-dot {
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--ink);
  border-radius: 50%;
  transform: translateX(-50%);
}

.home-page .home-weather-hour-rain-chance {
  color: var(--mute);
}

/* 강수량·습도·바람은 연한 회색 */
.home-page .home-weather-hour-rain,
.home-page .home-weather-hour-humidity,
.home-page .home-weather-hour-wind {
  color: var(--mute);
}

.home-page .home-weather-hour-wind {
  display: grid;
  justify-items: center;
  line-height: 1.2;
}

.home-page .home-weather-hour-arrow {
  display: inline-block;
  font-style: normal;
}

.home-page .home-weather-source {
  justify-self: end;
  color: var(--mute);
  font-size: var(--font-caption-2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-caption-2);
  letter-spacing: var(--tracking-caption-2);
  text-decoration: none;
}

.home-page .home-weather-source:hover {
  color: var(--primary);
  text-decoration: underline;
}

.home-page .guest-recruit-section {
  gap: 16px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.home-page .guest-recruit-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(19px, 5vw, 22px);
  font-weight: 950;
  line-height: 1.1;
}

.home-page .guest-recruit-header .primary-button {
  min-width: 0;
  min-height: 0;
  padding: 11px 18px;
  color: var(--primary);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  font-weight: 800;
}

.home-page .guest-recruit-list {
  gap: 22px;
}

.home-page .guest-recruit-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  color: var(--ink);
  font-size: var(--font-body-1);
}

.home-page .guest-recruit-pagination[hidden] {
  display: none;
}

.home-page .guest-recruit-pagination button {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-size: 12.5px;
  cursor: pointer;
}

.home-page .guest-recruit-pagination span {
  min-width: 48px;
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.home-page .guest-recruit-pagination button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 4px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-page .guest-recruit-pagination button:disabled {
  cursor: default;
}

.home-page .guest-recruit-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 34px;
  background: var(--surface);
  border: 0;
  border-radius: 30px;
  box-shadow: var(--shadow-card);
}

.home-page .guest-recruit-card.has-bottom-guest-action,
.home-page .guest-recruit-card.has-bottom-guest-action.has-wide-guest-action,
.home-page .guest-recruit-card.has-wide-guest-action {
  grid-template-columns: 1fr;
  padding-right: 34px;
}

.home-page .guest-card-info {
  gap: 18px;
}

.home-page .guest-card-top {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
}

.home-page .guest-card-summary {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.home-page .guest-card-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.home-page .guest-card-heading strong {
  color: var(--ink);
  font-size: clamp(17px, 4.4vw, 20px);
  font-weight: 950;
  line-height: 1.08;
}

.home-page .guest-status-badge {
  flex: 0 0 auto;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  color: var(--green);
  background: var(--green-soft);
  border-radius: 999px;
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 900;
  white-space: nowrap;
}

/* 모집중은 배경 없이 검정 글자(2026-10-03 사용자 요청). 마감 임박·모집 완료는 주황 그대로 */
.home-page .guest-status-badge.is-open {
  color: var(--ink);
  background: transparent;
}

.home-page .guest-status-badge.is-urgent,
.home-page .guest-status-badge.is-closed {
  color: var(--amber);
  background: var(--amber-soft);
}

.home-page .guest-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  color: var(--sub);
  font-size: clamp(13px, 3.5vw, 15px);
  font-weight: 750;
}

.home-page .guest-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.home-page .guest-card-meta svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--mute);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-page .guest-card-detail {
  gap: 10px 14px;
}

.home-page .guest-card-detail span {
  min-height: 48px;
  padding: 0 20px;
  color: var(--sub);
  background: #F1F5F9;
  border: 0;
  border-radius: 999px;
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 650;
}

.home-page .guest-card-detail span + span::before {
  content: none;
}

.home-page .guest-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.home-page .guest-card-applicants {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--sub);
  font-size: clamp(13px, 3.5vw, 15px);
  font-weight: 750;
}

.home-page .guest-applicant-stack {
  display: flex;
  align-items: center;
}

.home-page .guest-applicant-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-left: -8px;
  overflow: hidden;
  color: #8A4F05;
  background: #FFD88A;
  border: 3px solid #fff;
  border-radius: 50%;
  /* 이름 뒤 2글자가 들어간다 — 18px 면 폭 33px 로 안지름 36px 에 거의 닿는다 */
  font-size: 15px;
  font-weight: 900;
}

.home-page .guest-applicant-avatar:first-child {
  margin-left: 0;
}

.home-page .guest-applicant-avatar:nth-child(2) {
  color: #1D4ED8;
  background: #BFDBFE;
}

.home-page .guest-applicant-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-page .guest-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.home-page .guest-card-actions.is-owner-actions {
  position: static;
}

.home-page .guest-card-actions.is-recruit-actions {
  align-self: center;
  margin-top: 0;
}

.home-page .guest-card-actions.is-card-side-actions {
  width: auto;
  display: grid;
  grid-template-columns: 1fr;
  align-self: start;
  gap: 8px;
  margin: 0;
}

.home-page .guest-card-actions.is-card-side-actions .guest-edit-button,
.home-page .guest-card-actions.is-card-side-actions .guest-delete-button {
  min-width: 108px;
  min-height: 44px;
  padding: 0 18px;
}

.home-page .guest-apply-button,
.home-page .guest-cancel-apply-button,
.home-page .guest-edit-button,
.home-page .guest-delete-button.is-recruit-delete,
.home-page .guest-approval-status {
  min-width: 128px;
  min-height: 58px;
  padding: 0 24px;
  border-radius: 18px;
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 900;
}

.home-page .guest-apply-button {
  color: #fff;
  background: linear-gradient(135deg, #3B7BFF 0%, var(--primary-dark) 100%);
  border: 0;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
}

.home-page .guest-apply-button.is-closed:disabled {
  color: var(--sub);
  background: #E2E8F0;
  box-shadow: none;
  cursor: not-allowed;
}

.home-page .guest-cancel-apply-button,
.home-page .guest-edit-button {
  color: var(--primary);
  background: var(--primary-tint);
  border: 0;
}

.home-page .guest-delete-button.is-recruit-delete {
  color: #DC2626;
  background: #FEF2F2;
  border: 0;
}

/* 신청하기·지원 취소·승인 표시를 수정/삭제와 같은 크기로 (2026-08-06 사용자 요청).
   한 줄에 나란히 서면서 신청하기만 크게 남아 있었다. 글자 크기는 위 묶음 규칙에서
   이미 같다 — 여기서는 폭·높이·좌우 여백만 맞춘다.
   ‼️ 값은 .is-card-side-actions 의 수정/삭제 규칙과 짝이다. 한쪽만 고치면 다시 어긋난다. */
.home-page .guest-apply-button,
.home-page .guest-cancel-apply-button,
.home-page .guest-approval-status {
  min-width: 108px;
  min-height: 44px;
  padding: 0 18px;
}

.home-page .guest-applicant-list {
  margin-top: 2px;
  padding-top: 14px;
}

.bottom-tabbar {
  min-height: var(--bottom-tabbar-height);
  gap: 2px;
  padding: 8px 20px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid var(--line);
  box-shadow: none;
}

.bottom-tab {
  min-height: 64px;
  flex-direction: column;
  gap: 5px;
  color: #9AA5B4;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 800;
}

.bottom-tab-icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
}

.bottom-tab-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bottom-tab.is-active,
.bottom-tab.menu-open {
  color: var(--primary);
  background: var(--primary-tint);
}

@media (max-width: 640px) {
  .home-page .home-workspace {
    padding: 26px 16px calc(var(--bottom-tabbar-height) + 28px);
  }

  .home-page .home-topbar {
    min-height: 0;
    margin-bottom: 24px;
  }

  .home-brand {
    gap: 12px;
  }

  .home-page .home-brand-logo {
    width: 58px;
    height: 58px;
    border-radius: 15px;
  }

  .home-brand-name {
    font-size: 21px;
  }

  .home-page .home-message-button {
    width: 44px;
    height: 44px;
  }

  .home-page .home-message-button svg {
    width: 27px;
    height: 27px;
  }

  .home-page .home-profile-link {
    width: 52px;
    height: 52px;
  }

  .home-page .home-content-stack {
    gap: 24px;
  }

  .home-page .home-notice-ticker {
    gap: 10px;
    padding: 12px 15px;
    border-radius: 14px;
  }

  .home-page .home-notice-label {
    min-height: 0;
    padding: 4px 9px;
    font-size: 11px;
  }

  .home-page .home-shortcut-grid {
    gap: 8px;
  }

  .home-page .home-shortcut-icon {
    width: 68px;
    height: 68px;
  }

  .home-page .home-shortcut-item strong {
    font-size: 14px;
  }

  .home-page .home-banner,
  .home-page .home-banner-section .home-banner.has-no-image .home-banner-copy,
  .home-page .home-banner-copy {
    min-height: 112px;
  }

  .home-page .home-banner-copy {
    padding: 20px 24px;
  }

  .home-page .home-weather-card {
    gap: 14px;
    padding: 18px 16px 14px;
    border-radius: 26px;
  }

  .home-page .home-weather-heading {
    gap: 8px;
  }

  .home-page .home-weather-heading h2 {
    font-size: var(--font-body-2);
    line-height: var(--leading-body-2);
    letter-spacing: var(--tracking-body-2);
  }

  .home-page .home-weather-settings-button {
    min-height: 32px;
    gap: 3px;
    padding: 0 2px;
    font-size: var(--font-caption-1);
    line-height: var(--leading-caption-1);
    letter-spacing: var(--tracking-caption-1);
  }

  .home-page .home-weather-settings-button svg {
    width: 17px;
    height: 17px;
  }

  .home-page .home-weather-day {
    padding-right: 10px;
  }

  .home-page .home-weather-day.is-tomorrow {
    padding: 2px 0 2px 10px;
  }

  .home-page .home-weather-primary strong {
    font-size: var(--font-display-2);
    line-height: var(--leading-display-2);
    letter-spacing: var(--tracking-display-2);
  }

  .home-page .home-weather-icon {
    font-size: var(--font-heading-1);
  }

  .home-page .home-weather-chip {
    min-width: 64px;
    padding: 7px 10px;
  }

  .home-page .home-weather-hourly {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .home-page .guest-recruit-card {
    padding: 24px;
    border-radius: 26px;
  }

  .home-page .guest-card-top {
    gap: 12px;
  }

  .home-page .guest-status-badge {
    min-height: 34px;
    padding: 0 12px;
  }

  .home-page .guest-card-detail span {
    min-height: 42px;
    padding: 0 16px;
  }

  .home-page .guest-card-footer {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }

  .home-page .guest-card-applicants {
    flex: 1 1 auto;
  }

  .home-page .guest-card-actions,
  .home-page .guest-card-actions.is-guest-actions {
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-left: auto;
  }

  .home-page .guest-card-actions.is-card-side-actions .guest-edit-button,
  .home-page .guest-card-actions.is-card-side-actions .guest-delete-button {
    min-width: 84px;
    min-height: 42px;
    padding: 0 12px;
  }

  .home-page .guest-apply-button,
  .home-page .guest-cancel-apply-button,
  .home-page .guest-edit-button,
  .home-page .guest-delete-button.is-recruit-delete,
  .home-page .guest-approval-status {
    min-width: 116px;
    min-height: 52px;
  }

  /* 폰에서도 수정/삭제와 같은 크기 — 위 .is-card-side-actions 규칙과 짝이다 (2026-08-06).
     폭은 104px: 수정/삭제는 min-width 84 를 넘어 제 상자(104)만큼 늘어나 그려진다.
     같은 값을 여기에 못 박아야 나란히 섰을 때 눈에 띄게 좁아 보이지 않는다. */
  .home-page .guest-apply-button,
  .home-page .guest-cancel-apply-button,
  .home-page .guest-approval-status {
    min-width: 104px;
    min-height: 42px;
    padding: 0 12px;
  }

  .bottom-tabbar {
    padding-right: 10px;
    padding-left: 10px;
  }

  .bottom-tab {
    min-height: 60px;
    padding-right: 0;
    padding-left: 0;
    font-size: 12px;
    border-radius: 16px;
    white-space: nowrap;
  }

  .bottom-tab-icon {
    width: 24px;
    height: 24px;
  }
}

/* 대회 페이지도 홈과 같은 공지/배너를 사용한다. */

.tournament-page .tournament-notice-section,
.tournament-page .tournament-banner-section {
  width: 100%;
}

.tournament-page .tournament-notice-section .home-notice-ticker {
  min-height: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px 16px;
  background: var(--surface);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

.tournament-page .tournament-notice-section .home-notice-ticker::after {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--mute);
  border-right: 2px solid var(--mute);
  transform: rotate(45deg);
}

.tournament-page .tournament-notice-section .home-notice-label {
  min-height: 0;
  padding: 4px 9px;
  color: var(--primary);
  background: var(--primary-tint);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
}

.tournament-page .tournament-notice-section .home-notice-text {
  color: #334155;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}

.tournament-page .tournament-banner-section {
  display: grid;
}

.tournament-page .tournament-banner-section .home-banner-copy strong {
  font-size: clamp(18px, 4.6vw, 22px);
}

.tournament-page .tournament-banner-section .home-banner-copy p {
  font-size: clamp(13px, 3.4vw, 15px);
}

.tournament-page .tournament-banner-section .home-banner.is-image-only::before,
.tournament-page .tournament-banner-section .home-banner.is-image-only::after {
  display: none;
}

.tournament-page .tournament-banner-section .home-banner.is-image-only img {
  height: clamp(124px, 30vw, 260px);
}

@media (max-width: 640px) {

  .tournament-page .tournament-notice-section .home-notice-ticker {
    gap: 10px;
    padding: 12px 15px;
    border-radius: 14px;
  }

  .tournament-page .tournament-notice-section .home-notice-label {
    min-height: 0;
    padding: 4px 9px;
    font-size: 11px;
  }

  .tournament-page .tournament-banner-section .home-banner.is-image-only img {
    height: clamp(112px, 30vw, 220px);
  }
}

/* 레슨장 상세 홈 리디자인 v316 */
.lesson-center-home-page,
.lesson-center-home-page .app {
  color: #0f172a;
  background: #f5f7fb;
}

.lesson-center-home-page * {
  letter-spacing: 0;
}

.lesson-center-home-page svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lesson-center-home-page .lesson-center-home-workspace {
  width: min(100%, 760px);
  min-height: 100dvh;
  display: block;
  margin: 0 auto;
  padding: 0 0 calc(172px + env(safe-area-inset-bottom));
  background: #f5f7fb;
  box-shadow: none;
}

.lesson-center-home-page .lesson-center-detail-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 62px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  background: rgba(245, 247, 251, 0.94);
  border-bottom: 1px solid rgba(226, 232, 240, 0.88);
  backdrop-filter: blur(16px);
}

.lesson-center-home-page .lesson-center-detail-topbar strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-center-home-page .lesson-center-icon-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #0f172a;
  background: transparent;
  border: 0;
  border-radius: 50%;
  text-decoration: none;
  cursor: pointer;
}

.lesson-center-home-page .lesson-center-icon-button:hover,
.lesson-center-home-page .lesson-center-icon-button:focus-visible {
  color: #2563eb;
  background: #eaf1ff;
  outline: none;
}

.lesson-center-home-page .lesson-center-home-hero {
  min-height: 0;
  display: block;
  padding: 18px 20px 0;
  color: #0f172a;
  background: #f5f7fb;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.lesson-center-home-page .lesson-center-hero-card {
  position: relative;
  aspect-ratio: 48 / 31;
  min-height: 0;
  overflow: hidden;
  background: #dbe5f1;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
}

.lesson-center-home-page .lesson-center-hero-card::after {
  content: none;
}

.lesson-center-home-page .lesson-center-hero-visual,
.lesson-center-home-page .lesson-center-hero-visual.has-image,
.lesson-center-home-page .lesson-center-gallery-slider,
.lesson-center-home-page .lesson-center-gallery-frame,
.lesson-center-home-page .lesson-center-gallery-tile,
.lesson-center-home-page .lesson-center-gallery-tile.is-main {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.lesson-center-home-page .lesson-center-hero-visual,
.lesson-center-home-page .lesson-center-hero-visual.has-image {
  position: absolute;
  inset: 0;
  padding: 0;
  overflow: hidden;
  background: #dbe5f1;
  border: 0;
  border-radius: inherit;
}

.lesson-center-home-page .lesson-center-gallery-slider {
  position: relative;
  display: block;
}

.lesson-center-home-page .lesson-center-gallery-tile,
.lesson-center-home-page .lesson-center-gallery-tile.is-main {
  display: block;
  margin: 0;
  padding: 0;
  background: #dbe5f1;
  border: 0;
  border-radius: 0;
}

.lesson-center-home-page .lesson-center-gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lesson-center-home-page .lesson-center-gallery-tile.is-empty img {
  width: 100%;
  height: 100%;
  opacity: 0.72;
  object-fit: cover;
}

.lesson-center-home-page .lesson-center-gallery-tile figcaption {
  display: none;
}

.lesson-center-home-page .lesson-center-service-tags {
  display: flex;
  gap: 7px;
  margin-top: 14px;
}

.lesson-center-home-page .lesson-center-service-tags span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  backdrop-filter: blur(8px);
}

.lesson-center-home-page .lesson-center-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 22px 6px 18px;
}

.lesson-center-home-page .lesson-center-quick-action {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #334155;
  text-decoration: none;
}

.lesson-center-home-page .lesson-center-quick-action span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: #2563eb;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  box-shadow: 0 7px 18px rgba(37, 99, 235, 0.08);
}

.lesson-center-home-page .lesson-center-quick-action b {
  font-size: 13px;
  font-weight: 850;
}

.lesson-center-home-page .lesson-center-quick-action:hover span,
.lesson-center-home-page .lesson-center-quick-action:focus-visible span {
  color: #ffffff;
  background: #2563eb;
  border-color: #2563eb;
}

.lesson-center-home-page .lesson-center-quick-action:focus-visible {
  outline: none;
}

.lesson-center-home-page .lesson-center-quick-action.is-disabled {
  color: #94a3b8;
  cursor: default;
}

.lesson-center-home-page .lesson-center-quick-action.is-disabled span {
  color: #a8b4c5;
  background: #eef2f7;
  border-color: #e2e8f0;
  box-shadow: none;
}

.lesson-center-home-page .lesson-center-place-tabs {
  position: sticky;
  top: 62px;
  z-index: 24;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: visible;
  margin: 0 -20px;
  padding: 0 20px;
  background: rgba(245, 247, 251, 0.96);
  border-bottom: 1px solid #e2e8f0;
  backdrop-filter: blur(14px);
}

.lesson-center-home-page .lesson-center-place-tabs button,
.lesson-center-home-page .lesson-center-place-tabs a {
  position: relative;
  min-height: 54px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #94a3b8;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}

.lesson-center-home-page .lesson-center-place-tabs button.is-active,
.lesson-center-home-page .lesson-center-place-tabs a.is-active {
  color: #0f172a;
}

.lesson-center-home-page .lesson-center-place-tabs button.is-active::after,
.lesson-center-home-page .lesson-center-place-tabs a.is-active::after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: 0;
  left: 18%;
  height: 3px;
  background: #2563eb;
  border-radius: 999px 999px 0 0;
}

.lesson-center-home-page .lesson-center-view-stack {
  width: 100%;
}

.lesson-center-home-page .lesson-center-view-panel {
  display: grid;
  gap: 18px;
  padding: 22px 20px;
}

.lesson-center-home-page .lesson-center-view-panel[hidden] {
  display: none;
}

.lesson-center-home-page .lesson-center-summary-card,
.lesson-center-home-page .lesson-center-home-facts,
.lesson-center-home-page .lesson-center-info-board {
  padding: 22px;
  background: #ffffff;
  border: 1px solid #e8edf4;
  border-radius: 18px;
  box-shadow: 0 7px 22px rgba(15, 23, 42, 0.05);
}

.lesson-center-home-page .lesson-center-card-heading {
  display: flex;
  align-items: center;
  gap: 13px;
}

.lesson-center-home-page .lesson-center-card-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #2563eb;
  background: #eaf1ff;
  border-radius: 12px;
}

.lesson-center-home-page .lesson-center-card-heading span,
.lesson-center-home-page .lesson-center-section-heading span,
.lesson-center-home-page .lesson-center-page-heading span {
  color: #2563eb;
  font-size: 11px;
  font-weight: 900;
}

.lesson-center-home-page .lesson-center-card-heading h2,
.lesson-center-home-page .lesson-center-section-heading h2,
.lesson-center-home-page .lesson-center-page-heading h2,
.lesson-center-home-page .lesson-center-inquiry-header h2 {
  margin: 3px 0 0;
  color: #0f172a;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.2;
}

.lesson-center-home-page .lesson-center-hero-intro {
  margin: 17px 0 0;
  color: #526176;
  white-space: pre-line;
  word-break: keep-all;
}

.lesson-center-home-page .lesson-center-home-facts {
  display: grid;
  gap: 0;
}

.lesson-center-home-page .lesson-center-home-fact {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 16px 0;
  border-bottom: 1px solid #edf1f6;
}

.lesson-center-home-page .lesson-center-home-fact:first-child {
  padding-top: 0;
}

.lesson-center-home-page .lesson-center-home-fact:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.lesson-center-home-page .lesson-center-home-fact[hidden] {
  display: none;
}

.lesson-center-home-page .lesson-center-home-fact > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #2563eb;
  background: #eef4ff;
  border-radius: 12px;
}

.lesson-center-home-page .lesson-center-home-fact small,
.lesson-center-home-page .lesson-center-place-row small {
  display: block;
  margin-bottom: 4px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
}

.lesson-center-home-page .lesson-center-home-fact strong {
  display: block;
  overflow: hidden;
  color: #334155;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.45;
  text-overflow: ellipsis;
}

.lesson-center-home-page .lesson-center-section {
  margin: 0;
  padding: 7px 0 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.lesson-center-home-page .lesson-center-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.lesson-center-home-page .lesson-center-section-heading button {
  min-height: 34px;
  padding: 0 12px;
  color: #2563eb;
  background: #eaf1ff;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.lesson-center-home-page .lesson-center-intro-text {
  margin: -5px 0 14px;
  color: #64748b;
}

.lesson-center-home-page .lesson-center-coach-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  margin: 0 -20px;
  padding: 0 20px 8px;
  scrollbar-width: none;
}

.lesson-center-home-page .lesson-center-coach-list::-webkit-scrollbar {
  display: none;
}

.lesson-center-home-page .lesson-center-coach-card {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 22px;
  align-items: center;
  color: #0f172a;
  text-align: left;
  background: #ffffff;
  border: 1px solid #e8edf4;
  border-radius: 16px;
  box-shadow: 0 7px 20px rgba(15, 23, 42, 0.05);
}

.lesson-center-home-page .lesson-center-coach-avatar {
  width: 68px;
  height: 68px;
  color: #ffffff;
  background: #2563eb;
  border: 0;
  border-radius: 50%;
  font-size: 22px;
}

.lesson-center-home-page .lesson-center-coach-copy {
  min-width: 0;
}

.lesson-center-home-page .lesson-center-coach-card .lesson-center-coach-copy > strong {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
  font-weight: 900;
}

.lesson-center-home-page .lesson-center-coach-card .lesson-center-coach-profile {
  display: -webkit-box;
  overflow: hidden;
  margin: 6px 0 9px;
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lesson-center-home-page .lesson-center-coach-tags {
  display: flex;
  gap: 5px;
  overflow: hidden;
}

.lesson-center-home-page .lesson-center-coach-tags i {
  overflow: hidden;
  padding: 5px 8px;
  color: #2563eb;
  background: #eaf1ff;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-center-home-page .lesson-center-coach-more {
  color: #94a3b8;
  font-size: 20px;
  font-weight: 500;
}

.lesson-center-home-page .lesson-center-notice-text {
  min-width: 0;
}

.lesson-center-home-page .lesson-center-notice-item,
.lesson-center-home-page .lesson-center-news-card {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  color: #0f172a;
  text-align: left;
  background: #ffffff;
  border: 1px solid #e8edf4;
  border-radius: 16px;
  box-shadow: 0 7px 20px rgba(15, 23, 42, 0.05);
  font: inherit;
  cursor: pointer;
}

.lesson-center-home-page .lesson-center-news-card {
  grid-template-columns: 58px minmax(0, 1fr) auto;
}

.lesson-center-home-page .lesson-center-notice-date {
  width: 58px;
  height: 58px;
  display: grid;
  place-content: center;
  justify-items: center;
  color: #2563eb;
  background: #eaf1ff;
  border-radius: 14px;
}

.lesson-center-home-page .lesson-center-notice-date b {
  font-size: 19px;
  font-weight: 950;
  line-height: 1;
}

.lesson-center-home-page .lesson-center-notice-date small {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 850;
}

.lesson-center-home-page .lesson-center-notice-copy,
.lesson-center-home-page .lesson-center-news-copy {
  min-width: 0;
  display: block;
}

.lesson-center-home-page .lesson-center-notice-copy small,
.lesson-center-home-page .lesson-center-news-copy small {
  display: block;
  overflow: hidden;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-center-home-page .lesson-center-notice-copy strong,
.lesson-center-home-page .lesson-center-news-copy strong {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  color: #0f172a;
  font-size: 15px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-center-home-page .lesson-center-news-copy strong {
  margin-top: 0;
  font-size: 18px;
  line-height: 1.45;
  white-space: normal;
}

.lesson-center-home-page .lesson-center-notice-copy p,
.lesson-center-home-page .lesson-center-news-copy p {
  display: -webkit-box;
  overflow: hidden;
  margin: 5px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lesson-center-home-page .lesson-center-notice-badge,
.lesson-center-home-page .lesson-center-news-card em {
  padding: 6px 8px;
  color: #2563eb;
  background: #eaf1ff;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.lesson-center-home-page .lesson-center-notice-indicators {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.lesson-center-home-page .lesson-center-notice-indicators button {
  width: 7px;
  height: 7px;
  padding: 0;
  background: #cbd5e1;
  border: 0;
  border-radius: 999px;
}

.lesson-center-home-page .lesson-center-notice-indicators button.is-active {
  width: 22px;
  background: #2563eb;
}

.lesson-center-home-page .lesson-center-page-heading {
  padding: 6px 2px 2px;
}

.lesson-center-home-page .lesson-center-news-list {
  display: grid;
  gap: 12px;
}

.lesson-center-home-page .lesson-center-timetable-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lesson-center-home-page .lesson-center-timetable-week-nav {
  display: flex;
  gap: 6px;
}

.lesson-center-home-page .lesson-center-timetable-week-nav button {
  width: 34px;
  height: 34px;
  padding: 0 0 2px;
  color: #2563eb;
  background: #eaf1ff;
  border: 0;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.lesson-center-home-page .lesson-center-timetable-week-nav button:disabled {
  color: #b6c2d4;
  background: #f1f5fb;
  cursor: default;
}

.lesson-center-home-page .lesson-center-timetable-card {
  padding: 16px 14px 14px;
  background: #ffffff;
  border: 1px solid #e8edf4;
  border-radius: 18px;
}

.lesson-center-home-page .lesson-center-timetable-court-filter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
  color: #64748b;
  font-size: var(--font-caption-1);
  font-weight: 800;
}

.lesson-center-home-page .lesson-center-timetable-court-filter select {
  min-width: 116px;
  height: 36px;
  padding: 0 32px 0 12px;
  color: #334155;
  background-color: #f8fafc;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  font-weight: 800;
}

.lesson-center-home-page .lesson-center-timetable-grid {
  display: grid;
  grid-template-columns: 40px repeat(7, 1fr);
  gap: 3px;
}

.lesson-center-home-page .lesson-center-timetable-day {
  padding: 2px 0 7px;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.lesson-center-home-page .lesson-center-timetable-day b {
  display: block;
  margin-top: 1px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
}

.lesson-center-home-page .lesson-center-timetable-day.is-today,
.lesson-center-home-page .lesson-center-timetable-day.is-today b {
  color: #2563eb;
}

.lesson-center-home-page .lesson-center-timetable-day.is-outside {
  opacity: 0.35;
}

.lesson-center-home-page .lesson-center-timetable-time {
  align-self: center;
  padding-right: 7px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-align: right;
}

.lesson-center-home-page .lesson-center-timetable-cell {
  min-width: 0;
  min-height: 38px;
  display: grid;
  place-items: center;
  padding: 4px 2px;
  color: transparent;
  background: #f7f9fc;
  border: 0;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  word-break: keep-all;
}

.lesson-center-home-page .lesson-center-timetable-cell.is-outside {
  background: #fafbfd;
}

.lesson-center-home-page button.lesson-center-timetable-cell {
  font: inherit;
  cursor: pointer;
}

.lesson-center-home-page .lesson-center-timetable-cell.is-available {
  color: #047857;
  background: #dff7ed;
  box-shadow: inset 0 0 0 1px #b9ead7;
}

.lesson-center-home-page .lesson-center-timetable-cell.is-pending {
  color: #9a5a00;
  background: #fff2cf;
  box-shadow: inset 0 0 0 1px #f4d68a;
}

.lesson-center-home-page .lesson-center-timetable-cell.is-confirmed {
  color: #ffffff;
  background: #2563eb;
  box-shadow: inset 0 0 0 1px #1d4ed8;
}

.lesson-center-home-page .lesson-center-timetable-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 12px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.lesson-center-home-page .lesson-center-timetable-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lesson-center-home-page .lesson-center-timetable-legend i {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 3px;
}

.lesson-center-home-page .lesson-center-timetable-legend i.is-available {
  background: #dff7ed;
  border: 1px solid #b9ead7;
}

.lesson-center-home-page .lesson-center-timetable-legend i.is-pending {
  background: #fff2cf;
  border: 1px solid #f4d68a;
}

.lesson-center-home-page .lesson-center-timetable-legend i.is-confirmed {
  background: #2563eb;
}

.lesson-center-home-page .lesson-center-timetable-empty-note {
  margin-top: 8px;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.lesson-center-home-page .lesson-center-news-card {
  min-height: 96px;
  padding: 18px;
}

.lesson-center-home-page .lesson-center-empty-state {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 46px 22px;
  color: #64748b;
  text-align: center;
  background: #ffffff;
  border: 1px solid #e8edf4;
  border-radius: 18px;
}

.lesson-center-home-page .lesson-center-empty-state.is-compact {
  min-width: calc(100vw - 40px);
  padding: 32px 18px;
}

.lesson-center-home-page .lesson-center-empty-state > span {
  color: #2563eb;
  font-size: 11px;
  font-weight: 900;
}

.lesson-center-home-page .lesson-center-empty-state strong {
  color: #334155;
  font-size: 16px;
  font-weight: 900;
}

.lesson-center-home-page .lesson-center-empty-state p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.lesson-center-home-page .lesson-center-info-board {
  display: grid;
  gap: 0;
}

.lesson-center-home-page .lesson-center-place-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 17px 0;
  color: #334155;
  border: 0;
  border-bottom: 1px solid #edf1f6;
  font-size: 15px;
}

.lesson-center-home-page .lesson-center-place-row:first-child {
  padding-top: 0;
}

.lesson-center-home-page .lesson-center-place-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.lesson-center-home-page .lesson-center-place-row[hidden] {
  display: none;
}

.lesson-center-home-page .lesson-center-place-row-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--primary);
  background: var(--primary-tint);
  border-radius: 12px;
}

.lesson-center-home-page .lesson-center-place-row strong,
.lesson-center-home-page .lesson-center-place-row p,
.lesson-center-home-page .lesson-center-place-row a {
  margin: 0;
  color: #334155;
  word-break: break-word;
  white-space: pre-line;
}

.lesson-center-home-page .lesson-center-copy-line {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 10px;
}

.lesson-center-home-page .lesson-center-copy-line > strong,
.lesson-center-home-page .lesson-center-copy-line > .lesson-center-info-link {
  min-width: 0;
}

.lesson-center-home-page .lesson-center-copy-button {
  width: auto;
  min-width: max-content;
  min-height: 24px;
  padding: 0;
  color: var(--mute);
  background: transparent;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  cursor: pointer;
}

.lesson-center-home-page .lesson-center-copy-button:hover,
.lesson-center-home-page .lesson-center-copy-button:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lesson-center-home-page .lesson-center-copy-button:disabled {
  color: var(--green);
  cursor: default;
}

.lesson-center-home-page .lesson-center-social-links {
  display: grid;
  gap: 3px;
}

.lesson-center-home-page .lesson-center-social-links .lesson-center-info-link {
  width: fit-content;
  color: #2563eb;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.lesson-center-home-page .lesson-center-social-links .lesson-center-info-link:hover,
.lesson-center-home-page .lesson-center-social-links .lesson-center-info-link:focus-visible {
  text-decoration: underline;
}

.lesson-center-home-page .lesson-center-price-lines,
.lesson-center-home-page .lesson-center-price-group,
.lesson-center-home-page .lesson-center-price-item-list {
  display: grid;
  gap: 9px;
}

.lesson-center-home-page .lesson-center-price-lines > div {
  display: grid;
  /* "레슨 안내"·"대관 안내" 라벨은 왼쪽 아이콘 칸으로 빼고, 항목은 다른 행과 같은 위치에서 시작 */
  margin-left: -58px;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 0;
}

.lesson-center-home-page .lesson-center-price-item {
  display: flex;
  position: relative;
  isolation: isolate;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.lesson-center-home-page .lesson-center-price-item i {
  display: none;
}

/* 내용 ------ 금액 : 점선으로 연결해 금액 매칭이 잘 보이게 */
.lesson-center-home-page .lesson-center-price-item::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 5px;
  left: 0;
  z-index: 0;
  border-bottom: 1px dashed #cbd5e1;
}

.lesson-center-home-page .lesson-center-price-item b {
  flex: none;
  padding-left: 6px;
  background: var(--surface, #ffffff);
}

/* 금액이 없는 항목은 점선도 표시하지 않음 */
.lesson-center-home-page .lesson-center-price-item:not(:has(b))::after {
  display: none;
}

/* 요금 항목은 위치·영업시간·전화와 크기·색·굵기·행간·자간까지 동일하게 한다. */
.lesson-center-home-page .lesson-center-price-item > span,
.lesson-center-home-page .lesson-center-price-item .lesson-center-price-item-label-text,
.lesson-center-home-page .lesson-center-price-item b,
.lesson-center-home-page .lesson-center-price-lines strong {
  color: #334155;
  font-size: var(--font-body-2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-body-2);
  letter-spacing: var(--tracking-body-2);
}

.lesson-center-home-page .lesson-center-price-item > span,
.lesson-center-home-page .lesson-center-price-item b {
  position: relative;
  z-index: 1;
}

.lesson-center-home-page .lesson-center-price-item > span {
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: normal;
}

.lesson-center-home-page .lesson-center-price-item-label-text {
  padding-right: 6px;
  background: var(--surface, #ffffff);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.lesson-center-home-page .lesson-center-price-item.is-single-line > span {
  white-space: nowrap;
}

@media (max-width: 480px) {
  .lesson-center-home-page .lesson-center-price-item {
    gap: 6px;
  }

}

.lesson-center-home-page .lesson-center-inquiry-cta {
  position: fixed;
  right: 16px;
  bottom: calc(var(--bottom-tabbar-height) + 12px);
  left: 16px;
  z-index: 42;
  width: min(calc(100% - 32px), 728px);
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0 auto;
  padding: 0 20px;
  color: #ffffff;
  background: #2563eb;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.28);
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
}

.lesson-center-home-page .lesson-center-inquiry-cta svg {
  width: 21px;
  height: 21px;
}

.lesson-center-home-page .lesson-center-inquiry-panel {
  width: min(calc(100% - 24px), 480px);
  height: fit-content;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: #0f172a;
  background: #f5f7fb;
  border: 0;
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
}

.lesson-center-home-page .lesson-center-inquiry-panel::backdrop {
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(5px);
}

.lesson-center-home-page .lesson-center-inquiry-shell {
  max-height: calc(100dvh - 24px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.lesson-center-home-page .lesson-center-inquiry-header {
  min-height: 74px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: #ffffff;
  border-bottom: 1px solid #e8edf4;
}

.lesson-center-home-page .lesson-center-inquiry-close-button {
  justify-self: end;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}

.lesson-center-home-page .lesson-center-inquiry-form {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 14px;
  overflow-y: auto;
  padding: 20px 22px 20px;
}

.lesson-center-home-page .lesson-center-inquiry-form label,
.lesson-center-home-page .lesson-center-inquiry-type legend {
  display: grid;
  gap: 8px;
  color: #334155;
  font-size: 13px;
  font-weight: 850;
}

.lesson-center-home-page .lesson-center-inquiry-form input,
.lesson-center-home-page .lesson-center-inquiry-form textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 14px;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  outline: none;
}

.lesson-center-home-page .lesson-center-inquiry-form textarea {
  min-height: 120px;
  resize: vertical;
}

.lesson-center-home-page .lesson-center-inquiry-form input:focus,
.lesson-center-home-page .lesson-center-inquiry-form textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.lesson-center-home-page .lesson-center-inquiry-type {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.lesson-center-home-page .lesson-center-inquiry-type > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
  padding: 5px;
  background: #e9eef6;
  border-radius: 12px;
}

.lesson-center-home-page .lesson-center-inquiry-type button {
  width: 100%;
  min-height: 44px;
  grid-column: auto;
  justify-self: stretch;
  color: #64748b;
  background: transparent;
  border: 0;
  border-radius: 9px;
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.lesson-center-home-page .lesson-center-inquiry-type button.is-active {
  color: #2563eb;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
}

.lesson-center-home-page .lesson-center-hidden-select {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.lesson-center-home-page .lesson-center-privacy-note {
  margin: -2px 0 0;
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.55;
}

.lesson-center-home-page .lesson-center-inquiry-submit {
  width: 100%;
  margin-top: 4px;
  min-height: 56px;
  grid-column: auto;
  justify-self: stretch;
  color: #ffffff;
  background: #2563eb;
  border: 0;
  border-radius: 13px;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.24);
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
}

.lesson-center-home-page .lesson-center-page-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottom-tabbar-height) + 84px);
  z-index: 120;
  width: max-content;
  max-width: calc(100% - 40px);
  padding: 12px 16px;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.92);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 750;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.lesson-center-home-page .lesson-center-page-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.lesson-center-home-page.is-inquiry-open {
  overflow: hidden;
}

.lesson-center-home-page .coach-detail-dialog,
.lesson-center-home-page .lesson-center-notice-dialog {
  color: #0f172a;
}

@media (min-width: 761px) {
  .lesson-center-home-page .lesson-center-empty-state.is-compact {
    min-width: 360px;
  }
}

@media (max-width: 640px) {
  .lesson-center-home-page .lesson-center-detail-topbar {
    min-height: 58px;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    padding: 7px 14px;
  }

  .lesson-center-home-page .lesson-center-icon-button {
    width: 40px;
    height: 40px;
  }

  .lesson-center-home-page .lesson-center-home-hero {
    padding: 14px 16px 0;
  }

  .lesson-center-home-page .lesson-center-hero-card {
    aspect-ratio: 48 / 31;
    min-height: 0;
  }

  .lesson-center-home-page .lesson-center-place-tabs {
    top: 58px;
    margin: 0 -16px;
    padding: 0 16px;
  }

  .lesson-center-home-page .lesson-center-quick-action span {
    width: 48px;
    height: 48px;
  }

  .lesson-center-home-page .lesson-center-view-panel {
    gap: 16px;
    padding: 18px 16px;
  }

  .lesson-center-home-page .lesson-center-summary-card,
  .lesson-center-home-page .lesson-center-home-facts,
  .lesson-center-home-page .lesson-center-info-board {
    padding: 19px;
  }

  .lesson-center-home-page .lesson-center-coach-list {
    margin: 0 -16px;
    padding: 0 16px 8px;
  }

  .lesson-center-home-page .lesson-center-notice-item,
  .lesson-center-home-page .lesson-center-news-card {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .lesson-center-home-page .lesson-center-news-card {
    grid-template-columns: 52px minmax(0, 1fr);
    padding: 14px;
  }

  .lesson-center-home-page .lesson-center-notice-date {
    width: 52px;
    height: 52px;
  }

  .lesson-center-home-page .lesson-center-notice-badge,
  .lesson-center-home-page .lesson-center-news-card em {
    display: none;
  }

  .lesson-center-home-page .lesson-center-inquiry-form {
    padding: 18px 16px 18px;
  }
}

/* 소식(#lesson-center-news)은 홈 패널 안의 일반 섹션 — 코치 소개 위에 마크업으로 배치됨.
   탭은 홈/사진 2개뿐이고, 탭 전환은 .lesson-center-view-panel[hidden] 규칙이 담당한다.
   display:contents / 강제 표시 / order 재배치로 패널 숨김을 덮어쓰지 말 것 —
   ID 우선순위가 [hidden]을 이겨서 사진 탭에 홈 내용이 새어나온다. */

/* Lesson/club redesign - mobile app tone */
.lesson-centers-page,
.lesson-centers-page .app {
  color: var(--ink);
  background: var(--bg);
}

.lesson-centers-page .lesson-centers-workspace {
  width: min(100%, 760px);
  min-height: 100dvh;
  display: grid;
  align-content: start;
  justify-items: stretch;
  gap: 24px;
  margin: 0 auto;
  padding: 34px 30px calc(var(--bottom-tabbar-height) + 38px);
  background: var(--bg);
}

.lesson-centers-page .lesson-centers-topbar {
  width: 100%;
  min-height: 86px;
  align-items: center;
}

.lesson-centers-page .home-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

.lesson-centers-page .home-brand-logo {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  box-shadow: none;
}

.lesson-centers-page .home-brand-name {
  min-width: 0;
  color: var(--ink);
  font-size: clamp(20px, 5vw, 24px);
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.lesson-centers-page .home-top-actions {
  gap: 14px;
}

.lesson-centers-page .home-message-button {
  width: 52px;
  height: 52px;
  color: #334155;
  background: transparent;
  border: 0;
  border-radius: 999px;
}

.lesson-centers-page .home-message-button svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lesson-centers-page .home-profile-link {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  background: #DCE8FF;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
}

.lesson-centers-page .home-profile-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lesson-centers-page .lesson-centers-content-stack {
  width: 100%;
  display: grid;
  justify-items: stretch;
  gap: 26px;
  margin-top: 0;
}

.lesson-centers-page .lesson-centers-content-stack > .lesson-center-search-section,
.lesson-centers-page .lesson-centers-content-stack > .home-notice-section,
.lesson-centers-page .lesson-centers-content-stack > .home-banner-section,
.lesson-centers-page .lesson-centers-content-stack > .lesson-centers-club-panel,
.lesson-centers-page .lesson-centers-content-stack > .lesson-center-list-panel {
  width: 100%;
}

.lesson-centers-page .lesson-centers-notice-section {
  display: none;
}

.lesson-center-search-section {
  display: grid;
}

.lesson-center-search-box {
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  color: var(--mute);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

.lesson-center-search-box svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lesson-center-search-box input {
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
}

.lesson-center-search-box input::placeholder {
  color: var(--mute);
}

.lesson-centers-page .lesson-center-list-panel,
.lesson-centers-page .lesson-centers-club-panel {
  display: grid;
  gap: 16px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.lesson-centers-page .lesson-center-list-header,
.lesson-centers-page .lesson-centers-club-panel .club-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 8px;
}

.lesson-centers-title-row {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.lesson-centers-page .lesson-center-list-header h2,
.lesson-centers-page .club-list-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(19px, 5vw, 22px);
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.lesson-centers-page .lesson-center-count {
  min-width: 0;
  height: auto;
  display: none;
  padding: 0;
  color: var(--sub);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.05;
}

.lesson-centers-page .lesson-center-list-actions {
  width: auto;
  display: flex;
  justify-content: flex-end;
}

.lesson-centers-page .lesson-center-open-register,
.lesson-centers-page .lesson-centers-club-panel .club-create-toggle {
  min-width: 0;
  min-height: 0;
  padding: 11px 18px;
  color: var(--primary);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.lesson-centers-page .lesson-center-list,
.lesson-centers-page .club-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.lesson-centers-page .lesson-center-card,
.lesson-centers-page .club-card {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  min-height: 166px;
  padding: 26px 34px;
  background: var(--surface);
  border: 0;
  border-radius: 30px;
  box-shadow: var(--shadow-card);
}

.lesson-centers-page .lesson-center-card.is-active {
  border: 0;
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.12);
}

.lesson-centers-page .lesson-center-card-image,
.lesson-centers-page .club-card-logo {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0;
  box-shadow: none;
  object-fit: cover;
}

.lesson-centers-page .lesson-center-card-image {
  background: #2C9362;
  border-radius: 22px;
}

.lesson-centers-page .lesson-center-card-image.has-image {
  background: #F1F5F9;
}

.lesson-centers-page .lesson-center-card-image.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lesson-centers-page .lesson-center-card-image.has-default-sport-image img {
  object-position: center;
}

.lesson-centers-page .lesson-center-card-image.has-court-icon {
  background: #2C9362;
}

.lesson-center-court-icon svg {
  width: 64px;
  height: 64px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lesson-centers-page .lesson-center-card-main,
.lesson-centers-page .club-card-copy {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.lesson-centers-page .lesson-center-card-main strong,
.lesson-centers-page .club-card strong {
  display: block;
  margin: 0;
  color: var(--ink);
  font-size: clamp(16px, 4.2vw, 19px);
  font-weight: 950;
  line-height: 1.12;
}

.lesson-centers-page .lesson-center-card-meta,
.lesson-centers-page .club-card-detail {
  margin: 0;
  color: var(--sub);
  font-size: clamp(13px, 3.4vw, 15px);
  font-weight: 650;
  line-height: 1.35;
}

/* 남/여 멤버 수 묶음 — 좁은 화면에서 글자 중간이 꺾이지 않고 통째로 내려간다 */
.club-card-member-split {
  white-space: nowrap;
}

.lesson-centers-page .lesson-center-card-chips,
.lesson-centers-page .club-card-chip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.lesson-centers-page .lesson-center-card-chips > span,
.lesson-centers-page .club-card-chip {
  min-height: 38px;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  color: var(--primary);
  background: var(--primary-tint);
  border: 0;
  border-radius: 999px;
  font-size: clamp(11px, 3vw, 13px);
  font-weight: 850;
}

.lesson-centers-page .lesson-center-card-chips > span:nth-child(2) {
  color: var(--green);
  background: var(--green-soft);
}

.lesson-centers-page .lesson-center-card-actions,
.lesson-centers-page .club-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.lesson-centers-page .lesson-center-card-actions .primary-button,
.lesson-centers-page .club-join-button {
  min-width: 110px;
  min-height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  color: #fff;
  background: linear-gradient(135deg, #3B7BFF 0%, var(--primary-dark) 100%);
  border: 0;
  border-radius: 20px;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
  font-size: clamp(14px, 3.6vw, 16px);
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.lesson-centers-page .lesson-center-card-actions .danger-button {
  min-width: 76px;
  min-height: 48px;
  color: #DC2626;
  background: #FEF2F2;
  border: 0;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 900;
}

.lesson-centers-page .club-card {
  grid-template-columns: 116px minmax(0, 1fr) auto;
}

.lesson-centers-page .club-card-link {
  display: contents;
  color: inherit;
  text-decoration: none;
}

.lesson-centers-page .club-card-main {
  display: contents;
}

.lesson-centers-page .club-card-logo {
  color: #A16207;
  background: #FFE7B8;
  border-radius: 999px;
  font-size: 25px;
  font-weight: 950;
}

.lesson-centers-page .club-card:nth-child(even) .club-card-logo-placeholder {
  color: var(--green);
  background: #D8F1E4;
}

.lesson-centers-page .club-card-logo[src] {
  background: #F8FAFC;
}

.lesson-centers-page .club-card-chip {
  color: var(--sub);
  background: #F1F5F9;
}

.lesson-centers-page .lesson-centers-banner-section {
  display: grid;
}

.lesson-centers-page .lesson-centers-banner-section .home-banner {
  position: relative;
  min-height: 124px;
  grid-template-columns: 1fr;
  overflow: hidden;
  color: #fff;
  /* 기본 배너 공통 배경(시안 B) — 노란 공·라켓줄 장식 제거 (2026-07-26) */
  background:
    radial-gradient(circle 86px at 89% 13%, rgba(255, 255, 255, 0.34), transparent),
    radial-gradient(circle 54px at 75% 86%, rgba(255, 255, 255, 0.34), transparent),
    linear-gradient(135deg, #0052CC 0%, #0066FF 55%, #4F8DFD 100%);
  border: 0;
  border-radius: 28px;
  box-shadow: var(--shadow-card);
}

.lesson-centers-page .lesson-centers-banner-section .home-banner-copy,
.lesson-centers-page .lesson-centers-banner-section .home-banner.has-no-image .home-banner-copy {
  min-height: 124px;
  align-content: center;
  gap: 8px;
  padding: 24px 34px;
}

.lesson-centers-page .lesson-centers-banner-section .home-banner-copy span {
  display: none;
}

.lesson-centers-page .lesson-centers-banner-section .home-banner-copy strong {
  max-width: 520px;
  color: #fff;
  font-size: clamp(18px, 4.6vw, 22px);
  font-weight: 950;
  line-height: 1.18;
}

.lesson-centers-page .lesson-centers-banner-section .home-banner-copy p {
  max-width: 520px;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(13px, 3.4vw, 15px);
  font-weight: 650;
}

.lesson-centers-page .lesson-centers-banner-section .home-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lesson-centers-page .lesson-centers-banner-section .home-banner:not(.is-image-only) img {
  display: none;
}

.lesson-centers-page .lesson-centers-banner-section .home-banner.is-image-only img {
  min-height: 124px;
}

.lesson-centers-page .club-inline-form {
  margin: 0;
  padding: 18px;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.lesson-centers-page .empty-state,
.lesson-centers-page .lesson-center-empty-card {
  padding: 28px;
  color: var(--sub);
  text-align: center;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

@media (max-width: 640px) {
  .lesson-centers-page .lesson-centers-workspace {
    padding: 26px 16px calc(var(--bottom-tabbar-height) + 30px);
    gap: 22px;
  }

  .lesson-centers-page .lesson-centers-topbar {
    min-height: 72px;
  }

  .lesson-centers-page .home-brand {
    gap: 12px;
  }

  .lesson-centers-page .home-brand-logo {
    width: 58px;
    height: 58px;
    border-radius: 15px;
  }

  .lesson-centers-page .home-brand-name {
    font-size: 21px;
  }

  .lesson-centers-page .home-message-button {
    width: 44px;
    height: 44px;
  }

  .lesson-centers-page .home-message-button svg {
    width: 28px;
    height: 28px;
  }

  .lesson-centers-page .home-profile-link {
    width: 52px;
    height: 52px;
  }

  .lesson-centers-page .lesson-centers-content-stack {
    gap: 22px;
  }

  .lesson-center-search-box {
    gap: 10px;
    padding: 11px 15px;
    border-radius: 14px;
  }

  .lesson-center-search-box svg {
    width: 18px;
    height: 18px;
  }

  .lesson-centers-page .lesson-center-list-header,
  .lesson-centers-page .lesson-centers-club-panel .club-list-header {
    flex-direction: row;
    align-items: center;
    padding: 0 2px;
  }

  .lesson-centers-page .lesson-center-list-actions {
    width: auto;
  }

  .lesson-centers-page .lesson-center-open-register,
  .lesson-centers-page .lesson-centers-club-panel .club-create-toggle {
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 11px 18px;
    border-radius: 14px;
  }

  .lesson-centers-page .lesson-center-count {
    min-width: 0;
    height: auto;
    font-size: 13px;
  }

  .lesson-centers-page .lesson-center-card,
  .lesson-centers-page .club-card {
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 14px;
    min-height: 120px;
    padding: 18px;
    border-radius: 24px;
  }

  .lesson-centers-page .lesson-center-card {
    grid-template-columns: 64px minmax(0, 1fr) 72px;
    gap: 10px;
    padding: 16px;
  }

  .lesson-centers-page .lesson-center-card-chips {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .lesson-centers-page .lesson-center-card-image,
  .lesson-centers-page .club-card-logo {
    width: 64px;
    height: 64px;
    border-radius: 17px;
  }

  .lesson-centers-page .club-card-logo {
    border-radius: 999px;
    font-size: 20px;
  }

  .lesson-center-court-icon svg {
    width: 46px;
    height: 46px;
    stroke-width: 3;
  }

  .lesson-centers-page .lesson-center-card-actions,
  .lesson-centers-page .club-card-actions {
    grid-column: auto;
    width: auto;
  }

  .lesson-centers-page .lesson-center-card-actions .primary-button,
  .lesson-centers-page .club-join-button {
    min-width: 78px;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 16px;
  }

  .lesson-centers-page .lesson-center-card-actions .primary-button {
    min-width: 72px;
    padding: 0 12px;
  }

  .lesson-centers-page .lesson-center-card-actions .danger-button {
    min-width: 58px;
    min-height: 42px;
  }

  .lesson-centers-page .lesson-centers-banner-section .home-banner,
  .lesson-centers-page .lesson-centers-banner-section .home-banner-copy,
  .lesson-centers-page .lesson-centers-banner-section .home-banner.has-no-image .home-banner-copy,
  .lesson-centers-page .lesson-centers-banner-section .home-banner.is-image-only img {
    min-height: 112px;
  }

  .lesson-centers-page .lesson-centers-banner-section .home-banner-copy,
  .lesson-centers-page .lesson-centers-banner-section .home-banner.has-no-image .home-banner-copy {
    padding: 20px 24px;
  }

}

/* Tournament redesign - mobile app tone */
.tournament-page-body,
.tournament-page {
  color: var(--ink);
  background: var(--bg);
}

.tournament-page .tournament-workspace {
  width: min(100%, 760px);
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  justify-items: stretch;
  gap: 34px;
  margin: 0 auto;
  padding: 34px 30px calc(var(--bottom-tabbar-height) + 42px);
  background: var(--bg);
}

.tournament-page .tournament-topbar {
  width: 100%;
  min-height: 0;
  grid-column: auto;
  justify-self: stretch;
  align-items: center;
}

.tournament-page .home-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

.tournament-page .home-brand-logo {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  box-shadow: none;
}

.tournament-page .home-brand-name {
  min-width: 0;
  color: var(--ink);
  font-size: clamp(20px, 5vw, 24px);
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.tournament-page .home-top-actions {
  gap: 14px;
}

.tournament-page .home-message-button {
  width: 52px;
  height: 52px;
  color: var(--mute);
  background: transparent;
  border: 0;
  border-radius: 999px;
}

.tournament-page .home-message-button svg {
  width: 27px;
  height: 27px;
  fill: currentColor;
  stroke: none;
}

.tournament-page .home-profile-link {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  background: #DCE8FF;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
}

.tournament-page .home-profile-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tournament-page .tournament-hero-stack {
  grid-column: auto;
  min-width: 0;
  display: grid;
  justify-items: stretch;
  margin-top: 0;
}

.tournament-page .tournament-banner-section,
.tournament-page .tournament-title-panel {
  width: 100%;
}

.tournament-page .tournament-banner-section .home-banner {
  position: relative;
  overflow: hidden;
  color: #fff;
}

.tournament-page .tournament-banner-section .home-banner-copy span {
  min-height: 44px;
  width: fit-content;
  align-items: center;
  padding: 0 20px;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 900;
}

.tournament-page .tournament-banner-section .home-banner-copy strong {
  color: #fff;
  font-size: clamp(20px, 5vw, 26px);
  font-weight: 950;
}

.tournament-page .tournament-banner-section .home-banner-copy p {
  color: rgba(255, 255, 255, 0.74);
  font-size: clamp(13px, 3.5vw, 16px);
  font-weight: 650;
}

.tournament-page .tournament-notice-icon {
  position: absolute;
  top: 50%;
  right: 54px;
  width: 62px;
  height: 62px;
  color: #fff;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(-50%);
  z-index: 1;
}

.tournament-page .tournament-banner-section .home-banner:not(.is-image-only) img {
  display: none;
}

.tournament-page .tournament-banner-section .home-banner.is-image-only {
  display: block;
  background: var(--surface);
}

.tournament-page .tournament-banner-section .home-banner.is-image-only .tournament-notice-icon {
  display: none;
}

.tournament-page .tournament-banner-section .home-banner.is-image-only img {
  width: 100%;
  height: clamp(150px, 32vw, 260px);
  object-fit: contain;
  background: var(--surface);
}

.tournament-list-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  /* 상단 추가 여백 제거 — 배너와의 간격은 workspace 간격(28px)만 쓴다 */
  padding: 0 10px;
}

.tournament-list-heading h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(19px, 5vw, 22px);
  font-weight: 950;
  line-height: 1.05;
}

.tournament-page .tournament-empty-panel {
  grid-column: auto;
  min-height: clamp(420px, 54dvh, 620px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 20px;
  padding: 48px 24px;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.tournament-page .tournament-empty-panel[hidden] {
  display: none;
}

.tournament-empty-icon {
  width: clamp(150px, 34vw, 210px);
  height: clamp(150px, 34vw, 210px);
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  background: transparent;
  border-radius: 50%;
}

.tournament-empty-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 50%;
}

.tournament-page .tournament-empty-panel strong {
  color: var(--ink);
  font-size: clamp(16px, 4.2vw, 19px);
  font-weight: 950;
  line-height: 1.15;
}

.tournament-page .tournament-empty-panel p {
  margin: -4px 0 10px;
  color: var(--sub);
  font-size: clamp(13px, 3.5vw, 15px);
  font-weight: 650;
  line-height: 1.35;
}

.tournament-empty-create-button {
  min-width: 194px;
  min-height: 72px;
  padding: 0 28px;
  border-radius: 22px;
  font-size: clamp(21px, 4.8vw, 29px);
  font-weight: 950;
}

.tournament-page .tournament-current-title-panel,
.tournament-page .tournament-view-tabs-panel,
.tournament-page .tournament-player-panel,
.tournament-page .tournament-main-panel {
  grid-column: auto;
  width: 100%;
}

.tournament-page .tournament-current-title-panel,
.tournament-page .tournament-player-panel,
.tournament-page .tournament-main-panel {
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

@media (max-width: 640px) {
  .tournament-page .tournament-workspace {
    gap: 28px;
    padding: 26px 16px calc(var(--bottom-tabbar-height) + 34px);
  }

  .tournament-page .tournament-topbar {
    min-height: 0;
  }

  .tournament-page .home-brand {
    gap: 12px;
  }

  .tournament-page .home-brand-logo {
    width: 58px;
    height: 58px;
    border-radius: 15px;
  }

  .tournament-page .home-brand-name {
    font-size: 21px;
  }

  .tournament-page .home-message-button {
    width: 44px;
    height: 44px;
  }

  .tournament-page .home-message-button svg {
    width: 27px;
    height: 27px;
  }

  .tournament-page .home-profile-link {
    width: 52px;
    height: 52px;
  }

  .tournament-page .tournament-banner-section .home-banner-copy span {
    min-height: 38px;
    padding: 0 16px;
  }

  .tournament-page .tournament-notice-icon {
    right: 34px;
    width: 48px;
    height: 48px;
  }

  .tournament-list-heading {
    padding: 0 10px;
  }

  .tournament-page .tournament-empty-panel {
    min-height: clamp(390px, 52dvh, 540px);
    gap: 16px;
    padding: 34px 14px;
  }

  .tournament-empty-icon {
    margin-bottom: 22px;
  }

  .tournament-empty-create-button {
    min-width: 162px;
    min-height: 62px;
    border-radius: 18px;
  }
}

/* Store redesign - mobile app tone */
.store-page,
.store-page .app {
  color: var(--ink);
  background: var(--bg);
}

.store-page .store-workspace {
  width: min(100%, 760px);
  min-height: 100dvh;
  display: grid;
  align-content: start;
  justify-items: stretch;
  gap: 24px;
  margin: 0 auto;
  padding: 34px 30px calc(var(--bottom-tabbar-height) + 42px);
  background: var(--bg);
}

.store-page .store-topbar {
  width: 100%;
  min-height: 0;
  align-items: center;
}

.store-page .home-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

.store-page .home-brand-logo {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  box-shadow: none;
}

.store-page .home-brand-name {
  min-width: 0;
  color: var(--ink);
  font-size: clamp(20px, 5vw, 24px);
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.store-page .home-top-actions {
  gap: 14px;
}

.store-page .home-message-button {
  width: 52px;
  height: 52px;
  color: var(--mute);
  background: transparent;
  border: 0;
  border-radius: 999px;
}

.store-page .home-message-button svg {
  width: 27px;
  height: 27px;
  fill: currentColor;
  stroke: none;
}

.store-page .home-profile-link {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  background: #DCE8FF;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
}

.store-page .home-profile-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-page .store-banner-section {
  display: none;
}

.store-page .store-panel {
  width: 100%;
  display: grid;
  gap: 26px;
  margin-top: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.store-page .store-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 10px;
}

.store-page .store-section-header h1 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: clamp(20px, 5vw, 24px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.01em;
}

.store-page .store-section-header p {
  margin: 0;
  color: var(--sub);
  font-size: clamp(13px, 3.5vw, 15px);
  font-weight: 650;
  line-height: 1.25;
}

.store-page .store-create-button {
  /* 모바일 전역 규칙(.primary-button width:100%)이 늘리지 못하게 고정 */
  width: auto;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 4px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: var(--font-title-3);
  line-height: var(--leading-title-3);
  letter-spacing: var(--tracking-title-3);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.store-page .store-filter-panel {
  min-width: 0;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

/* 대회·교류전과 같은 선택기: 흰 배경 한 칸만 세 버튼 사이를 이동한다. */
.store-page .store-filter-tabs {
  position: relative;
  isolation: isolate;
  --segment-offset: 0%;
  display: flex;
  gap: 0;
  width: 100%;
  min-width: 0;
  padding: 0;
  background: var(--bg);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
}

.store-page .store-filter-tabs::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(100% / 3);
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  pointer-events: none;
  transform: translateX(var(--segment-offset));
  transition: transform 280ms cubic-bezier(.22, .61, .36, 1);
}

.store-page .store-filter-tabs>button {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  padding: 0 8px;
  color: var(--sub);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow: none;
  font-family: inherit;
  font-size: var(--font-headline-2, 1.0625rem);
  line-height: var(--leading-headline-2, 1.45);
  font-weight: 700;
  white-space: nowrap;
}

.store-page .store-filter-tabs>button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.store-page .store-filter-tabs>button.is-active {
  color: var(--ink);
  background: transparent;
  border-color: transparent;
  font-weight: 800;
}

.store-page .store-filter-tabs:has(>button.is-active:nth-child(2)) {
  --segment-offset: 100%;
}

.store-page .store-filter-tabs:has(>button.is-active:nth-child(3)) {
  --segment-offset: 200%;
}

@media (prefers-reduced-motion: reduce) {
  .store-page .store-filter-tabs::before {
    transition: none;
  }
}

.store-page .store-list {
  display: grid;
}

.store-page .store-empty {
  display: grid;
  gap: 8px;
  padding: 44px 24px;
  color: var(--sub);
  text-align: center;
  background: var(--surface);
  border: 0;
  border-radius: 30px;
  box-shadow: var(--shadow-card);
}

.store-page .store-empty strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 950;
}

.store-page .store-empty span {
  color: var(--sub);
  font-size: 14px;
  font-weight: 650;
}

.store-page .store-card {
  grid-template-columns: 172px minmax(0, 1fr) auto;
}

.store-page .store-thumb {
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--primary);
  background: #F1F5F9;
  border: 0;
}

.store-page .store-thumb img {
  display: block;
}

.store-thumb-icon {
  position: relative;
}

.store-racket-icon {
  position: relative;
  width: 72px;
  height: 86px;
  display: block;
}

.store-racket-icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15px;
  width: 42px;
  height: 48px;
  border: 7px solid currentColor;
  border-radius: 50%;
}

.store-racket-icon::after {
  content: "";
  position: absolute;
  top: 44px;
  left: 32px;
  width: 8px;
  height: 42px;
  background: currentColor;
  border-radius: 999px;
}

.store-racket-icon i,
.store-racket-icon i::before,
.store-racket-icon i::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 999px;
}

.store-racket-icon i {
  top: 21px;
  left: 15px;
  width: 42px;
  height: 5px;
}

.store-racket-icon i::before {
  top: -16px;
  left: 16px;
  width: 5px;
  height: 37px;
}

.store-racket-icon i::after {
  top: -16px;
  left: 28px;
  width: 5px;
  height: 37px;
}

.store-ball-stack {
  display: grid;
  gap: 8px;
}

.store-ball-stack i {
  position: relative;
  width: 48px;
  height: 48px;
  display: block;
  background: var(--lime);
  border-radius: 50%;
}

.store-ball-stack i::before,
.store-ball-stack i::after {
  content: "";
  position: absolute;
  top: 9px;
  width: 9px;
  height: 30px;
  background: #fff;
  border-radius: 999px;
}

.store-ball-stack i::before {
  left: -1px;
}

.store-ball-stack i::after {
  right: -1px;
}

.store-grip-icon {
  position: relative;
  width: 54px;
  height: 100px;
  display: block;
  background: #D8E2EF;
  border-radius: 22px;
}

.store-grip-icon i,
.store-grip-icon i::before,
.store-grip-icon i::after {
  content: "";
  position: absolute;
  left: 9px;
  width: 38px;
  height: 5px;
  background: #fff;
  border-radius: 999px;
  transform: rotate(-14deg);
}

.store-grip-icon i {
  top: 26px;
}

.store-grip-icon i::before {
  top: 24px;
  left: 0;
}

.store-grip-icon i::after {
  top: 48px;
  left: 0;
}

.store-page .store-card-topline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.store-page .store-type,
.store-page .store-status {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  color: var(--primary);
  background: var(--primary-tint);
  border: 0;
  border-radius: 999px;
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 900;
}

.store-page .store-card .store-type {
  width: fit-content;
}

.store-page .store-type.is-group {
  color: var(--green);
  background: var(--green-soft);
}

.store-page .store-status {
  color: var(--sub);
  background: #F1F5F9;
}

.store-page .store-status.is-done {
  color: var(--amber);
  background: var(--amber-soft);
}

.store-page .store-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(16px, 4.2vw, 19px);
  overflow-wrap: anywhere;
}

.store-page .store-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--sub);
  font-size: clamp(13px, 3.4vw, 15px);
  font-weight: 650;
  line-height: 1.3;
}

.store-page .store-meta span {
  color: var(--sub);
  font: inherit;
}

.store-page .store-meta span + span::before {
  content: "·";
  margin-right: 8px;
}

.store-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}

.store-progress-track {
  height: 14px;
  overflow: hidden;
  background: #E8EEF7;
  border-radius: 999px;
}

.store-progress-track i {
  width: var(--store-progress, 0%);
  height: 100%;
  display: block;
  background: linear-gradient(135deg, #3B7BFF 0%, var(--primary-dark) 100%);
  border-radius: inherit;
}

.store-progress-row b {
  color: var(--primary);
  font-size: clamp(14px, 3.6vw, 16px);
  font-weight: 900;
  line-height: 1;
}

.store-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
}

.store-price-row strong {
  color: var(--ink);
  font-size: clamp(17px, 4.4vw, 20px);
  font-weight: 950;
  line-height: 1.05;
}

.store-price-row em {
  color: var(--amber);
  font-size: clamp(13px, 3.4vw, 15px);
  font-style: normal;
  font-weight: 800;
}

.store-page .store-card p {
  margin: 0;
  color: var(--sub);
  font-size: clamp(13px, 3.4vw, 15px);
  font-weight: 650;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.store-page .store-card-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--mute);
  font-size: 13px;
  font-weight: 750;
}

.store-page .store-card-footer a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 900;
}

.store-page .store-card-actions .ghost-button,
.store-page .store-card-actions .danger-button {
  min-width: 66px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 900;
}

@media (max-width: 640px) {
  .store-page .store-workspace {
    gap: 22px;
    padding: 26px 16px calc(var(--bottom-tabbar-height) + 34px);
  }

  .store-page .store-topbar {
    min-height: 0;
    margin-bottom: 2px;
  }

  .store-page .home-brand {
    gap: 12px;
  }

  .store-page .home-brand-logo {
    width: 58px;
    height: 58px;
    border-radius: 15px;
  }

  .store-page .home-brand-name {
    font-size: 21px;
  }

  .store-page .home-message-button {
    width: 44px;
    height: 44px;
  }

  .store-page .home-message-button svg {
    width: 27px;
    height: 27px;
  }

  .store-page .home-profile-link {
    width: 52px;
    height: 52px;
  }

  .store-page .store-section-header {
    padding: 0 10px;
  }

  .store-page .store-create-button {
    min-width: 0;
    min-height: 42px;
    padding: 0 4px;
  }

  .store-page .store-card {
    grid-template-columns: 118px minmax(0, 1fr);
  }

  .store-racket-icon {
    transform: scale(0.74);
  }

  .store-ball-stack {
    gap: 5px;
  }

  .store-ball-stack i {
    width: 35px;
    height: 35px;
  }

  .store-ball-stack i::before,
  .store-ball-stack i::after {
    top: 7px;
    width: 7px;
    height: 21px;
  }

  .store-grip-icon {
    transform: scale(0.78);
  }

  .store-page .store-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 스토어 상품 행: 사진, 희망 장소, 가격, 문의와 관심 수를 한눈에 표시 */

.store-page .store-card {
  grid-template-columns: 180px minmax(0, 1fr);
}

.store-page .store-card h3 {
  font-size: clamp(18px, 4vw, 23px);
  font-weight: 850;
}

.store-card-delete-button {
  position: absolute;
  top: 28px;
  right: 0;
  z-index: 1;
  width: auto;
  min-width: 52px;
  min-height: 34px;
  padding: 0 11px;
  color: #DC2626;
  background: #FFF0F0;
  border: 1px solid #FFCACA;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.store-card-delete-button:hover {
  background: #FFE3E3;
}

.store-location {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #8B909A;
  font-size: clamp(14px, 3.4vw, 17px);
  font-weight: 700;
  line-height: 1.35;
}

.store-page .store-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.store-page .store-price-row span {
  color: #64748B;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.store-page .store-price-row strong {
  font-size: clamp(21px, 4.8vw, 27px);
  font-weight: 900;
}

/* 할인 표기 — 원가는 윗줄에 취소선, 할인률은 받는 금액 앞에 붉게 (2026-08-03 사용자 요청).
   width:100% 로 원가가 제 줄을 차지해 할인률·금액이 아래로 내려간다(줄바꿈 태그 없이). */
.store-page .store-price-row s.store-price-before {
  width: 100%;
  color: #94A3B8;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: line-through;
}

.store-page .store-price-row em.store-discount-rate {
  color: var(--red);
  font-size: clamp(19px, 4.4vw, 24px);
  font-style: normal;
  font-weight: 900;
}

.store-page .store-card .store-card-description {
  margin: 0;
  color: #64748B;
  font-weight: 650;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.store-card-bottom {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.store-inquiry-button {
  width: auto;
  min-width: 0;
  min-height: 36px;
  margin: 0;
  padding: 0 13px;
  color: #fff;
  background: var(--primary);
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.store-inquiry-button:hover {
  background: var(--primary-dark);
}

.store-inquiry-button.is-sent,
.store-inquiry-button:disabled {
  color: #64748B;
  background: #E9EEF5;
  cursor: default;
}

.store-group-action-button {
  width: auto;
  min-width: 0;
  min-height: 36px;
  padding: 0 13px;
  color: #fff;
  background: #0F8A5F;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.store-group-action-button:hover {
  background: #0A704D;
}

.store-group-action-button:disabled {
  color: #64748B;
  background: #E9EEF5;
  cursor: default;
}

.store-like-button {
  position: static;
  min-width: 40px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 5px;
  margin-left: 0;
  padding: 0;
  color: #9CA3AF;
  background: transparent;
  border: 0;
}

.store-like-button span {
  font-size: 25px;
  line-height: 1;
}

.store-like-button b {
  min-width: 12px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.store-like-button.is-liked {
  color: #EF476F;
}

.store-group-progress {
  display: grid;
  gap: 7px;
  margin-top: 2px;
}

/* 참여 현황(0/30회)은 진행 막대 오른쪽 끝에 — 단계 글자를 뺀 뒤 왼쪽에 덩그러니
   남아 있었다. 자식이 하나뿐이라 space-between 은 왼쪽에 붙인다. (2026-08-03 사용자 요청) */
.store-group-progress-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: #64748B;
  font-size: 13px;
  font-weight: 800;
}

.store-group-progress-head b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.store-group-stage {
  width: fit-content;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  color: #0F6D4E;
  background: #E6F7EF;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.store-group-stage.is-payment {
  color: #9A5C00;
  background: #FFF3D1;
}

.store-group-stage.is-purchasing {
  color: #1D4ED8;
  background: #E8F0FF;
}

.store-group-stage.is-completed {
  color: #475569;
  background: #E9EEF5;
}

/* 카드 안의 단계 표시는 알약 배경 없이 글자만 — 카드가 뱃지투성이가 되지 않게.
   (참여 창 요약의 알약은 그대로 둔다. 2026-08-02 사용자 요청) */
.store-group-progress .store-group-stage {
  min-height: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.store-group-progress-track {
  height: 8px;
  overflow: hidden;
  background: #E8EEF7;
  border-radius: 999px;
}

.store-group-progress-track i {
  width: var(--store-group-progress, 0%);
  height: 100%;
  display: block;
  background: #0F8A5F;
  border-radius: inherit;
}

.store-group-progress small {
  color: #B36A00;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.store-page .store-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: start;
  margin: 0;
}

.store-page .store-card-actions button {
  width: auto;
  flex: 0 0 auto;
}

.store-page .store-card-actions .store-group-manage-button,
.store-page .store-card-manage-row .store-group-manage-button {
  min-width: 76px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
}

/* 스토어 관리자 줄 — 신청 관리 왼쪽, 이용권/신청하기 오른쪽 한 줄. width:100% 로
   ♥ 줄 아래에 제 줄을 잡는다(.store-card-bottom 이 flex-wrap). (2026-08-06) */
.store-page .store-card-manage-row {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* 오른쪽 끝으로 미는 것은 margin-left:auto — justify-content:space-between 을 쓰면
   좁은 화면에서 줄이 바뀔 때 배지가 왼쪽으로 떨어진다. (360px + "입금 확인 30회"
   같은 긴 라벨에서 카드 밖으로 11px 삐져나오던 것을 줄바꿈으로 바꾼 뒤 발견) */
.store-page .store-card-manage-row .store-group-action-button {
  margin-left: auto;
}

/* ‼️ 두 버튼 다 제 글자만큼만 차지하게 고정한다. 안 하면 신청 관리가 primary-button
   기본값(width:100%)으로 늘어나려 해 둘이 비례로 쪼그라들고, 좁은 카드(187px)에서
   이용권 배지가 68px 필요한데 55px 로 잘렸다. (2026-08-06 사용자 신고)
   .store-card-actions button 이 같은 이유로 이미 쓰던 처방이다. */
.store-page .store-card-manage-row button {
  width: auto;
  flex: 0 0 auto;
}

/* 좁은 카드에서 자리를 다투는 쪽은 신청 관리다 — 이용권 숫자가 먼저 보여야 한다 */
.store-page .store-card-manage-row .store-group-manage-button {
  min-width: 0;
  padding: 0 8px;
}

.store-inquiry-dialog {
  width: min(520px, calc(100vw - 32px));
}

.store-inquiry-dialog > form {
  width: 100%;
  display: grid;
  gap: 18px;
  padding: 26px;
}

.store-inquiry-dialog .dialog-header {
  align-items: center;
  margin: 0;
}

.store-inquiry-dialog .dialog-header h2 {
  margin: 4px 0 0;
  font-size: 22px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.store-inquiry-message-field {
  display: grid;
  gap: 10px;
  color: var(--sub);
  font-size: 14px;
  font-weight: 850;
}

.store-inquiry-message-field textarea {
  width: 100%;
  min-height: 156px;
  resize: vertical;
  padding: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
}

.store-inquiry-dialog .dialog-actions {
  justify-content: flex-end;
  margin: 0;
}

.store-inquiry-dialog .dialog-actions .primary-button {
  width: auto;
  min-width: 132px;
  min-height: 42px;
  padding: 0 18px;
}

.store-group-apply-dialog {
  width: min(480px, calc(100vw - 32px));
}

.store-group-manage-dialog {
  width: min(680px, calc(100vw - 32px));
}

.store-group-apply-form,
.store-group-manage-body {
  display: grid;
  gap: 18px;
  padding: 24px;
}

.store-group-apply-form .dialog-header,
.store-group-manage-body .dialog-header {
  align-items: center;
  margin: 0;
}

.store-group-dialog-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 14px;
  color: #64748B;
  background: #F7F9FC;
  border: 1px solid #E3E8F0;
  border-radius: 8px;
}

/* display:flex 라 [hidden] 만으론 안 숨겨진다 — 스트링샵을 안 적은 글에서 감춘다 */
.store-group-dialog-summary[hidden] {
  display: none;
}

.store-group-dialog-summary strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

/* 참여 창 머리 — 상자를 걷고 제목 아래 부제(상호)·칩만 남긴다 (2026-08-03 사용자 요청).
   대표의 '신청 관리' 창(.store-group-manage-body)은 상자 그대로 쓴다. */
.store-group-apply-form .store-group-dialog-summary {
  gap: 8px;
  margin-top: -6px;
  padding: 0;
  background: transparent;
  border: 0;
}

.store-group-apply-form .store-group-dialog-summary strong {
  width: 100%;
  color: #64748B;
  font-size: 14px;
  font-weight: 750;
}

/* 작업 스트링샵 라벨 — 값(상호)을 강조하고 라벨은 작게 */
.store-group-shop-label {
  color: #64748B;
  font-size: 13px;
  font-weight: 850;
}

.store-group-dialog-summary small {
  width: 100%;
  color: #B36A00;
  font-size: 13px;
  font-weight: 800;
}

/* 참여 창 안의 공동구매 상세 — 카드에서 옮겨온 수거 일정·입금 현황·이용권 횟수.
   목록 카드는 판매글과 같은 항목만 두고, 자세한 건 참여할 때 읽는다. (2026-08-02) */
.store-group-dialog-detail {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  background: #FBFCFE;
  border: 1px solid #E9EDF5;
  border-radius: 8px;
}

.store-group-dialog-detail[hidden] {
  display: none;
}

/* 참여 창의 스트링 종류별 가격표 — 이름 왼쪽, 금액 오른쪽 (2026-08-03) */
/* 상자를 걷고 위 구분선으로만 나눈다 — 창의 상자를 결제 요약 하나로 줄였다 (2026-08-03) */
.store-group-price-list-slot {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.store-group-price-list-slot[hidden] {
  display: none;
}

.store-group-price-list {
  display: grid;
  gap: 9px;
}

.store-group-price-list strong {
  color: var(--sub);
  font-size: 14px;
  font-weight: 850;
}

/* 체크박스가 뭐 하는 건지 제목 옆에서 알려준다 (2026-08-03 사용자 요청) */
.store-group-price-list strong small {
  color: #94A3B8;
  font-size: 12px;
  font-weight: 750;
}

.store-group-price-list ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 이름 ------ 금액: 레슨장 요금 안내와 같은 점선 연결 (짝이 잘 보이게) */
.store-group-price-list .store-price-line {
  display: flex;
  position: relative;
  isolation: isolate;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.store-group-price-list .store-price-line::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 5px;
  left: 0;
  z-index: 0;
  border-bottom: 1px dashed #cbd5e1;
}

/* 금액이 없는 줄(안내 문구 등)은 점선도 긋지 않는다 */
.store-group-price-list .store-price-line:not(:has(b))::after {
  display: none;
}

.store-group-price-list .store-price-line > span,
.store-group-price-list .store-price-line > b {
  position: relative;
  z-index: 1;
  background: var(--surface, #ffffff);
  color: #334155;
  font-size: 14px;
  font-weight: 800;
}

.store-group-price-list .store-price-line > span {
  min-width: 0;
  padding-right: 6px;
  overflow-wrap: anywhere;
}

.store-group-price-list .store-price-line > b {
  flex: none;
  padding-left: 6px;
  color: var(--ink);
  font-weight: 900;
  white-space: nowrap;
}

/* 스트링 고르기 체크박스 — 이름 왼쪽에 붙인다. 금액이 있는 줄에만 있다 (2026-08-03) */
.store-group-price-list .store-price-line > span:has(.store-price-pick) {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* 전역 `input` 규칙이 min-height: 42px 를 걸어 height 를 이긴다 — 함께 풀어야 18px 이 된다 */
.store-group-price-list .store-price-pick {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
}

/* 줄 아무 데나 눌러도 골라진다 — 누를 수 있다는 걸 커서로 알린다 */
.store-group-price-list label.store-price-line {
  cursor: pointer;
}

.store-group-dialog-detail small {
  color: #64748B;
  font-size: 13px;
  font-weight: 800;
}

/* 이용할 횟수 라벨 줄 — 라벨 왼쪽, 그 횟수만큼의 금액 오른쪽 (2026-08-03) */
/* 이용할 횟수 — 라벨 한 줄 + 스테퍼(− n +). 전체 폭 입력칸이 만들던 빈 공간을 줄인다.
   (2026-08-03 사용자 요청, 시안 승인) */
.store-group-apply-quantity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.store-group-apply-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
}

.store-group-apply-stepper button {
  width: 38px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--primary);
  background: #fff;
  border: 0;
  border-radius: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.store-group-apply-stepper button:disabled {
  color: #C3CCDA;
  cursor: default;
}

/* 라벨과 "최대 n회"는 한 덩어리로 왼쪽에 — 사이에 금액이 끼어들지 않게 (2026-08-03) */
.store-group-apply-quantity-name {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.store-group-apply-quantity-name small {
  color: #64748B;
  font-size: 13px;
  font-weight: 750;
}

.store-group-apply-quantity-name small[hidden] {
  display: none;
}

/* 금액 계산 상자 — 배달앱 결제 요약처럼: 항목(원가)·횟수 나열, 점선 아래 총 할인받은
   금액, 실선 아래 결제예정금액. 라벨 옆 한 줄 금액을 대체한다. (2026-08-03 사용자 요청) */
.store-group-apply-pay {
  display: grid;
  gap: 10px;
  padding: 16px;
  background: #F7F9FC;
  border-radius: 12px;
}

/* display:grid 라 [hidden] 만으론 안 숨는다 — 이 코드베이스의 반복 함정 */
.store-group-apply-pay[hidden] {
  display: none;
}

.store-group-apply-pay > strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.store-group-apply-pay-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 750;
}

.store-group-apply-pay-row small {
  color: #94A3B8;
  font-size: 12px;
  font-weight: 750;
}

.store-group-apply-pay-row b {
  font-weight: 850;
}

.store-group-apply-pay-row.is-discount {
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1.5px dashed #D7DEEA;
  color: #534AB7;
  font-weight: 850;
}

.store-group-apply-pay-row.is-discount em {
  display: inline-block;
  padding: 1px 7px;
  color: #3C3489;
  background: #EEEDFE;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.store-group-apply-pay-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--ink);
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.store-group-apply-pay-total strong {
  font-size: 20px;
  font-weight: 900;
}

/* 차감 안내 — 파란 상자 대신 결제 요약 아래 작은 한 줄 (2026-08-03 사용자 요청) */
.store-group-apply-guide {
  margin: -8px 2px 0;
  color: #94A3B8;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.store-group-apply-guide[hidden] {
  display: none;
}

/* 스테퍼 가운데 숫자칸 — 전역 input 규칙(min-height 42px·테두리)을 눌러 38px 로 맞춘다.
   칸은 readonly 라 타이핑으로 못 바꾸고(2026-08-04), 브라우저 기본 스핀 버튼도 걷는다
   (−/+ 버튼과 겹친다). */
.store-group-apply-form .store-group-apply-stepper input[type="number"] {
  width: 46px;
  min-height: 38px;
  padding: 0;
  color: var(--ink);
  background: #fff;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-radius: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 850;
  appearance: textfield;
  -moz-appearance: textfield;
}

.store-group-apply-stepper input::-webkit-outer-spin-button,
.store-group-apply-stepper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.store-group-apply-message-field {
  display: grid;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.store-group-apply-message-label {
  color: var(--sub);
  font-size: 14px;
  font-weight: 850;
}

.store-group-apply-message-label small {
  color: #94A3B8;
  font-size: 12px;
  font-weight: 750;
}

.store-group-apply-message-field textarea {
  width: 100%;
  min-height: 58px;
  resize: vertical;
  padding: 13px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.store-group-apply-message-field textarea:focus {
  border-color: var(--primary);
  outline: 3px solid rgba(37, 99, 235, 0.12);
}

.store-group-apply-help {
  margin: -6px 0 0;
  color: #64748B;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

/* 문의하기는 왼쪽, 참여(긍정)는 오른쪽 — 프로젝트 버튼 배치 규칙 */
.store-group-apply-actions {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

/* 버튼이 줄 전체를 나눠 갖는다 — 참여(긍정)가 오른쪽·조금 더 넓게 (시안 승인 2026-08-03) */
.store-group-apply-actions button {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

/* 참여 버튼은 항상 오른쪽 끝에 — 앞 버튼이 몇 개든(신청 취소·문의하기) 밀려나지 않게 */
.store-group-apply-actions #storeGroupApplySubmitBtn {
  margin-left: auto;
  flex-grow: 1.6;
}

/* 입금 계좌 입력 — 은행명과 계좌번호를 나눠 받는다. 계좌번호만 따로 복사해야
   구매자가 은행 앱에 그대로 붙여넣을 수 있다. (2026-08-05 사용자 요청) */
.store-bank-field {
  display: grid;
  gap: 8px;
}

/* ‼️ display:grid 라 [hidden] 만으론 안 숨겨진다 — 이 코드베이스의 반복 함정.
   옆 칸들은 <label> 이라 공용 label[hidden] 규칙에 걸리지만 이 칸은 두 입력을 품는 <div> 다.
   게다가 store.js 는 저장할 때 .hidden 을 보므로, 안 숨으면 적은 계좌가 조용히 버려진다. */
.store-bank-field[hidden] {
  display: none;
}

.store-bank-field-label {
  color: var(--sub);
  font-size: 14px;
  font-weight: 850;
}

.store-bank-controls {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px;
}

/* ===== 입금하기 창 — 참여하면 계좌·내 입금액·참여자 아바타 (2026-08-05 사용자 요청) ===== */
.store-group-deposit-body {
  display: grid;
  gap: 13px;
}

.store-deposit-account {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  background: #F7F9FC;
  border-radius: 8px;
}

.store-deposit-account small {
  color: #64748B;
  font-size: 12px;
  font-weight: 800;
}

.store-deposit-account strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.store-deposit-missing {
  margin: 0;
  color: #9A5C00;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.5;
}

.store-deposit-amount {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: #64748B;
  font-size: 13px;
  font-weight: 800;
}

.store-deposit-amount b {
  color: var(--primary);
  font-size: 18px;
  font-weight: 900;
}

/* 계좌가 없으면 JS 가 숨긴다 — display 규칙이 있어야 [hidden] 이 확실히 먹는다 */
.store-deposit-copy-btn {
  width: 100%;
}

.store-deposit-copy-btn[hidden] {
  display: none;
}

.store-deposit-members {
  display: grid;
  gap: 8px;
}

.store-deposit-members-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
}

.store-deposit-members-head small {
  color: #64748B;
  font-size: 12px;
  font-weight: 800;
}

.store-deposit-avatars {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.store-deposit-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #E7EBF2;
}

span.store-deposit-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  font-size: 12px;
  font-weight: 850;
}

.store-deposit-guide {
  margin: 0;
  padding: 10px 12px;
  color: #B45309;
  background: #FFF3DE;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.5;
}

/* 회색 span 규칙(.store-group-member-copy span)보다 구체적이어야 색이 보인다 */
.store-group-member-copy .store-group-member-claimed {
  color: #1D4ED8;
}

/* 스트링 변경 요청 — 무엇이 무엇으로, 금액이 얼마에서 얼마로, 얼마를 주고받는지.
   한 줄로 압축하면 무슨 내용인지 안 읽힌다. (2026-08-05 사용자 요청) */
.store-group-member-copy .store-group-member-change {
  display: grid;
  gap: 3px;
  margin-top: 2px;
  padding: 9px 11px;
  background: #FFF7E6;
  border-radius: 10px;
}

.store-group-member-copy .store-group-member-change.is-refund {
  background: #EFF6FF;
}

.store-group-member-copy .store-group-member-change strong {
  color: #B45309;
  font-size: 11px;
  font-weight: 900;
}

.store-group-member-copy .store-group-member-change.is-refund strong {
  color: #1769E8;
}

.store-group-member-copy .store-group-member-change span {
  color: #92400E;
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.store-group-member-copy .store-group-member-change.is-refund span {
  color: #1D4ED8;
}

.store-group-member-copy .store-group-member-change b {
  font-weight: 950;
}

.store-group-member-copy .store-group-member-change-action {
  margin-top: 2px;
  padding-top: 5px;
  border-top: 1px solid #FCD9A0;
  font-size: 13px;
  font-weight: 900;
}

.store-group-member-copy .store-group-member-change.is-refund .store-group-member-change-action {
  border-top-color: #BFDBFE;
}

.store-group-member-list {
  max-height: min(52dvh, 520px);
  display: grid;
  gap: 10px;
  overflow-y: auto;
  padding-right: 3px;
}

.store-group-member-empty {
  padding: 28px 18px;
  color: #64748B;
  background: #F7F9FC;
  border: 1px solid #E3E8F0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

/* 상태 뱃지는 이름 줄 오른쪽 끝에 붙인다 — 제 줄을 차지하면 카드가 세 줄로 늘어나
   빈 공간만 커진다(2026-08-04 사용자 요청). 세로 가운데가 아니라 위 맞춤이라야
   회원 정보가 여러 줄이어도 이름과 나란히 선다. */
/* 뱃지가 이름 옆(strong 안)으로 들어가 오른쪽 칸이 없어졌다 — 1열.
   (2026-08-05 사용자 요청: "그 자리에 입금 확인 글자를") */
.store-group-member-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 8px 12px;
  padding: 13px 14px;
  background: #fff;
  border: 1px solid #E3E8F0;
  border-radius: 8px;
}

/* 이름 옆 뱃지 — 이름 줄 높이를 밀지 않게 한 단계 작게 */
.store-group-member-copy strong .store-group-member-status {
  min-height: 22px;
  margin-left: 2px;
  padding: 0 8px;
  font-size: 11px;
  vertical-align: 2px;
}

.store-group-member-card.is-canceled {
  opacity: 0.62;
  background: #F8FAFC;
}

.store-group-member-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.store-group-member-copy strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.store-group-member-copy span {
  color: #64748B;
  font-size: 13px;
  font-weight: 750;
}

.store-group-member-message {
  display: grid;
  gap: 3px;
  margin: 4px 0 0;
  padding: 9px 10px;
  color: #475569;
  background: #F7F9FC;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.store-group-member-message b {
  color: #0F6D4E;
  font-size: 11px;
  font-weight: 900;
}

.store-group-member-status {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  color: #0F6D4E;
  background: #E6F7EF;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.store-group-member-status.is-payment_pending {
  color: #9A5C00;
  background: #FFF3D1;
}

.store-group-member-status.is-paid {
  color: #1D4ED8;
  background: #E8F0FF;
}

.store-group-member-status.is-waitlisted,
.store-group-member-status.is-canceled {
  color: #64748B;
  background: #E9EEF5;
}

.store-group-member-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.store-group-member-actions button {
  width: auto;
  min-width: 88px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

.store-group-manage-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.store-group-manage-footer button {
  width: auto;
  min-width: 126px;
  min-height: 42px;
}

.store-group-manage-footer button:disabled {
  color: #64748B;
  background: #E9EEF5;
  border-color: #DCE3EC;
  cursor: default;
}

.store-service-pass-fields {
  display: grid;
  gap: 14px;
}

.store-service-pass-fields[hidden] {
  display: none;
}

.store-service-pass-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
}

.store-service-pass-guide {
  display: grid;
  gap: 6px;
  padding: 14px;
  color: #1E3A5F;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

/* display:grid 이라 [hidden] 만으론 안 숨겨진다 — 명시적으로 눌러준다
   (이용권이 아닌 공동구매 참여 창에서는 이 안내를 감춘다) */
.store-service-pass-guide[hidden] {
  display: none;
}

.store-service-pass-guide strong {
  color: #1D4ED8;
  font-size: 14px;
  font-weight: 950;
}

.store-service-pass-guide small {
  color: #64748B;
  font-size: 12px;
  font-weight: 750;
}

.store-service-pass-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 7px;
}

.store-service-pass-meta span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  color: #1D4ED8;
  background: #EFF6FF;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 850;
}

.store-service-pass-dialog {
  width: min(620px, calc(100vw - 32px));
}

.store-service-pass-form {
  display: grid;
  gap: 17px;
  padding: 24px;
}

.store-service-pass-form .dialog-header {
  align-items: center;
  margin: 0;
}

.store-service-pass-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: 8px;
}

.store-service-pass-stats > span {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 12px 10px;
  background: #F7F9FC;
  border: 1px solid #E3E8F0;
  border-radius: 10px;
  text-align: center;
}

.store-service-pass-stats > span.is-primary {
  background: #EFF6FF;
  border-color: #BFDBFE;
}

.store-service-pass-stats small {
  color: #64748B;
  font-size: 11px;
  font-weight: 850;
}

.store-service-pass-stats strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

.store-service-pass-stats b {
  color: #64748B;
  font-size: 10px;
  font-weight: 850;
}

.store-service-pass-stats .is-primary strong {
  color: #1769E8;
}

/* 예약·사용·남은 이용권은 셋이 한 줄 — 640px 이하에서 2칸으로 떨구던 규칙을
   이 창에서만 되돌린다. 개발자 창은 칸이 6개라 그대로 auto-fit 을 쓴다.
   (2026-08-05 사용자 요청) */
.store-service-pass-dialog .store-service-pass-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 이름표와 장소를 한 줄에 — 두 줄로 쓸 만큼의 정보가 아니다 (2026-08-05 사용자 요청) */
.store-service-pass-location {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px 14px;
  background: #F8FAFC;
  border-radius: 10px;
}

/* ‼️ display:flex 라 [hidden] 만으론 안 숨는다 — 연락처를 안 적은 글에서 감춘다 */
.store-service-pass-location[hidden] {
  display: none;
}

/* ===== 스트링 종류 변경 창 (2026-08-05 사용자 요청·시안 승인) ===== */
.store-string-change-body {
  display: grid;
  gap: 12px;
}

/* 이름표·안내 문구를 걷어 한 줄만 남았다 — small 규칙도 같이 걷었다 (2026-08-05) */
.store-string-change-current {
  padding: 11px 13px;
  background: #F7F9FC;
  border-radius: 10px;
}

.store-string-change-current strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.store-string-change-label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.store-string-change-list {
  display: grid;
  padding: 2px 12px;
  border: 1px solid #E3E8F0;
  border-radius: 12px;
}

.store-string-change-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.store-string-change-row + .store-string-change-row {
  border-top: 1px solid #F1F5F9;
}

.store-string-change-row span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-wrap: anywhere;
}

.store-string-change-row input {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

.store-string-change-row small {
  color: #94A3B8;
  font-size: 11px;
  font-weight: 800;
}

/* 지금 신청한 줄은 고를 수 없다 — 같은 걸 다시 고르는 요청은 의미가 없다 */
.store-string-change-row.is-current {
  color: #94A3B8;
}

.store-string-change-row.is-current b {
  color: #94A3B8;
}

.store-string-change-row.is-picked {
  color: #1D4ED8;
}

.store-string-change-diff {
  display: grid;
  gap: 6px;
  padding: 11px 12px;
  background: #FFF7E6;
  border-radius: 10px;
}

.store-string-change-diff[hidden] {
  display: none;
}

.store-string-change-diff.is-refund {
  background: #EFF6FF;
}

.store-string-change-diff div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: #B45309;
  font-size: 12px;
  font-weight: 800;
}

.store-string-change-diff.is-refund div {
  color: #1769E8;
}

.store-string-change-diff-total {
  padding-top: 7px;
  border-top: 1px solid #FCD9A0;
}

.store-string-change-diff.is-refund .store-string-change-diff-total {
  border-top-color: #BFDBFE;
}

.store-string-change-diff-total span {
  font-size: 13px;
  font-weight: 900;
}

.store-string-change-diff-total b {
  font-size: 15px;
  font-weight: 950;
}

.store-service-pass-location strong {
  flex: 0 0 auto;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

.store-service-pass-location span {
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.store-service-pass-location small {
  color: #64748B;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
}

.store-service-request-fields {
  display: grid;
  gap: 13px;
}

.store-service-request-fields[hidden] {
  display: none;
}

.store-service-request-fields label:not(.store-service-terms-check) {
  display: grid;
  gap: 7px;
  color: var(--sub);
  font-size: 13px;
  font-weight: 850;
}

.store-service-request-fields label small {
  color: #94A3B8;
  font-size: 11px;
}

.store-service-request-fields input[type="text"] {
  min-height: 46px;
  padding: 0 12px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
}

/* 체크칸과 글자는 한 줄에 — .reservation-form input 의 min-height:42px 가
   체크박스까지 늘려 줄을 밀어내므로 여기서 되돌린다. (2026-08-05 사용자 요청) */
.store-service-terms-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  color: #475569;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

.store-service-terms-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

.store-service-terms-check span {
  min-width: 0;
}

/* 스트링 종류 — 처음 고른 값으로 잠그고, 바꾸려면 옆 버튼으로 판매자에게 문의 */
.store-service-string-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.store-service-string-row input[type="text"] {
  flex: 1;
  min-width: 0;
}

.store-service-request-fields input[type="text"][readonly] {
  color: #475569;
  background: #F1F5F9;
}

.store-service-string-row button {
  flex: 0 0 auto;
  width: auto;
  min-height: 46px;
  padding: 0 12px;
  font-size: 13px;
  white-space: nowrap;
}

.store-service-request-history,
.store-service-pass-manage-section {
  display: grid;
  gap: 10px;
}

.store-service-request-history h3,
.store-service-pass-manage-section h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.store-service-request-list {
  max-height: min(42dvh, 440px);
  display: grid;
  gap: 10px;
  overflow-y: auto;
  padding-right: 3px;
}

.store-service-request-card {
  display: grid;
  gap: 8px;
  padding: 13px;
  background: #fff;
  border: 1px solid #E3E8F0;
  border-radius: 10px;
}

.store-service-request-card.is-canceled {
  opacity: 0.7;
  background: #F8FAFC;
}

.store-service-request-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.store-service-request-card-head strong {
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

/* 이름 옆 뱃지 — 스트링 이름은 아랫줄로 내려갔고 그 자리에 뱃지가 온다.
   (2026-08-05 사용자 요청) 옛 회색 span 규칙을 두면 뱃지 색을 덮는다. */
.store-service-request-card-head strong .store-service-request-status {
  min-height: 22px;
  margin-left: 2px;
  padding: 0 8px;
  font-size: 11px;
  vertical-align: 2px;
}

/* "수거할 라켓 n" — 판매자가 지금 해야 할 일 개수 (2026-08-05) */
.store-service-manage-count {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 8px;
  color: #B91C1C;
  background: #FEE2E2;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  vertical-align: 2px;
}

.store-service-request-card p,
.store-service-request-card small {
  margin: 0;
  color: #64748B;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.store-service-request-card small.is-error {
  color: #B42318;
}

.lesson-center-home-page .lesson-center-inquiry-type button:disabled {
  cursor: default;
}

.lesson-center-home-page .lesson-center-rental-booking-summary {
  display: grid;
  gap: 5px;
  padding: 14px 15px;
  color: #334155;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
}

.lesson-center-home-page .lesson-center-rental-booking-summary[hidden] {
  display: none;
}

.lesson-center-home-page .lesson-center-rental-booking-summary span,
.lesson-center-home-page .lesson-center-rental-booking-summary small {
  color: #64748b;
  font-size: var(--font-caption-1);
  font-weight: 750;
}

.lesson-center-home-page .lesson-center-rental-booking-summary strong {
  color: #1d4ed8;
  font-size: var(--font-body-2);
  line-height: var(--leading-body-2);
}

/* 스트링 공임 이용권 무인함 — 고객은 자기 단계의 칸과 비밀번호만 본다. */
.store-service-locker {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  border: 1px solid #BFDBFE;
  border-radius: 10px;
  background: #EFF6FF;
}

.store-service-locker.is-lower {
  border-color: #BBF7D0;
  background: #F0FDF4;
}

.store-service-locker.is-waiting {
  border-color: #E2E8F0;
  background: #F8FAFC;
}

.store-service-locker > span {
  color: #1D4ED8;
  font-size: 12px;
  font-weight: 900;
}

.store-service-locker.is-lower > span {
  color: #15803D;
}

.store-service-locker.is-waiting > span {
  color: #64748B;
}

.store-service-locker > strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.store-service-locker > strong b {
  margin-left: 5px;
  color: #1769E8;
  font-size: 20px;
  letter-spacing: 0.16em;
}

.store-service-locker.is-lower > strong b {
  color: #15803D;
}

.store-service-locker > small {
  color: #64748B;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.45;
}

.store-service-locker-input-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.store-service-locker-input-row input[type="text"] {
  min-width: 0;
  min-height: 42px;
  flex: 1;
  padding: 0 12px;
  border: 1px solid #93C5FD;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.store-service-locker.is-lower .store-service-locker-input-row input[type="text"] {
  border-color: #86EFAC;
}

.store-service-locker-input-row button {
  width: auto;
  min-height: 42px;
  flex: 0 0 auto;
  padding-inline: 14px;
}

.store-service-locker-input-row input:disabled,
.store-service-locker-input-row button:disabled {
  opacity: 0.55;
}

/* 맡김 예정 날짜 — 판매자가 수거 갈 날이라 카드 안에서 도드라져야 한다 */
.store-service-request-card small.store-service-dropoff-planned {
  color: #B45309;
  background: #FFF7E6;
  border-radius: 8px;
  padding: 7px 10px;
  font-weight: 800;
}

/* ===== 라켓 맡길 날짜 달력 (2026-08-05) ===== */
.store-service-dropoff-field {
  display: grid;
  gap: 8px;
}

.store-service-dropoff-label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.store-service-cal {
  display: grid;
  gap: 6px;
  padding: 12px;
  background: #fff;
  border: 1px solid #E3E8F0;
  border-radius: 12px;
}

.store-service-cal-schedule {
  color: #B45309;
  background: #FFF7E6;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
}

.store-service-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.store-service-cal-head strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.store-service-cal-nav {
  width: 30px;
  height: 30px;
  border: 1px solid #E3E8F0;
  border-radius: 8px;
  background: #fff;
  color: #64748B;
  font-size: 16px;
  line-height: 1;
}

.store-service-cal-nav:disabled {
  color: #CBD5E1;
}

.store-service-cal-week,
.store-service-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}

.store-service-cal-week span {
  color: #94A3B8;
  font-size: 11px;
  font-weight: 800;
  line-height: 22px;
}

.store-service-cal-week .is-sunday {
  color: #E24B4A;
}

.store-service-cal-week .is-saturday {
  color: #378ADD;
}

/* 수거하는 요일에 세로 띠 — 어느 요일에 가져가는지 달력에서 바로 보인다.
   띠는 z-index:-1 의 ::before 라 오늘 테두리·고른 날 파란 원이 그 위에 그려진다.
   그리드에 stacking context 를 주지 않으면 띠가 달력 흰 배경 뒤로 숨는다.
   (2026-08-05 사용자 요청) */
.store-service-cal-grid {
  position: relative;
  z-index: 0;
}

.store-service-cal-grid .is-pickup {
  position: relative;
}

.store-service-cal-grid .is-pickup::before {
  content: "";
  position: absolute;
  inset: -1px -4px;
  z-index: -1;
  background: #FFF3DE;
}

.store-service-cal-day {
  width: 34px;
  height: 34px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.store-service-cal-day:disabled {
  color: #CBD5E1;
}

.store-service-cal-day.is-today {
  border: 1px solid #0066FF;
  color: #0066FF;
}

.store-service-cal-day.is-picked {
  background: #0066FF;
  border: 0;
  color: #fff;
}

/* ===== 교체 진행 타임라인 ===== */
.store-service-timeline {
  display: grid;
  gap: 0;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.store-service-timeline li {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 0 0 24px;
  min-height: 26px;
  color: #94A3B8;
  font-size: 12px;
  font-weight: 750;
}

.store-service-timeline li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 8px;
  height: 8px;
  border: 2px solid #E3E8F0;
  border-radius: 50%;
  background: #fff;
}

.store-service-timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 17px;
  bottom: -5px;
  width: 2px;
  background: #E3E8F0;
}

.store-service-timeline li.is-done {
  color: var(--ink);
}

.store-service-timeline li.is-done::before {
  border-color: #0066FF;
  background: #0066FF;
}

.store-service-timeline li.is-done:not(:last-child)::after {
  background: #0066FF;
}

.store-service-timeline li.is-next {
  color: #0066FF;
}

.store-service-timeline li.is-next::before {
  border-color: #0066FF;
}

.store-service-timeline li small {
  color: #94A3B8;
  font-size: 11px;
}

.store-service-request-status {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 8px;
  color: #1D4ED8;
  background: #E8F0FF;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.store-service-request-status.is-returned {
  color: #0F6D4E;
  background: #E6F7EF;
}

.store-service-request-status.is-canceled,
.store-service-request-status.is-picked_up {
  color: #64748B;
  background: #E9EEF5;
}

.store-service-request-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.store-service-request-actions button {
  width: auto;
  min-width: 96px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

.developer-service-pass-dialog .store-group-manage-body {
  max-height: min(86dvh, 820px);
  overflow-y: auto;
}

.developer-store-actions .primary-button {
  min-height: 38px;
  padding: 0 12px;
  font-size: 13px;
}

.store-inquiry-message-field textarea:focus {
  border-color: var(--primary);
  outline: 3px solid rgba(37, 99, 235, 0.12);
}

@media (max-width: 640px) {

  .store-page .store-card {
    --store-mobile-thumb-size: clamp(104px, 31vw, 132px);
    grid-template-columns: var(--store-mobile-thumb-size) minmax(0, 1fr);
  }

  .store-card-delete-button {
    top: 20px;
    min-width: 48px;
    min-height: 32px;
    padding: 0 9px;
  }

  .store-location {
    gap: 6px;
    font-size: 13px;
  }

  .store-page .store-price-row span {
    font-size: 12px;
  }

  .store-page .store-price-row strong {
    font-size: 20px;
  }

  .store-inquiry-button {
    width: auto;
    min-width: 0;
    min-height: 34px;
    padding: 0 9px;
    font-size: 12px;
    white-space: nowrap;
  }

  .store-group-action-button {
    min-height: 34px;
    padding: 0 9px;
    font-size: 12px;
  }

  .store-like-button {
    min-width: 34px;
    min-height: 34px;
  }

  .store-like-button span {
    font-size: 23px;
  }

  .store-like-button b {
    font-size: 14px;
  }

  .store-page .store-card-actions {
    grid-column: auto;
  }

  .store-inquiry-dialog {
    width: calc(100vw - 32px);
  }

  .store-inquiry-dialog > form {
    gap: 16px;
    padding: 22px 20px;
  }

  .store-inquiry-dialog .dialog-header h2 {
    font-size: 20px;
  }

  .store-inquiry-message-field textarea {
    min-height: 144px;
    padding: 14px;
  }

  .store-inquiry-dialog .dialog-actions .primary-button {
    width: 100%;
  }

  .store-group-apply-dialog,
  .store-group-manage-dialog,
  .store-service-pass-dialog {
    width: calc(100vw - 28px);
  }

  .store-group-apply-form,
  .store-group-manage-body,
  .store-service-pass-form {
    gap: 15px;
    padding: 20px 18px;
  }

  .store-service-pass-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .store-service-pass-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .store-group-apply-message-field textarea {
    min-height: 58px;
  }

  /* 좁은 화면: 버튼이 두세 개(신청 취소·문의하기·참여)라 고정 2열이면 한 칸이 비어
     어색해진다. 남는 자리를 나눠 갖게 두고 참여 버튼만 오른쪽 끝을 지킨다. */
  .store-group-apply-actions button {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  /* 좁은 화면에서도 뱃지는 이름 줄 오른쪽에 둔다 — 1열로 떨구면 뱃지·버튼이 각각
     제 줄을 차지해 카드에 빈 공간이 생긴다. 이름은 min-width:0 + overflow-wrap 으로
     줄바꿈되니 뱃지에 밀리지 않는다. (2026-08-04 사용자 요청) */
  .store-group-member-status {
    width: fit-content;
  }

  .store-group-manage-footer {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .store-group-manage-footer button {
    width: 100%;
    min-width: 0;
  }
}

/* 관리자 대관 가능 시간 설정 */
.admin-page .rental-availability-admin-panel .section-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: var(--font-caption-1);
  line-height: var(--leading-caption-1);
}

.admin-page .rental-availability-form {
  display: grid;
  gap: 16px;
}

.admin-page .rental-availability-form > label,
.admin-page .rental-availability-form .form-grid > label,
.admin-page .rental-availability-weekdays legend {
  display: grid;
  gap: 8px;
  color: var(--text);
  font-size: var(--font-caption-1);
  font-weight: 800;
}

.admin-page .rental-availability-form .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-page .rental-availability-form input[type="date"],
.admin-page .rental-availability-form input[type="time"],
.admin-page .rental-availability-form select {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
}

.admin-page .rental-availability-court-field {
  display: grid;
  gap: 8px;
}

.admin-page .rental-availability-court-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-page .rental-availability-court-heading label {
  color: var(--text);
  font-size: var(--font-caption-1);
  line-height: var(--leading-caption-1);
  font-weight: 800;
}

.admin-page .rental-availability-court-add {
  min-width: 0;
  min-height: 30px;
  padding: 0 10px;
  color: var(--primary-dark);
  background: var(--primary-tint);
  border-color: #cfe0ff;
  font-size: var(--font-caption-2);
  line-height: var(--leading-caption-2);
}

.admin-page .rental-availability-court-picker {
  position: relative;
  min-width: 0;
}

.admin-page .rental-availability-court-toggle {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: left;
  font-weight: 700;
}

.admin-page .rental-availability-court-toggle:focus-visible {
  outline: 0;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(20, 124, 85, 0.14);
}

.admin-page .rental-availability-court-chevron {
  font-size: var(--font-body-1);
  line-height: 1;
}

.admin-page .rental-availability-court-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 2px);
  right: 0;
  left: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
}

.admin-page .rental-availability-court-menu[hidden] {
  display: none;
}

.admin-page .rental-availability-court-option {
  min-height: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: stretch;
  color: var(--text);
  background: #fff;
}

.admin-page .rental-availability-court-option + .rental-availability-court-option {
  border-top: 1px solid var(--line);
}

.admin-page .rental-availability-court-option.is-selected {
  color: #fff;
  background: #858585;
}

.admin-page .rental-availability-court-option > [data-rental-court-select] {
  min-width: 0;
  padding: 8px 14px;
  color: inherit;
  background: transparent;
  border: 0;
  text-align: left;
  font-weight: 700;
}

.admin-page .rental-availability-court-option-delete,
.admin-page .rental-availability-court-option-delete-spacer {
  width: 40px;
  min-height: 40px;
}

.admin-page .rental-availability-court-option-delete {
  padding: 0;
  display: inline-grid;
  place-items: center;
  color: #b42318;
  background: #fff1f0;
  border: 0;
  border-left: 1px solid #ffd0cc;
  font-size: var(--font-heading-2);
  line-height: var(--leading-heading-2);
  font-weight: 800;
}

.admin-page .rental-availability-court-option > button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--green);
  outline-offset: -3px;
}

.admin-page .rental-availability-save-button {
  width: 100%;
}

.admin-page .rental-availability-weekdays {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.admin-page .rental-availability-weekdays .weekday-options {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.admin-page .rental-availability-weekdays .weekday-options label {
  min-width: 0;
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 9px 2px;
  color: var(--muted);
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: var(--font-caption-1);
  font-weight: 800;
  cursor: pointer;
}

.admin-page .rental-availability-weekdays input {
  accent-color: var(--primary);
}

.admin-page .rental-availability-list {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.admin-page .rental-availability-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.admin-page .rental-availability-row > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.admin-page .rental-availability-row strong,
.admin-page .rental-availability-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-page .rental-availability-row span {
  color: var(--muted);
  font-size: var(--font-caption-1);
}

.admin-page .settlement-badge.is-waiting {
  color: #9a5a00;
  background: #fff2cf;
}

@media (max-width: 520px) {
  .admin-page .rental-availability-form .form-grid {
    grid-template-columns: 1fr;
  }
}

/* 개발자 관리자 관리: 레슨장·클럽·스토어 역할을 소속별로 구분 */
.developer-page .developer-admin-role-groups {
  display: grid;
  gap: 7px;
}

.developer-page .developer-admin-role-group {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.developer-page .developer-admin-role-group > b {
  padding-top: 5px;
  color: #0878ff;
  font-size: var(--font-caption-1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-caption-1);
}

.developer-page .developer-admin-role-group.is-club > b {
  color: #8a5e00;
}

.developer-page .developer-admin-role-group.is-club .developer-admin-role-list span {
  color: #8a5e00;
  background: #fff7d6;
  border-color: #efd27a;
}

.developer-page .developer-admin-role-group.is-store > b {
  color: #6557c8;
}

.developer-page .developer-admin-role-group.is-store .developer-admin-role-list span {
  color: #6557c8;
  background: #f1efff;
  border-color: #d8d1ff;
}

/* Tournament interclub friendly recruitment */
.tournament-page-tabs {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}

.tournament-page-tabs button {
  min-height: 52px;
  padding: 0 18px;
  color: var(--sub);
  background: transparent;
  border: 0;
  border-radius: 14px;
  font-size: var(--font-headline-2);
  line-height: var(--leading-headline-2);
  font-weight: var(--weight-bold);
}

.tournament-page-tabs button.is-active {
  color: #fff;
  background: linear-gradient(135deg, #3B7BFF 0%, var(--primary-dark) 100%);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.16);
}

.tournament-competition-view,
.friendly-match-view {
  min-width: 0;
  display: grid;
  gap: 34px;
}

.tournament-competition-view[hidden],
.friendly-match-view[hidden] {
  display: none;
}

.friendly-match-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 10px;
}

.friendly-match-heading > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.friendly-match-heading h1 {
  margin: 0;
  color: var(--ink);
  font-size: var(--font-title-3);
  line-height: var(--leading-title-3);
  letter-spacing: var(--tracking-title-3);
  font-weight: var(--weight-bold);
}

.friendly-match-heading p {
  margin: 0;
  color: var(--sub);
  font-size: var(--font-label-2);
  line-height: var(--leading-label-2);
  font-weight: var(--weight-medium);
}

.friendly-match-create-button {
  flex: 0 0 auto;
  width: auto;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 14px;
  white-space: nowrap;
}

.friendly-match-filters {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.friendly-match-filter-chips {
  min-width: 0;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}

.friendly-match-filter-chips::-webkit-scrollbar {
  display: none;
}

.friendly-match-filter-chips button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 4px;
  color: var(--sub);
  background: transparent;
  border: 0;
  font-size: var(--font-label-1);
  line-height: var(--leading-label-1);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.friendly-match-filter-chips button.is-active {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.friendly-match-filter-chips button:focus-visible {
  color: var(--primary);
  outline: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.friendly-match-list {
  display: grid;
  gap: 18px;
}

.friendly-match-card {
  min-width: 0;
  display: grid;
  gap: 20px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.friendly-match-empty,
.friendly-match-loading {
  min-height: 300px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 36px 20px;
  color: var(--sub);
  text-align: center;
}

.friendly-match-empty[hidden] {
  display: none;
}

.friendly-match-empty img {
  width: 132px;
  height: 132px;
  margin-bottom: 8px;
  object-fit: contain;
}

.friendly-match-empty strong {
  color: var(--ink);
  font-size: var(--font-headline-1);
  line-height: var(--leading-headline-1);
  font-weight: var(--weight-bold);
}

.friendly-match-empty p {
  margin: 0;
  font-size: var(--font-label-1);
  line-height: var(--leading-label-1);
  font-weight: var(--weight-medium);
}

.friendly-match-loading {
  font-size: var(--font-body-2);
  line-height: var(--leading-body-2);
  font-weight: var(--weight-medium);
}

.friendly-match-dialog {
  width: min(600px, calc(100vw - 28px));
}

.friendly-match-dialog > .friendly-match-form {
  display: grid;
  gap: 18px;
}

.friendly-match-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.friendly-match-form-grid label {
  min-width: 0;
}

.friendly-match-full-field {
  grid-column: 1 / -1;
}

.friendly-match-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.friendly-match-form-actions {
  justify-content: space-between;
}

.friendly-match-form-actions > button {
  width: auto;
  min-width: 116px;
}

@media (max-width: 640px) {
  .tournament-competition-view,
  .friendly-match-view {
    gap: 28px;
  }

  .tournament-page-tabs button {
    min-height: 48px;
  }

  .friendly-match-heading {
    align-items: flex-start;
    padding: 0 4px;
  }

  .friendly-match-heading p {
    display: none;
  }

  .friendly-match-create-button {
    min-height: 44px;
    padding: 0 14px;
    font-size: var(--font-label-1);
    line-height: var(--leading-label-1);
  }

  .friendly-match-filters {
    align-items: stretch;
  }

  .friendly-match-filter-chips {
    margin-right: -4px;
  }

  .friendly-match-filter-chips button {
    min-height: 40px;
    padding: 0 4px;
  }

  .friendly-match-card {
    gap: 17px;
    padding: 20px;
  }

  .friendly-match-dialog {
    width: min(100% - 20px, 600px);
  }

  .friendly-match-dialog > .friendly-match-form {
    padding: 20px;
  }

  .friendly-match-form-grid {
    gap: 10px;
  }
}

/* 만들기 기능 구글 로그인 전용 — 게스트에게 비활성 스타일로 표시(클릭 시 안내) */
.is-google-locked {
  opacity: 0.55;
  filter: grayscale(0.35);
  cursor: not-allowed;
}
.is-google-locked:hover {
  opacity: 0.65;
}
.member-approval-auto-note {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #2563eb;
}

/* ==========================================================================
   헤더 브랜드 텍스트 '코트인' — 로고 초록(#1E7A46)과 동일한 색 (2026-10-05 으뜸 → 코트인)
   ========================================================================== */
.home-brand-name,
.home-page .home-brand-name,
.lesson-centers-page .home-brand-name,
.tournament-page .home-brand-name,
.store-page .home-brand-name {
  color: #1E7A46;
}

/* 로그인 화면: 로고 옆 '코트인' 텍스트 */
.login-header {
  gap: 14px;
}

.login-brand-name {
  color: #1E7A46;
  font-size: clamp(20px, 5vw, 24px);
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

/* ==========================================================================
   개발자 화면 카드 목록 (관리자 변경 기록·백업 — 의견 보내기는 2026-10-01 없앰)
   ========================================================================== */
.developer-feedback-list {
  display: grid;
  gap: 10px;
}

.developer-feedback-card {
  padding: 12px;
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.developer-feedback-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.developer-feedback-card-head strong {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.developer-feedback-text {
  margin: 8px 0 6px;
  color: var(--text);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.developer-feedback-time {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

/* 문서·내부 페이지 전환은 세 앱이 함께 읽는 page-motion.css에서 관리한다. */

/* 게스트 모집 카드: 날짜 아래 모집자 표시 */
.home-page .guest-card-owner {
  margin-top: 0;
  color: var(--sub);
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 800;
}

@media (max-width: 640px) {
  .home-page .guest-card-top {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-page .guest-card-summary {
    display: block;
  }

  .home-page .guest-card-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }

  .home-page .guest-card-heading strong {
    font-size: 18px;
    white-space: nowrap;
  }

  .home-page .guest-card-heading .guest-card-owner {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-page .guest-card-heading .guest-status-badge {
    min-height: 30px;
    padding: 0 9px;
    font-size: 11px;
  }

  .home-page .guest-card-detail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .home-page .guest-card-detail .guest-detail-chip {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    justify-content: center;
    padding: 0 7px;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
  }

  .home-page .guest-detail-chip.is-level,
  .home-page .guest-detail-chip.is-fee {
    font-size: 13px;
  }

  .home-page .guest-card-actions.is-card-side-actions {
    width: 100%;
    display: flex;
    grid-template-columns: none;
    justify-content: flex-end;
    margin-left: 0;
  }
}

/* 운영자가 남의 모집을 지울 때는 "삭제" 하나뿐이다 — 오른쪽에 혼자 두면 "수정"이
   빠진 자리처럼 보인다. 이때만 왼쪽으로 붙인다. 작성자 본인(수정+삭제)은 그대로.
   (2026-08-06 사용자 요청) */
.home-page .guest-card-actions.is-card-side-actions.is-delete-only {
  justify-content: flex-start;
}

/* 그 삭제가 신청하기와 한 줄에 설 때 — 카드 위쪽에 있을 때 쓰던 width:100%·margin-left:auto 를
   되돌려야 신청하기가 아랫줄로 밀리지 않는다. 오른쪽 배치는 신청하기 쪽 margin-left:auto 가 한다. */
.home-page .guest-card-footer .guest-card-actions.is-card-side-actions {
  width: auto;
  margin-left: 0;
}

/* 대회 페이지의 기존 전용 디자인보다 공지/공통 배너 규칙을 우선한다. */
.tournament-page .tournament-hero-stack {
  gap: 34px; /* 상단바↔공지↔배너 간격을 workspace 간격(34px)과 통일 */
}

.tournament-page .tournament-notice-section {
  display: block;
}

.tournament-page .tournament-banner-section .home-banner {
  min-height: 124px;
  display: grid;
  grid-template-columns: 1fr;
  /* 기본 배너 공통 배경(시안 B)과 통일 (2026-07-26) */
  background:
    radial-gradient(circle 86px at 89% 13%, rgba(255, 255, 255, 0.34), transparent),
    radial-gradient(circle 54px at 75% 86%, rgba(255, 255, 255, 0.34), transparent),
    linear-gradient(135deg, #0052CC 0%, #0066FF 55%, #4F8DFD 100%);
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.tournament-page .tournament-banner-section .home-banner-copy,
.tournament-page .tournament-banner-section .home-banner.has-no-image .home-banner-copy {
  min-height: 124px;
  align-content: center;
  gap: 8px;
  padding: 24px 34px;
}

.tournament-page .tournament-banner-section .home-banner-copy span {
  display: none;
}

.tournament-page .tournament-banner-section .home-banner-copy strong {
  max-width: 520px;
  font-size: clamp(18px, 4.6vw, 22px);
  line-height: 1.18;
}

.tournament-page .tournament-banner-section .home-banner-copy p {
  max-width: 520px;
  font-size: clamp(13px, 3.4vw, 15px);
  line-height: 1.3;
}

.tournament-page .tournament-banner-section .home-banner.is-image-only {
  min-height: 0;
}

.tournament-page .tournament-banner-section .home-banner.is-image-only img {
  height: clamp(124px, 30vw, 260px);
  min-height: 0;
  max-height: none;
}

@media (max-width: 640px) {
  .tournament-page .tournament-hero-stack {
    gap: 28px;
  }

  .tournament-page .tournament-banner-section .home-banner,
  .tournament-page .tournament-banner-section .home-banner-copy,
  .tournament-page .tournament-banner-section .home-banner.has-no-image .home-banner-copy {
    min-height: 112px;
  }

  .tournament-page .tournament-banner-section .home-banner-copy,
  .tournament-page .tournament-banner-section .home-banner.has-no-image .home-banner-copy {
    padding: 20px 24px;
  }

  .tournament-page .tournament-banner-section .home-banner.is-image-only img {
    height: clamp(112px, 30vw, 220px);
  }
}

/* ==========================================================================
   레슨장 홈 리디자인 (2026-07-16): 정보 한눈에 '미입력' 상태 + 예약(문의 선택) 뷰
   ========================================================================== */

.lesson-center-home-page .lesson-center-place-row.is-empty .lesson-center-place-row-icon {
  background: #eef2f7;
  color: #a6b0bf;
}

.lesson-center-home-page .lesson-center-place-row.is-empty strong,
.lesson-center-home-page .lesson-center-place-row.is-empty p,
.lesson-center-home-page .lesson-center-place-row.is-empty .lesson-center-info-link {
  color: #94a3b8;
  font-weight: 600;
}

.lesson-center-home-page .lesson-center-place-row.is-empty .lesson-center-info-link {
  pointer-events: none;
  text-decoration: none;
}

.lesson-center-home-page .lesson-center-price-label {
  display: block;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 2px;
}

/* 위쪽 여백은 "요금" 글자를 지갑 아이콘 세로 중앙에 맞추고(아이콘 42px, 글자 16px → 13px),
   아래쪽 여백은 왼쪽 칸의 "레슨 안내" 라벨이 그 아이콘과 겹치지 않게 띄운다(간격 9px).
   위 규칙(0-2-0)은 `.lesson-center-place-row small`(0-2-1)에 밀리므로 선택자를 맞춰 적는다. */
.lesson-center-home-page .lesson-center-place-row small.lesson-center-price-label {
  margin-top: 13px;
  margin-bottom: 5px;
}

.lesson-center-home-page .lesson-center-price-empty {
  color: #94a3b8;
  font-weight: 600;
}

.lesson-center-home-page .lesson-center-place-row.is-empty .lesson-center-price-group {
  display: none;
}

/* ---- 예약 뷰: 레슨/대관 문의 선택 ---- */
.lesson-center-home-page .lesson-center-booking-guide {
  margin: 2px 2px 14px;
  color: var(--sub, #64748b);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}

.lesson-center-home-page .lesson-center-booking-choice,
.lesson-center-home-page .lesson-center-booking-call {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  border: none;
  border-radius: 18px;
  box-shadow: 0 5px 14px rgba(11, 27, 58, 0.06);
  padding: 18px 16px;
  margin-bottom: 12px;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.lesson-center-home-page .lesson-center-booking-choice:active,
.lesson-center-home-page .lesson-center-booking-call:active {
  transform: translateY(1px);
}

.lesson-center-home-page .lesson-center-booking-icon {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.lesson-center-home-page .lesson-center-booking-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lesson-center-home-page .lesson-center-booking-icon.is-lesson {
  background: #eaf1ff;
  color: #2563eb;
}

.lesson-center-home-page .lesson-center-booking-icon.is-rental {
  background: #e5f6ec;
  color: #15803d;
}

.lesson-center-home-page .lesson-center-booking-icon.is-call {
  background: #eaf1ff;
  color: #2563eb;
}

.lesson-center-home-page .lesson-center-booking-copy {
  flex: 1;
  min-width: 0;
}

.lesson-center-home-page .lesson-center-booking-copy b {
  display: block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 3px;
  color: #0f172a;
}

.lesson-center-home-page .lesson-center-booking-copy i {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.5;
}

.lesson-center-home-page .lesson-center-booking-chevron {
  color: #94a3b8;
  font-size: 18px;
  font-weight: 800;
  flex: none;
}

/* 레슨장 상세 상단바 = 메인 홈 상단바와 동일 룩 */
.lesson-center-home-page .lesson-center-home-topbar {
  width: 100%;
  min-height: 86px;
  box-sizing: border-box;
  align-items: center;
  padding: 0 20px;
}

.lesson-center-home-page .home-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

.lesson-center-home-page .home-brand-logo {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  box-shadow: none;
}

.lesson-center-home-page .home-brand-name {
  min-width: 0;
  color: var(--ink);
  font-size: clamp(20px, 5vw, 24px);
  font-weight: 950;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-center-home-page .home-top-actions {
  gap: 14px;
}

.lesson-center-home-page .home-message-button {
  width: 52px;
  height: 52px;
  color: #334155;
  background: transparent;
  border: 0;
  border-radius: 999px;
}

.lesson-center-home-page .home-message-button svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lesson-center-home-page .home-profile-link {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  background: #DCE8FF;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
}

.lesson-center-home-page .home-profile-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 레슨장 사진 탭 갤러리 — 큰 사진 1장 + 인디케이터로 넘겨보기 */
.lesson-center-home-page .lesson-center-photo-grid {
  display: grid;
}

.lesson-center-home-page .lesson-center-photo-slider {
  position: relative;
  display: grid;
  gap: 14px;
}

.lesson-center-home-page .lesson-center-photo-frame {
  width: 100%;
  aspect-ratio: 3 / 2;
  display: block;
  touch-action: pan-y;
  user-select: none;
  padding: 0;
  overflow: hidden;
  background: #eef2f7;
  border: 0;
  border-radius: 18px;
  cursor: grab;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
  will-change: transform;
}

.lesson-center-home-page .lesson-center-photo-frame.is-dragging {
  cursor: grabbing;
  transition: none;
}

.lesson-center-home-page .lesson-center-photo-frame.is-settling {
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.lesson-center-home-page .lesson-center-photo-frame.is-entering-next {
  animation: lesson-center-photo-enter-next 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.lesson-center-home-page .lesson-center-photo-frame.is-entering-prev {
  animation: lesson-center-photo-enter-prev 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.lesson-center-home-page .lesson-center-photo-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

@keyframes lesson-center-photo-enter-next {
  from {
    opacity: 0.82;
    transform: translateX(28px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes lesson-center-photo-enter-prev {
  from {
    opacity: 0.82;
    transform: translateX(-28px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.lesson-center-home-page .lesson-center-photo-counter {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  padding: 5px 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  background: rgba(15, 23, 42, 0.55);
  border-radius: 999px;
}

.lesson-center-home-page .lesson-center-photo-indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.lesson-center-home-page .lesson-center-photo-indicators button {
  width: 9px;
  height: 9px;
  padding: 0;
  background: #cbd5e1;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: width 0.2s, background 0.2s;
}

.lesson-center-home-page .lesson-center-photo-indicators button.is-active {
  width: 26px;
  background: #2563eb;
}

.lesson-center-home-page .lesson-center-photo-empty {
  padding: 34px 18px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  background: #f1f5f9;
  border-radius: 16px;
}

/* 관리자: 레슨장 사진 관리 */
.lesson-center-gallery-admin-guide {
  margin: 0 0 12px;
  color: #64748b;
  font-size: 13px;
}

.lesson-center-gallery-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.lesson-center-gallery-admin-item {
  position: relative;
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  background: #eef2f7;
  border-radius: 12px;
}

.lesson-center-gallery-admin-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.lesson-center-gallery-admin-item button {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  background: rgba(15, 23, 42, 0.62);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.lesson-center-gallery-admin-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 46px 20px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
  background: #f1f5f9;
  border-radius: 14px;
}

/* 파일 입력은 완전히 숨김 — 사진 추가 버튼으로만 열기 (폼 input display 규칙이 hidden을 덮는 것 방지) */
.admin-page #adminGalleryPhotoInput {
  display: none;
}

.lesson-center-gallery-admin-empty span {
  display: block;
  margin-top: 8px;
  color: #94a3b8;
  font-size: 13px;
}

/* 요금 카드: 레슨 안내와 대관 안내 사이 한 줄 간격 */
.lesson-center-home-page #lessonCenterRentalPriceGroup {
  margin-top: 14px;
}

/* 소개 카드: 내용을 소개/레슨장명 줄 옆(세로 중앙)에 배치, 길면 자연스럽게 줄바꿈 */
.lesson-center-home-page .lesson-center-card-heading .lesson-center-hero-intro {
  flex: 1 1 0;
  min-width: 0;
  margin: 0 0 0 4px;
  align-self: center;
}

.lesson-center-gallery-add-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  flex: none;
  cursor: pointer;
}

/* 관리자: 코치 지원 거절 버튼 */
.member-coach-reject-button {
  color: #dc2626;
  border-color: #fecaca;
}

/* 레슨장 정보 수정/소식 등록/사진 관리 헤더: 제목과 버튼을 한 줄에, 버튼은 콤팩트하게 */
.admin-page .lesson-center-admin-home-panel .section-header.compact,
.admin-page .notice-admin-panel .section-header.compact,
.admin-page .lesson-center-gallery-admin-panel .section-header.compact {
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
}

.admin-page .lesson-center-admin-home-panel .section-header.compact h2,
.admin-page .notice-admin-panel .section-header.compact h2,
.admin-page .lesson-center-gallery-admin-panel .section-header.compact h2 {
  white-space: nowrap;
}

.admin-page .lesson-center-gallery-admin-panel .section-header.compact .lesson-center-gallery-add-button {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 40px;
  padding: 0 18px;
}

.admin-page .lesson-center-admin-home-panel .section-header.compact .primary-button,
.admin-page .notice-admin-panel .section-header.compact .primary-button {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 40px;
  padding: 0 18px;
}

/* 저장 메시지가 없을 땐 공간을 차지하지 않음 */
.admin-page .lesson-center-admin-home-panel .recurring-result:empty,
.admin-page .notice-admin-panel > .recurring-result:empty {
  display: none;
}

@media (max-width: 640px) {
  .lesson-center-home-page .lesson-center-home-topbar {
    min-height: 72px;
    margin-top: 26px;
    padding: 0 16px;
  }

  .lesson-center-home-page .home-brand {
    gap: 12px;
  }

  .lesson-center-home-page .home-brand-logo {
    width: 58px;
    height: 58px;
    border-radius: 15px;
  }

  .lesson-center-home-page .home-brand-name {
    font-size: 21px;
  }

  .lesson-center-home-page .home-message-button {
    width: 44px;
    height: 44px;
  }

  .lesson-center-home-page .home-message-button svg {
    width: 28px;
    height: 28px;
  }

  .lesson-center-home-page .home-profile-link {
    width: 52px;
    height: 52px;
  }
}

/* =========================================================================
   [시범 적용] 레슨장 상세 홈 타이포 → Wanted 스케일 (2026-07-19, 클로드)
   - 파일 상단의 타이포 토큰(--font-, --leading-, --tracking-)을 이 페이지의
     기존 셀렉터에 그대로 입힌 것. 판단용 시범이므로 이 블록만 지우면 원상복구.
   - 굵기도 함께 정돈: 950→700(제목), 800→600(라벨·값), 750→600(소개문).
   ========================================================================= */
.lesson-center-home-page .lesson-center-card-heading h2,
.lesson-center-home-page .lesson-center-section-heading h2,
.lesson-center-home-page .lesson-center-inquiry-header h2 {
  font-size: var(--font-heading-2);
  line-height: var(--leading-heading-2);
  letter-spacing: var(--tracking-heading-2);
  font-weight: var(--weight-bold);
}

.lesson-center-home-page .lesson-center-page-heading h2 {
  font-size: var(--font-title-3);
  line-height: var(--leading-title-3);
  letter-spacing: var(--tracking-title-3);
  font-weight: var(--weight-bold);
}

.lesson-center-home-page .lesson-center-hero-intro {
  font-size: var(--font-headline-1);
  line-height: var(--leading-headline-1);
  letter-spacing: var(--tracking-headline-1);
  font-weight: var(--weight-semibold);
}

.lesson-center-home-page .lesson-center-intro-text {
  font-size: var(--font-headline-2);
  line-height: var(--leading-headline-2);
  letter-spacing: var(--tracking-headline-2);
}

.lesson-center-home-page .lesson-center-place-row small {
  font-size: var(--font-caption-1);
  line-height: var(--leading-caption-1);
  letter-spacing: var(--tracking-caption-1);
  font-weight: var(--weight-semibold);
}

.lesson-center-home-page .lesson-center-place-row strong,
.lesson-center-home-page .lesson-center-place-row p,
.lesson-center-home-page .lesson-center-place-row a {
  font-size: var(--font-body-2);
  line-height: var(--leading-body-2);
  letter-spacing: var(--tracking-body-2);
  font-weight: var(--weight-semibold);
}
/* [시범 적용 끝] */

/* =========================================================================
   [전역 적용] Wanted 타이포 스케일 — 클럽 제외 전 페이지 (2026-07-19, 클로드)
   - 위 시범 블록(레슨장 상세 홈)과 같은 원칙을 나머지 페이지 제목에 확장.
   - 스코프: 각 페이지 body 클래스로 한정. club.html은 body 클래스가 없고
     euddeum, club-app은 자체 CSS를 쓰므로 클럽 계열은 자동 제외된다.
   - 매핑: 페이지 대제목 = title-3(24), 큰 섹션 = heading-1(22),
     일반 섹션·다이얼로그 = heading-2(20), 카드 소제목 = headline-1(18),
     로그인 인사 = title-1(32). 굵기는 900·950 → 700으로 정돈.
   - 롤백: 이 블록만 지우면 원상복구.
   ========================================================================= */

/* 페이지 대제목 → title-3 (24px) */
.store-page .store-section-header h1,
.store-page .profile-heading h1,
.lesson-centers-page .lesson-centers-header h1,
.tournament-page-body .tournament-title-panel h1,
.coach-page .coach-detail-hero h2 {
  font-size: var(--font-title-3);
  line-height: var(--leading-title-3);
  letter-spacing: var(--tracking-title-3);
  font-weight: var(--weight-bold);
}

/* 큰 섹션 제목 → heading-1 (22px) */
.home-page .home-panel h2,
.home-page .guest-recruit-header h2,
.tournament-page-body .tournament-list-heading h1 {
  font-size: var(--font-heading-1);
  line-height: var(--leading-heading-1);
  letter-spacing: var(--tracking-heading-1);
  font-weight: var(--weight-bold);
}

/* 일반 섹션·다이얼로그 제목 → heading-2 (20px) */
.admin-page .topbar h1,
.coach-admin-page .topbar h1,
.admin-page .section-header h2,
.coach-admin-page .section-header h2,
.store-page .section-header h2,
.admin-page .dialog-header h2,
.coach-admin-page .dialog-header h2,
.store-page .dialog-header h2,
.home-page .dialog-header h2,
.lesson-centers-page .dialog-header h2,
.store-page .profile-dialog-header h2,
.lesson-centers-page .lesson-center-list-header h2,
.lesson-centers-page .club-list-header h2 {
  font-size: var(--font-heading-2);
  line-height: var(--leading-heading-2);
  letter-spacing: var(--tracking-heading-2);
  font-weight: var(--weight-bold);
}

/* 카드·하위 소제목 → headline-1 (18px) */
.store-page .store-card h3,
.coach-page .coach-detail-section h3,
.admin-page .developer-admin-subhead h3,
.admin-page .developer-owner-group-head h3 {
  font-size: var(--font-headline-1);
  line-height: var(--leading-headline-1);
  letter-spacing: var(--tracking-headline-1);
  font-weight: var(--weight-bold);
}

/* 로그인·가입 인사 제목 → title-1 (32px) */
.login-page .login-message h2,
.signup-page .login-message h2 {
  font-size: var(--font-title-1);
  line-height: var(--leading-title-1);
  letter-spacing: var(--tracking-title-1);
  font-weight: var(--weight-bold);
}
/* [전역 적용 끝] */

/* =========================================================================
   [전역 적용] Wanted 컬러 토큰 — 클럽 제외 전 페이지 (2026-07-19, 클로드)
   - 근거: design-ref 폴더의 wanted-tokens.json (semantic 56종, light 기준).
   - 방식: root를 바꾸지 않고 페이지 body 클래스에 토큰을 재정의한다.
     body가 색을 토큰으로 칠하므로 페이지 전체에 상속되고, body 클래스가 없는
     club.html과 자체 CSS인 euddeum, club-app은 기존 팔레트를 그대로 유지한다.
   - 유지: surface(동일), navy·lime(전용 장식색), radius·shadow 계열.
   - 하드코딩 hex 1048곳은 이 블록의 영향 밖 — 추후 별도 정리 대상.
   - 롤백: 이 블록만 지우면 원상복구.
   ========================================================================= */
.home-page,
.lesson-centers-page,
.lesson-center-home-page,
.admin-page,
.coach-page,
.coach-admin-page,
.store-page,
.tournament-page-body,
.login-page,
.signup-page {
  /* Primary — semantic primary-normal, heavy, blue-95 */
  --primary: #0066FF;
  --primary-dark: #0054D1;
  --primary-tint: #EAF2FE;
  /* Neutral — label-normal, coolNeutral-50, coolNeutral-70 */
  --ink: #171719;
  --sub: #70737C;
  --mute: #989BA2;
  /* Layout — line-solid-normal, background-normal-alternative */
  --line: #E1E2E4;
  --bg: #F7F7F8;
  /* Status — accent-foreground 계열(본문용), 95 램프(연한 배경용) */
  --green: #009632;
  --green-soft: #D9FFE6;
  --amber: #D17600;
  --amber-soft: #FEF4E6;
  --red: #E52222;
  --red-soft: #FEECEC;
}
/* [전역 적용 컬러 끝] */

/* =========================================================================
   [클로드] 코치 프로필 설정 다이얼로그 리디자인 (2026-07-20)
   - 대상: admin.html #lessonCenterCoachProfileDialog 하나만 (ID 스코프라
     같은 클래스를 쓰는 다른 다이얼로그에는 영향 없음).
   - 방향: Wanted 토큰 기반 — 원형 아바타, 차분한 라벨, 카드형 사진 구역,
     포커스 링 있는 입력, 저장 버튼 강조. 롤백은 이 블록 삭제.
   ========================================================================= */
#lessonCenterCoachProfileDialog {
  width: min(94vw, 440px);
  border: 0;
  border-radius: 20px;
  padding: 22px 20px 18px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
}

#lessonCenterCoachProfileDialog .dialog-header {
  align-items: flex-start;
  margin-bottom: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

#lessonCenterCoachProfileDialog .dialog-header h2 {
  font-size: var(--font-headline-1);
  line-height: var(--leading-headline-1);
  letter-spacing: var(--tracking-headline-1);
  font-weight: var(--weight-bold);
  color: var(--ink);
}

#lessonCenterCoachProfileDialog .lesson-center-group-manage-description {
  margin-top: 3px;
  color: var(--sub);
  font-size: var(--font-caption-1);
  line-height: var(--leading-caption-1);
  font-weight: 500;
}

/* 닫기(X) 버튼 스타일은 파일 끝 "다이얼로그 닫기 버튼 공통" 블록에서 일괄 적용 */

/* 사진 구역 — 흰 카드 + 원형 아바타 */
#lessonCenterCoachProfileDialog .coach-profile-photo-editor {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  margin-top: 14px;
  padding: 12px;
  background: var(--bg);
  border: 0;
  border-radius: 14px;
}

#lessonCenterCoachProfileDialog .coach-profile-photo-preview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--primary-tint);
  color: var(--primary);
  font-size: 22px;
  font-weight: var(--weight-bold);
}

#lessonCenterCoachProfileDialog .coach-profile-photo-controls > span {
  color: var(--ink);
  font-size: var(--font-label-2);
  font-weight: var(--weight-semibold);
}

#lessonCenterCoachProfileDialog .coach-profile-photo-controls .ghost-button {
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: var(--weight-semibold);
}

/* 입력 구역 — 라벨은 차분하게, 입력은 또렷한 포커스 */
#lessonCenterCoachProfileDialog .coach-profile-edit-grid {
  gap: 14px;
  margin-top: 16px;
}

#lessonCenterCoachProfileDialog .coach-profile-edit-input {
  gap: 7px;
  color: var(--ink);
  font-size: var(--font-label-2);
  font-weight: var(--weight-semibold);
}

#lessonCenterCoachProfileDialog .coach-profile-edit-input textarea {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--font-body-2);
  line-height: var(--leading-body-2);
  font-weight: 500;
  resize: none;
}

#lessonCenterCoachProfileDialog .coach-profile-edit-input textarea::placeholder {
  color: var(--mute);
  font-weight: 400;
}

#lessonCenterCoachProfileDialog .coach-profile-edit-input textarea:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
}

/* 이력 이미지 — 요란한 초록 대신 조용한 업로드 박스 */
#lessonCenterCoachProfileDialog .coach-profile-photo-editor.is-history-image {
  margin-top: 16px;
}

#lessonCenterCoachProfileDialog .coach-profile-photo-editor.is-history-image .coach-profile-photo-preview {
  border-radius: 12px;
  background: var(--surface);
  border: 1.5px dashed var(--line);
  color: var(--mute);
  font-size: 13px;
  font-weight: var(--weight-semibold);
}

#lessonCenterCoachProfileDialog .coach-profile-photo-editor.is-history-image .coach-profile-photo-preview.has-photo {
  border-style: solid;
}

/* 하단 버튼 — 저장을 주인공으로 (긍정 오른쪽 규칙 유지) */
#lessonCenterCoachProfileDialog .reservation-edit-actions {
  margin-top: 18px;
  gap: 8px;
}

#lessonCenterCoachProfileDialog .reservation-edit-actions .ghost-button {
  flex: 0 0 auto;
  padding: 12px 18px;
  border-radius: 12px;
}

#lessonCenterCoachProfileDialog .reservation-edit-actions .primary-button {
  flex: 1 1 auto;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: var(--weight-bold);
}
/* [코치 프로필 다이얼로그 끝] */

/* =========================================================================
   [클로드] 레슨장 홈 코치 소개 정리 (2026-07-20)
   - 카드: 사진+이름만 남겨 컴팩트하게 (JS에서 경력·태그 제거와 세트).
   - 상세 팝업(#coachDetailDialog 스코프 — 공지 팝업은 무영향): 남색 칩 제목을
     차분한 라벨로, 원형 아바타 + 코트 배지, 한 화면에 들어오는 간격.
   - 롤백은 이 블록 삭제 + lesson-center-home.js 카드 마크업 복원.
   ========================================================================= */
/* 한 화면에 정확히 코치 2명 — 3명째부터는 코치 칸만 옆으로 넘겨서 본다 */
.lesson-center-home-page {
  overflow-x: hidden; /* 캐러셀 스와이프가 페이지 전체를 밀지 않게 */
}

.lesson-center-home-page .lesson-center-coach-list {
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.lesson-center-home-page .lesson-center-coach-card {
  flex: 0 0 calc(50% - 6px);
  width: auto;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 44px minmax(0, 1fr) 12px;
  gap: 10px;
  padding: 13px 12px;
  scroll-snap-align: start;
}

.lesson-center-home-page .lesson-center-coach-card .lesson-center-coach-avatar {
  width: 44px;
  height: 44px;
  font-size: 17px;
}

.lesson-center-home-page .lesson-center-coach-copy strong {
  font-size: var(--font-headline-2);
  line-height: var(--leading-headline-2);
  font-weight: var(--weight-bold);
}

/* 상세 팝업 */
#coachDetailDialog {
  width: min(94vw, 420px);
}

#coachDetailDialog .coach-detail-shell {
  max-height: 88dvh;
  padding: 24px 20px 20px;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
}

#coachDetailDialog .coach-detail-close {
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--bg);
  color: var(--sub);
  font-size: 19px;
  line-height: 1;
}

#coachDetailDialog .coach-detail-hero {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: 0 0 6px;
  padding: 0 26px 14px 0;
  border-bottom: 1px solid var(--line);
}

#coachDetailDialog .coach-detail-avatar {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--primary-tint);
  color: var(--primary);
  font-size: 22px;
  font-weight: var(--weight-bold);
}

#coachDetailDialog .coach-detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#coachDetailDialog .coach-detail-hero h2 {
  margin: 0;
  color: var(--ink);
  font-size: var(--font-heading-2);
  line-height: var(--leading-heading-2);
  letter-spacing: var(--tracking-heading-2);
  font-weight: var(--weight-bold);
}

#coachDetailDialog .coach-detail-hero p {
  margin: 3px 0 0;
  color: var(--sub);
  font-size: var(--font-label-1);
  line-height: var(--leading-label-1);
  font-weight: 500;
}

#coachDetailDialog .coach-detail-poster {
  margin: 14px 0 0;
}

#coachDetailDialog .coach-detail-poster img {
  width: 100%;
  border-radius: 14px;
}

/* 남색 칩 제목 → 조용한 섹션 라벨 + 구분선 있는 목록 */
#coachDetailDialog .coach-detail-card {
  margin-top: 4px;
  padding: 0;
  background: none;
  border: 0;
}

#coachDetailDialog .coach-detail-section {
  margin: 0;
  padding: 12px 0 2px;
}

#coachDetailDialog .coach-detail-section h3 {
  width: auto;
  margin: 0 0 7px;
  padding: 0;
  background: none;
  color: var(--mute);
  border-radius: 0;
  font-size: var(--font-caption-1);
  line-height: var(--leading-caption-1);
  letter-spacing: 0.06em;
  font-weight: var(--weight-bold);
}

#coachDetailDialog .coach-detail-section ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

#coachDetailDialog .coach-detail-section li {
  position: relative;
  margin: 0;
  padding: 7px 0 7px 14px;
  color: var(--ink);
  font-size: var(--font-body-2);
  line-height: var(--leading-body-2);
  font-weight: 500;
}

#coachDetailDialog .coach-detail-section li + li {
  border-top: 1px solid var(--line);
}

#coachDetailDialog .coach-detail-section li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 16px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
}
/* [코치 소개 정리 끝] */

/* =========================================================================
   [클로드] 통합 운영 "전체 예약자" — 지점별 아코디언 + 관리 팝업 (2026-07-20)
   ========================================================================= */
.lesson-center-group-registration-group {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.lesson-center-group-registration-group + .lesson-center-group-registration-group {
  margin-top: 10px;
}

.lesson-center-group-registration-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 0;
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lesson-center-group-registration-group-toggle strong {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink);
  font-size: var(--font-headline-2);
  line-height: var(--leading-headline-2);
  font-weight: var(--weight-bold);
}

.lesson-center-group-registration-group-toggle span {
  flex: 0 0 auto;
  color: var(--sub);
  font-size: var(--font-label-2);
  font-weight: var(--weight-semibold);
}

/* 접힘/펼침 화살표 */
.lesson-center-group-registration-group-toggle i {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--mute);
  border-bottom: 2px solid var(--mute);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.lesson-center-group-registration-group.is-open .lesson-center-group-registration-group-toggle i {
  transform: rotate(225deg);
}

.lesson-center-group-registration-group-body {
  padding: 2px 16px 8px;
  border-top: 1px solid var(--line);
}

/* 관리 팝업 상세 행 */
#lessonCenterGroupRegistrationDialog {
  width: min(94vw, 420px);
  border: 0;
  border-radius: 20px;
  padding: 22px 20px 18px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
}

#lessonCenterGroupRegistrationDialog .dialog-header {
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

#lessonCenterGroupRegistrationDialog .dialog-header h2 {
  font-size: var(--font-headline-1);
  line-height: var(--leading-headline-1);
  font-weight: var(--weight-bold);
  color: var(--ink);
}

#lessonCenterGroupRegistrationDialog .lesson-center-group-manage-description {
  margin-top: 3px;
  color: var(--sub);
  font-size: var(--font-caption-1);
  font-weight: 500;
}

/* 닫기(X) 버튼 스타일은 파일 끝 "다이얼로그 닫기 버튼 공통" 블록에서 일괄 적용 */

.lesson-center-group-registration-detail {
  display: grid;
  gap: 0;
  margin-top: 6px;
}

.lesson-center-group-registration-detail-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 9px 0;
}

.lesson-center-group-registration-detail-row + .lesson-center-group-registration-detail-row {
  border-top: 1px solid var(--line);
}

.lesson-center-group-registration-detail-row span {
  color: var(--mute);
  font-size: var(--font-caption-1);
  font-weight: var(--weight-semibold);
}

.lesson-center-group-registration-detail-row strong {
  color: var(--ink);
  font-size: var(--font-body-2);
  line-height: var(--leading-body-2);
  font-weight: var(--weight-semibold);
  word-break: keep-all;
}

#lessonCenterGroupRegistrationDialog .reservation-edit-actions {
  margin-top: 14px;
  gap: 8px;
}

#lessonCenterGroupRegistrationDialog .reservation-edit-actions .danger-button {
  flex: 0 0 auto;
  padding: 12px 18px;
  border-radius: 12px;
}

#lessonCenterGroupRegistrationDialog .reservation-edit-actions .primary-button {
  flex: 1 1 auto;
  padding: 12px 18px;
  border-radius: 12px;
  text-align: center;
  font-weight: var(--weight-bold);
}
/* [전체 예약자 아코디언·팝업 끝] */

/* [클로드] 관리 팝업 — 이번 달 일정 목록 (사람 단위 팝업, 2026-07-20) */
.lesson-center-group-schedule-list {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.lesson-center-group-schedule-title {
  display: block;
  margin-bottom: 4px;
  color: var(--mute);
  font-size: var(--font-caption-1);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
}

.lesson-center-group-schedule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
}

.lesson-center-group-schedule-row + .lesson-center-group-schedule-row {
  border-top: 1px solid var(--line);
}

.lesson-center-group-schedule-row span {
  color: var(--ink);
  font-size: var(--font-body-2);
  font-weight: var(--weight-semibold);
}

.lesson-center-group-schedule-row button {
  border: 0;
  background: none;
  padding: 4px 6px;
  color: var(--mute);
  font: inherit;
  font-size: var(--font-caption-1);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.lesson-center-group-schedule-row button:hover {
  color: var(--red);
}

/* [클로드] 관리 팝업 — 정보 수정 폼 (요일·시간·연락처·요금·코치, 2026-07-20) */
.lesson-center-group-person-edit {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.lesson-center-group-person-edit-field {
  display: grid;
  gap: 6px;
}

.lesson-center-group-person-edit-field > span {
  color: var(--mute);
  font-size: var(--font-caption-1);
  font-weight: var(--weight-semibold);
}

.lesson-center-group-person-edit-field input,
.lesson-center-group-person-edit-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--font-body-2);
  font-weight: 500;
}

.lesson-center-group-person-edit-field input:focus-visible,
.lesson-center-group-person-edit-field select:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
}

.lesson-center-group-weekday-picks {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.lesson-center-group-weekday-pick {
  position: relative;
}

.lesson-center-group-weekday-pick input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.lesson-center-group-weekday-pick span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--sub);
  font-size: var(--font-label-2);
  font-weight: var(--weight-semibold);
}

.lesson-center-group-weekday-pick input:checked + span {
  border-color: var(--primary);
  background: var(--primary-tint);
  color: var(--primary);
}

.lesson-center-group-person-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

.lesson-center-group-person-edit-actions .ghost-button {
  flex: 0 0 auto;
  padding: 11px 16px;
  border-radius: 11px;
}

.lesson-center-group-person-edit-actions .primary-button {
  flex: 1 1 auto;
  padding: 11px 16px;
  border-radius: 11px;
  font-weight: var(--weight-bold);
}

/* 푸터: 지점에서 수정 링크(ghost)도 버튼처럼 */
#lessonCenterGroupRegistrationDialog .reservation-edit-actions .ghost-button {
  flex: 0 0 auto;
  padding: 12px 14px;
  border-radius: 12px;
  text-align: center;
}

/* =========================================================================
   [클로드] 레슨 등록·대관 등록 다이얼로그 다듬기 (2026-07-20)
   - 코치 프로필·예약자 관리 팝업과 같은 톤: 20px 라운드 셸, 원형 닫기,
     차분한 라벨, 포커스 링, 요일 알약, 시간 안내 칩, 큰 등록 버튼.
   ========================================================================= */
#lessonRegistrationDialog,
#rentalRegistrationDialog {
  width: min(94vw, 440px);
  border: 0;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
}

#lessonRegistrationDialog .reservation-form,
#rentalRegistrationDialog .reservation-form {
  padding: 22px 20px 18px;
  display: grid;
  gap: 13px;
}

#lessonRegistrationDialog .dialog-header,
#rentalRegistrationDialog .dialog-header {
  align-items: flex-start;
  margin: 0;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}

#lessonRegistrationDialog .dialog-header .section-label,
#rentalRegistrationDialog .dialog-header .section-label {
  margin: 0 0 2px;
  color: var(--mute);
  font-size: var(--font-caption-1);
  font-weight: var(--weight-semibold);
}

#lessonRegistrationDialog .dialog-header h2,
#rentalRegistrationDialog .dialog-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: var(--font-headline-1);
  line-height: var(--leading-headline-1);
  letter-spacing: var(--tracking-headline-1);
  font-weight: var(--weight-bold);
}

/* 닫기(X) 버튼 스타일은 파일 끝 "다이얼로그 닫기 버튼 공통" 블록에서 일괄 적용 */

/* 라벨·입력 */
#lessonRegistrationDialog .reservation-form > label,
#rentalRegistrationDialog .reservation-form > label,
#lessonRegistrationDialog .form-grid label,
#rentalRegistrationDialog .form-grid label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: var(--font-label-2);
  font-weight: var(--weight-semibold);
}

#lessonRegistrationDialog .form-grid,
#rentalRegistrationDialog .form-grid {
  gap: 10px;
  margin: 0;
}

#lessonRegistrationDialog input,
#lessonRegistrationDialog select,
#lessonRegistrationDialog textarea,
#rentalRegistrationDialog input,
#rentalRegistrationDialog select,
#rentalRegistrationDialog textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--font-body-2);
  font-weight: 500;
}

#lessonRegistrationDialog input::placeholder,
#lessonRegistrationDialog textarea::placeholder,
#rentalRegistrationDialog input::placeholder,
#rentalRegistrationDialog textarea::placeholder {
  color: var(--mute);
  font-weight: 400;
}

#lessonRegistrationDialog input:focus-visible,
#lessonRegistrationDialog select:focus-visible,
#lessonRegistrationDialog textarea:focus-visible,
#rentalRegistrationDialog input:focus-visible,
#rentalRegistrationDialog select:focus-visible,
#rentalRegistrationDialog textarea:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
}

/* 시간 안내 칩 */
#lessonRegistrationDialog .rental-time-summary,
#rentalRegistrationDialog .rental-time-summary {
  margin: 0;
  padding: 10px 13px;
  background: var(--green-soft);
  color: var(--green);
  border: 0;
  border-radius: 11px;
  font-size: var(--font-label-2);
  font-weight: var(--weight-bold);
}

/* 요일 — 체크박스를 숨기고 알약 토글로 */
#lessonRegistrationDialog .weekday-field,
#rentalRegistrationDialog .weekday-field {
  margin: 0;
  padding: 0;
  border: 0;
}

#lessonRegistrationDialog .weekday-field legend,
#rentalRegistrationDialog .weekday-field legend {
  margin-bottom: 6px;
  padding: 0;
  color: var(--ink);
  font-size: var(--font-label-2);
  font-weight: var(--weight-semibold);
}

#lessonRegistrationDialog .weekday-checkbox-group,
#rentalRegistrationDialog .weekday-checkbox-group {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

#lessonRegistrationDialog .weekday-checkbox-group label,
#rentalRegistrationDialog .weekday-checkbox-group label {
  position: relative;
  min-height: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--sub);
  font-size: var(--font-label-2);
  font-weight: var(--weight-semibold);
}

#lessonRegistrationDialog .weekday-checkbox-group input,
#rentalRegistrationDialog .weekday-checkbox-group input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

#lessonRegistrationDialog .weekday-checkbox-group label:has(input:checked),
#rentalRegistrationDialog .weekday-checkbox-group label:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-tint);
  color: var(--primary);
}

/* 등록 버튼 */
#lessonRegistrationDialog .primary-button[type="submit"],
#rentalRegistrationDialog .primary-button[type="submit"] {
  margin-top: 3px;
  padding: 13px 18px;
  border-radius: 12px;
  font-size: var(--font-body-1);
  font-weight: var(--weight-bold);
}
/* [등록 다이얼로그 다듬기 끝] */

/* ============================================================
   [클로드] 예약자 관리 코치별 그룹 — 코트 탭 제거 대체 (2026-07-20)
   ============================================================ */

.lesson-record-coach-group {
  margin-bottom: 18px;
}

.lesson-record-coach-group:last-child {
  margin-bottom: 0;
}

.lesson-record-coach-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: var(--primary-tint);
}

.lesson-record-coach-accordion .lesson-record-coach-header {
  margin-bottom: 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.lesson-record-coach-accordion .lesson-record-coach-header::-webkit-details-marker {
  display: none;
}

.lesson-record-coach-accordion .lesson-record-coach-header strong {
  flex: 1;
}

.lesson-record-coach-accordion .lesson-record-coach-header::after {
  content: "⌄";
  flex: 0 0 auto;
  width: 22px;
  color: var(--primary);
  font-size: 20px;
  font-weight: var(--weight-bold);
  line-height: 1;
  text-align: center;
  transition: transform 160ms ease;
}

.lesson-record-coach-accordion[open] .lesson-record-coach-header::after {
  transform: rotate(180deg);
}

.lesson-record-coach-accordion .lesson-record-coach-header:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 32%, transparent);
  outline-offset: 2px;
}

.lesson-record-coach-body {
  padding-top: 10px;
}

.lesson-record-coach-header strong {
  font-size: var(--font-body-1);
  font-weight: var(--weight-bold);
  color: var(--primary);
}

.lesson-record-coach-header span {
  font-size: var(--font-label-2);
  font-weight: var(--weight-semibold);
  color: var(--primary);
  opacity: 0.85;
}

.lesson-record-coach-group.is-rental-group .lesson-record-coach-header {
  background: var(--green-soft);
}

.lesson-record-coach-group.is-rental-group .lesson-record-coach-header strong,
.lesson-record-coach-group.is-rental-group .lesson-record-coach-header span {
  color: var(--green-dark, #166534);
}

.lesson-record-coach-group.is-rental-group .lesson-record-coach-header::after {
  color: var(--green-dark, #166534);
}

.lesson-record-coach-group .lesson-record-card {
  margin-bottom: 10px;
}

.lesson-record-coach-group .lesson-record-card:last-child {
  margin-bottom: 0;
}

/* ============================================================
   [클로드] 정산 확인 시스템 1단계 (2026-07-20)
   ============================================================ */

.settlement-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.settlement-badge.is-sent {
  background: var(--amber-soft, #fef3c7);
  color: #854f0b;
}

.settlement-badge.is-revise {
  background: var(--red-soft, #fee2e2);
  color: #a32d2d;
}

.settlement-badge.is-confirmed {
  background: var(--green-soft);
  color: var(--green-dark);
}

.settlement-badge.is-paid {
  background: var(--primary-tint);
  color: var(--primary);
}

/* 대표 쪽 — 정산 카드 푸터 */
.coach-payroll-settlement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.coach-payroll-settlement .ghost-button {
  min-height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

.coach-payroll-settlement-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.coach-payroll-settlement-note {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-payroll-settlement-warning {
  width: 100%;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.coach-payroll-settlement.is-send-settlement {
  flex-wrap: nowrap;
}

.coach-payroll-settlement.is-send-settlement .coach-payroll-settlement-warning {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  line-height: 1.4;
}

.coach-payroll-settlement.is-send-settlement .coach-payroll-settlement-buttons {
  flex: 0 0 auto;
}

/* 코치 쪽 — 내 정산 패널 */
.coach-settlement-list {
  display: grid;
  gap: 10px;
}

.coach-settlement-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #f8fbff;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.coach-settlement-card-main {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 4px;
}

.coach-settlement-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.coach-settlement-card-title strong {
  font-size: 15px;
  font-weight: 800;
}

.coach-settlement-card-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.coach-settlement-card .ghost-button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

/* 레슨·대관 연장 카드 — 정산 카드를 세로로 눕혀 아래에 응답 버튼 두 개를 둔다 */
.profile-extension-card {
  flex-direction: column;
  align-items: stretch;
}

.profile-extension-card .coach-settlement-actions .ghost-button {
  flex: 1;
  min-height: 44px;
  padding: 0;
  font-size: 14px;
}

.profile-extension-card .coach-settlement-status-note {
  margin: 0;
}

/* 코치 쪽 — 정산서 다이얼로그 */
#coachSettlementDialog .reservation-form {
  border-radius: 20px;
}

/* 닫기(X) 버튼 스타일은 파일 끝 "다이얼로그 닫기 버튼 공통" 블록에서 일괄 적용 */

.coach-settlement-dialog-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.coach-settlement-dialog-body {
  display: grid;
  gap: 0;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.coach-settlement-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.coach-settlement-row:last-of-type {
  border-bottom: 0;
}

.coach-settlement-row > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.coach-settlement-row strong {
  font-size: 14px;
  font-weight: 700;
}

.coach-settlement-row span {
  color: var(--muted);
  font-size: 12px;
}

.coach-settlement-row b {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 800;
}

.coach-settlement-total {
  display: grid;
  gap: 6px;
  padding: 12px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.coach-settlement-total > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.coach-settlement-total-pay {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.coach-settlement-total-pay span {
  font-size: 13px;
  font-weight: 700;
}

.coach-settlement-total-pay strong {
  font-size: 20px;
  font-weight: 900;
  color: var(--primary);
}

.coach-settlement-actions {
  display: flex;
  gap: 8px;
}

.coach-settlement-actions .ghost-button,
.coach-settlement-actions .primary-button {
  flex: 1;
  min-height: 44px;
  font-size: 14px;
}

.coach-settlement-revise-form {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.coach-settlement-revise-form textarea,
.coach-settlement-revise-note {
  width: 100%;
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  font: inherit;
  font-size: 14px;
  resize: vertical;
}

/* [정산서 서명] 확인 완료 전에 손글씨 서명을 받는다 (2026-07-27) */
.coach-settlement-sign {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.coach-settlement-sign-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.coach-settlement-sign-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.coach-settlement-sign-head .coach-settlement-sign-clear {
  min-height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

.coach-settlement-sign-pad {
  display: block;
  width: 100%;
  height: 140px;
  border: 1px dashed var(--line);
  border-radius: 11px;
  background: var(--surface, #ffffff);
  touch-action: none; /* 서명 중 화면이 스크롤되지 않게 */
}

.coach-settlement-sign-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

/* 저장된 서명 표시 — 코치 팝업(내 서명)과 관리자 정산서 보기 공용 */
.coach-settlement-signature {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.coach-settlement-signature span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.coach-settlement-signature img {
  width: 100%;
  max-height: 140px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface, #ffffff);
}

.coach-settlement-status-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.coach-settlement-status-quote {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: var(--red-soft, #fee2e2);
  border-radius: 10px;
  color: #a32d2d;
  font-size: 13px;
}

/* [클로드] 정산 2단계 — 재발송 변경점 하이라이트 (2026-07-20) */
.coach-settlement-changes-banner {
  padding: 9px 12px;
  background: var(--amber-soft, #fef3c7);
  color: #854f0b;
  font-size: 12px;
  font-weight: 700;
}

.coach-settlement-row.is-changed {
  background: var(--amber-soft, #fef3c7);
}

.coach-settlement-row-change {
  color: #854f0b;
  font-size: 12px;
  font-weight: 700;
}

.coach-settlement-row-added {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 800;
  vertical-align: 1px;
}

.coach-settlement-row.is-removed {
  background: var(--bg);
}

.coach-settlement-row.is-removed strong {
  color: var(--muted);
  text-decoration: line-through;
}

.coach-settlement-row.is-removed span {
  color: var(--muted);
}

.coach-settlement-total-change {
  color: #854f0b;
  font-size: 12px;
  font-weight: 700;
}

/* [클로드] 정산 3단계 — 정산 내역 보관함 + 공유 (2026-07-20) */
.coach-payroll-header-actions {
  display: flex;
  justify-content: flex-end;
}

.coach-payroll-header-actions .ghost-button {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
  white-space: nowrap;
}

.coach-payroll-settlement-buttons {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

.coach-payroll-settlement .ghost-button {
  margin-left: 0;
}

#settlementHistoryDialog .reservation-form {
  border-radius: 20px;
}

/* 닫기(X) 버튼 스타일은 파일 끝 "다이얼로그 닫기 버튼 공통" 블록에서 일괄 적용 */

.settlement-history-list {
  display: grid;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
}

.settlement-history-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: #f8fbff;
  border: 1px solid var(--line);
  border-radius: 12px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.settlement-history-row:hover,
.settlement-history-row:focus-visible {
  border-color: var(--primary);
  background: var(--primary-tint);
}

.settlement-history-main {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 4px;
}

.settlement-history-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.settlement-history-title strong {
  font-size: 14px;
  font-weight: 800;
}

.settlement-history-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.settlement-history-chevron {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 18px;
  font-weight: 700;
}

/* [클로드] 레슨장 목록 하트 (스토어 하트와 동일 톤, 2026-07-20) */
.lesson-center-card-name-row {
  display: block;
  min-width: 0;
}

.lesson-center-card-name-row strong {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.lesson-center-like-button {
  min-width: 40px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 4px;
  padding: 0;
  color: #9CA3AF;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.lesson-center-like-button span {
  font-size: 21px;
  line-height: 1;
}

.lesson-center-like-button b {
  min-width: 10px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.lesson-center-like-button.is-liked {
  color: #EF476F;
}

.lesson-center-card-chips .lesson-center-like-button {
  min-height: 38px;
  margin-left: 2px;
}

/* ============================================================
   [클로드] 코치 예약표 리스킨 — 월간/주간/일간 정돈 (2026-07-20)
   기능 무변경, .coach-page 스코프 오버라이드 레이어.
   ============================================================ */

/* 상단 컨트롤 — 타이포 정돈 */
.coach-page .coach-month-button {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.coach-page .coach-month-nav-button {
  font-size: 22px;
  color: var(--muted);
}

.coach-page .coach-view-tabs button {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}

.coach-page .coach-view-tabs button.is-active {
  color: var(--primary);
}

.coach-page .coach-rangebar #scheduleTitle {
  font-size: 19px;
  font-weight: 800;
}

.coach-page .coach-rangebar .icon-button {
  font-size: 26px;
  color: var(--muted);
}

/* ---------- 월간 ---------- */
.coach-page .coach-month-weekday {
  min-height: 38px;
  justify-content: center;
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.coach-page .coach-month-weekday.is-sunday { color: #E5484D; }
.coach-page .coach-month-weekday.is-saturday { color: var(--primary); }

.coach-page .coach-month-day {
  min-height: 96px;
  gap: 4px;
  padding: 8px 5px 7px;
  border-right: 1px solid #F1F3F7;
  border-bottom: 1px solid #F1F3F7;
  transition: background 0.12s ease;
}

.coach-page .coach-month-day:hover {
  background: #FAFCFF;
}

.coach-page .coach-month-day-number {
  min-width: 26px;
  width: 26px;
  height: 26px;
  margin: 0 auto;
  justify-content: center;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 800;
}

.coach-page .coach-month-day.is-sunday:not(.is-outside) .coach-month-day-number { color: #E5484D; }
.coach-page .coach-month-day.is-saturday:not(.is-outside) .coach-month-day-number { color: var(--primary); }

.coach-page .coach-month-day.is-today .coach-month-day-number {
  background: var(--primary);
  color: #fff;
}

.coach-page .coach-month-day.is-active {
  outline: 1.5px solid var(--primary);
  outline-offset: -1.5px;
  background: #F6F9FF;
}

.coach-page .coach-month-day.is-active .coach-month-day-number {
  color: var(--primary);
}

.coach-page .coach-month-day.is-today .coach-month-day-number,
.coach-page .coach-month-day.is-today.is-active .coach-month-day-number {
  color: #fff;
}

.coach-page .coach-month-day.is-outside {
  opacity: 0.45;
}

.coach-page .coach-month-count {
  min-height: 0;
  color: #8B95A1;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.coach-page .coach-month-events {
  gap: 3px;
}

.coach-page .coach-month-event,
.coach-page .coach-month-more {
  padding: 2px 6px;
  color: #2A63C9;
  background: #EAF1FF;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-page .coach-month-event.is-rental {
  color: #9A4B2F;
  background: #FEF1EC;
}

.coach-page .coach-month-more {
  color: var(--muted);
  background: transparent;
  font-weight: 600;
}

/* ---------- 일자 아젠다·주간 공통 그룹 카드 ---------- */
.coach-page .coach-agenda-title {
  min-height: 52px;
  padding: 0 16px;
  font-size: 17px;
  font-weight: 800;
}

.coach-page .coach-agenda-group,
.coach-page .coach-week-group {
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: none;
}

.coach-page .coach-group-header {
  min-height: 50px;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.coach-page .coach-group-header h3 {
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
}

.coach-page .coach-group-header > span {
  padding: 2px 9px;
  color: var(--primary);
  background: var(--primary-tint);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.coach-page .coach-agenda-group.is-rental .coach-group-header,
.coach-page .coach-week-group.is-rental .coach-group-header {
  background: #fff;
}

.coach-page .coach-agenda-group.is-rental .coach-group-header h3,
.coach-page .coach-week-group.is-rental .coach-group-header h3 {
  color: var(--ink);
}

.coach-page .coach-agenda-group.is-rental .coach-group-header > span,
.coach-page .coach-week-group.is-rental .coach-group-header > span {
  color: #9A4B2F;
  background: #FEF1EC;
}

.coach-page .coach-group-add {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}

/* 아젠다 예약 행 — 통짜 파란 박스 → 조용한 행 */
.coach-page .coach-group-reservation {
  min-height: 50px;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  padding: 8px 12px;
  background: #F6F9FF;
  border: 0;
  border-left: 3px solid #3B7BFF;
  border-radius: 0 10px 10px 0;
}

.coach-page .coach-group-reservation time {
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
}

.coach-page .coach-group-reservation strong {
  font-size: 14px;
  font-weight: 700;
}

.coach-page .coach-group-reservation span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.coach-page .coach-group-reservation.confirmed {
  background: #FEF6F2;
  border-left-color: #E8794A;
}

.coach-page .coach-group-reservation.confirmed time {
  color: #B45332;
}

/* ---------- 주간 ---------- */
.coach-page .coach-week-day-row {
  min-height: 54px;
  grid-template-columns: 88px minmax(0, 1fr);
  border-bottom: 1px solid #F1F3F7;
}

.coach-page .coach-week-date {
  gap: 6px;
  padding: 8px 12px;
  border-right: 1px solid #F1F3F7;
}

.coach-page .coach-week-date strong {
  font-size: 14px;
  font-weight: 800;
}

.coach-page .coach-week-date span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.coach-page .coach-week-day-row.is-today .coach-week-date {
  background: var(--primary-tint);
}

.coach-page .coach-week-day-row.is-active {
  background: #F6F9FF;
}

/* 멤버 칩 — 세로 통짜 → 가로로 흐르는 알약 */
.coach-page .coach-week-members {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
}

.coach-page .coach-week-member {
  width: auto;
  min-height: 30px;
  padding: 5px 11px;
  color: #2A63C9;
  background: #EAF1FF;
  border: 0;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
}

.coach-page .coach-week-member.confirmed {
  color: #9A4B2F;
  background: #FEF1EC;
  border: 0;
}

.coach-page .coach-week-empty {
  color: #B0B8C1;
  font-size: 12px;
  font-weight: 600;
}

/* ---------- 일간 ---------- */
.coach-page .schedule-grid .grid-cell.header {
  color: var(--ink);
  background: #FAFBFD;
  font-size: 13px;
  font-weight: 800;
  border-bottom: 1px solid var(--line);
}

.coach-page .schedule-grid .grid-cell.time-header {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.coach-page .schedule-grid .time-cell {
  color: #B0B8C1;
  font-size: 10px;
  font-weight: 600;
}

.coach-page .schedule-grid .time-cell.major-time {
  color: #6F7884;
  font-size: 11px;
  font-weight: 700;
}

.coach-page .schedule-grid .slot-cell {
  border-top: 1px solid #F4F6F9;
  border-right: 1px solid #F4F6F9;
}

.coach-page .schedule-grid .slot-cell.major-row {
  border-top-color: #E7EBF1;
}

.coach-page .schedule-grid .slot-add {
  color: #C6CDD8;
  background: transparent;
  border: 0;
  font-size: 16px;
  font-weight: 600;
}

.coach-page .schedule-grid .slot-add:hover {
  color: var(--primary);
  background: var(--primary-tint);
  border-radius: 8px;
}

.coach-page .daily-reservation-card {
  border: 0;
  border-left: 3px solid #3B7BFF;
  border-radius: 0 9px 9px 0;
  background: #EAF2FF;
  box-shadow: none;
  color: #123264;
}

.coach-page .daily-reservation-card strong {
  font-size: 13px;
  font-weight: 800;
}

.coach-page .daily-reservation-card .reservation-time-range {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.8;
}

.coach-page .daily-reservation-card .reservation-meta {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.7;
}

.coach-page .daily-reservation-card.coach-kim {
  background: #E8F7EE;
  border-left-color: #22A75D;
  color: #14532D;
}

.coach-page .daily-reservation-card.confirmed {
  background: #FEF1EC;
  border-left-color: #E8794A;
  color: #7C3A22;
}

@media (max-width: 760px) {
  .coach-page .coach-month-button {
    font-size: 19px;
  }

  .coach-page .coach-view-tabs button {
    width: auto;
    padding: 0 10px;
    font-size: 13px;
  }

  .coach-page .coach-rangebar #scheduleTitle {
    font-size: 17px;
  }

  .coach-page .coach-month-day {
    min-height: 84px;
    padding: 6px 3px 6px;
  }

  .coach-page .coach-month-day-number {
    min-width: 24px;
    width: 24px;
    height: 24px;
    font-size: 14px;
  }

  .coach-page .coach-agenda-title {
    font-size: 16px;
  }

  .coach-page .coach-week-day-row {
    grid-template-columns: 64px minmax(0, 1fr);
  }
}

/* [클로드] 정산서 알림 배너 + 뱃지 (2026-07-20) */
.coach-settlement-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  margin: 12px 16px 0;
  padding: 12px 16px;
  background: var(--primary-tint);
  border: 1px solid rgba(0, 102, 255, 0.25);
  border-radius: 14px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.coach-settlement-notice:hover {
  background: #DFEBFF;
}

.coach-settlement-notice-count {
  flex: 0 0 auto;
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.coach-settlement-notice strong {
  min-width: 0;
  flex: 1;
  color: var(--primary);
  font-size: 14px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-settlement-notice-arrow {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 18px;
  font-weight: 700;
}

.coach-settlement-pending-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 10px;
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  vertical-align: 3px;
}

/* 프로필 > 본인 전용 급여·정산 */
.profile-dialog .profile-payroll-panel {
  display: grid;
}

.profile-dialog .profile-payroll-panel[hidden] {
  display: none;
}

.profile-payroll-header {
  margin: 0;
}

.profile-payroll-header h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* 안내 문구를 뺀 뒤로 "급여 내역 보기" 버튼 하나만 남았다 — 감싸던 회색 상자는
   버튼 뒤에 빈 테두리로만 보여서 걷어냈다. (2026-08-06 사용자 요청) */
.profile-payroll-privacy {
  display: grid;
}

.profile-payroll-privacy[hidden],
.profile-payroll-content[hidden] {
  display: none;
}



.profile-payroll-privacy strong {
  display: block;
}

.profile-payroll-privacy p {
  margin: 4px 0 0;
  line-height: 1.45;
}

.profile-payroll-content {
  display: grid;
  gap: 12px;
}

/* "다시 가리기"가 제목 줄로 올라가면서, 안내 문구와 그것을 담던 줄은 통째로
   사라졌다. (2026-08-06 사용자 요청) 좌우 배치는 .section-header 가 이미 한다. */
.profile-payroll-header .ghost-button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
}

/* 급여·정산 월 이동 — 정산서를 월별로 넘겨 본다 (2026-07-28) */
.profile-payroll-month {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.profile-payroll-month strong {
  min-width: 108px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}

.profile-payroll-month .icon-button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface, #ffffff);
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
}

.profile-payroll-content .coach-settlement-list {
  margin-top: 0;
}

/* display:inline-block 이 UA의 [hidden]{display:none} 를 이겨서, 숨긴 배지가
   글자 없는 파란 알약으로 남았다. 배지를 쓰는 곳 모두에 해당한다. */
.coach-settlement-pending-badge[hidden] {
  display: none;
}

/* 프로필 > 내 이용권 (스토어 스트링 교체 이용권) */
.profile-pass-list {
  display: grid;
  gap: 10px;
}

.profile-pass-card {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  background: #f8fbff;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.profile-pass-card strong {
  font-size: 15px;
  font-weight: 800;
}

.profile-pass-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.profile-pass-card p {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 2px 0 0;
}

.profile-pass-card p b {
  font-size: 15px;
  font-weight: 800;
  color: var(--primary);
}

.profile-pass-card p span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.profile-pass-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.profile-pass-empty .ghost-button {
  min-height: 34px;
  padding: 0 14px;
  font-size: 13px;
}

.profile-pass-history {
  display: grid;
  gap: 8px;
}

.profile-pass-history[hidden] {
  display: none;
}

.profile-pass-history h3 {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.profile-pass-history-list {
  display: grid;
  gap: 6px;
}

.profile-pass-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.profile-pass-history-row span {
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
}

.profile-pass-history-row small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.profile-pass-history-row em {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  color: var(--primary);
}


/* ============================================================
   [클로드] 다이얼로그 닫기 버튼 공통 — 크로스 라인 정원 X (2026-07-20)
   개별 다이얼로그마다 복붙돼 있던 6벌을 한 블록으로 통합.
   새 다이얼로그에 같은 X를 쓰려면 여기 선택자에 ID만 추가.
   ============================================================ */

#lessonRegistrationDialog .dialog-header .icon-button,
#rentalRegistrationDialog .dialog-header .icon-button,
#lessonCenterCoachProfileDialog .dialog-header .icon-button,
#lessonCenterGroupRegistrationDialog .dialog-header .icon-button,
#coachSettlementDialog .dialog-header .icon-button,
#settlementHistoryDialog .dialog-header .icon-button,
#adminSettlementViewDialog .dialog-header .icon-button,
#coachProfileEditDialog .dialog-header .icon-button {
  position: relative;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

#lessonRegistrationDialog .dialog-header .icon-button::before,
#lessonRegistrationDialog .dialog-header .icon-button::after,
#rentalRegistrationDialog .dialog-header .icon-button::before,
#rentalRegistrationDialog .dialog-header .icon-button::after,
#lessonCenterCoachProfileDialog .dialog-header .icon-button::before,
#lessonCenterCoachProfileDialog .dialog-header .icon-button::after,
#lessonCenterGroupRegistrationDialog .dialog-header .icon-button::before,
#lessonCenterGroupRegistrationDialog .dialog-header .icon-button::after,
#coachSettlementDialog .dialog-header .icon-button::before,
#coachSettlementDialog .dialog-header .icon-button::after,
#settlementHistoryDialog .dialog-header .icon-button::before,
#settlementHistoryDialog .dialog-header .icon-button::after,
#adminSettlementViewDialog .dialog-header .icon-button::before,
#adminSettlementViewDialog .dialog-header .icon-button::after,
#coachProfileEditDialog .dialog-header .icon-button::before,
#coachProfileEditDialog .dialog-header .icon-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 2px;
  border-radius: 2px;
  background: var(--sub);
  transition: background 0.15s ease;
}

#lessonRegistrationDialog .dialog-header .icon-button::before,
#rentalRegistrationDialog .dialog-header .icon-button::before,
#lessonCenterCoachProfileDialog .dialog-header .icon-button::before,
#lessonCenterGroupRegistrationDialog .dialog-header .icon-button::before,
#coachSettlementDialog .dialog-header .icon-button::before,
#settlementHistoryDialog .dialog-header .icon-button::before,
#adminSettlementViewDialog .dialog-header .icon-button::before,
#coachProfileEditDialog .dialog-header .icon-button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

#lessonRegistrationDialog .dialog-header .icon-button::after,
#rentalRegistrationDialog .dialog-header .icon-button::after,
#lessonCenterCoachProfileDialog .dialog-header .icon-button::after,
#lessonCenterGroupRegistrationDialog .dialog-header .icon-button::after,
#coachSettlementDialog .dialog-header .icon-button::after,
#settlementHistoryDialog .dialog-header .icon-button::after,
#adminSettlementViewDialog .dialog-header .icon-button::after,
#coachProfileEditDialog .dialog-header .icon-button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

#lessonRegistrationDialog .dialog-header .icon-button:hover,
#lessonRegistrationDialog .dialog-header .icon-button:focus-visible,
#rentalRegistrationDialog .dialog-header .icon-button:hover,
#rentalRegistrationDialog .dialog-header .icon-button:focus-visible,
#lessonCenterCoachProfileDialog .dialog-header .icon-button:hover,
#lessonCenterCoachProfileDialog .dialog-header .icon-button:focus-visible,
#lessonCenterGroupRegistrationDialog .dialog-header .icon-button:hover,
#lessonCenterGroupRegistrationDialog .dialog-header .icon-button:focus-visible,
#coachSettlementDialog .dialog-header .icon-button:hover,
#coachSettlementDialog .dialog-header .icon-button:focus-visible,
#settlementHistoryDialog .dialog-header .icon-button:hover,
#settlementHistoryDialog .dialog-header .icon-button:focus-visible,
#adminSettlementViewDialog .dialog-header .icon-button:hover,
#adminSettlementViewDialog .dialog-header .icon-button:focus-visible,
#coachProfileEditDialog .dialog-header .icon-button:hover,
#coachProfileEditDialog .dialog-header .icon-button:focus-visible {
  background: var(--bg);
}

#lessonRegistrationDialog .dialog-header .icon-button:hover::before,
#lessonRegistrationDialog .dialog-header .icon-button:hover::after,
#rentalRegistrationDialog .dialog-header .icon-button:hover::before,
#rentalRegistrationDialog .dialog-header .icon-button:hover::after,
#lessonCenterCoachProfileDialog .dialog-header .icon-button:hover::before,
#lessonCenterCoachProfileDialog .dialog-header .icon-button:hover::after,
#lessonCenterGroupRegistrationDialog .dialog-header .icon-button:hover::before,
#lessonCenterGroupRegistrationDialog .dialog-header .icon-button:hover::after,
#coachSettlementDialog .dialog-header .icon-button:hover::before,
#coachSettlementDialog .dialog-header .icon-button:hover::after,
#settlementHistoryDialog .dialog-header .icon-button:hover::before,
#settlementHistoryDialog .dialog-header .icon-button:hover::after,
#adminSettlementViewDialog .dialog-header .icon-button:hover::before,
#adminSettlementViewDialog .dialog-header .icon-button:hover::after,
#coachProfileEditDialog .dialog-header .icon-button:hover::before,
#coachProfileEditDialog .dialog-header .icon-button:hover::after {
  background: var(--ink);
}

/* [클로드] 코치 프로필 설정 팝업 셸 (2026-07-20) */
#coachProfileEditDialog .reservation-form {
  border-radius: 20px;
}

.coach-profile-edit-dialog-body {
  margin-bottom: 14px;
}

.coach-profile-edit-dialog-body .coach-rate-edit-box {
  border: 0;
  padding: 0;
}

.coach-profile-edit-dialog-actions {
  display: flex;
  gap: 8px;
}

.coach-profile-edit-dialog-actions .ghost-button,
.coach-profile-edit-dialog-actions .primary-button,
.coach-profile-edit-dialog-actions .danger-button {
  flex: 1;
  min-height: 44px;
  font-size: 14px;
}

/* ============================================================
   [클로드] 코치 프로필 설정(코치 목록 인라인 편집기) 다듬기 (2026-07-20)
   코치 프로필 팝업(#lessonCenterCoachProfileDialog)과 같은 톤.
   ============================================================ */

:is(#coachBranchList, #coachProfileEditDialogBody) .coach-rate-edit-box {
  gap: 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}

/* 사진 구역 — 원형 아바타 + 옅은 카드 */
:is(#coachBranchList, #coachProfileEditDialogBody) .coach-profile-photo-editor {
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  margin-top: 0;
  padding: 12px;
  background: var(--bg);
  border: 0;
  border-radius: 12px;
}

:is(#coachBranchList, #coachProfileEditDialogBody) .coach-profile-photo-preview {
  width: 56px;
  height: 56px;
  color: var(--primary);
  background: var(--primary-tint);
  border-radius: 50%;
  font-size: 18px;
  font-weight: 800;
}

:is(#coachBranchList, #coachProfileEditDialogBody) .coach-profile-photo-preview.has-photo {
  background: var(--bg);
}

/* 지우기 버튼 제거 후: 라벨 왼쪽·선택 버튼 오른쪽 끝, 한 줄 */
:is(#coachBranchList, #coachProfileEditDialogBody) .coach-profile-photo-controls {
  flex-wrap: nowrap;
  justify-content: space-between;
}

:is(#coachBranchList, #coachProfileEditDialogBody) .coach-profile-photo-controls > span {
  width: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

:is(#coachBranchList, #coachProfileEditDialogBody) .coach-profile-photo-picker {
  flex: 0 0 auto;
  margin-left: auto;
}

:is(#coachBranchList, #coachProfileEditDialogBody) .coach-profile-photo-controls .ghost-button {
  min-height: 32px;
  min-width: 0;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

/* 라벨·텍스트 입력 */
:is(#coachBranchList, #coachProfileEditDialogBody) .coach-profile-edit-grid {
  gap: 12px;
  margin-top: 0;
}

:is(#coachBranchList, #coachProfileEditDialogBody) .coach-profile-edit-input {
  gap: 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

:is(#coachBranchList, #coachProfileEditDialogBody) .coach-profile-edit-input textarea {
  min-height: 72px;
  padding: 10px 12px;
  border-radius: 11px;
  font-weight: 500;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

:is(#coachBranchList, #coachProfileEditDialogBody) .coach-profile-edit-input textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
}

:is(#coachBranchList, #coachProfileEditDialogBody) .coach-profile-edit-input textarea::placeholder {
  color: #A8B0BC;
  font-weight: 500;
}

/* 이력 이미지 — 초록 점선 → 조용한 점선 */
:is(#coachBranchList, #coachProfileEditDialogBody) .coach-profile-photo-editor.is-history-image .coach-profile-photo-preview {
  height: 96px;
  color: var(--muted);
  background: var(--bg);
  border: 1.5px dashed #D5DAE2;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}

:is(#coachBranchList, #coachProfileEditDialogBody) .coach-profile-photo-editor.is-history-image .coach-profile-photo-preview.has-photo {
  border: 1px solid var(--line);
  background: #fff;
}

/* 저장(강조)·취소 버튼 */
#coachBranchList [data-coach-rate-save-id] {
  color: var(--primary);
  border-color: var(--primary);
  font-weight: 700;
}

#coachBranchList [data-coach-rate-cancel] {
  color: var(--muted);
}

/* ============================================================
   프로필 정보 다이얼로그 — 디자인 정리 (2026-07-21, 클로드)
   leftover green/navy hex → 디자인 토큰(파랑/중성) 통일
   타이포·여백 리듬 정리, 저장(주동작) 버튼 강조
   ============================================================ */
.profile-dialog-shell {
  background: var(--bg);
}

.profile-dialog-header h2 {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.profile-dialog .profile-dialog-workspace {
  padding: 14px;
  gap: 12px;
}

.profile-dialog .profile-overview,
.profile-dialog .profile-form-panel,
.profile-dialog .profile-payroll-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* ‼️ 이 판이 프로필 카드 간격의 "이기는" 판이다 — 같은 선택자가 앞쪽에도 여러 벌 있는데
   전부 여기에 진다. 2026-08-06 사용자 요청(gap·padding 12px)이 앞판에만 들어가는 바람에
   화면에 닿은 적이 없었다. 값을 바꿀 일이 있으면 여기다. (tests/profile-overview-spacing) */
.profile-dialog .profile-overview {
  gap: 12px;
  padding: 12px;
}

.profile-dialog .profile-form-panel {
  padding: 16px;
}

.profile-dialog .profile-avatar {
  color: var(--primary);
  background: var(--primary-tint);
  border: 1px solid #D5E2FB;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.14);
  font-weight: 800;
}

.profile-dialog .profile-photo-badge {
  background: var(--primary);
  border: 2px solid var(--surface);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.30);
}

.profile-dialog .profile-heading h1 {
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}



.profile-dialog .profile-form {
  gap: 10px;
}

.profile-dialog .profile-form .form-grid {
  gap: 8px;
}

.profile-dialog .profile-form label {
  min-height: 62px;
  gap: 4px;
  padding: 9px 12px 10px;
  color: var(--sub);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
}

.profile-dialog .profile-form label:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.profile-dialog .profile-form input,
.profile-dialog .profile-form select {
  min-height: 24px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.profile-dialog .profile-form input::placeholder {
  color: var(--mute);
  font-weight: 600;
}

.profile-dialog .profile-action-row {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  margin-top: 2px;
}

.profile-dialog .profile-action-row .profile-logout-button {
  min-width: 88px;
  min-height: 46px;
  padding: 0 16px;
  color: var(--red);
  background: var(--red-soft);
  border: 1px solid #F1CFCF;
  border-radius: var(--radius-btn);
  font-size: 14px;
  font-weight: 700;
}

.profile-dialog .profile-action-row .profile-save-button {
  min-height: 46px;
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 800;
}

.profile-dialog .profile-payroll-panel {
  gap: 12px;
  padding: 16px;
}

.profile-payroll-header h2 {
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
}

/* Wanted 토큰 판(위 기본 규칙과 짝) — 여기서도 회색 상자를 다시 칠하고 있었다. */

.profile-payroll-privacy strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
}

.profile-payroll-privacy p {
  color: var(--sub);
  font-size: 13px;
}

/* 개요 카드: 아바타·이름·사진변경 묶음을 카드 세로 중앙에 정렬(위쪽 치우침 방지) */
.profile-dialog .profile-overview {
  align-items: center;
}

/* 이름줄: 이름 아래에 역할 배지 — 사진 옆이 아니라 밑으로 내려 가운데 정렬
   (2026-08-06 사용자 요청. 전에는 아바타 옆에 나란히 두느라 42px 내려 놨었다) */
.profile-dialog .profile-name-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}



.profile-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary-tint);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.profile-role-badge[hidden] {
  display: none;
}

/* 공통 기본 배너: 선택 시안 1 (등록 이미지가 없는 모든 기본 배너에만 적용) */
.home-banner.has-no-image {
  background-color: #061631;
  background-image:
    linear-gradient(90deg, rgba(2, 10, 31, 0.78) 0%, rgba(2, 15, 43, 0.56) 42%, rgba(2, 20, 55, 0.1) 68%, rgba(2, 20, 55, 0.02) 100%),
    url("assets/banner-default-night-tennis.jpg");
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat;
}

/* 클럽 목록 페이지 기본 배너: 선택 시안 3 */
.lesson-centers-page .lesson-centers-banner-section .home-banner.has-no-image {
  background-color: #061631;
  background-image:
    linear-gradient(90deg, rgba(2, 10, 31, 0.76) 0%, rgba(2, 15, 43, 0.5) 42%, rgba(2, 20, 55, 0.08) 68%, rgba(2, 20, 55, 0.01) 100%),
    url("assets/banner-club-list-3d-tennis.jpg");
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat;
}

/* 대회 페이지 기본 배너: 선택 시안 4 */
.tournament-page .tournament-banner-section .home-banner.has-no-image {
  background-color: #061631;
  background-image:
    linear-gradient(90deg, rgba(2, 10, 31, 0.78) 0%, rgba(2, 15, 43, 0.52) 42%, rgba(2, 20, 55, 0.08) 68%, rgba(2, 20, 55, 0.01) 100%),
    url("assets/banner-tournament-action-tennis.jpg");
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat;
}

/* ==========================================================================
   관리자 페이지(admin.html) 데스크톱 전용 배치 — 2026-07-30
   1024px 이상에서만 적용한다. 휴대폰·태블릿(1023px 이하)은 한 줄도 건드리지 않는다.

   왜 여기(파일 끝)인가: 위쪽 @media (min-width: 841px) / (1280px) / (841~1279px)
   블록들이 데스크톱 다중열 배치를 정의해 두었지만, 미디어쿼리 밖에 있는
   `.admin-page .admin-console-workspace { grid-template-columns: 1fr }`(위 "Admin
   segmented pages" 절)가 같은 명시도로 뒤에 와서 전부 이기고 있었다. 그래서
   데스크톱에서 모든 패널이 한 열로 1400px까지 늘어났다. 여기서 다시 덮는다.

   좌우 2열로 나누지 않는 이유: admin-console-left 는 home·coach 섹션만,
   admin-console-right 는 operations·settlement 섹션만 담고 있어서 어떤 탭에서도
   두 열이 동시에 보이지 않는다. 나누면 항상 한쪽이 빈칸으로 남는다.
   대신 읽기 좋은 폭으로 가운데 모으고, 폼 내부를 2열로 접는다.
   ========================================================================== */
@media (min-width: 1024px) {
  /* 1400px 통짜 입력칸을 막는다 — 가운데 정렬 + 편안한 최대 폭 */
  .admin-page .admin-console-workspace {
    width: min(calc(100% - 48px), 1240px);
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 22px;
    /* 하단바(높이 92px + bottom 28px)에 마지막 패널이 물리지 않도록 */
    padding-bottom: 168px;
  }

  /* 위쪽 죽은 데스크톱 블록(@1280 등)이 패널들에 남긴 grid-row/column 지정을
     전부 되돌린다. 한 열 배치에서 그 지정이 살아 있으면
     ① 명시 배치된 패널(레슨장 정보 수정 등)이 자동 배치인 툴바·탭 "위"로 끌려
        올라가 화면 순서가 마크업과 달라지고 — 레슨 대관 관리가 맨 위여야 한다 —
     ② grid-column: 2/4 같은 지정이 암시적 열을 만들어 지점 뷰에서 툴바·탭이
        왼쪽 세로 띠로 짜부라진다. auto 로 풀면 모든 탭·뷰가 마크업 순서대로
        세로 일렬(툴바 → 탭 → 패널들)이 된다. */
  .admin-page .admin-console-workspace > *,
  .admin-page .admin-console-left > *,
  .admin-page .admin-console-right > *,
  .admin-page .coach-admin-grid > * {
    grid-column: auto;
    grid-row: auto;
  }

  /* 홈 편집 폼: 3열 그리드였지만 10개 중 7개가 full-field 라 사실상 1열이었다.
     2열로 좁혀 라벨-입력 한 쌍이 눈에 들어오는 길이가 되게 한다. */
  .admin-page .lesson-center-info-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
  }

  /* full-field(한 줄 전체) 칸들도 2열로 접는다 — 데스크톱에서 이것들이 1165px
     짜리 입력칸이 되어 한 줄이 너무 길었다. 레슨 안내·대관 안내가 나란히 오고,
     영업 시간·기타 안내 같은 여러 줄 칸도 짝을 이룬다. */
  .admin-page .lesson-center-info-form .full-field {
    grid-column: auto;
  }

  /* 사진 선택기는 가로로 넓은 위젯이라 한 줄 전체를 유지한다 */
  .admin-page .lesson-center-info-form .lesson-center-image-field {
    grid-column: 1 / -1;
  }

  /* 하단바: 죽은 왼쪽 열(약 380px) 아래에 맞춰 둔 박스라 홀로 떠 보였다.
     화면 가운데로 모아 의도된 바처럼 보이게 한다. */
  .admin-page .bottom-tabbar {
    left: 50%;
    right: auto;
    width: min(520px, calc(100vw - 64px));
    /* 기본 규칙의 translateZ(0) 를 대체한다 (합성 힌트여서 잃어도 무해) */
    transform: translateX(-50%);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
  }
}

/* 큰 모니터(1440px 이상): 화면 절반 넘게 차고 글자도 또렷하게 보이도록
   전체를 12% 확대하고 작업 영역 상한을 넓힌다. zoom 은 body 에 걸어
   등록 창 같은 다이얼로그(body 직속)까지 같은 배율로 커지게 한다.
   (모바일·노트북 좁은 창은 그대로 — 1439px 이하 무변화) */
@media (min-width: 1440px) {
  .admin-page {
    zoom: 1.12;
  }

  .admin-page .admin-console-workspace {
    width: min(calc(100% - 64px), 1560px);
  }
}

/* 스토어 상품 목록: 이미지가 위에 오는 2열 쇼핑 카드 */
.store-page .store-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 18px;
  padding: 0;
  overflow: visible;
  background: transparent;
  border-radius: 0;
}

.store-page .store-empty {
  grid-column: 1 / -1;
}

/* 스토어 목록 로딩(2026-10-06): 상품이 뜨기 전 빈 안내 카드 자리에 돌아가는 원 — 대회·교류전 목록과 같은 모양 */
.store-page .store-loading {
  justify-items: center;
  align-content: center;
  gap: 12px;
  /* 빈 안내 카드와 같은 132px — 바뀔 때 아래가 밀리지 않게 */
  min-height: 132px;
  padding-block: 30px;
  font-size: 13px;
  font-weight: 700;
}

.store-page .store-loading-spinner {
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  border: 3px solid var(--line, #e1e2e4);
  border-top-color: var(--primary, #0066ff);
  border-radius: 50%;
  animation: store-loading-spin 0.8s linear infinite;
}

@keyframes store-loading-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .store-page .store-loading-spinner { animation-duration: 2.4s; }
}

.store-page .store-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 0 0 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.store-page .store-card + .store-card {
  border-top: 0;
}

.store-page .store-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  align-self: stretch;
  border-radius: 16px;
}

.store-page .store-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.store-page .store-card-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  padding-left: 6px;
}

.store-page .store-card h3 {
  font-size: clamp(16px, 4vw, 20px);
  line-height: 1.35;
}

.store-page .store-card.is-owned h3 {
  padding-right: 0;
}

.store-page .store-card .store-card-description {
  font-size: 13px;
  line-height: 1.45;
}

.store-page .store-price-row {
  min-height: 26px;
  margin-top: 0;
}

.store-page .store-price-row strong {
  font-size: clamp(19px, 5vw, 24px);
}

.store-page .store-card-delete-button {
  top: 10px;
  right: 10px;
}

.store-page .store-card-bottom {
  justify-content: space-between;
  gap: 6px;
}

@media (max-width: 640px) {
  .store-page .store-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 12px;
    padding: 0;
    border-radius: 0;
  }

  .store-page .store-card {
    gap: 10px;
    min-height: 0;
    padding: 0 0 6px;
  }

  .store-page .store-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
  }

  .store-page .store-card-body {
    gap: 7px;
    padding: 0;
    padding-left: 6px;
  }

  .store-page .store-card h3 {
    font-size: 16px;
    line-height: 1.35;
  }

  .store-page .store-card .store-card-description {
    font-size: 12px;
    line-height: 1.4;
  }

  .store-page .store-card-delete-button {
    top: 8px;
    right: 8px;
  }

  .store-page .store-card-actions {
    gap: 5px;
  }
}
/* 프로필에서 시작하는 관리 메뉴와 본인 생성 목록 */
.profile-management-panel[hidden] { display: none !important; }
.profile-management-panel { display: grid; gap: 16px; }
.profile-management-links { display: grid; }
.profile-management-links a { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.profile-management-links a:last-child { border-bottom: 0; }
.profile-management-links a span { color: var(--mute); }
.profile-management-header { display: grid; gap: 16px; margin-bottom: 24px; }
.profile-management-header > a { justify-self: start; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.profile-management-header h1 { font-size: var(--font-title-3, 24px); color: var(--ink); margin: 0; }
#profileOwnedList { display: grid; gap: 16px; }
.profile-owned-card { background: var(--surface); padding: 20px; border-radius: 20px; min-width: 0; }
.profile-owned-card small, .profile-owned-card p, #profileOwnedStatus { color: var(--sub); }
.profile-owned-card h2 { font-size: var(--font-headline-1, 18px); overflow-wrap: anywhere; }
.profile-owned-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }
.profile-owned-actions > * { min-height: 42px; font-size: 12.5px; min-width: 70px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.profile-owned-page .developer-workspace { padding-bottom: 100px; }
.profile-management-status[hidden], .profile-management-status button[hidden] { display: none !important; }
.profile-management-status p { color: var(--sub); font-size: var(--font-body-2); }
.profile-management-status button { min-height: 42px; font-size: 12.5px; }

/* 견본 클럽 카드(2026-10-02) — 홈 가입한 클럽 맨 아래, lesson-centers.js renderSampleClubCard.
   이름은 '클럽 견본', 견본 꼬리표는 2026-10-03 사용자 요청으로 뺐다. */
.club-card-actions .club-sample-toggle {
  min-height: 42px;
  padding: 0 12px;
  font-size: 12.5px;
  white-space: nowrap;
}

/* ===== 게스트 모집 카드 A+B(2026-10-15 사용자 요청) =====
   왼쪽 날짜 칸 · 시간 제목 · 작은 조건 꼬리표(회색 알약 색은 그대로) · 인원 막대 · 점선 아래 게스트비 + 버튼.
   앞쪽 여러 판(기본·640px 이하·토큰 판)을 이 블록이 파일 맨 끝에서 덮는다. 같은 선택자를 이 아래에 또 두지 않는다. */
.home-page .guest-recruit-card .guest-card-top {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: start;
  gap: 14px 14px;
}

.home-page .guest-card-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  /* 배경·테두리 없이 검정 글자만(2026-10-15 사용자 요청) */
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}

.home-page .guest-card-date strong {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.1;
}

.home-page .guest-recruit-card .guest-card-info {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.home-page .guest-recruit-card .guest-card-summary {
  display: block;
}

.home-page .guest-recruit-card .guest-card-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-page .guest-recruit-card .guest-card-heading strong {
  font-size: 18px;
  font-weight: 900;
  white-space: nowrap;
}

/* 상태 배지는 막대 줄의 'N자리 남음' 뒤(2026-10-15 사용자 요청) */
.home-page .guest-card-progress-end {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.home-page .guest-card-progress-end .guest-status-badge {
  min-height: 24px;
  padding: 0 8px;
  font-size: 11.5px;
  white-space: nowrap;
}

.home-page .guest-recruit-card .guest-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  color: var(--sub);
  font-size: 13px;
}

.home-page .guest-recruit-card .guest-card-meta .guest-card-owner {
  margin: 0;
  font-size: 13px;
}

.home-page .guest-recruit-card .guest-card-meta .guest-card-owner::before {
  content: "·";
  margin-right: 8px;
  color: var(--mute);
}

.home-page .guest-recruit-card .guest-card-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.home-page .guest-recruit-card .guest-card-detail .guest-detail-chip {
  width: auto;
  min-width: 0;
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

.home-page .guest-card-progress {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
}

.home-page .guest-card-progress-line {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-height: 26px;
  color: var(--sub);
  font-size: 12.5px;
  font-weight: 700;
}

.home-page .guest-card-progress-line .guest-card-applicants {
  flex: none;
  margin: 0;
  white-space: nowrap;
}

.home-page .guest-card-remaining {
  /* 남은 자리 글자는 상태와 무관하게 검정(2026-10-15 사용자 요청) — 마감 임박은 막대·배지 주황이 알린다 */
  color: var(--ink);
  font-weight: 800;
  white-space: nowrap;
}

.home-page .guest-card-bar {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.home-page .guest-card-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
}

.home-page .guest-card-progress.is-urgent .guest-card-bar i {
  background: var(--amber);
}

.home-page .guest-card-progress.is-closed .guest-card-bar i {
  background: var(--mute);
}

.home-page .guest-recruit-card .guest-card-footer,
.home-page .guest-card-ticket-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding-top: 14px;
  border-top: 1.5px dashed var(--line);
}

.home-page .guest-card-fee {
  flex: 0 0 auto;
  display: grid;
  gap: 1px;
  margin-right: auto;
}

.home-page .guest-card-fee span {
  color: var(--sub);
  font-size: 11.5px;
  font-weight: 700;
}

.home-page .guest-card-fee strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}

.home-page .guest-card-ticket-row .guest-card-actions.is-card-side-actions,
.home-page .guest-recruit-card .guest-card-footer .guest-card-actions {
  width: auto;
  margin-left: 0;
}

/* 지원 취소 · 게스트 승인됨 두 버튼 사이도 아래 줄 간격(6px)과 같게 — 375px 홈에서도 게스트비와 한 줄에 서도록(2026-10-15) */
.home-page .guest-recruit-card .guest-card-footer .guest-card-actions.is-guest-actions {
  gap: 6px;
}

/* 640px 이하 카드 좌우 여백을 24px 로 같게(2026-10-15 사용자 요청) — 위쪽 has-bottom/has-wide 규칙의 34px 가
   오른쪽에만 남아 게스트비 줄이 10px 좁았다. 393px 에서 지원 취소 · 게스트 승인됨이 0.2px 차이로 아랫줄로 밀렸다. */
@media (max-width: 640px) {
  .home-page .guest-recruit-card.has-bottom-guest-action,
  .home-page .guest-recruit-card.has-bottom-guest-action.has-wide-guest-action,
  .home-page .guest-recruit-card.has-wide-guest-action {
    padding-right: 24px;
  }
}

/* 아래 줄 버튼은 글자만큼(높이 42px 그대로) — 게스트비와 한 줄에 서도록 */
.home-page .guest-card-ticket-row .guest-card-actions button,
.home-page .guest-recruit-card .guest-card-footer .guest-card-actions button,
.home-page .guest-recruit-card .guest-card-footer .guest-approval-status {
  width: auto;
  min-width: 72px;
  padding: 0 12px;
}

/* 구력 칸 오른쪽에 고정 '년'(2026-10-15 사용자 요청) — 칸에는 숫자만, 저장은 '3년'.
   예전에 글로 저장한 값('2020-01'·'6개월')이면 profile.js 가 is-text 를 붙여 '년'을 숨긴다. */
.profile-unit-field {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.profile-unit-field input {
  flex: 1 1 auto;
  min-width: 0;
}

.profile-unit-suffix {
  flex: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.profile-unit-field.is-text .profile-unit-suffix {
  display: none;
}

/* 게스트 카드 공개 사진 요약: 기존 막대 왼쪽에 최대 3명 + 나머지 수. */
.home-page .guest-card-progress-line .guest-card-applicants { gap: 4px; }
.home-page .guest-card-progress-line .guest-applicant-avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-width: 2px;
  font-size: 12px;
  color: var(--primary);
  background: var(--primary-tint);
}
.home-page .guest-card-progress-line .guest-applicant-more {
  color: var(--sub);
  font-size: 12px;
  font-weight: 700;
}

/* 게스트 모집 인원은 번개 모임처럼 막대 오른쪽 같은 줄. */
.home-page .guest-card-meter { display: flex; align-items: center; gap: 8px; }
.home-page .guest-card-meter .guest-card-bar { flex: 1; min-width: 0; }
.home-page .guest-card-count { flex: none; color: var(--ink); font-size: 12px; font-weight: 800; white-space: nowrap; }
.home-page .guest-card-progress-line > .guest-status-badge { margin-left: auto; }