/* ==========================================================================
   맞춤 PICK 홈 섹션 (inc_customize_campaign.php 전용)

   원래 inc_customize_campaign.php 안의 인라인 <style> 이었다. 440줄이 홈 HTML 에
   매 요청 실려 나가 캐시되지 않아 파일로 분리했다(section-card.css 와 같은 패턴).

   ⚠️ 로드 순서 주의 — html_head.php 에서 style.css **뒤에** 링크한다.
      인라인 <style> 은 body 에 있어 style.css 보다 늦게 적용됐다. 앞에 두면
      동일 특이도 규칙이 style.css 에 밀려 레이아웃이 어긋난다.
   ========================================================================== */

/* ── 맞춤 PICK 홈 섹션 헤더  */
.campaign__ .title.pick_title {
    align-items: flex-start;
    gap: var(--spacing-16);
}
.campaign__ .title.pick_title .title_left_inner {
    flex: 1 1 auto;
    min-width: 0;
}
.campaign__ .title.pick_title .tool {
    flex: 0 0 auto;
    margin-left: auto;
}
.campaign__ .title.pick_title h1 {
    display: block;
    font: var(--font-title-s);
    color: var(--color-content-default);
    min-width: 0;
}
.campaign__ .title.pick_title h1:after {
    content: none;
}
.campaign__ .title.pick_title {
    min-height: 0;
    padding-bottom: 0;
}
/* 타이틀 + 설명은 한 덩어리. 각자 margin 을 주면 어긋나 보여서
   그룹으로 묶고 gap 하나로만 간격을 만든다. */
.pick_title_group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-16);
}
.pick_title_group .title.pick_title {
    padding-bottom: 0;
    min-height: 0;
}
.pick_title__sub {
    margin: 0;
    font: var(--font-body-s-regular);
    letter-spacing: var(--body-s-letter);
    color: var(--color-content-subtle);
}
@media (max-width: 800px) {
    .pick_title_group {
        gap: var(--spacing-4);
        margin-bottom: var(--spacing-16);
    }
    .pick_title_group .title.pick_title h1 {
        line-height: 1.4;
    }
    /* 모바일은 섹션이 full-bleed 라 각 요소가 좌우 여백을 직접 갖는다
       (.list_area · .sc_embla__container 와 같은 방식).
       제목만 여백이 있고 설명은 없어 줄이 어긋나던 문제. */
    .pick_title__sub {
        padding-left: var(--spacing-16);
        padding-right: var(--spacing-16);
        font: var(--font-body-s-regular);
        letter-spacing: var(--body-s-letter);
    }
}

.campaign__ .title.pick_title .tool .pick_more,
.pick_more_mo {
    width: auto;
    background-image: none;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
    height: 38px;
    padding: var(--spacing-8) var(--spacing-12);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-8);
    background: var(--color-surface-default);
    font: var(--font-body-s-medium);
    color: var(--color-content-default);
    white-space: nowrap;
}
.campaign__ .title.pick_title .tool .pick_more b,
.pick_more_mo b {
    color: var(--color-content-brand);
    font-weight: inherit;
}
.pick_more__icon {
    display: flex;
    width: 16px;
    height: 16px;
}

.pick_more_mo {
    display: none;
}
@media (max-width: 800px) {
    .campaign__ .title.pick_title .tool .pick_more {
        display: none;
    }
    .pick_more_mo {
        display: inline-flex;
        width: 100%;
        height: 48px;
        padding: 0 var(--spacing-12);
        margin-top: var(--spacing-20);
    }
    .pick_more_mo .pick_more__icon {
        width: 24px;
        height: 24px;
    }
}

