/* 보조(접근성)·연결 끊김 쪽지·앱 안 브라우저 로그인 쪽지
   js/settings.js '보조' 탭 → body.gmark · body.cb-pal · body.txk(--txk) · body.calm  |  js/keys.js 단축키 표  |  js/boot.js #netlost  |  js/install.js .inapp-login */

/* ── 등급 글자 표지: 행낭·몸·흥정·시전 칸의 오른쪽 위 귀퉁이 (붉은 인주 도장 꼴) ── */
body.gmark :is(.cell-item, .slot, .tr-it, .tr-bi, .mk-ic, .mk-bi):is(.g-bum, .g-sang, .g-jin, .g-myeong, .g-beol)::after {
  position: absolute; top: 1px; right: 1px; z-index: 1; min-width: 13px; height: 13px; padding: 0 1px; box-sizing: border-box; pointer-events: none;
  font: 400 10.5px/13px var(--title); text-align: center; color: #fff4dc; background: rgba(20,12,8,0.82); border: 1px solid currentColor; border-radius: 2px;
  text-shadow: none; }
body.gmark .g-bum::after { content: '凡'; color: #d6d0c2; }
body.gmark .g-sang::after { content: '上'; color: #8fb0ff; }
body.gmark .g-jin::after { content: '珍'; color: #f0dc6a; }
body.gmark .g-myeong::after { content: '名'; color: #e0a050; }
body.gmark .g-beol::after { content: '套'; color: #7ad07f; }
html.lang-en body.gmark .g-bum::after { content: 'C'; } html.lang-en body.gmark .g-sang::after { content: 'F'; } html.lang-en body.gmark .g-jin::after { content: 'R'; }
html.lang-en body.gmark .g-myeong::after { content: 'M'; } html.lang-en body.gmark .g-beol::after { content: 'S'; }
html.lang-en body.gmark :is(.cell-item, .slot, .tr-it, .tr-bi, .mk-ic, .mk-bi)::after { font-family: var(--font); font-weight: 700; font-size: 10px; }
body.gmark.cb-pal .g-sang::after { color: #56b4e9; } body.gmark.cb-pal .g-jin::after { color: #f0e442; }
body.gmark.cb-pal .g-myeong::after { color: #e69f00; } body.gmark.cb-pal .g-beol::after { color: #e58ac0; }
/* 범품 칸은 원래 바탕이 없다 — 표지만 */
body.gmark .slot.g-bum::after { opacity: 0.85; }

/* ── 색약 친화 등급 바탕 (하늘·노랑·주황·분홍: 빨강/초록 대비에 기대지 않는다) ── */
body.cb-pal :is(.cell-item, .slot, .tr-bi).g-sang { background: rgba(40,110,170,0.4); }
body.cb-pal :is(.cell-item, .slot, .tr-bi).g-jin { background: rgba(170,160,30,0.38); }
body.cb-pal :is(.cell-item, .slot, .tr-bi).g-myeong { background: rgba(190,110,0,0.48); }
body.cb-pal :is(.cell-item, .slot, .tr-bi).g-beol { background: rgba(170,70,130,0.42); }
body.cb-pal .tr-it.g-sang, body.cb-pal :is(.mk-ic, .mk-bi).g-sang { background-color: rgba(40,110,170,0.6); }
body.cb-pal .tr-it.g-jin, body.cb-pal :is(.mk-ic, .mk-bi).g-jin { background-color: rgba(170,160,30,0.55); }
body.cb-pal .tr-it.g-myeong, body.cb-pal :is(.mk-ic, .mk-bi).g-myeong { background-color: rgba(190,110,0,0.65); }
body.cb-pal .tr-it.g-beol, body.cb-pal :is(.mk-ic, .mk-bi).g-beol { background-color: rgba(170,70,130,0.6); }
body.cb-pal .st-it.g-sang { background: rgba(60,140,210,0.18); } body.cb-pal .st-it.g-jin { background: rgba(220,210,60,0.16); }
body.cb-pal .st-it.g-myeong { background: rgba(220,140,0,0.2); } body.cb-pal .st-it.g-beol { background: rgba(200,90,160,0.18); }
body.cb-pal .ch-slot.g-sang { box-shadow: 0 0 0 1px rgba(86,180,233,0.7); }
body.cb-pal .ch-slot.g-myeong { box-shadow: 0 0 0 2px rgba(230,159,0,0.85), 0 0 12px rgba(230,159,0,0.5); }

/* 설정 '보조' 탭: 표지 풀이 · 색 견본 */
.set-gm { font-family: var(--title); letter-spacing: 0.5px; color: #4a1a10; white-space: normal; }
.set-gsw { display: inline-flex; gap: 3px; vertical-align: -2px; margin-left: 2px; }
.set-gsw i { width: 12px; height: 12px; border: 1px solid #3a2a1a; border-radius: 2px; }

/* ── 글자 크기 (말하기·알림·물건 설명): UI 크기와 따로 ── */
body.txk #chat-log { font-size: calc(14px * var(--txk, 1)); max-height: calc(190px * var(--txk, 1)); }
body.txk #sysbox div { font-size: calc(14px * var(--txk, 1)); }
body.txk #tip { font-size: calc(14px * var(--txk, 1)); max-width: min(calc(320px * var(--txk, 1)), calc(100vw - 16px)); }
body.txk #tip.two { max-width: min(calc(660px * var(--txk, 1)), calc(100vw - 16px)); }
body.txk #tip .tn { font-size: calc(18px * var(--txk, 1)); }
body.txk #tip :is(.tsub, .eg-socks, .eg-cmp, .eg-proc, .ch-tl) { font-size: calc(12px * var(--txk, 1)); }
body.txk #tip .eg-tcat { font-size: calc(11px * var(--txk, 1)); }
body.txk #tip :is(.eg-aura) { font-size: calc(12.5px * var(--txk, 1)); }
body.txk #tip .eg-hint { font-size: calc(11.5px * var(--txk, 1)); }
body.txk #tip .tip-acts .lq-btn { font-size: calc(15px * var(--txk, 1)); }

/* ── 단축키 표 (설정 '조작') ── */
.set-keys-h { border-bottom: none; padding-bottom: 2px; }
.set-keys { padding: 0 0 8px; }
.kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 3px 10px; }
.kb-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; border-bottom: 1px dotted rgba(120,90,50,0.3); }
.kb-n { flex: 1; min-width: 0; font-size: 13px; color: #3a2a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-k { flex: none; min-width: 34px; height: 26px; padding: 0 7px; font: 400 14px/1 var(--title); color: #241a12; background: linear-gradient(#fbf3de, #e2d2ac);
  border: 1px solid #8a6a3a; border-bottom-width: 2px; border-radius: 3px; box-shadow: 0 1px 0 rgba(0,0,0,0.15); }
.kb-row.moved .kb-k { color: #7a1a12; border-color: #9a2a1e; }
.kb-row.cap .kb-k { min-width: 110px; color: #f6e2b0; background: #7a1a12; border-color: #c9a24f; font-size: 12px; animation: kb-blink 0.9s ease-in-out infinite alternate; }
@keyframes kb-blink { to { background: #4a0c08; } }
body.calm .kb-row.cap .kb-k { animation: none; }
.kb-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.kb-note { flex: 1; min-width: 0; font-size: 12.5px; color: #7a1a12; line-height: 1.4; }
.kb-reset[disabled] { opacity: 0.45; cursor: default; }

/* ── 연결 끊김 (첫 화면·명부·입장 중 — js/boot.js netLost): 한지 판 하나, 가운데 ── */
#netlost { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;
  background: radial-gradient(ellipse at center, rgba(8,6,4,0.55), rgba(5,4,3,0.88)); }
#netlost.hidden { display: none; }
#netlost .nl-panel { position: relative; width: min(360px, 100%); padding: 22px 24px 18px; box-sizing: border-box; text-align: center; color: #241a12;
  background: url("../ui/tex_hanji.png") center / 260px, #e9dcc0; border: 1px solid #6d5636;
  box-shadow: 0 0 0 3px #2a1f15, 0 0 0 4px #c9a24f, 0 0 0 7px #2a1f15, 0 16px 40px rgba(0,0,0,0.7); }
#netlost .nl-seal { position: absolute; top: -16px; right: -12px; width: 38px; height: 38px; font: 400 22px/38px var(--title); color: #fff1d8; background: #a8150e;
  border-radius: 6px; transform: rotate(6deg); box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
#netlost h3 { margin: 0 0 8px; font: 400 22px/1.3 var(--title); color: #8e2a22; letter-spacing: 2px; }
#netlost .nl-p { margin: 0 0 6px; font-size: 15px; line-height: 1.7; }
#netlost .nl-c { margin: 0 0 12px; min-height: 1.4em; font-size: 13px; color: #6d5636; }
#netlost .nl-go { font: 400 16px var(--title); letter-spacing: 1px; padding: 8px 20px; background: #7a1a12; color: #f6e2b0; border: 1px solid #a8803e;
  box-shadow: inset 0 1px 0 rgba(255,220,160,0.18), 0 2px 4px rgba(0,0,0,0.4); cursor: pointer; }
#netlost .nl-go:active { transform: translateY(1px); }
@media (max-height: 420px) { #netlost .nl-panel { padding: 14px 18px 12px; } #netlost h3 { font-size: 19px; margin-bottom: 4px; } #netlost .nl-p { font-size: 14px; line-height: 1.5; } }

/* ── 앱 안 브라우저: 구글 로그인 단추 위 쪽지 (js/install.js) ── */
.inapp-login { width: 100%; max-width: 320px; box-sizing: border-box; padding: 9px 11px 8px; text-align: left; color: #241a12;
  background: url("../ui/tex_hanji.png") center / 260px, #e3d3b0; border: 1px solid #6d5636; border-left: 3px solid #a8150e; box-shadow: 0 0 0 1px #1d140c; }
.inapp-login .ial-t b { font: 400 15px/1.35 var(--title); color: #8e2a22; letter-spacing: 0.5px; }
.inapp-login .ial-s { margin: 4px 0 7px; font-size: 12.5px; line-height: 1.5; color: #2a2018; }
.inapp-login .ial-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inapp-login .ial-acts .inst-go { font-size: 14px; padding: 6px 12px; }
.inapp-login .ial-h { margin: 6px 0 0; font-size: 11.5px; line-height: 1.45; color: #5a4a36; }
html.in-app-browser #gbtn { opacity: 0.55; }   /* 눌러도 막히니 흐리게 (그래도 시도는 할 수 있게 둔다) */
@media (orientation: landscape) and (max-height: 560px) {
  .inapp-login { max-width: 460px; padding: 6px 9px; }
  .inapp-login .ial-s { margin: 2px 0 4px; }
  .inapp-login .ial-h { display: none; }
}
@media (orientation: landscape) and (max-height: 430px) {   /* 휴대폰 가로: 제목과 단추만 한 줄로 (설명은 단추 title 로) */
  .inapp-login { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 5px 8px; }
  .inapp-login .ial-t { flex: 1 1 200px; } .inapp-login .ial-t b { font-size: 14px; }
  .inapp-login .ial-s { display: none; }
  .inapp-login .ial-acts .inst-go, .inapp-login .ial-acts .inst-sub { padding: 4px 9px; font-size: 13px; }
}
/* 좁은 세로 화면: 접근성 줄은 설명이 길다 — 고르기 단추를 설명 아래로 */
@media (max-width: 520px) {
  .set-row:has(.set-pick [data-k="gmark"], .set-pick [data-k="cbPal"], .set-pick [data-k="txt"], .set-pick [data-k="motion"]) { flex-wrap: wrap; }
  .set-row:has(.set-pick [data-k="gmark"], .set-pick [data-k="cbPal"], .set-pick [data-k="txt"], .set-pick [data-k="motion"]) label { flex-basis: 100%; }
  .kb-grid { grid-template-columns: 1fr 1fr; gap: 3px 8px; }
  .kb-n { font-size: 12px; }
}