/* =============================================
   프레스코카자 홈페이지 — 메인 스타일시트
   톤: 담백 / 정직 / 정보 중심
   ============================================= */

/* ----- 기본 변수 ----- */
:root {
  --color-primary: #1a3a5c;       /* 차분한 네이비 */
  --color-primary-dark: #0f2640;
  --color-accent: #2ba888;        /* 메인 포인트 - 로고 그린 */
  --color-accent-dark: #1f8568;
  --color-accent-blue: #1fa8e0;   /* 보조 포인트 - 로고 블루 */
  --color-text: #1f2937;
  --color-text-sub: #6b7280;
  --color-border: #e5e7eb;
  --color-bg: #ffffff;
  --color-bg-alt: #f8fafc;
  --color-bg-accent-soft: #effaf6; /* 그린 매우 옅게 */
  --color-bg-dark: #0f2640;

  --font-base: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --radius: 6px;
  --transition: 0.2s ease;

  --container-max: 1180px;
  --header-height: 72px;
}

/* ----- 리셋 ----- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { max-width: 100%; display: block; }

/* ----- 컨테이너 ----- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* =============================================
   헤더
   ============================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.logo-symbol {
  height: 24px;        /* 텍스트(20px)와 거의 같은 높이 */
  width: auto;
  display: block;
  flex-shrink: 0;
}
.logo-text {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}
.nav-main ul {
  display: flex;
  gap: 36px;
}
.nav-main a {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  transition: color var(--transition);
}
.nav-main a:hover { color: var(--color-accent); }
.btn-vendor {
  display: inline-block;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  transition: all var(--transition);
}
.btn-vendor:hover {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  transition: var(--transition);
}

/* =============================================
   Hero
   ============================================= */
/* =============================================
   HERO — 다크 럭셔리 스타일
   ============================================= */
.hero {
  padding: 100px 0 110px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-blue) 100%);
}

/* 다크 모드 Hero */
.hero-dark {
  padding: 120px 0 130px;
  background: #0a1f3a;
  border-bottom: none;
  color: #fff;
}
.hero-dark::before {
  display: none;
}
.hero-dark .hero-title {
  color: #ffffff;
  font-size: 48px;
  letter-spacing: -0.03em;
}
.hero-dark .hero-title .accent {
  color: #5DCAA5;
  background: linear-gradient(135deg, #5DCAA5 0%, #1FA8E0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-dark .hero-sub {
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.9;
}
.hero-dark .hero-badge {
  color: #5DCAA5;
  background: rgba(43, 168, 136, 0.12);
  border: 1px solid rgba(43, 168, 136, 0.32);
  letter-spacing: 0.18em;
  font-weight: 500;
}

/* 배경 글로우 효과 */
.hero-bg-effect {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 80% 50%, rgba(43, 168, 136, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 85% 30%, rgba(31, 168, 224, 0.15) 0%, transparent 55%),
    radial-gradient(ellipse 30% 25% at 70% 70%, rgba(31, 168, 224, 0.08) 0%, transparent 50%);
}
.hero-dark::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(43, 168, 136, 0.35) 50%, transparent 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero-badge {
  display: inline-block;
  padding: 8px 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-accent-dark);
  background: var(--color-bg-accent-soft);
  border-radius: 100px;
  margin-bottom: 32px;
  text-transform: uppercase;
}
.hero-title {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.025em;
  color: var(--color-primary);
  margin-bottom: 28px;
}
.hero-title .accent {
  color: var(--color-accent);
}
.hero-sub {
  font-size: 16px;
  color: var(--color-text-sub);
  line-height: 1.85;
  margin-bottom: 40px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

/* Hero 우측 - 럭셔리 오브 (회전 링) */
.hero-visual {
  position: relative;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-visual-orb {
  position: relative;
  width: 360px;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-logo-large {
  width: 200px;
  height: auto;
  max-width: 220px;
  object-fit: contain;
  position: relative;
  z-index: 5;
  filter: drop-shadow(0 0 40px rgba(43, 168, 136, 0.4));
}
.orb-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border-style: solid;
  pointer-events: none;
}
.orb-ring-1 {
  width: 280px;
  height: 280px;
  margin: -140px 0 0 -140px;
  border-width: 1px;
  border-color: rgba(93, 202, 165, 0.25);
  animation: spin-slow 30s linear infinite;
}
.orb-ring-1::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: #5DCAA5;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(93, 202, 165, 0.8);
}
.orb-ring-2 {
  width: 340px;
  height: 340px;
  margin: -170px 0 0 -170px;
  border-width: 1px;
  border-color: rgba(31, 168, 224, 0.18);
  border-style: dashed;
  animation: spin-reverse 50s linear infinite;
}
.orb-ring-3 {
  width: 220px;
  height: 220px;
  margin: -110px 0 0 -110px;
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.06);
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes spin-reverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* 스크롤 힌트 */
.hero-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 2;
}
.hero-scroll-hint span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: rgba(255, 255, 255, 0.5);
}
.scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 100%);
  animation: scroll-pulse 2s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.3); }
}

/* ----- 버튼 ----- */
.btn {
  display: inline-block;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--radius);
  transition: all var(--transition);
}
.btn-primary {
  background: var(--color-accent);
  color: #fff;
}
.btn-primary:hover { background: var(--color-accent-dark); }
.btn-secondary {
  background: #fff;
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover { border-color: var(--color-primary); }
.btn-light {
  background: #fff;
  color: var(--color-primary);
  margin-top: 16px;
}
.btn-light:hover { background: var(--color-bg-alt); }

/* 다크 Hero 전용 - 고스트 버튼 */
.btn-ghost-light {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 13px 28px;
}
.btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.hero-dark .btn-primary {
  padding: 14px 32px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 24px rgba(43, 168, 136, 0.35);
}
.hero-dark .btn-primary:hover {
  box-shadow: 0 12px 32px rgba(43, 168, 136, 0.5);
  transform: translateY(-1px);
}

/* =============================================
   섹션 공통
   ============================================= */
.section {
  padding: 90px 0;
}
.section-alt {
  background: var(--color-bg-alt);
}
.section-dark {
  background: #0a1f3a;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.section-dark::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(43, 168, 136, 0.35) 50%, transparent 100%);
}
.section-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 80% 50%, rgba(43, 168, 136, 0.12) 0%, transparent 60%);
}
.section-dark > .container {
  position: relative;
  z-index: 2;
}
.section-head {
  margin-bottom: 56px;
  text-align: left;
}
.section-label {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin-bottom: 12px;
}
.section-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  line-height: 1.3;
}
.section-title.light { color: #fff; }
.section-desc {
  margin-top: 12px;
  font-size: 16px;
  color: var(--color-text-sub);
}
.section-foot {
  margin-top: 32px;
}
.link-more {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-accent-dark);
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  transition: color var(--transition);
}
.link-more:hover { color: var(--color-accent); }

