/* about/workplace.php 의 인라인 <style> 을 그대로 옮긴 것 (2026-08-20 CSP 강화 — style-src self).
   페이지 전용 규칙이라 다른 페이지에 싣지 않는다. 여기 규칙은 sub.css 보다 늦게 로드되어
   기존 인라인과 같은 캐스케이드 순서를 유지한다. */
/* ── 근무환경 전용 ──────────────────────────────────────────────
       ★ 사진 원본이 288x192 뿐이다. 격자 한 칸을 그 근처로 잡아 확대를
         최소화한다. minmax 상한을 320 으로 둔 이유가 이것이다 —
         풀블리드나 2열로 키우면 1.5배 이상 늘어나 눈에 띄게 뭉개진다. */
    /* 4장짜리 구역은 4열, 3장짜리는 3열로 못박는다. auto-fill 로 두면 4장이
       3열+1장으로 떨어져 마지막 사진만 아랫줄에 혼자 남는다.
       1200px 컨테이너 기준 4열이면 한 칸 약 280px — 원본 288px 보다 살짝 작아
       확대가 없다(오히려 또렷하다). */
    .wp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
               gap: clamp(16px, 2vw, 26px); }
    .wp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* 3장 격자는 2열로 접으면 2+1 이 되어 오른쪽에 빈 칸이 남는다(실측 561~1024px).
       카드 최소폭 220px 이면 768px 에서도 3열이 서니 3장짜리는 560px 까지 3열 유지. */
    /* ★ 2열 전환을 1024 → 900 으로 내렸다. 사진 원본이 288px 뿐이라 1024px 화면에서
       2열(칸 452px)이 되면 1.57배 확대라 눈에 띄게 뭉갰다(1112px 4열은 235px = 0.82배로
       또렷). 901~1180 은 3열(칸 약 296px = 1.03배)로 둔다. */
    @media (min-width: 901px) and (max-width: 1180px) {
      .wp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 900px) {
      .wp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      /* --3 에도 .wp-grid 가 붙어 있어 위 2열 규칙이 이긴다 — 3열을 재선언해야 3장이 한 줄에 선다. */
      .wp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    .wp-fig { margin: 0; }
    /* 사진 판은 제품 카드(.pcard__plate)와 같은 어법 — 라운드·테두리·비율 고정. */
    .wp-fig__shot { display: block; aspect-ratio: 3 / 2; overflow: hidden;
                    border: 1px solid var(--line); border-radius: 16px;
                    background: var(--gray-50); }
    .wp-fig__shot img { width: 100%; height: 100%; object-fit: cover; display: block;
                        transition: transform .5s var(--ease); }
    .wp-fig:hover .wp-fig__shot img { transform: scale(1.04); }
    .wp-fig figcaption { margin: 11px 2px 0; font-size: .95rem; font-weight: 700; color: var(--ink); }
    .wp-fig p { margin: 4px 2px 0; font-size: .89rem; line-height: 1.7; color: var(--gray-600); }
    /* 모바일(2026-08-11): 1열 스택은 사진 7장에 1,121px — 캡션이 한 단어뿐이라
       2열 갤러리로 접어도 읽기에 손해가 없고 길이는 절반이 된다. */
    @media (max-width: 560px) {
      .wp-grid, .wp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
      /* font-size 는 mobile.css 활자 체계(.97rem)에 맡긴다 — 여기서 못박으면
               이 페이지만 캡션이 작아진다(로드 순서상 인라인이 이긴다). */
      .wp-fig figcaption { margin-top: 8px; }
      /* 3장짜리는 2+1 — 마지막 한 장이 반 칸에 혼자 남으니 전폭으로 마감한다. */
      .wp-grid--3 .wp-fig:last-child { grid-column: 1 / -1; }
    }
    /* 구역 라벨(OFFICE/WELFARE)이 이 페이지의 유일한 머리글이다. 맨눈 eyebrow(좌측
       장식선 + 글자)만 있으니 "AI 티가 난다"는 지적 — 제품 카테고리 칩과 같은
       골드 칩으로 올린다. 색은 premium 의 w-gold 가 이미 칠한다. */
    .section-head .eyebrow { display: inline-flex; align-items: center;
      padding: 7px 16px; border-radius: 999px;
      background: rgba(201,146,46,.1); border: 1px solid rgba(201,146,46,.3); }
    .section-head .eyebrow::before { content: none; }