/* 시안 1: PC 브랜드 영역은 포인트 레드, 오른쪽 견적 영역은 기존 디자인 유지. */
.concept-2[data-design="1"] {
  --design-accent: #d0112b;
  --design-accent-strong: #b80e27;
  --design-accent-border: #ca0d28;
  --design-accent-shadow: #ac0c23;
  --design-accent-soft-border: #efacb7;
  --design-accent-label: #c40f2a;
  --design-accent-muted: #d994a0;
  --design-accent-dark: #a3152b;
  --design-accent-focus: #bd1831;
  --design-accent-focus-glow: #d0112b14;
  --design-accent-pale-border: #f0c6ce;
  --design-accent-choice: #c20d29;
  --design-accent-card-hover: #d6a1aa;
  --design-accent-choice-hover: #dc8a98;
  --design-tint: #fff1f2;
  --design-selected-surface: #fff5f7;
  --design-selected-card: #fff9fa;
  --design-page: #f5f5f5;
}

/* 시안 1: 레드 정보 영역과 밝은 가격 영역에 차량을 걸쳐 배치. */
.concept-2[data-design="1"] :is(#quote-view,.sheet-scroll)>.drive-product {
 position:relative;
 isolation:isolate;
 display:grid;
 grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
 gap:8px 14px;
 margin:var(--quote-card-top-gap,16px) 22px 0;
 padding:18px;
 border-radius:14px;
 background:#f6f6f7;
 overflow:hidden;
}
.concept-2[data-design="1"] :is(#quote-view,.sheet-scroll)>.drive-product::before {
 content:'';
 position:absolute;
 inset:0;
 clip-path:polygon(0 0,100% 0,100% calc(100% - 54px),64% calc(100% - 54px),50% calc(100% - 82px),0 calc(100% - 82px));
 background:linear-gradient(112deg,#bb0b28 0%,var(--accent) 58%,#e12642 100%);
 z-index:-1;
}
.concept-2[data-design="1"] :is(#quote-view,.sheet-scroll) .drive-model-heading { display:contents; }
.concept-2[data-design="1"] :is(#quote-view,.sheet-scroll) .drive-model-identity {
 grid-column:1;
 grid-row:1;
 display:flex;
 align-items:baseline;
 gap:8px;
 min-width:0;
}
.concept-2[data-design="1"] :is(#quote-view,.sheet-scroll) .drive-model-brand { order:2; flex:none; color:#fff; }
.concept-2[data-design="1"] :is(#quote-view,.sheet-scroll) .drive-model-heading h2 { margin:0; font-size:28px; color:#fff; }
.concept-2[data-design="1"] :is(#quote-view,.sheet-scroll) .drive-model-heading h2::before { display:none; }
.concept-2[data-design="1"] :is(#quote-view,.sheet-scroll) .drive-model-heading .drive-condition-badge {
 grid-column:2;
 grid-row:1;
 justify-self:end;
 align-self:center;
 margin:0;
 padding:0;
 border:0;
 border-radius:0;
 background:transparent;
 color:#fff;
 font-weight:400;
 line-height:20px;
}
.concept-2[data-design="1"] :is(#quote-view,.sheet-scroll)>.drive-product>.drive-model-details {
 grid-column:1 / -1;
 grid-row:2;
 margin:0;
 color:#fff;
 line-height:1.6;
 word-break:keep-all;
}
.concept-2[data-design="1"] :is(#quote-view,.sheet-scroll)>.drive-product>.drive-model-details p+p { margin-top:2px; }
.concept-2[data-design="1"] :is(#quote-view,.sheet-scroll) .drive-product-car {
 grid-column:2;
 grid-row:3;
 align-self:end;
 height:124px;
 margin:-48px -12px -2px -22px;
 border-radius:0;
 background:transparent;
}
.concept-2[data-design="1"] :is(#quote-view,.sheet-scroll) .drive-product-car .drive-red-block { display:none; }
.concept-2[data-design="1"] :is(#quote-view,.sheet-scroll) .drive-product-car .vehicle-image { scale:1; }
.concept-2[data-design="1"] :is(#quote-view,.sheet-scroll) .drive-card-price {
 grid-column:1;
 grid-row:3;
 align-self:end;
 display:block;
 min-width:0;
}
.concept-2[data-design="1"] :is(#quote-view,.sheet-scroll) .drive-card-price-label { display:block; margin-bottom:3px; color:#626c79; font-size:14px; font-weight:550; }
.concept-2[data-design="1"] :is(#quote-view,.sheet-scroll) .drive-card-price .amount { --price-max-size:30; min-width:0; gap:3px; }
.concept-2[data-design="1"] :is(#quote-view,.sheet-scroll) .drive-card-price .amount strong { font-size:30px; }
.concept-2[data-design="1"] :is(#quote-view,.sheet-scroll) .drive-card-price .amount>span { font-size:14px; }
.concept-2[data-design="1"] :is(#quote-view,.sheet-scroll) .drive-card-price .amount>span:first-child { display:none; }
.concept-2[data-design="1"] :is(#quote-view,.sheet-scroll)>.drive-quote-asof { display:block; margin:10px 28px 8px; font-size:12px; line-height:22px; color:#626c79; text-align:right; }
.concept-2[data-design="1"] :is(#quote-view,.sheet-scroll)>.drive-quote-asof [data-price-term] { color:var(--accent); font-weight:650; }
.concept-2[data-design="1"] :is(#quote-view,.sheet-scroll)>.drive-price-overview { display:none; }
.concept-2[data-design="1"] :is(#quote-view,.sheet-scroll)>.drive-contract { padding-bottom:24px; }
@media(max-width:379px) {
 .concept-2[data-design="1"] :is(#quote-view,.sheet-scroll)>.drive-product { margin-inline:16px; padding:16px 14px; column-gap:8px; }
 .concept-2[data-design="1"] :is(#quote-view,.sheet-scroll) .drive-model-heading h2 { font-size:26px; }
 .concept-2[data-design="1"] :is(#quote-view,.sheet-scroll) .drive-model-identity { gap:6px; }
 .concept-2[data-design="1"] :is(#quote-view,.sheet-scroll) .drive-product-car { height:114px; margin-left:-14px; margin-right:-10px; }
 .concept-2[data-design="1"] :is(#quote-view,.sheet-scroll)>.drive-quote-asof { margin-inline:22px; }
}

/* 공통 혜택 카드와 동일한 구성. 사진 왼쪽 가장자리에 붙는 레드 리본형 이벤트 배지. */
.concept-2[data-design="1"] .drive-benefit-review { position:relative; }
.concept-2[data-design="1"] .drive-benefit-badge {
 display:block;
 position:absolute;
 top:12px;
 left:0;
 z-index:1;
 padding:5px 20px 5px 12px;
 border:0;
 border-radius:0;
 background:var(--accent);
 color:#fff;
 clip-path:polygon(0 0,100% 0,calc(100% - 8px) 50%,100% 100%,0 100%);
 font-size:14px;
 font-weight:750;
 line-height:20px;
 white-space:nowrap;
}

@media (min-width:901px) {
  .concept-2[data-design="1"] {
    background:#c92b36 linear-gradient(115deg,#cf323b 0%,#c92b36 58%,#bd2531 100%);
  }
  .concept-2[data-design="1"] .side-drive {
    color:#fff;
  }
  .concept-2[data-design="1"] .drive-heading h1 {
    color:#fff;
  }
  .concept-2[data-design="1"] .drive-heading h1 em,
  .concept-2[data-design="1"] .drive-heading .brand-kicker {color:#fff;}
 
  .concept-2[data-design="1"] .side-drive .side-foot,
  .concept-2[data-design="1"] .drive-heading>p,
  .concept-2[data-design="1"] .journey-contract {
    color:#fff5f5;
  }
  .concept-2[data-design="1"] .journey-contract {
    border-color:rgb(255 255 255 / 30%);
  }
  .concept-2[data-design="1"] .journey-contract b,
  .concept-2[data-design="1"] .journey-contract>.icon {
    color:#fff;
  }
  .concept-2[data-design="1"] .drive-banner {
    color:var(--ink);
  }
}

/* Two quiet tonal cuts carry the upper red panel behind the car. */
.concept-2[data-design="1"] :is(#quote-view,.sheet-scroll)>.drive-product::after {
 content:''; position:absolute; inset:0 0 82px 55%; z-index:-1; pointer-events:none;
 background:linear-gradient(125deg,transparent 0 30%,#ffffff0c 30% 68%,transparent 68%);
}

/* Selected benefits montage. Each diagonal panel occupies one quarter of the image. */
.concept-2[data-design="1"] .side-drive>.drive-banner { display:none; }
.concept-2[data-design="1"] .drive-benefits-banner {
 display:flex; flex-direction:column; position:relative; isolation:isolate;
 overflow:hidden; margin:25px 0 28px; padding:32px 24px 24px; border-radius:14px;
 background:#33272a; color:#fff; text-align:left;
}
.benefits-banner-photos,.benefits-banner-shade { position:absolute; inset:0; pointer-events:none; z-index:-1; }
.benefits-banner-photos>div { position:absolute; top:0; bottom:0; overflow:hidden; }
.benefits-banner-photos>div:nth-child(1) { left:0; width:31%; clip-path:polygon(0 0,100% 0,61.29% 100%,0 100%); }
.benefits-banner-photos>div:nth-child(2) { left:19%; width:37%; clip-path:polygon(32.43% 0,100% 0,67.57% 100%,0 100%); }
.benefits-banner-photos>div:nth-child(3) { left:44%; width:37%; clip-path:polygon(32.43% 0,100% 0,67.57% 100%,0 100%); }
.benefits-banner-photos>div:nth-child(4) { left:69%; width:31%; clip-path:polygon(38.71% 0,100% 0,100% 100%,0 100%); }
.benefits-banner-photos img { display:block; width:100%; height:100%; max-width:none; object-fit:cover; }
.benefits-banner-photos>div:nth-child(1) img { object-position:52% 50%; }
.benefits-banner-photos>div:nth-child(2) img { object-position:58% 50%; }
.benefits-banner-photos>div:nth-child(3) img { object-position:55% 47%; }
.benefits-banner-photos>div:nth-child(4) img { object-position:60% 50%; }
.benefits-banner-shade {
 background:linear-gradient(180deg,rgba(31,26,27,.16) 0%,rgba(31,26,27,.3) 42%,rgba(31,26,27,.58) 72%,rgba(31,26,27,.8) 100%),linear-gradient(105deg,rgba(73,21,32,.44) 0%,rgba(46,29,32,.28) 42%,rgba(46,29,32,0) 85%);
}
.benefits-banner-shade::after {
 content:''; position:absolute; inset:0;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M31 0L19 100M56 0L44 100M81 0L69 100' fill='none' stroke='%23ffffff' stroke-opacity='.1' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.benefits-banner-copy { margin:0; }
.benefits-banner-copy h2 { margin:0; color:#fff; font-size:30px; font-weight:700; line-height:38px; word-break:keep-all; }
.benefits-banner-copy>p { margin:10px 0 0; color:#f3ebed; font-size:16px; font-weight:400; line-height:22px; word-break:keep-all; }
.benefits-banner-summary {
 margin:16px 0 0; padding:12px 0 0;
 border-top:1px solid #ffffff33;
 color:#eee6e8; font-size:14px; font-weight:400; line-height:22px;
 word-break:keep-all; text-wrap:pretty;
}
.benefits-banner-summary strong { color:#fff; font-weight:500; }
@media(min-width:901px) and (max-width:1100px) {
 .concept-2[data-design="1"] .drive-benefits-banner { padding:28px 22px 24px; }
 .benefits-banner-copy h2 { font-size:28px; line-height:36px; }
}

/* The single design does not use the duplicate spec contrast layer. */
.drive-spec-contrast { display:none; }