@charset "utf-8";

/* UI-COM-001 공통 레이아웃 */
.site-shell {
  height: 100%;
  padding: 16px;
}
.site-layout {
  display: grid;
  width: min(864px, 100%);
  height: 100%;
  grid-template-columns: var(--app-width) 320px;
  align-items: center;
  gap: 24px;
  margin: 0 auto;
}
.app-view {
  position: relative;
  display: grid;
  height: 100%;
  grid-template-rows: var(--header-height) minmax(0, 1fr) var(--footer-height);
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: 32px;
  background: var(--color-surface);
  box-shadow: var(--shadow-app);
}

/* 공통 헤더 */
.site-header {
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--black-800);
  background: var(--black-900);
}
.site-logo img {
  width: auto;
  height: 24px;
}
.header-menu-button {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--black-800);
}
.header-menu-button::before,
.header-menu-button::after,
.header-menu-button .menu-line {
  position: absolute;
  left: 10px;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--white);
  content: "";
  transition: transform 0.28s ease, top 0.28s ease, opacity 0.2s ease;
}
.header-menu-button::before { top: 14px; }
.header-menu-button .menu-line { top: 19px; }
.header-menu-button::after { top: 24px; }
.app-view.is-menu-open .header-menu-button::before {
  top: 19px;
  transform: rotate(45deg);
}
.app-view.is-menu-open .header-menu-button::after {
  top: 19px;
  transform: rotate(-45deg);
}
.app-view.is-menu-open .header-menu-button .menu-line { opacity: 0; }

/* 콘텐츠 스크롤 */
.content-scroll {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  background: var(--color-surface);
  overscroll-behavior: contain;
}
.content-scroll::-webkit-scrollbar { width: 8px; }
.content-scroll::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: var(--gray-300);
}
.content-scroll::-webkit-scrollbar-track { background: transparent; }
.app-view.is-menu-open .content-scroll { overflow-y: hidden; }
.site-main { padding-bottom: 24px; }

/* 공통 전체 메뉴 */
.global-menu {
  position: absolute;
  z-index: 35;
  top: var(--header-height);
  right: 0;
  bottom: var(--footer-height);
  left: 0;
  padding: 16px 20px 24px;
  overflow: auto;
  border-bottom: 1px solid var(--color-line-soft);
  background: var(--overlay-white-98);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-16px);
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.32s;
}
.app-view.is-menu-open .global-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}
.global-menu ul {
  display: grid;
  gap: 4px;
}
.global-menu li {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.24s ease, transform 0.32s ease;
}
.app-view.is-menu-open .global-menu li {
  opacity: 1;
  transform: translateY(0);
}
.app-view.is-menu-open .global-menu li:nth-child(1) { transition-delay: 0.04s; }
.app-view.is-menu-open .global-menu li:nth-child(2) { transition-delay: 0.08s; }
.app-view.is-menu-open .global-menu li:nth-child(3) { transition-delay: 0.12s; }
.app-view.is-menu-open .global-menu li:nth-child(4) { transition-delay: 0.16s; }
.app-view.is-menu-open .global-menu li:nth-child(5) { transition-delay: 0.20s; }
.app-view.is-menu-open .global-menu li:nth-child(6) { transition-delay: 0.24s; }
.app-view.is-menu-open .global-menu li:nth-child(7) { transition-delay: 0.28s; }
.global-menu a {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
}
.global-menu a .icon {
  width: 20px;
  height: 20px;
}
.global-menu a:hover,
.global-menu a:focus-visible,
.global-menu a.is-active {
  background: var(--red-50);
  color: var(--color-primary);
}

/* 공통 하단 내비게이션 */
.site-footer {
  z-index: 30;
  padding: 8px 16px;
  border-top: 1px solid var(--color-line-soft);
  background: var(--overlay-white-98);
  backdrop-filter: blur(12px);
}
.bottom-nav {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(5, 1fr);
  border-radius: 20px;
  background: var(--white);
  box-shadow: var(--shadow-nav);
}
.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--gray-500);
  font-size: 12px;
  font-weight: 600;
}
.bottom-nav a .icon {
  width: 20px;
  height: 20px;
}
.bottom-nav a.is-active {
  color: var(--color-primary);
  font-weight: 800;
}

