/* =====================================================================
   ClubGG Brand theme — layered on top of redesign.css
   Split into:  [data-brand="clubgg"]              → brand colors (both modes)
                [data-brand="clubgg"][data-theme="dark"]  → dark surfaces
                [data-brand="clubgg"][data-theme="light"] → light surfaces
   Brand DNA: green primary/active, red logo accent, orange highlight,
   solid opaque buttons, bordered segmented controls.
   ===================================================================== */

/* ---- Brand colors (mode-independent) ---- */
[data-brand="clubgg"] {
  --color-primary:        #0FA050;
  --color-primary-hover:  #0C8A44;
  --color-primary-press:  #0A7338;
  --color-primary-bg:     rgba(31,209,92,0.16);

  --color-accent:    #FF8A1E;
  --color-accent-bg: rgba(255,138,30,0.16);

  --color-positive:    #1FD15C;  --color-positive-bg: rgba(31,209,92,0.14);
  --color-negative:    #FF4D4D;  --color-negative-bg: rgba(255,77,77,0.16);
  --color-cautionary:  #E0930A;  --color-cautionary-bg: rgba(255,184,0,0.16);
  --color-informative: #2F8FF0;  --color-informative-bg: rgba(59,155,255,0.16);
}

/* ---- DARK mode surfaces (Slate Elevated · 라인 없음 — 면 밝기로만 구분) ---- */
[data-brand="clubgg"][data-theme="dark"] {
  --color-fg-strong:    #FFFFFF;
  --color-fg-normal:    #EAEFF6;
  --color-fg-neutral:   #B2BDCB;
  --color-fg-alternate: #9AA6B5;
  --color-fg-assistive: #8794A3;
  --color-fg-disable:   #5A6675;

  --color-bg-base:      #262E38;
  --color-bg-elevated:  #2E3742;
  --color-bg-alternate: #2E3742;
  --color-bg-neutral:   #333D49;
  --color-bg-inverse:   #EAEFF6;

  --color-line-normal:  #48545F;
  --color-line-neutral: #333D49;
  --color-line-strong:  #5A6675;
}

