/*
Theme Name: Dopamine Detox Club
Theme URI:
Author: DDC
Author URI:
Description: Dopamine Detox Club — 테니스 동호회 PWA-스타일 앱 셸 워드프레스 테마. ELO 랭킹·티어 시스템.
Version: 0.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tennis
Tags: sports, community, ranking, app-shell, responsive, custom-logo, custom-menu, translation-ready
*/

/* ============================================================
   0. Tokens (DDC palette)
   ============================================================ */
:root {
  /* DDC paper palette — page must be SLIGHTLY DARKER than the JPG's lightest
     paper area, so that `mix-blend-mode: darken` makes the entire JPG paper
     invisible (page wins) while keeping the logo's dark elements (D, C, ball, spade, text). */
  --ddc-cream:        #eeedeb;  /* DDC_LOGO.jpg 의 종이 배경 색과 정확히 일치시켜
                                    모바일에서 mix-blend-mode 없이도 로고 사각형이
                                    자연스럽게 사라지게 함 (Photoshop 측정값 기준). */
  --ddc-cream-2:      #D6CFB9;
  --ddc-cream-3:      #F1ECDF;
  --ddc-ink:          #1a1a1a;
  --ddc-ink-2:        #2D2D2D;
  --ddc-ink-3:        #4A4A4A;
  --ddc-olive:        #7B8043;
  --ddc-olive-2:      #6A6F3A;
  --ddc-olive-light:  #A4AB6A;
  --ddc-olive-soft:   #D4D8B2;
  --ddc-muted:        #8A8378;
  --ddc-line:         rgba(26,26,26,.10);
  --ddc-line-strong:  rgba(26,26,26,.18);
  --ddc-surface:      #ffffff;
  --ddc-success:      #16A75C;
  --ddc-danger:       #B23B3B;

  --shadow-1: 0 1px 2px rgba(26,26,26,.06);
  --shadow-2: 0 6px 18px rgba(26,26,26,.08);
  --shadow-3: 0 14px 40px rgba(26,26,26,.12);

  --topbar-h:    60px;
  --bottomnav-h: 72px;
  --app-max:     600px;

  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);

  --font-display: 'Archivo Black', 'Noto Sans KR', sans-serif;
  --font-body:    'Noto Sans KR', 'Inter', system-ui, sans-serif;
}

/* MPA view transitions (Chromium 126+); harmless elsewhere */
@view-transition { navigation: auto; }

/* ============================================================
   1. Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ddc-ink);
  background: var(--ddc-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: contain;
  position: relative;
}
/* Very subtle paper grain matching the logo's textured paper. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .32 0 0 0 0 .27 0 0 0 .4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4, h5 { margin: 0 0 .5em; line-height: 1.18; color: var(--ddc-ink); letter-spacing: -.01em; font-weight: 800; }
h1 { font-size: clamp(1.8rem, 5.5vw, 2.4rem); }
h2 { font-size: clamp(1.35rem, 3.5vw, 1.65rem); }
h3 { font-size: 1.1rem; }
p  { margin: 0 0 1em; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   2. App shell (top bar + content + bottom nav)
   ============================================================ */
body {
  padding-top:    calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
}
body.no-bottomnav { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Decorative cream texture on >desktop so the centered app feels framed */
@media (min-width: 768px) {
  body {
    background:
      radial-gradient(1200px 600px at 50% -10%, var(--ddc-cream-3), transparent 60%),
      var(--ddc-cream-2);
  }
}

.app-shell {
  width: 100%;
  max-width: var(--app-max);
  margin-inline: auto;
  position: relative;
  min-height: calc(100vh - var(--topbar-h) - var(--bottomnav-h));
}
@media (min-width: 768px) {
  .app-shell {
    background: var(--ddc-cream);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-3);
    margin-top: 1.4rem;
    margin-bottom: 1.4rem;
    overflow: hidden;
  }
}

/* ===== Top app bar ===== */
.app-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  background: rgba(238,237,235,.85);  /* matches --ddc-cream #eeedeb */
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease-smooth), box-shadow .2s var(--ease-smooth);
}
.app-bar.is-scrolled {
  border-bottom-color: var(--ddc-line);
  box-shadow: 0 2px 12px rgba(26,26,26,.04);
}
.app-bar__inner {
  width: 100%;
  max-width: var(--app-max);
  height: var(--topbar-h);
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.app-bar__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.app-bar__brand img {
  width: 40px; height: 40px;
  /* DDC_LOGO_small.png is already cropped to just the mark, but it still has
     the paper background — same `darken` trick as the big logo makes it
     visually transparent against the page cream. */
  mix-blend-mode: darken;
  flex-shrink: 0;
}
.app-bar__brand-name {
  font-family: var(--font-display);
  font-size: .72rem;
  line-height: 1.05;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ddc-ink);
  white-space: nowrap;
}
.app-bar__actions { display: flex; align-items: center; gap: 6px; }
.app-bar__btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--ddc-ink);
  transition: background .18s var(--ease-smooth), transform .18s var(--ease-smooth);
}
.app-bar__btn:hover { background: rgba(26,26,26,.06); }
.app-bar__btn:active { transform: scale(.92); }
.app-bar__avatar-link {
  display: inline-flex;
  transition: transform .2s var(--ease-spring);
}
.app-bar__avatar-link:active { transform: scale(.94); }
.app-bar__avatar {
  border: 2px solid var(--ddc-cream);
}

/* ============================================================
   3b. Avatar (shared component — img or initial fallback)
   ============================================================ */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background-color: var(--ddc-ink);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--ddc-cream);
  font-family: var(--font-display);
  letter-spacing: .03em;
  text-transform: uppercase;
}
/* When showing initials, soften the background so it doesn't clash */
.avatar--initial {
  background-color: var(--ddc-cream-2);
  color: var(--ddc-ink);
}

/* Profile page upload UI */
.profile-field--avatar > span {
  display: block; font-size: .8rem; color: var(--ddc-muted);
  margin-bottom: 6px; font-weight: 600; letter-spacing: .02em;
}
.avatar-upload {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--ddc-cream-3);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius);
  padding: 14px;
}
.avatar-upload__current { flex-shrink: 0; }
.avatar-upload__current .avatar { box-shadow: var(--shadow-1); }
.avatar-upload__controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.avatar-upload__btn {
  position: relative;
  cursor: pointer;
  width: fit-content;
  overflow: hidden;
}
.avatar-upload__btn input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.avatar-upload__name {
  font-size: .78rem;
  color: var(--ddc-ink-3);
  word-break: break-all;
}
.avatar-upload__remove {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  font-size: .82rem;
  color: var(--ddc-danger);
  cursor: pointer;
  padding: 8px 10px;
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius);
  box-sizing: border-box;
}
.avatar-upload__remove input[type="checkbox"] {
  accent-color: var(--ddc-danger);
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1px solid var(--ddc-line-strong);
  border-radius: 3px;
  background: #fff;
}
.avatar-upload__remove span {
  min-width: 0;
  word-break: keep-all;
}
.avatar-upload__hint {
  font-size: .72rem;
  color: var(--ddc-muted);
  margin: 0;
}

/* ===== Main content area ===== */
.app-main {
  padding: 18px 18px 28px;
}

/* ===== Bottom nav (tab bar) ===== */
.bottom-nav {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 50;
  background: rgba(238,237,235,.92);  /* matches --ddc-cream #eeedeb */
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--ddc-line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav__inner {
  width: 100%;
  max-width: var(--app-max);
  margin-inline: auto;
  height: var(--bottomnav-h);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
  position: relative;
}
.bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* 비활성도 충분히 진하게 — ink 72%로 WCAG AA 대비 안전마진 확보 */
  color: rgba(26, 26, 26, .72);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  position: relative;
  transition: color .2s var(--ease-smooth), transform .15s var(--ease-smooth);
}
.bottom-nav__item svg {
  width: 24px; height: 24px;
  transition: transform .25s var(--ease-spring), stroke-width .2s var(--ease-smooth);
  stroke-width: 2;
}
.bottom-nav__item:hover { color: var(--ddc-olive); }
.bottom-nav__item:active { transform: scale(.92); }
.bottom-nav__item.is-active {
  /* 활성은 브랜드 올리브 — 검정 대비 컬러로 한눈에 띔 */
  color: var(--ddc-olive);
  font-weight: 800;
}
.bottom-nav__item.is-active svg {
  transform: translateY(-2px) scale(1.1);
  stroke-width: 2.4;
}
.bottom-nav__item.is-active::before {
  content: '';
  position: absolute;
  top: 6px;
  /* 가운데 정렬 — absolute 요소는 부모 flex의 align-items 영향 안 받으므로 직접 정렬 */
  left: 50%;
  transform: translateX(-50%);
  width: 32px; height: 3px;
  border-radius: 99px;
  background: var(--ddc-olive);
  box-shadow: 0 0 8px rgba(123, 128, 67, .35);
  animation: tabSlide .35s var(--ease-spring) both;
}
@keyframes tabSlide {
  from { transform: translateX(-50%) scaleX(.3); opacity: 0; }
  to   { transform: translateX(-50%) scaleX(1);  opacity: 1; }
}

@media (min-width: 768px) {
  .bottom-nav {
    background: rgba(255,255,255,.85);
    border-radius: var(--radius-xl);
    border: 1px solid var(--ddc-line);
    box-shadow: var(--shadow-3);
    max-width: 540px;
    margin: 0 auto;
    left: 0; right: 0;
    bottom: 16px;
    padding-bottom: 0;
  }
  .bottom-nav__inner { max-width: 540px; }
}

