/* 언어·국가 선택기 (2026-07-29 신설) — 데스크톱/모바일 공용. 마크업 = Views/Shared/_LanguagePicker.cshtml, 동작 = wwwroot/js/common/langpicker.js 토큰(tokens.css)만 쓰고 색을 직접 박지 않는다. */ /* 표시 언어별 폰트 스택 — 레이아웃이 로 넣어 준다(정본=language-policy.json). 변수가 없으면 기존 공통 폰트(--font)로 그대로 동작한다. */ body { font-family: var(--font-lang, var(--font)); } .lang-picker { position: relative; display: inline-block; } .lang-picker-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 190px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: #E2E8F0; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; overflow: hidden; } .lang-picker-btn:hover { background: rgba(255, 255, 255, .15); } .lang-picker-btn .lp-cur { overflow: hidden; text-overflow: ellipsis; } .lang-picker-btn .lp-caret { font-size: 11px; opacity: .8; } /* 팝오버 — 헤더가 어두워도 목록은 밝은 표면으로 */ .lang-picker-pop { position: absolute; z-index: 1200; top: calc(100% + 8px); right: 0; width: 340px; max-width: calc(100vw - 24px); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); padding: 10px; display: flex; flex-direction: column; gap: 8px; } .lang-picker-pop[hidden] { display: none; } .lp-head { display: flex; align-items: center; gap: 8px; } .lp-tabs { display: flex; gap: 6px; flex: 1; min-width: 0; } .lp-tab { flex: 1; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lp-tab.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } .lp-close { flex: 0 0 auto; width: 30px; height: 30px; line-height: 1; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; font-size: 13px; } .lp-close:hover { color: var(--text); border-color: var(--primary); } .lp-searchbox { position: relative; } .lp-search-ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: .6; } .lp-search { width: 100%; padding: 9px 12px 9px 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-family: inherit; font-size: 14px; } .lp-search:focus { outline: none; border-color: var(--primary); background: var(--surface); } .lp-hint { font-size: 12px; color: var(--text-3); padding: 0 2px; } .lp-hint[hidden] { display: none; } .lp-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .lp-list[hidden] { display: none; } .lp-row { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-family: inherit; font-size: 14px; text-align: left; cursor: pointer; } .lp-row:hover { background: var(--bg); } .lp-row[hidden] { display: none; } .lp-row.is-current { background: rgba(37, 99, 235, .10); } .lp-row-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .lp-row-sub { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--text-3); } .lp-row-badge { flex: 0 0 auto; font-size: 11.5px; color: var(--text-3); font-weight: 700; letter-spacing: .3px; } .lp-empty { padding: 14px 6px; text-align: center; color: var(--text-3); font-size: 13.5px; } .lp-empty[hidden] { display: none; } .lp-form[hidden], .lp-noscript select + button { display: none; } .lp-noscript select { padding: 7px 10px; border-radius: 8px; } /* 오른쪽→왼쪽 언어(아랍어·히브리어) */ [dir="rtl"] .lang-picker-pop { right: auto; left: 0; } [dir="rtl"] .lp-row { text-align: right; } [dir="rtl"] .lp-search { padding: 9px 30px 9px 12px; } [dir="rtl"] .lp-search-ico { left: auto; right: 10px; } /* 모바일 — 화면 폭에 맞춰 넓게, 헤더 아래 정렬 */ @media (max-width: 720px) { .lang-picker-btn { max-width: 130px; padding: 7px 10px; font-size: 13px; } .lang-picker-pop { width: min(340px, calc(100vw - 20px)); right: -6px; } .lp-list { max-height: 50vh; } }