@charset "utf-8";
/* 언어 선택 — 글꼴·기본 골격은 /app/css/setting.css, style.css 를 따름
   1) 언어 목록 공통 (.lang_sel / .lang_picker)
   2) 최초용 레이어 (.lang_layer)
   3) 변경 팝업 (.lang_pop — 기존 슬라이드 박스 안)
   4) 예비 언어 선택 페이지 (/lang/select.php, body.lang_sel) */

html.lw_lock, html.lw_lock body, html.lw_lock #langLayer .ll_scroll { overflow: hidden; }
.lang_welcome {position: fixed;  z-index: 100000; background: #fff;opacity: 1; transition: all .5s; width:100%; height:100%; top:0; inset-inline-start:0; transform:translateX(0);}
.lang_welcome.lw_hide {opacity: 1; pointer-events: none; transform:translateX(100%);}

.lang_welcome .logo  {position:fixed; padding-top:calc(env(safe-area-inset-top) + 50px); top:0; inset-inline:0; width:150px; margin:auto; opacity:0;animation: logot_in 1s 1.0s forwards;}
.lang_welcome .logo img,
.lang_welcome .logo svg {max-width: 100%; height: auto;}

.lang_welcome .lw_body  {position:absolute; top:calc(50% - 70px); text-align:center; inset-inline-start:0; transform:translateY(-50%); width:100%; animation: ment_in 1s 1.5s forwards; opacity:0;}
.lang_welcome .lw_body img,
.lang_welcome .lw_body svg {max-width: 160px; height: auto; margin-bottom: 24px; }
.lang_welcome .lw_body.greet img,
.lang_welcome .lw_body.greet svg {max-width: 220px; }
.lang_welcome .lw_hello {margin: 0; font-size: 35px; font-weight: 100; line-height: 1.3; color: #000; word-break: keep-all;}
.lang_welcome .lw_sub {margin: 0; font-size: 12px; line-height: 1.5; color: #999; word-break: keep-all;  padding-top:5px; font-weight: 100;}
.lang_welcome .lw_foot {position:absolute; bottom:calc(env(safe-area-inset-bottom) + 30px); inset-inline-start:0; width:100%; animation: lw_in 1s 2.0s forwards; opacity:0;}
.lang_welcome .lw_start {display: block; width: 100%; height: 55px; border: 0; border-radius: 30px; background: #2456d8; color: #fff; font-size: 0;font-weight: 700; cursor: pointer; position:relative; inset-inline:0; margin:auto; max-width:200px; text-align:center; font-family:var(--neo);}
.lang_welcome .lw_start i,
.lang_welcome .lw_start span {display:inline-block; vertical-align:middle;}
.lang_welcome .lw_start i {font-size:24px;font-variation-settings:'FILL' 1,'wght' 100; margin-inline-start:10px;}
.lang_welcome .lw_start span {font-size:13px;}
.lang_welcome .lw_start:active {opacity: .85;}

@keyframes logot_in {
	from { opacity: 0; top:30px;}
	to   { opacity: 1; top:0;}
}

@keyframes ment_in {
	from { opacity: 0; top:calc(50% - 50px);}
	to   { opacity: 1; top:calc(50% - 70px);}
}

@keyframes lw_in {
	from { opacity: 0; transform: translateX(-10px); }
	to   { opacity: 1; transform: translateX(0); }
}
 
/* 다크 모드 (user-theme="dark") */
html[user-theme="dark"] .lang_welcome { background: #121212; }
html[user-theme="dark"] .lang_welcome .lw_hello { color: #f2f2f2; }
html[user-theme="dark"] .lang_welcome .lw_sub { color: #9a9a9a; }

/* ===================== 1) 공통 ===================== */
.lang_sel {
	--ls-ink:  var(--default_color, #14213D);
	--ls-sub:  #5B6B85;
	--ls-line: var(--btm_line, #D6DEEA);
	--ls-pick: var(--nav_on, #1F5EFF);
	--ls-bg:   var(--body_bg, #F3F6FA);
	color: var(--ls-ink);
}
/* 물리적 좌측 패딩을 논리적(시작/끝) 패딩으로 분리 치환 */
.lang_sel h1 { font-size: 16px; line-height: 1.3; padding: 15px 0; padding-inline-start: 25px; padding-inline-end: 10px; font-weight: 800; color:#000; position: relative;}
.lang_sel h1 i {position: absolute;top:50%; inset-inline-start: 0px; transform: translateY(-50%); font-size: 20px; font-variation-settings:'FILL' 1,'wght' 300;  color:#000;}
.lang_sel .greet { color: var(--ls-sub); font-size: 12px; margin: 0 0 18px; line-height: 1.6; display:none;}

/* 고정 영역: 제목 ~ 검색칸 — 목록을 스크롤해도 위에 붙어 있음 */
.lang_sel .ls_head { position: sticky; top: 0; z-index: 5; background: var(--ls-bg); }
.lang_sel .ls_head::after { content: ''; position: absolute; inset-inline: 0; bottom: -12px; height: 12px;
	background: linear-gradient(var(--ls-bg), transparent); pointer-events: none; }

/* 기기 언어 추천 */
.lang_sel .sug_tit { font-size: 11px; color: var(--ls-sub); margin: 0 0 6px; display:none;}
.lang_sel .ll_sug, .lang_sel #sug { margin: 0 0 12px; }
.lang_sel ul.ll_sug_list { border-top: 0 !important; }
.lang_sel ul.ll_sug_list li {margin-top:3px;}
.lang_sel ul.ll_sug_list li:first-child {margin:0;}

.lang_sel ul.ll_sug_list button.lang,
.lang_sel #sug_list button.lang { border: 1px solid #d4dfe9 !important; border-radius: 7px; padding: 15px 12px; background:#f9fcff; width: 100%;
display: flex; justify-content: space-between; align-items: baseline; font-family:var(--neo); cursor:pointer;}
.lang_sel ul.ll_sug_list button.lang .native,
.lang_sel #sug_list button.lang .native { color: var(--ls-pick); font-size:13px; font-weight:600; font-family:var(--neo);}
.lang_sel ul.ll_sug_list button.lang .en,
.lang_sel #sug_list button.lang .env { font-size:10px; font-weight:300;}

/* 검색 */
.lang_sel .find { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; margin: 0 0 14px; border: 1px solid var(--ls-line); border-radius: 8px; background: var(--df_frm_bg, #fff); color: inherit; display:none;}
.lang_sel .find:focus-visible { outline: 2px solid var(--ls-pick); outline-offset: 1px; }

/* 언어 목록 */
ul.ll_list { margin: 0; padding: 0; }
ul.ll_list li {border-bottom: 1px solid var(--ls-line);}
ul.ll_list li:last-child {border:0;}
ul.ll_list li button.lang { width: 100%; display: flex; justify-content: space-between; align-items: baseline;
	padding: 12px 12px; background: none; border: 0; 
	font: inherit; color: inherit; text-align: start; cursor: pointer; } /* text-align을 left에서 start로 변경 */
ul.ll_list li button.lang .native { font-size: 13px; font-weight: 500; color:#000; transition:all .3s;}
ul.ll_list li:hover button.lang .native {color:var(--ls-pick);}
ul.ll_list li button.lang .en { font-size: 10px; color: var(--ls-sub); }
ul.ll_list li button.lang[aria-current="true"] .native { color: var(--ls-pick); }
ul.ll_list li button.lang:focus-visible { outline: 2px solid var(--ls-pick); outline-offset: 2px; }

/* 번역 대기 화면 (처음 고르는 언어가 아직 번역 전일 때만) */
.lang_picker .ll_wait { display: none; position: fixed; inset: 0; z-index: 100001; background: var(--ls-bg);
	flex-direction: column; justify-content: center; align-items: center; padding: 24px; text-align: center; }
.lang_picker.waiting .ll_wait { display: flex; }
.lang_sel .ll_wait .native, .lang_sel #wait .native { font-size: 30px; font-weight: 700; margin-bottom: 10px; }
.lang_sel .ll_wait p, .lang_sel #wait p { color: var(--ls-sub); margin: 0 0 22px; font-size: 15px; }
.lang_sel .bar { width: 220px; height: 6px; border-radius: 3px; background: var(--ls-line); overflow: hidden; }
.lang_sel .bar i { display: block; height: 100%; width: 0; background: var(--ls-pick); transition: width .4s; }
.lang_sel .ll_retry, .lang_sel #retry { display: none; margin-top: 22px; padding: 12px 22px; border: 0; border-radius: 8px;
	background: var(--ls-pick); color: #fff; font: inherit; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .lang_sel .bar i { transition: none; } }

/* ===================== 2) 최초용 레이어 ===================== */
html.ll_lock, html.ll_lock body { overflow: hidden !important; }
.lang_layer { position: fixed; inset: 0; z-index: 100000; background: var(--body_bg, #F3F6FA); }
.lang_layer .ll_scroll { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
	padding: 0 20px max(32px, env(safe-area-inset-bottom)); }
.lang_layer .lang_picker { max-width: 600px; margin: 0 auto; transform:translateX(-100px); opacity:0; transition:all .3s;}
.lang_layer .lang_picker.show {transform:translateX(0); opacity:1;}
.lang_layer .ls_head { padding-top: max(24px, env(safe-area-inset-top)); }

/* ===================== 3) 변경 팝업 (기존 슬라이드 박스 안) ===================== */
.lang_pop .lang_picker { --ls-bg: var(--slide_bg, #fff); }
.lang_pop .ls_head { }

/* ===================== 4) 예비 언어 선택 페이지 (/lang/select.php) ===================== */
body.lang_sel { background: var(--ls-bg);
	padding: 0 20px max(32px, env(safe-area-inset-bottom)) !important; }
body.lang_sel main { max-width: 440px; margin: 0 auto; }
body.lang_sel .ls_head { padding-top: max(24px, env(safe-area-inset-top)); }
body.lang_sel #wait { display: none; position: fixed; inset: 0; background: var(--ls-bg);
	flex-direction: column; justify-content: center; align-items: center; padding: 24px; text-align: center; }
body.lang_sel #wait.on { display: flex; }

/* ===================== RTL 전용 구글 아이콘 위치 강제 수정 ===================== */
/* 구글 머티리얼 아이콘의 direction: ltr 기본 속성을 무시하고 우측으로 고정 (지구본이므로 좌우반전 불필요) */
html[dir="rtl"] .lang_sel h1 i { transform: translateY(-50%); left: auto; right: 0px; }