/* 언어 선택 — 헤더 우측
 *
 * 전에는 코드(KO/EN)를 2열 격자로 뿌려서 무엇을 고르는 화면인지 한눈에 안 들어왔다.
 * 국기와 그 나라 말로 한 줄씩 세워 보통의 메뉴처럼 읽히게 한다.
 *
 * [hidden] 은 반드시 display 규칙보다 강하게 둔다. 그러지 않으면 메뉴가
 * 항상 펼쳐진 채로 헤더 옆에 글자만 늘어선다.
 */

.header-lang {
  position: relative;
  display: inline-flex;
}

/* 버튼 — 테마 토글과 같은 38x38 원형 */
.site-header .header-lang-btn,
.header-lang-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--atovia-header-line, #dce8e4);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  transition: border-color .15s ease, background-color .15s ease;
}

/* 국기 모양·크기는 FLAGS 블록(파일 끝)에서 정한다. 여기서는 자리만 잡는다. */
.header-lang-btn .flag { line-height: 1; }

.header-lang-btn:hover {
  border-color: var(--atovia-header-mint, #3baa98);
  background: rgba(59, 170, 152, .08);
}

.header-lang-btn:focus-visible {
  outline: 2px solid var(--atovia-header-mint, #3baa98);
  outline-offset: 2px;
}

/* 목록 — 한 줄에 하나씩, 보통 메뉴처럼 */
.header-lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1200;
  width: 232px;
  max-height: min(70vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  background: var(--atovia-header-bg, #fff);
  border: 1px solid var(--atovia-header-line, #dce8e4);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(12, 32, 42, .10), 0 24px 48px -16px rgba(12, 32, 42, .28);
}

/* 이 한 줄이 없으면 메뉴가 늘 펼쳐진 채로 보인다 */
.header-lang-menu[hidden] { display: none !important; }

.header-lang-menu a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 9px;
  color: var(--atovia-header-ink, #17212b);
  font-size: 14.5px;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

.header-lang-menu a:hover {
  background: rgba(59, 170, 152, .10);
}

.header-lang-menu .flag {
  flex: none;
  line-height: 1;
}

.header-lang-menu .name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-lang-menu .tick {
  flex: none;
  width: 14px;
  text-align: center;
  color: var(--atovia-header-mint, #3baa98);
  font-weight: 700;
}

/* 지금 보고 있는 언어 */
.header-lang-menu a[aria-current="true"] {
  background: rgba(59, 170, 152, .12);
  font-weight: 600;
}
.header-lang-menu a[aria-current="true"] .tick::after { content: "✓"; }

/* 접속 지역 안내 — 처음 온 사람에게 한 번만 */
.lang-hint {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1300;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  max-width: min(92vw, 430px);
  padding: 14px 16px;
  background: var(--atovia-header-bg, #fff);
  border: 1px solid var(--atovia-header-line, #dce8e4);
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(12, 32, 42, .12), 0 30px 60px -20px rgba(12, 32, 42, .34);
  color: var(--atovia-header-ink, #17212b);
  font-size: 14px;
}
.lang-hint[hidden] { display: none !important; }

.lang-hint-actions { display: flex; gap: 8px; margin-left: auto; }

.lang-hint button {
  font: inherit;
  font-size: 13.5px;
  padding: 7px 13px;
  border-radius: 8px;
  border: 1px solid var(--atovia-header-line, #dce8e4);
  background: transparent;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.lang-hint button.primary {
  background: var(--atovia-header-mint, #3baa98);
  border-color: var(--atovia-header-mint, #3baa98);
  color: #fff;
}
.lang-hint button:hover { border-color: var(--atovia-header-mint, #3baa98); }

/* 다크 — OS 설정과 토글 양쪽 */
@media (prefers-color-scheme: dark) {
  html:not(.atv-light) .header-lang-btn { border-color: #2a3a42; }
  html:not(.atv-light) .header-lang-btn:hover {
    border-color: #4fc7dd; background: rgba(79, 199, 221, .12); }
  html:not(.atv-light) .header-lang-menu,
  html:not(.atv-light) .lang-hint {
    background: #152229; border-color: #2a3a42; color: #e9eff2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .5), 0 24px 48px -16px rgba(0, 0, 0, .7); }
  html:not(.atv-light) .header-lang-menu a { color: #e9eff2; }
  html:not(.atv-light) .header-lang-menu a:hover { background: rgba(79, 199, 221, .13); }
  html:not(.atv-light) .header-lang-menu a[aria-current="true"] { background: rgba(79, 199, 221, .16); }
  html:not(.atv-light) .header-lang-menu .tick { color: #4fc7dd; }
  html:not(.atv-light) .lang-hint button { border-color: #2a3a42; }
  html:not(.atv-light) .lang-hint button.primary { background: #2d9e8a; border-color: #2d9e8a; }
}

html.atv-dark .header-lang-btn { border-color: #2a3a42; }
html.atv-dark .header-lang-btn:hover {
  border-color: #4fc7dd; background: rgba(79, 199, 221, .12); }
html.atv-dark .header-lang-menu,
html.atv-dark .lang-hint {
  background: #152229; border-color: #2a3a42; color: #e9eff2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5), 0 24px 48px -16px rgba(0, 0, 0, .7); }
html.atv-dark .header-lang-menu a { color: #e9eff2; }
html.atv-dark .header-lang-menu a:hover { background: rgba(79, 199, 221, .13); }
html.atv-dark .header-lang-menu a[aria-current="true"] { background: rgba(79, 199, 221, .16); }
html.atv-dark .header-lang-menu .tick { color: #4fc7dd; }
html.atv-dark .lang-hint button { border-color: #2a3a42; }
html.atv-dark .lang-hint button.primary { background: #2d9e8a; border-color: #2d9e8a; }

@media (max-width: 640px) {
  .header-lang-menu { width: 208px; }
  .lang-hint { left: 14px; right: 14px; max-width: none; }
}

/* 번역 준비 중인 언어 — build.py 가 config/i18n 진행률을 보고 표시한다.
   번역이 채워지면 data-lang-soon 이 안 붙어 저절로 평범한 항목이 된다. */
.header-lang-menu a[data-lang-soon] {
  cursor: default;
  opacity: .55;
}
.header-lang-menu a[data-lang-soon]:hover {
  background: transparent;
}
.header-lang-menu a[data-lang-soon] .flag {
  filter: grayscale(.7);
}
.header-lang-menu .soon {
  flex: none;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--atovia-header-line, #dce8e4);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--atovia-header-muted, #6b7882);
}
@media (prefers-color-scheme: dark) {
  html:not(.atv-light) .header-lang-menu .soon {
    border-color: #2a3a42; color: #8497a1; }
}
html.atv-dark .header-lang-menu .soon { border-color: #2a3a42; color: #8497a1; }

/* FLAGS:BEGIN — tools/gen_flag_css.py 가 만든다. 손으로 고치지 말 것 */
/* 국기 — 이모지는 윈도우에서 렌더되지 않아 "KR" 같은 글자로 보인다.
   폰트에 기대지 않도록 SVG 를 직접 박는다. */
.header-lang .flag {
  width: 21px;
  height: 14px;
  border-radius: 2.5px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
  /* 이모지 글자가 남아 있어도 보이지 않게 한다 */
  font-size: 0;
  text-indent: -9999px;
  overflow: hidden;
}
.header-lang-btn .flag { width: 22px; height: 15px; }

/* 목록은 항목의 data-lang-pick 으로, 버튼은 JS 가 넣는 data-flag 로 고른다 */
.header-lang-menu a[data-lang-pick="ar"] .flag,
.header-lang-btn .flag[data-flag="ar"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' fill='%23165d31'/%3E%3Crect x='4' y='9.6' width='16' height='.9' fill='%23fff'/%3E%3Crect x='4' y='5.4' width='16' height='1.5' fill='%23fff' opacity='.9'/%3E%3C/svg%3E"); }
.header-lang-menu a[data-lang-pick="bn"] .flag,
.header-lang-btn .flag[data-flag="bn"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' fill='%23006a4e'/%3E%3Ccircle cx='10.8' cy='8' r='4.2' fill='%23f42a41'/%3E%3C/svg%3E"); }
.header-lang-menu a[data-lang-pick="de"] .flag,
.header-lang-btn .flag[data-flag="de"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect y='0.000' width='24' height='5.343' fill='%23000'/%3E%3Crect y='5.333' width='24' height='5.343' fill='%23d00'/%3E%3Crect y='10.667' width='24' height='5.343' fill='%23ffce00'/%3E%3C/svg%3E"); }
.header-lang-menu a[data-lang-pick="en"] .flag,
.header-lang-btn .flag[data-flag="en"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect y='0.000' width='24' height='2.296' fill='%23b22234'/%3E%3Crect y='2.286' width='24' height='2.296' fill='%23fff'/%3E%3Crect y='4.571' width='24' height='2.296' fill='%23b22234'/%3E%3Crect y='6.857' width='24' height='2.296' fill='%23fff'/%3E%3Crect y='9.143' width='24' height='2.296' fill='%23b22234'/%3E%3Crect y='11.429' width='24' height='2.296' fill='%23fff'/%3E%3Crect y='13.714' width='24' height='2.296' fill='%23b22234'/%3E%3Crect width='10' height='8.6' fill='%233c3b6e'/%3E%3Cpolygon points='2.50,0.70 2.84,1.74 3.93,1.74 3.04,2.38 3.38,3.41 2.50,2.77 1.62,3.41 1.96,2.38 1.07,1.74 2.16,1.74' fill='%23fff'/%3E%3Cpolygon points='7.50,0.70 7.84,1.74 8.93,1.74 8.04,2.38 8.38,3.41 7.50,2.77 6.62,3.41 6.96,2.38 6.07,1.74 7.16,1.74' fill='%23fff'/%3E%3Cpolygon points='2.50,4.70 2.84,5.74 3.93,5.74 3.04,6.38 3.38,7.41 2.50,6.77 1.62,7.41 1.96,6.38 1.07,5.74 2.16,5.74' fill='%23fff'/%3E%3Cpolygon points='7.50,4.70 7.84,5.74 8.93,5.74 8.04,6.38 8.38,7.41 7.50,6.77 6.62,7.41 6.96,6.38 6.07,5.74 7.16,5.74' fill='%23fff'/%3E%3Cpolygon points='5.00,2.70 5.34,3.74 6.43,3.74 5.54,4.38 5.88,5.41 5.00,4.77 4.12,5.41 4.46,4.38 3.57,3.74 4.66,3.74' fill='%23fff'/%3E%3C/svg%3E"); }
.header-lang-menu a[data-lang-pick="es"] .flag,
.header-lang-btn .flag[data-flag="es"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect y='0.000' width='24' height='4.010' fill='%23aa151b'/%3E%3Crect y='4.000' width='24' height='8.010' fill='%23f1bf00'/%3E%3Crect y='12.000' width='24' height='4.010' fill='%23aa151b'/%3E%3C/svg%3E"); }
.header-lang-menu a[data-lang-pick="fr"] .flag,
.header-lang-btn .flag[data-flag="fr"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect x='0.000' width='8.010' height='16' fill='%23002395'/%3E%3Crect x='8.000' width='8.010' height='16' fill='%23fff'/%3E%3Crect x='16.000' width='8.010' height='16' fill='%23ed2939'/%3E%3C/svg%3E"); }
.header-lang-menu a[data-lang-pick="hi"] .flag,
.header-lang-btn .flag[data-flag="hi"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect y='0.000' width='24' height='5.343' fill='%23f93'/%3E%3Crect y='5.333' width='24' height='5.343' fill='%23fff'/%3E%3Crect y='10.667' width='24' height='5.343' fill='%23128807'/%3E%3Ccircle cx='12' cy='8' r='2.1' fill='none' stroke='%23008' stroke-width='.7'/%3E%3Ccircle cx='12' cy='8' r='.5' fill='%23008'/%3E%3C/svg%3E"); }
.header-lang-menu a[data-lang-pick="id"] .flag,
.header-lang-btn .flag[data-flag="id"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect y='0.000' width='24' height='8.010' fill='%23ce1126'/%3E%3Crect y='8.000' width='24' height='8.010' fill='%23fff'/%3E%3C/svg%3E"); }
.header-lang-menu a[data-lang-pick="it"] .flag,
.header-lang-btn .flag[data-flag="it"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect x='0.000' width='8.010' height='16' fill='%23009246'/%3E%3Crect x='8.000' width='8.010' height='16' fill='%23fff'/%3E%3Crect x='16.000' width='8.010' height='16' fill='%23ce2b37'/%3E%3C/svg%3E"); }
.header-lang-menu a[data-lang-pick="ja"] .flag,
.header-lang-btn .flag[data-flag="ja"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' fill='%23fff'/%3E%3Ccircle cx='12' cy='8' r='4.4' fill='%23bc002d'/%3E%3C/svg%3E"); }
.header-lang-menu a[data-lang-pick="ko"] .flag,
.header-lang-btn .flag[data-flag="ko"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' fill='%23fff'/%3E%3Cpath d='M7.5 8a4.5 4.5 0 0 1 9 0z' fill='%23cd2e3a'/%3E%3Cpath d='M7.5 8a4.5 4.5 0 0 0 9 0z' fill='%230047a0'/%3E%3Cg transform='rotate(-35 2.2 3.2)'%3E%3Crect x='0.5' y='2.1' width='3.4' height='.7' fill='%23111'/%3E%3Crect x='0.5' y='3.6' width='3.4' height='.7' fill='%23111'/%3E%3C/g%3E%3Cg transform='rotate(35 2.2 12.8)'%3E%3Crect x='0.5' y='11.7' width='3.4' height='.7' fill='%23111'/%3E%3Crect x='0.5' y='13.2' width='3.4' height='.7' fill='%23111'/%3E%3C/g%3E%3Cg transform='rotate(35 21.8 3.2)'%3E%3Crect x='20.1' y='2.1' width='3.4' height='.7' fill='%23111'/%3E%3Crect x='20.1' y='3.6' width='3.4' height='.7' fill='%23111'/%3E%3C/g%3E%3Cg transform='rotate(-35 21.8 12.8)'%3E%3Crect x='20.1' y='11.7' width='3.4' height='.7' fill='%23111'/%3E%3Crect x='20.1' y='13.2' width='3.4' height='.7' fill='%23111'/%3E%3C/g%3E%3C/svg%3E"); }
.header-lang-menu a[data-lang-pick="ms"] .flag,
.header-lang-btn .flag[data-flag="ms"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect y='0.000' width='24' height='2.296' fill='%23c00'/%3E%3Crect y='2.286' width='24' height='2.296' fill='%23fff'/%3E%3Crect y='4.571' width='24' height='2.296' fill='%23c00'/%3E%3Crect y='6.857' width='24' height='2.296' fill='%23fff'/%3E%3Crect y='9.143' width='24' height='2.296' fill='%23c00'/%3E%3Crect y='11.429' width='24' height='2.296' fill='%23fff'/%3E%3Crect y='13.714' width='24' height='2.296' fill='%23c00'/%3E%3Crect width='13' height='9.2' fill='%23006'/%3E%3Ccircle cx='5.6' cy='4.6' r='2.8' fill='%23fc0'/%3E%3Ccircle cx='6.9' cy='4.6' r='2.3' fill='%23006'/%3E%3Cpolygon points='10.20,2.80 10.60,4.04 11.91,4.04 10.85,4.81 11.26,6.06 10.20,5.29 9.14,6.06 9.55,4.81 8.49,4.04 9.80,4.04' fill='%23fc0'/%3E%3C/svg%3E"); }
.header-lang-menu a[data-lang-pick="nl"] .flag,
.header-lang-btn .flag[data-flag="nl"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect y='0.000' width='24' height='5.343' fill='%23ae1c28'/%3E%3Crect y='5.333' width='24' height='5.343' fill='%23fff'/%3E%3Crect y='10.667' width='24' height='5.343' fill='%2321468b'/%3E%3C/svg%3E"); }
.header-lang-menu a[data-lang-pick="pa"] .flag,
.header-lang-btn .flag[data-flag="pa"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect y='0.000' width='24' height='5.343' fill='%23f93'/%3E%3Crect y='5.333' width='24' height='5.343' fill='%23fff'/%3E%3Crect y='10.667' width='24' height='5.343' fill='%23128807'/%3E%3Ccircle cx='12' cy='8' r='2.1' fill='none' stroke='%23008' stroke-width='.7'/%3E%3Ccircle cx='12' cy='8' r='.5' fill='%23008'/%3E%3C/svg%3E"); }
.header-lang-menu a[data-lang-pick="pl"] .flag,
.header-lang-btn .flag[data-flag="pl"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect y='0.000' width='24' height='8.010' fill='%23fff'/%3E%3Crect y='8.000' width='24' height='8.010' fill='%23dc143c'/%3E%3C/svg%3E"); }
.header-lang-menu a[data-lang-pick="pt"] .flag,
.header-lang-btn .flag[data-flag="pt"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' fill='%23009b3a'/%3E%3Cpolygon points='12,1.8 22.2,8 12,14.2 1.8,8' fill='%23fedf00'/%3E%3Ccircle cx='12' cy='8' r='3.6' fill='%23002776'/%3E%3Cpath d='M8.6 6.6a7 7 0 0 1 6.8 1.2' stroke='%23fff' stroke-width='.9' fill='none'/%3E%3C/svg%3E"); }
.header-lang-menu a[data-lang-pick="ro"] .flag,
.header-lang-btn .flag[data-flag="ro"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect x='0.000' width='8.010' height='16' fill='%23002b7f'/%3E%3Crect x='8.000' width='8.010' height='16' fill='%23fcd116'/%3E%3Crect x='16.000' width='8.010' height='16' fill='%23ce1126'/%3E%3C/svg%3E"); }
.header-lang-menu a[data-lang-pick="ru"] .flag,
.header-lang-btn .flag[data-flag="ru"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect y='0.000' width='24' height='5.343' fill='%23fff'/%3E%3Crect y='5.333' width='24' height='5.343' fill='%230039a6'/%3E%3Crect y='10.667' width='24' height='5.343' fill='%23d52b1e'/%3E%3C/svg%3E"); }
.header-lang-menu a[data-lang-pick="th"] .flag,
.header-lang-btn .flag[data-flag="th"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect y='0.000' width='24' height='2.677' fill='%23a51931'/%3E%3Crect y='2.667' width='24' height='2.677' fill='%23f4f5f8'/%3E%3Crect y='5.333' width='24' height='5.343' fill='%232d2a4a'/%3E%3Crect y='10.667' width='24' height='2.677' fill='%23f4f5f8'/%3E%3Crect y='13.333' width='24' height='2.677' fill='%23a51931'/%3E%3C/svg%3E"); }
.header-lang-menu a[data-lang-pick="tl"] .flag,
.header-lang-btn .flag[data-flag="tl"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect y='0.000' width='24' height='8.010' fill='%230038a8'/%3E%3Crect y='8.000' width='24' height='8.010' fill='%23ce1126'/%3E%3Cpolygon points='0,0 10.4,8 0,16' fill='%23fff'/%3E%3Cpolygon points='3.40,5.90 3.87,7.35 5.40,7.35 4.16,8.25 4.63,9.70 3.40,8.80 2.17,9.70 2.64,8.25 1.40,7.35 2.93,7.35' fill='%23fcd116'/%3E%3C/svg%3E"); }
.header-lang-menu a[data-lang-pick="tr"] .flag,
.header-lang-btn .flag[data-flag="tr"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' fill='%23e30a17'/%3E%3Ccircle cx='9.6' cy='8' r='3.4' fill='%23fff'/%3E%3Ccircle cx='10.9' cy='8' r='2.7' fill='%23e30a17'/%3E%3Cpolygon points='15.20,6.10 15.63,7.41 17.01,7.41 15.89,8.22 16.32,9.54 15.20,8.73 14.08,9.54 14.51,8.22 13.39,7.41 14.77,7.41' fill='%23fff'/%3E%3C/svg%3E"); }
.header-lang-menu a[data-lang-pick="uk"] .flag,
.header-lang-btn .flag[data-flag="uk"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect y='0.000' width='24' height='8.010' fill='%230057b7'/%3E%3Crect y='8.000' width='24' height='8.010' fill='%23ffd700'/%3E%3C/svg%3E"); }
.header-lang-menu a[data-lang-pick="vi"] .flag,
.header-lang-btn .flag[data-flag="vi"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' fill='%23da251d'/%3E%3Cpolygon points='12.00,3.80 12.94,6.70 15.99,6.70 13.53,8.50 14.47,11.40 12.00,9.60 9.53,11.40 10.47,8.50 8.01,6.70 11.06,6.70' fill='%23ff0'/%3E%3C/svg%3E"); }
.header-lang-menu a[data-lang-pick="zh"] .flag,
.header-lang-btn .flag[data-flag="zh"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' fill='%23de2910'/%3E%3Cpolygon points='5.00,2.00 5.67,4.07 7.85,4.07 6.09,5.35 6.76,7.43 5.00,6.15 3.24,7.43 3.91,5.35 2.15,4.07 4.33,4.07' fill='%23fc0'/%3E%3Cpolygon points='10.00,1.05 10.26,1.84 11.09,1.84 10.42,2.34 10.68,3.13 10.00,2.64 9.32,3.13 9.58,2.34 8.91,1.84 9.74,1.84' fill='%23fc0'/%3E%3Cpolygon points='12.00,3.25 12.26,4.04 13.09,4.04 12.42,4.54 12.68,5.33 12.00,4.84 11.32,5.33 11.58,4.54 10.91,4.04 11.74,4.04' fill='%23fc0'/%3E%3Cpolygon points='12.00,6.25 12.26,7.04 13.09,7.04 12.42,7.54 12.68,8.33 12.00,7.84 11.32,8.33 11.58,7.54 10.91,7.04 11.74,7.04' fill='%23fc0'/%3E%3Cpolygon points='10.00,8.45 10.26,9.24 11.09,9.24 10.42,9.74 10.68,10.53 10.00,10.04 9.32,10.53 9.58,9.74 8.91,9.24 9.74,9.24' fill='%23fc0'/%3E%3C/svg%3E"); }

/* JS 가 아직 안 돌았을 때 버튼이 빈 칸으로 보이지 않게 */
.header-lang-btn .flag:not([data-flag]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' fill='%23fff'/%3E%3Cpath d='M7.5 8a4.5 4.5 0 0 1 9 0z' fill='%23cd2e3a'/%3E%3Cpath d='M7.5 8a4.5 4.5 0 0 0 9 0z' fill='%230047a0'/%3E%3Cg transform='rotate(-35 2.2 3.2)'%3E%3Crect x='0.5' y='2.1' width='3.4' height='.7' fill='%23111'/%3E%3Crect x='0.5' y='3.6' width='3.4' height='.7' fill='%23111'/%3E%3C/g%3E%3Cg transform='rotate(35 2.2 12.8)'%3E%3Crect x='0.5' y='11.7' width='3.4' height='.7' fill='%23111'/%3E%3Crect x='0.5' y='13.2' width='3.4' height='.7' fill='%23111'/%3E%3C/g%3E%3Cg transform='rotate(35 21.8 3.2)'%3E%3Crect x='20.1' y='2.1' width='3.4' height='.7' fill='%23111'/%3E%3Crect x='20.1' y='3.6' width='3.4' height='.7' fill='%23111'/%3E%3C/g%3E%3Cg transform='rotate(-35 21.8 12.8)'%3E%3Crect x='20.1' y='11.7' width='3.4' height='.7' fill='%23111'/%3E%3Crect x='20.1' y='13.2' width='3.4' height='.7' fill='%23111'/%3E%3C/g%3E%3C/svg%3E"); }
/* FLAGS:END */