.pick_title__keyword {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    transition: width 250ms ease-out;
}
.pick_title__keyword-inner {
    display: inline-block;
    color: var(--color-content-brand);
    white-space: nowrap;
}
.pick_title__keyword-inner.is-out {
    transform: translateY(-12px);
    opacity: 0;
    transition: transform 120ms ease-in, opacity 120ms ease-in;
}
.pick_title__keyword-inner.is-in {
    transform: translateY(12px);
    opacity: 0;
}
.pick_title__keyword-inner.is-settled {
    transform: translateY(0);
    opacity: 1;
    transition: transform 160ms ease-out, opacity 160ms ease-out;
}
.pick_title__keyword-measure {
    position: absolute;
    visibility: hidden;
    white-space: nowrap;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .pick_title__keyword,
    .pick_title__keyword-inner {
        transition: none;
    }
}

.pick_setup_card {
    display: flex;
}
.pick_setup_card__link {
    width: 100%;
    flex: 1;
    --pick-card-grad-from: #00CDDE;
    --pick-card-grad-mid:  #00D7E8;
    --pick-card-grad-to:   #CCFAFF;
    --pick-card-cta-base:  #DDFCFF;

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--spacing-24) var(--spacing-16) var(--spacing-20);
    border-radius: var(--radius-10);
    overflow: hidden;
    box-shadow: 0 4px 44px rgba(0, 0, 0, 0.05);
    background-image: linear-gradient(170.98deg,
        var(--pick-card-grad-from) 6.709%,
        var(--pick-card-grad-mid) 17.609%,
        var(--pick-card-grad-to) 60.69%);
}
.pick_setup_card__blob,
.pick_setup_card__illust {
    position: absolute;
    pointer-events: none;
}
.pick_setup_card__blob {
    left: -33.1%;    /* -90 / 272 */
    top: 50.9%;      /*  187 / 367 */
    width: 172.4%;   /*  469 / 272 */
    height: auto;
    opacity: 0.5;
}
.pick_setup_card__illust {
    left: 6.6%;      /*   18 / 272 */
    top: 26.4%;      /*   97 / 367 */
    width: 87.5%;    /*  238 / 272 */
    height: auto;
}
.pick_setup_card__body,
.pick_setup_card__cta {
    position: relative;
}
.pick_setup_card__title {
    font: var(--font-title-xs);
    color: var(--color-content-inverse);
}
.pick_setup_card__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 var(--spacing-12);
    border: 1px solid var(--color-content-inverse);
    border-radius: var(--radius-8);
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%),
        linear-gradient(90deg, var(--pick-card-cta-base) 0%, var(--pick-card-cta-base) 100%);
    filter: drop-shadow(0 4px 10px rgba(201, 230, 232, 0.9));
    font: var(--font-body-m-medium);
    color: var(--color-content-brand);
}
.pick_setup_card__cta-icon {
    display: flex;
    width: 24px;
    height: 24px;
}
.pick_setup_card__label--mo { display: none; }

@media (max-width: 800px) {
    .mobile_campaign_list_cont {
        padding-left: 0;
        padding-right: 0;
    }
    .ccl_embla__container {
        gap: var(--spacing-12);
    }
    /* 마지막 카드 뒤 여백 — 컨테이너 padding 은 Embla(containScroll:'trimSnaps')가
       스냅 범위 밖으로 잘라내므로 마지막 슬라이드의 margin 으로 준다 */
    .ccl_embla__container > *:last-child {
        margin-right: var(--spacing-16);
    }
    .ccl_embla__slide.campaign_card { flex: 0 0 160px; }

    .pick_setup_card__link {
        padding: var(--spacing-16) var(--spacing-12) var(--spacing-12);
        background-image: linear-gradient(155.86deg,
            var(--pick-card-grad-from) 6.709%,
            var(--pick-card-grad-mid) 17.609%,
            var(--pick-card-grad-to) 60.69%);
    }
    .pick_setup_card__blob  { left: -52.4%; top: 73.0%; width: 286.0%; }
    .pick_setup_card__illust { left: 0; top: 38.1%; width: 113.4%; }
    .pick_setup_card__title { font: var(--font-body-m-semibold); }
    .pick_setup_card__cta   { height: 40px; }
    .pick_setup_card__label--pc { display: none; }
    .pick_setup_card__label--mo { display: inline; }
}