/* ============================================================
   3. Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 99px;
  border: 0;
  background: var(--ddc-ink);
  color: var(--ddc-cream);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.005em;
  transition: transform .15s var(--ease-smooth), background .2s var(--ease-smooth), box-shadow .2s var(--ease-smooth);
  box-shadow: var(--shadow-1);
}
.btn:hover { background: var(--ddc-ink-2); box-shadow: var(--shadow-2); }
.btn:active { transform: scale(.97); }

.btn--olive { background: var(--ddc-olive); }
.btn--olive:hover { background: var(--ddc-olive-2); }

.btn--ghost {
  background: transparent;
  color: var(--ddc-ink);
  border: 1.5px solid var(--ddc-line-strong);
  box-shadow: none;
}
.btn--ghost:hover { background: rgba(26,26,26,.05); }

.btn--block { width: 100%; }
.btn--sm { padding: 9px 16px; font-size: .9rem; }
.btn--lg { padding: 15px 26px; font-size: 1.05rem; }

/* 위험 액션 — 강퇴, 영구 삭제 등 */
.btn--danger {
  background: var(--ddc-danger);
  color: #fff;
}
.btn--danger:hover { background: #8B1A1A; }

/* ============================================================
   4. Generic cards
   ============================================================ */
.card {
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-1);
  transition: transform .2s var(--ease-smooth), box-shadow .2s var(--ease-smooth);
}
.card.is-pressable:hover  { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.card.is-pressable:active { transform: translateY(0) scale(.98); }

.card__title  { font-size: 1.05rem; margin: 0 0 .25em; }
.card__lead   { font-size: .9rem; color: var(--ddc-ink-3); margin: 0; }

/* ============================================================
   5. Dashboard — hero / greeting
   ============================================================ */
.dash-hero-logo {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 4px auto 0;
  /* 블렌드 모드 불필요 — 페이지 bg(--ddc-cream #eeedeb)가 JPG 종이 색과 정확히
     일치하므로 사각형 자체가 안 보임. 이전엔 darken/multiply 트릭으로 가려왔는데
     모바일에서 합성 레이어와 충돌해 불안정 → 색 매칭으로 영구 해결. */
  animation: introLogoIn .85s var(--ease-spring) both;
}
@media (min-width: 540px) {
  .dash-hero-logo { max-width: 320px; }
}

.dash-greet {
  padding: 0 4px 18px;
  text-align: center;
}
.dash-greet__hello {
  font-size: .85rem;
  color: var(--ddc-muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
}
.dash-greet__name {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 6vw, 2.3rem);
  letter-spacing: -.005em;
  margin: 4px 0 0;
}
.dash-greet__name em {
  font-style: normal;
  color: var(--ddc-olive);
}

/* ============================================================
   6. Tier rating cards (dashboard + profile)
   ============================================================ */
.tier-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 4px 0 20px;
}
.tier-card {
  position: relative;
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius-lg);
  padding: 16px;
  overflow: hidden;
}
/* Tennis ball icon, peeking from upper-right corner.
   - 3D radial gradient (light upper-left → dark lower-right) for sphere depth
   - White ellipse highlight in upper-left for glossy shine
   - Two seams bowing INWARD (lens shape) — the real tennis ball pattern
   - Subtle outline at .25 opacity so it's not cartoonish */
.tier-card::before {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 112px; height: 112px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='b' cx='32%25' cy='28%25' r='75%25'%3E%3Cstop offset='0%25' stop-color='%23EEF982'/%3E%3Cstop offset='40%25' stop-color='%23D3DE5C'/%3E%3Cstop offset='80%25' stop-color='%238E9A38'/%3E%3Cstop offset='100%25' stop-color='%235E6624'/%3E%3C/radialGradient%3E%3CradialGradient id='sh' cx='35%25' cy='28%25' r='30%25'%3E%3Cstop offset='0%25' stop-color='%23FFFFFF' stop-opacity='.6'/%3E%3Cstop offset='100%25' stop-color='%23FFFFFF' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='46.5' fill='url(%23b)' stroke='%231a1a1a' stroke-opacity='.18' stroke-width='.8'/%3E%3Cpath d='M 8 30 Q 50 44 92 30' fill='none' stroke='%23FFFFFF' stroke-width='2.8' stroke-linecap='round' stroke-opacity='.95'/%3E%3Cpath d='M 8 70 Q 50 56 92 70' fill='none' stroke='%23FFFFFF' stroke-width='2.8' stroke-linecap='round' stroke-opacity='.95'/%3E%3Cellipse cx='34' cy='28' rx='16' ry='10' fill='url(%23sh)'/%3E%3C/svg%3E") no-repeat center / contain;
  filter: drop-shadow(0 6px 14px rgba(94,102,36,.28));
  transition: transform .45s var(--ease-spring);
  pointer-events: none;
}
.tier-card:hover::before { transform: rotate(22deg) scale(1.10); }

/* Card content sits above the ball so text stays readable. */
.tier-card > * { position: relative; z-index: 1; }

/* Empty (no rating yet) — softer ball, still clearly readable as tennis ball */
.tier-card--empty::before { opacity: .55; }
.tier-card__kind {
  font-size: .74rem;
  color: var(--ddc-ink);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
}
.tier-card__rating {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 7vw, 2.4rem);
  line-height: 1;
  margin: 8px 0;
  color: var(--ddc-ink);
  letter-spacing: -.01em;
}
.tier-card__tier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--tier-color, var(--ddc-olive));
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tier-card__tier::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--tier-color, var(--ddc-olive));
  display: inline-block;
}
.tier-card--empty .tier-card__rating { color: #C7C2B5; }
.tier-card--empty .tier-card__tier   { color: #B0AB9E; }
.tier-card--empty .tier-card__tier::before { background: #B0AB9E; }

/* ============================================================
   7. Section heading (dashboard)
   ============================================================ */
.dash-section {
  margin: 22px 0 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.dash-section__title {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.005em;
  margin: 0;
}
.dash-section__more {
  font-size: .8rem;
  color: var(--ddc-olive);
  font-weight: 600;
}

/* ============================================================
   8. Quick actions (dashboard)
   ============================================================ */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.qa {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius);
  color: var(--ddc-ink);
  transition: transform .15s var(--ease-smooth), background .2s var(--ease-smooth);
  font-size: .82rem;
  font-weight: 600;
  text-align: center;
}
.qa:hover  { background: var(--ddc-cream-3); }
.qa:active { transform: scale(.96); }
.qa__icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--ddc-ink);
  color: var(--ddc-cream);
  display: inline-flex; align-items: center; justify-content: center;
}
.qa__icon svg { width: 20px; height: 20px; stroke-width: 1.8; }
.qa--olive .qa__icon { background: var(--ddc-olive); }

/* ============================================================
   9. Recent activity list
   ============================================================ */
.activity-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.activity-item {
  position: relative;                                /* anchor for stretched link */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius);
  transition: transform .15s var(--ease-smooth);
}
.activity-item:active { transform: scale(.99); }
/* Stretched link — the title anchor covers the whole card so any click on the
 * row navigates. The title text remains the visible accessible label. */
.activity-item__stretch { color: inherit; text-decoration: none; }
.activity-item__stretch::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
}
.activity-item__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ddc-cream-2); color: var(--ddc-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem;
  flex-shrink: 0;
}
.activity-item__body { flex: 1; min-width: 0; }
.activity-item__title { font-size: .92rem; font-weight: 600; margin: 0 0 2px; }
.activity-item__meta { font-size: .75rem; color: var(--ddc-muted); margin: 0; }
.activity-item__delta {
  font-family: var(--font-display);
  font-size: .95rem;
  color: var(--ddc-olive);
  flex-shrink: 0;
}
.activity-item__delta.is-down { color: var(--ddc-danger); }

.activity-empty {
  padding: 36px 12px;
  text-align: center;
  color: var(--ddc-muted);
  font-size: .9rem;
  background: var(--ddc-cream-3);
  border: 1px dashed var(--ddc-line-strong);
  border-radius: var(--radius);
}

/* ============================================================
   10. Logged-out intro screen
   ============================================================ */
.intro {
  min-height: calc(100vh - var(--topbar-h) - var(--bottomnav-h) - 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 12px 4px 24px;
}
.intro__logo {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0 auto 14px;
  /* 블렌드 모드 제거 — 페이지 bg(#eeedeb)가 JPG 종이와 정확 매칭되어 불필요. */
  animation: introLogoIn .9s var(--ease-spring) both;
}
/* opacity-only — transform 사용 시 모바일에서 mix-blend-mode가 깨짐 (위 ddc-logo-in 주석 참조) */
@keyframes introLogoIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.intro__lead {
  font-size: 1rem;
  color: var(--ddc-ink-3);
  max-width: 28ch;
  margin: 0 auto 26px;
}
.intro__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 340px;
}

/* ============================================================
   11. Page header (subpages)
   ============================================================ */
.page-head { padding: 6px 0 14px; }
.page-head__kicker {
  font-size: .75rem; color: var(--ddc-olive);
  text-transform: uppercase; letter-spacing: .22em; font-weight: 700;
}
.page-head__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6vw, 2rem);
  margin: 8px 0 4px;
  letter-spacing: -.01em;
}
.page-head__lead { color: var(--ddc-ink-3); font-size: .92rem; margin: 0; }

/* ============================================================
   12. Profile (마이페이지)
   ============================================================ */
.profile-info, .profile-edit, .profile-card {
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin: 12px 0;
}
.profile-info h2, .profile-edit h2, .profile-card__title {
  font-size: 1rem; margin: 0 0 12px; font-weight: 700;
}
.profile-edit h3 { font-size: .92rem; margin: 18px 0 4px; }

/* Merged profile card (basic info summary + edit details in one container) */
.profile-card__head { margin-bottom: 8px; }
.profile-card__summary {
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ddc-line);
}
.profile-card .profile-edit__details {
  /* nested inside the card — remove duplicate border/padding so it integrates */
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius);
  background: var(--ddc-cream-3);
}
.profile-card .profile-edit__details > form {
  background: var(--ddc-surface);
  border-top-color: var(--ddc-line);
}

.profile-dl { display: grid; grid-template-columns: 6em 1fr; gap: 8px 12px; margin: 0; font-size: .92rem; }
.profile-dl dt { color: var(--ddc-muted); font-weight: 500; }
.profile-dl dd { margin: 0; }

.profile-field { display: block; margin: 0 0 14px; }
.profile-field > span {
  display: block; font-size: .8rem; color: var(--ddc-muted);
  margin-bottom: 6px; font-weight: 600; letter-spacing: .02em;
}
.profile-field input,
.profile-field select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--ddc-line-strong);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  background: var(--ddc-cream-3);
  color: var(--ddc-ink);
  transition: border-color .18s var(--ease-smooth), background .18s var(--ease-smooth);
}
/* 읽기 전용 표시 — input/select와 같은 톤이지만 편집 불가임을 시각적으로 약간 톤다운 */
.profile-field__readonly {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px dashed var(--ddc-line);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  background: transparent;
  color: var(--ddc-ink-3);
}
.profile-field input:focus,
.profile-field select:focus {
  outline: none;
  border-color: var(--ddc-olive);
  background: #fff;
}

.profile-actions {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px;
}

.profile-notice {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin: 0 0 14px;
  font-weight: 500;
  font-size: .92rem;
}
.profile-notice--success { background: rgba(123,128,67,.12); color: var(--ddc-olive-2); border-left: 3px solid var(--ddc-olive); }
.profile-notice--error   { background: rgba(178,59,59,.10);  color: var(--ddc-danger);  border-left: 3px solid var(--ddc-danger); }

/* ============================================================
   12b. Matches (list + cards + form)
   ============================================================ */

/* Tabs (singles / doubles) */
.match-tabs {
  display: inline-flex;
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: 99px;
  padding: 4px;
  margin: 0 0 12px;
  box-shadow: var(--shadow-1);
}
.match-tab {
  padding: 8px 18px;
  border-radius: 99px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ddc-muted);
  transition: background .2s var(--ease-smooth), color .2s var(--ease-smooth);
}
.match-tab.is-active {
  background: var(--ddc-ink);
  color: var(--ddc-cream);
}