/* =============================================
   서비스 카드
   ============================================= */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-card {
  position: relative;
  padding: 40px 32px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: all var(--transition);
  overflow: hidden;
}
.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--color-accent);
  transition: width 0.3s ease;
}
.service-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}
.service-card:hover::before {
  width: 100%;
}
.service-num {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}
.service-card h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.service-card p {
  font-size: 15px;
  color: var(--color-text-sub);
  line-height: 1.7;
}

/* 럭셔리 카드 변형 — 메인 페이지 사업영역 */
.service-card-luxe {
  padding: 48px 36px 40px;
  background: #fff;
  border: 1px solid #e5e7eb;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card-luxe::before {
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-blue) 100%);
}
.service-card-luxe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 0%, rgba(43, 168, 136, 0.04) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.service-card-luxe:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -12px rgba(15, 38, 64, 0.12);
}
.service-card-luxe:hover::after {
  opacity: 1;
}
.service-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 28px;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.4s ease;
}
.service-icon::before {
  content: "";
  position: absolute;
  inset: -8px;
  background: var(--color-bg-accent-soft);
  border-radius: 50%;
  z-index: -1;
  opacity: 0.5;
  transition: all 0.4s ease;
}
.service-card-luxe:hover .service-icon {
  transform: scale(1.05);
}
.service-card-luxe:hover .service-icon::before {
  opacity: 1;
  inset: -12px;
}
.service-icon svg {
  width: 100%;
  height: 100%;
}
.service-card-luxe .service-num {
  position: absolute;
  top: 36px;
  right: 36px;
  font-size: 11px;
  letter-spacing: 0.18em;
  margin-bottom: 0;
  font-family: Georgia, serif;
  color: rgba(43, 168, 136, 0.45);
  font-weight: 600;
}
.service-card-luxe h3 {
  font-size: 22px;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.service-card-luxe p {
  position: relative;
  z-index: 1;
  font-size: 14.5px;
  line-height: 1.75;
}

/* 가운데 정렬 헤더 */
.section-head-center {
  text-align: center;
  margin-bottom: 56px;
}
.section-head-center .section-label {
  display: inline-block;
}

/* =============================================
   운영 환경
   ============================================= */
.ops-text {
  max-width: 760px;
}
.ops-text p {
  font-size: 17px;
  line-height: 1.85;
  color: var(--color-text);
  margin-bottom: 20px;
}
.ops-text p:last-child { margin-bottom: 0; }

/* 운영환경 비대칭 럭셔리 레이아웃 */
.operation-section {
  position: relative;
  overflow: hidden;
}
.operation-section::before {
  content: "OPERATION";
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center;
  font-size: 180px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: rgba(15, 38, 64, 0.025);
  pointer-events: none;
  white-space: nowrap;
  font-family: Georgia, serif;
}
.operation-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  align-items: start;
  position: relative;
  z-index: 2;
}
.operation-head {
  position: sticky;
  top: 100px;
}
.operation-head .section-label {
  margin-bottom: 16px;
}
.operation-head .section-title {
  margin-bottom: 28px;
  font-size: 36px;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.operation-divider {
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-blue) 100%);
  margin-bottom: 28px;
}
.operation-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.op-tag {
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-accent-dark);
  background: rgba(43, 168, 136, 0.08);
  border: 1px solid rgba(43, 168, 136, 0.18);
  border-radius: 100px;
}
.operation-body {
  position: relative;
  padding-left: 40px;
  border-left: 1px solid rgba(15, 38, 64, 0.08);
}
.operation-lead {
  font-size: 22px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--color-primary);
  margin-bottom: 32px;
  letter-spacing: -0.015em;
}
.operation-text {
  font-size: 16px;
  line-height: 1.95;
  color: var(--color-text-sub);
  margin: 0;
}
.operation-text::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: var(--color-accent);
  margin-bottom: 24px;
}

/* =============================================
   거래처 미리보기
   ============================================= */
.client-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}
.client-list li {
  padding: 28px 24px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-primary);
  text-align: center;
  background: #fff;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  transition: all var(--transition);
}
.client-list li:hover {
  background: var(--color-bg-accent-soft);
  color: var(--color-accent-dark);
}

