/* ============================================================================
   _tokens.css — 사용자 페이지 디자인 토큰 한 벌 (2026-08 전면 재작성)
   ----------------------------------------------------------------------------
   · 모든 CSS 보다 먼저 로드된다 (_root/_components/head/incAssets.php)
   · 여기 없는 색을 새로 쓰지 않는다. 필요하면 토큰을 먼저 추가한다.
   · 치수는 **rem** 으로 적는다 (뿌리 글꼴 16px 기준). 사용자가 브라우저 글꼴을
     키우면 여백과 글자가 같이 커져야 하기 때문이다. 다만 아래 셋은 px 로 둔다 —
     테두리 두께, 그림자의 offset·blur, 그리고 미디어쿼리의 브레이크포인트.
     이들은 «글자에 비례하는 치수» 가 아니라 화면·장치의 값이다.
   · 디자인 언어는 2026.08 도서 개편의 골드·잉크·페이퍼 체계를 사이트
     전체 기준으로 승격한 것이다. 2026-08-30 에 레거시 별칭(--c-*) 35개를
     해체했으므로, 이제 이름은 한 벌뿐이다 — 모든 이름이 «역할» 을 말한다.
   · udev(관리자) 는 udev/common/css/ 전용 사본을 쓰므로 이 파일과 무관하다
   ========================================================================== */