/* Scope chips (all / mine) */
.match-scope { display: flex; gap: 6px; margin: 0 0 16px; }
.match-scope__chip {
  padding: 6px 14px;
  border-radius: 99px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ddc-ink-3);
  background: transparent;
  border: 1px solid var(--ddc-line-strong);
  transition: background .15s var(--ease-smooth), color .15s var(--ease-smooth), border-color .15s var(--ease-smooth);
}
.match-scope__chip.is-active {
  background: var(--ddc-olive);
  color: #fff;
  border-color: var(--ddc-olive);
}

/* Match list + card */
.match-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }

.match-card {
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-1);
  transition: transform .15s var(--ease-smooth);
}
.match-card:active { transform: scale(.995); }
.match-card--pending {
  background: var(--ddc-cream-3);
  border-style: dashed;
}

.match-card__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.match-card__date {
  font-size: .78rem;
  color: var(--ddc-muted);
  font-weight: 600;
  letter-spacing: .04em;
}
.match-card__chip {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--ddc-ink);
  color: var(--ddc-cream);
  padding: 3px 10px;
  border-radius: 99px;
}

.match-card__body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
.match-card__side {
  display: flex;
  flex-direction: column;
  align-items: center;   /* 양쪽 동일하게 중앙 정렬 */
  gap: 8px;
  min-width: 0;
  text-align: center;
}
.match-card__name {
  font-size: .92rem;
  font-weight: 600;
  color: var(--ddc-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.match-card__side.is-winner .match-card__name { color: var(--ddc-ink); }
.match-card__score {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 8vw, 2.8rem);   /* 1.6 → 2.2~2.8rem (반응형) */
  line-height: 1;
  color: var(--ddc-ink-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.match-card__side.is-winner .match-card__score { color: var(--ddc-olive); }

/* === Match card game-style avatars (single / doubles) === */
.match-card__avatars {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  min-height: 48px;
}
.match-card__avatars--doubles {
  /* 2명일 때 살짝 겹쳐서 팀 느낌. flex 가 자동으로 중앙 정렬. */
}
.match-card__avatars--doubles .match-card__avatar + .match-card__avatar {
  margin-left: -14px;
  z-index: 0;
}
.match-card__avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px var(--ddc-surface), 0 0 0 3px var(--ddc-line);
  transition: box-shadow .25s var(--ease-smooth), transform .25s var(--ease-smooth);
  position: relative;
  z-index: 1;
}
.match-card__side.is-winner .match-card__avatar {
  box-shadow: 0 0 0 2px var(--ddc-surface), 0 0 0 3px var(--ddc-olive),
              0 0 14px rgba(123, 128, 67, .4);
  transform: scale(1.04);
}
.match-card__side.is-loser .match-card__avatar {
  filter: grayscale(.55) opacity(.7);
}

/* 승자 옆 작은 왕관 (이긴 쪽 식별 + 게임 느낌) */
.match-card__crown {
  position: absolute;
  top: -10px;
  right: -6px;
  font-size: .95rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
  animation: tn-crown-bob 2.4s ease-in-out infinite;
  z-index: 2;
}
@keyframes tn-crown-bob {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(-3px) rotate(6deg); }
}

/* 패자 쪽 이름·점수 살짝 흐림 */
.match-card__side.is-loser .match-card__name,
.match-card__side.is-loser .match-card__score {
  opacity: .58;
}

/* VS 라벨을 게임 느낌으로 강화 */
.match-card__vs {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .12em;
  color: var(--ddc-olive);
  padding: 0 6px;
  position: relative;
}
.match-card__vs span {
  display: inline-block;
  padding: 4px 8px;
  background: var(--ddc-cream-3);
  border-radius: 999px;
  border: 1px solid var(--ddc-line);
  font-weight: 800;
}

.match-card__note {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--ddc-cream-3);
  border-radius: var(--radius-sm);
  font-size: .82rem;
  color: var(--ddc-ink-3);
}

.match-card__delta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: .72rem;
  color: var(--ddc-muted);
  border-top: 1px dashed var(--ddc-line);
  padding-top: 8px;
}
.match-card__delta span { font-variant-numeric: tabular-nums; }

.match-card__cancel { margin-top: 10px; }

/* Match submission form */
.match-form {
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin: 12px 0;
}
.match-form__kind {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: var(--ddc-cream-3);
  padding: 4px;
  border-radius: 99px;
  margin-bottom: 18px;
}
.match-form__kind-opt {
  position: relative;
  text-align: center;
  cursor: pointer;
}
.match-form__kind-opt input {
  position: absolute; opacity: 0; pointer-events: none;
}
.match-form__kind-opt span {
  display: block;
  padding: 9px 12px;
  border-radius: 99px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ddc-ink-3);
  transition: background .2s var(--ease-smooth), color .2s var(--ease-smooth);
}
.match-form__kind-opt input:checked + span {
  background: var(--ddc-ink);
  color: var(--ddc-cream);
}

.match-form__fields { border: 0; padding: 0; margin: 0 0 4px; }
.match-form__fields[hidden] { display: none; }

.match-form__scores {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: end;
  margin: 6px 0 14px;
}
.match-form__vs {
  padding-bottom: 14px;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ddc-muted);
}

.match-form select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--ddc-line-strong);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  background: var(--ddc-cream-3);
  color: var(--ddc-ink);
  transition: border-color .18s var(--ease-smooth), background .18s var(--ease-smooth);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 38px;
}
.match-form select:focus,
.match-form textarea:focus,
.match-form input[type="number"]:focus,
.match-form input[type="date"]:focus {
  outline: none;
  border-color: var(--ddc-olive);
  background-color: #fff;
}
.match-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--ddc-line-strong);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  background: var(--ddc-cream-3);
  color: var(--ddc-ink);
  resize: vertical;
  min-height: 70px;
}
.match-form input[type="date"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 1.5px solid var(--ddc-line-strong);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  background: var(--ddc-cream-3);
  color: var(--ddc-ink);
  /* iOS Safari: 네이티브 date input은 자체 chrome(달력 아이콘, 패딩)이 있어
   * width:100%를 무시하고 칸 밖으로 넘침. appearance:none으로 네이티브 chrome
   * 제거 → 컨테이너 폭을 정확히 따라감. 탭하면 여전히 네이티브 picker 열림. */
  -webkit-appearance: none;
  appearance: none;
}
/* iOS WebKit: 값 표시 영역의 내부 마진/정렬을 일반 텍스트 input과 통일 */
.match-form input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}

/* ============================================================
   12c. Tier badge (hex shield, used in leaderboard & tier explainer)
   ============================================================ */
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tier-badge svg {
  display: block;
  width: 28px; height: 30px;
  filter: drop-shadow(0 1px 2px rgba(26,26,26,.18));
}
.tier-badge--md svg { width: 44px; height: 47px; }
.tier-badge--lg svg { width: 64px; height: 68px; }
.tier-badge__label {
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ============================================================
   12d. Leaderboard
   ============================================================ */
.leaderboard {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lb-row {
  display: grid;
  grid-template-columns: 38px 58px 1fr auto;
  align-items: center;
  column-gap: 4px;
  padding: 12px 14px;
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius-lg);
  transition: transform .15s var(--ease-smooth), box-shadow .2s var(--ease-smooth);
  overflow: hidden;
  position: relative;
}
.lb-row > .lb-row__body { padding-left: 8px; }
.lb-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }

.lb-row--me {
  background: linear-gradient(135deg, var(--ddc-cream-3), var(--ddc-surface));
  border-color: var(--ddc-olive);
  box-shadow: 0 0 0 1px var(--ddc-olive) inset, var(--shadow-1);
}

