/* === PREMIUM THEME MODULE ===
   2026-08-24 — 필살기 5종(21~25)에서 검증한 프리미엄 컴포넌트를 독립 모듈로 분리.
   업종/템플릿 무관하게 어떤 사이트에도 얹을 수 있다 — 색은 그 사이트가 이미 정의한
   CSS 변수(--color-accent, --color-border, --radius-* 등)를 그대로 따라가고,
   변수가 없으면 중립값으로 폴백한다. 이 파일 자체에는 업종색을 하드코딩하지 않는다.

   적용 방법: <link rel="stylesheet" href="theme-premium.css"> 를 site style.css 뒤에
   추가하고, HTML 에서 아래 클래스를 필요한 만큼만 골라 쓴다(전부 쓸 필요 없음):
     .section-number, .manifesto, .bento-grid(+.bento--wide/.bento--tall),
     .faq-item(<details><summary>), .swatch-group/.swatch, table.compare-table,
     .reveal(스크롤 등장 애니메이션 — 이 파일 하단 JS 와 세트)
*/

/* [1] 넘버링 섹션 디바이더 */
.section-number {
  display: block; font-size: .8rem; font-weight: 700; letter-spacing: .08em;
  color: var(--color-accent, #999); margin-bottom: .5rem; font-variant-numeric: tabular-nums;
}

/* [2] 대형 타이포 유틸 — 기존 사이트에 얹을 때 헤드라인만 선택적으로 키우고 싶을 때 사용.
   (기존 .hero__title 을 강제로 덮지 않는다 — 얹는 사이트마다 크기를 다르게 쓸 수 있게
   별도 클래스로 둠. 강제로 통일하고 싶으면 style.css 쪽에서 .hero__title 에 이 값을 참조.) */
.text-display { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.08; letter-spacing: -0.01em; }
.manifesto {
  font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.4; font-weight: 500;
  max-width: 46rem; letter-spacing: -0.01em;
}

/* [3] bento grid */
.bento-grid {
  display: grid; gap: var(--spacing-md, 1.25rem);
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(160px, auto);
}
.bento-grid > * {
  grid-column: span 2; padding: var(--spacing-lg, 1.75rem);
  border-radius: var(--radius-lg, 16px);
  background: var(--color-white, var(--color-surface, #fff));
  border: 1px solid var(--color-border, #e5e5e5);
  color: #1a1a1a;
  display: flex; flex-direction: column; justify-content: center; gap: .5rem;
}
.bento-grid > .bento--wide { grid-column: span 4; }
.bento-grid > .bento--tall { grid-row: span 2; }
.bento-grid h3 { font-size: 1.15rem; margin: 0; }
.bento-grid p { margin: 0; color: var(--color-text-light, #666); font-size: .92rem; line-height: 1.55; }
@media (max-width: 720px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-grid > * { grid-column: span 2 !important; grid-row: span 1 !important; }
}

/* [4] FAQ 아코디언 — 네이티브 details/summary */
.faq-item { border-bottom: 1px solid var(--color-border, #e5e5e5); padding: 1rem 0; }
.faq-item summary {
  cursor: pointer; font-weight: 600; font-size: 1.02rem; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--color-accent, #999); flex: 0 0 auto; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: .75rem 0 0; color: var(--color-text-light, #666); line-height: 1.6; }

/* [5] 컬러 스와치(시각적 나열형) */
.swatch-group { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }
.swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--color-white, #fff); box-shadow: 0 0 0 1px var(--color-border, #ddd);
  flex: 0 0 auto;
}

/* [6] 톤 섹션 배경 */
.section--tinted { background: var(--color-light, var(--color-background, #f7f7f5)); color: #1a1a1a; }

/* [7] 비교표 */
table.compare-table { border: 1px solid var(--color-border, #e5e5e5); border-radius: var(--radius-md, 12px); overflow: hidden; }
table.compare-table .is-highlight { background: var(--color-light, #f7f7f5); font-weight: 700; color: #1a1a1a; }

/* [8] 히어로 풀블리드 이미지 */
.hero__image--full { margin-top: var(--spacing-xl, 2.5rem); }
.hero__image--full img {
  width: 100%; height: auto; max-height: 70vh; object-fit: cover;
  border-radius: var(--radius-lg, 16px); display: block;
}

/* [9] 접근성 포커스 */
*:focus-visible {
  outline: 2px solid var(--color-accent, var(--color-primary, #6d7cff));
  outline-offset: 2px;
}

/* [10] 스크롤 리빌 애니메이션 — .reveal 클래스가 붙은 요소는 기본적으로 살짝 아래+투명 상태로
   시작하고, 뷰포트에 들어오면 제자리로 올라오며 페이드인한다. JS(IntersectionObserver)가
   .is-visible 클래스를 붙이는 방식 — 아래 THEME_REVEAL_JS 참고.
   prefers-reduced-motion 사용자는 애니메이션 없이 바로 보이게(접근성). */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* [11] 접근성 skip-link — 평소 숨김, 키보드 포커스 시 노출 (12-site 배치와 동일 패턴) */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--color-accent, #333); color: #fff;
  padding: 10px 18px; border-radius: 0 0 8px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* [12] 인쇄 — 배경 영상/캔버스/장식은 인쇄에 의미 없으니 숨기고 본문만 남긴다 */
@media print {
  .nav, .hero__scroll, .hero canvas, .hero video, video, .hero__note { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .section, main { padding: 0 !important; }
}