:root {
    /* ════════════════════════════════════════════════════════════════════
       의미 토큰 — CSS 가 쓰는 유일한 축
       ════════════════════════════════════════════════════════════════════ */

    /* ── 글자 ── */
    --ink:        #28251f;   /* 제목·강조 본문 */
    --copy:       #4d4a43;   /* 본문 */
    --copy-soft:  #625e56;   /* 보조 본문 */
    --muted:      #918b80;   /* 캡션·메타 */
    --faint:      #b3aea4;   /* 번호·자리표시 */

    /* ── 면 ── */
    --paper:      #ffffff;   /* 페이지 바탕 */
    --paper-warm: #fbfaf7;   /* 옅은 종이색 면 */
    --panel:      #f6f3ec;   /* 패널·배지 바탕 */
    --panel-deep: #efe9dd;   /* 진한 패널 */
    --veil:       rgba(24, 18, 10, .55);   /* 모달 뒤 가림막 */
    --veil-deep:  rgba(14, 11, 8, .88);    /* 라이트박스 가림막 — 그림만 남기고 화면을 지운다 */

    /* ── 선 ── */
    --line:       #e7e0d3;   /* 기본 구분선 */
    --line-soft:  #f0ebe1;   /* 옅은 헤어라인 */
    --line-input: #dcd5c8;   /* 입력 테두리 */

    /* ── 강조색 (일반 UI — 사이트 원래의 보라 계열을 한 벌로 정돈) ──
       도서 영역·헤더·푸터는 골드를 쓰고, 그 밖의 사용자 UI 는 이 축을 쓴다 */
    --accent:        #8f45e3;   /* 활성·링크·주 버튼 */
    --accent-deep:   #7a35c9;   /* 호버·눌림 */
    --accent-soft:   #f0e6fd;   /* 강조 배경면 */
    --accent-wash:   #f8f4fe;   /* 아주 옅은 강조면 */
    --accent-line:   #e2d3f8;   /* 강조 계열 테두리 */
    --sh-accent:     0 9px 17px -12px rgba(93, 44, 156, .8);

    /* ── 골드 (헤더·푸터·도서 영역 강조색) ── */
    --gold:        #a57c1b;  /* 본문 위 텍스트로 쓸 수 있는 골드 */
    --gold-deep:   #8d6818;  /* 호버·눌림 */
    --gold-soft:   #f7f0df;  /* 골드 배경면 */
    --gold-wash:   #fbf6ec;  /* 아주 옅은 골드면 */
    --gold-line:   #ebdfc4;  /* 골드 계열 테두리 */
    --gold-bright: #c9a227;  /* 큰 글자·장식 전용 (본문 대비 부족) */
    --gold-logo:   #b08838;  /* 헤더 로고 글자 — 흰 바탕 위 장식 골드 */

    /* ── 안내·인용 패널 (하늘 면) ──
       성경공부 인용 상자·성막 본문·약관 안내처럼 «읽어 두라» 는 면. 사이트 원래의
       하늘색을 유지한다 (2026-08-25 «원래 컬러 유지» 확정) */
    --info-bg:        #f1f5f7;   /* 안내 패널 바탕 */
    --info-wash:      #f3f7fa;   /* 옅은 안내 패널 */
    --info-line:      #dddddd;   /* 안내 패널 테두리 */
    --info-line-soft: #eeeeee;   /* 옅은 안내 패널 테두리 */
    --info-head:      #27c7df;   /* 안내 제목 */

    /* ── 자료·표시 보조색 (원본 유지) ──
       내려받기 단추 두 갈래와 «반드시 채워야 한다» 는 표시. 골드·보라 어느 축도
       아니지만 사이트가 오래 써 온 신호라 값을 그대로 둔다 */
    --file-mark:      #565cde;   /* 첨부·GIF 내려받기 */
    --need-mark:      #ec4c70;   /* 필수 표시 · PDF 내려받기 · 진행 상태 */
    --need-mark-deep: #ce306a;   /* 그 호버 */

    /* ── 메인 타일 (원본 5색 — 타일 밖에서 쓰지 않는다) ── */
    --tile-1: #c9213b;  --tile-2: #3848d9;  --tile-3: #5533ce;
    --tile-4: #a81e7e;  --tile-5: #d4860a;

    /* ── 어두운 면 (푸터 등 잉크 바탕 영역) ── */
    --dark-deep:      #1a1815;   /* 가장 깊은 면 — 푸터 바탕 */
    --dark-bg:        #241f19;
    --dark-panel:     #322b22;
    --dark-line:      rgba(255, 255, 255, .08);
    --dark-text:      rgba(255, 255, 255, .82);
    --dark-text-soft: rgba(255, 255, 255, .55);

    /* ── 의미색 ── */
    --ok:      #1c6b46;  --ok-bg:   #e9f5ee;
    --warn:    #9c5a12;  --warn-bg: #faf1e3;
    --bad:     #a3322a;  --bad-bg:  #f9ebea;
    --focus:        rgba(165, 124, 27, .35);   /* 포커스 링 (골드 문맥) */
    --focus-accent: rgba(143, 69, 227, .28);   /* 포커스 링 (일반 UI) */

    /* ── 타이포 ── */
    --font-sans: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 'Malgun Gothic', sans-serif;
    /* 자릿수를 맞춰야 하는 번호 — 목록 잔줄의 01·02 처럼 세로로 줄이 서야 하는 것 */
    --font-mono: ui-monospace, SFMono-Regular, Menlo, 'Consolas', monospace;
    --fs-2xs:  0.6875rem;   /* 11px */
    --fs-xs:   0.75rem;     /* 12px */
    --fs-sm:   0.8125rem;   /* 13px */
    --fs-base: 0.875rem;    /* 14px */
    --fs-md:   1rem;        /* 16px */
    --fs-lg:   1.1875rem;   /* 19px */
    --fs-xl:   1.5rem;      /* 24px */
    --fs-2xl:  1.875rem;    /* 30px */
    --fs-3xl:  2.375rem;    /* 38px */
    --lh-tight: 1.3;
    --lh-base:  1.6;
    --lh-loose: 1.8;

    /* ── 간격 (0.25rem = 4px 배수) ── */
    --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
    --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;

    /* ── 반경 ── */
    --r-sm: 0.375rem; --r-md: 0.625rem; --r-lg: 0.875rem; --r-xl: 1.125rem;
    --r-pill: 999px;   /* 치수가 아니라 «완전히 둥글게» 라는 뜻이라 px 로 둔다 */

    /* ── 그림자 (따뜻한 잉크 기) ── */
    --sh-soft:  0 4px 12px -11px rgba(48, 38, 22, .25);
    --sh-card:  0 1px 3px rgba(31, 26, 18, .05), 0 8px 18px -15px rgba(31, 26, 18, .28);
    --sh-lift:  0 14px 25px -18px rgba(42, 34, 21, .65);
    --sh-pop:   0 18px 40px -18px rgba(31, 26, 18, .45);
    --sh-gold:  0 9px 17px -12px rgba(112, 78, 8, .9);

    /* ── 모션 ── */
    --t-fast: .16s ease;
    --t-base: .24s ease;

    /* ── 레이아웃 ── */
    --w-content: 73.75rem;    /* 본문 최대 폭 — 1180px */
    --w-gutter:  1.5rem;      /* 좌우 여백 */

    /* ── 레이어 ── */
    --z-below:      -1;   /* 바탕 아래 — 장식이 내용 뒤로 */
    --z-flat:        0;   /* 같은 문맥의 바닥 판 */
    --z-base:        1;
    --z-inlay:       2;   /* 같은 카드 안의 겉면 — 표지 광택·검색 아이콘 */
    --z-raised:     10;
    --z-sticky:     50;
    --z-dropdown:  100;   /* 헤더 안에서 펼쳐지는 것 — 언어 고르기 */
    --z-header:   1000;
    --z-overlay:  2000;
    --z-modal:    5000;
    --z-toast:    9000;
}

/* ── 브레이크포인트 ──────────────────────────────────────────────────
   @media 는 CSS 변수를 받지 못하므로 여기서는 기준만 적어 둔다.
   새 규칙은 반드시 아래 네 개만 쓴다.

       1200px  와이드 데스크톱 아래
       1024px  태블릿 가로 아래
        767px  모바일
        480px  좁은 모바일
   ------------------------------------------------------------------ */