/* 브랜드 디자인 토큰 SSoT (새 디자인 언어 — about.twig 기준)
   토큰(색)과 공용 컴포넌트 클래스만 담는다. 페이지 전용 스타일 금지.
   로드 순서: 항상 app.css/styles.css 보다 먼저 (base.twig · public.twig).
   주의: --primary 계열(스킨)은 app.css 에 있고 base.twig pre-paint 스크립트가
   :root 인라인 스타일로 덮어쓴다 — 여기서는 브랜드 원색만 정의한다. */
:root {
    --brand-orange: #FF4100;
    --brand-coral: #FF6B4A;
    --brand-ink: #171717;
    --brand-muted: #5a5f68;
    --brand-line: #e7e1dc;
    --brand-bg: #fbfbfa;
    --brand-teal: #008f83;
    /* 파스텔 — 넓은 면 배경용 (컬처 타일 등). 위에 얹는 텍스트는 ink 계열 */
    --brand-pastel-peach: #ffe1cf;
    --brand-pastel-mint: #b7efe6;
    --brand-pastel-sky: #bdd7ff;
    --brand-pastel-gold: #ffd96b;
}

/* 한국어 타이포 규칙: 어절 단위 개행 (keep-all 없으면 제목이 글자 중간에서 꺾임).
   body 전역 적용은 각 레이아웃(app.css body · public.twig 인라인)이 담당 —
   레이아웃 밖 독립 마크업에서는 아래 컴포넌트 클래스가 개별 보장한다. */

/* 필(pill) 버튼 — 플랫 브랜드 오렌지 + 완전 라운드 */
.btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 22px;
    border-radius: 9999px;
    background: var(--brand-orange);
    color: #fff;
    font-weight: 800;
    word-break: keep-all;
}

/* 카드 — 8px 라운드 + 1px line 보더 흰 카드 (섀도 최소화) */
.brand-card {
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--brand-line);
}

/* 라벨 — 오렌지 소문자 영문 키커 (섹션 머리 등) */
.brand-label {
    display: inline-block;
    color: var(--brand-orange);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: lowercase;
}

/* 브랜드 유틸리티 — Tailwind v2 CDN 에 없는 arbitrary-value 클래스(bg-[#FF4100] 등) 대체.
   템플릿에서는 이 클래스를 쓰고 색은 토큰으로만 관리한다. */
.bg-brand { background-color: var(--brand-orange); }
.text-brand { color: var(--brand-orange); }
.border-brand { border-color: var(--brand-orange); }
.accent-brand { accent-color: var(--brand-orange); }
.flex-2 { flex: 2 2 0%; }

/* 말풍선 — 채팅 프로덕트 모티프 */
.brand-bubble {
    width: fit-content;
    max-width: 74%;
    padding: 12px 15px;
    border-radius: 16px;
    background: #fff;
    color: var(--brand-ink);
    box-shadow: 0 10px 20px rgba(22, 24, 28, 0.14);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 언어 스위처 (partials/lang_select.twig) — 밝은 배경 기본 + 어두운 푸터용 --dark 변형.
   다크모드의 배경/보더는 app.css의 html.dark select 전역 규칙이 담당한다. */
.lang-select {
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--brand-line);
    background-color: #fff;
    color: var(--brand-ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.lang-select--dark {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.75);
    border-color: rgba(255, 255, 255, 0.25);
}
.lang-select--dark option {
    color: #171717;
    background: #fff;
}