@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');

/* ============================================================
   언어 고르기 — 국기 격자

   home.css 의 색과 그림자를 그대로 씁니다.
   머리말 안에서 쓰는 단추 하나와, 눌렀을 때 뜨는 격자입니다.
   ============================================================ */


/*
 * 국기.
 *
 * 윈도우는 국기 이모지를 그림이 아니라 글자(KR, US)로 그립니다.
 * 그래서 Noto Color Emoji 를 함께 부릅니다.
 * 이 글꼴이 없는 기기는 애플 · 윈도우의 기본 이모지 글꼴을 씁니다.
 */

.flag {
  font-family:
    "Noto Color Emoji",
    "Apple Color Emoji",
    "Segoe UI Emoji",
    sans-serif;

  font-size:17px;
  line-height:1;
  letter-spacing:0;
}


/* ---------- 머리말 단추 ---------- */

.lp { position:relative; }

.lp-btn {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  color:inherit;
  font:inherit;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), border-color .16s ease;
}

.lp-btn:hover { transform:translateY(-1px); border-color:var(--secondary); }
.lp-btn:active { transform:translateY(1px); }

.lp-btn b {
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}

.lp-chev {
  width:14px;
  height:14px;
  color:var(--muted);
}


/* ---------- 격자 ---------- */

.lp-sheet[hidden] { display:none; }

.lp-sheet {
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.lp-sheet-back {
  position:absolute;
  inset:0;
  background:rgba(20,32,26,.42);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.lp-sheet-box {
  position:relative;
  width:min(100%,420px);
  max-height:80dvh;
  overflow-y:auto;
  padding:16px;
  border-radius:24px;
  background:var(--surface);
  box-shadow:var(--shadow-soft-lg);
  animation:lpPop .2s cubic-bezier(.2,.9,.3,1.1);
}

@keyframes lpPop {
  from { opacity:0; transform:translateY(8px) scale(.98); }
  to   { opacity:1; transform:none; }
}

.lp-sheet-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

.lp-sheet-head strong {
  font-size:14px;
  font-weight:800;
  letter-spacing:-.02em;
}

.lp-sheet-x {
  width:28px;
  height:28px;
  border:0;
  border-radius:999px;
  background:var(--soft);
  color:var(--muted);
  font-size:17px;
  line-height:1;
  cursor:pointer;
}

.lp-sheet-x:hover { color:var(--text); }

.lp-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.lp-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:12px 6px 10px;
  border:1.6px solid var(--line);
  border-radius:16px;
  text-decoration:none;
  color:inherit;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), border-color .16s ease, background-color .16s ease;
}

.lp-card .flag { font-size:24px; }

.lp-card b {
  font-size:11.5px;
  font-weight:800;
  line-height:1.3;
  text-align:center;
  word-break:keep-all;
}

.lp-card small {
  font-size:9.5px;
  font-weight:700;
  color:var(--muted);
}

.lp-card:hover { transform:translateY(-2px); border-color:var(--secondary); }

.lp-card.is-on {
  border-color:var(--primary);
  background:color-mix(in srgb, var(--primary) 12%, transparent);
}

@media (max-width:380px) {
  .lp-grid { grid-template-columns:repeat(2,1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-btn, .lp-card { transition:none; }
  .lp-sheet-box { animation:none; }
}