/* solutions/products.php 의 인라인 <style> 을 그대로 옮긴 것 (2026-08-20 CSP 강화 — style-src self).
   페이지 전용 규칙이라 다른 페이지에 싣지 않는다. 여기 규칙은 sub.css 보다 늦게 로드되어
   기존 인라인과 같은 캐스케이드 순서를 유지한다. */
/* pill bar under LNB */
    .pillbar { background: var(--bg); border-bottom: 1px solid var(--line); padding-block: clamp(18px, 2.6vw, 26px); }
    .pillbar .pills { margin: 0; }

    /* product card */
    .pcard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
    .pcard {
      position: relative;
      display: flex; flex-direction: column;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--r-card);
      overflow: hidden;
      transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
    }
    .pcard:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(10,20,36,.14); border-color: #EBC08C; }
    .sub-section--dark .pcard { border-color: rgba(235,192,140,.18); }
    .sub-section--dark .pcard:hover { box-shadow: 0 22px 48px rgba(0,0,0,.5); border-color: rgba(235,192,140,.45); }
    .pcard__plate {                       /* light card for ThingsOne studio renders (2026-07-15) */
      position: relative;
      aspect-ratio: 6 / 5;
      overflow: hidden;
      background: linear-gradient(170deg, #ffffff 0%, #f3f2ef 100%);
    }
    .pcard__plate img {
      width: 100%; height: 100%;
      object-fit: contain;                /* studio render is 6:5 → fills cleanly, no crop / no distortion */
      transition: transform .5s var(--ease);
    }
    .pcard:hover .pcard__plate img { transform: scale(1.05); }
    .pcard__body {
      display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
      flex: 1;
      padding: 20px 22px 22px;
      background: #fff;
    }
    .pcard__cat {
      display: inline-flex; padding: 4px 11px;
      border-radius: 999px;
      background: rgba(201,146,46,.1); border: 1px solid rgba(201,146,46,.3);
      font-family: var(--font-display);
      font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
      color: #8A5E12;
    }
    .pcard__name { font-size: 1.12rem; font-weight: 800; color: var(--ink); margin: 0; letter-spacing: -0.01em; }
    .pcard__desc { font-size: .9rem; line-height: 1.65; color: var(--gray-600); margin: 0; }
    /* spec table — key/value rows below the description */
    .pcard__spec { width: 100%; margin: 3px 0 0; }
    .pcard__spec-row {
      display: grid; grid-template-columns: minmax(84px, 38%) 1fr; gap: 12px;
      padding: 7px 0; border-top: 1px solid var(--line);
      font-size: .82rem; line-height: 1.5;
    }
    .pcard__spec-row:first-child { border-top: 0; padding-top: 2px; }
    .pcard__spec dt { margin: 0; color: var(--gray-500); font-weight: 600; }
    .pcard__spec dd { margin: 0; color: var(--ink); font-weight: 500; word-break: keep-all; }
    .pcard__link {
      display: inline-flex; align-items: center; gap: 6px;
      margin-top: auto; padding-top: 8px;
      font-size: .84rem; font-weight: 700;
      color: #8A5E12; text-decoration: none;
    }
    .pcard__link:hover { text-decoration: underline; }
    /* 네이버 스마트스토어 링크는 상세페이지의 .btn--naver 와 같은 네이버 그린으로 간다.
       금색으로 두면 바로 위 '사양 · 상세 보기'와 구분이 안 되고, 상세페이지 버튼과도
       색이 어긋난다. 카드 배경이 흰색이라 짙은 쪽(#0B7A3D, 5.4:1)을 쓴다. */
    .pcard__link--store { color: #0B7A3D; }
    .pcard__link svg { width: 13px; height: 13px; }
    /* 제목이 상세페이지 링크가 됐다. 브라우저 기본 링크 스타일(파란 글씨·밑줄)이
       나오지 않게 카드 안에서는 글자색을 그대로 물려받게 한다.
       ※ 이 주석에 앵커 태그를 글자로 적지 말 것 — 마크업 검사 도구가 열린 태그로 오인한다. */
    .pcard__name a { color: inherit; text-decoration: none; }
    .pcard__name a:hover { color: #8A5E12; }
    /* '사양 · 상세 보기'는 스토어 링크보다 먼저 나오므로 margin-top:auto 를 이쪽이 가져간다.
       (스토어 링크까지 auto 를 쓰면 둘 사이가 벌어진다.) */
    .pcard__link--spec { margin-top: auto; }
    .pcard__link--spec ~ .pcard__link { margin-top: 0; padding-top: 4px; }
    .pcard--soon .pcard__cat { background: var(--gray-50); border-color: var(--line); color: var(--gray-500); }

    /* .frow 안에 놓인 카드(AI Home Kit) 한 장만 .frow h2/h3·p 활자 규칙을 물려받아
       나머지 12장과 리듬이 어긋난다(제목 20.8px·간격 22px vs 17.92px·8px 실측)
       — 카드 원래 값으로 되돌린다.
       ★ 데스크톱 전용으로 가둔다: (0,2,0) 이라 폰에서 mobile.css 활자 체계를 이겨,
         이 카드만 설명 14.4px·제목 17.9px 로 다시 어긋났다(실측). */
    @media (min-width: 561px) {
      .frow .pcard__name { font-size: 1.12rem; margin: 0; }
      .frow .pcard__desc { font-size: .9rem; line-height: 1.65; margin: 0; }
    }
    @media (max-width: 560px) { .frow .pcard__name, .frow .pcard__desc { margin: 0; } }

    /* Two-card row (IP cameras): a modifier, not an inline style — an inline
       grid-template-columns outranks every media query below, so this grid used
       to stay in two 157px columns on a 360px phone and split "IP Camera T1". */
    .pcard-grid--duo { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin-inline: auto; }

    /* 1024 에서 2열이면 카드가 454px 로 늘어나 안쪽 여백만 남는다(1112 는 3열로 또렷) — 900 으로. */
    @media (max-width: 900px) { .pcard-grid { grid-template-columns: repeat(2, 1fr); } }
    /* Tracker 4장이 3열이라 마지막 한 장이 고아 행으로 남았다 — 컨테이너가 넓어지는
       1600 이상에서 4열로 세워 한 줄로 마감한다. */
    /* 1600px 이상에서 트래커만 4열로 벌리던 규칙 삭제(2026-08-13) — Pallet Location Tracker 를
       빼면서 트래커가 3종이 되어 넷째 칸이 빈 채로 남았다. 3열 고정이면 카드 3장이
       컨테이너를 꽉 채워 바로 위 세계지도(.trk-worldmap)와 폭이 정확히 맞는다. */
    @media (max-width: 560px)  {
      .pcard-grid, .pcard-grid--duo { grid-template-columns: 1fr; gap: 14px; }
      /* 모바일 압축(2026-08-11): 카드마다 사양표 5줄이 붙어 페이지가 13,000px를 넘었다.
         사양은 상세 페이지가 전담하고, 리스트는 사진·이름·설명·링크만으로 훑게 한다.
         플레이트도 6:5 → 16:10 으로 낮춰 한 화면에 카드가 온전히 들어온다. */
      .pcard__plate { aspect-ratio: 16 / 10; }
      .pcard__spec { display: none; }
      .pcard__body { padding: 16px 18px 18px; gap: 8px; }
      .pcard__link--spec { padding-top: 4px; }
    }
    @media (prefers-reduced-motion: reduce) { .pcard, .pcard__plate img { transition: none; } }

    /* Tracker: global finding-network world map banner */
    .trk-worldmap { position: relative; margin-top: clamp(24px, 3.5vw, 44px); border-radius: var(--r-card); overflow: hidden; border: 1px solid rgba(235,192,140,.18); background: #05080e; }
    .trk-worldmap img { display: block; width: 100%; height: auto; }
    .trk-worldmap figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(18px, 3.4vw, 40px); display: flex; flex-direction: column; gap: 8px; background: linear-gradient(0deg, rgba(5,8,14,.92) 8%, rgba(5,8,14,.45) 55%, rgba(5,8,14,0)); }
    .trk-worldmap figcaption strong { font-family: var(--font-display); font-size: clamp(19px, 2.4vw, 30px); color: #fff; letter-spacing: -.01em; }
    .trk-worldmap figcaption span { color: rgba(233,242,250,.82); max-width: 64ch; font-size: clamp(13px, 1.45vw, 15.5px); line-height: 1.6; }
    /* PC 한 줄 요청(2026-08-13) — 위 64ch 상한을 풀어야 한 줄이 된다.
       sub.css 의 .pc-1line 은 이 인라인 블록보다 앞서 로드돼 같은 특이도에서 진다.
       nowrap 은 쓰지 않는다 — 영문이 더 길어 넘치면 잘려서 안 보인다. */
    @media (min-width: 1200px) { .trk-worldmap figcaption span.pc-1line { max-width: none; } }