/* 랜딩 4페이지 공통(새 디자인): 언어 선택·모바일 메뉴·건너뛰기 링크·FAQ 분류 강조·언어별 글꼴.
   페이지별 디자인은 design-{landing,pc-remote,mobile,faq}.css(자동 생성)에 있습니다. */
html{scroll-padding-top:84px}
.flag-symbols{position:absolute;width:0;height:0;overflow:hidden}
.skip-link{position:absolute;left:12px;top:-64px;z-index:100;padding:10px 16px;border-radius:10px;background:#0a0b0d;color:#fff;font-weight:600}
.skip-link:focus{top:12px;color:#fff}

.language-switcher{position:relative}
.language-trigger{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid #e1e3ea;background:#fff;color:#1c2030;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:border-color .2s}
.language-trigger:hover{border-color:#b9bdca}
.flag-icon{display:block;width:20px;height:14px;flex:none;border-radius:3px;box-shadow:0 0 0 1px rgba(10,11,13,.12)}
.language-caret{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.6;transition:transform .2s}
.language-trigger[aria-expanded="true"] .language-caret{transform:translateY(1px) rotate(225deg)}
.language-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:220px;padding:10px;border-radius:16px;background:#fff;border:1px solid #e4e6ee;box-shadow:0 24px 48px -20px rgba(15,22,90,.35)}
.language-panel[hidden]{display:none}
.language-panel-title{display:block;padding:4px 8px 8px;font-size:12px;font-weight:600;color:#6b7183}
.language-options{display:flex;flex-direction:column;gap:2px}
.language-option{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 10px;border:0;border-radius:10px;background:none;color:#1c2030;font:inherit;font-size:14px;text-align:left;cursor:pointer}
.language-option:hover{background:#f3f4f8}
.language-option[aria-pressed="true"]{background:#eef0ff;color:var(--accent,#2633ff);font-weight:700}
.language-name{flex:1}
.language-check{opacity:0;color:var(--accent,#2633ff)}
.language-option[aria-pressed="true"] .language-check{opacity:1}

.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 11px;border:1px solid #e1e3ea;border-radius:12px;background:#fff;cursor:pointer}
.hamburger span{display:block;height:2px;border-radius:2px;background:#1c2030;transition:transform .2s,opacity .2s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{border-top:1px solid #eef0f4;background:#fff}
.mobile-menu[hidden]{display:none}
.mobile-menu nav{display:flex;flex-direction:column;gap:4px;max-width:1200px;margin:0 auto;padding:12px 16px 18px}
.mobile-menu nav a{display:flex;align-items:center;min-height:48px;padding:0 12px;border-radius:12px;color:#1c2030;font-size:16px;font-weight:600}
.mobile-menu nav a:hover{background:#f3f4f8}
.mobile-menu nav a.btn{justify-content:center;margin-top:8px;color:#fff}

.faq-cats a[aria-current="true"]{background:var(--accent,#2633ff);border-color:var(--accent,#2633ff);color:#fff}
.faq-cats a[aria-current="true"] small{background:rgba(255,255,255,.2);color:#fff}

:lang(zh-CN) .pg{font-family:"Geist","Noto Sans SC","IBM Plex Sans KR",sans-serif}
:lang(th) .pg{font-family:"Geist","Noto Sans Thai","IBM Plex Sans KR",sans-serif}
:lang(vi) .pg,:lang(id) .pg,:lang(en) .pg{word-break:normal;overflow-wrap:break-word}

/* 소개 첫 화면: 640px 이하에서는 디자인의 .hero 아래 여백이 64px로 줄어 휴대폰 벽(.hfield, 높이 440px)이 제목 뒤로 올라온다.
   그 폭에서는 배경을 아주 옅고 흐리게 해 제목·버튼 글씨를 살린다(디자인 원본 design-landing.css는 자동 생성이라 여기서 덮어씀). */
@media (max-width:640px){
  html[data-page="landing"] .hero .hfield{opacity:.18;filter:blur(2px) saturate(.6)}
}

@media (max-width:760px){
  .nav .links{display:none}
  .nav .nav-row{flex-wrap:nowrap;justify-content:space-between;padding-top:0}
  .nav-cta .btn{display:none}
  .hamburger{display:flex}
  .language-trigger{padding:0 10px}
}