/* ═══════════════════════════════════════════
   SITE v2 톤 — 홈(home-v2)과 같은 글꼴·색을 다른 페이지에 입힌다.
   내용과 레이아웃은 그대로 두고 글꼴, 바탕색, 헤더, 푸터만 맞춘다.
   각 페이지 CSS 뒤에 불러온다.
═══════════════════════════════════════════ */
:root {
  --background: #E8E8E4;
  --foreground: #191919;
  --v2-bg: #E8E8E4;
  --v2-ink: #191919;
  --v2-card: #F3F3EF;
  --v2-light: #EDEDE9;
  --v2-orange: #F97316;
  --v2-font: 'Wanted Sans Variable', 'Wanted Sans', 'Pretendard Variable', 'Pretendard', system-ui, sans-serif;
  --v2-tracking: -0.03em; /* 캔바 자간 -30 */
  --font-body: var(--v2-font);
  --font-heading: var(--v2-font);
  --tracking-tight: var(--v2-tracking);
  --tracking-tight-soft: var(--v2-tracking);
  --v2-gutter: clamp(20px, 4vw, 56px);
  --v2-max: 1320px;
}

/* 글꼴: 원티드 산스, 자간 -0.03em */
body,
body :where(h1, h2, h3, h4, h5, p, a, span, li, em, b, strong, button, input, select, textarea, label, summary, th, td, caption, dt, dd, small) {
  font-family: var(--v2-font);
  letter-spacing: var(--v2-tracking);
}

body { background: var(--v2-bg); color: var(--v2-ink); }