.lb-row--top1 { border-color: #EAB308; box-shadow: 0 0 0 1px #EAB308 inset, var(--shadow-1); }
.lb-row--top2 { border-color: #94A3B8; }
.lb-row--top3 { border-color: #A16207; }

.lb-row__rank {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-rank-num {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ddc-muted);
  letter-spacing: -.02em;
}
.lb-medal {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: .95rem;
  color: #fff;
  box-shadow: var(--shadow-1);
}
.lb-medal--gold   { background: linear-gradient(135deg, #FCD34D, #B45309); }
.lb-medal--silver { background: linear-gradient(135deg, #E5E7EB, #6B7280); }
.lb-medal--bronze { background: linear-gradient(135deg, #FBBF24, #78350F); }

/* Game-card style avatar — square with right-edge fade. Overrides .avatar circle. */
.lb-row__avatar.avatar {
  border-radius: 10px;
  align-self: center;
}
.lb-row__avatar.avatar--img {
  -webkit-mask-image: linear-gradient(to right, #000 60%, transparent 100%);
          mask-image: linear-gradient(to right, #000 60%, transparent 100%);
}
.lb-row__avatar.avatar--initial {
  background-color: var(--ddc-cream-2);
  color: var(--ddc-ink);
  font-weight: 700;
}

.lb-row__body { min-width: 0; }
.lb-row__name {
  font-size: .95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-row__you {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .62rem;
  letter-spacing: .12em;
  background: var(--ddc-olive);
  color: #fff;
  padding: 1px 6px;
  border-radius: 4px;
}
.lb-row__meta {
  font-size: .75rem;
  color: var(--ddc-muted);
  margin-top: 2px;
}

.lb-row__rating {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.lb-row__rating-num {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--ddc-ink);
  font-variant-numeric: tabular-nums;
}

/* Season label chip above the leaderboard */
.lb-season-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--ddc-ink);
  background: var(--ddc-cream-3);
  border: 1px solid var(--ddc-line);
  border-radius: 999px;
  padding: 6px 14px;
  margin: 8px 0 12px;
}
.lb-season-chip small {
  font-weight: 400;
  color: var(--ddc-muted);
}

/* Divider between ranked list and unranked section */
.lb-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 18px 0 8px;
  text-align: center;
  position: relative;
}
.lb-divider::before,
.lb-divider::after {
  content: "";
  position: absolute;
  top: 14px;
  width: 28%;
  height: 1px;
  background: var(--ddc-line);
}
.lb-divider::before { left: 0; }
.lb-divider::after  { right: 0; }
.lb-divider span {
  font-family: var(--font-display);
  font-size: .85rem;
  letter-spacing: .12em;
  color: var(--ddc-muted);
}
.lb-divider small {
  font-size: .7rem;
  color: var(--ddc-muted);
  opacity: .8;
}

/* Unranked rows — slightly desaturated to visually distinguish */
.leaderboard--unranked { margin-top: 4px; }
.lb-row--unranked {
  opacity: .85;
  background: var(--ddc-cream-3);
}
.lb-row--unranked:hover { opacity: 1; }
.lb-rank-num--unranked {
  color: var(--ddc-muted);
  font-family: var(--font-display);
}
.lb-row__rating-num--unranked {
  font-family: var(--font-display);
  font-size: .85rem;
  letter-spacing: .1em;
  color: var(--ddc-muted);
}

/* ============================================================
   12e. Tier explainer page
   ============================================================ */
.tier-myrow {
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin: 8px 0 18px;
}
.tier-myrow__label {
  font-size: .72rem;
  color: var(--ddc-muted);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  margin-bottom: 8px;
}
.tier-myrow__cards { display: flex; gap: 18px; flex-wrap: wrap; }
.tier-myrow__card { display: flex; align-items: center; gap: 10px; }
.tier-myrow__kind { font-size: .8rem; color: var(--ddc-muted); }
.tier-myrow__rating {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1;
}

.tier-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.tier-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius-lg);
}
.tier-item__body { flex: 1; min-width: 0; }
.tier-item__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.tier-item__range {
  font-family: var(--font-display);
  font-size: .9rem;
  color: var(--ddc-ink-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
  margin: 2px 0 4px;
}
.tier-item__hint {
  font-size: .82rem;
  color: var(--ddc-muted);
  line-height: 1.45;
}

.tier-explain {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--ddc-cream-3);
  border-radius: var(--radius-lg);
}
.tier-explain h2 { font-size: 1rem; margin: 0 0 8px; }
.tier-explain ul { margin: 8px 0 0; padding-left: 1.1em; font-size: .85rem; color: var(--ddc-ink-3); }
.tier-explain li { margin-bottom: 4px; }

/* ============================================================
   12f. Recent matches list (profile page)
   ============================================================ */
.profile-recent { margin-top: 8px; }
.recent-matches {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.recent-match {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius);
}
.recent-match__result {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: .9rem;
  color: #fff;
}
.recent-match__result.is-win  { background: var(--ddc-olive); }
.recent-match__result.is-loss { background: #8A8378; }
.recent-match__body { min-width: 0; }
.recent-match__top {
  display: flex;
  gap: 8px;
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--ddc-muted);
  text-transform: uppercase;
  font-weight: 700;
}
.recent-match__opp {
  font-size: .9rem;
  font-weight: 600;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-match__score {
  font-family: var(--font-display);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--ddc-ink-3);
}
.recent-match__delta {
  font-family: var(--font-display);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
}
.recent-match__delta.is-up   { color: var(--ddc-olive); }
.recent-match__delta.is-down { color: var(--ddc-danger); }

/* ============================================================
   12g. Operator manage pages (/manage/...)
   ============================================================ */

/* Entry banner shown only on profile page for admins */
.manage-entry {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin: 12px 0;
  background: linear-gradient(135deg, var(--ddc-ink), var(--ddc-ink-2));
  color: var(--ddc-cream);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  transition: transform .15s var(--ease-smooth), box-shadow .2s var(--ease-smooth);
}
.manage-entry:hover  { transform: translateY(-2px); box-shadow: var(--shadow-3); }
.manage-entry:active { transform: scale(.99); }
.manage-entry__icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ddc-olive);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.manage-entry__icon svg { width: 20px; height: 20px; color: var(--ddc-cream); }
.manage-entry__body { flex: 1; min-width: 0; }
.manage-entry__title { font-weight: 700; font-size: .95rem; }
.manage-entry__hint  { font-size: .75rem; opacity: .7; margin-top: 2px; }
.manage-entry__arrow {
  font-family: var(--font-display);
  font-size: 1.1rem;
  opacity: .55;
}

/* Notification badge when there are pending approvals */
.manage-entry__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #DC2626;
  color: #fff;
  font-family: var(--font-display);
  font-size: .72rem;
  line-height: 18px;
  text-align: center;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--ddc-ink);
  animation: tn-pulse 1.8s ease-in-out infinite;
}
.manage-entry--alert {
  box-shadow: 0 0 0 1px #DC2626 inset, var(--shadow-2);
}
.manage-entry--alert:hover {
  box-shadow: 0 0 0 1px #DC2626 inset, var(--shadow-3);
}
.manage-entry__alert-text {
  color: #FCA5A5;
  font-weight: 700;
  opacity: 1;
}
.manage-entry--alert .manage-entry__hint { opacity: 1; }
@keyframes tn-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

/* /manage/ hub tile grid */
.manage-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 12px 0;
}
.manage-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius-lg);
  transition: transform .15s var(--ease-smooth), box-shadow .2s var(--ease-smooth);
}
.manage-tile:hover  { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.manage-tile:active { transform: scale(.99); }
.manage-tile__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--ddc-cream-3);
  color: var(--ddc-ink);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.manage-tile__icon svg { width: 22px; height: 22px; }
.manage-tile__body { flex: 1; min-width: 0; }
.manage-tile__title {
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.manage-tile__hint  { font-size: .8rem; color: var(--ddc-muted); margin-top: 2px; }
.manage-tile__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 99px;
  background: var(--ddc-olive);
  color: #fff;
  font-family: var(--font-display);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}
.manage-tile__count--neutral { background: var(--ddc-muted); }

.manage-note {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--ddc-cream-3);
  border-radius: var(--radius-lg);
  font-size: .82rem;
  color: var(--ddc-ink-3);
}
.manage-note strong { color: var(--ddc-ink); }
.manage-note ul { margin: 8px 0 0; padding-left: 1.1em; }
.manage-note li { margin-bottom: 3px; }

/* Credentials block on successful member add */
.manage-cred {
  background: var(--ddc-surface);
  border: 2px solid var(--ddc-olive);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin: 12px 0;
}
.manage-cred__title {
  font-size: .72rem;
  color: var(--ddc-olive);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  margin-bottom: 8px;
}
.manage-cred__block {
  white-space: pre-wrap;
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: .82rem;
  background: var(--ddc-cream-3);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--ddc-ink);
  line-height: 1.5;
}
.manage-cred__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.manage-cred__hint {
  font-size: .8rem;
  color: var(--ddc-muted);
  margin: 8px 0 0;
}

/* "레이팅 수동 지정" expander */
.manage-advanced {
  margin: 6px 0 14px;
  padding: 0;
}
.manage-advanced > summary {
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ddc-ink-3);
  padding: 8px 0;
  list-style: none;
}
.manage-advanced > summary::-webkit-details-marker { display: none; }
.manage-advanced > summary::before { content: '▸ '; color: var(--ddc-muted); }
.manage-advanced[open] > summary::before { content: '▾ '; }
.manage-advanced__hint {
  font-size: .78rem;
  color: var(--ddc-muted);
  margin: 0 0 10px;
}

/* ============================================================
   12h. Manage matches (approval) + member list
   ============================================================ */

/* "모두 승인" bar */
.approve-all-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin: 0 0 14px;
  background: var(--ddc-ink);
  color: var(--ddc-cream);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.approve-all-bar__info {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.approve-all-bar__info strong {
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .02em;
}
.approve-all-bar__info span {
  font-size: .76rem;
  opacity: .7;
}

/* Match card extras for admin approval view */
.match-card__kindtag {
  display: inline-block;
  padding: 1px 7px;
  margin-right: 6px;
  background: var(--ddc-cream-2);
  color: var(--ddc-ink-3);
  border-radius: 4px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.match-card__chip--ok { background: var(--ddc-olive); }
.match-card__chip--no { background: var(--ddc-danger); }

.match-card__submitter {
  margin-top: 8px;
  font-size: .72rem;
  color: var(--ddc-muted);
}

.match-card__admin-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;    /* 좌측 정렬 */
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--ddc-line);
}
.match-card__admin-actions form { display: inline-flex; }

/* Inline reject: details/summary unstyled */
.match-card__reject summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.match-card__reject summary::-webkit-details-marker { display: none; }
.match-card__reject[open] summary { background: var(--ddc-cream-2); }

.match-card__reject-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 10px;
  background: var(--ddc-cream-3);
  border-radius: var(--radius-sm);
}
.match-card__reject-form textarea {
  flex: 1;
  min-width: 180px;
  padding: 8px 10px;
  font-size: .9rem;
  font-family: inherit;
  border: 1.5px solid var(--ddc-line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ddc-ink);
  resize: vertical;
}
.match-card__reject-form textarea:focus {
  outline: none;
  border-color: var(--ddc-danger);
}

.match-card__reject-reason {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(178,59,59,.08);
  border-left: 3px solid var(--ddc-danger);
  border-radius: var(--radius-sm);
  font-size: .85rem;
  color: var(--ddc-ink-2);
}
.match-card__reject-reason strong {
  display: inline-block;
  margin-right: 6px;
  color: var(--ddc-danger);
}

/* Member list (frontend) */
.member-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.member-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 12px 14px;
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius-lg);
  align-items: start;
}
.member-card__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ddc-cream-2);
  color: var(--ddc-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
}
.member-card__body { min-width: 0; }
.member-card__name {
  font-weight: 700;
  font-size: .95rem;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.member-card__login {
  font-weight: 400;
  font-size: .78rem;
  color: var(--ddc-muted);
}
.member-card__meta {
  font-size: .75rem;
  color: var(--ddc-muted);
  margin-top: 2px;
}
.member-card__ratings {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.member-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
.member-card__rating small {
  font-size: .65rem;
  color: var(--ddc-muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
}
.member-card__rating strong {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ddc-ink);
}
.member-card__rating em {
  font-style: normal;
  color: #B0AB9E;
  font-size: .8rem;
}

.member-list__note {
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--ddc-cream-3);
  border-radius: var(--radius);
  font-size: .78rem;
  color: var(--ddc-muted);
}

/* 역할 뱃지 (방장 / 부방장 / YOU) — 이름 옆에 작게 표시 */
.role-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: .62rem;
  letter-spacing: .08em;
  color: #fff;
  text-transform: uppercase;
  vertical-align: middle;
}
.role-badge--master    { background: var(--ddc-ink); }                    /* 마스터: 차콜 검정 */
.role-badge--admin     { background: var(--ddc-olive-2); }                /* 방장: 진한 올리브 */
.role-badge--assistant { background: var(--ddc-olive); }                  /* 부방장: 올리브 */
.role-badge--you       { background: var(--ddc-olive-light); color: var(--ddc-ink); }

/* 본인 카드 — 살짝 cream 배경 */
.member-card--self {
  background: linear-gradient(135deg, var(--ddc-cream-3), var(--ddc-surface));
  border-color: var(--ddc-olive);
}

/* 멤버 카드 내 운영자 액션 (방장 임명/해제, 부방장 임명/해제, 강퇴) */
.member-card__admin-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-start;      /* 좌측 정렬 */
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--ddc-line);
}
.member-card__reseed {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--ddc-line);
  font-size: .82rem;
}
.member-card__reseed > summary {
  cursor: pointer;
  color: var(--ddc-olive);
  font-weight: 600;
  list-style: none;
  padding: 4px 0;
}
.member-card__reseed > summary::-webkit-details-marker { display: none; }
.member-card__reseed > summary::before { content: '⚙ '; }
.member-card__reseed[open] > summary::before { content: '▾ '; }
.member-card__reseed-form {
  display: flex;
  gap: 8px;
  align-items: end;
  flex-wrap: wrap;
  margin-top: 8px;
}
.member-card__reseed-form .profile-field { flex: 1; min-width: 160px; margin: 0; }

