/* 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;

    /* ── 디자인 시스템 (docs/design-system, 2026-11-09) 이 이름 붙인 값 ──
       지금까지 CSS 에 이름 없이 적던 값에 이름을 붙였다. 새 화면은 이 이름을 쓴다 (값을 직접 적지 않기).
       값은 사이트에서 쓰던 그대로라 화면은 바뀌지 않는다. */
    --lw-navy: #0b3d73;                /* 위쪽 바 도구 · 숫자 강조 · 표 머리 (CSS 에 fallback 으로만 있던 값, 96곳 모두 같음) */
    --lw-900-rgb: 11, 61, 115;         /* rgba(var(--lw-900-rgb), .12) 그림자용 */
    --lw-700-rgb: 11, 92, 173;
    --lw-600-rgb: 21, 112, 204;
    --ink-heading: #0f2f57;            /* 카드 안 제목 · 창 제목 */
    --ink-700: #344054;                /* 칩 · 표 · 목록 글자 */
    --ink-600: #475467;                /* 꺼진 탭 · 숫자 칸 */
    --ink-500: #667085;                /* 메타 · 빈 목록 안내 (ink-muted 와 같은 역할) */
    --ink-400: #98a2b3;                /* 작은 머리말만 - 정보 글자에는 쓰지 않기 (2.6:1) */
    --line-card: #e3e9f2;              /* 새 화면 카드 · 판 · 탭 상자 테두리 */
    --line-chip: #dbe5f2;              /* 꺼진 칩 테두리 (1.5px) */
    --line-input: #d0dbe8;             /* 입력 · 찾기 칸 테두리 (1.5px) */
    --line-soft: #eef2f7;              /* 칩 안 숫자 바탕 · 판 안 나눔 선 */
    --ok-ink: #05603a;  --ok-soft: #ecfdf3;      /* 좋음 상태 글자 · 바탕 (점 · 바탕은 --lw-ok) */
    --bad-ink: #b42318; --bad-soft: #fdecec;     /* 나쁨 상태 글자 · 바탕 (점 · 바탕은 --lw-bad) */
    --warn-ink: #8a5a00; --warn-soft: #fff8e6;   /* 주의 · "이 기기에만" 안내 상자 */
    --badge-red: #d64545;              /* 새 쪽지 · 알림 · 승인 대기 숫자 동그라미 */
    --verse-ink: #92400e; --verse-soft: #fff4de; /* 📖 본문 알약 */
    --paper: #fbf8f1;                  /* 성경 본문 상자 (명조) */
    --urgent-ink: #b05f57; --urgent-fill: #b9665e; --urgent-soft: #fffbfa;   /* 꼭 할 일 (메일 인증) - 사용자가 고른 부드러운 빨강 */
    --toast-ink: #1d2939;              /* 알림 띠 바탕 */
    --radius-card: 16px;               /* 새 화면 카드 · 펼치는 판 · 앱 아이콘 */
    --radius-panel: 18px;              /* 탭 상자 · 창 · 버튼 줄 상자 */
    --radius-tab: 13px;
    --shadow-card: 0 4px 16px -8px rgba(11, 61, 115, 0.12);
    --shadow-card-soft: 0 6px 18px -16px rgba(11, 61, 115, 0.5);
    --shadow-panel: 0 18px 40px -18px rgba(11, 61, 115, 0.55);
    --shadow-modal: 0 30px 60px -20px rgba(0, 0, 0, 0.45);
    --shadow-hero: 0 14px 34px -14px rgba(11, 61, 115, 0.45);
}

/* ── 번역이 적용되기 전에는 화면을 잠깐 가린다 ──
   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: var(--lw-font, '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;
}

/* 신학원·관리자 위 메뉴 - 언어 버튼 왼쪽의 "선교회 홈" 집 버튼 (pastor/js/i18n.js) */
.nav-home-btn {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin-right: 8px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    color: var(--brand-700);
    background: #fff;
    transition: background 0.15s, color 0.15s;
}
.nav-home-btn:hover { background: var(--brand-gradient); color: #fff; border-color: transparent; }
.nav-home-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

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