/* ==========================================================================
   app.css — 앱 다운로드(download/app/index.html) 전용
   - 읽는 순서: css/style.css → css/lo-common.css → 이 파일
   - 색·라운드·그림자는 lo-common.css 토큰만 씀 (여기에 색 값을 직접 적지 말 것 — QR 흰 바탕만 예외)
   - 좌우는 논리 속성으로 — 아랍어·히브리어에서 저절로 뒤집힘
   ========================================================================== */

/* 글자 끊기 — style.css 가 body 에 hyphens:auto 와 (한국어) text-align:justify 를 건다. 이 구역에서만 되돌림 */
#lo-app { text-align: center; overflow-wrap: normal; -webkit-hyphens: manual; hyphens: manual; word-break: keep-all;
          padding: 96px 22px 72px; display: flex; align-items: center; justify-content: center; min-height: 68vh; }
html[lang="ja-JP"] #lo-app, html[lang="zh-CN"] #lo-app { word-break: normal; }
#lo-app img, #lo-app svg { max-width: 100%; display: block; }

.ap-wrap { width: 100%; max-width: 560px; margin: 0 auto; }
.ap-sym { width: 84px; height: 84px; margin: 0 auto 20px; filter: drop-shadow(0 6px 14px rgba(27, 27, 25, .14)); }
.ap-eb { font-size: .78rem; font-weight: 800; letter-spacing: .08em; color: var(--sub); margin: 0 0 8px; }
.ap-wrap h1 { font-size: clamp(1.7rem, 4.6vw, 2.3rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.25; margin: 0 0 10px; color: var(--ink); }
.ap-lede { font-size: 1.02rem; color: var(--sub); font-weight: 600; margin: 0 auto 26px; max-width: 26em; }

/* 출시 전 안내 */
.ap-soon { background: var(--warmbg); border-radius: var(--r-card); padding: 20px 22px; margin-bottom: 22px; }
.ap-soon b { display: inline-block; background: var(--gold); color: var(--on-gold); border-radius: 999px; padding: 3px 12px; font-size: .74rem; font-weight: 800; margin-bottom: 8px; }
.ap-soon p { margin: 0; font-size: .95rem; font-weight: 600; color: var(--warm); }

/* 버튼 */
.ap-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 16px; padding: 14px 26px;
          font-weight: 800; font-size: .98rem; border: 0; cursor: pointer; text-decoration: none; }
.ap-btn-p { background: var(--blueink); color: #fff; }
body.dark-mode .ap-btn-p { color: #141416; }
.ap-btn-p:hover { filter: brightness(1.06); }
.ap-btn-g { background: var(--surf2); color: var(--ink); }

/* 스토어 */
.ap-stores { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.ap-store { display: flex; align-items: center; gap: 10px; background: var(--blueink); color: #fff; border-radius: 16px;
            padding: 12px 22px; font-weight: 800; min-width: 190px; justify-content: center; text-decoration: none; }
body.dark-mode .ap-store { color: #141416; }
.ap-store:hover { filter: brightness(1.06); }
.ap-store i { font-size: 1.5rem; }
.ap-store small { display: block; font-size: .68rem; font-weight: 700; opacity: .85; line-height: 1.2; text-align: start; }
.ap-store span { font-size: 1rem; line-height: 1.2; text-align: start; }
.ap-other { display: inline-block; font-size: .84rem; font-weight: 700; color: var(--sub); text-decoration: underline; margin-bottom: 16px; }

/* QR — 컴퓨터에서 보는 분이 휴대폰으로 건너가는 길.
   ⚠ QR 은 읽히는 것이 먼저라 어두운 화면에서도 «흰 바탕에 검정»을 지킨다 (토큰 예외) */
.ap-qr { display: flex; align-items: center; gap: 14px; justify-content: center; background: var(--card); border: 1px solid var(--line);
         border-radius: 18px; padding: 14px 18px; margin: 0 auto 18px; max-width: 340px; box-shadow: var(--chipsh); }
.ap-qr .im { width: 104px; height: 104px; flex: none; background: #fff; border-radius: 10px; padding: 6px; }
.ap-qr .im img { width: 100%; height: 100%; }
.ap-qr p { margin: 0; font-size: .84rem; font-weight: 700; color: var(--sub); text-align: start; }

/* 약속 칩 · 기기 연동 안내 */
.ap-proms { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.ap-proms span { border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; font-size: .78rem; font-weight: 700; color: var(--sub); }
.ap-dev { font-size: .84rem; font-weight: 600; color: var(--sub); background: var(--surf2); border-radius: 14px; padding: 11px 16px; display: inline-block; margin: 0; }

/* ⚠ display 를 정해 둔 요소는 hidden 속성만으로 숨겨지지 않는다 (2026-09-18 에 이 한 줄이 없어 출시 전인데 스토어 버튼이 보였다) */
.ap-soon[hidden], .ap-btns[hidden], .ap-stores[hidden], .ap-store[hidden], .ap-qr[hidden], .ap-proms[hidden], .ap-other[hidden], .ap-btn[hidden] { display: none; }