/* VPOS 앱 센터 — posapp(망고포스 앱 센터)의 main.css 위에 얹는 이 사이트 전용 스타일 (2026-09-30) */

html {
    --svg-windows: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23333' d='M0 2.2 6.5 1.3v6.2H0zM7.3 1.2 16 0v7.5H7.3zM0 8.3h6.5v6.3L0 13.7zM7.3 8.3H16V16l-8.7-1.2z'/%3E%3C/svg%3E");
    --vpos-accent: #F29D00;          /* 망고 로고의 주황 — 강조 테두리·배지 */
    --vpos-accent-soft: #FFF6E3;
    --vpos-ink: #26292C;
    --vpos-sub: #5E666D;
    --vpos-line: #E2E5E9;
}

article [data-pre-icon="Windows"]::before { background-image: var(--svg-windows); background-size: contain; background-repeat: no-repeat; aspect-ratio: 1/1; height: 0.85em; margin-right: 0.35em; }
article [data-pre-icon="macOS"]::before { background-image: var(--svg-ios); background-size: contain; background-repeat: no-repeat; translate: 0 -0.06em; margin-right: 0.3em; }

.vpos_page { max-width: 960px; margin-inline: auto; padding: 8px 16px 48px; box-sizing: border-box; color: var(--vpos-ink); word-break: keep-all; overflow-wrap: break-word; }   /* 한국어를 단어 단위로 줄바꿈(«최 / 신» 방지) */
.vpos_page a { color: inherit; }

.vpos_intro { padding: 12px 0 4px; }
.vpos_intro h1 { margin: 0 0 8px; font-size: 1.625rem; font-weight: 800; letter-spacing: -0.01em; }
.vpos_intro p { margin: 0 0 6px; font-size: 1rem; line-height: 1.6; color: var(--vpos-sub); }
.vpos_intro p.lead { color: var(--vpos-ink); font-weight: 500; }

/* 접속한 기기 판정 한 줄 */
.vpos_detected { margin: 16px 0 8px; padding: 12px 14px; border-radius: 12px; background: #F4F6F8; font-size: 0.975rem; line-height: 1.55; }
.vpos_detected[data-state="match"] { background: var(--vpos-accent-soft); }
.vpos_detected[data-state="warn"] { background: #FDEFEF; }
.vpos_detected strong { font-weight: 700; }
.vpos_detected a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

.vpos_group { margin-top: 24px; }
.vpos_group > h2 { display: flex; align-items: center; margin: 0 0 10px; font-size: 1.25rem; font-weight: 800; }
.vpos_group > h2 .req { margin-left: 0.75em; font-size: 0.85rem; font-weight: 500; color: var(--vpos-sub); }

.vpos_cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .vpos_cards { grid-template-columns: minmax(0, 1fr); } }

.vpos_card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1.5px solid var(--vpos-line); border-radius: 16px; background: #FFF; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.vpos_card .head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vpos_card .head img { width: 48px; height: 48px; flex: none; border-radius: 12px; background: #FFF; box-shadow: 0 0 0 1px var(--vpos-line); }
.vpos_card .head .names { display: flex; flex-direction: column; min-width: 0; }
.vpos_card .head h3 { margin: 0; font-size: 1.125rem; font-weight: 800; }
.vpos_card .head span { font-size: 0.9rem; color: var(--vpos-sub); }
.vpos_card .badge { display: none; position: absolute; top: -11px; right: 14px; padding: 2px 10px; border-radius: 999px; background: var(--vpos-accent); color: var(--vpos-ink); font-size: 0.8rem; font-weight: 700; font-style: normal; }
.vpos_card .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.vpos_card .primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; min-height: 44px; padding: 0 18px; border-radius: 12px; background: var(--vpos-ink); color: #FFF !important; font-weight: 700; text-decoration: none; }
.vpos_card .primary small { font-weight: 500; }
.vpos_card .primary:hover { background: #000; }
.vpos_card .secondary { font-size: 0.925rem; color: var(--vpos-sub) !important; text-underline-offset: 3px; }
.vpos_card .secondary:hover { color: var(--vpos-ink) !important; }
.vpos_card .ver { font-size: 0.85rem; color: var(--vpos-sub); font-variant-numeric: tabular-nums; }
.vpos_card .ver:empty { display: none; }
.vpos_card a:focus-visible, .vpos_detected a:focus-visible { outline: 3px solid var(--vpos-ink); outline-offset: 2px; }

/* 이 기기에 맞는 항목 */
.vpos_card[data-recommended="1"] { border-color: var(--vpos-accent); box-shadow: 0 4px 16px rgb(242 157 0 / 18%); }
.vpos_card[data-recommended="1"] .badge { display: inline-block; }
/* 주황 바탕엔 진한 글씨 — 흰 글씨는 2.19:1 로 WCAG 미달, #26292C 는 6.68:1 (적대 검토 2026-09-30) */
.vpos_card[data-recommended="1"] .primary { background: var(--vpos-accent); color: var(--vpos-ink) !important; }
.vpos_card[data-recommended="1"] .primary:hover { background: #D98C00; }
/* 확신이 없는 추정은 배지 문구를 바꾼다(«맞아요» 대신 «아마 이것») */
.vpos_card[data-recommended="1"][data-sure="0"] .badge::after { content: " (추정)"; font-weight: 500; }

.vpos_notes { margin-top: 28px; }
.vpos_notes .version_logs { padding: 16px 0; }
.vpos_notes .version_logs .title { margin: 0; font-size: 1.125rem; font-weight: 700; }
.vpos_notes .version_logs .item { display: block; margin-top: 8px; }
.vpos_notes .version_logs .desc { display: block; color: var(--vpos-sub); padding-left: 1em; }
.vpos_notes .version_logs b { font-weight: 700; }

.vpos_footer { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--vpos-line); font-size: 0.85rem; color: var(--vpos-sub); }

@media (prefers-reduced-motion: reduce) { .vpos_card { transition: none; } }

/* 닫힌 메뉴는 화면 밖에 있어도 탭 이동이 들어간다(EstreUI 는 폭 0 으로만 숨긴다) — 닫혀 있고 잡고 있지 않을 땐 보이지 않게(= 초점 제외).
   닫힐 때는 폭 애니메이션(0.3초)이 끝난 뒤에 숨긴다. */
nav#mainMenu:not([data-opened="1"]):not([data-on-grab="1"]) > section#menuArea { visibility: hidden; transition: width 0.3s, backdrop-filter 0.3s, -webkit-backdrop-filter 0.3s, visibility 0s linear 0.3s; }
nav#mainMenu[data-opened="1"] > section#menuArea, nav#mainMenu[data-on-grab="1"] > section#menuArea { visibility: visible; }

/* posapp main.css 의 html { touch-action: pan-y } 가 핀치 확대를 막는다 — 이 페이지는 확대를 허용한다 */
html { touch-action: pan-x pan-y pinch-zoom; }