/* =========================================================
   Leapinity 브랜드 스타일 (leapinity-brand.css) v1 · 2026-11-01
   leapinity.com(대문)·games.leapinity.com(허브)과 같은 모양을 모든 사이트에 맞춰요.
   - 각 사이트가 이 파일을 "자기 폴더에 복사"해서 써요 (다른 주소에서 불러오지 않아요 → CSP style-src 'self' 그대로)
   - 모든 이름은 lp- 로 시작해서 사이트 원래 CSS 와 안 부딪혀요
   - 사이트마다 자기 색 하나: :root { --lp-accent: #색; --lp-accent-ink: #흰바탕글자색; --lp-accent-ink-dark: #어두운바탕글자색; }
   - 어두운 화면: 기기 설정(prefers-color-scheme) + 사이트의 data-theme="dark|light" 버튼 둘 다 따라가요
   - 글꼴: Pretendard(사이트 폴더에 같이 둠) → 없으면 기기 글꼴
   ========================================================= */

:root {
  /* 브랜드 3색 (로고 무한 고리) */
  --lp-vio: #7c5cff; --lp-sky: #38bdf8; --lp-mint: #2dd4a7;
  --lp-grad: linear-gradient(100deg, var(--lp-vio) 0%, var(--lp-sky) 55%, var(--lp-mint) 100%);
  /* 사이트 고유 색 (사이트에서 덮어써요). -ink 는 흰 바탕 글자로 써도 4.5:1 넘는 진한 값 */
  --lp-accent: #7c5cff; --lp-accent-ink: #5b3df0; --lp-on-accent: #ffffff;

  /* 바탕·글자 (밝게) */
  --lp-bg: #ffffff; --lp-bg-soft: #f5f6fb; --lp-card: #ffffff; --lp-line: #e4e7f1;
  --lp-ink: #161c3d; --lp-soft: #565d7e; --lp-mute: #646b89;   /* mute 도 흰 바탕 5:1 이상 */
  --lp-chip: #f1f3fa; --lp-chip-ink: #4a5173;
  --lp-focus: #0284c7;
  --lp-bar-bg: rgba(255, 255, 255, .86); --lp-bar-line: #e4e7f1;
  --lp-ghost-bg: rgba(255, 255, 255, .78); --lp-ghost-line: rgba(22, 28, 61, .16); --lp-ghost-hover: #efeaff;
  --lp-foot-bg: #eceef7; --lp-foot-ink: #4a5173; --lp-foot-hi: #161c3d; --lp-foot-copy: #5c6382; --lp-foot-rule: #d9dcea;
  --lp-shadow: 0 10px 30px rgba(22, 28, 61, .07);
  --lp-shadow-lg: 0 24px 60px rgba(11, 16, 48, .18);

  /* 모양 */
  --lp-font: Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --lp-r: 24px;        /* 카드 */
  --lp-r-sm: 14px;     /* 입력칸·작은 상자 */
  --lp-pill: 999px;    /* 버튼·칩 */
  --lp-tap: 44px;      /* 누르는 곳 최소 크기 */
  --lp-ease: cubic-bezier(.22, 1, .36, 1);
  --lp-wrap: 1160px;
}