/* 메인 페이지 거래처 미리보기 — 9개 로고 그리드 */
.clients-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}
.cp-item {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: all var(--transition);
}
.cp-item:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(43, 168, 136, 0.06);
}
.cp-item img {
  max-width: 75%;
  max-height: 50px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* 메인 거래처 그리드 — 회사별 로고 크기 미세 조정 (clients.html과 동일 비율) */
.cp-item:nth-child(6) img {  /* SPC */
  max-height: 65px;
  max-width: 85%;
}
.cp-item:nth-child(2) img {  /* 삼성웰스토리 */
  max-height: 42px;
  max-width: 64%;
}
.cp-item:nth-child(1) img {  /* 동원홈푸드 */
  max-height: 60px;
  max-width: 90%;
}
.cp-item:nth-child(9) img {  /* 현대그린푸드 */
  max-height: 55px;
  max-width: 80%;
}

/* =============================================
   연락처 (다크 섹션)
   ============================================= */
.contact-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.contact-desc {
  margin-top: 16px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
}
.contact-info {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 32px;
}
.contact-row {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  font-size: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.contact-row:last-of-type { border-bottom: none; }
.contact-label {
  flex-shrink: 0;
  width: 60px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}
.contact-row a:hover { color: var(--color-accent); }

/* =============================================
   푸터
   ============================================= */
.site-footer {
  background: #0a1929;
  color: rgba(255, 255, 255, 0.7);
  padding: 48px 0 32px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: start;
}
.footer-logo {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.footer-slogan {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}
.footer-info p {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 14px;
}
.footer-copy {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}

/* =============================================
   반응형 (태블릿 이하)
   ============================================= */
@media (max-width: 960px) {
  .nav-main, .header-cta { display: none; }
  .nav-toggle { display: flex; }

  .hero { padding: 70px 0 80px; }
  .hero-dark { padding: 80px 0 90px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-title { font-size: 32px; }
  .hero-dark .hero-title { font-size: 34px; }
  .hero-sub { font-size: 15px; }
  .hero-visual { height: 280px; }
  .hero-visual-orb { width: 260px; height: 260px; }
  .hero-logo-large { width: 150px; }
  .orb-ring-1 { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
  .orb-ring-2 { width: 240px; height: 240px; margin: -120px 0 0 -120px; }
  .orb-ring-3 { width: 160px; height: 160px; margin: -80px 0 0 -80px; }
  .hero-scroll-hint { display: none; }

  .section { padding: 64px 0; }
  .section-title { font-size: 26px; }
  .section-head-center { margin-bottom: 40px; }

  .service-grid { grid-template-columns: 1fr; }
  .service-card-luxe { padding: 40px 28px 32px; }
  .service-card-luxe .service-num { top: 28px; right: 28px; }

  .operation-section::before { display: none; }
  .operation-grid { grid-template-columns: 1fr; gap: 36px; }
  .operation-head { position: static; }
  .operation-head .section-title { font-size: 28px; }
  .operation-body { padding-left: 0; border-left: none; padding-top: 0; }
  .operation-lead { font-size: 18px; }

  .client-list { grid-template-columns: repeat(2, 1fr); }
  .clients-preview-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cp-item { height: 80px; padding: 12px 16px; }
  .cp-item img { max-height: 40px; }

  .contact-block { grid-template-columns: 1fr; gap: 32px; }
  .footer-inner { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 26px; }
  .hero-actions { flex-direction: column; }
  .btn { text-align: center; width: 100%; }
  .client-list { grid-template-columns: 1fr; }
  .clients-preview-grid { grid-template-columns: 1fr; }
  .hero-visual-inner { width: 260px; height: 260px; }
  .visual-circle { width: 200px; height: 200px; }
}

/* =============================================
   모바일 메뉴 (열렸을 때)
   ============================================= */
.nav-main.is-open {
  display: block;
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  padding: 16px 24px;
}
.nav-main.is-open ul {
  flex-direction: column;
  gap: 0;
}
.nav-main.is-open li {
  border-bottom: 1px solid var(--color-border);
}
.nav-main.is-open li:last-child { border-bottom: none; }
.nav-main.is-open a {
  display: block;
  padding: 14px 0;
}

/* =============================================
   현재 페이지 표시
   ============================================= */
.nav-main a.is-active {
  color: var(--color-accent);
  font-weight: 600;
}

/* =============================================
   페이지 헤더 (서브 페이지 공통)
   ============================================= */
.page-hero {
  padding: 80px 0 60px;
  background: linear-gradient(180deg, var(--color-bg-accent-soft) 0%, #ffffff 100%);
  border-bottom: 1px solid var(--color-border);
  position: relative;
}
.page-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--color-accent);
}
.page-hero-label {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin-bottom: 14px;
}
.page-hero-title {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-primary);
  margin-bottom: 16px;
}
.page-hero-sub {
  font-size: 17px;
  color: var(--color-text-sub);
  line-height: 1.7;
}

/* ----- 2단 구조 변형 (about) ----- */
.page-hero-split {
  padding: 80px 0 80px;
}
.page-hero-compact {
  padding: 60px 0 56px;  /* contact 페이지 — 약간 컴팩트 */
}

/* ===== 다크 럭셔리 페이지 헤더 (5개 페이지 공통) ===== */
.page-hero-dark {
  background: #0a1f3a;
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: 90px 0 100px;
}
.page-hero-dark::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(43, 168, 136, 0.35) 50%, transparent 100%);
}
.page-hero-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 60% at 90% 50%, rgba(43, 168, 136, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 35% 30% at 80% 30%, rgba(31, 168, 224, 0.10) 0%, transparent 55%);
}
.page-hero-dark > .container {
  position: relative;
  z-index: 2;
}
.page-hero-dark .section-label {
  color: #5DCAA5;
  letter-spacing: 0.18em;
  font-weight: 500;
}
.page-hero-dark .section-title {
  color: #fff;
  font-size: 42px;
  letter-spacing: -0.025em;
  margin-bottom: 0;
}
.page-hero-dark .page-hero-lead {
  color: rgba(255, 255, 255, 0.92);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.page-hero-dark .page-hero-meaning {
  color: rgba(255, 255, 255, 0.6);
}
.page-hero-dark .page-hero-divider {
  background: linear-gradient(90deg, #5DCAA5 0%, #1FA8E0 100%);
}
.page-hero-dark .hero-quote {
  color: #5DCAA5;
  border-left-color: #5DCAA5;
  font-weight: 500;
}
.page-hero-dark .page-hero-process {
  border-top-color: rgba(93, 202, 165, 0.18);
}
.page-hero-dark .page-hero-process-title {
  color: #fff;
}
.page-hero-dark .page-hero-process-desc {
  color: rgba(255, 255, 255, 0.55);
}

/* 다크 페이지 헤더 큰 워터마크 (Georgia 세리프) */
.page-hero-watermark {
  position: absolute;
  bottom: -30px;
  right: -20px;
  font-size: 200px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.025);
  pointer-events: none;
  white-space: nowrap;
  font-family: Georgia, serif;
  line-height: 0.9;
  z-index: 1;
}

.page-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 60px;
  align-items: start;
}
.page-hero-head .section-title {
  margin-bottom: 28px;
}
.hero-quote {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-accent-dark);
  line-height: 1.5;
  padding-left: 16px;
  border-left: 3px solid var(--color-accent);
}
.page-hero-body {
  padding-top: 4px;
}
.page-hero-lead {
  font-size: 17px;
  font-weight: 500;
  color: var(--color-primary);
  line-height: 1.7;
  margin-bottom: 0;
}
.page-hero-divider {
  width: 40px;
  height: 2px;
  background: var(--color-accent);
  margin: 24px 0;
}
.page-hero-meaning {
  font-size: 15px;
  color: var(--color-text-sub);
  line-height: 1.85;
}

