/* 서바이벌 청춘 베트남 — 공통 베트남 테마
   맛집 화면의 테라코타·사이공 그린·랜턴 골드를 전체 앱에 연결한다. */
:root {
  --vn-terracotta: #B84A32;
  --vn-terracotta-dark: #913825;
  --vn-terracotta-soft: #F7E5DF;
  --vn-green: #1F5E56;
  --vn-green-soft: #E5F0EB;
  --vn-gold: #E8A020;
  --vn-gold-soft: #FAEED3;
  --vn-ivory: #FFF9F3;
  --vn-sand: #F6EBDD;
  --vn-ink: #2F1D12;
  --vn-body: #5F4A3A;
  --vn-muted: #766557;

  --coral-500: var(--vn-terracotta);
  --coral-600: var(--vn-terracotta-dark);
  --coral-700: #70291C;
  --brand: var(--vn-terracotta);
  --brand-hover: var(--vn-terracotta-dark);
  --brand-soft: var(--vn-terracotta-soft);
  --accent: var(--vn-gold);
  --success: var(--vn-green);
  --text-heading: var(--vn-ink);
  --text-body: var(--vn-body);
  --text-muted: var(--vn-muted);
  --surface-page: var(--vn-ivory);
  --surface-sunk: #FDF4E5;
  --border: #E7D8C8;
}

body {
  background-color: var(--vn-ivory) !important;
  color: var(--vn-ink);
  font-size: 14px;
  line-height: 1.55;
}

