/* ==========================================================================
   lo-premium.css — 브랜드 사이트 「고요한 네이비」 톤 (2026-09-23 사용자 결정)
   - 읽는 순서: style.css → lo-common.css → 페이지 전용 CSS → «이 파일이 맨 마지막»
   - 쓰는 곳: home-v2.html · products.html · company/index.html
   - ⚠ 토큰을 여기서 덮는다. lo-common.css(앱 정본)·약관·오류 페이지는 건드리지 않는다.
   - 뜻: 글은 줄이고 여백을 넓히고, 색은 네이비와 아이보리 둘로. 골드는 아주 가끔.
   ========================================================================== */

:root{
  --bg:#F7F5EF;          /* 종이에 가까운 아이보리 (전: #F6F6F4) */
  --pm-head:#0B2D68;     /* 제목 — 브랜드 네이비 */
  --sec-cream:#F1EDE3;   /* 번갈아 깔리는 면 */
  --sec-ink:#0B2D68;     /* 네이비 면 (전: #16294A) */
}
body.dark-mode{
  --bg:#08131F; --card:#0F2033; --line:#1C3149; --surf2:#142639;
  --band:#152A46; --info:#132238;
  --pm-head:#F4CC5B;     /* 어두울 때 제목은 골드 */
  --sec-cream:#0C1B2C; --sec-ink:#061020;
  --cardsh:0 10px 28px -8px rgba(0,0,0,.66), 0 2px 6px -2px rgba(0,0,0,.45);
}

/* 제목 — 네이비(밝게) · 골드(어둡게) */
h2{ color:var(--pm-head); }
body.dark-mode .sec-ink h2{ color:var(--gold); }

/* 제목 위 작은 라벨(「초개인화」·「데이터 육아」…)을 걷는다 — 한 화면의 글이 한 겹 줄어든다 */
.eyebrow{ display:none; }

/* 말풍선은 한 화면에 «두 개까지». 세 번째부터 감춘다 */
.cal ~ .cal ~ .cal{ display:none; }

/* 여백 — 구역 사이를 넓힌다 */
section{ padding:104px 0; }
@media (max-width:860px){ section{ padding:76px 0; } }

/* 본문은 조금 더 조용하게 */
.lede{ color:var(--sub); }

/* ── 제품 모음(products.html) — 사진이 주인공, 글은 이름과 한 줄만 ───────── */
/* 2026-09-23: 카드마다 딱지 2~3개 + 「판매 준비 중」 + 「자세히 보기」가 겹쳐
   눈에 걸리는 것이 셋이었다. 딱지를 하나로 줄이고(HTML), 「자세히 보기」는 지웠다
   (카드 전체가 이미 링크다). 나머지는 여기서 조용하게 만든다. */
.pp-head{ padding:84px 0 16px; }
.pp-head h1{ font-size:clamp(2.2rem,5vw,3.4rem); letter-spacing:-.045em; }
.pp-head p{ font-weight:500; color:var(--sub); }
.pp-jump{ margin-top:30px; }
.pp-jump a{ background:transparent; border-color:var(--line); font-weight:600; }

.pp-grp{ padding:70px 0; }
.pp-grp h2{ font-size:clamp(1.5rem,2.8vw,2.05rem); }
.pp-sub{ font-weight:500; }
.pp-grid{ gap:28px; margin-top:34px; }

.pp-card{ border-radius:var(--r-card,22px); overflow:hidden; box-shadow:none;
  border:1px solid var(--line); transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s; }
.pp-card:hover{ transform:translateY(-5px); box-shadow:var(--cardsh); }
.pp-im{ aspect-ratio:4/3; }
.pp-bd{ gap:10px; padding:24px 24px 26px; }
.pp-bd h3{ font-size:1.16rem; letter-spacing:-.03em; }
.pp-bd p{ font-size:.92rem; }

/* 딱지 — 알약 배경을 걷고 작은 글씨로 */
.pp-tags span{ background:transparent; padding:0; color:var(--sub); font-weight:600;
  font-size:.78rem; letter-spacing:.01em; }
.pp-tags span::before{ content:"— "; color:var(--line); }

/* 「판매 준비 중」 — 알약 대신 한 줄로 조용히 */
.pp-sale{ background:transparent; padding:0; color:var(--warm); font-size:.78rem; font-weight:700; }

/* ── 기업소개(company/) — 구역마다 같던 리듬을 덜어 낸다 ────────────────── */
/* 2026-09-23: 다섯 구역이 모두 「작은 라벨 → 제목 → 설명 → 카드 여러 장」이라
   읽는 사람이 어디를 봐야 할지 알기 어려웠다. 라벨을 걷고 여백을 넓혀
   제목과 숫자만 남긴다. */
.co-eb{ display:none; }
.co-sec{ padding:112px 0; }
.co-hero{ padding:88px 0 96px; }
.co-h2{ font-size:clamp(1.7rem,3.8vw,2.6rem); letter-spacing:-.04em; color:var(--pm-head); }
/* ⚠ 「숫자로 보는 리틀원」 구역은 바탕이 네이비다 — 제목을 네이비로 두면 글씨가 사라진다
   (2026-09-23 실측: 밝게에서 안 보였음) */
.co-num .co-h2{ color:#fff; }
body.dark-mode .co-num .co-h2{ color:var(--gold); }
.co-lede{ font-weight:500; }
.co-steps{ gap:24px; margin-top:44px; }
.co-stats{ gap:20px; margin-top:44px; }
.co-st{ padding:28px 24px; }
.co-st .l{ font-size:.8rem; font-weight:500; line-height:1.6; }
.co-creds{ margin-top:30px; }
@media (max-width:860px){
  .co-sec{ padding:78px 0; }
  .co-hero{ padding:64px 0 70px; }
}