/* ----- 페이지 헤더 안에 통합된 PROCESS (service.html) ----- */
.page-hero-process {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(43, 168, 136, 0.22);
  padding-left: 32px;
}
.page-hero-process-head {
  margin-bottom: 28px;
}
.page-hero-process-head .section-label {
  margin-bottom: 8px;
}
.page-hero-process-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  line-height: 1.3;
  margin-bottom: 6px;
}
.page-hero-process-desc {
  font-size: 13px;
  color: var(--color-text-sub);
  margin: 0;
}

/* =============================================
   ABOUT — CEO 인사말
   ============================================= */
.greeting-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 60px;
  align-items: start;
}
.greeting-head .section-title {
  margin-bottom: 28px;
}
.greeting-quote {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-accent-dark);
  line-height: 1.5;
  padding-left: 16px;
  border-left: 3px solid var(--color-accent);
}
.greeting-body p {
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text);
  margin-bottom: 22px;
}
.greeting-body strong {
  color: var(--color-primary);
  font-weight: 600;
}
.greeting-emphasis {
  padding: 24px 28px;
  background: var(--color-bg-accent-soft);
  border-radius: var(--radius);
  border-left: 3px solid var(--color-accent);
  font-weight: 500;
  color: var(--color-primary) !important;
}
.greeting-closing {
  font-size: 18px !important;
  font-weight: 600;
  color: var(--color-primary) !important;
  line-height: 1.6 !important;
  margin-top: 32px !important;
}
.greeting-sign {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  font-size: 15px;
  color: var(--color-text-sub);
  text-align: right;
}

/* =============================================
   ABOUT — 회사명 의미 블록
   ============================================= */
.naming-block {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px;
  align-items: center;
  max-width: 880px;
  margin: 0 auto;
}
.naming-symbol {
  width: 140px;
  height: 140px;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-blue) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.naming-symbol-text {
  font-size: 64px;
  font-weight: 700;
  color: #fff;
  font-family: 'Pretendard', sans-serif;
}
.naming-text .section-title {
  margin-bottom: 16px;
}
.naming-text p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-text);
}
.naming-text strong {
  color: var(--color-accent-dark);
  font-weight: 600;
}

/* =============================================
   ABOUT — 회사 정보 테이블
   ============================================= */
.info-table-wrap {
  overflow-x: auto;
}
.info-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--color-primary);
}
.info-table th,
.info-table td {
  padding: 18px 24px;
  text-align: left;
  font-size: 15px;
  line-height: 1.6;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.info-table th {
  width: 200px;
  background: var(--color-bg-alt);
  font-weight: 600;
  color: var(--color-primary);
}
.info-table td {
  color: var(--color-text);
}
.info-table td a {
  color: var(--color-text);
  border-bottom: 1px dotted var(--color-text-sub);
  transition: color var(--transition);
}
.info-table td a:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.info-en {
  display: inline-block;
  margin-left: 8px;
  font-size: 14px;
  color: var(--color-text-sub);
  font-weight: 400;
}

/* =============================================
   ABOUT — 오시는 길 (지도 + 분기점 인셋)
   ============================================= */
.section-head-with-action {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.map-btn-header {
  display: inline-block;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #03c75a;
  background: #fff;
  border: 1px solid #03c75a;
  border-radius: var(--radius);
  transition: all var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.map-btn-header:hover {
  background: #03c75a;
  color: #fff;
}

.map-wrap {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  margin-bottom: 24px;
}
.map-wrap > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: cover;
  object-position: center;
}

.map-info {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 8px 24px;
}

/* =============================================
   SERVICE — 핵심 업무 상세 (2단 좌우 구조)
   ============================================= */
.service-grid-detail {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 60px;
  align-items: start;
}
.service-detail-head {
  position: relative;
}
.service-num-large {
  display: block;
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-bg-accent-soft);
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.service-detail-head .section-label {
  margin-bottom: 8px;
}
.service-detail-head .section-title {
  margin-bottom: 24px;
}
.service-quote {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-accent-dark);
  line-height: 1.5;
  padding-left: 14px;
  border-left: 3px solid var(--color-accent);
}
.service-detail-body > p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-text);
  margin-bottom: 28px;
}
.service-points {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--color-border);
}
.service-points li {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-border);
}
.service-points li strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
}
.service-points li span {
  font-size: 14px;
  color: var(--color-text-sub);
  line-height: 1.7;
}

/* =============================================
   SERVICE — 업무 흐름 (5단계 가로 플로우)
   ============================================= */
.process-flow {
  display: grid;
  grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr;
  gap: 0;
  align-items: stretch;
}
.process-step {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  position: relative;
  transition: all var(--transition);
}
.process-step:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}
.process-step-last {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.process-step-last .process-num,
.process-step-last .process-name,
.process-step-last .process-desc {
  color: #fff;
}
.process-step-last .process-num {
  color: var(--color-accent);
}
.process-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.process-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.process-desc {
  font-size: 13px;
  color: var(--color-text-sub);
  line-height: 1.5;
  margin: 0;
}
.process-arrow {
  align-self: center;
  position: relative;
  height: 1px;
  background: var(--color-border);
}
.process-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid var(--color-border);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

/* =============================================
   PROCESS — 라이트 박스 (commit-box 너비)
   ============================================= */
.process-section {
  padding: 64px 0 56px;  /* 위아래 컴팩트 */
}
.commit-section {
  padding: 32px 0 90px;  /* 상단은 PROCESS 하단과 자연 연결 */
}
.process-box {
  background: #fafbfc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 56px 48px;
  position: relative;
  overflow: hidden;
}
.process-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-blue) 100%);
}
.process-box-head {
  text-align: center;
  margin-bottom: 48px;
}
.process-box-head .section-label {
  color: var(--color-accent);
  margin-bottom: 12px;
  display: inline-block;
}
.process-box-head .section-title {
  font-size: 28px;
  letter-spacing: -0.025em;
  color: var(--color-primary);
  margin-bottom: 12px;
}
.process-box-head .section-desc {
  color: var(--color-text-sub);
  font-size: 15px;
  margin-top: 0;
}