.bg-background { background-color: var(--vn-ivory) !important; }
.bg-surface { background-color: #FFFEFC !important; }
.text-primary { color: var(--vn-terracotta) !important; }
.bg-primary { background-color: var(--vn-terracotta) !important; }
.border-primary { border-color: var(--vn-terracotta) !important; }
.bg-primary-container { background-color: var(--vn-terracotta-soft) !important; }
.text-on-primary-container { color: var(--vn-terracotta-dark) !important; }
.text-on-background,
.text-on-surface { color: var(--vn-ink) !important; }
.text-on-surface-variant { color: var(--vn-muted) !important; }
.text-secondary { color: #A6630D !important; }
.border-outline,
.border-outline-variant { border-color: #E7D8C8 !important; }
.bg-\[\#E5F0EB\] { background-color: var(--vn-green-soft) !important; }
.text-\[\#1F5E56\] { color: var(--vn-green) !important; }
.border-\[\#C8DED3\] { border-color: #C8DED3 !important; }
.hover\:text-primary:hover { color: var(--vn-terracotta-dark) !important; }
.hover\:bg-primary-container:hover { background-color: var(--vn-terracotta-soft) !important; }
.wave-bar { background-color: var(--vn-gold) !important; }

/* 40대 이상 사용자가 이동 중에도 읽기 쉬운 최소 크기 */
.text-body-sm { font-size: 13px !important; line-height: 1.55 !important; }
.text-body-md { font-size: 14px !important; line-height: 1.55 !important; }
.text-label-md { font-size: 13px !important; line-height: 1.4 !important; }
.text-label-bold { line-height: 1.45 !important; }
.text-\[10px\] { font-size: 12px !important; }
.text-\[12px\],
.text-\[12\.5px\] { font-size: 13px !important; line-height: 1.5 !important; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button { font-size: 14px; }

/* 국가별 국기를 그대로 보여 주는 브랜드 마크 */
.vn-star-logo {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 3px 5px rgba(81, 47, 25, .16));
}
#app-title { color: var(--vn-terracotta) !important; font-size: 20px !important; }
#lang-toggle-btn { min-height: 38px; font-size: 13px !important; background: #FFFEFC; }
.vn-hero-chip { border: 1px solid #C9DED4; background: var(--vn-green-soft) !important; color: var(--vn-green) !important; }
#main-footer { padding-bottom: 1.5rem !important; }

/* 첫 화면 카드: 세 가지 브랜드 색의 옅은 변형만 사용 */
.cc {
  min-height: 154px;
  border-radius: 26px !important;
  box-shadow: 0 7px 18px rgba(81, 47, 25, .07) !important;
}
.cc .cc-t { color: var(--vn-ink) !important; }
.cc .cc-d { color: var(--vn-body) !important; font-size: 13px; line-height: 1.5; }
.cc.golf,
.cc.massage { background: #EAF3EE !important; border-color: #C8DED3 !important; }
.cc.golf .cc-chip,
.cc.massage .cc-chip { background: var(--vn-green) !important; }
.cc.night,
.cc.emergency { background: #F8E9E4 !important; border-color: #EBCBC1 !important; }
.cc.night .cc-chip,
.cc.emergency .cc-chip { background: var(--vn-terracotta) !important; }
.cc.night .cc-chip.congai-icon {
  overflow: hidden;
  border: 1px solid #E8C4B8;
  background: #FFF3EA !important;
  box-shadow: 0 6px 13px rgba(145, 56, 37, .18) !important;
}
.congai-icon img {
  width: 58px;
  height: 58px;
  max-width: none;
  flex: 0 0 auto;
  object-fit: contain;
  transform: translateY(2px) scale(1.08);
}
.cc.drink,
.cc.dining { background: #FBF0D9 !important; border-color: #ECD9AD !important; }
.cc.drink .cc-chip,
.cc.dining .cc-chip { background: #C87A12 !important; }
.cc.shopping { background: #EEF2E7 !important; border-color: #D5DFC4 !important; }
.cc.shopping .cc-chip { background: #48755B !important; }
.cc.calc { background: #F5EDE3 !important; border-color: #E3D4C3 !important; }
.cc.calc .cc-chip { background: #725746 !important; }

/* 국가 간 상호 홍보: 미출시 앱도 고장 난 버튼처럼 보이지 않게 */
.other-app-card:disabled { opacity: 1 !important; cursor: default !important; }
.other-app-card {
  position: relative;
  border-color: #E3D2BE !important;
  background: #FFFCF7 !important;
  box-shadow: 0 5px 14px rgba(81, 47, 25, .05);
}
.other-app-copy strong { color: var(--vn-ink); line-height: 1.35; }
.other-app-copy small { color: var(--vn-muted) !important; font-size: 13px !important; }
.coming-soon-badge {
  align-self: flex-start;
  margin-top: 3px;
  padding: 3px 8px;
  border: 1px solid #E5C879;
  border-radius: 999px;
  background: var(--vn-gold-soft);
  color: #89570D;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

/* 회화 상세의 하얀 카드와 핵심 단어 상자를 같은 종이 질감으로 연결 */
#sentence-list > div,
.quick-word-card {
  border-color: #E7D8C8 !important;
  box-shadow: 0 6px 16px rgba(81, 47, 25, .06) !important;
}
#sentence-list > div { border-radius: 20px !important; }
#category-detail-view section { box-shadow: 0 5px 15px rgba(81, 47, 25, .04); }
#category-detail-view > section { border-radius: 20px !important; }
.unified-keywords {
  border: 1px solid #E7D8C8;
  border-radius: 20px;
  background: #FFF9F0;
  padding: 16px;
}
.unified-keywords-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--vn-terracotta-dark);
  font-size: 15px;
  font-weight: 800;
}
#quick-word-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.quick-word-card {
  min-height: 100px;
  padding: 13px 14px;
  border: 1px solid #E7D8C8;
  border-radius: 16px;
  background: #FFFEFC;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.quick-word-meaning,
.quick-word-pron {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.quick-word-meaning span,
.quick-word-pron span {
  color: var(--vn-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}
.quick-word-meaning strong {
  color: var(--vn-ink);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  word-break: keep-all;
}
.quick-word-pron b {
  color: var(--vn-terracotta-dark);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  word-break: keep-all;
}

@media (prefers-color-scheme: dark) {
  :root {
    --vn-ivory: #17120F;
    --vn-ink: #F4EAE1;
    --vn-body: #E2D3C7;
    --vn-muted: #C5B5A8;
  }
  .bg-surface, .other-app-card, .quick-word-card { background-color: #241C17 !important; }
  .other-app-copy strong { color: #F4EAE1; }
  #lang-toggle-btn { background: #241C17; }
  .cc.golf, .cc.massage, .cc.shopping { background: #172822 !important; border-color: #2C473D !important; }
  .cc.night, .cc.emergency { background: #321C18 !important; border-color: #583029 !important; }
  .cc.drink, .cc.dining { background: #30250F !important; border-color: #5B4620 !important; }
  .cc.calc { background: #29211B !important; border-color: #4A3B30 !important; }
}

@media (max-width: 360px) {
  #app-title { font-size: 18px !important; }
  #lang-toggle-btn { padding-left: 11px !important; padding-right: 11px !important; }
  #quick-word-list { grid-template-columns: 1fr !important; }
}