/* ── 워크숍 카탈로그: 메인페이지 히어로·앱목록 전용 디자인 토큰 ──
   기존 site 는 Tailwind 유틸리티 위주라, 청사진 격자·치수선·스펙시트 행 등
   커스텀 그래픽 요소만 이 파일에서 별도 토큰 시스템으로 관리한다. */

:root {
  --ws-paper: #eef1ee;
  --ws-paper-line: #d7ddd8;
  --ws-surface: #ffffff;
  --ws-ink: #12181d;
  --ws-ink-muted: #5b6b63;
  --ws-accent: #c85a08;
  --ws-accent-ink: #ffffff;
  --ws-grid-line: rgba(31, 100, 120, 0.10);
  --ws-crosshair: rgba(31, 100, 120, 0.38);
}

.dark {
  --ws-paper: #0d151a;
  --ws-paper-line: #223038;
  --ws-surface: #131e24;
  --ws-ink: #eef3f0;
  --ws-ink-muted: #83958f;
  --ws-accent: #f3812a;
  --ws-accent-ink: #10161c;
  --ws-grid-line: rgba(95, 178, 201, 0.09);
  --ws-crosshair: rgba(95, 178, 201, 0.35);
}

.ws-mono,
.ws-eyebrow,
.ws-dimnum,
.ws-dimlabel,
.ws-chip,
.ws-part-code,
.ws-tag,
.ws-open-cta {
  font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
}

/* ── 헤더 ── */
.ws-header {
  background: var(--ws-paper);
  border-bottom: 1px solid var(--ws-paper-line);
}
.ws-header-bar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 24px;
  /* 우측: 사이트 공용 #editModeBtn(position:absolute, top/right:16px) 영역 침범 방지 */
  padding-right: 104px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 10px;
}
.ws-wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ws-ink);
}
.ws-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ws-ink-muted);
}

@media (max-width: 760px) {
  .ws-header-bar { padding-right: 24px; }
  .ws-nav-links { width: 100%; gap: 8px 16px; }
}
.ws-nav-links a {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.ws-nav-links a:hover,
.ws-nav-links a:focus-visible {
  color: var(--ws-accent);
  border-color: var(--ws-accent);
}

/* ── 히어로 ── */
.ws-hero {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 24px 32px;
  background:
    linear-gradient(var(--ws-grid-line) 1px, transparent 1px) 0 0 / 100% 40px,
    linear-gradient(90deg, var(--ws-grid-line) 1px, transparent 1px) 0 0 / 40px 100%,
    var(--ws-paper);
}
.ws-reg-mark { position: absolute; width: 20px; height: 20px; opacity: 0.9; }
.ws-reg-tl { top: 20px; left: 24px; }
.ws-reg-tr { top: 20px; right: 24px; }
.ws-reg-mark svg line, .ws-reg-mark svg circle { stroke: var(--ws-crosshair); }

.ws-eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ws-accent);
  font-weight: 600;
  margin-bottom: 14px;
}
.ws-headline {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  /* 문구가 18자로 길어져 60px 로는 컨테이너를 넘친다 — 한 줄에 들어가도록 상한을 낮춤 */
  font-size: clamp(24px, 3.9vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ws-ink);
  margin: 0 0 18px;
  text-wrap: balance;
  max-width: 34ch;
}
.ws-headline em { font-style: normal; color: var(--ws-accent); }

.ws-lede {
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  color: var(--ws-ink-muted);
  font-size: 16px;
  max-width: 52ch;
  margin: 0 0 36px;
}

/* ── 치수선 스탯바 ── */
.ws-dimbar {
  display: flex;
  border-top: 1px solid var(--ws-paper-line);
  border-bottom: 1px solid var(--ws-paper-line);
}
.ws-dimstat { flex: 1; padding: 14px 18px 14px 0; border-right: 1px solid var(--ws-paper-line); }
.ws-dimstat:last-child { border-right: none; }
.ws-dimnum { font-weight: 600; font-size: 26px; color: var(--ws-ink); font-variant-numeric: tabular-nums; }
.ws-dimlabel { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ws-ink-muted); margin-top: 2px; }

