/* ═══════════════════════════════════════════════════════════════════════════
   ONECLIP App 페이지 전용 추가 스타일
   WEB #09 · WEB-ONECLIP-BLACK-PREMIUM-PRODUCTION-09 · 2026-09-13

   ⚠ 이 파일은 «/products/app/ 한 쪽에서만» 링크된다.
     그래서 여기 :root 를 다시 정의해도 다른 7쪽에는 닿지 않는다.
     운영 site.css 는 «한 글자도» 바꾸지 않았다 (#09 §14).

   ⚠ 회사 사이트 site.css 는 이미 검정 체계다 (--ground:#07090E).
     그래서 배경·본문·내비·푸터·CS 도크는 site.css 를 «그대로» 쓴다.
     이 파일은 ① 대표님이 승인하신 파랑 두 개  ② site.css 에 없는 5개 부품
     ③ 대형 이미지 편집 레이아웃  만 더한다.

   ⚠ 대표님 승인 팔레트 (#06 §00 · #08 재확인)
       BRAND ACCENT  #0085FD   검정(#07090E) 위 대비 5.5:1   ← 글자·테두리·강조
       FILLED BUTTON #0B6FD6   흰 글자 대비 4.93:1 (AA)      ← 버튼 채움
     site.css 원래 값은 --blue #4C9BFF / --btn-fill #1257D6 이다.
     둘을 통일할지는 대표님 판단 사항으로 보고서에 남겼다. 지금은 승인값을 따른다.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --blue:#0085FD;
  --blue-deep:#3DA5FF;
  --blue-line:rgba(0,133,253,.38);
  --blue-soft:rgba(0,133,253,.12);
  --btn-fill:#0B6FD6;
  --btn-fill-h:#0A63BE;
  --btn-on:#FFFFFF;
}

/* ── 히어로 : 글자 덩어리 ────────────────────────────────────────────────
   ⚠ #08 §01 — 캐노니컬 문장을 «화면에» 크게 둔다. alt 에 숨기지 않는다.
     이미지와 한 덩어리로 읽히지 않도록 «글자 구획»과 «이미지 구획»을 나눈다. */
.canon{
  font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:clamp(38px,7.2vw,80px);line-height:1.02;letter-spacing:-.035em;
  margin:0 0 24px;word-break:keep-all;
}
.canon-blue{color:var(--blue)}

/* ── 히어로 : 이미지 덩어리 ─────────────────────────────────────────── */
.visualband{padding:clamp(40px,6vw,72px) 0}

/* ── 대표님 Visual (W-*) ────────────────────────────────────────────────
   ⚠ 이미지 «안»에 제목·본문·8종 칩·CTA 가 이미 들어 있다 (#07 §10).
     그래서 옆에 같은 문장을 쓰지 않고, 이미지를 «편집 사진»처럼 크게 놓는다.
   ⚠ 이미지 안 글자가 작으므로 모바일에서는 화면 끝까지 넓힌다 (#08 §12·§18).
     이미지를 억지로 줄이지 않고 레이아웃을 바꾸는 쪽을 택했다.
   ⚠ width/height 를 HTML 에 명시해 두었다 → 레이아웃 흔들림(CLS) 0. */
.vfig{display:block;margin-inline:auto;max-width:640px}
.vfig img{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:20px;border:1px solid var(--line);background:var(--surface);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
@media (min-width:900px){
  .vfig{max-width:560px}
  .vfig.wide{max-width:760px}
}
@media (max-width:719px){
  /* ⚠ site.css 의 .wrap 은 calc(100% - 48px) 이고 좌우 여백이 화면폭에 따라 달라진다.
     그래서 «여백 값을 가정하지 않고» 뷰포트 기준으로 정확히 화면 끝까지 펼친다.
     (--pad 로 계산했더니 390px 에서 6px 가로 넘침이 생겼다. 실측으로 잡았다.) */
  .vfig{max-width:100vw;width:100vw;margin-inline:calc(50% - 50vw)}
  .vfig img{border-radius:0;border-left:0;border-right:0;box-shadow:none}
}

/* ── COMING 칩 ─────────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
.chips li{
  font-family:var(--mono);font-size:var(--t-cap);letter-spacing:.05em;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:7px 13px;
}

/* ── NOW OPEN 배지 (카드 안) ───────────────────────────────────────── */
.badge-open{
  font-family:var(--mono);font-size:var(--t-label);font-weight:600;letter-spacing:.12em;
  color:var(--blue);background:var(--blue-soft);border:1px solid var(--blue-line);
  border-radius:999px;padding:4px 9px;white-space:nowrap;
}

/* ── 세미 — 보조 캐릭터. 페이지의 주인공이 아니다 (#09 §06) ────────── */
.semi{
  display:flex;align-items:center;gap:16px;margin-top:30px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:14px 18px 14px 14px;
}
/* 세미 아바타는 «원형 배지» 그림이다 (public/semiface1.png 원본).
   그림 자체가 원이고 바깥은 투명이므로 사각 배경·모서리 둥글림을 주지 않는다.
   주면 검은 카드 위에 «사각 판»이 비쳐 보인다. 잎사귀가 원 위로 조금 솟아 있어
   얼굴 크롭(56px)보다 4px 키워 얼굴 크기를 같게 맞췄다. */
.semi img{width:60px;height:60px;border-radius:0;object-fit:contain;
  background:transparent;flex:0 0 auto}
.semi .sname{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;
  color:var(--blue);margin:0 0 3px}
.semi .sline{font-size:var(--t-cap);color:var(--ink-2);margin:0;line-height:1.6}

/* App intro: Semi artwork beside the introduction. */
.app-intro-grid{display:grid;grid-template-columns:minmax(0,780px) minmax(0,1fr);align-items:center;gap:48px}
.app-intro-copy{min-width:0}
.app-intro-semi{display:block;width:100%;max-width:360px;height:auto;object-fit:contain;justify-self:center}
@media(max-width:1000px){.app-intro-grid{grid-template-columns:1fr;max-width:780px;gap:32px}.app-intro-semi{max-width:280px}}

/* App business introduction: transparent approval mascot. */
.app-business-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;max-width:1100px;align-items:center;gap:64px}
.app-business-copy{min-width:0}
.app-business-semi{display:block;width:100%;max-width:280px;height:auto;justify-self:center}
@media(max-width:800px){.app-business-grid{grid-template-columns:minmax(0,1fr);gap:32px}.app-business-semi{max-width:220px}}

/* App booking introduction: transparent Semi mascot. */
.app-booking-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;max-width:1100px;align-items:center;gap:48px}
.app-booking-copy{min-width:0}
.app-booking-semi{display:block;width:100%;height:auto;justify-self:center}
@media(max-width:900px){.app-booking-grid{grid-template-columns:minmax(0,1fr);gap:32px}.app-booking-semi{max-width:300px}}