/* 허브의 "내 권한" 작은 indicator */
.manage-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin-bottom: 12px;
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: 99px;
  font-size: .8rem;
}
.manage-role-chip__label {
  color: var(--ddc-muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.manage-role-chip strong {
  font-family: var(--font-display);
  color: var(--ddc-ink);
  letter-spacing: .04em;
}

/* 강퇴 가능 표시 (회원 목록 타일) */
.manage-tile__count--danger {
  background: var(--ddc-danger);
  font-family: inherit;
  font-size: .8rem;
}

/* ============================================================
   12i. Meetings — list cards, single detail, RSVP, participants
   ============================================================ */

/* List */
.meeting-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.meeting-card {
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: transform .15s var(--ease-smooth), box-shadow .2s var(--ease-smooth);
}
.meeting-card:hover  { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.meeting-card:active { transform: scale(.99); }
.meeting-card--past  { opacity: .65; }

.meeting-card__link {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 14px;
  padding: 14px;
  align-items: center;
  color: inherit;
}

.meeting-card__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--ddc-cream-3);
  border-radius: var(--radius);
  padding: 8px 6px;
}
.meeting-card__date-day {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--ddc-ink);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.meeting-card__date-dow {
  font-size: .68rem;
  color: var(--ddc-muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.meeting-card__date-time {
  font-family: var(--font-display);
  font-size: .82rem;
  color: var(--ddc-olive);
  margin-top: 6px;
  letter-spacing: -.01em;
}

.meeting-card__body { min-width: 0; }
.meeting-card__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--ddc-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.meeting-card__loc {
  font-size: .82rem;
  color: var(--ddc-ink-3);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.meeting-card__loc svg { color: var(--ddc-muted); flex-shrink: 0; }
.meeting-card__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  font-size: .78rem;
}
.meeting-card__cap {
  font-family: var(--font-display);
  color: var(--ddc-ink);
  letter-spacing: -.01em;
}
.meeting-card__cap.is-full { color: var(--ddc-danger); }
.meeting-card__waitlist {
  font-size: .72rem;
  color: var(--ddc-muted);
  padding: 1px 7px;
  background: var(--ddc-cream-2);
  border-radius: 4px;
}
.meeting-card__chip {
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 99px;
  color: #fff;
}
.meeting-card__chip--joined { background: var(--ddc-olive); }
.meeting-card__chip--wait   { background: var(--ddc-ink); }

/* Single page detail */
.meeting-detail {
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin: 8px 0 14px;
}
.meeting-detail__dl {
  display: grid;
  grid-template-columns: 4em 1fr;
  gap: 10px 14px;
  margin: 0;
}
.meeting-detail__dl dt {
  color: var(--ddc-muted);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.meeting-detail__dl dd {
  margin: 0;
  font-size: .92rem;
}
.meeting-detail__dl dd strong {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: -.01em;
  color: var(--ddc-ink);
}
.meeting-detail__content {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--ddc-line);
  font-size: .92rem;
  color: var(--ddc-ink-2);
  line-height: 1.55;
  white-space: pre-wrap;
}

/* RSVP block */
.meeting-rsvp {
  background: var(--ddc-cream-3);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.meeting-rsvp--past {
  text-align: center;
  color: var(--ddc-muted);
  font-size: .9rem;
}
.meeting-rsvp__status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.meeting-rsvp__chip {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 99px;
  color: #fff;
}
.meeting-rsvp__chip--ok   { background: var(--ddc-olive); }
.meeting-rsvp__chip--wait { background: var(--ddc-ink); }
.meeting-rsvp__msg { font-size: .82rem; color: var(--ddc-ink-3); }

/* Participants grid */
.meeting-participants {
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin: 10px 0;
}
.meeting-participants--waitlist {
  background: var(--ddc-cream-3);
}
.participant-grid {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 12px 8px;
}
.participant {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}
.participant__name {
  font-size: .75rem;
  font-weight: 600;
  color: var(--ddc-ink);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.participant__pos {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: var(--ddc-ink);
  color: var(--ddc-cream);
  font-family: var(--font-display);
  font-size: .65rem;
  padding: 1px 6px;
  border-radius: 99px;
  letter-spacing: -.01em;
}

/* Title + share button row */
.meeting-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  justify-content: space-between;
}
.meeting-head .page-head__title { flex: 1; min-width: 0; }

.meeting-share {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--ddc-cream-3);
  border: 1px solid var(--ddc-line-strong);
  border-radius: 99px;
  color: var(--ddc-ink);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s var(--ease-smooth), color .18s var(--ease-smooth), border-color .18s var(--ease-smooth), transform .15s var(--ease-smooth);
  margin-top: 4px;
}
.meeting-share:hover  { background: var(--ddc-cream-2); }
.meeting-share:active { transform: scale(.96); }
.meeting-share.is-copied {
  background: var(--ddc-olive);
  border-color: var(--ddc-olive);
  color: #fff;
}
.meeting-share.is-copied svg { stroke: #fff; }

/* Location text + action buttons in single meeting detail */
.meeting-detail__loc-text {
  font-weight: 600;
  margin-bottom: 4px;
}
.meeting-detail__loc-addr {
  font-size: 0.92em;
  color: var(--ddc-muted);
  margin-bottom: 8px;
}
.meeting-detail__loc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 8px;
}
.meeting-detail__loc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  padding: 6px 12px;
}
.meeting-detail__loc-btn.is-copied {
  background: var(--ddc-olive);
  border-color: var(--ddc-olive);
  color: #fff;
}
.meeting-detail__loc-btn.is-copied svg { stroke: #fff; }

/* Readonly meeting_location input — visually communicates "auto-filled from map" */
input[name="meeting_location"][readonly] {
  background-color: var(--ddc-cream-3);
  color: var(--ddc-ink);
  cursor: default;
  font-weight: 600;
}
input[name="meeting_location"][readonly]:focus {
  outline: none;
  border-color: var(--ddc-line-strong);
  background-color: var(--ddc-cream-3);
}
input[name="meeting_location"][readonly]:placeholder-shown {
  font-weight: 400;
  color: var(--ddc-muted);
}

/* Map picker (operator form) */
.map-picker {
  position: relative;
}

/* "현재 위치 사용" action row */
.map-picker__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.map-picker__geo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.map-picker__geo:disabled {
  opacity: .6;
  cursor: wait;
}
.map-picker__actions-hint {
  font-size: .72rem;
  color: var(--ddc-muted);
}

.map-picker__search-wrap {
  position: relative;
}
.map-picker__search {
  width: 100%;
  padding: 12px 14px 12px 38px;
  border: 1.5px solid var(--ddc-line-strong);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  background: var(--ddc-cream-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8378' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 12px center / 16px;
  color: var(--ddc-ink);
}
.map-picker__search:focus {
  outline: none;
  border-color: var(--ddc-olive);
  background-color: #fff;
}
.map-picker__results {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  max-height: 220px;
  overflow-y: auto;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 200;
}
.map-picker__result {
  padding: 10px 14px;
  cursor: pointer;
  font-size: .85rem;
  border-bottom: 1px solid var(--ddc-line);
  line-height: 1.4;
}
.map-picker__result:hover { background: var(--ddc-cream-3); }
.map-picker__result:last-child { border-bottom: 0; }
.map-picker__result strong {
  display: block;
  font-weight: 700;
  color: var(--ddc-ink);
  margin-bottom: 2px;
}
.map-picker__result-addr {
  font-size: .75rem;
  color: var(--ddc-muted);
}
.map-picker__noresult {
  padding: 10px 14px;
  font-size: .85rem;
  color: var(--ddc-muted);
}
.map-picker__map {
  width: 100%;
  height: 280px;
  border-radius: var(--radius);
  margin-top: 10px;
  border: 1px solid var(--ddc-line);
  z-index: 1;
}
.map-picker__hint {
  font-size: .75rem;
  color: var(--ddc-muted);
  margin: 8px 0 0;
  line-height: 1.5;
}

/* Map display on single meeting page */
.meeting-map-display {
  width: 100%;
  height: 220px;
  border-radius: var(--radius);
  margin-top: 10px;
  border: 1px solid var(--ddc-line);
  overflow: hidden;
  z-index: 1;
}

/* Host/master actions */
.meeting-host-actions {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--ddc-line);
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============================================================
   13. 404
   ============================================================ */
.not-found {
  padding: 60px 4px;
  text-align: center;
}
.not-found h1 {
  font-family: var(--font-display);
  font-size: clamp(5rem, 16vw, 8rem);
  color: var(--ddc-olive);
  letter-spacing: -.02em;
  line-height: 1;
  margin: 0 0 12px;
}

/* ============================================================
   14. Animations (stagger reveal, press, view transitions)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  animation: reveal .55s var(--ease-smooth) forwards;
}
.reveal[data-delay="1"] { animation-delay: .06s; }
.reveal[data-delay="2"] { animation-delay: .14s; }
.reveal[data-delay="3"] { animation-delay: .22s; }
.reveal[data-delay="4"] { animation-delay: .30s; }
.reveal[data-delay="5"] { animation-delay: .38s; }
.reveal[data-delay="6"] { animation-delay: .46s; }
@keyframes reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* Animated number counter (set --to from PHP via inline style, JS animates) */
.count-up { font-variant-numeric: tabular-nums; }

/* Hide nothing-to-show items prettily */
.is-skeleton {
  background: linear-gradient(90deg, var(--ddc-cream-2) 0%, var(--ddc-cream-3) 50%, var(--ddc-cream-2) 100%);
  background-size: 200% 100%;
  animation: skeleton 1.4s linear infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ============================================================
   15. Footer (minimal — bottom-nav replaces marketing footer)
   ============================================================ */
.app-footer {
  padding: 24px 4px 14px;
  text-align: center;
  font-size: .75rem;
  color: var(--ddc-muted);
  letter-spacing: .04em;
}
.app-footer__motto {
  font-family: var(--font-display);
  letter-spacing: .25em;
  font-size: .72rem;
  color: var(--ddc-ink);
  margin-bottom: 6px;
}

/* ============================================================
   15d. Temp password issued card (one-shot, prominent)
   ============================================================ */
.temp-pw-card {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  border: 2px solid #D97706;
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin: 16px 0;
  box-shadow: var(--shadow-2);
  /* Important: explicit opacity:1 because .reveal's `animation` shorthand
     gets overridden by tn-pulse-soft, leaving opacity stuck at 0. */
  opacity: 1 !important;
  animation: tn-pulse-soft 1.4s ease-in-out 2;
}
.temp-pw-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #92400E;
  margin-bottom: 10px;
  font-size: .95rem;
}
.temp-pw-card__head svg { flex-shrink: 0; }
.temp-pw-card__pw {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.temp-pw-card__pw code {
  font-family: var(--font-display, 'Archivo Black'), monospace;
  font-size: 1.4rem;
  letter-spacing: .15em;
  padding: 8px 14px;
  background: var(--ddc-ink);
  color: var(--ddc-cream);
  border-radius: var(--radius-sm);
  user-select: all;
}
.temp-pw-card__copy {
  background: var(--ddc-ink);
  color: var(--ddc-cream);
  border-color: var(--ddc-ink);
}
.temp-pw-card__copy.is-copied {
  background: var(--ddc-olive);
  border-color: var(--ddc-olive);
}
.temp-pw-card__note {
  margin: 0;
  font-size: .78rem;
  color: #92400E;
  font-weight: 600;
}
@keyframes tn-pulse-soft {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.01); box-shadow: var(--shadow-3); }
}

/* ============================================================
   15c. Lost password — operator-assisted reset steps
   ============================================================ */
.lostpw {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
}
.lostpw__step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius-lg);
}
.lostpw__step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ddc-olive);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lostpw__step-body { flex: 1; min-width: 0; }
.lostpw__step-body strong {
  display: block;
  margin-bottom: 4px;
  font-size: .95rem;
}
.lostpw__step-body p {
  margin: 0 0 8px;
  font-size: .85rem;
  color: var(--ddc-muted);
  line-height: 1.55;
}

