:root {
  --bg-dark: #0a0e17;
  --bg-dark-surface: #111827;
  --bg-dark-border: #1f2937;
  --accent-brand: #e24a26;
  --text-white: #ffffff;
  --text-dark: #0f172a;
  --text-body: #334155;
  --text-muted: #64748b;
  --text-subtle: #94a3b8;
  --line-light: #e2e8f0;
  --line-dark: #232d3f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: #ffffff;
  color: var(--text-dark);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  max-width: 1440px;
  margin: 0 auto;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }

.wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================================================
   1. 상단 검정 머리띠 + GNB (업체 중립 메뉴, GPT-Image-2 워드마크)
   ============================================================ */
.v-header {
  background: #000000;
  color: #fff;
  border-bottom: 2px solid var(--accent-brand);
}
.v-header-top {
  background: #070a12;
  border-bottom: 1px solid var(--bg-dark-border);
  padding: 9px 0;
  font-size: 12.5px;
  color: var(--text-subtle);
}
.v-header-top .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.v-header-top b {
  color: #f8fafc;
  font-weight: 700;
}
.v-header-main {
  background: #000000;
  padding: 16px 0 16px;
}
.v-header-main .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.v-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.v-logo img {
  height: 28px;
  width: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}
.v-nav {
  display: flex;
  gap: 32px;
  align-items: center;
}
.v-nav a {
  font-size: 15px;
  font-weight: 600;
  color: #cbd5e1;
  padding: 6px 0;
  letter-spacing: -0.01em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s;
}
.v-nav a.active {
  color: #ffffff;
  font-weight: 800;
  border-bottom: 2px solid var(--accent-brand);
}
.v-nav a:hover {
  color: #ffffff;
}

/* 활자 색인 바 */
.v-index-strip {
  background: #070a12;
  padding: 8px 0;
  border-bottom: 1px solid var(--bg-dark-border);
  font-size: 12.5px;
  color: var(--text-subtle);
}
.v-index-strip .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}
.v-index-label {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--accent-brand);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.v-index-list {
  display: flex;
  align-items: center;
  gap: 14px;
}
.v-index-list span.dot {
  color: #475569;
}
.v-index-list a {
  color: #94a3b8;
  font-weight: 500;
}
.v-index-list a.on {
  color: #ffffff;
  font-weight: 700;
}
.v-index-list a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* ============================================================
   2. 풀 와이드 히어로 (어두운 사진 자체 활용, 타이포 위계 정돈)
   ============================================================ */
.v-hero-section {
  background: var(--bg-dark);
  padding: 24px 0 44px;
  color: #fff;
}
.v-hero-canvas {
  position: relative;
  aspect-ratio: 21 / 9;
  width: 100%;
  overflow: hidden;
  background: #000;
}
.v-hero-canvas img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v-hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 44px 50px;
  max-width: 980px;
}
.v-hero-kicker {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #cbd5e1;
  margin-bottom: 8px;
}
.v-hero-title {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.03em;
  color: #ffffff;
}
.v-hero-desc {
  font-size: 16px;
  color: #cbd5e1;
  margin-top: 12px;
  max-width: 820px;
  line-height: 1.65;
}