.process-orbs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: relative;
}
.orb-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 1;
  position: relative;
}
.orb-wrap {
  position: relative;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.orb-ring-out {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(43, 168, 136, 0.18);
  transition: all 0.4s ease;
}
.orb-circle {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(43, 168, 136, 0.32);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: all 0.4s ease;
}
.orb-num {
  font-size: 11px;
  color: var(--color-accent);
  font-family: Georgia, serif;
  letter-spacing: 0.18em;
  margin-bottom: 4px;
  font-weight: 600;
}
.orb-title {
  font-size: 17px;
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.orb-desc {
  text-align: center;
  font-size: 13px;
  color: var(--color-text-sub);
  line-height: 1.5;
  margin: 0;
  max-width: 130px;
}

.orb-step:hover .orb-ring-out {
  inset: -14px;
  border-color: rgba(43, 168, 136, 0.4);
}
.orb-step:hover .orb-circle {
  border-color: var(--color-accent);
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(43, 168, 136, 0.12);
}

.orb-step-last .orb-circle {
  background: linear-gradient(135deg, rgba(43, 168, 136, 0.08) 0%, rgba(31, 168, 224, 0.06) 100%);
  border: 2px solid var(--color-accent);
}
.orb-step-last .orb-ring-out {
  border-color: rgba(43, 168, 136, 0.4);
}
.orb-step-last .orb-title {
  color: var(--color-accent-dark);
}

.orb-arrow {
  color: rgba(43, 168, 136, 0.4);
  font-size: 18px;
  flex-shrink: 0;
  user-select: none;
  margin-top: -32px;  /* 동그라미 중심 라인에 맞춤 */
}

/* =============================================
   SERVICE — OUR COMMITMENT (PROCESS와 통일)
   ============================================= */
.commit-box {
  background: #fafbfc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 56px 48px;
  position: relative;
  overflow: hidden;
}
.commit-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-blue) 100%);
}
.commit-box-head {
  text-align: center;
  margin-bottom: 48px;
}
.commit-box-head .section-label {
  color: var(--color-accent);
  margin-bottom: 12px;
  display: inline-block;
}
.commit-box-head .section-title {
  font-size: 28px;
  letter-spacing: -0.025em;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.commit-box-head .section-desc {
  color: var(--color-text-sub);
  font-size: 15px;
  line-height: 1.8;
  max-width: 720px;
  margin: 0 auto;
}

/* 3 Pillars — 검증된 운영 / 견고한 파트너십 / 품질 약속 */
.commit-pillars {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  align-items: center;
  max-width: 920px;
  margin: 0 auto;
}
.pillar-item {
  text-align: center;
  padding: 16px 8px;
}
.pillar-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 18px;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.pillar-icon::before {
  content: "";
  position: absolute;
  inset: -8px;
  background: var(--color-bg-accent-soft);
  border-radius: 50%;
  z-index: -1;
  opacity: 0.5;
}
.pillar-icon svg {
  width: 100%;
  height: 100%;
}
.pillar-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.pillar-desc {
  font-size: 13px;
  color: var(--color-text-sub);
  line-height: 1.5;
}
.pillar-divider {
  width: 1px;
  height: 56px;
  background: var(--color-border);
  margin: 0 8px;
}

/* =============================================
   CLIENTS — 9개 주요 거래처 카드 그리드
   ============================================= */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.client-card {
  position: relative;
  padding: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.client-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-blue) 100%);
  transition: width 0.4s ease;
  z-index: 1;
}
.client-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -12px rgba(15, 38, 64, 0.12);
}
.client-card:hover::before {
  width: 100%;
}