/* ============================================================
   15a. Login page — remember-me + lost-password helpers
   ============================================================ */
.login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  color: var(--ddc-ink);
  margin: 4px 0 8px;
  cursor: pointer;
}
.login-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  accent-color: var(--ddc-olive);
}
.login-lost {
  text-align: center;
  margin: 14px 0 0;
  font-size: .82rem;
}
.login-lost a {
  color: var(--ddc-muted);
  text-decoration: underline;
}

/* ============================================================
   15b. Signup — landing CTA helper, pending notice, approval list
   ============================================================ */
.intro__browse {
  margin-top: 10px;
  font-size: .85rem;
  color: var(--ddc-muted);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.intro__browse a {
  color: var(--ddc-olive);
  font-weight: 600;
  text-decoration: none;
}
.intro__browse a:hover { text-decoration: underline; }

.app-bar__signup {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ddc-olive);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  margin-right: 6px;
}
.app-bar__signup:hover { filter: brightness(.95); }

.signup-pending {
  background: var(--ddc-cream-3);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-align: center;
  margin: 20px 0;
}
.signup-pending__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--ddc-surface);
  color: var(--ddc-olive);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-1);
}
.signup-pending h2 {
  font-family: var(--font-display);
  margin: 0 0 6px;
}
.signup-pending p {
  color: var(--ddc-muted);
  margin: 0 0 18px;
  font-size: .9rem;
}

.signup-approval {
  margin: 24px 0;
  padding: 18px;
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius-lg);
}
.signup-approval__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0 0 12px;
}
.signup-approval__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.signup-approval__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: var(--ddc-cream-3);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius);
}
.signup-approval__body { flex: 1; min-width: 0; }
.signup-approval__name {
  font-weight: 700;
  margin-bottom: 2px;
}
.signup-approval__meta {
  font-size: .75rem;
  color: var(--ddc-muted);
  word-break: break-all;
}
.signup-approval__bio {
  margin-top: 6px;
  font-size: .82rem;
  color: var(--ddc-ink);
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius);
  padding: 6px 8px;
  white-space: pre-wrap;
}
.signup-approval__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.signup-approval__reject {
  color: var(--ddc-danger);
  border-color: var(--ddc-danger);
}

/* ============================================================
   15f. Modal — generic dialog (tn-modal). Used by 점수 계산 방식 popup.
   ============================================================ */
.tn-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: tn-modal-in .18s var(--ease-smooth);
}
.tn-modal[hidden] { display: none; }
.tn-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 18, .62);
  backdrop-filter: blur(2px);
}
.tn-modal__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 32px);
  background: var(--ddc-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tn-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--ddc-line);
  flex-shrink: 0;
}
.tn-modal__head h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0;
}
.tn-modal__close {
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ddc-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tn-modal__close:hover { background: var(--ddc-cream-3); color: var(--ddc-ink); }
.tn-modal__body {
  padding: 16px 18px 20px;
  overflow-y: auto;
  font-size: .9rem;
  line-height: 1.6;
}
.tn-modal__body h3 {
  font-family: var(--font-display);
  font-size: .92rem;
  margin: 18px 0 8px;
  letter-spacing: .02em;
}
.tn-modal__body h3:first-of-type { margin-top: 4px; }
.tn-modal__body p { margin: 0 0 8px; }
@keyframes tn-modal-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ELO howto modal — specific content styles */
.elo-howto__lead {
  font-size: .92rem;
  color: var(--ddc-ink);
  background: var(--ddc-cream-3);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 14px;
}
.elo-howto__list {
  margin: 0 0 4px;
  padding-left: 18px;
}
.elo-howto__list li { margin-bottom: 4px; }
.elo-howto__table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 6px;
  font-size: .85rem;
}
.elo-howto__table th,
.elo-howto__table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--ddc-line);
  text-align: center;
}
.elo-howto__table th {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--ddc-muted);
  background: var(--ddc-cream-3);
}
.elo-howto__table td:first-child { text-align: left; }
.elo-howto__table td small { color: var(--ddc-muted); font-size: .72rem; }
.elo-howto__table .is-win  { color: #15803D; font-variant-numeric: tabular-nums; }
.elo-howto__table .is-loss { color: #B91C1C; font-variant-numeric: tabular-nums; }
.elo-howto__note {
  font-size: .82rem;
  color: var(--ddc-muted);
  font-style: italic;
  margin-top: 6px;
}
.elo-howto__finale {
  font-weight: 600;
  color: var(--ddc-olive);
}

/* Page-head tools — small action button row under page head */
.page-head__tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* ── page-head--inline: 타이틀과 우측 액션 버튼들을 한 줄에 배치
   리더보드 페이지처럼 리드 텍스트 없이 컴팩트하게 보여야 할 때 사용. */
.page-head--inline .page-head__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}
.page-head--inline .page-head__title {
  margin: 0;
  flex: 1;
  min-width: 0;
}
.page-head--inline .page-head__tools {
  margin-top: 0;
  flex: 0 0 auto;
}
/* 너무 좁은 폰(<360px)이거나 타이틀+버튼이 안 들어가면 자연스럽게 wrap */
@media (max-width: 380px) {
  .page-head--inline .page-head__row { flex-wrap: wrap; }
}

/* ============================================================
   15e. Seasons (active card, end form, archive) + Hall of Fame
   ============================================================ */
.season-active {
  background: linear-gradient(135deg, var(--ddc-ink), var(--ddc-ink-2));
  color: var(--ddc-cream);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin: 12px 0 20px;
  box-shadow: var(--shadow-2);
}
.season-active__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.season-active__kicker {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .6;
}
.season-active__name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin: 4px 0 0;
}
.season-active__stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: .78rem;
  opacity: .8;
}
.season-active__lead {
  font-size: .85rem;
  opacity: .7;
  margin: 0 0 16px;
}
.season-active__note {
  font-size: .82rem;
  opacity: .7;
  margin: 0;
}
.season-end-form .profile-field span {
  color: var(--ddc-cream);
  opacity: .8;
}
.season-end-form input[type="text"] {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
  color: var(--ddc-cream);
}
.season-end-form input[type="text"]::placeholder {
  color: rgba(255,255,255,.4);
}

.season-archive { margin: 24px 0; }
.season-archive__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0 0 12px;
}
.season-archive__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.season-archive__item {
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
.season-archive__name {
  font-weight: 700;
  font-size: .95rem;
}
.season-archive__dates {
  font-size: .75rem;
  color: var(--ddc-muted);
  margin-top: 2px;
}
.season-archive__champs {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .85rem;
}

/* Hall of Fame on profile */
.hall-of-fame__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hall-of-fame__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-left-width: 4px;
  border-radius: var(--radius);
}
.hall-of-fame--gold   { border-left-color: #EAB308; }
.hall-of-fame--silver { border-left-color: #94A3B8; }
.hall-of-fame--bronze { border-left-color: #A16207; }
.hall-of-fame--top10  { border-left-color: var(--ddc-olive); }
.hof--gold   { border-left-color: #EAB308; }
.hof--silver { border-left-color: #94A3B8; }
.hof--bronze { border-left-color: #A16207; }
.hof--top10  { border-left-color: var(--ddc-olive); }
.hall-of-fame__icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}
.hall-of-fame__body { flex: 1; min-width: 0; }
.hall-of-fame__title {
  font-weight: 700;
  font-size: .9rem;
}
.hall-of-fame__meta {
  font-size: .72rem;
  color: var(--ddc-muted);
  margin-top: 2px;
}

/* btn--danger — used by 시즌 종료 + 강퇴 + 임시 비번 거절 */
.btn--danger {
  background: var(--ddc-danger);
  color: #fff;
  border-color: var(--ddc-danger);
}
.btn--danger:hover { filter: brightness(.95); }

/* === 15g. User stats — chart + form + top opponents === */
.stats-section {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Scope toggle (시즌 / 전체) */
.stats-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--ddc-cream-3);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius);
  align-self: flex-start;
}
.stats-tab {
  padding: 6px 14px;
  border-radius: calc(var(--radius) - 4px);
  font-size: .82rem;
  font-weight: 600;
  color: var(--ddc-muted);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.stats-tab:hover { color: var(--ddc-ink); }
.stats-tab.is-active {
  background: var(--ddc-ink);
  color: var(--ddc-cream);
}

/* Chart container */
.stats-chart {
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius);
  padding: 14px 14px 10px;
}
.stats-chart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.stats-chart__title {
  margin: 0;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ddc-ink);
}
.stats-chart__legend {
  display: flex;
  gap: 12px;
  font-size: .72rem;
  color: var(--ddc-muted);
}
.stats-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.stats-chart__swatch {
  display: inline-block;
  width: 14px; height: 3px;
  border-radius: 2px;
}
.stats-chart__swatch--singles { background: var(--ddc-olive); }
.stats-chart__swatch--doubles { background: var(--ddc-ink); }
.stats-chart__svg {
  display: block;
  width: 100%;
  height: 180px;
  overflow: visible;
}
.stats-chart__line {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stats-chart__line--singles { stroke: var(--ddc-olive); }
.stats-chart__line--doubles { stroke: var(--ddc-ink); opacity: .85; }
.stats-chart__dot--singles  { fill: var(--ddc-olive); }
.stats-chart__dot--doubles  { fill: var(--ddc-ink); }
.stats-chart__last-label {
  font-family: var(--font-display);
  font-size: 11px;
  fill: var(--ddc-ink);
}
.stats-chart__tick {
  font-size: 9px;
  fill: var(--ddc-muted);
}
.stats-chart__grid {
  stroke: var(--ddc-line);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.stats-chart__empty {
  padding: 36px 8px;
  text-align: center;
  font-size: .85rem;
  color: var(--ddc-muted);
}

/* Recent form */
.stats-form {
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius);
  padding: 14px;
}
.stats-form__title {
  margin: 0 0 10px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ddc-ink);
}
.stats-form-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.stats-form-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0;
  color: #fff;
  cursor: help;
}
.stats-form-cell--win  { background: #15803D; }
.stats-form-cell--loss { background: #B91C1C; }
.stats-form__empty {
  font-size: .85rem;
  color: var(--ddc-muted);
}

/* Season cards (2x2 mobile, 4-up wider) */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 640px) {
  .stats-cards { grid-template-columns: repeat(4, 1fr); }
}
.stats-card {
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius);
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.stats-card__label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ddc-muted);
  text-transform: uppercase;
}
.stats-card__value {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--ddc-ink);
}
.stats-card__sub {
  font-size: .7rem;
  color: var(--ddc-muted);
}

