/* solutions/product.php 의 인라인 <style> 을 그대로 옮긴 것 (2026-08-20 CSP 강화 — style-src self).
   페이지 전용 규칙이라 다른 페이지에 싣지 않는다. 여기 규칙은 sub.css 보다 늦게 로드되어
   기존 인라인과 같은 캐스케이드 순서를 유지한다. */
/* ── 제품 상세 전용 ──────────────────────────────────────────────
       sub.css 의 라이트 문서 언어를 그대로 쓰고, 여기서는 배치만 정의한다.
       색·그림자·라운드는 전역 변수를 참조해 다른 서브페이지와 어긋나지 않게 한다. */
    .pd-top { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
              gap: clamp(28px, 4vw, 64px); align-items: center; }
    /* 제품컷은 반드시 라이트 패널 위에 — 다크 패널 위 검은 제품은 안 보인다(기각 이력).
       ★ 배경 그라디언트는 목록 카드(.pcard__plate)와 **같은 값**을 써야 한다.
         스튜디오 렌더의 자체 배경이 rgb(248,246,245)→(247,246,240) 인데, 패널을 더 진한
         베이지로 두면 이미지 사각형이 그대로 드러난다("배경하고 어색함, 네모" 지적 이력).
       ★ 이미지가 패널을 꽉 채우게 한다(여백을 주면 그 경계가 곧 네모다).
       ★ drop-shadow 를 덧붙이지 않는다 — 렌더에 이미 접지 그림자가 있어 이중이 되면
         제품이 떠 보인다("합성티" 기각 이력). */
    .pd-shot { background: linear-gradient(170deg, #ffffff 0%, #f3f2ef 100%);
               border: 1px solid var(--line); border-radius: 22px;
               overflow: hidden; aspect-ratio: 6 / 5; }
    .pd-shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
    /* ★ --brand · --brand-050 을 쓰면 안 된다 — 그 두 토큰은 cniadmin/admin.css 에만 있고
       공개 CSS 4종에는 --brand-300~700 만 있다. 공개 페이지에서 var(--brand-050) 은
       무효값이 되어 배경이 통째로 사라진다(실측: background-color rgba(0,0,0,0)).
       목록 카드(.pcard__cat)에서 이미 검증된 골드 계열 리터럴을 그대로 쓴다. */
    .pd-cat { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
              background: rgba(201,146,46,.1); border: 1px solid rgba(201,146,46,.3);
              color: #8A5E12; font-size: .78rem;
              font-weight: 700; letter-spacing: .02em; }
    .pd-name { margin: 14px 0 6px; font-family: var(--font-display); font-weight: 800;
               font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.18;
               letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
    .pd-model { margin: 0 0 14px; font-family: var(--font-en); font-size: .84rem;
                letter-spacing: .06em; color: var(--gray-500); }
    .pd-tag { margin: 0 0 12px; font-size: clamp(1rem, 1.5vw, 1.14rem); font-weight: 700;
              color: var(--ink); }
    .pd-lead { margin: 0 0 20px; font-size: 1rem; line-height: 1.8; color: var(--gray-700); }
    .pd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
    .pd-chip { padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px;
               background: #fff; font-size: .82rem; font-weight: 600; color: var(--gray-700); }
    .pd-chip--cert { border-color: rgba(168,116,26,.34); background: rgba(201,146,46,.08);
                     color: #8A5E12; }
    .pd-soon { display: inline-block; padding: 6px 14px; border-radius: 999px;
               background: var(--gray-50); border: 1px solid var(--line);
               color: var(--gray-600); font-size: .84rem; font-weight: 700; }

    /* 특징 — ThingsOne 은 01/02/03 을 달지만 CNI 에서는 금지다.
       번호 대신 골드 상단선으로 위계를 준다(박스카드도 금지라 테두리를 두르지 않는다). */
    .pd-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
                gap: clamp(22px, 3vw, 40px); }
    .pd-feat { border-top: 2px solid rgba(168,116,26,.5); padding-top: 16px; }
    .pd-feat h3 { margin: 0 0 8px; font-size: 1.06rem; font-weight: 800; color: var(--ink); }
    .pd-feat p { margin: 0; font-size: .95rem; line-height: 1.8; color: var(--gray-700); }

    /* 사양표 — 박스카드 대신 구분선 */
    .pd-spec { margin: 0; border-top: 1px solid var(--line); }
    .pd-spec > div { display: grid; grid-template-columns: minmax(120px, 200px) 1fr;
                     gap: 16px; padding: 15px 4px; border-bottom: 1px solid var(--line); }
    .pd-spec dt { margin: 0; font-size: .92rem; font-weight: 700; color: var(--gray-600); }
    .pd-spec dd { margin: 0; font-size: .97rem; line-height: 1.7; color: var(--ink); }
    .pd-note { margin: 16px 0 0; font-size: .86rem; color: var(--gray-500); }

    /* 관련 제품 — split-header 금지라 제목만 두고 목록 링크는 아래로 뺀다 */
    .pd-rel { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
              gap: clamp(16px, 2vw, 26px); }
    .pd-rel a { display: block; text-decoration: none; }
    /* 관련제품 썸네일도 같은 이유로 목록 카드와 동일한 판을 쓴다. */
    .pd-rel__shot { display: block; background: linear-gradient(170deg, #ffffff 0%, #f3f2ef 100%);
                    border: 1px solid var(--line); border-radius: 16px;
                    overflow: hidden; aspect-ratio: 6 / 5;
                    transition: border-color .18s var(--ease), transform .18s var(--ease); }
    .pd-rel a:hover .pd-rel__shot { border-color: rgba(168,116,26,.45); transform: translateY(-3px); }
    .pd-rel a:active .pd-rel__shot { transform: scale(.985); }
    .pd-rel__shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
    .pd-rel__n { margin: 11px 0 0; font-size: .95rem; font-weight: 700; color: var(--ink); }
    /* 목록 카드의 '사양 · 상세 보기' 링크와 같은 골드. var(--brand) 는 공개 CSS 에 없어
       본문 글자색으로 떨어지고, 밑줄도 없어 링크인지 알 수 없게 된다. */
    .pd-back { display: inline-flex; align-items: center; gap: 7px; margin-top: 26px;
               font-weight: 700; color: #8A5E12; text-decoration: none; }
    .pd-back:hover { text-decoration: underline; }

    /* 이전 · 다음 제품 — 박스카드가 금지라 테두리를 두르지 않고,
       위쪽 헤어라인 하나로만 구역을 나눈다(.pd-spec · .pd-feat 와 같은 어법).
       ★ --next 를 2번째 칸에 못박는 이유: 첫 제품은 '이전'이 없어 칸이 하나만 남는데,
         고정하지 않으면 '다음'이 왼쪽으로 끌려와 마지막 제품과 좌우가 뒤바뀐다. */
    .pd-nav { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 30px);
              margin-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line); }
    /* 형제 제품이 없는 제품(AI Home Kit)에서는 이 nav 가 .container 의 첫 자식이 된다.
       그때 margin-top 이 마진 상쇄로 섹션 padding 위에 얹혀 174px 짜리 빈 베이지 띠가
       생겼다(실측). 첫 자식일 때만 여백을 걷는다. */
    .pd-nav:first-child { margin-top: 0; }
    .pd-nav__a { display: flex; flex-direction: column; gap: 7px;
                 padding: 19px 2px 0; text-decoration: none; min-width: 0; }
    /* ★ align-items 로 오른쪽에 붙이지 않는다. flex-end 를 주면 자식이 fit-content 가 되어
       띄어쓰기 없는 긴 제품명(관리자가 바꿀 수 있다)이 칸 밖으로 삐져나온다.
       자식은 stretch 로 두고 text-align 으로만 정렬한다 — 좌우 동작도 대칭이 된다. */
    .pd-nav__a--next { grid-column: 2; text-align: right; }
    .pd-nav__a--next .pd-nav__dir { justify-content: flex-end; }
    /* 작은 골드 라벨은 이 파일이 이미 #8A5E12 를 쓴다(.pd-cat · .pd-chip--cert).
       #C9922E 는 16px 인 .pd-back 용이고, 13px 로 줄이면 tint 배경에서 대비가 2.28:1
       까지 떨어진다. 같은 크기대에는 같은 골드를 쓴다. */
    .pd-nav__dir { display: inline-flex; align-items: center; gap: 6px;
                   font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: #8A5E12; }
    /* ★ 명조(--font-display)를 쓰지 않는다. 바로 위 관련제품 캡션(.pd-rel__n)이 같은
       '제품명'인데 본문 고딕이라, 한 구역 안에서 같은 이름이 두 서체로 찍혔다.
       이 파일에서 --font-display 는 페이지 제목급(.pd-name)에만 쓴다. */
    .pd-nav__n { font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.08rem);
                 line-height: 1.34; color: var(--ink); }
    .pd-nav__a:hover .pd-nav__n { text-decoration: underline; }
    .pd-nav svg { flex: none; }

    /* ★ 860 → 700: 768·834 태블릿에서 1열로 떨어지면 사진 판이 712~751px 로 커지며
       제품명·모델명·구매 CTA 를 첫 화면 밖으로 밀어냈다(제품명 y=1184, CTA y=1363 — 실측).
       561~860 은 2열(판 약 360px)로 유지해 이름·CTA 를 폴드 위에 남긴다. */
    @media (max-width: 700px) {
      .pd-top { grid-template-columns: 1fr; }
      /* 1열에서도 사진이 화면을 통째로 먹지 않게 판 높이를 묶는다. */
      .pd-shot { max-height: min(46svh, 420px); }
      .pd-shot img { height: 100%; object-fit: contain; }
    }
    @media (max-width: 560px) {
      .pd-spec > div { grid-template-columns: 1fr; gap: 4px; }
      /* 관련 제품(최대 5장)이 1열 스택으로 1,700px를 차지했다 → 가로 스냅
         스크롤 한 줄로 만든다. 44% 폭이라 다음 카드가 반쯤 보여 넘길 거리가
         눈에 읽힌다. 스크롤바는 숨기되 트랙패드·터치 스크롤은 그대로 산다. */
      .pd-rel { display: flex; overflow-x: auto; gap: 12px;
                scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
                scrollbar-width: none; padding: 2px 2px 8px; }
      .pd-rel::-webkit-scrollbar { display: none; }
      .pd-rel a { flex: 0 0 44%; scroll-snap-align: start; }
      .pd-rel__n { font-size: .88rem; margin-top: 8px; }
      /* 좁은 화면에서 두 칸을 유지하면 제품명이 두세 줄로 쪼개진다 → 위아래로 쌓는다. */
      .pd-nav { grid-template-columns: 1fr; gap: 0; }
      .pd-nav__a { padding: 15px 0; }
      .pd-nav__a--next { grid-column: 1; text-align: left; }
      .pd-nav__a--next .pd-nav__dir { justify-content: flex-start; }
      /* ★ 구분선은 --next 가 아니라 '앞에 형제가 있을 때'에 건다. 방향으로 걸면
         이전이 없는 첫 제품에서 nav 자신의 헤어라인과 맞붙어 2px 로 겹친다(실측). */
      .pd-nav__a + .pd-nav__a { border-top: 1px solid var(--line); }
    }