/* UI-HM-001 홈 */
.home-hero {
  position: relative;
  height: 296px;
  margin: 16px;
  overflow: hidden;
  border-radius: 24px;
  background: var(--black-900);
  color: var(--white);
}
.home-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.72) contrast(1.1);
}
.home-hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 84% 18%, var(--overlay-red-40), transparent 28%), linear-gradient(90deg, var(--black-950) 0%, var(--overlay-black-94) 36%, var(--overlay-black-40) 68%, var(--overlay-red-dark-60) 100%);
}
.home-hero-content {
  position: relative;
  z-index: 2;
  padding: 32px;
}
.home-hero-eyebrow {
  color: var(--red-300);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.home-hero h1 {
  margin: 12px 0 8px;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.04em;
}
.home-hero-content > p:last-of-type {
  color: var(--black-200);
  font-size: 14px;
  line-height: 1.6;
}
.home-hero .btn { margin-top: 20px; }

.quick-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0 16px 24px;
}
.quick-menu a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  border: 1px solid var(--color-line-soft);
  border-radius: 16px;
  background: var(--color-surface-sub);
  font-size: 12px;
  font-weight: 700;
}
.quick-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  background: var(--white);
  color: var(--color-primary);
  box-shadow: var(--shadow-icon);
}
.quick-icon .icon {
  width: 20px;
  height: 20px;
}
.home-section { padding: 0 16px 24px; }
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.section-head h2 {
  font-size: 20px;
  line-height: 1.4;
}
.section-head a {
  color: var(--color-text-sub);
  font-size: 12px;
  font-weight: 600;
}
.benefit-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.benefit-list li {
  padding: 16px;
  border: 1px solid var(--color-line-soft);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-card);
}
.benefit-icon {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}
.benefit-list strong {
  display: block;
  margin: 8px 0 4px;
  font-size: 14px;
}
.benefit-list p {
  color: var(--color-text-muted);
  font-size: 12px;
}
.vehicle-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.vehicle-card {
  overflow: hidden;
  border: 1px solid var(--color-line-soft);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-card);
}
.vehicle-image {
  height: 128px;
  overflow: hidden;
  background: var(--gray-100);
}
.vehicle-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vehicle-body { padding: 12px; }
.vehicle-body h3 {
  margin: 8px 0 4px;
  font-size: 16px;
}
.vehicle-body p {
  color: var(--color-text-muted);
  font-size: 12px;
}
.price {
  margin-top: 12px;
  color: var(--color-text-sub);
  font-size: 12px;
}
.price strong {
  color: var(--color-primary);
  font-size: 16px;
}
.review-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.review-card {
  overflow: hidden;
  border: 1px solid var(--color-line-soft);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-card);
}
.review-image {
  height: 88px;
  overflow: hidden;
  background: var(--gray-100);
}
.review-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.review-body { padding: 8px; }
.review-body strong {
  display: block;
  font-size: 12px;
  line-height: 1.5;
}
.review-body span {
  display: block;
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 12px;
}
.consult-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 16px;
  padding: 16px;
  border-radius: 16px;
  background: var(--black-900);
  color: var(--white);
}
.consult-strip strong { font-size: 16px; }
.consult-strip span {
  display: block;
  margin-top: 4px;
  color: var(--black-300);
  font-size: 12px;
}
.consult-strip a {
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--color-primary);
  font-size: 12px;
  font-weight: 800;
}

/* PC 공통 보조영역 */
.brand-aside {
  position: relative;
  display: flex;
  min-width: 0;
  height: 100%;
  max-height: 900px;
  flex-direction: column;
  padding: 32px 24px;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(155deg, var(--black-900) 0%, var(--black-800) 68%, var(--red-900) 140%);
  color: var(--white);
  box-shadow: var(--shadow-soft);
}
.brand-aside::after {
  position: absolute;
  right: -88px;
  bottom: -88px;
  width: 232px;
  height: 232px;
  border-radius: 50%;
  background: var(--overlay-red-10);
  content: "";
}
.brand-aside-logo { width: 144px; }
.brand-aside-copy { margin-top: 48px; }
.brand-kicker {
  color: var(--red-300);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.brand-aside h2 {
  margin-top: 16px;
  font-size: 28px;
  line-height: 1.4;
  letter-spacing: -0.04em;
}
.brand-aside-copy > p {
  margin-top: 16px;
  color: var(--black-200);
  font-size: 14px;
  line-height: 1.7;
}
.brand-points {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}
.brand-points li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-point-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  background: var(--overlay-white-08);
  color: var(--red-300);
}
.brand-point-icon .icon {
  width: 24px;
  height: 24px;
}
.brand-points strong { font-size: 14px; }
.brand-points p {
  margin-top: 4px;
  color: var(--black-300);
  font-size: 12px;
}
.brand-contact {
  margin-top: auto;
  padding-top: 24px;
}
.brand-contact span {
  font-size: 12px;
  font-weight: 700;
}
.brand-contact strong {
  display: block;
  margin: 4px 0;
  font-size: 28px;
}
.brand-contact p {
  color: var(--black-300);
  font-size: 12px;
}
.brand-actions {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}
.brand-actions a {
  display: grid;
  height: 48px;
  place-items: center;
  border-radius: 12px;
  background: var(--color-primary);
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
}
.brand-actions a:last-child {
  border: 1px solid var(--overlay-white-20);
  background: var(--overlay-white-08);
}

@media (max-width: 920px) {
  .site-shell { padding: 0; }
  .site-layout { display: block; width: 100%; height: 100%; }
  .app-view { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .brand-aside { display: none; }
  .content-scroll { scrollbar-gutter: auto; }
  .content-scroll::-webkit-scrollbar { width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}