/* edge-hub Keycloak login theme. Source: DESIGN.md (Kakao corporate reference design system).
 * Child of keycloak.v2 (PatternFly v5); loaded after the parent's css/styles.css.
 *
 * Same surface rules as portal/config/custom.css:
 * - corporate marketing tokens only; Kakao Login compliance values (#fee500, symbol) are not used,
 *   and the sign-in button deliberately avoids yellow so it cannot be mistaken for a Kakao Login button.
 * - KakaoBig/KakaoSmall declared by name, system fallback, no font files bundled.
 * - Extensions where DESIGN.md gives no value: CTA hover #333, dark canvas #000 with #111 card,
 *   input focus ring in marketing yellow.
 */

:root {
  --kakao-marketing-yellow: #fae100;
  --kakao-dark-marketing: #111111;
  --kakao-canvas: #ffffff;
  --kakao-foreground: #333333;
  --kakao-on-dark: #ffffff;
  /* DESIGN.md gives #888888 (3.5:1 on white, below WCAG AA 4.5:1 for the 12px helper text).
   * #6b6b6b holds 4.5:1 on canvas and surface; dark mode keeps a lighter value (below). Same values as ai-chat. */
  --kakao-muted: #6b6b6b;
  --kakao-surface: #eeeeee;
  --kakao-border: #dbdbdb;
  --kakao-font-big: "KakaoBig", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Roboto, sans-serif;
  --kakao-font-small: "KakaoSmall", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Roboto, sans-serif;

  /* PatternFly globals */
  --pf-v5-global--FontFamily--sans-serif: var(--kakao-font-small);
  --pf-v5-global--FontFamily--text: var(--kakao-font-small);
  --pf-v5-global--FontFamily--heading: var(--kakao-font-big);
  --pf-v5-global--FontFamily--heading--sans-serif: var(--kakao-font-big);
  --pf-v5-global--link--Color: var(--kakao-foreground);
  --pf-v5-global--link--Color--hover: var(--kakao-dark-marketing);
  --pf-v5-global--BorderColor--100: var(--kakao-border);

  /* keycloak.v2 hooks */
  --keycloak-card-top-color: transparent;
}

/* Canvas: white, no background image (parent uses .login-pf body). */
.login-pf body { background: var(--kakao-canvas); }
.login-pf.pf-v5-theme-dark body { background: #000000; }
.pf-v5-theme-dark { --kakao-muted: #8f8f8f; }  /* 4.5:1 on the #111 card (see :root) */

/* Header: realm display name as text (Corporate Heading, KakaoBig 30/700/40) instead of the Keycloak logo. */
div.kc-logo-text { background-image: none; height: auto; width: auto; }
div.kc-logo-text span { display: inline; }
#kc-header-wrapper {
  font-family: var(--kakao-font-big);
  font-size: 30px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--kakao-foreground) !important;
}
.pf-v5-theme-dark #kc-header-wrapper { color: var(--kakao-on-dark) !important; }

/* Card: flat, canvas fill, 1px border, 16px radius. Dark: #111 on black. */
.pf-v5-c-login__main {
  background: var(--kakao-canvas);
  border: 1px solid var(--kakao-border);
  border-radius: 16px;
  box-shadow: none;
  overflow: hidden;
}
.pf-v5-c-login__main-header { border-top: 0; }
.pf-v5-theme-dark .pf-v5-c-login__main { background: var(--kakao-dark-marketing); border-color: var(--kakao-dark-marketing); }

/* Title: Corporate Title (KakaoSmall 28/700/42). */
#kc-page-title {
  font-family: var(--kakao-font-small);
  font-size: 28px;
  font-weight: 700;
  line-height: 42px;
  color: var(--kakao-foreground);
}
.pf-v5-theme-dark #kc-page-title { color: var(--kakao-on-dark); }

/* Labels and helper text: Body 14/400/21, Caption 12 muted. */
.pf-v5-c-form__label-text {
  font-family: var(--kakao-font-small);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: var(--kakao-foreground);
}
.pf-v5-theme-dark .pf-v5-c-form__label-text { color: var(--kakao-on-dark); }
.pf-v5-c-helper-text { color: var(--kakao-muted); font-size: 12px; letter-spacing: -0.2px; }

/* Inputs: pill (16px), 1px border. PatternFly draws its underline with ::after; it is removed and
 * the wrapper border carries hover (muted) and focus (marketing yellow ring) instead. */
