/* shared/theme.css - 두 사이트(성도용·신학원) 공통 색상/그림자 토큰
   신학원(에콰도르성서신학원) 디자인을 기준으로, 밝은 푸른 계열로 통일한다.
   색을 바꾸고 싶으면 이 파일만 고치면 두 사이트에 함께 반영된다. */

:root {
    /* 브랜드 파랑 (진함 → 밝음) */
    --brand-900: #0a3d73;
    --brand-700: #0b5cad;
    --brand-600: #1570cc;   /* 기본 버튼/링크 (흰 글자와 대비 충분) */
    --brand-500: #2a8be0;
    --brand-400: #13b5ea;   /* 신학원 CI 하늘색 - 강조/장식용 */
    --brand-200: #bfe0fa;
    --brand-100: #e3f1fd;
    --brand-50:  #f3f9fe;

    --brand-gradient: linear-gradient(135deg, #1570cc 0%, #1aa2e6 100%);
    --brand-gradient-deep: linear-gradient(135deg, #0b5cad 0%, #1570cc 55%, #13b5ea 100%);
    --brand-gradient-soft: linear-gradient(160deg, #f3f9fe 0%, #d8ecfc 100%);
    --brand-shadow: 0 8px 22px rgba(21, 112, 204, 0.28);
    --brand-ring: 0 0 0 3px rgba(21, 112, 204, 0.15);

    /* 글자/선 */
    --ink: #1f2937;
    --ink-muted: #6b7280;
    --line: #e2eaf3;

    --radius-lg: 24px;
    --radius-md: 14px;
    --radius-sm: 10px;
}

/* ── 번역이 적용되기 전에는 화면을 잠깐 가린다 ──
   HTML 에 적힌 기본 글자(한국어)가 번쩍 보였다가 스페인어로 바뀌지 않도록, i18n.js 가
   번역을 끝내고 <html class="i18n-ready"> 를 붙이면 보인다.
   (스크립트가 실패해도 1.2초 뒤에는 무조건 보이게 한다) */
html:not(.i18n-ready) body {
    opacity: 0;
    animation: i18nReveal 0s linear 1.2s forwards;
}

@keyframes i18nReveal {
    to { opacity: 1; }
}

body { transition: opacity 0.12s ease; }

/* ── 한국어/스페인어 전환 버튼 (세 사이트 공통 디자인 - 선교회 홈 상단과 같은 모양) ──
   <div class="lang-switch"> 지구본 svg + <button class="lang-btn" data-lang="ko">KO</button> + ES
   밝은 바탕용 기본값. 선교회 홈의 투명 상단바에서는 member/css/home.css 가 흰색으로 바꾼다. */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 4px 3px 9px;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    color: var(--brand-700);
    background: #fff;
    font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    line-height: 1;
}

.lang-switch svg {
    width: 18px;
    height: 18px;
    margin-right: 3px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    flex-shrink: 0;
}

.lang-switch .lang-btn {
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 9px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.75;
    line-height: 1;
}

.lang-switch .lang-btn:hover { opacity: 1; }

.lang-switch .lang-btn.active {
    opacity: 1;
    background: var(--brand-gradient);
    color: #fff;
}

/* 로그인·가입 화면처럼 페이지 오른쪽 위에 떠 있는 경우 */
.lang-switch-floating {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10;
    box-shadow: 0 4px 14px rgba(11, 61, 115, 0.12);
}