/* Top opponents */
.stats-opponents {
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius);
  padding: 14px;
}
.stats-opponents__title {
  margin: 0 0 10px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ddc-ink);
}
.stats-opponents__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stats-opponent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--ddc-cream-3);
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius-sm);
}
.stats-opponent-row__avatar { flex-shrink: 0; }
.stats-opponent-row__body { flex: 1; min-width: 0; }
.stats-opponent-row__name {
  font-weight: 700;
  font-size: .92rem;
  color: var(--ddc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-opponent-row__meta {
  margin-top: 2px;
  font-size: .72rem;
  color: var(--ddc-muted);
}
.stats-opponent-row__delta {
  font-family: var(--font-display);
  font-size: 1rem;
  text-align: right;
  line-height: 1.1;
  flex-shrink: 0;
}
.stats-opponent-row__delta.is-up   { color: #15803D; }
.stats-opponent-row__delta.is-down { color: #B91C1C; }
.stats-opponent-row__delta-sub {
  display: block;
  font-family: var(--font-display);
  font-size: .6rem;
  color: var(--ddc-muted);
  margin-top: 2px;
  font-weight: 400;
}
.stats-opponents__empty {
  font-size: .85rem;
  color: var(--ddc-muted);
}

/* ============================================================
   15h. Attendance + reminder + notification badge (Phase E)
   ============================================================ */

/* Notification dot on app-bar avatar */
.app-bar__avatar-link { position: relative; }
.notif-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: var(--ddc-danger);
  border: 2px solid var(--ddc-cream);
  border-radius: 50%;
  pointer-events: none;
}

/* Soft no-show warning above RSVP (self) */
.att-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: 12px 0;
  border-radius: 12px;
  background: var(--ddc-cream-3);
  border: 1px solid var(--ddc-line);
  color: var(--ddc-ink);
  font-size: .85rem;
  line-height: 1.4;
}
.att-warn svg { flex: 0 0 auto; color: var(--ddc-danger); }

/* Tiny warning icon next to participant name (operator view) */
.att-warn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  color: var(--ddc-danger);
  cursor: help;
}

/* Attendance form (operator, past meeting) */
.att-form {
  margin: 28px 0 16px;
  padding: 16px;
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-radius: 14px;
}
.att-form__hint {
  margin: 4px 0 16px;
  font-size: .85rem;
  color: var(--ddc-muted);
}
.att-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.att-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 8px 12px;
  align-items: center;
  padding: 12px;
  background: var(--ddc-cream-3);
  border: 1px solid var(--ddc-line);
  border-radius: 10px;
}
.att-row__who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.att-row__name {
  font-weight: 600;
  font-size: .92rem;
  color: var(--ddc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.att-radio-group {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.att-radio {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--ddc-line);
  border-radius: 999px;
  font-size: .82rem;
  cursor: pointer;
  user-select: none;
  transition: background .15s, border-color .15s;
}
.att-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.att-radio:hover { background: var(--ddc-cream-3); }
.att-radio:has(input:checked) {
  background: var(--ddc-olive);
  border-color: var(--ddc-olive);
  color: #fff;
}
.att-radio--noshow:has(input:checked) {
  background: var(--ddc-danger);
  border-color: var(--ddc-danger);
}
.att-row__note {
  grid-column: 1 / -1;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--ddc-line);
  border-radius: 8px;
  background: #fff;
  font-size: .85rem;
  font-family: inherit;
  color: var(--ddc-ink);
}
.att-row__note:focus {
  outline: 2px solid var(--ddc-olive);
  outline-offset: 1px;
}

/* Reminder kakao message modal */
.reminder-msg { margin: 16px 0; }
.reminder-msg__text {
  background: var(--ddc-cream-3);
  border: 1px solid var(--ddc-line);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 8px 0 14px;
  font-family: inherit;
  font-size: .92rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ddc-ink);
}

@media (max-width: 480px) {
  .att-row {
    grid-template-columns: 1fr;
  }
  .att-radio-group { justify-content: flex-start; }
}

/* === 15i. Legal pages (terms, privacy) + signup consent === */
.legal-article {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 4px 24px;
  line-height: 1.7;
  color: var(--ddc-ink);
  font-size: .96rem;
}
.legal-article h2 {
  font-family: var(--ddc-font-display, "Bebas Neue", sans-serif);
  font-size: 1.15rem;
  letter-spacing: .02em;
  margin: 28px 0 10px;
  color: var(--ddc-ink);
  border-bottom: 1px solid rgba(26, 26, 26, 0.1);
  padding-bottom: 4px;
}
.legal-article h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 20px 0 8px;
  color: var(--ddc-ink);
}
.legal-article p {
  margin: 0 0 12px;
}
.legal-article ul {
  margin: 0 0 14px;
  padding-left: 20px;
}
.legal-article ul li {
  margin: 4px 0;
}
.legal-article__date {
  margin-top: 20px;
  font-size: .85rem;
  color: var(--ddc-muted);
  font-style: italic;
}
.legal-article__back {
  margin-top: 32px;
}

.signup-consent {
  border: none;
  padding: 12px 4px 4px;
  margin: 4px 0 8px;
  font-size: .85rem;
  color: var(--ddc-ink);
  accent-color: var(--ddc-olive);
}
.signup-consent__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  flex-wrap: wrap;
}
.signup-consent label {
  cursor: pointer;
  flex: 1 1 auto;
  margin: 0;
}
.signup-consent input[type="checkbox"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
  accent-color: var(--ddc-olive);
}
.signup-consent a {
  font-size: .8rem;
  color: var(--ddc-olive);
  text-decoration: underline;
  flex: 0 0 auto;
}

.app-footer__legal {
  margin-top: 6px;
  font-size: .75rem;
  display: flex;
  justify-content: center;
  gap: 6px;
  opacity: .75;
}
.app-footer__legal a {
  color: inherit;
  text-decoration: underline;
}

/* ============================================================
   15k. PWA install prompt toast
   ============================================================ */
.ddc-install-toast {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); /* sit above bottom-nav */
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #1a1a1a;
  color: #E8E3D5;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
  font-size: .92rem;
  line-height: 1.4;
  animation: ddcInstallToastIn .26s cubic-bezier(.2, .8, .2, 1);
}
.ddc-install-toast.is-out {
  animation: ddcInstallToastOut .22s ease forwards;
}
.ddc-install-toast__msg {
  flex: 1 1 auto;
  min-width: 0;
}
.ddc-install-toast__msg b {
  color: #fff;
  font-weight: 700;
}
.ddc-install-toast__add {
  flex: 0 0 auto;
  border: 0;
  background: #7B8043;
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
}
.ddc-install-toast__dismiss {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #E8E3D5;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  opacity: .7;
}
.ddc-install-toast__dismiss:hover { opacity: 1; }

/* opacity-only — transform 사용 시 모바일에서 합성 레이어 promotion 유발 → 다른
 * 요소의 mix-blend-mode를 깨트림 (로고 블렌드 ~3초 후 깨짐 원인). 위 로고 키프레임과 동일 사유. */
@keyframes ddcInstallToastIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ddcInstallToastOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@media (min-width: 900px) {
  /* Hide on desktop just in case beforeinstallprompt fires there */
  .ddc-install-toast { display: none; }
}

/* When app is launched as installed PWA, hide the toast entirely */
@media (display-mode: standalone) {
  .ddc-install-toast { display: none !important; }
}

/* ============================================================
   15l. Profile edit collapsible (native details/summary)
   ============================================================ */
.profile-edit__details {
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius-lg);
  background: var(--ddc-surface);
  overflow: hidden;
}
.profile-edit__details[open] {
  box-shadow: var(--shadow-1);
}
.profile-edit__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  list-style: none; /* hide default disclosure triangle */
  font-weight: 700;
  font-size: 1rem;
  color: var(--ddc-ink);
}
.profile-edit__summary::-webkit-details-marker { display: none; }
.profile-edit__summary::marker { content: ''; }
.profile-edit__summary:hover { background: var(--ddc-cream-3); }
.profile-edit__summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ddc-cream-3);
  color: var(--ddc-olive);
  flex-shrink: 0;
}
.profile-edit__details[open] .profile-edit__summary-icon {
  background: var(--ddc-olive);
  color: var(--ddc-cream);
}
.profile-edit__summary-label { flex: 1; min-width: 0; }
.profile-edit__summary-caret {
  font-family: var(--font-display);
  color: var(--ddc-muted);
  transition: transform .2s var(--ease-smooth);
}
.profile-edit__details[open] .profile-edit__summary-caret {
  transform: rotate(180deg);
  color: var(--ddc-olive);
}
.profile-edit__details > form {
  padding: 4px 16px 16px;
  border-top: 1px solid var(--ddc-line);
  animation: tn-expand .2s var(--ease-smooth);
}
@keyframes tn-expand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.profile-edit__logout {
  margin-top: 10px;
}

/* ============================================================
   15j. UI polish — select styling, opponents modal, action alignment
   ============================================================ */