/* 히어로 하단 3개 피처렛 */
.v-hero-featurettes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-dark);
}
.v-featurette-col {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.v-featurette-num {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #64748b;
  line-height: 1;
}
.v-featurette-text h4 {
  font-size: 15.5px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.v-featurette-text p {
  font-size: 13px;
  color: var(--text-subtle);
  margin-top: 4px;
  line-height: 1.55;
}

/* ============================================================
   공통 섹션 헤더 (빨간 세로막대 제거, 세련된 타이포+숫자 대비)
   ============================================================ */
.v-section {
  padding: 50px 0 54px;
}
.v-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 2px solid var(--text-dark);
  padding-bottom: 12px;
  margin-bottom: 30px;
}
.v-section-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.v-section-num {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-brand);
  letter-spacing: 0.05em;
}
.v-section-title {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-dark);
}
.v-section-sub {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================
   3. 주요 부품별 테크 가이드 (영문 빨강 말머리/빨간선 제거)
   ============================================================ */
.v-comp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.v-comp-item {
  display: flex;
  flex-direction: column;
}
.v-comp-thumb {
  aspect-ratio: 16 / 10;
  background: #0f172a;
  overflow: hidden;
  width: 100%;
}
.v-comp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v-comp-body {
  padding-top: 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.v-comp-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.v-comp-title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.42;
  color: var(--text-dark);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.v-comp-title a:hover {
  color: var(--accent-brand);
  text-decoration: underline;
}
.v-comp-desc {
  font-size: 13.5px;
  color: var(--text-body);
  line-height: 1.58;
  flex: 1;
}
.v-comp-footer {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--line-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

/* ============================================================
   4. 도로·노면 도색 & 주차시설 (초록 제거, 업체 중립화, 실사 글 배치)
   ============================================================ */
.v-road-section {
  background: #0d121f;
  color: #fff;
  padding: 50px 0 56px;
}
.v-section-head-dark {
  border-bottom-color: #334155;
}
.v-title-white {
  color: #ffffff !important;
}
.v-sub-gray {
  color: #94a3b8 !important;
}
.v-road-grid {
  display: grid;
  grid-template-columns: 580px 1fr;
  gap: 48px;
  align-items: center;
}
.v-road-lead-img {
  aspect-ratio: 16 / 10;
  width: 100%;
  overflow: hidden;
  background: #000;
}
.v-road-lead-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v-road-info-panel {
  display: flex;
  flex-direction: column;
}
.v-road-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-subtle);
  margin-bottom: 6px;
}
.v-road-title {
  font-size: 27px;
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.v-road-desc {
  font-size: 15px;
  color: #94a3b8;
  margin-top: 12px;
  line-height: 1.7;
}

.v-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 28px;
  margin-top: 24px;
}
.v-spec-item {
  border-top: 1px solid #1e293b;
  padding-top: 12px;
}
.v-spec-badge {
  font-size: 11px;
  font-weight: 700;
  color: #cbd5e1;
  background: #1e293b;
  padding: 2px 7px;
  border-radius: 2px;
  display: inline-block;
  margin-bottom: 6px;
}
.v-spec-item h5 {
  font-size: 14.5px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.4;
}
.v-spec-item p {
  font-size: 12.5px;
  color: #94a3b8;
  margin-top: 4px;
  line-height: 1.55;
}

/* ============================================================
   5. 실시간 기술 Q&A 포럼 (자연스러운 저널 3단 구성)
   ============================================================ */
.v-comm-section {
  padding: 48px 0 56px;
}
.v-comm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}
.v-comm-col {
  border-top: 2px solid var(--text-dark);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.v-comm-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.v-comm-cat {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}
.v-comm-time {
  font-size: 12px;
  color: var(--text-subtle);
}
.v-comm-q {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.45;
  letter-spacing: -0.015em;
}
.v-comm-q a:hover {
  color: var(--accent-brand);
  text-decoration: underline;
}
.v-comm-meta {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--line-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 600;
}

/* ============================================================
   6. 푸터
   ============================================================ */
.v-footer {
  background: #000000;
  color: #94a3b8;
  padding: 44px 0 50px;
  border-top: 1px solid var(--bg-dark-border);
  font-size: 13px;
}
.v-footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.v-footer-logo img {
  height: 24px;
  width: auto;
  display: block;
  opacity: 0.9;
  image-rendering: -webkit-optimize-contrast;
}
.v-footer-nav {
  display: flex;
  gap: 24px;
}
.v-footer-nav a {
  color: #cbd5e1;
}
.v-footer-nav a:hover {
  color: #fff;
  text-decoration: underline;
}

/* ============================================================
   반응형 — ★데스크톱 판(1440) 은 그대로 두고 좁은 화면만 다시 짠다.
   왜: 원안이 1440 고정이라 휴대폰에서 가로 스크롤이 났다. 네이버는 모바일이 본판이라
       이걸 안 고치면 색인은 되어도 사람이 못 읽는다. ★지우지 않고 아래에 덧붙인다.★
   ============================================================ */
@media (max-width: 1100px) {
  .v-comp-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 22px; }
  .v-road-grid { grid-template-columns: 1fr; gap: 26px; }
  .v-comm-grid { grid-template-columns: 1fr; gap: 26px; }
  .v-hero-featurettes { grid-template-columns: 1fr; gap: 18px; }
  .v-hero-content { padding: 28px 28px; }
  .v-hero-title { font-size: 30px; }
}