.pick_empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16);
    padding: var(--spacing-20);
    border-radius: var(--radius-12);
    background: var(--color-surface-wash);
}
.pick_empty__text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}
.pick_empty__title {
    font: var(--font-title-xs);
    letter-spacing: var(--title-xs-letter);
    color: var(--color-content-default);
}
.pick_empty__desc {
    font: var(--font-body-s-regular);
    letter-spacing: var(--body-s-letter);
    color: var(--color-content-subtle);
}
.pick_empty__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
    height: 56px;
    padding: 0 var(--spacing-16) 0 var(--spacing-24);
    border-radius: var(--radius-8);
    background: var(--color-surface-brand);
    font: var(--font-body-m-medium);
    letter-spacing: var(--body-m-letter);
    color: var(--color-content-inverse);
    white-space: nowrap;
}
.pick_empty__cta-icon {
    display: flex;
    width: 24px;
    height: 24px;
}

@media (max-width: 800px) {
    .pick_empty {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-16);
        /* 모바일 섹션은 full-bleed 라 좌우 여백을 요소가 직접 갖는다
           (.list_area · .pick_title__sub 와 같은 방식) */
        padding: 0 var(--spacing-16) var(--spacing-8);
        border-radius: 0;
        background: none;
    }
    .pick_empty__cta { height: 48px; }
}

.pick_cards .campaign_card .details .subject {
    margin-top: var(--spacing-4);
    font: var(--font-body-m-semibold);
    letter-spacing: var(--body-m-letter);
    line-height: var(--body-m-line);
    -webkit-line-clamp: 1;
}
.pick_cards .campaign_card .details .desc > div > div {
    height: var(--body-s-line);
    line-height: var(--body-s-line);
}
/* 매체 아이콘 ↔ 유형 칩 8px */
.pick_cards .campaign_card .tag_area .cp_type {
    gap: var(--spacing-8);
}
.pick_cards .campaign_card .tag_area .cp_type .rs_cp_type_chip {
    margin-left: 0;
}

@media (max-width: 800px) {
    .pick_cards .campaign_card .tag_area .cp_type img { max-width: 16px; }
    .pick_cards .campaign_card .tag_area .rs_cp_type_chip,
    .pick_cards .campaign_card .tag_area .timer {
        font: var(--font-caption-m);
        letter-spacing: var(--caption-m-letter);
    }
    .pick_cards .campaign_card .tag_area .rs_cp_type_chip { height: 22px; }
    .pick_cards .campaign_card .details .subject {
        font: var(--font-body-s-medium);
        letter-spacing: var(--body-s-letter);
    }
    .pick_cards .campaign_card .details .subject .brand { font-weight: 600; }
    .pick_cards .campaign_card .details .desc > div {
        font: var(--font-caption-m);
        letter-spacing: var(--caption-m-letter);
    }
    .pick_cards .campaign_card .details .desc > div > div {
        height: var(--caption-m-line);
        line-height: var(--caption-m-line);
    }
    /* .list_area 의 모바일 2단 그리드 여백이 캐러셀 간격에 더해지는 것을 막는다 */
    .pick_cards .campaign_card.ccl_embla__slide { margin: 0; }
}
.campaign_slide .custom_campaign.swiper-button-prev,
.campaign_slide .custom_campaign.swiper-button-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background-image: none;
    background-color: var(--color-surface-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-full);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
}
.pick_nav__icon {
    display: flex;
    width: 23px;
    height: 23px;
}
/* 위를 향한 셰브론을 좌/우로 돌린다 */
.custom_campaign.swiper-button-prev .pick_nav__icon { transform: rotate(-90deg); }
.custom_campaign.swiper-button-next .pick_nav__icon { transform: rotate(90deg); }