/* ── 도구 목록 ── */
.ws-tools {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 40px;
  background: var(--ws-paper);
}

.ws-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 32px 0 20px; }
.ws-chip {
  font-size: 12px;
  padding: 7px 12px;
  border: 1px solid var(--ws-paper-line);
  background: transparent;
  color: var(--ws-ink-muted);
  cursor: pointer;
  border-radius: 3px;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.ws-chip:hover { border-color: var(--ws-accent); color: var(--ws-ink); }
.ws-chip:focus-visible { outline: 2px solid var(--ws-accent); outline-offset: 2px; }
.ws-chip.active { background: var(--ws-accent); border-color: var(--ws-accent); color: var(--ws-accent-ink); }

.ws-sheet { border-top: 1px solid var(--ws-paper-line); }
.ws-row {
  display: grid;
  /* 부품번호 · 4:3 썸네일 · 본문 · 열기 */
  grid-template-columns: 64px 148px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 20px 4px;
  border-bottom: 1px solid var(--ws-paper-line);
  text-decoration: none;
  color: inherit;
  transition: background-color .12s ease;
}
.ws-row:hover, .ws-row:focus-visible { background: var(--ws-surface); }
.ws-row:focus-visible { outline: 2px solid var(--ws-accent); outline-offset: -2px; }
.ws-row-hidden { display: none; }

.ws-part-code { font-size: 11px; color: var(--ws-ink-muted); }
.ws-part-code b { display: block; color: var(--ws-ink); font-size: 15px; font-weight: 600; }

/* ── 도구 썸네일 : 4:3 고정 ── */
.ws-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--ws-paper-line);
  border-radius: 3px;
  background: var(--ws-surface);
  transition: border-color .12s ease, transform .2s ease;
}
/* 썸네일이 아직 없는 앱도 행 높이가 흔들리지 않도록 같은 크기의 빈 칸을 둔다 */
.ws-thumb-empty { background: var(--ws-surface); }
.ws-row:hover .ws-thumb,
.ws-row:focus-visible .ws-thumb { border-color: var(--ws-accent); transform: scale(1.02); }

.ws-row h3 {
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--ws-ink);
  margin: 0 0 4px;
}
.ws-row p {
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  margin: 0 0 10px;
  color: var(--ws-ink-muted);
  font-size: 13.5px;
  max-width: 54ch;
}
.ws-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ws-tag {
  font-size: 10.5px;
  color: var(--ws-ink-muted);
  border: 1px solid var(--ws-paper-line);
  padding: 2px 7px;
  border-radius: 3px;
}

.ws-open-cta {
  font-size: 12px;
  font-weight: 600;
  color: var(--ws-accent);
  white-space: nowrap;
  border-bottom: 1px solid var(--ws-accent);
  padding-bottom: 2px;
}

.ws-empty { display: none; padding: 40px 4px; color: var(--ws-ink-muted); font-size: 13px; }
.ws-empty.show { display: block; }

/* ── 바이브코딩 프로그램 배너 : 히어로와 도구목록 사이 영상 배너 ──
   배너 전체가 하나의 <a> 라 어디를 눌러도 커리큘럼으로 이동한다.
   영상은 8초 무한루프(음소거 자동재생), 텍스트는 좌측 어두운 영역 위에 얹는다. */
.ws-vbanner-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 8px;
  background: var(--ws-paper);
}
/* 헤더 바로 아래 최상단에 놓일 때 — 헤더와 붙지 않게 위쪽 여백을 준다 */
.ws-vbanner-top { padding-top: 20px; }
.ws-vbanner {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--ws-paper-line);
  border-radius: 4px;
  text-decoration: none;
  color: #ffffff;
  /* aspect-ratio 대신 min-height — 비율을 고정하면 좁은 화면에서 폭이 역산되어 컨테이너를 넘친다 */
  display: flex;
  align-items: center;
  min-height: clamp(260px, 26vw, 340px);
  background: #0d151a;
  transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease;
}
.ws-vbanner:hover,
.ws-vbanner:focus-visible {
  border-color: var(--ws-accent);
  box-shadow: 0 12px 32px -18px rgba(200, 90, 8, 0.75);
  transform: translateY(-2px);
}
.ws-vbanner:focus-visible { outline: 2px solid var(--ws-accent); outline-offset: 3px; }

