/*
 * 공개 레이아웃(.site-page-shell) 공통 스케일. 관리자(layouts.admin)·판매자센터(cpcenter)는
 * .site-page-shell 이 없어 제외되고, layouts.app 을 쓰는 판매자센터 화면은 data-site-scale-off 로 빠진다.
 *
 * 1) 글자 크기: 1024px 미만은 그대로, 1024px→1600px 사이에서 서서히 커져 1600px 이상에서
 *    본문 18px · 작은 글자 14~16px 에 도달한다 (13~14인치 노트북에서 갑자기 커지지 않도록).
 * 2) 본문 컨테이너(max-w-7xl) 폭을 상하단과 같은 1600px 로.
 * 3) 라이트 모드 정보 줄 회색(gray/slate-400)을 한 단계 진하게 — 흰 배경 명암비 2.6:1 → 4.7:1 이상.
 */

.site-page-shell:not(:has([data-site-scale-off])) .max-w-7xl { max-width: 1600px; }

html:not(.dark) .site-page-shell:not(:has([data-site-scale-off])) .text-gray-400 { color: #6b7280; }
html:not(.dark) .site-page-shell:not(:has([data-site-scale-off])) .text-slate-400 { color: #64748b; }

@media (min-width: 1024px) {
  .site-page-shell:not(:has([data-site-scale-off])) { font-size: clamp(16px, calc(16px + (100vw - 1024px) * 0.00347), 18px); --fs-xs: clamp(12px, calc(12px + (100vw - 1024px) * 0.00347), 14px); --fs-13: clamp(13px, calc(13px + (100vw - 1024px) * 0.00347), 15px); --fs-sm: clamp(14px, calc(14px + (100vw - 1024px) * 0.00347), 16px); --fs-base: clamp(16px, calc(16px + (100vw - 1024px) * 0.00347), 18px); --fs-lg: clamp(18px, calc(18px + (100vw - 1024px) * 0.00347), 20px); }
  .site-page-shell:not(:has([data-site-scale-off])) .text-xs { font-size: clamp(12px, calc(12px + (100vw - 1024px) * 0.00347), 14px); }
  .site-page-shell:not(:has([data-site-scale-off])) .text-xs:not([class*="leading-"]) { line-height: clamp(16px, calc(16px + (100vw - 1024px) * 0.00694), 20px); }
  .site-page-shell:not(:has([data-site-scale-off])) .text-sm { font-size: clamp(14px, calc(14px + (100vw - 1024px) * 0.00347), 16px); }
  .site-page-shell:not(:has([data-site-scale-off])) .text-sm:not([class*="leading-"]) { line-height: clamp(20px, calc(20px + (100vw - 1024px) * 0.00694), 24px); }
  .site-page-shell:not(:has([data-site-scale-off])) .text-base { font-size: clamp(16px, calc(16px + (100vw - 1024px) * 0.00347), 18px); }
  .site-page-shell:not(:has([data-site-scale-off])) .text-base:not([class*="leading-"]) { line-height: clamp(24px, calc(24px + (100vw - 1024px) * 0.01042), 30px); }
  .site-page-shell:not(:has([data-site-scale-off])) .text-lg { font-size: clamp(18px, calc(18px + (100vw - 1024px) * 0.00347), 20px); }
  .site-page-shell:not(:has([data-site-scale-off])) .text-lg:not([class*="leading-"]) { line-height: clamp(28px, calc(28px + (100vw - 1024px) * 0.00347), 30px); }
  .site-page-shell:not(:has([data-site-scale-off])) .text-xl { font-size: clamp(20px, calc(20px + (100vw - 1024px) * 0.00347), 22px); }
  .site-page-shell:not(:has([data-site-scale-off])) .text-xl:not([class*="leading-"]) { line-height: clamp(28px, calc(28px + (100vw - 1024px) * 0.00694), 32px); }
  .site-page-shell:not(:has([data-site-scale-off])) .text-\[10px\] { font-size: clamp(10px, calc(10px + (100vw - 1024px) * 0.00694), 14px); }
  .site-page-shell:not(:has([data-site-scale-off])) .text-\[11px\] { font-size: clamp(11px, calc(11px + (100vw - 1024px) * 0.00521), 14px); }
  .site-page-shell:not(:has([data-site-scale-off])) .text-\[12px\] { font-size: clamp(12px, calc(12px + (100vw - 1024px) * 0.00347), 14px); }
  .site-page-shell:not(:has([data-site-scale-off])) .text-\[13px\] { font-size: clamp(13px, calc(13px + (100vw - 1024px) * 0.00347), 15px); }
  .site-page-shell:not(:has([data-site-scale-off])) .text-\[14px\] { font-size: clamp(14px, calc(14px + (100vw - 1024px) * 0.00347), 16px); }
  .site-page-shell:not(:has([data-site-scale-off])) .text-\[15px\] { font-size: clamp(15px, calc(15px + (100vw - 1024px) * 0.00174), 16px); }
  .site-page-shell:not(:has([data-site-scale-off])) .text-\[16px\] { font-size: clamp(16px, calc(16px + (100vw - 1024px) * 0.00347), 18px); }
  .site-page-shell:not(:has([data-site-scale-off])) .sm\:text-xs { font-size: clamp(12px, calc(12px + (100vw - 1024px) * 0.00347), 14px); }
  .site-page-shell:not(:has([data-site-scale-off])) .sm\:text-xs:not([class*="leading-"]) { line-height: clamp(16px, calc(16px + (100vw - 1024px) * 0.00694), 20px); }
  .site-page-shell:not(:has([data-site-scale-off])) .sm\:text-sm { font-size: clamp(14px, calc(14px + (100vw - 1024px) * 0.00347), 16px); }
  .site-page-shell:not(:has([data-site-scale-off])) .sm\:text-sm:not([class*="leading-"]) { line-height: clamp(20px, calc(20px + (100vw - 1024px) * 0.00694), 24px); }
  .site-page-shell:not(:has([data-site-scale-off])) .sm\:text-base { font-size: clamp(16px, calc(16px + (100vw - 1024px) * 0.00347), 18px); }
  .site-page-shell:not(:has([data-site-scale-off])) .sm\:text-base:not([class*="leading-"]) { line-height: clamp(24px, calc(24px + (100vw - 1024px) * 0.01042), 30px); }
  .site-page-shell:not(:has([data-site-scale-off])) .sm\:text-lg { font-size: clamp(18px, calc(18px + (100vw - 1024px) * 0.00347), 20px); }
  .site-page-shell:not(:has([data-site-scale-off])) .sm\:text-lg:not([class*="leading-"]) { line-height: clamp(28px, calc(28px + (100vw - 1024px) * 0.00347), 30px); }
  .site-page-shell:not(:has([data-site-scale-off])) .sm\:text-xl { font-size: clamp(20px, calc(20px + (100vw - 1024px) * 0.00347), 22px); }
  .site-page-shell:not(:has([data-site-scale-off])) .sm\:text-xl:not([class*="leading-"]) { line-height: clamp(28px, calc(28px + (100vw - 1024px) * 0.00694), 32px); }
  .site-page-shell:not(:has([data-site-scale-off])) .sm\:text-\[10px\] { font-size: clamp(10px, calc(10px + (100vw - 1024px) * 0.00694), 14px); }
  .site-page-shell:not(:has([data-site-scale-off])) .sm\:text-\[11px\] { font-size: clamp(11px, calc(11px + (100vw - 1024px) * 0.00521), 14px); }
  .site-page-shell:not(:has([data-site-scale-off])) .sm\:text-\[12px\] { font-size: clamp(12px, calc(12px + (100vw - 1024px) * 0.00347), 14px); }
  .site-page-shell:not(:has([data-site-scale-off])) .sm\:text-\[13px\] { font-size: clamp(13px, calc(13px + (100vw - 1024px) * 0.00347), 15px); }
  .site-page-shell:not(:has([data-site-scale-off])) .sm\:text-\[14px\] { font-size: clamp(14px, calc(14px + (100vw - 1024px) * 0.00347), 16px); }
  .site-page-shell:not(:has([data-site-scale-off])) .sm\:text-\[15px\] { font-size: clamp(15px, calc(15px + (100vw - 1024px) * 0.00174), 16px); }
  .site-page-shell:not(:has([data-site-scale-off])) .sm\:text-\[16px\] { font-size: clamp(16px, calc(16px + (100vw - 1024px) * 0.00347), 18px); }
  .site-page-shell:not(:has([data-site-scale-off])) .md\:text-xs { font-size: clamp(12px, calc(12px + (100vw - 1024px) * 0.00347), 14px); }
  .site-page-shell:not(:has([data-site-scale-off])) .md\:text-xs:not([class*="leading-"]) { line-height: clamp(16px, calc(16px + (100vw - 1024px) * 0.00694), 20px); }
  .site-page-shell:not(:has([data-site-scale-off])) .md\:text-sm { font-size: clamp(14px, calc(14px + (100vw - 1024px) * 0.00347), 16px); }
  .site-page-shell:not(:has([data-site-scale-off])) .md\:text-sm:not([class*="leading-"]) { line-height: clamp(20px, calc(20px + (100vw - 1024px) * 0.00694), 24px); }
  .site-page-shell:not(:has([data-site-scale-off])) .md\:text-base { font-size: clamp(16px, calc(16px + (100vw - 1024px) * 0.00347), 18px); }
  .site-page-shell:not(:has([data-site-scale-off])) .md\:text-base:not([class*="leading-"]) { line-height: clamp(24px, calc(24px + (100vw - 1024px) * 0.01042), 30px); }
  .site-page-shell:not(:has([data-site-scale-off])) .md\:text-lg { font-size: clamp(18px, calc(18px + (100vw - 1024px) * 0.00347), 20px); }
  .site-page-shell:not(:has([data-site-scale-off])) .md\:text-lg:not([class*="leading-"]) { line-height: clamp(28px, calc(28px + (100vw - 1024px) * 0.00347), 30px); }
  .site-page-shell:not(:has([data-site-scale-off])) .md\:text-xl { font-size: clamp(20px, calc(20px + (100vw - 1024px) * 0.00347), 22px); }
  .site-page-shell:not(:has([data-site-scale-off])) .md\:text-xl:not([class*="leading-"]) { line-height: clamp(28px, calc(28px + (100vw - 1024px) * 0.00694), 32px); }
  .site-page-shell:not(:has([data-site-scale-off])) .md\:text-\[10px\] { font-size: clamp(10px, calc(10px + (100vw - 1024px) * 0.00694), 14px); }
  .site-page-shell:not(:has([data-site-scale-off])) .md\:text-\[11px\] { font-size: clamp(11px, calc(11px + (100vw - 1024px) * 0.00521), 14px); }
  .site-page-shell:not(:has([data-site-scale-off])) .md\:text-\[12px\] { font-size: clamp(12px, calc(12px + (100vw - 1024px) * 0.00347), 14px); }
  .site-page-shell:not(:has([data-site-scale-off])) .md\:text-\[13px\] { font-size: clamp(13px, calc(13px + (100vw - 1024px) * 0.00347), 15px); }
  .site-page-shell:not(:has([data-site-scale-off])) .md\:text-\[14px\] { font-size: clamp(14px, calc(14px + (100vw - 1024px) * 0.00347), 16px); }
  .site-page-shell:not(:has([data-site-scale-off])) .md\:text-\[15px\] { font-size: clamp(15px, calc(15px + (100vw - 1024px) * 0.00174), 16px); }
  .site-page-shell:not(:has([data-site-scale-off])) .md\:text-\[16px\] { font-size: clamp(16px, calc(16px + (100vw - 1024px) * 0.00347), 18px); }
  .site-page-shell:not(:has([data-site-scale-off])) .lg\:text-xs { font-size: clamp(12px, calc(12px + (100vw - 1024px) * 0.00347), 14px); }
  .site-page-shell:not(:has([data-site-scale-off])) .lg\:text-xs:not([class*="leading-"]) { line-height: clamp(16px, calc(16px + (100vw - 1024px) * 0.00694), 20px); }
  .site-page-shell:not(:has([data-site-scale-off])) .lg\:text-sm { font-size: clamp(14px, calc(14px + (100vw - 1024px) * 0.00347), 16px); }
  .site-page-shell:not(:has([data-site-scale-off])) .lg\:text-sm:not([class*="leading-"]) { line-height: clamp(20px, calc(20px + (100vw - 1024px) * 0.00694), 24px); }
  .site-page-shell:not(:has([data-site-scale-off])) .lg\:text-base { font-size: clamp(16px, calc(16px + (100vw - 1024px) * 0.00347), 18px); }
  .site-page-shell:not(:has([data-site-scale-off])) .lg\:text-base:not([class*="leading-"]) { line-height: clamp(24px, calc(24px + (100vw - 1024px) * 0.01042), 30px); }
  .site-page-shell:not(:has([data-site-scale-off])) .lg\:text-lg { font-size: clamp(18px, calc(18px + (100vw - 1024px) * 0.00347), 20px); }
  .site-page-shell:not(:has([data-site-scale-off])) .lg\:text-lg:not([class*="leading-"]) { line-height: clamp(28px, calc(28px + (100vw - 1024px) * 0.00347), 30px); }
  .site-page-shell:not(:has([data-site-scale-off])) .lg\:text-xl { font-size: clamp(20px, calc(20px + (100vw - 1024px) * 0.00347), 22px); }
  .site-page-shell:not(:has([data-site-scale-off])) .lg\:text-xl:not([class*="leading-"]) { line-height: clamp(28px, calc(28px + (100vw - 1024px) * 0.00694), 32px); }
  .site-page-shell:not(:has([data-site-scale-off])) .lg\:text-\[10px\] { font-size: clamp(10px, calc(10px + (100vw - 1024px) * 0.00694), 14px); }
  .site-page-shell:not(:has([data-site-scale-off])) .lg\:text-\[11px\] { font-size: clamp(11px, calc(11px + (100vw - 1024px) * 0.00521), 14px); }
  .site-page-shell:not(:has([data-site-scale-off])) .lg\:text-\[12px\] { font-size: clamp(12px, calc(12px + (100vw - 1024px) * 0.00347), 14px); }
  .site-page-shell:not(:has([data-site-scale-off])) .lg\:text-\[13px\] { font-size: clamp(13px, calc(13px + (100vw - 1024px) * 0.00347), 15px); }
  .site-page-shell:not(:has([data-site-scale-off])) .lg\:text-\[14px\] { font-size: clamp(14px, calc(14px + (100vw - 1024px) * 0.00347), 16px); }
  .site-page-shell:not(:has([data-site-scale-off])) .lg\:text-\[15px\] { font-size: clamp(15px, calc(15px + (100vw - 1024px) * 0.00174), 16px); }
  .site-page-shell:not(:has([data-site-scale-off])) .lg\:text-\[16px\] { font-size: clamp(16px, calc(16px + (100vw - 1024px) * 0.00347), 18px); }
  .site-page-shell:not(:has([data-site-scale-off])) .xl\:text-xs { font-size: clamp(12px, calc(12px + (100vw - 1024px) * 0.00347), 14px); }
  .site-page-shell:not(:has([data-site-scale-off])) .xl\:text-xs:not([class*="leading-"]) { line-height: clamp(16px, calc(16px + (100vw - 1024px) * 0.00694), 20px); }
  .site-page-shell:not(:has([data-site-scale-off])) .xl\:text-sm { font-size: clamp(14px, calc(14px + (100vw - 1024px) * 0.00347), 16px); }
  .site-page-shell:not(:has([data-site-scale-off])) .xl\:text-sm:not([class*="leading-"]) { line-height: clamp(20px, calc(20px + (100vw - 1024px) * 0.00694), 24px); }
  .site-page-shell:not(:has([data-site-scale-off])) .xl\:text-base { font-size: clamp(16px, calc(16px + (100vw - 1024px) * 0.00347), 18px); }
  .site-page-shell:not(:has([data-site-scale-off])) .xl\:text-base:not([class*="leading-"]) { line-height: clamp(24px, calc(24px + (100vw - 1024px) * 0.01042), 30px); }
  .site-page-shell:not(:has([data-site-scale-off])) .xl\:text-lg { font-size: clamp(18px, calc(18px + (100vw - 1024px) * 0.00347), 20px); }
  .site-page-shell:not(:has([data-site-scale-off])) .xl\:text-lg:not([class*="leading-"]) { line-height: clamp(28px, calc(28px + (100vw - 1024px) * 0.00347), 30px); }
  .site-page-shell:not(:has([data-site-scale-off])) .xl\:text-xl { font-size: clamp(20px, calc(20px + (100vw - 1024px) * 0.00347), 22px); }
  .site-page-shell:not(:has([data-site-scale-off])) .xl\:text-xl:not([class*="leading-"]) { line-height: clamp(28px, calc(28px + (100vw - 1024px) * 0.00694), 32px); }
  .site-page-shell:not(:has([data-site-scale-off])) .xl\:text-\[10px\] { font-size: clamp(10px, calc(10px + (100vw - 1024px) * 0.00694), 14px); }
  .site-page-shell:not(:has([data-site-scale-off])) .xl\:text-\[11px\] { font-size: clamp(11px, calc(11px + (100vw - 1024px) * 0.00521), 14px); }
  .site-page-shell:not(:has([data-site-scale-off])) .xl\:text-\[12px\] { font-size: clamp(12px, calc(12px + (100vw - 1024px) * 0.00347), 14px); }
  .site-page-shell:not(:has([data-site-scale-off])) .xl\:text-\[13px\] { font-size: clamp(13px, calc(13px + (100vw - 1024px) * 0.00347), 15px); }
  .site-page-shell:not(:has([data-site-scale-off])) .xl\:text-\[14px\] { font-size: clamp(14px, calc(14px + (100vw - 1024px) * 0.00347), 16px); }
  .site-page-shell:not(:has([data-site-scale-off])) .xl\:text-\[15px\] { font-size: clamp(15px, calc(15px + (100vw - 1024px) * 0.00174), 16px); }
  .site-page-shell:not(:has([data-site-scale-off])) .xl\:text-\[16px\] { font-size: clamp(16px, calc(16px + (100vw - 1024px) * 0.00347), 18px); }

  /* 홈·서브메인 목록 행: 원래 3rem(48px) 고정이라 커진 글자가 빠듯하다. 1600px에서 56px.
     텍스트형 4행 = 썸네일형/배지형 3행 총 높이를 유지한다. */
  .site-page-shell .home-hub-row.block { height: clamp(3rem, calc(3rem + (100vw - 1024px) * 0.01389), 3.5rem); min-height: clamp(3rem, calc(3rem + (100vw - 1024px) * 0.01389), 3.5rem); padding-block: clamp(0.25rem, calc(0.25rem + (100vw - 1024px) * 0.00347), 0.375rem); gap: clamp(0px, calc(0px + (100vw - 1024px) * 0.00347), 2px); }
  .site-page-shell .home-hub-row.block .text-sm.truncate { line-height: clamp(20px, calc(20px + (100vw - 1024px) * 0.00347), 22px); }
  .site-page-shell .home-hub-row:not(.block),
  .site-page-shell .home-hub-row.home-hub-row--stacked { height: clamp(4rem, calc(4rem + (100vw - 1024px) * 0.01853), 4.667rem); min-height: clamp(4rem, calc(4rem + (100vw - 1024px) * 0.01853), 4.667rem); padding-block: clamp(0.5rem, calc(0.5rem + (100vw - 1024px) * 0.00347), 0.625rem); }
  .site-page-shell .home-hub-thumb { width: clamp(3.5rem, calc(3.5rem + (100vw - 1024px) * 0.01389), 4rem); min-width: clamp(3.5rem, calc(3.5rem + (100vw - 1024px) * 0.01389), 4rem); max-width: clamp(3.5rem, calc(3.5rem + (100vw - 1024px) * 0.01389), 4rem); height: clamp(2.5rem, calc(2.5rem + (100vw - 1024px) * 0.01042), 2.875rem); min-height: clamp(2.5rem, calc(2.5rem + (100vw - 1024px) * 0.01042), 2.875rem); max-height: clamp(2.5rem, calc(2.5rem + (100vw - 1024px) * 0.01042), 2.875rem); flex-basis: clamp(2.5rem, calc(2.5rem + (100vw - 1024px) * 0.01042), 2.875rem); }
}

/* 4) 폰(640px 미만)에서는 양옆 여백 없이 가로로 꽉 차게. 태블릿 이상은 기존 여백 유지.
   - 공통: 본문 폭을 꽉 채우는 흰 카드(rounded + border/shadow)를 컨테이너 여백(1rem)만큼 넓히고 모서리·좌우 테두리를 없앤다.
     여러 칸 그리드(grid-cols-2 등)·가로 flex 안의 카드, 링크·버튼 같은 작은 요소는 제외.
   - 블로그: 자체 CSS라 목록 이미지·글 본문·댓글·쇼츠 레일을 따로 지정. */
@media (max-width: 639.98px) {
  /* 페이지 컨테이너의 바깥 여백만큼만 당겨 화면 끝에 맞춘다. 페이지마다 바깥 여백(px-2·px-4 등)이 달라
     고정 -1rem 을 쓰면 여백이 좁은 페이지(Q&A 상세 등)에서 카드가 화면 밖으로 밀려나 안쪽 여백까지 잘린다.
     100vw 는 데스크톱 스크롤바 폭이 섞여 가로 스크롤이 생기므로 쓰지 않는다. 여러 열 그리드 안의 카드는 제외. */
  .site-page-shell main .mx-auto.px-2 { --page-gutter: .5rem; }
  .site-page-shell main .mx-auto.px-3 { --page-gutter: .75rem; }
  .site-page-shell main .mx-auto.px-4 { --page-gutter: 1rem; }
  .site-page-shell main .mx-auto.px-5 { --page-gutter: 1.25rem; }
  .site-page-shell main .mx-auto.px-6 { --page-gutter: 1.5rem; }
  .site-page-shell main :is(.bg-white, .home-hub-card)[class*="rounded"]:is([class*=" border"], [class*="shadow"]):not(a, button, span, input, select, textarea, label, li, img, .blog-ui *):not(.grid:is([class^="grid-cols-"], [class*=" grid-cols-"]):not(.grid-cols-1) *):not(.flex:not(.flex-col) > *) {
    margin-inline: calc(var(--page-gutter, 1rem) * -1); border-radius: 0; border-left-width: 0; border-right-width: 0;
  }
  /* 화면 끝까지 늘린 카드는 바깥 여백이 사라지므로 안쪽 여백이 8~12px 인 칸은 16px 로 넓혀 글자가 화면 끝에 붙지 않게 한다. */
  .site-page-shell main :is(.bg-white, .home-hub-card)[class*="rounded"]:is([class*=" border"], [class*="shadow"]):not(a, button, span, input, select, textarea, label, li, img, .blog-ui *):not(.grid:is([class^="grid-cols-"], [class*=" grid-cols-"]):not(.grid-cols-1) *):not(.flex:not(.flex-col) > *):is(.p-2, .p-2\.5, .p-3, .px-2, .px-2\.5, .px-3),
  .site-page-shell main :is(.bg-white, .home-hub-card)[class*="rounded"]:is([class*=" border"], [class*="shadow"]):not(a, button, span, input, select, textarea, label, li, img, .blog-ui *):not(.grid:is([class^="grid-cols-"], [class*=" grid-cols-"]):not(.grid-cols-1) *):not(.flex:not(.flex-col) > *) > :is(.p-2, .p-2\.5, .p-3, .px-2, .px-2\.5, .px-3) { padding-inline: 1rem; }

  .blog-shot-grid .blog-shot-media,
  .blog-featured-main .blog-shot-media,
  .blog-article,
  .blog-related-shorts,
  .blog-cmt-card { margin-inline: calc(var(--blog-gutter) * -1); border-radius: 0; }
  .blog-related-shorts { padding-inline: var(--blog-gutter); }
  .blog-page .blog-shorts-track { margin-inline: calc(var(--blog-gutter) * -1); padding-inline: var(--blog-gutter); scroll-padding-inline: var(--blog-gutter); }
}