/* 워드마크 로고 영역 */
.client-logo {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  background: #fafbfc;
  border-bottom: 1px solid var(--color-border);
  filter: grayscale(100%) opacity(0.55);
  transition: filter 0.3s ease;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.client-card:hover .client-logo {
  filter: grayscale(0%) opacity(1);
}
.client-logo .wm-strong {
  font-weight: 800;
  letter-spacing: -0.01em;
}
.client-logo .wm-light {
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* 실제 로고 이미지 사용 시 */
.client-logo-img img {
  max-width: 75%;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* 회사별 로고 크기 미세 조정 */
.client-spc .client-logo-img img {
  max-height: 68px;   /* 심볼+텍스트 정사각형 비율이라 더 크게 */
  max-width: 85%;
}
.client-samsung .client-logo-img img {
  max-height: 44px;   /* 85%로 축소 (52 × 0.85) */
  max-width: 64%;
}
.client-dongwon .client-logo-img img {
  max-height: 62px;   /* 20% 키우기 (52 × 1.2) */
  max-width: 90%;
}
.client-hyundai .client-logo-img img {
  max-height: 57px;   /* 10% 키우기 (52 × 1.1) */
  max-width: 80%;
}

/* 카드별 워드마크 색상 + 폰트 (호버 시 활성) */
.client-dongwon .client-logo { color: #003876; font-size: 22px; }
.client-dongwon .wm-strong { font-size: 26px; }
.client-dongwon .wm-light { font-size: 18px; margin-left: 4px; }

.client-samsung .client-logo { color: #1428A0; font-size: 18px; font-family: "Arial Black", sans-serif; }
.client-samsung .wm-strong { letter-spacing: 0.02em; }
.client-samsung .wm-light { font-style: italic; margin-left: 6px; font-size: 17px; font-family: Georgia, serif; }

.client-shinsegae .client-logo { color: #B91D2A; font-size: 19px; letter-spacing: 0.18em; font-family: Georgia, "Times New Roman", serif; }
.client-shinsegae .wm-strong { font-weight: 600; }

.client-cj .client-logo { color: #DA0014; font-size: 22px; }
.client-cj .wm-strong { font-size: 32px; font-style: italic; letter-spacing: -0.04em; }
.client-cj .wm-light { font-size: 18px; font-weight: 600; margin-left: 6px; letter-spacing: -0.01em; }

.client-ourhome .client-logo { color: #00A651; font-size: 22px; letter-spacing: 0.04em; }
.client-ourhome .wm-strong { font-weight: 800; }

.client-spc .client-logo { color: #DA291C; font-size: 32px; letter-spacing: 0.06em; font-family: Georgia, "Times New Roman", serif; }
.client-spc .wm-strong { font-weight: 800; }

.client-foodmerce .client-logo { color: #66A626; font-size: 22px; }
.client-foodmerce .wm-strong { font-style: italic; letter-spacing: -0.02em; }

.client-foodist .client-logo { color: #00A551; font-size: 24px; }
.client-foodist .wm-strong { letter-spacing: -0.02em; }

.client-hyundai .client-logo { color: #002C5F; font-size: 18px; }
.client-hyundai .wm-strong { font-family: Georgia, "Times New Roman", serif; letter-spacing: 0.04em; font-weight: 700; }
.client-hyundai .wm-light { margin-left: 6px; font-style: italic; font-size: 14px; }

/* 회사명 + 거점 영역 */
.client-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 24px 24px 8px;
  line-height: 1.3;
}
.client-centers {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-accent-dark);
  letter-spacing: 0.01em;
  margin: 0 24px 24px;
}

/* =============================================
   RECRUIT — 채용 페이지
   ============================================= */

/* 채용 공고 카드 목록 */
.jobs-list {
  display: grid;
  gap: 24px;
  margin-bottom: 64px;
}
.job-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.job-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-blue) 100%);
  transition: height 0.4s ease;
}
.job-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(15, 38, 64, 0.1);
}
.job-card:hover::before {
  height: 100%;
}
.job-card-head {
  padding: 32px 36px 26px;
  background: linear-gradient(135deg, #f8fdfb 0%, #ffffff 100%);
  border-bottom: 1px solid var(--color-border);
  position: relative;
}
.job-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.job-meta-item {
  font-size: 14px;
  color: var(--color-text);
}
.job-meta-item strong {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-accent-dark);
  margin-right: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.job-card-body {
  padding: 28px 36px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 36px;
}
.job-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.job-section-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.job-section-list li {
  position: relative;
  padding-left: 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 6px;
}
.job-section-list li::before {
  content: "·";
  position: absolute;
  left: 0;
  top: -2px;
  font-size: 18px;
  color: var(--color-accent);
}

/* 복리후생 */
.benefits-block {
  padding: 32px 36px;
  background: var(--color-bg-accent-soft);
  border-radius: var(--radius);
}
.benefits-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 16px;
}
.benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px 24px;
}
.benefits-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.6;
}
.benefits-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}

/* 채용 미진행 안내 */
.recruit-empty {
  text-align: center;
  padding: 16px 32px 24px;
  max-width: 600px;
  margin: 0 auto;
}
.recruit-inactive-section {
  padding: 48px 0 56px;  /* 기본 90px → 축소: 다음 섹션 살짝 보이도록 */
}
.recruit-empty-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  color: var(--color-accent);
  opacity: 0.6;
}
.recruit-empty-icon svg {
  width: 100%;
  height: 100%;
}
.recruit-empty-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.recruit-empty-desc {
  font-size: 15px;
  color: var(--color-text-sub);
  line-height: 1.7;
  margin: 0;
}

/* 지원 폼 */
.apply-form {
  max-width: 720px;
  margin: 0 auto;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
  margin-bottom: 20px;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-row-full {
  grid-column: 1 / -1;
  margin-bottom: 20px;
}
.form-row label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}
.form-row label .req {
  color: #dc2626;
  margin-left: 2px;
}
.form-row label .hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-sub);
  margin-left: 6px;
}
.form-row input[type="text"],
.form-row input[type="tel"],
.form-row input[type="email"],
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
  color: var(--color-primary);
  transition: border-color var(--transition);
  box-sizing: border-box;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(43, 168, 136, 0.12);
}
.form-row textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}
.form-row input[type="file"] {
  padding: 10px 14px;
  font-size: 14px;
  background: #fafbfc;
  cursor: pointer;
}

/* 동의 체크박스 */
.form-agree {
  background: #fafbfc;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
}
.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-accent);
}
.privacy-details {
  margin-top: 12px;
  font-size: 13px;
}
.privacy-details summary {
  cursor: pointer;
  color: var(--color-accent-dark);
  font-weight: 500;
  padding: 4px 0;
  user-select: none;
}
.privacy-content {
  margin-top: 12px;
  padding: 14px 16px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid var(--color-border);
}
.privacy-content p {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--color-text-sub);
  line-height: 1.6;
}
.privacy-content p:last-child {
  margin-bottom: 0;
}
.privacy-content strong {
  color: var(--color-primary);
}

/* 제출 버튼 / 결과 */
.form-actions {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.form-actions .btn-primary {
  min-width: 200px;
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 600;
}
.form-actions .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.form-result {
  margin-top: 24px;
  padding: 16px 20px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
}
.form-result-success {
  background: #effaf6;
  border: 1px solid var(--color-accent);
  color: var(--color-accent-dark);
}
.form-result-error {
  background: #fef2f2;
  border: 1px solid #dc2626;
  color: #b91c1c;
}

/* =============================================
   CONTACT — 문의 페이지
   ============================================= */

/* 페이지 헤더 + 연락처 카드 섹션 컴팩트화
   (방문자가 페이지 진입 시 INQUIRY 영역이 하단에 살짝 보이도록) */
.section-contact-cards {
  padding: 32px 0 36px;  /* 기본 90px 90px → 축소 */
}

/* 연락처 카드 (3단) */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.contact-card {
  position: relative;
  display: block;
  padding: 44px 32px 36px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.contact-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-blue) 100%);
  transition: width 0.4s ease;
}
.contact-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -12px rgba(15, 38, 64, 0.1);
}
.contact-card:hover::before {
  width: 100%;
}
.contact-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 22px;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.4s ease;
}
.contact-icon::after {
  content: "";
  position: absolute;
  inset: -10px;
  background: var(--color-bg-accent-soft);
  border-radius: 50%;
  z-index: -1;
  opacity: 0.5;
  transition: all 0.4s ease;
}
.contact-card:hover .contact-icon {
  transform: scale(1.05);
}
.contact-card:hover .contact-icon::after {
  opacity: 1;
  inset: -14px;
}
.contact-icon svg {
  width: 100%;
  height: 100%;
}
.contact-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.contact-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin-bottom: 6px;
}
.contact-sub {
  font-size: 13px;
  color: var(--color-text-sub);
  line-height: 1.5;
}