/* 영상 : 배너를 가득 채우고 hover 시 아주 살짝 확대 — 클릭 유도용 반응감 */
.ws-vbanner-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .6s ease;
}
.ws-vbanner:hover .ws-vbanner-media { transform: scale(1.07); }

/* 좌측을 어둡게 깔아 흰 글씨 가독성 확보 — 우측은 영상이 그대로 보이게 둔다 */
.ws-vbanner-scrim {
  position: absolute;
  inset: 0;
  /* 카메라가 움직이며 좌측 피사체가 계속 바뀌므로(사람 얼굴이 올 때도 있음)
     글자가 놓이는 좌측 42%는 거의 불투명한 패널로 깔아 가독성을 항상 보장한다 */
  background:
    linear-gradient(90deg, rgba(8, 14, 18, 0.93) 0%, rgba(8, 14, 18, 0.89) 32%, rgba(8, 14, 18, 0.56) 50%, rgba(8, 14, 18, 0.12) 78%, rgba(8, 14, 18, 0) 100%),
    linear-gradient(0deg, rgba(8, 14, 18, 0.32) 0%, rgba(8, 14, 18, 0) 45%);
  transition: opacity .25s ease;
}
.ws-vbanner:hover .ws-vbanner-scrim { opacity: 0.82; }

/* 도면 격자 오버레이 — 사이트 히어로의 청사진 격자와 동일한 문법 */
.ws-vbanner-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 100% 40px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 40px 100%;
  pointer-events: none;
}

/* 스캔 라인 : 6초 주기로 좌→우 통과. 정지 화면처럼 보이지 않게 하는 최소 장치 */
.ws-vbanner-scan {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 140px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(243, 129, 42, 0) 0%, rgba(243, 129, 42, 0.16) 50%, rgba(243, 129, 42, 0) 100%);
  animation: ws-vb-scan 6s linear infinite;
}
@keyframes ws-vb-scan {
  0%   { transform: translateX(-160px); }
  100% { transform: translateX(1180px); }
}

/* 모서리 등록마크 : 평소 흐리게, hover 시 주황으로 살아나며 안쪽으로 조여든다 */
.ws-vbanner-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  pointer-events: none;
  transition: border-color .2s ease, transform .3s ease;
}
.ws-vbanner-corner.tl { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.ws-vbanner-corner.tr { top: 12px; right: 12px; border-left: none; border-bottom: none; }
.ws-vbanner-corner.bl { bottom: 12px; left: 12px; border-right: none; border-top: none; }
.ws-vbanner-corner.br { bottom: 12px; right: 12px; border-left: none; border-top: none; }
.ws-vbanner:hover .ws-vbanner-corner { border-color: var(--ws-accent); }
.ws-vbanner:hover .ws-vbanner-corner.tl { transform: translate(4px, 4px); }
.ws-vbanner:hover .ws-vbanner-corner.tr { transform: translate(-4px, 4px); }
.ws-vbanner:hover .ws-vbanner-corner.bl { transform: translate(4px, -4px); }
.ws-vbanner:hover .ws-vbanner-corner.br { transform: translate(-4px, -4px); }

/* 텍스트 블록 */
.ws-vbanner-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 32px;
  width: 100%;
  max-width: 46%;
}
.ws-vbanner-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ws-accent);
  font-weight: 600;
}
/* 점멸하는 녹화 표시 — 지금 열려 있는 과정이라는 신호 */
.ws-vbanner-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ws-accent);
  animation: ws-vb-blink 1.4s steps(1, end) infinite;
}
@keyframes ws-vb-blink {
  0%, 55%  { opacity: 1; }
  56%, 100% { opacity: 0.15; }
}
.ws-vbanner-title {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
.ws-vbanner-title em { font-style: normal; color: var(--ws-accent); }
.ws-vbanner-desc {
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  max-width: 34ch;
}

/* CTA : 버튼처럼 보이지만 실제 링크는 배너 전체다 */
.ws-vbanner-cta {
  position: relative;
  overflow: hidden;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 9px 18px;
  border: 1px solid var(--ws-accent);
  border-radius: 3px;
  background: transparent;
  font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ws-accent);
  transition: background-color .2s ease, color .2s ease;
}
.ws-vbanner:hover .ws-vbanner-cta {
  background: var(--ws-accent);
  color: #ffffff;
}
/* 화살표만 계속 미세하게 움직여 시선을 끈다 */
.ws-vbanner-cta i {
  font-style: normal;
  animation: ws-vb-nudge 1.6s ease-in-out infinite;
}
@keyframes ws-vb-nudge {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(3px, -3px); }
}
/* hover 시 CTA 위로 지나가는 광택 */
.ws-vbanner-cta::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  left: -60px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
}
.ws-vbanner:hover .ws-vbanner-cta::after { animation: ws-vb-shine .9s ease-out; }
@keyframes ws-vb-shine {
  0%   { left: -60px; }
  100% { left: 120%; }
}