.pick_cards .campaign_card .imgBox .round_badge {
    gap: 0;
    height: 32px;
    padding: 0 var(--spacing-8);
}
@media (max-width: 800px) {
    .pick_cards .campaign_card .imgBox .round_badge {
        height: 22px;
        padding: 0 var(--spacing-4);
    }
    .pick_cards .campaign_card .imgBox .round_badge__num,
    .pick_cards .campaign_card .imgBox .round_badge__text {
        font: var(--font-caption-m);
        letter-spacing: var(--caption-m-letter);
    }
}

.pick_cards .campaign_card {
    max-width: none;
}

.customize_campaignSwiper .swiper-slide {
    height: auto;
}

/* 맞춤 캠페인 오버레이 */
.campaign_slide .campaign_card .imgBox {
    position: relative;
}
.campaign_slide .campaign_card .imgBox .sold_out,
.campaign_slide .campaign_card .imgBox .open_yejung {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    z-index: 1;
}
.campaign_slide .campaign_card .imgBox .sold_out span,
.campaign_slide .campaign_card .imgBox .open_yejung span {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}
@media (max-width: 800px) {
    .campaign_slide .campaign_card .imgBox .sold_out span,
    .campaign_slide .campaign_card .imgBox .open_yejung span {
        font-size: 14px;
    }
}

/* ── PC: 설정 카드 고정 + 나머지 캠페인만 스와이프
   설정 카드는 스와이퍼 밖의 고정 컬럼. 폭은 기존 5칸 균등 배치와 동일하게
   (100% - gap*4) / 5 로 잡고, 스와이퍼가 남은 영역을 채운다. */
.pick_setup_card--fixed { display: none; }

@media (min-width: 801px) {
    .pick_cards_row--has-setup {
        display: flex;
        gap: var(--spacing-16);
        align-items: stretch;
    }
    .pick_cards_row--has-setup .pick_setup_card--fixed {
        display: flex;
        flex: 0 0 calc((100% - (var(--spacing-16) * 4)) / 5);
        min-width: 0;
    }
    .pick_cards_row--has-setup .customize_campaignSwiper {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* 설정 카드가 고정된 상태에서는 이전 화살표를 스와이프 영역 시작점으로 옮긴다.
   (고정 카드 옆에 두면 그 카드도 넘어간다고 읽힘)
   설정 카드 폭 (100% - gap*4)/5 + gap 만큼 안쪽으로 이동. */
@media (min-width: 801px) {
    .campaign_slide .inner:has(.pick_cards_row--has-setup) .custom_campaign.swiper-button-prev {
        left: calc((100% - (var(--spacing-16) * 4)) / 5 + var(--spacing-16) - 30px);
    }
}

/* ── 모바일: 설정 카드 고정 + 나머지 캠페인만 스크롤
   인기 캠페인(.popular_content_wrap) 과 같은 패턴 —
   좌측 고정 폭 카드 + 남은 영역 overflow:hidden 캐러셀. */
.pick_setup_card--mo { display: none; }

@media (max-width: 800px) {
    .pick_mo_row--has-setup {
        display: flex;
        align-items: stretch;
        gap: var(--spacing-12);
    }
    .pick_mo_row--has-setup .pick_setup_card--mo {
        display: flex;
        flex: 0 0 164px;
        min-width: 0;
    }
    .pick_mo_row--has-setup .ccl_embla {
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
    }
}

/* 모바일에서는 Swiper 자체가 숨겨진다(embla 사용). 네비 버튼만 남아
   카드 위에 떠 있던 문제 — 함께 숨긴다. */
@media (max-width: 800px) {
    .campaign_slide button.custom_campaign[class*="swiper-button"] {
        display: none;
    }
}

/* 설명 줄바꿈 — 모바일에서 한 줄에 안 들어가 잘리던 문제 */
.pick_title__sub-br { display: none; }
@media (max-width: 800px) {
    .pick_title__sub-br { display: inline; }
}