/* --- profile-field select: 커스텀 드롭다운 화살표로 input 과 시각 통일 --- */
.profile-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23606060' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
  cursor: pointer;
}
.profile-field select:focus {
  /* 포커스 시 화살표는 그대로, 배경만 흰색으로 */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23606060' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

/* --- 자주 만난 상대 "더보기" 링크 --- */
.stats-opponents__more-wrap {
  text-align: right;
  margin-top: 10px;
}
.stats-opponents__more {
  display: inline-block;
  font-size: .82rem;
  color: var(--ddc-olive);
  font-weight: 600;
  text-decoration: none;
  padding: 4px 6px;
  transition: opacity .15s var(--ease-smooth);
}
.stats-opponents__more:hover,
.stats-opponents__more:focus {
  opacity: .7;
  text-decoration: underline;
}

/* --- 지금까지 만난 상대 모달 --- */
.opponents-modal {
  max-width: 460px;
}
.opponents-modal__body {
  padding: 14px 18px 18px;
}
.opponents-modal__sub {
  font-size: .82rem;
  color: var(--ddc-muted);
  margin: 0 0 12px;
}
.opponents-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 60vh;
  overflow-y: auto;
  /* Subtle inner scroll padding so last item isn't flush with the bottom */
  padding-right: 4px;
}
.opponents-modal__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--ddc-cream-3);
  border: 1px solid var(--ddc-line);
}
.opponents-modal__avatar img,
.opponents-modal__avatar .tn-avatar {
  display: block;
  border-radius: 50%;
}
.opponents-modal__info {
  flex: 1 1 auto;
  min-width: 0;
}
.opponents-modal__name {
  font-weight: 600;
  font-size: .94rem;
  color: var(--ddc-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.opponents-modal__meta {
  font-size: .78rem;
  color: var(--ddc-muted);
  margin-top: 2px;
}
.opponents-modal__delta {
  flex: 0 0 auto;
  text-align: right;
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.opponents-modal__delta.is-up   { color: var(--ddc-olive); }
.opponents-modal__delta.is-down { color: var(--ddc-danger); }
.opponents-modal__delta-sub {
  display: block;
  font-size: .68rem;
  font-weight: 500;
  color: var(--ddc-muted);
  margin-top: 1px;
  letter-spacing: .03em;
}

/* ============================================================
   15m. Front-page polish — cinematic micro-interactions
   ============================================================ */

/* Logo — entrance. NOTE: transform/scale 사용 시 모바일 브라우저(특히 iOS
 * Safari)가 합성 레이어를 만들고, 그 레이어 위에서는 `mix-blend-mode: darken`
 * 가 작동하지 않음. 애니메이션 종료 후에도 레이어가 잔존해 흰 종이 배경이
 * 노출되는 버그가 있었음(2026-05-30 모바일 ~1초 후 깨짐 보고). opacity만으로
 * 페이드인 처리하여 합성 레이어를 만들지 않게 해 블렌드를 안정적으로 유지. */
.dash-hero-logo {
  animation: ddc-logo-in 1s var(--ease-smooth) both;
}
@keyframes ddc-logo-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Greeting — small typography shift after logo lands */
.dash-greet {
  animation: ddc-greet-in .8s var(--ease-smooth) .4s both;
}
@keyframes ddc-greet-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tier card — gentle 3D lift on hover (mobile: tap pressure already handled) */
.tier-card {
  transition: transform .35s var(--ease-spring),
              box-shadow .35s var(--ease-spring),
              border-color .25s var(--ease-smooth);
  will-change: transform;
}
.tier-card:hover {
  transform: translateY(-3px) rotateX(2deg) rotateY(-2deg);
  box-shadow: var(--shadow-3);
  border-color: var(--ddc-line-strong);
}
/* Tennis ball — gentle continuous float to suggest "live" feel */
.tier-card::before {
  animation: ddc-ball-float 5.5s ease-in-out infinite;
}
@keyframes ddc-ball-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(-6deg); }
}
/* On hover the ball pops more vividly — overrides float during hover */
.tier-card:hover::before {
  animation: none;
  transform: rotate(22deg) scale(1.10);
}

/* One-shot shimmer sweep across tier cards on load (subtle "fresh page" cue) */
.tier-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
              transparent 30%,
              rgba(255, 255, 255, .35) 50%,
              transparent 70%);
  transform: translateX(-100%);
  pointer-events: none;
  animation: ddc-shimmer 1.8s ease-out 1.1s 1 both;
  z-index: 2;
}
@keyframes ddc-shimmer {
  to { transform: translateX(100%); }
}

/* Quick action — icon micro-motion on hover */
.qa__icon {
  transition: transform .35s var(--ease-spring), background .2s var(--ease-smooth);
}
.qa:hover .qa__icon {
  transform: scale(1.08) rotate(-4deg);
}
.qa:active .qa__icon {
  transform: scale(.94);
}
.qa__icon svg {
  transition: transform .35s var(--ease-spring);
}
.qa:hover .qa__icon svg {
  transform: rotate(8deg);
}

/* Meeting list items (홈의 다가오는 모임) — slide-in accent on hover */
.activity-item {
  transition: transform .25s var(--ease-smooth),
              background .2s var(--ease-smooth),
              border-color .25s var(--ease-smooth);
  border-left: 3px solid transparent;
}
.activity-item:hover {
  transform: translateX(3px);
  background: var(--ddc-cream-3);
  border-left-color: var(--ddc-olive);
}
.activity-item__avatar {
  transition: transform .35s var(--ease-spring), background .2s var(--ease-smooth);
}
.activity-item:hover .activity-item__avatar {
  transform: scale(1.08) rotate(-4deg);
  background: var(--ddc-olive);
  color: var(--ddc-cream);
}

/* Section title - small underline that draws in once */
.dash-section__title {
  position: relative;
  display: inline-block;
}
.dash-section__title::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--ddc-olive), transparent);
  transform: scaleX(0);
  transform-origin: left;
  animation: ddc-underline-draw .6s var(--ease-smooth) .7s forwards;
}
@keyframes ddc-underline-draw {
  to { transform: scaleX(1); }
}

/* ============================================================
   15n. 사이드 보드 (명예 듀오 + 시즌 성장왕)
   2열 그리드로 나란히 — 진짜 랭킹이 화면 위쪽에 노출되도록.
   카드 한 개만 있으면 자연스럽게 1열 풀폭으로 채워짐.
   ============================================================ */
.rank-side-boards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 6px 0 10px;
}
/* 자식이 1개뿐이면(=단식 탭이라 듀오 없음, 성장왕만) 풀폭 */
.rank-side-boards:has(> :only-child) {
  grid-template-columns: 1fr;
}
.rank-side-boards > .duo-board,
.rank-side-boards > .growth-board { margin: 0; }
/* 매우 좁은 화면(<360px)에선 1열로 스택 */
@media (max-width: 360px) {
  .rank-side-boards { grid-template-columns: 1fr; }
}

.duo-board {
  background: linear-gradient(135deg, var(--ddc-cream-3), var(--ddc-surface));
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius);
  padding: 8px 10px 10px;
  margin: 6px 0 8px;
}
.duo-board__head {
  display: block;        /* flex 대신 block — 좁은 칸에서 title wrap 방지 */
  margin-bottom: 6px;
}
.duo-board__title {
  font-family: var(--font-display);
  font-size: .85rem;
  margin: 0;
  white-space: nowrap;   /* "명예 듀" / "오" 처럼 잘리지 않게 */
  overflow: hidden;
  text-overflow: ellipsis;
}
.duo-board__sub {
  display: block;
  margin-top: 1px;
  font-size: .65rem;
  color: var(--ddc-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.duo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.duo-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 5px 8px;
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  font-size: .8rem;
  min-width: 0;
}
.duo-row--gold   { border-left-color: #EAB308; }
.duo-row--silver { border-left-color: #94A3B8; }
.duo-row--bronze { border-left-color: #A16207; }
.duo-row--me {
  background: linear-gradient(135deg, var(--ddc-cream-3), var(--ddc-surface));
  box-shadow: 0 0 0 1px var(--ddc-olive) inset;
}
.duo-row__medal {
  font-size: .95rem;
  flex: 0 0 16px;
  text-align: center;
  line-height: 1.4;
}
/* 좁은 2열 그리드에선 아바타 숨김 — 이름이 더 중요하고 자리가 부족 */
.duo-row__avatars { display: none; }
.duo-row__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.duo-row__name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.duo-row__plus {
  color: var(--ddc-olive);
  font-weight: 800;
  margin: 0 1px;
}
.duo-row__meta {
  font-size: .7rem;
  color: var(--ddc-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.duo-board--empty .duo-board__empty-msg {
  margin: 4px 0 0;
  font-size: .78rem;
  color: var(--ddc-muted);
  line-height: 1.5;
}

/* === 시즌 성장왕 (🚀) === 명예 듀오와 같은 컴팩트 톤. */
.growth-board {
  background: linear-gradient(135deg, rgba(123,128,67,.08), var(--ddc-surface));
  border: 1px solid var(--ddc-line);
  border-radius: var(--radius);
  padding: 8px 10px 10px;
  margin: 6px 0 10px;
}
.growth-board__head {
  display: block;        /* flex 대신 block — 좁은 칸에서 title wrap 방지 */
  margin-bottom: 6px;
}
.growth-board__title {
  font-family: var(--font-display);
  font-size: .85rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.growth-board__sub {
  display: block;
  margin-top: 1px;
  font-size: .65rem;
  color: var(--ddc-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.growth-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.growth-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 5px 8px;
  background: var(--ddc-surface);
  border: 1px solid var(--ddc-line);
  border-left: 3px solid var(--ddc-olive);
  border-radius: var(--radius-sm);
  font-size: .8rem;
  min-width: 0;
}
.growth-row--me {
  background: linear-gradient(135deg, rgba(123,128,67,.1), var(--ddc-surface));
  box-shadow: 0 0 0 1px var(--ddc-olive) inset;
}
.growth-row__icon {
  font-size: .95rem;
  flex: 0 0 16px;
  text-align: center;
  line-height: 1.4;
}
/* 좁은 칸이라 아바타 숨김 */
.growth-row__avatar { display: none; }
.growth-row__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.growth-row__name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.growth-row__meta {
  font-size: .7rem;
  color: var(--ddc-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.growth-row__delta {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  flex: 0 0 auto;
  line-height: 1.3;
}
.growth-row__delta.is-up   { color: var(--ddc-olive); }
.growth-row__delta.is-down { color: var(--ddc-danger); }

/* ============================================================
   15o. Live count badges — bump animation + new-item toast
   ============================================================ */
/* When a pending count changes via polling, briefly bump the badge */
.count-bump {
  animation: tn-count-bump .6s var(--ease-spring);
}
@keyframes tn-count-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); background: #DC2626; }
  100% { transform: scale(1); }
}

/* Toast shown when a new pending item arrives while viewing the page */
.live-toast {
  position: fixed;
  left: 50%;
  bottom: 84px; /* above the bottom nav */
  transform: translateX(-50%) translateY(20px);
  z-index: 1200;
  background: var(--ddc-ink);
  color: var(--ddc-cream);
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: .85rem;
  font-weight: 700;
  box-shadow: var(--shadow-3);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease-smooth), transform .25s var(--ease-smooth);
}
.live-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* ============================================================
   16. Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1; transform: none; }
}