/* 우측 하단 규격 표기 — 도면 느낌 유지용 */
.ws-vbanner-spec {
  position: absolute;
  right: 22px;
  bottom: 18px;
  font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-align: right;
  line-height: 1.7;
}

/* ── HHO 중고 판매 배너 변형 : 영상 대신 상세페이지(product/index.html) 히어로와 같은
   화염·청색 그라데이션 배경. scrim 없이도 바탕이 충분히 어두워 흰 글씨 가독성 확보 ── */
.ws-vbanner-bottom { padding-top: 8px; padding-bottom: 24px; }
.ws-vbanner-hho {
  background:
    radial-gradient(720px 380px at 82% 30%, rgba(255, 122, 47, 0.26), transparent 62%),
    radial-gradient(560px 320px at 8% 92%, rgba(43, 108, 255, 0.18), transparent 65%),
    linear-gradient(180deg, #0c121d 0%, #0a0f18 100%);
  /* 영상이 없어 배너가 과하게 크면 허전하다 — 높이를 한 단계 낮춘다 */
  min-height: clamp(220px, 21vw, 280px);
}

@media (max-width: 760px) {
  .ws-vbanner { min-height: 300px; }
  .ws-vbanner-body { max-width: 100%; padding: 22px 20px; }
  .ws-vbanner-scrim {
    background:
      linear-gradient(180deg, rgba(8, 14, 18, 0.55) 0%, rgba(8, 14, 18, 0.9) 55%, rgba(8, 14, 18, 0.96) 100%);
  }
  .ws-vbanner-spec { display: none; }
}

/* 움직임 최소화 설정 사용자 : 애니메이션 전부 정지 */
@media (prefers-reduced-motion: reduce) {
  .ws-vbanner-scan,
  .ws-vbanner-dot,
  .ws-vbanner-cta i { animation: none; }
  .ws-vbanner-media,
  .ws-vbanner-corner,
  .ws-vbanner { transition: none; }
}

/* 중간 폭 : 썸네일만 줄여 본문 폭을 지킨다 */
@media (max-width: 860px) {
  .ws-row { grid-template-columns: 56px 116px 1fr auto; gap: 14px; }
}
@media (max-width: 620px) {
  .ws-row { grid-template-columns: 1fr; }
  /* 1열로 접히면 썸네일이 화면 폭만큼 커지므로 상한을 둔다 */
  .ws-thumb { max-width: 240px; }
  .ws-part-code { display: flex; align-items: center; gap: 8px; }
  .ws-dimbar { flex-direction: column; }
  .ws-dimstat { border-right: none; border-bottom: 1px solid var(--ws-paper-line); padding: 12px 0; }
  .ws-dimstat:last-child { border-bottom: none; }
}