/* ==========================================================================
   언어 선택기 — **공용 스타일**

   ★ 왜 따로 떼었나 (CEO 2026-09-11, 운영 스크린샷)
     일본어 허브 화면에서 언어 목록이 **스타일 없이 날것으로** 나왔다.
     ✓English ✓日本語 … 가 그냥 글머리 기호 목록으로 화면 위에 얹혔다.

     조각(lang_switcher.jsp)은 세 화면이 함께 쓰는데, 그 모양을 정하는 규칙은
     **`sjcF0101.css` 안에만** 있었다. 그런데 허브 레이아웃([layout]sjh.jsp)은
     그 파일을 싣지 않는다 — LP 전용 스타일이라서다.
     그래서 마크업은 나오는데 옷이 없었다.

     같은 조각의 **JS 는 이미 조각 안에 자체 포함**돼 있다(허브가 sjcF0101.js 를
     싣지 않기 때문에). CSS 만 그 짝을 못 맞추고 있었던 것이다.

   ★ 그래서 규칙은 하나다 —
     **여러 화면이 함께 쓰는 조각의 스타일은 그 조각 전용 파일에 둔다.**
     한 화면의 CSS 에 얹으면, 그 화면을 안 싣는 곳에서 조용히 벗겨진다.

   싣는 곳: [layout]sjh.jsp · [layout]sjc.jsp · [layout]sjc2.jsp
   의존:   sjcF0101_tokens.css (--color-header-fg · --color-amber 등)
           saju-i18n-type.css  (메뉴 글자 얼굴 — 언어별 두부 방지)
   ========================================================================== */

/* ── M3 언어 스위처 ───────────────────────────────────────────────────── */
.sjc-lang-switcher {
  position: relative;
}
.sjc-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* ★ 글자(KO·JA·简)를 품으므로 동그라미가 아니라 알약이다.
       높이 40 은 M3 최소 터치 크기를 지킨다. */
  min-width: 40px; height: 40px;
  padding: 0 10px;
  border-radius: 20px;
  border: 0;
  background: transparent;
  color: var(--color-header-fg);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}
.sjc-lang-btn:hover { background: var(--color-header-fg-hover); color: var(--color-bg-base); }
.sjc-lang-btn:focus-visible { outline: 2px solid var(--color-amber); outline-offset: 2px; }
/* ★ 아이콘은 글꼴이 아니라 그림이다 — 폰트를 안 싣는 화면에서도 선다.
     currentColor 를 쓰므로 버튼 글자색을 그대로 따라간다. */
.sjc-lang-btn__globe { display: block; flex: 0 0 auto; }
/* 예전 흔적 — 어딘가에 남아 있어도 글자가 보이지 않게 접어 둔다 */
.sjc-lang-btn .material-symbols-outlined { font-size: 0; }
.sjc-lang-btn__code {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* M3 Menu — surface container, elevation 2 */
.sjc-lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 148px;
  background: #1F232E;           /* M3 surface-container-high on dark header */
  border-radius: 4px;
  box-shadow: 0 2px 6px 2px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.5);
  z-index: 9000;
  padding: 8px 0;
  list-style: none;
  margin: 0;
}
.sjc-lang-menu.is-open { display: block; }
.sjc-lang-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
  color: #E6E1E5;                /* M3 on-surface */
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}
.sjc-lang-menu__item:hover { background: rgba(255,255,255,0.08); }
.sjc-lang-menu__item--active { background: rgba(212,162,76,0.16); color: var(--color-amber); }
.sjc-lang-menu__check {
  font-size: 14px;
  width: 16px;
  text-align: center;
  visibility: hidden;
}
.sjc-lang-menu__item--active .sjc-lang-menu__check { visibility: visible; }
/* ==========================================================================
   모바일 — **자리를 옮기지 않고 조인다** (CEO 2026-09-12)

   ★ 처음엔 화면 왼쪽 아래로 띄웠는데, CEO 판단은
     「위줄이 가려진다 / 상단 여백만 줄여도 괜찮을거같다」였다.
     맞는 말이다 — 떠 있는 단추는 **본문을 가리고**, 언어는 한 번 고르면
     다시 안 만지는 것이라 굳이 늘 떠 있을 이유가 없다.

   ★ 그래서 상단 바에 그대로 두되 **작게** 만든다.
     모바일 56px 한 줄에 브랜드 + 언어 + 이름 + 마이페이지 + 로그아웃이 들어가야 하고,
     운영 화면에서 **로그아웃이 잘려 나갔다**. 여기서 줄인 폭이 그 자리를 만든다.
   ========================================================================== */
@media (max-width: 767px) {
  .sjc-lang-btn {
    min-width: 32px; height: 32px;
    padding: 0 4px;
    gap: 2px;
  }
  .sjc-lang-btn__globe { width: 18px; height: 18px; }
  .sjc-lang-btn__code  { font-size: 11px; }

  /* 메뉴가 화면 오른쪽으로 넘치지 않게 — 버튼이 왼쪽에 붙어 있다 */
  .sjc-lang-menu { right: auto; left: 0; }
}