/* 어두운 화면 — 두 곳 값은 똑같이 둬요 */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --lp-bg: #0b1030; --lp-bg-soft: #0f1438; --lp-card: #161d45; --lp-line: #2b3468;
  --lp-accent-ink: var(--lp-accent-ink-dark, #b4a3ff);
  --lp-ink: #eef0fb; --lp-soft: #b7bddf; --lp-mute: #9ba2c8;
  --lp-chip: #232b5c; --lp-chip-ink: #c9cef0;
  --lp-focus: #38bdf8;
  --lp-bar-bg: rgba(11, 16, 48, .82); --lp-bar-line: rgba(255, 255, 255, .08);
  --lp-ghost-bg: rgba(255, 255, 255, .08); --lp-ghost-line: rgba(255, 255, 255, .24); --lp-ghost-hover: rgba(255, 255, 255, .14);
  --lp-foot-bg: #080c26; --lp-foot-ink: #aab1d6; --lp-foot-hi: #ffffff; --lp-foot-copy: #8d95c0; --lp-foot-rule: rgba(255, 255, 255, .09);
  --lp-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --lp-shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
} }
:root[data-theme="dark"] {
  --lp-bg: #0b1030; --lp-bg-soft: #0f1438; --lp-card: #161d45; --lp-line: #2b3468;
  --lp-accent-ink: var(--lp-accent-ink-dark, #b4a3ff);
  --lp-ink: #eef0fb; --lp-soft: #b7bddf; --lp-mute: #9ba2c8;
  --lp-chip: #232b5c; --lp-chip-ink: #c9cef0;
  --lp-focus: #38bdf8;
  --lp-bar-bg: rgba(11, 16, 48, .82); --lp-bar-line: rgba(255, 255, 255, .08);
  --lp-ghost-bg: rgba(255, 255, 255, .08); --lp-ghost-line: rgba(255, 255, 255, .24); --lp-ghost-hover: rgba(255, 255, 255, .14);
  --lp-foot-bg: #080c26; --lp-foot-ink: #aab1d6; --lp-foot-hi: #ffffff; --lp-foot-copy: #8d95c0; --lp-foot-rule: rgba(255, 255, 255, .09);
  --lp-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --lp-shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
}

/* ---------- 기본 ---------- */
.lp-body { margin: 0; background: var(--lp-bg-soft); color: var(--lp-ink); font-family: var(--lp-font);
  word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
.lp-wrap { width: 100%; max-width: var(--lp-wrap); margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
@media (max-width: 480px) { .lp-wrap { padding: 0 16px; } }
.lp-focus:focus-visible, .lp-bar :focus-visible, .lp-foot :focus-visible,
.lp-btn:focus-visible, .lp-chip:focus-visible, .lp-input:focus-visible {
  outline: 3px solid var(--lp-focus); outline-offset: 3px; }
.lp-grad-text { background: var(--lp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-eyebrow { display: inline-block; margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .01em;
  background: var(--lp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- 맨 위 막대 (로고 + 사이트 이름 + 오른쪽 버튼들) ---------- */
.lp-bar { position: sticky; top: 0; z-index: 40; background: var(--lp-bar-bg); border-bottom: 1px solid var(--lp-bar-line);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  padding-top: env(safe-area-inset-top); color: var(--lp-ink); }
.lp-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.lp-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; min-height: var(--lp-tap);
  color: inherit; text-decoration: none; font-size: 18px; letter-spacing: -.02em; white-space: nowrap; border-radius: 10px; }
.lp-mark { width: 38px; height: auto; flex: none; overflow: visible; display: block; }
.lp-brand b { font-weight: 800; }
.lp-brand i { font-style: normal; font-weight: 600; color: var(--lp-accent-ink); }
.lp-mark-head { transform-box: fill-box; transform-origin: 30% 70%; transition: transform .45s var(--lp-ease); }
.lp-brand:hover .lp-mark-head { transform: translate(3px, -3px); }
.lp-bar-end { display: flex; align-items: center; gap: 8px; flex: none; }
@media (max-width: 420px) { .lp-brand { font-size: 16px; gap: 8px; } .lp-mark { width: 32px; } }

/* ---------- 버튼 ---------- */
.lp-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--lp-tap); padding: 0 22px; border-radius: var(--lp-pill); border: 1px solid transparent;
  font: 700 15px/1.2 var(--lp-font); text-decoration: none; cursor: pointer; isolation: isolate;
  transition: transform .3s var(--lp-ease), background-color .2s, border-color .2s; }
.lp-btn:disabled, .lp-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.lp-btn-grad { color: #fff; background: var(--lp-grad); }
.lp-btn-grad::after { content: ''; position: absolute; inset: 6px 10px -6px; z-index: -1; border-radius: inherit;
  background: var(--lp-grad); filter: blur(16px); opacity: .45; transition: opacity .3s; }
.lp-btn-accent { color: var(--lp-on-accent); background: var(--lp-accent); }
.lp-btn-ghost { color: var(--lp-ink); background: var(--lp-ghost-bg); border-color: var(--lp-ghost-line); }
@media (hover: hover) {
  .lp-btn:not(:disabled):hover { transform: translateY(-2px); }
  .lp-btn-grad:hover::after { opacity: .8; }
  .lp-btn-ghost:hover { background: var(--lp-ghost-hover); }
}
.lp-btn:not(:disabled):active { transform: scale(.97); }

/* ---------- 카드 · 칩 · 입력칸 ---------- */
.lp-card { background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-r); box-shadow: var(--lp-shadow); }
.lp-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--lp-pill);
  background: var(--lp-chip); color: var(--lp-chip-ink); border: 1px solid transparent; font: 600 14px/1.2 var(--lp-font); }
button.lp-chip, a.lp-chip { min-height: var(--lp-tap); cursor: pointer; text-decoration: none; }
.lp-chip[aria-pressed="true"], .lp-chip.is-on { background: var(--lp-accent); color: var(--lp-on-accent); }
.lp-input { min-height: var(--lp-tap); padding: 10px 14px; border-radius: var(--lp-r-sm); border: 1px solid var(--lp-line);
  background: var(--lp-card); color: var(--lp-ink); font: 500 16px/1.4 var(--lp-font); box-sizing: border-box; }
.lp-input::placeholder { color: var(--lp-mute); }
.lp-input:focus-visible { border-color: var(--lp-focus); outline-offset: 0; }

/* ---------- 아래쪽 (made by Leapinity + 다른 사이트 링크) ---------- */
.lp-foot { background: var(--lp-foot-bg); color: var(--lp-foot-ink); padding: 36px 0 calc(36px + env(safe-area-inset-bottom));
  font: 400 15px/1.6 var(--lp-font); margin-top: 48px; }
.lp-foot a { color: inherit; text-decoration: none; transition: color .2s; }
.lp-foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; }
.lp-foot-brand { display: inline-flex; align-items: center; gap: 10px; min-height: var(--lp-tap); font-size: 16px; letter-spacing: -.01em; }
.lp-foot-brand .lp-mark { width: 32px; }
.lp-foot-brand b { color: var(--lp-foot-hi); font-weight: 800; }
.lp-foot-brand:hover { color: var(--lp-foot-hi); }
.lp-foot-links { display: flex; flex-wrap: wrap; gap: 0 18px; margin-left: auto; }
.lp-foot-links a { display: inline-flex; align-items: center; min-height: var(--lp-tap); }
.lp-foot-links a:hover { color: var(--lp-foot-hi); }
.lp-foot-copy { width: 100%; margin: 0; padding-top: 16px; border-top: 1px solid var(--lp-foot-rule); color: var(--lp-foot-copy); font-size: 14px; }
@media (max-width: 640px) { .lp-foot-links { margin-left: 0; width: 100%; } }

/* 🌓 화면 색 버튼 (사이트가 이미 가진 버튼에 붙여도 돼요) */
.lp-theme-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: var(--lp-tap); height: var(--lp-tap);
  padding: 0 12px; border-radius: var(--lp-pill); border: 1px solid var(--lp-ghost-line); background: var(--lp-ghost-bg); color: var(--lp-ink);
  font: 700 14px/1 var(--lp-font); cursor: pointer; }
.lp-theme-btn:hover { background: var(--lp-ghost-hover); }

@media (prefers-reduced-motion: reduce) {
  .lp-btn, .lp-mark-head, .lp-btn-grad::after { transition: none !important; }
  .lp-btn:hover, .lp-btn:active { transform: none !important; }
}