/* 원본 = 40.Projects\05.SJMKSYSTEMWEB\SJMKSYSTEMWEB\SJMKSYSTEMWEB.WebSite\wwwroot\css\common\langpicker.css · 2026-09-22 WebModule 승격 · 바꾼 것 = 토큰 이름 --X → --sjmk-X(다리 변수 · tokens-bridge.css 가 채운다) · body 글꼴 줄은 그대로(--font-lang → --sjmk-font) */
/* 언어·국가 선택기 (2026-07-29 신설) — 데스크톱/모바일 공용.
   마크업 = Views/Shared/_LanguagePicker.cshtml, 동작 = wwwroot/js/common/langpicker.js
   토큰(tokens.css)만 쓰고 색을 직접 박지 않는다. */

/* 표시 언어별 폰트 스택 — 레이아웃이 <html style="--font-lang: ...">로 넣어 준다(정본=language-policy.json).
   변수가 없으면 기존 공통 폰트(--font)로 그대로 동작한다. */
body { font-family: var(--font-lang, var(--sjmk-font)); }

.lang-picker { position: relative; display: inline-block; }

/* ── 언어 버튼 = 무지개 레이저 테두리 (2026-08-01 마스터 지시로 여기로 옮겨 왔다) ──────
   원문: "레이저는 (자세히 보기에) 적용하지 마라. 차라리 언어 선택하는 곳 테두리를 레이저로 해라."

   원리: 알약 모양 버튼을 overflow:hidden 으로 잘라 내고, 그 안에서 정사각형
   conic-gradient 를 돌린다. 알약을 직접 돌리면 모서리가 삐져나오지만
   정사각형을 돌려서 알약으로 잘라 내면 테두리만 무지개로 흐른다.
   ★정사각형은 aspect-ratio 가 아니라 width/padding-bottom 같은 % 로 만든다 —
     둘 다 컨테이너 '가로'를 기준으로 계산돼 어떤 브라우저에서도 반드시 정사각이 된다.
     ※버튼은 가로로 긴 알약이라 정사각형이 세로를 다 덮으려면 220% 로는 모자란다 → 300%.
   ★굵기는 버튼 padding 1.6px 하나가 정한다. 굵으면 광고가 되고, 가늘어야 계측기가 된다.
   ★흰색 정점(96%)이 링을 앞서 달리는 '레이저 머리'다. 4.8초에 한 바퀴.
     움직이는 것은 transform 뿐이라 리플로우가 없고 GPU 합성으로 처리된다. */
