/* =========================================
   [1] 기본 컨테이너 & 뱃지 (공통)
========================================= */
.design-system-optioncard {
    position: relative;
    border: 1px solid var(--Components-basic-gray-color-border-color-border-tertiary);
    background-color: var(--Components-basic-gray-color-background-color-bg-white);
    box-sizing: border-box;
    margin-top: var(--Base-8size-Spacing-300);
}
.design-system-optioncard.type-title {
    margin-top: 0;
}
.design-system-optioncard.radius-2,
.design-system-optioncard.radius-8 {
    padding: var(--Components-card-vertical-padding) var(--Components-card-horizon-padding);
}
.design-system-optioncard.radius-100 {
    padding: var(--Components-card-horizon-padding) var(--Components-contents-vertical-padding);
}
.design-system-optioncard.select {
    border: 1px solid var(--Components-basic-gray-color-border-color-border-active);
}
.design-system-optioncard.type-addition {
    padding: var(--Components-contents-vertical-padding) var(--Components-card-horizon-padding);
}

/* =========================================
   [1-1] 뱃지 공통 스타일
========================================= */
.design-system-optioncard .opt-badges {
    position: absolute;
    top: calc(-1 * var(--px-9));
    display: flex;
    z-index: 2;
}

.design-system-optioncard.type-list .opt-badges,
.design-system-optioncard.type-addition .opt-badges,
.design-system-optioncard.type-title .opt-badges {
    gap: var(--Components-column-gap-small);
}

.design-system-optioncard.type-gallery .opt-badges {
    gap: var(--Base-8size-Spacing-50);
}

/* 출력 순서 제어 */
.design-system-optioncard .badge-order-1 { order: 1; }
.design-system-optioncard .badge-order-2 { order: 2; }
.design-system-optioncard .badge-order-3 { order: 3; }

/* =========================================
   [1-2] 카드 타입별 뱃지 위치 및 정렬 방향
========================================= */
/* List: 우측 상단 배치, 가로 정렬(우측 기준) */
.design-system-optioncard.type-list .opt-badges {
    right: var(--px-8);
    left: auto;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* Gallery: 좌측 상단 배치, 세로 정렬(아래 방향) */
.design-system-optioncard.type-gallery .opt-badges {
    left: var(--px-6);
    right: auto;
    flex-direction: column;
    align-items: flex-start;
}

/* Addition & Title: 좌측 상단 배치, 가로 정렬(우측 방향) */
.design-system-optioncard.type-addition .opt-badges,
.design-system-optioncard.type-title .opt-badges {
    left: var(--px-8);
    right: auto;
    flex-direction: row;
    align-items: flex-start;
}

/* =========================================
   [2] 공통 타이포그래피 및 엘리먼트
========================================= */
.design-system-optioncard .opt-name {
    color: var(--Components-basic-gray-color-text-color-text-strong);
}

.design-system-optioncard .opt-tags {
    display: flex;
    gap: var(--Components-column-gap-small);
}

.design-system-optioncard .opt-tag {
    color: var(--color-main);
    border: 1px solid var(--Components-basic-gray-color-border-color-border-tertiary);
    padding: 0 var(--Base-4size-detail-Spacing-150);
    border-radius: 2px;
}

.design-system-optioncard .opt-monthly {
    color: var(--color-main);
    border: 1px solid var(--Components-basic-gray-color-border-color-border-tertiary);
    padding: 0 var(--Base-8size-Spacing-200);
    border-radius: 100px;
    background-color: var(--Base-Common-white);
}

.design-system-optioncard .opt-price-wrap {
    display: flex;
    align-items: center;
    gap: var(--Components-column-gap-small);
}

.design-system-optioncard .opt-price-wrap del {
    color: var(--Components-basic-gray-color-text-color-text-disabled);
}

.design-system-optioncard .opt-price-wrap .opt-price {
    color: var(--Components-basic-gray-color-text-color-text-strong);
}

.design-system-optioncard .opt-thumb {
    width: var(--px-72);
    height: var(--px-72);
    border-radius: 2px;
    flex-shrink: 0;
    overflow: hidden;
}

.design-system-optioncard .opt-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================
   [3] 레이아웃 타입별 스타일 분기
========================================= */
/* Type: List */
.design-system-optioncard.type-list .opt-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.design-system-optioncard.type-list .opt-left {
    display: flex;
    align-items: center;
    gap: var(--Components-column-gap-small);
}
.design-system-optioncard.type-list .opt-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Type: Gallery */
.design-system-optioncard.type-gallery {
    padding: var(--Components-contents-vertical-padding) var(--Components-card-horizon-padding);
}
.design-system-optioncard.type-gallery .opt-inner {
    display: flex;
    flex-direction: column;
    gap: var(--Components-column-gap-large);
}
.design-system-optioncard.type-gallery .opt-thumb {
    width: 100%;
    height: var(--px-128);
}
.design-system-optioncard.type-gallery .opt-info {
    display: flex;
    flex-direction: column;
    gap: var(--Base-8size-Spacing-100);
}
.design-system-optioncard.type-gallery .opt-info .opt-name-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--Base-8size-Spacing-50);
}