/* ---- DARK · iOS Neutral Charcoal variant (data-dark="ios") — warm-neutral, no blue undertone ---- */
[data-brand="clubgg"][data-theme="dark"][data-dark="ios"] {
  --color-fg-strong:    #FFFFFF;
  --color-fg-normal:    #EBEBF0;
  --color-fg-neutral:   #98989F;
  --color-fg-alternate: #8E8E93;
  --color-fg-assistive: #636366;
  --color-fg-disable:   #48484A;

  --color-bg-base:      #2C2C2E;
  --color-bg-elevated:  #3A3A3C;
  --color-bg-alternate: #1C1C1E;
  --color-bg-neutral:   #3A3A3C;
  --color-bg-inverse:   #FFFFFF;

  --color-line-normal:  #38383A;
  --color-line-neutral: #2C2C2E;
  --color-line-strong:  #545458;
}
[data-brand="clubgg"][data-theme="dark"][data-dark="ios"].bo,
[data-brand="clubgg"][data-theme="dark"][data-dark="ios"] .host { background: #1C1C1E; }
[data-brand="clubgg"][data-theme="dark"][data-dark="ios"] .rail { background: #1C1C1E; border-right-color: #38383A; }
[data-brand="clubgg"][data-theme="dark"][data-dark="ios"] .tbl th { background: #323234; }

/* ---- LIGHT mode surfaces (white-first; inherits DS :root, with brand tints) ---- */
[data-brand="clubgg"][data-theme="light"] {
  --color-fg-strong:    #171719;
  --color-fg-normal:    #37383C;
  --color-fg-neutral:   #70737C;
  --color-fg-alternate: #989BA2;
  --color-fg-assistive: #AEB0B6;
  --color-fg-disable:   #C2C4C8;

  --color-bg-base:      #FFFFFF;
  --color-bg-elevated:  #FFFFFF;
  --color-bg-alternate: #F4F5F7;
  --color-bg-neutral:   #EDEEF1;
  --color-bg-inverse:   #171719;

  --color-line-normal:  #E2E3E7;
  --color-line-neutral: #EFF0F2;
  --color-line-strong:  #C2C4C8;
}

/* =====================================================================
   Component treatments (mode-independent — use semantic tokens)
   ===================================================================== */

/* crisp wordmark + red GG accent + green env chip */
[data-brand="clubgg"] .rail-logo b { color: var(--color-fg-strong); }
[data-brand="clubgg"] .rail-logo .gg-accent {
  display: inline-block; width: 13px; height: 9px; margin-left: -3px; vertical-align: 7px;
  background: #E61E1E; clip-path: polygon(28% 0, 100% 0, 72% 100%, 0 100%);
}
[data-brand="clubgg"] .rail-env { color: #14A546; background: rgba(31,209,92,0.16); }

/* Active sidebar item — dark green chip + left accent bar + white text */
[data-brand="clubgg"] .nav-item.active {
  background: color-mix(in srgb, var(--color-primary) 28%, #0A1410); color: #FFFFFF;
  box-shadow: inset 3px 0 0 var(--color-primary);
}

/* Top tabs — flat underline bar (no tint); active = green text + green underline */
[data-brand="clubgg"] .tabs {
  background: transparent; border: 0; border-bottom: 1px solid var(--color-line-normal);
  border-radius: 0; padding: 0 4px; gap: 2px;
}
[data-brand="clubgg"] .tab {
  flex: 0 0 auto; border-radius: 0; padding: 12px 16px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; box-shadow: none;
}
[data-brand="clubgg"] .tab:hover { background: transparent; color: var(--color-fg-strong); }
[data-brand="clubgg"] .tab.active {
  background: transparent; color: var(--color-primary);
  border-bottom-color: var(--color-primary); box-shadow: none;
}

/* Segmented control — bordered group (kept) + selected tab filled with brand color */
[data-brand="clubgg"] .seg {
  background: transparent;
  border: 1px solid var(--color-line-normal);
  border-radius: var(--radius-8);
  padding: 3px; gap: 2px;
}
[data-brand="clubgg"] .seg button { color: var(--color-fg-neutral); border: 0; }
[data-brand="clubgg"] .seg button:hover { color: var(--color-fg-strong); background: var(--color-bg-neutral); }
[data-brand="clubgg"] .seg button.on {
  background: var(--color-primary); color: #FFFFFF; box-shadow: none;
}

/* Unified, opaque, on-brand buttons: non-destructive = SOLID green, white text */
[data-brand="clubgg"] .btn-primary,
[data-brand="clubgg"] .btn-positive,
[data-brand="clubgg"] .btn-tonal,
[data-brand="clubgg"] .btn-outline {
  background: var(--color-primary); color: #FFFFFF; border-color: transparent;
}
[data-brand="clubgg"] .btn-tonal:hover,
[data-brand="clubgg"] .btn-outline:hover,
[data-brand="clubgg"] .btn-primary:hover {
  background: var(--color-primary-hover); color: #FFFFFF;
}
/* Destructive = solid red */
[data-brand="clubgg"] .btn-danger {
  background: var(--color-negative); color: #fff; border-color: transparent;
}
/* Informative = solid blue (secondary emphasis actions, e.g. Save Template) */
[data-brand="clubgg"] .btn-info {
  background: var(--color-informative); color: #fff; border-color: transparent;
}
[data-brand="clubgg"] .btn-info:hover { background: color-mix(in srgb, var(--color-informative) 88%, #000); }
[data-brand="clubgg"] .btn-danger:hover { background: var(--color-negative); filter: brightness(0.92); }

/* Export / download = informative blue (utility action, distinct from green CTAs) */
[data-brand="clubgg"] .btn-export { background: var(--color-informative); color: #FFFFFF; border-color: transparent; }
[data-brand="clubgg"] .btn-export:hover { background: var(--color-informative); filter: brightness(1.08); }

/* row hover: subtle brand tint (works on both modes) */
[data-brand="clubgg"] .tbl tbody tr:hover { background: rgba(31,209,92,0.07); }

/* =====================================================================
   Dark-only surface flourishes
   ===================================================================== */
[data-brand="clubgg"][data-theme="dark"].bo { background: #1A2027; }
[data-brand="clubgg"][data-theme="dark"] .rail { background: #1F252C; border-right-color: #333D49; }
[data-brand="clubgg"][data-theme="dark"] { color-scheme: dark; }
[data-brand="clubgg"][data-theme="light"] { color-scheme: light; }
[data-brand="clubgg"][data-theme="dark"] .tbl th { background: #333D49; }
/* 행 구분선은 지브라 표에서만 감춘다 — 지브라가 없는 표는 선이 유일한 행 구분 단서 */
[data-brand="clubgg"][data-theme="dark"] .tbl.zebra td { border-bottom-color: transparent; }