.lang-picker-btn {
  position: relative;
  display: inline-flex; align-items: center;
  max-width: 200px; padding: 1.6px;
  border-radius: 999px; border: 0;
  background: transparent; color: #E2E8F0;
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  white-space: nowrap; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .22);
}
.lang-picker-btn .lp-beam {
  position: absolute;
  left: 50%; top: 50%;
  width: 300%; height: 0; padding-bottom: 300%;
  transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(from 0deg,
      #FF4D4D 0%, #FF9F43 14%, #FFE45C 27%, #5CE08A 42%,
      #38BDF8 57%, #6D8BFF 71%, #C77DFF 86%, #FFFFFF 96%, #FF4D4D 100%);
  animation: lpBeamSpin 2.6s linear infinite;
  will-change: transform;
  pointer-events: none;
}
@keyframes lpBeamSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* 안쪽 판 — 불투명해야 레이저가 테두리에만 남는다 */
.lang-picker-btn .lp-face {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0; max-width: 100%;
  padding: 7px 12px; min-height: 32px;
  border-radius: 999px;
  background: #0C1729;
  overflow: hidden;
  transition: background .15s;
}
.lang-picker-btn:hover .lp-face { background: #16233F; }
.lang-picker-btn:focus:not(:focus-visible) { outline: none; }
.lang-picker-btn:focus-visible { outline: 2px solid #FBBF24; outline-offset: 3px; }
.lang-picker-btn .lp-cur { overflow: hidden; text-overflow: ellipsis; }
.lang-picker-btn .lp-caret { font-size: 11px; opacity: .8; }

/* ★모바일에서는 테두리를 얇게 (2026-08-01 마스터: "모바일 언어에 레이저 너무 두꺼워. 지금의 30%로 두께 줄여")
   두께를 정하는 것은 버튼 padding 하나뿐이다 → 1.6px 의 30% = 0.5px.
   ★안쪽 판의 radius 도 같이 줄여야 한다. 테두리가 얇아진 만큼 바깥 알약과 안쪽 판의
     둥근 정도가 어긋나면 모서리에서 무지개가 뭉쳐 보인다. */
@media (max-width: 720px) {
  .lang-picker-btn { padding: .5px; }
  .lang-picker-btn .lp-face { padding: 7px 11px; }
}

/* 동작 줄이기 — 멈추되 사라지지 않는다(멈춘 무지개 테두리로 버튼 형태를 지킨다) */
@media (prefers-reduced-motion: reduce) { .lang-picker-btn .lp-beam { animation: none; } }
/* 고대비(강제 색) 모드 — 그라데이션이 무시되므로 시스템 테두리로 형태를 지킨다 */
@media (forced-colors: active) {
  .lang-picker-btn { border: 1px solid CanvasText; }
  .lang-picker-btn .lp-beam { display: none; }
}

/* 팝오버 — 헤더가 어두워도 목록은 밝은 표면으로 */
.lang-picker-pop {
  position: absolute; z-index: 1200; top: calc(100% + 8px); right: 0;
  width: 340px; max-width: calc(100vw - 24px);
  background: var(--sjmk-surface); color: var(--sjmk-text);
  border: 1px solid var(--sjmk-border); border-radius: var(--sjmk-radius-sm);
  box-shadow: var(--sjmk-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(--sjmk-border); background: var(--sjmk-surface); color: var(--sjmk-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(--sjmk-primary); border-color: var(--sjmk-primary); color: var(--sjmk-on-primary); }
.lp-close {
  flex: 0 0 auto; width: 30px; height: 30px; line-height: 1;
  border-radius: 8px; border: 1px solid var(--sjmk-border);
  background: var(--sjmk-surface); color: var(--sjmk-text-2); cursor: pointer; font-size: 13px;
}
.lp-close:hover { color: var(--sjmk-text); border-color: var(--sjmk-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(--sjmk-border);
  background: var(--sjmk-bg); color: var(--sjmk-text);
  font-family: inherit; font-size: 14px;
}
.lp-search:focus { outline: none; border-color: var(--sjmk-primary); background: var(--sjmk-surface); }

.lp-hint { font-size: 12px; color: var(--sjmk-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(--sjmk-text);
  font-family: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.lp-row:hover { background: var(--sjmk-bg); }
.lp-row[hidden] { display: none; }
.lp-row.is-current { background: rgba(37, 99, 235, .10); }

/* ★검색하면 "제일 근접한 것"이 여기로 온다 (2026-08-01 마스터 지시).
   커서는 검색창에 있고 이 줄만 강조되므로, 그대로 엔터를 치면 이게 적용된다.
   ↑↓ 로 옮길 수 있고, 마우스를 올린 줄도 이 상태가 된다 — 보이는 것과 적용될 것이 항상 같다.
   :hover 보다 진해야 구분되므로 왼쪽에 굵은 띠를 함께 준다. */
.lp-row.is-active {
  background: rgba(37, 99, 235, .16);
  box-shadow: inset 3px 0 0 var(--sjmk-primary);
  outline: 1px solid rgba(37, 99, 235, .38);
  outline-offset: -1px;
}
[dir="rtl"] .lp-row.is-active { box-shadow: inset -3px 0 0 var(--sjmk-primary); }
.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(--sjmk-text-3); }
.lp-row-badge { flex: 0 0 auto; font-size: 11.5px; color: var(--sjmk-text-3); font-weight: 700; letter-spacing: .3px; }

/* 국기 (2026-08-01 마스터 지시) — 언어·국가 목록 앞머리.
   이모지를 그릴 수 있는 환경(macOS/Android/iOS)은 .lp-flag 로 국기 그림이 나오고,
   Windows 처럼 국기 글꼴이 없는 환경은 JS 가 .lp-flag-cc 를 붙여 국가코드 색 배지로 바꾼다.
   (외부 이미지·웹폰트를 쓰지 않는다 — CSP·용량·오프라인 안전) */
.lp-flag {
  flex: 0 0 auto; align-self: center; width: 26px; text-align: center;
  font-size: 17px; line-height: 1.15;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
.lp-flag-cc {
  width: 27px; height: 18px; border-radius: 3px; color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; box-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}

.lp-empty { padding: 14px 6px; text-align: center; color: var(--sjmk-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; }
}

/* ── ★모바일·태블릿 = «화면 한가운데 뜨는 새 창» (2026-08-15 마스터 지시) ──────────
   마스터 원문 = *"홈피 모바일 버전 전종류 테블릿등 모바일류는 언어 선택 누르면 새창이 중앙에
   뜨게 해야해 가로 를 말하는거야 사진조면 왼쪽이 가리니까"*

   왜 잘렸나 — 팝오버가 버튼 오른쪽 끝(right:-6px)에 붙는 absolute 였다. 폰에서 그 버튼은
   화면 한가운데쯤 있어 340px 짜리 판이 왼쪽으로 넘쳤고, 상단바(overflow-x:hidden)가 그것을 잘랐다.
   그래서 «버튼에 붙이기» 를 버리고 «화면에 띄우기» 로 바꾼다 — 뷰포트 기준 가로·세로 정가운데.

   ★판을 body 로 옮겨서(JS openAsModal) 띄운다. 상단바는 sticky·z-index 100 이라
     그 안에 둔 채로는 서랍(z-index 201)보다 아래에 깔린다. 옮기면 그 굴레가 사라진다.
     그래서 아래 선택자는 부모(.lang-picker)를 타지 않는다 — 판 자신의 클래스만 본다.
   ★CSP 가 JS 의 style 속성 조작을 막으므로(진입점 4번 함정) 켜고 끄는 것은 전부 클래스다. */
.lp-backdrop { display: none; }
.lp-backdrop:not([hidden]) {
  display: block;
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(2, 6, 23, .66);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: lpFadeIn .16s ease-out;
}

.lang-picker-pop.lp-modal-pop {
  position: fixed; z-index: 4001;
  left: 50%; right: auto; top: 50%;
  transform: translate(-50%, -50%);          /* ★가로 정가운데 = 마스터가 말한 그 정렬 */
  width: min(420px, calc(100vw - 28px)); max-width: none;
  max-height: 82vh;                          /* dvh 를 모르는 브라우저용 폴백 */
  padding: 12px;
  box-shadow: 0 24px 60px rgba(2, 6, 23, .55);
  animation: lpModalIn .18s ease-out;
}
@supports (max-height: 82dvh) { .lang-picker-pop.lp-modal-pop { max-height: 82dvh; } }

/* 판 높이를 82vh 가 정하므로 목록은 «남는 만큼» 늘어나고 그 안에서만 구른다.
   (모바일 규칙의 max-height:50vh 를 그대로 두면 판 안에 빈 자리가 남는다) */
.lang-picker-pop.lp-modal-pop .lp-list { flex: 1 1 auto; min-height: 0; max-height: none; }
/* 손가락으로 누르는 창이라 닫기 단추를 키운다(권장 터치 크기) */
.lang-picker-pop.lp-modal-pop .lp-close { width: 36px; height: 36px; font-size: 15px; }

/* 오른쪽→왼쪽 언어에서도 가운데는 가운데다([dir=rtl] 규칙이 left:0 으로 밀지 못하게) */
[dir="rtl"] .lang-picker-pop.lp-modal-pop { left: 50%; right: auto; }

/* 창이 떠 있는 동안 뒤 페이지가 따라 구르지 않게 */
body.lp-modal-open { overflow: hidden; }

@keyframes lpFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lpModalIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-backdrop:not([hidden]), .lang-picker-pop.lp-modal-pop { animation: none; }
}

/* ── 탭 개수 배지 (2026-08-14 마스터 지시 "언어 국가 개수 표기") ───────────
   앱 모듈(19번) 선택기의 탭 배지와 같은 인상. currentColor 상속이라 테마를 탄다. */
.lp-tab .lp-cnt {
    display: inline-block;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    background: color-mix(in srgb, currentColor 14%, transparent);
    opacity: .85;
}