/* ── 상단 메뉴: 바탕 없이, 뒤가 어두우면 글자만 밝게 (nav-tone.js) ── */
.navbar,
.navbar.is-scrolled {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
/* 헤더 폭·여백은 홈(home-v2.css)과 같은 값 */
.navbar-inner {
  max-width: calc(var(--v2-max) + var(--v2-gutter) * 2);
  padding: 0 var(--v2-gutter);
}
.navbar-brand {
  font-weight: 800;
  font-size: 26px;
  line-height: normal;
  color: var(--v2-ink);
  transition: color 0.25s ease;
}
.nav-links li a { color: var(--v2-ink); font-size: 16px; font-weight: 600; padding: 0 18px; transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease; }
.nav-links li a:hover,
.nav-links li a[aria-current="page"] { color: var(--v2-orange); }
.nav-links li:last-child a {
  height: 44px;
  margin-left: 10px;
  padding: 0 20px;
  border: 2px solid var(--v2-ink);
  border-radius: 999px;
}
.nav-links li:last-child a:hover { background: var(--v2-ink); color: var(--v2-bg); }

/* 스크롤하면 유리처럼 흐리게. 뒤가 어두우면 어두운 유리 */
.navbar.is-scrolled {
  background: rgba(232, 232, 228, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
.navbar.is-scrolled.is-links-dark {
  background: rgba(25, 25, 25, 0.5);
}

.navbar.is-brand-dark .navbar-brand { color: var(--v2-light); }
.navbar.is-links-dark .nav-links li a { color: var(--v2-light); }
.navbar.is-links-dark .nav-links li a:hover { color: var(--v2-orange); }
.navbar.is-links-dark .nav-links li:last-child a { border-color: var(--v2-light); }
.navbar.is-links-dark .nav-links li:last-child a:hover { background: var(--v2-light); color: var(--v2-ink); }

/* ── 본문 섹션의 종이 질감은 걷는다 ── */
.order-section::after,
.reviews-section::after,
.portfolio-section::after,
.diff-section::after,
.cta-section::after { display: none; }
.page-hero-heading { font-weight: 700; }

/* 밝은 카드 바탕은 한 가지 색으로 */
.order-section,
.pf-hero { background: var(--v2-bg); }

/* ── 푸터: 홈과 같은 검정 + 큰 워드마크, 위 여백도 홈과 같게 ── */
.site-footer { background: var(--v2-ink); padding-top: clamp(48px, 6vw, 88px); }
#main-content > .site-footer { width: auto; margin: 88px calc(50% - 50vw) 0; }  /* 홈 푸터와 같은 계산 */
#main-content { overflow-x: clip; }  /* 화면 끝까지 넓힌 띠가 가로 스크롤을 만들지 않게 */
.contact-page-section + .site-footer,
#main-content > .contact-page-section ~ .site-footer { margin-top: 0; }
.footer-top-row { align-items: flex-end; margin-bottom: 28px; }
.footer-wordmark {
  font-size: clamp(36px, 9.4vw, 140px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: var(--v2-tracking);
  text-transform: none;
  color: var(--v2-light);
}

@media (max-width: 768px) {
  #main-content > .site-footer { margin-top: 56px; }
  .footer-top-row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer-social { margin-left: 0; align-self: flex-end; }

  /* 햄버거: 동그란 유리 버튼 (홈과 같음) */
  .nav-hamburger {
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.18));
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.8),
      inset 0 -1px 2px rgba(0, 0, 0, 0.08),
      0 6px 20px rgba(0, 0, 0, 0.16);
    transition: transform 0.2s ease;
  }
  .nav-hamburger:active { transform: scale(0.94); }
  .nav-hamburger span { width: 18px; height: 2px; background: var(--v2-ink); }
  .nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .mobile-nav {
    top: calc(var(--header-height-mobile) - 4px);
    left: 12px;
    right: 12px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    background: rgba(245, 245, 242, 0.62);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  }
  .mobile-nav a { padding: 14px 18px; border-radius: 16px; color: var(--v2-ink); font-weight: 600; }
}

/* ── 페이지별 바탕 정리 ── */
.contact-page-section { background: var(--v2-bg); }

/* 포트폴리오 상세: 종이색 → 회색, 헤더는 다른 페이지와 같게 */
:root { --doc-paper: #E8E8E4; --doc-ink: #191919; }
.case-page .navbar {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.case-page .navbar.is-scrolled {
  background: rgba(232, 232, 228, 0.55);
  border-bottom-color: transparent;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
.case-page .navbar.is-scrolled.is-links-dark { background: rgba(25, 25, 25, 0.5); }

/* ═══════════════════════════════════════════
   페이지 첫 화면(히어로): 검정 띠 + 노랑·주황·빨강 그레인 그라데이션
═══════════════════════════════════════════ */
.page-hero,
.portfolio-page .pf-hero,
.contact-page-section,
.corp-hero,
.doc-head {
  position: relative;
  isolation: isolate;
  background: var(--v2-ink);
  color: var(--v2-light);
}

/* 검정 위 그레인 그라데이션: 노랑 → 주황 → 빨강 빛이 거친 입자로 번진다 */
.page-hero::before,
.portfolio-page .pf-hero::before,
.contact-page-section::before,
.corp-hero::before,
.doc-head::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 1;
  background: linear-gradient(90deg, #FFA51A 0%, #FF7A1A 38%, #FF5424 68%, #FF3B2F 100%);
  -webkit-mask-image: radial-gradient(130% 95% at 50% 118%, #000 28%, rgba(0, 0, 0, 0.55) 52%, transparent 78%);
  mask-image: radial-gradient(130% 95% at 50% 118%, #000 28%, rgba(0, 0, 0, 0.55) 52%, transparent 78%);
}
/* 첫 화면 아래쪽에 내용이 많은 곳(사례 상세 정보표, 문의 폼)은 빛을 더 아래로 */
.contact-page-section::before,
.doc-head::before {
  -webkit-mask-image: radial-gradient(130% 70% at 50% 135%, #000 25%, rgba(0, 0, 0, 0.45) 50%, transparent 75%);
  mask-image: radial-gradient(130% 70% at 50% 135%, #000 25%, rgba(0, 0, 0, 0.45) 50%, transparent 75%);
}
.page-hero::after,
.portfolio-page .pf-hero::after,
.contact-page-section::after,
.corp-hero::after,
.doc-head::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.4 1.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 220px;
  opacity: 0.5;
}

/* 띠를 화면 끝까지 넓히기 (안쪽 내용 폭은 그대로) */
.doc-head {
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
}
.corp-hero {
  width: auto;
  margin-inline: 0;
  padding-inline: max(40px, calc((100% - 1440px) / 2));
}
@media (max-width: 1050px) { .corp-hero { padding-inline: 24px; } }
@media (max-width: 760px) { .corp-hero { padding-inline: 20px; } }
.corporate-page main { padding-top: 0; }
.corp-hero { padding-top: calc(var(--header-height) + 84px); }
.doc { padding-top: 0; }
.doc-head { padding-top: clamp(96px, 11vw, 132px); padding-bottom: clamp(40px, 5vw, 64px); margin-bottom: clamp(32px, 4vw, 48px); }
@media (max-width: 768px) {
  .corp-hero { padding-top: calc(var(--header-height-mobile) + 46px); }
}

/* 글자 색 */
.page-hero-heading,
.pf-title,
.contact-page-heading,
.corp-hero h1,
.doc-titlebar h1 { color: var(--v2-light); }
.corp-hero h1 span {
  color: #FF6A1A;
  background: linear-gradient(90deg, #FFB21A, #FF6A1A 55%, #FF3B2F);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-hero-sub,
.pf-sub,
.contact-page-desc,
.contact-agreement,
.corp-intro,
.corp-small,
.doc-head .doc-subtitle,
.doc-head .doc-breadcrumb,
.doc-head .doc-breadcrumb a,
.doc-head .doc-spec dt { color: rgba(237, 237, 233, 0.66); }
.doc-head .doc-spec dd,
.corp-text-link { color: var(--v2-light); }
.doc-spec,
.doc-spec-item { border-color: rgba(237, 237, 233, 0.16); }
.doc-breadcrumb a:hover { color: var(--v2-orange); }

/* 버튼: 검정 → 흰 테두리 (홈 히어로와 같음) */
.page-hero .hero-btn-primary,
.pf-hero .hero-btn-primary,
.corp-hero .corp-button,
.doc-head .doc-btn--solid,
.contact-page-section .contact-submit {
  background: transparent;
  border: 2px solid var(--v2-light);
  color: var(--v2-light);
  box-shadow: none;
}
.page-hero .hero-btn-primary:hover,
.pf-hero .hero-btn-primary:hover,
.corp-hero .corp-button:hover,
.doc-head .doc-btn--solid:hover,
.contact-page-section .contact-submit:hover { background: var(--v2-light); color: var(--v2-ink); }
.doc-head .doc-btn { border-color: rgba(237, 237, 233, 0.4); color: var(--v2-light); background: transparent; }
.doc-head .doc-btn:hover { border-color: var(--v2-light); background: rgba(237, 237, 233, 0.08); }

/* 문의 폼: 어두운 바탕 위 입력칸 */
.contact-page-section .form-field input,
.contact-page-section .form-field textarea { color: var(--v2-light); border-bottom-color: rgba(237, 237, 233, 0.28); }
.contact-page-section .form-field input:focus,
.contact-page-section .form-field textarea:focus { border-bottom-color: var(--v2-orange); }
.contact-page-section .form-label { color: rgba(237, 237, 233, 0.5); }
.contact-page-section .contact-agreement a { color: var(--v2-light); }
.contact-page-section .contact-status { color: var(--v2-light); }


/* 포트폴리오 목록 첫 화면 (portfolio.css 가 .portfolio-page 로 범위를 좁혀 둠)
   높이는 다른 페이지 첫 화면(.page-hero)과 같게, 내용은 세로 가운데 */
.portfolio-page .pf-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(480px, 60svh, 560px);
  padding: calc(var(--header-height) + 72px) 0 88px;
}
@media (max-width: 768px) {
  .portfolio-page .pf-hero { min-height: 440px; padding: calc(var(--header-height-mobile) + 52px) 0 64px; }
}
.portfolio-page .pf-title { color: var(--v2-light); }
.portfolio-page .pf-sub { color: rgba(237, 237, 233, 0.66); }

/* nav-tone.js 가 첫 색을 잡는 동안은 페이드 없이 */
.navbar.is-tone-init * { transition: none !important; }

/* 포트폴리오 유형 필터: 홈 버튼과 같은 알약 모양, 첫 화면과 사이 여백 */
.portfolio-page .portfolio-section { padding-top: clamp(40px, 5vw, 64px); }
.portfolio-page .portfolio-filter {
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 clamp(28px, 3vw, 40px);
}
.portfolio-page .portfolio-filter-btn {
  min-height: 48px;
  padding: 0 22px;
  border: 2px solid rgba(25, 25, 25, 0.18);
  border-radius: 999px;
  color: var(--v2-ink);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: var(--v2-tracking);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.portfolio-page .portfolio-filter-btn:hover { border-color: var(--v2-ink); color: var(--v2-ink); }
.portfolio-page .portfolio-filter-btn.is-active {
  border-color: var(--v2-ink);
  background: var(--v2-ink);
  color: var(--v2-light);
}
.portfolio-page .portfolio-filter-btn.is-active::after { display: none; }
.portfolio-page .portfolio-filter-btn:focus-visible { border-radius: 999px; }
@media (max-width: 768px) {
  /* 한 줄로 두고 옆으로 밀어서 본다 */
  .portfolio-page .portfolio-filter {
    flex-wrap: nowrap;
    gap: 8px;
    margin-inline: -20px;
    padding: 0 20px 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .portfolio-page .portfolio-filter::-webkit-scrollbar { display: none; }
  .portfolio-page .portfolio-filter-btn { flex-shrink: 0; min-height: 42px; padding: 0 16px; font-size: 15px; white-space: nowrap; }
}

/* 모바일에서만 줄바꿈 (홈과 같은 이름) */
.v2-br-mobile { display: none; }
@media (max-width: 768px) {
  .v2-br-mobile { display: inline; }
}
/* PC 첫 화면 제목이 한 줄에 들어가게 폭을 조금 넓힌다 */
@media (min-width: 769px) {
  .page-hero-inner { max-width: 860px; }
}

/* 서비스 소개: 제작 과정 아래 '알아두실 점' 한 장 */
.process-notes { grid-template-columns: 1fr; margin-top: 32px; }
/* 설명 없이 제목만 남은 준비물 카드는 낮게 */
.prep-item:not(:has(.prep-desc)) { min-height: 0; }
/* 카드가 3장인 묶음은 PC에서 한 줄에 3장 */
@media (min-width: 769px) {
  .prep-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 서비스 소개 '제작 준비물': 2×2 넓은 카드
   카드 위쪽은 그림(우리 실제 로고·작업 화면 등), 아래 한 줄은 번호 · 이름 · (선택) · 아이콘 */
.prep-layout { grid-template-columns: 1fr; gap: clamp(28px, 3vw, 40px); }
.prep-layout .prep-header { max-width: none; padding-top: 0; }
.prep-layout .prep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.prep-layout .prep-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 14px;
  min-height: 0;
  padding: 12px 12px 12px;
  border: 0;
  border-radius: 26px;
  background: var(--v2-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.prep-layout .prep-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -26px rgba(25, 25, 25, 0.4);
}
.prep-layout .prep-top { display: contents; }
.prep-layout .prep-visual { grid-column: 1 / -1; grid-row: 1; }
.prep-layout .prep-num { grid-column: 1; grid-row: 2; padding-left: 10px; }
.prep-layout .prep-title { grid-column: 2; grid-row: 2; }
.prep-layout .prep-tag { grid-column: 3; grid-row: 2; }
.prep-layout .prep-ico { grid-column: 4; grid-row: 2; }
.prep-num {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: rgba(25, 25, 25, 0.45);
}
.prep-tag {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(25, 25, 25, 0.07);
  font-size: 12px;
  font-weight: 700;
  color: rgba(25, 25, 25, 0.6);
}
.prep-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(25, 25, 25, 0.14);
  color: var(--v2-ink);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.prep-layout .prep-item:hover .prep-ico {
  border-color: transparent;
  background: linear-gradient(135deg, #FFA51A, #FF5424 60%, #FF3B2F);
  color: #fff;
}
.prep-layout .prep-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  word-break: keep-all;
}

/* 그림 영역 */
.prep-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  overflow: hidden;
  border-radius: 18px;
  background: #E2E2DD;
}
/* 01 문구: 색색의 업종 칩 + "어떤 일을 하시나요?" 입력칸과 깜빡이는 커서 */
.prep-visual--text { flex-direction: column; gap: 18px; }
.pv-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 440px;
}
.pv-chips span {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  animation: pv-float 4s ease-in-out infinite;
}
.pv-chips span:nth-child(1) { background: #FFE3C2; color: #B4530B; }
.pv-chips span:nth-child(2) { background: #DCEBFF; color: #1D4ED8; animation-delay: -0.7s; }
.pv-chips span:nth-child(3) { background: #E8E1FF; color: #5B3FD1; animation-delay: -1.4s; }
.pv-chips span:nth-child(4) { background: #D9F5E5; color: #15803D; animation-delay: -2.1s; }
.pv-chips span:nth-child(5) { background: #FFE0E6; color: #BE123C; animation-delay: -2.8s; }
.pv-chips span:nth-child(6) { background: #FFF3B8; color: #8A6A00; animation-delay: -3.5s; }
@keyframes pv-float { 50% { transform: translateY(-3px); } }
.pv-input {
  display: flex;
  align-items: center;
  width: min(80%, 300px);
  height: 46px;
  padding: 0 18px;
  border-radius: 14px;
  background: #FBFBF9;
  box-shadow: 0 12px 30px -18px rgba(25, 25, 25, 0.35), inset 0 0 0 1.5px rgba(255, 84, 36, 0.55);
  font-size: 15px;
  font-weight: 600;
  color: var(--v2-ink);
}
.pv-input span { position: relative; }
.pv-input span::after {
  content: '';
  position: absolute;
  top: 1px;
  left: calc(100% + 4px);
  width: 2px;
  height: 18px;
  background: #FF5424;
  animation: pv-blink 1.1s steps(1) infinite;
}
@keyframes pv-blink { 50% { opacity: 0; } }
/* 02 이미지·로고: 실제 고객사 로고 타일 */
.prep-visual--logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 18px;
}
.pv-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-radius: 12px;
  background: #FBFBF9;
}
.pv-logo img { width: auto; max-width: 62%; max-height: 34px; object-fit: contain; }
/* 03 페이지 구성: 메뉴 · 첫 화면 · 카드 3개 와이어프레임 */
.pv-wire {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 10px 1fr 34px;
  gap: 8px;
  width: min(72%, 300px);
  height: 150px;
  padding: 12px;
  border-radius: 14px;
  background: #FBFBF9;
  box-shadow: 0 12px 30px -18px rgba(25, 25, 25, 0.35);
}
.pv-wire b { border-radius: 6px; background: rgba(25, 25, 25, 0.1); }
.pv-wire .pv-nav { grid-column: 1 / -1; width: 40%; background: rgba(25, 25, 25, 0.8); border-radius: 3px; }
.pv-wire .pv-hero { grid-column: 1 / -1; background: linear-gradient(90deg, #FFA51A, #FF7A1A 45%, #FF3B2F); }
/* 04 레퍼런스: 실제 작업 화면 3장을 겹쳐 펼침 */
.prep-visual--refs img {
  position: absolute;
  width: 52%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 14px 30px -14px rgba(25, 25, 25, 0.45);
  transition: transform 0.4s ease;
}
.prep-visual--refs img:nth-child(1) { transform: translate(-38%, 6%) rotate(-7deg); }
.prep-visual--refs img:nth-child(2) { transform: translate(38%, 6%) rotate(7deg); }
.prep-visual--refs img:nth-child(3) { transform: translateY(-2%); z-index: 1; }
.prep-item:hover .prep-visual--refs img:nth-child(1) { transform: translate(-46%, 4%) rotate(-9deg); }
.prep-item:hover .prep-visual--refs img:nth-child(2) { transform: translate(46%, 4%) rotate(9deg); }

@media (max-width: 768px) {
  .prep-layout .prep-grid { grid-template-columns: 1fr; gap: 10px; }
  .prep-layout .prep-item { border-radius: 22px; padding: 10px; row-gap: 10px; }
  .prep-layout .prep-title { font-size: 16px; }
  .prep-visual { height: 160px; border-radius: 16px; }
  .pv-wire { height: 124px; grid-template-rows: 8px 1fr 26px; gap: 6px; padding: 10px; }
  .pv-chips { max-width: 196px; }  /* 3개씩 두 줄 */
  .pv-chips span { padding: 6px 12px; font-size: 13px; }
  .prep-visual--text { gap: 14px; }
  .prep-ico { width: 38px; height: 38px; }
  .prep-ico svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pv-input span::after,
  .pv-chips span { animation: none; }
}