/* ==========================================================================
   lo-common.css — 새 디자인 페이지 공통 (home-v2.html · products.html)
   - 읽는 순서: css/style.css → css/lo-common.css → 페이지 전용 CSS
   - 여기에는 «두 페이지가 함께 쓰는 것»만 둔다: 색 토큰 · 머리 메뉴 · 바닥글 개발자 링크
   - 색·라운드·그림자는 앱(littleone-app) 정본 그대로. 다크는 사이트 규칙(body.dark-mode)
   - ⚠ 토큰을 바꾸면 두 페이지가 함께 바뀐다. 페이지 한쪽만 바꾸려면 그 페이지 CSS 에서 덮을 것
   ========================================================================== */

/* 색 토큰 (2026-09-21 home-v2.css 에서 옮겨 옴 — 값은 그대로, --on-gold 만 새로 더함) */
:root{
  --bg:#F6F6F4; --card:#FFFFFF; --ink:#1B1B19; --sub:#6A6862; --line:#CFCFC8;
  --edge:#848484; --surf2:#E8E8E4; --band:#E8EEFC; --info:#EDF2FE;
  --lo-accent:#2757D6; --blueink:#1E4A87; --gold:#F4CC5B; --on-gold:#3A2C00;
  --warmbg:#FAF2E2; --warm:#7E6029; --celebg1:#FFF3D6; --celebg2:#FFE7B8;
  --okbg:#EDF6EF; --okink:#2F7A4E; --warnbg:#FBEDEB; --warnink:#B83A3A;
  --feedbg:#FBE9DF; --sleepbg:#E2E8F8; --diaperbg:#DFEFE7;
  --feed-icon:#CA7045; --sleep-icon:#5B7FDB; --diaper-icon:#489570; --temp-icon:#E05D5D;
  --feed-ink:#A05837; --sleep-ink:#4966AF; --diaper-ink:#397659;
  --cardsh:0 8px 24px -6px rgba(27,27,25,.13), 0 2px 6px -2px rgba(27,27,25,.07);
  --chipsh:0 1px 2px rgba(27,27,25,.05);
  --sh-feed:0 12px 30px -10px rgba(202,112,69,.40), 0 2px 6px -2px rgba(27,27,25,.08);
  --r-tile:11px; --r-block:18px; --r-card:22px;
}
body.dark-mode{
  --bg:#141416; --card:#1F1F22; --ink:#ECEAE3; --sub:#9C9A92; --line:#33333A;
  --edge:#707070; --surf2:#26262A; --band:#202B45; --info:#1E2A44;
  --lo-accent:#6E8FEE; --blueink:#9DB6F5; --gold:#F4CC5B; --on-gold:#2A2000;
  --warmbg:#332B1B; --warm:#D8B778; --celebg1:#3A3016; --celebg2:#4A3D1B;
  --okbg:#21372B; --okink:#5FB588; --warnbg:#3A2321; --warnink:#E6706E;
  --feedbg:#3A2A22; --sleepbg:#232C44; --diaperbg:#1E3129;
  --feed-icon:#E8804F; --sleep-icon:#5B7FDB; --diaper-icon:#4FA37A; --temp-icon:#E05D5D;
  --feed-ink:#E8804F; --sleep-ink:#7291E0; --diaper-ink:#50A47B;
  --cardsh:0 10px 28px -8px rgba(0,0,0,.60), 0 2px 6px -2px rgba(0,0,0,.40);
  --chipsh:0 1px 2px rgba(0,0,0,.32);
  --sh-feed:0 14px 34px -12px rgba(232,128,79,.46), 0 2px 6px -2px rgba(0,0,0,.40);
  color-scheme:dark;
}

/* 페이지 스크롤을 «문서 자체»로 (2026-09-30)
   style.css 의 html,body{height:100%;overflow-x:hidden} 은 body 를 따로 스크롤되는 상자로 만든다.
   그러면 PC 에서 스크롤 막대가 머리 메뉴 «밑»으로 들어가, 홈(문서 스크롤)과 다른 페이지 사이에서 머리의 국기·버튼이 15px 씩 옆으로 움직여 보였다.
   휴대폰에서도 주소창이 스크롤 따라 접히지 않고, 제품 상세의 「맨 위로」가 듣지 않았다.
   clip 은 가로로 삐져나온 것은 그대로 잘라 주면서 스크롤 상자를 만들지 않는다(구형 브라우저는 예전 그대로) */