/* 운영 시간 안내 */
.hours-block {
  max-width: 720px;
  margin: 0 auto;
  background: #fafbfc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px 32px;
}
.hours-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}
.hours-row:last-child {
  border-bottom: none;
}
.hours-label {
  font-weight: 700;
  color: var(--color-accent-dark);
  letter-spacing: 0.02em;
}
.hours-value {
  color: var(--color-text);
  line-height: 1.6;
}
.map-info-row {
  display: flex;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 15px;
}
.map-info-row:last-child {
  border-bottom: none;
}
.map-info-label {
  flex-shrink: 0;
  width: 80px;
  font-weight: 600;
  color: var(--color-accent-dark);
}

/* =============================================
   반응형 추가 — about 페이지
   ============================================= */
@media (max-width: 960px) {
  .page-hero { padding: 60px 0 48px; }
  .page-hero-title { font-size: 28px; }
  .page-hero-sub { font-size: 15px; }

  /* 페이지 헤더 2단 → 1단 */
  .page-hero-split { padding: 56px 0 56px; }
  .page-hero-dark { padding: 60px 0 70px; }
  .page-hero-dark .section-title { font-size: 30px; }
  .page-hero-dark .page-hero-lead { font-size: 16px; }
  .page-hero-watermark { font-size: 100px; bottom: -10px; right: -10px; }
  .page-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-quote { font-size: 19px; }
  .page-hero-lead { font-size: 16px; }
  .page-hero-meaning { font-size: 14px; }
  .page-hero-divider { margin: 20px 0; }

  .page-hero-process { margin-top: 36px; padding-top: 28px; padding-left: 16px; }
  .page-hero-process-head { margin-bottom: 20px; }
  .page-hero-process-title { font-size: 16px; }
  .page-hero-process-desc { font-size: 12px; }

  .greeting-grid { grid-template-columns: 1fr; gap: 32px; }
  .greeting-quote { font-size: 19px; }

  .map-wrap > img { max-height: 320px; }

  .section-head-with-action {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .map-btn-header { padding: 8px 14px; font-size: 13px; }

  .map-info-row { flex-direction: column; gap: 4px; padding: 12px 0; }
  .map-info-label { width: auto; }

  /* SERVICE 반응형 */
  .service-grid-detail { grid-template-columns: 1fr; gap: 32px; }
  .service-num-large { font-size: 44px; }
  .service-quote { font-size: 16px; }
  .service-points li { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }

  /* 업무 흐름 - 모바일에서 세로 배치 */
  .process-flow {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .process-step { padding: 20px 16px; }
  .process-arrow {
    height: 24px;
    width: 1px;
    background: var(--color-border);
    margin: 0 auto;
  }
  .process-arrow::after {
    right: 50%;
    top: auto;
    bottom: 0;
    transform: translateX(50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid var(--color-border);
    border-bottom: none;
  }

  /* PROCESS 오브 - 모바일 세로 배치 */
  .process-section { padding: 40px 0 32px; }
  .process-box { padding: 36px 24px; }
  .process-box-head { margin-bottom: 32px; }
  .process-box-head .section-title { font-size: 22px; }
  .process-orbs {
    flex-direction: column;
    gap: 14px;
  }
  .orb-step { width: 100%; }
  .orb-wrap { width: 100px; height: 100px; }
  .orb-title { font-size: 16px; }
  .orb-arrow {
    margin-top: 0;
    transform: rotate(90deg);
  }

  /* COMMITMENT 박스 모바일 */
  .commit-section { padding: 24px 0 60px; }
  .commit-box { padding: 36px 24px; }
  .commit-box-head { margin-bottom: 32px; }
  .commit-box-head .section-title { font-size: 22px; }
  .commit-pillars {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .pillar-divider {
    width: 56px;
    height: 1px;
    margin: 12px auto;
  }
  .pillar-item { padding: 16px 0; }

  /* CLIENTS 반응형 */
  .clients-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .client-logo { height: 72px; padding: 14px 16px; }
  .client-name { font-size: 16px; margin: 18px 18px 6px; }
  .client-centers { font-size: 12px; margin: 0 18px 18px; }

  .client-dongwon .client-logo { font-size: 19px; }
  .client-dongwon .wm-strong { font-size: 22px; }
  .client-dongwon .wm-light { font-size: 15px; }
  .client-samsung .client-logo { font-size: 15px; }
  .client-samsung .wm-light { font-size: 14px; }
  .client-shinsegae .client-logo { font-size: 16px; }
  .client-cj .client-logo { font-size: 19px; }
  .client-cj .wm-strong { font-size: 27px; }
  .client-cj .wm-light { font-size: 15px; }
  .client-ourhome .client-logo { font-size: 19px; }
  .client-spc .client-logo { font-size: 27px; }
  .client-foodmerce .client-logo { font-size: 19px; }
  .client-foodist .client-logo { font-size: 20px; }
  .client-hyundai .client-logo { font-size: 15px; }
  .client-hyundai .wm-light { font-size: 12px; }
}

@media (max-width: 480px) {
  .clients-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* RECRUIT 반응형 */
  .job-card-head { padding: 22px 22px 18px; }
  .job-title { font-size: 18px; }
  .job-meta { gap: 12px 18px; }
  .job-meta-item { font-size: 13px; }
  .job-card-body {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 22px;
  }
  .benefits-block { padding: 24px 22px; }
  .benefits-list { grid-template-columns: 1fr 1fr; gap: 6px 18px; }

  .recruit-empty { padding: 28px 18px; }
  .recruit-empty-title { font-size: 18px; }
  .recruit-empty-desc { font-size: 14px; }

  .form-grid { grid-template-columns: 1fr; gap: 16px; }
  .form-row-full { margin-bottom: 16px; }
  .form-actions .btn-primary { width: 100%; }

  /* CONTACT 반응형 */
  .contact-cards { grid-template-columns: 1fr; gap: 12px; }
  .contact-card { padding: 32px 22px 28px; }
  .contact-icon { width: 44px; height: 44px; margin-bottom: 16px; }
  .hours-block { padding: 22px 24px; }
  .hours-row { grid-template-columns: 100px 1fr; gap: 12px; padding: 10px 0; font-size: 13px; }
}

/* =============================================
   VENDOR LOGIN — 협력업체 로그인 페이지
   ============================================= */

.vendor-login-section {
  background: #0a1f3a;
  color: #fff;
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 72px - 200px);
  display: flex;
  align-items: center;
  padding: 80px 0 100px;
}
.vendor-login-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 60% at 80% 50%, rgba(43, 168, 136, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 35% 30% at 20% 30%, rgba(31, 168, 224, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 30% 25% at 70% 80%, rgba(31, 168, 224, 0.06) 0%, transparent 50%);
}
.vendor-login-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(43, 168, 136, 0.4) 50%, transparent 100%);
}
.vendor-login-container {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}

/* 로그인 박스 */
.vendor-login-box {
  width: 100%;
  max-width: 460px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(93, 202, 165, 0.2);
  border-radius: 16px;
  padding: 56px 48px 44px;
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}
.vendor-login-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #5DCAA5 50%, transparent 100%);
}