/* Type: Addition */
.design-system-optioncard.type-addition .opt-inner {
    display: flex;
    gap: 16px;
    align-items: stretch;
}
.design-system-optioncard.type-addition .opt-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--Base-8size-Spacing-100);
}
.design-system-optioncard.type-addition .opt-info-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Type: Title */
.design-system-optioncard.type-title .opt-inner.center-align {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =========================================
   [4] 다중 배열 레이아웃 (Grid/Flex)
========================================= */
/* 부모 컨테이너(sel_opt)에 flex-wrap 적용 */
.sel_opt {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--Base-8size-Spacing-300);
}
.sel_opt:has(.type-title) {
    gap: var(--Components-card-horizon-padding) var(--Components-column-gap-large);
}

/* 기본적으로 모든 카드는 한 줄에 하나씩 (100%) */
.design-system-optioncard {
    width: 100%;
}

/* Gallery 타입일 때만 한 줄에 두 개씩 배치 (50% - 가로간격의 절반) */
.design-system-optioncard.type-gallery {
    width: calc(50% - (var(--Base-8size-Spacing-300)/2));
}

/* =========================================
   [5] Addition 타입 전용 가로 스크롤 레이아웃
========================================= */

/* 부모 컨테이너 안에 addition 타입이 있을 경우, 자동으로 가로 스크롤 활성화 */
.sel_opt:has(.type-addition) {
    flex-wrap: nowrap !important; /* 줄바꿈 금지 */
    overflow-x: auto;
    padding-bottom: 12px !important; /* 스크롤바가 겹치지 않도록 하단 여백 추가 */
    gap: var(--Components-column-gap-large);
    
    /* 파이어폭스용 얇은 스크롤바 */
    scrollbar-width: thin; 
    scrollbar-color: #E5E7EB transparent;
}

/* 크롬, 사파리 등 웹킷 브라우저용 스크롤바 디자인 (깔끔하게 표시) */
.sel_opt:has(.type-addition)::-webkit-scrollbar {
    height: 6px;
}
.sel_opt:has(.type-addition)::-webkit-scrollbar-thumb {
    background-color: #E5E7EB;
    border-radius: 10px;
}
.sel_opt:has(.type-addition)::-webkit-scrollbar-track {
    background: transparent;
}

/* Addition 카드의 가로폭 고정 및 축소 방지 */
.design-system-optioncard.type-addition {
    width: 346px;
    flex-shrink: 0;
}

/* =========================================
   [6] Title 타입 전용 홀/짝 그리드 레이아웃
========================================= */

/* 1. 기본적으로 Title 타입은 1/2 폭을 가집니다 (gap 8px 고려하여 -4px) */
.design-system-optioncard.type-title {
    width: calc(50% - 8px);
}

/* 2. 홀수 개의 마지막 옵션일 경우 전체 폭(100%)을 가집니다 */
/* 작동 원리: 마지막 요소(:last-child)이면서 동시에 홀수 번째(:nth-child(odd))인 경우를 찾아냅니다. */
.design-system-optioncard.type-title:last-child:nth-child(odd) {
    width: 100%;
}