@media (max-width: 720px) {
  body { font-size: 15.5px; }
  .wrap { padding: 0 16px; }

  .v-header-top { font-size: 11.5px; }
  .v-header-top .wrap { gap: 10px; }
  .v-header-top .wrap > div:last-child { display: none; }

  .v-header-main .wrap { flex-direction: column; align-items: flex-start; gap: 12px; }
  .v-nav { gap: 18px; flex-wrap: wrap; }
  .v-nav a { font-size: 14px; }

  .v-index-strip .wrap { flex-direction: column; align-items: flex-start; gap: 6px; }
  .v-index-list { flex-wrap: wrap; gap: 8px; }

  /* 히어로 — 사진 위에 글자를 얹으면 휴대폰에서 안 읽힌다. 사진 아래로 내린다. */
  .v-hero-canvas { aspect-ratio: 4 / 3; }
  .v-hero-content { position: static; padding: 20px 0 0; max-width: none; }
  .v-hero-title { font-size: 25px; line-height: 1.32; }
  .v-hero-desc { font-size: 15px; }

  .v-comp-grid { grid-template-columns: 1fr; gap: 28px; }
  .v-section { padding: 34px 0 36px; }
  .v-section-title { font-size: 21px; }
  .v-section-sub { display: none; }

  .v-road-section { padding: 34px 0 38px; }
  .v-road-title { font-size: 22px; }
  .v-specs-grid { grid-template-columns: 1fr; gap: 14px; }

  .v-footer .wrap { flex-direction: column; align-items: flex-start; gap: 16px; }
  .v-footer-nav { flex-wrap: wrap; gap: 16px; }
}

/* ============================================================
   7. 글 상세 — 시안에 없던 판이라 같은 규칙(검정 머리띠·사진 먼저·상자 없음)으로 새로 짰다.
      ★카드 박스·모션·강조 칩 안 쓴다 (마스터 2026-09-16: "ai가 만든 티").
   ============================================================ */
.v-art-hero {
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: #000;
}
.v-art-hero img { width: 100%; height: 100%; object-fit: cover; }

.v-art-wrap {
  max-width: 760px;
  padding-top: 34px;
  padding-bottom: 48px;
}
.v-art-wrap-plain { padding-top: 46px; }

.v-art-crumb {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.v-art-crumb a { color: var(--text-muted); }
.v-art-crumb a:hover { color: var(--accent-brand); }

.v-art-kicker {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-brand);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.v-art-title {
  font-size: 33px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--text-dark);
}
.v-art-lead {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-body);
  margin-top: 16px;
}
.v-art-meta {
  margin-top: 18px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--text-dark);
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 600;
}
.v-art-h {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin: 34px 0 12px;
}
.v-art-p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-body);
  margin-bottom: 16px;
}
.v-art-steps {
  margin: 20px 0 22px 0;
  padding-left: 20px;
}
.v-art-steps li {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-body);
  padding: 7px 0;
  border-bottom: 1px solid var(--line-light);
}
.v-art-src {
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid var(--line-light);
}
.v-art-src h3 {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.v-art-src ul { padding-left: 18px; }
.v-art-src li {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
  word-break: break-all;
}

/* 히어로 제목이 링크일 때 밑줄이 튀지 않게 */
.v-hero-title a, .v-comp-title a, .v-road-title a, .v-comm-q a, .v-spec-item h5 a { color: inherit; }

@media (max-width: 720px) {
  .v-art-hero { aspect-ratio: 4 / 3; }
  .v-art-wrap { padding-top: 24px; }
  .v-art-title { font-size: 25px; }
  .v-art-lead { font-size: 16px; }
  .v-art-p { font-size: 16px; }
  .v-art-h { font-size: 18.5px; margin-top: 28px; }
}

/* 히어로 사진이 밝으면 흰 글자가 안 읽힌다 — 아래쪽만 어둡게 깔아 준다.
   ★모양을 바꾸는 장식이 아니라 가독성 때문에 넣은 것이다(2026-09-16 실제 화면에서 안 읽혀서). */
.v-hero-canvas { position: relative; }
.v-hero-canvas::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 72%;
  background: linear-gradient(to top, rgba(6,9,15,.92) 0%, rgba(6,9,15,.72) 38%, rgba(6,9,15,0) 100%);
  pointer-events: none;
}
.v-hero-content { z-index: 1; }
@media (max-width: 720px) {
  /* 좁은 화면에선 글자를 사진 밖으로 내리므로 덮개가 필요 없다 */
  .v-hero-canvas::after { display: none; }
}