@supports (overflow-x: clip) {
    html, body { height: auto; overflow-x: clip; }
}
/* 머리 높이를 페이지마다 같게 — 홈만 본문 줄 간격(1.62)이 달라 머리가 1px 높았다 */
#main-header { line-height: 1.6; }

/* 머리 메뉴 — 앱 · 제품 · 기업소개 (B안, 2026-09-21)
   style.css 는 768px 이하에서 .main-nav 를 숨긴다. 새 페이지는 휴대폰에서도
   «앱 · 제품» 두 개는 보여야 제품 페이지로 갈 길이 생긴다. 기업소개는 바닥글에도 있어 휴대폰에서는 뺀다. */
.main-nav.lo-nav { gap: 32px; }
.main-nav.lo-nav a { white-space: nowrap; }   /* 두 줄로 접히면 머리가 74px 로 커졌음(베트남어 「Ứng dụng」) — 접는 대신 넘침으로 재서 로고 글자를 숨긴다 */
.main-nav.lo-nav a[aria-current="page"] { color: var(--primary-ink); box-shadow: inset 0 -2px 0 var(--accent); }
@media (max-width: 768px) {
    .main-nav.lo-nav { display: flex; gap: 16px; font-size: .92rem; margin-inline-start: auto; margin-inline-end: 4px; }
    .main-nav.lo-nav .lo-nav-co { display: none; }
}
/* 380px 이하 — 러시아어(Приложение · Продукция)가 320px 에서 15px 넘쳤다(2026-09-21 실측) */
@media (max-width: 380px) {
    .main-nav.lo-nav { gap: 10px; font-size: .82rem; }
    .header-controls { gap: 10px; }   /* 이 파일은 새 페이지에서만 읽으므로 옛 페이지 머리에는 영향 없음 */
}
@media (max-width: 340px) {
    .main-nav.lo-nav { gap: 8px; font-size: .78rem; }
}

/* 휴대폰 머리 정돈 — B안 (2026-09-29 사용자 결정)
   · 휴대폰 머리는 «로고 · 앱 · 제품 · 국기» 넷만. 어둡게는 기본이 휴대폰 화면 설정을 따르므로(system) 버튼 없이도 동작하고,
     직접 바꾸고 싶은 사람을 위해 같은 버튼을 바닥글에 둔다(.lo-theme-foot — js/common.js 가 머리 버튼과 이어 붙임)
   · 국기 옆 ▾ 는 뺀다(국기 자체가 누르는 곳)
   · 그래도 넘치면(러시아어 「Приложение」 · 휴대폰 글자 크게 설정) 「Littleone」 글자를 숨기고 마크만 —
     340px 이하는 CSS 로 늘, 그 밖은 js/common.js 가 실제로 넘치는지 재서 .lo-tight 를 붙임 */
@media (max-width: 768px) {
    .lo-nav ~ .header-controls #dark-mode-toggle,
    .lo-nav ~ .header-controls .lang-arrow { display: none; }
    .lo-nav ~ .header-controls #current-lang-flag { width: 22px; height: 22px; }
}
@media (max-width: 340px) { #main-header:has(.lo-nav) .header-wordmark { display: none; } }
#main-header.lo-tight .header-wordmark { display: none; }
.lo-theme-foot { display: none; }
@media (max-width: 768px) {
    .lo-theme-foot { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 14px auto 0;
        border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--sub); font-size: 1rem; cursor: pointer; }
    .lo-theme-foot-row { display: flex; justify-content: center; }
}

/* 스크립트가 그려 넣는 본문 — 다 그릴 때까지 보이지 않게(자리는 차지함) (2026-09-30)
   가려진 동안 움직이는 것은 «화면 흔들림(CLS)»으로 세지 않는다. 스크립트가 실패해도 2.5초 뒤에는 보이게 한다
   쓰는 곳: gallery-v2.html · download/app/index.html (각 페이지 스크립트가 DOMContentLoaded 끝에 class 를 뗌) */
.lo-pending, .lo-pending ~ #main-footer { visibility: hidden; animation: lo-show 0s 2.5s forwards; }   /* 짧은 페이지는 바닥글도 화면 안이라 함께 가림 */
@keyframes lo-show { to { visibility: visible; } }

/* 바닥글 「Developers」 — index.html 은 인라인 #EAAA00 이지만 새 페이지는 토큰으로 */
.footer-links .lo-dev { font-weight: 700; color: var(--accent); }