/* =====================================================
   ZenStyle "Wood / Beige" Theme + Mobile Hardening Patch
   Drop this AFTER your existing index-zen.css
   Last updated: 2025-08-25 (Asia/Seoul)
   ===================================================== */

/* 0) Fluid typography baseline */
html {
  font-size: clamp(14px, 1.45vw, 16px);
}

/* 1) Palette (Louis-Vuitton-esque warm neutrals) */
:root {
  --zen-bg:        #F5F1E8; /* warm ivory */
  --zen-surface:   #FBF8F1; /* parchment */
  --zen-card:      #FFFDF8; /* near-white with warmth */
  --zen-ink:       #2D2A26; /* deep ink */
  --zen-muted:     #7E766C; /* taupe for secondary text */
  --zen-line:      #E7DED0; /* subtle borders */
  --zen-accent:    #7A5C3A; /* coffee brown */
  --zen-accent-2:  #A47C48; /* tan / leather */
  --zen-wood:      #6E4E2E; /* walnut */
  --zen-success:   #5C7F67; /* moss */
  --zen-danger:    #8B4A3A; /* brick */
  --zen-radius:    16px;
  --zen-shadow-1:  0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.06);
}

/* 2) Base */
html, body {
  background: var(--zen-bg);
  color: var(--zen-ink);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  letter-spacing: normal;
}

.h-title, h1, h2, h3 {
  color: var(--zen-ink);
  line-height: 1.25;
  letter-spacing: 0.01em;
  word-break: keep-all;          /* Better for Korean */
  overflow-wrap: anywhere;       /* Prevent long English tokens from overflow */
}

.card {
  background: var(--zen-card);
  border: 1px solid var(--zen-line);
  border-radius: var(--zen-radius);
  box-shadow: var(--zen-shadow-1);
}

/* 3) App chrome (header/nav/board) */
.header, .navbar, #courtBoard .card:first-child {
  /*background: linear-gradient(180deg, #FFFDF8 0%, #F7F1E7 100%);*/
  border-bottom: 1px solid var(--zen-line);
}

/* 4) Buttons */
.btn, button.primary {
  background: var(--zen-accent);
  color: #fff;
  border: 1px solid color-mix(in oklab, var(--zen-accent), #000 12%);
  border-radius: 12px;
  padding: .625rem .9rem;
  line-height: 1.2;
  transition: transform .06s ease, filter .15s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.btn:hover, button.primary:hover { filter: brightness(.98); }
.btn:active, button.primary:active { transform: translateY(1px); }
.btn.secondary, button.secondary {
  background: var(--zen-accent-2);
  border-color: color-mix(in oklab, var(--zen-accent-2), #000 12%);
}
.btn.ghost, button.ghost {
  background: transparent;
  color: var(--zen-accent);
  border: 1px solid var(--zen-line);
}

/* 5) Chips / badges / pills */
.badge, .pill, .tag {
  background: #F0E8DA;
  color: var(--zen-wood);
  border: 1px solid #E3D9C6;
  border-radius: 999px;
  padding: .15rem .55rem;
  font-size: .85rem;
}

/* 6) Tables & scroll areas */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
table th, table td {
  border-bottom: 1px solid var(--zen-line);
  padding: .55rem .6rem;
}
/* Make wide tables scrollable on mobile without breaking layout */
@media (max-width: 640px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 7) Mobile layout hardening (prevents clipped / broken text in flex/grid rows) */
:where(.row, .grid, .flex, .stack, .match-row, .team-row, .toolbar, .list) > * {
  min-width: 0;   /* critical: allows children to shrink */
}
/* prefer wrapping instead of truncating important labels on small screens */
:where(.label, .title, .h-title, .cell, .name, .team, .versus) {
  white-space: normal;
  overflow-wrap: anywhere;
}
/* common toolbars */
.toolbar {
  gap: 8px;
  align-items: center;
}
@media (max-width: 640px) {
  .card { padding: 12px; }
  .toolbar { flex-wrap: wrap; }
  .h-title { font-size: clamp(18px, 5vw, 22px); }
  .btn, button { min-width: 44px; min-height: 40px; }
}

/* 8) Inputs */
input, select, textarea {
  background: #FFFEFB;
  border: 1px solid var(--zen-line);
  color: var(--zen-ink);
  border-radius: 12px;
  padding: .55rem .7rem;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid color-mix(in oklab, var(--zen-accent), #fff 15%);
  outline-offset: 2px;
}

/* 9) Dividers */
.hr, .divider { border-color: var(--zen-line); }

/* 10) A11y & touch */
:focus-visible { outline: 2px solid color-mix(in oklab, var(--zen-accent), #fff 15%); outline-offset: 2px; }
button, .btn { touch-action: manipulation; }