/* 도로 칸에 글이 한 편뿐일 때 오른쪽이 휑해 보여서 목록으로 가는 줄을 하나 둔다. */
.v-road-more {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid #1e293b;
  font-size: 13.5px;
  font-weight: 700;
  color: #cbd5e1;
}
.v-road-more a { color: #cbd5e1; }
.v-road-more a:hover { color: #fff; }

/* 글이 4편이 안 될 때 칸 수를 줄인다. ★인라인 style 로 하면 좁은 화면 규칙을 이겨버려서
   휴대폰에서 가로 스크롤이 났다(2026-09-16). 그래서 넓은 화면에서만 적용되는 클래스로 둔다. */
@media (min-width: 721px) {
  .v-comp-grid.cols-1 { grid-template-columns: minmax(0, 520px); }
  .v-comp-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-comp-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ★휴대폰에서 히어로 제목이 통째로 사라지던 것 고침 (2026-09-16 실화면 확인).
   원인: 글자를 사진 아래로 내렸는데(position:static) 액자(.v-hero-canvas)가
   aspect-ratio + overflow:hidden 이라 사진 높이 밖으로 나간 글자가 잘려 나갔다.
   → 좁은 화면에선 액자의 비율·자르기를 풀고 사진 자신에게 비율을 준다. */
@media (max-width: 720px) {
  .v-hero-canvas { aspect-ratio: auto; overflow: visible; background: transparent; }
  .v-hero-canvas img { aspect-ratio: 4 / 3; height: auto; }
}

/* 문답 글이 3편이 안 될 때 (홈 3단 격자) */
@media (min-width: 721px) {
  .v-comm-grid.cols-1 { grid-template-columns: minmax(0, 520px); }
  .v-comm-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   8. 광고 안내 — ★광고는 광고라고 적는다(편집 원칙).★
      본문과 확실히 구분되되, 남의 사이트에서 오려붙인 배너처럼 보이지 않게
      같은 판(검정 머리띠·상자 없음)의 규칙 안에서 만든다.
   ============================================================ */
.v-art-ad {
  margin: 40px 0 8px;
  padding-top: 18px;
  border-top: 2px solid var(--text-dark);
}
.v-art-ad-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--text-dark);
  padding: 3px 9px;
  margin-bottom: 12px;
}
.v-art-ad h3 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin-bottom: 12px;
}
.v-art-ad dl {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 8px 14px;
  font-size: 15px;
  line-height: 1.6;
}
.v-art-ad dt { color: var(--text-muted); font-weight: 700; }
.v-art-ad dd { color: var(--text-body); }
.v-art-ad-links {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 14.5px;
  font-weight: 700;
}
.v-art-ad-links a { color: var(--accent-brand); }
.v-art-ad-note {
  margin-top: 16px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-muted);
}
@media (max-width: 720px) {
  .v-art-ad dl { grid-template-columns: 70px 1fr; font-size: 14.5px; }
}