/* 헤더 영역 */
.vendor-login-head {
  text-align: center;
  margin-bottom: 36px;
}
.vendor-login-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: #5DCAA5;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.vendor-login-title {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0 0 16px;
}
.vendor-login-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  margin: 0;
}

/* 폼 */
.vendor-login-form {
  margin-bottom: 36px;
}
.vl-input-wrap {
  margin-bottom: 20px;
}
.vl-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(93, 202, 165, 0.85);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.vl-input {
  width: 100%;
  padding: 16px 18px;
  font-size: 15px;
  font-family: 'Pretendard', system-ui, -apple-system, sans-serif;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #fff;
  transition: all 0.3s ease;
  box-sizing: border-box;
}
.vl-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.01em;
}
.vl-input:focus {
  outline: none;
  border-color: rgba(93, 202, 165, 0.6);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(43, 168, 136, 0.12);
}
.vl-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 에러 메시지 */
.vl-error {
  padding: 12px 16px;
  margin-bottom: 18px;
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.32);
  border-radius: 6px;
  color: #fca5a5;
  font-size: 13px;
  line-height: 1.5;
}

/* 로그인 버튼 */
.vl-btn {
  width: 100%;
  padding: 16px 32px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(43, 168, 136, 0.3);
  transition: all 0.3s ease;
}
.vl-btn:hover {
  box-shadow: 0 12px 32px rgba(43, 168, 136, 0.45);
  transform: translateY(-1px);
}

/* 로딩 스피너 */
.vl-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
}
.vl-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(93, 202, 165, 0.2);
  border-top-color: #5DCAA5;
  border-radius: 50%;
  animation: vl-spin 0.8s linear infinite;
}
@keyframes vl-spin {
  to { transform: rotate(360deg); }
}

/* 푸터 영역 */
.vendor-login-foot {
  text-align: center;
}
.vl-foot-line {
  width: 36px;
  height: 1px;
  background: rgba(93, 202, 165, 0.32);
  margin: 0 auto 22px;
}
.vl-foot-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 18px;
  letter-spacing: 0.01em;
}
.vl-foot-contacts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}
.vl-foot-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #5DCAA5;
  text-decoration: none;
  transition: color 0.2s ease;
}
.vl-foot-link:hover {
  color: #9FE1CB;
}
.vl-foot-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}
.vl-foot-icon svg {
  width: 100%;
  height: 100%;
}
.vl-foot-hours {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin: 16px 0 0;
  letter-spacing: 0.02em;
}

/* 헤더의 협력업체 로그인 버튼 active 상태 */
.btn-vendor.is-active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .vendor-login-section {
    padding: 48px 0 64px;
    min-height: auto;
  }
  .vendor-login-box {
    padding: 40px 28px 32px;
    border-radius: 12px;
  }
  .vendor-login-title {
    font-size: 22px;
  }
  .vendor-login-desc {
    font-size: 13px;
  }
  .vl-input {
    padding: 14px 16px;
    font-size: 15px;
  }
  .vl-btn {
    padding: 14px 24px;
  }
}

/* =============================================
   VENDOR LOGIN — 추가 스타일 (ID/PW 방식)
   ============================================= */

/* 화면 전환 */
.vl-screen { display: block; }

/* 입력 힌트 */
.vl-input-hint {
  font-size: 12px;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.01em;
  min-height: 16px;
}
.vl-hint-ok { color: #5DCAA5; }
.vl-hint-error { color: #fca5a5; }

/* 체크박스 */
.vl-checkbox-wrap {
  margin-bottom: 18px;
}
.vl-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}
.vl-checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.vl-checkbox-mark {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.vl-checkbox input:checked + .vl-checkbox-mark {
  background: #2ba888;
  border-color: #2ba888;
}
.vl-checkbox input:checked + .vl-checkbox-mark::after {
  content: '';
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-1px, -1px);
}
.vl-checkbox:hover .vl-checkbox-mark {
  border-color: rgba(93, 202, 165, 0.5);
}

/* 푸터 액션 링크 */
.vl-foot-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.vl-action-link {
  display: inline-block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
  text-align: center;
}
.vl-action-link strong {
  color: #5DCAA5;
  font-weight: 600;
}
.vl-action-link:hover {
  color: #fff;
}
.vl-action-link:hover strong {
  color: #9FE1CB;
}
.vl-foot-text-sm {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
  letter-spacing: 0.01em;
  text-align: center;
}
.vl-foot-text-sm a {
  color: rgba(93, 202, 165, 0.85);
  text-decoration: none;
}
.vl-foot-text-sm a:hover {
  color: #5DCAA5;
}

/* 공용 PC 경고 문구 */
.vl-checkbox-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(220, 38, 38, 0.08);
  border-left: 2px solid rgba(220, 38, 38, 0.5);
  border-radius: 4px;
  font-size: 12px;
  color: #fca5a5;
  letter-spacing: -0.005em;
}
.vl-warn-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.9;
}