.pf-v5-c-form-control {
  --pf-v5-c-form-control--BorderWidth: 1px;
  --pf-v5-c-form-control--BorderColor: var(--kakao-border);
  --pf-v5-c-form-control--BackgroundColor: var(--kakao-canvas);
  --pf-v5-c-form-control--Color: var(--kakao-foreground);
  --pf-v5-c-form-control--FontSize: 14px;
  --pf-v5-c-form-control--LineHeight: 21px;
  --pf-v5-c-form-control--PaddingInlineStart: 16px;
  --pf-v5-c-form-control--PaddingInlineEnd: 16px;
  --pf-v5-c-form-control--PaddingBlockStart: 8px;
  --pf-v5-c-form-control--PaddingBlockEnd: 8px;
  border: 1px solid var(--kakao-border);   /* PF draws its border via ::after (removed below) */
  border-radius: 16px;
  background: var(--kakao-canvas);
  font-family: var(--kakao-font-small);
}
.pf-v5-c-form-control::after { content: none; }
.pf-v5-c-form-control:hover { border-color: var(--kakao-muted); }
.pf-v5-c-form-control:focus-within {
  border-color: var(--kakao-marketing-yellow);
  box-shadow: 0 0 0 1px var(--kakao-marketing-yellow);
}
.pf-v5-c-form-control > input:focus { outline: none; }   /* the wrapper ring is the focus indicator */
.pf-v5-theme-dark .pf-v5-c-form-control {
  --pf-v5-c-form-control--Color: var(--kakao-on-dark);
  border-color: var(--kakao-foreground);
  background: #000000;
}
.pf-v5-theme-dark .pf-v5-c-form-control:hover { border-color: var(--kakao-muted); }
.pf-v5-theme-dark .pf-v5-c-form-control:focus-within { border-color: var(--kakao-marketing-yellow); }

/* Password field: the input group (input + show/hide button) carries the pill border instead. */
.pf-v5-c-input-group {
  border: 1px solid var(--kakao-border);
  border-radius: 16px;
  background: var(--kakao-canvas);
  overflow: hidden;
}
.pf-v5-c-input-group:hover { border-color: var(--kakao-muted); }
.pf-v5-c-input-group:focus-within {
  border-color: var(--kakao-marketing-yellow);
  box-shadow: 0 0 0 1px var(--kakao-marketing-yellow);
}
.pf-v5-c-input-group .pf-v5-c-form-control,
.pf-v5-c-input-group .pf-v5-c-form-control:hover,
.pf-v5-c-input-group .pf-v5-c-form-control:focus-within {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.pf-v5-c-input-group .pf-v5-c-form-control:focus-within { box-shadow: none; }
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
  border: 0;
  background: transparent;
  color: var(--kakao-muted);
}
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control::before,
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control::after,
.pf-v5-c-input-group__item::before,
.pf-v5-c-input-group__item::after { content: none; border: 0; }
.pf-v5-theme-dark .pf-v5-c-input-group { border-color: var(--kakao-foreground); background: #000000; }
.pf-v5-theme-dark .pf-v5-c-input-group:hover { border-color: var(--kakao-muted); }
.pf-v5-theme-dark .pf-v5-c-input-group:focus-within { border-color: var(--kakao-marketing-yellow); }

/* Primary button: Dark Marketing CTA (#111 / white), 16px radius, KakaoSmall 16/700. Dark: inverted. */
.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--kakao-dark-marketing);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--kakao-foreground);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--kakao-foreground);
  --pf-v5-c-button--m-primary--active--BackgroundColor: #000000;
  --pf-v5-c-button--m-primary--Color: var(--kakao-on-dark);
  --pf-v5-c-button--m-primary--hover--Color: var(--kakao-on-dark);
  --pf-v5-c-button--m-primary--focus--Color: var(--kakao-on-dark);
  --pf-v5-c-button--m-primary--active--Color: var(--kakao-on-dark);
  --pf-v5-c-button--BorderRadius: 16px;
  --pf-v5-c-button--FontSize: 16px;
  --pf-v5-c-button--FontWeight: 700;
  --pf-v5-c-button--PaddingTop: 10px;
  --pf-v5-c-button--PaddingBottom: 10px;
  font-family: var(--kakao-font-small);
}
.pf-v5-theme-dark .pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--kakao-on-dark);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--kakao-surface);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--kakao-surface);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--kakao-border);
  --pf-v5-c-button--m-primary--Color: var(--kakao-dark-marketing);
  --pf-v5-c-button--m-primary--hover--Color: var(--kakao-dark-marketing);
  --pf-v5-c-button--m-primary--focus--Color: var(--kakao-dark-marketing);
  --pf-v5-c-button--m-primary--active--Color: var(--kakao-dark-marketing);
}

/* Links and focus clarity. */
#kc-content a, .pf-v5-c-login__main-footer a { color: var(--kakao-foreground); text-decoration: underline; }
.pf-v5-theme-dark #kc-content a, .pf-v5-theme-dark .pf-v5-c-login__main-footer a { color: var(--kakao-on-dark); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--kakao-marketing-yellow); outline-offset: 2px; }