/* ==========================================================================
   s-loop-10 — Special / Campaign Card
   3 display modes (banner / treatment_card / card)
   2 contexts (slider / archive)

   Campaign color is set via data-color attribute on the root element.
   ========================================================================== */

/* ---------- Campaign color mapping ---------- */
.s-loop-10[data-color="red"]    { --campaign-color: var(--color-danger); }
.s-loop-10[data-color="orange"] { --campaign-color: var(--color-badge-initial); }
.s-loop-10[data-color="gold"]   { --campaign-color: var(--color-warning); }
.s-loop-10[data-color="blue"]   { --campaign-color: var(--color-info); }
.s-loop-10[data-color="green"]  { --campaign-color: var(--color-success); }
.s-loop-10[data-color="pink"]   { --campaign-color: var(--color-primary); }
.s-loop-10[data-color="purple"] { --campaign-color: var(--color-badge-monitor); }

/* ---------- Shared elements ---------- */
.s-loop-10__remaining-badge {
    padding: var(--space-3-xs) var(--space-sm);
    background-color: var(--color-danger);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-2-xs);
    font-weight: var(--font-weight-bold);
}

.s-loop-10__ended-badge {
    padding: var(--space-3-xs) var(--space-sm);
    background-color: var(--color-text-light);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-2-xs);
    font-weight: var(--font-weight-bold);
}

.s-loop-10__price-original {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    text-decoration: line-through;
}

.s-loop-10__price-campaign {
    font-weight: var(--font-weight-bold);
    color: var(--campaign-color);
}

.s-loop-10__price-tax {
    color: var(--color-text-light);
    font-size: var(--font-size-2-xs);
}

.s-loop-10__campaign-label {
    display: inline-block;
    padding: var(--space-4-xs) var(--space-xs);
    background-color: rgba(255, 255, 255, 0.25);
    color: var(--color-white);
    font-size: var(--font-size-3-xs);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-3-xs);
}

.s-loop-10__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    width: 100%;
    padding: var(--space-md) 0;
    background-color: var(--campaign-color);
    color: var(--color-white);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: opacity var(--transition-normal);
}

.s-loop-10__cta:hover {
    opacity: 0.85;
}

.s-loop-10__cta .material-icons {
    font-size: var(--font-size-xl);
}

/* =========================================================================
   SLIDER CONTEXT — Compact display for section-special carousel
   ========================================================================= */

/* --- Slider: Banner mode --- */
.s-loop-10--slider-banner {
    display: block;
    width: 100%;
    text-decoration: none;
}

.s-loop-10--slider-banner:hover {
    opacity: 0.85;
}

.s-loop-10__banner-frame {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.s-loop-10__banner-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s-loop-10__banner-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--campaign-color);
}

.s-loop-10__banner-placeholder .material-icons {
    font-size: var(--font-size-7-xl);
    color: var(--color-white);
    opacity: 0.5;
}

.s-loop-10__banner-frame .s-loop-10__remaining-badge {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
}

/* --- Slider: Treatment card mode --- */
.s-loop-10--slider-treatment {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.s-loop-10__campaign-header {
    display: block;
    background-color: var(--campaign-color);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    text-decoration: none;
}

.s-loop-10__campaign-header:hover {
    opacity: 0.85;
}

.s-loop-10__campaign-title {
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-compact);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin: 0;
}

.s-loop-10__campaign-price-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    margin-top: var(--space-3-xs);
}

.s-loop-10__campaign-price-original {
    color: var(--color-white);
    opacity: 0.6;
    font-size: var(--font-size-2-xs);
    text-decoration: line-through;
}

.s-loop-10__campaign-price-current {
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
}

.s-loop-10__treatment-embed {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* --- Slider: Card fallback (treatment_card with no linked treatment) --- */
.s-loop-10__fallback-inner {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--color-border);
}

.s-loop-10__fallback-header {
    background-color: var(--campaign-color);
    padding: var(--space-2-xl) var(--space-xl);
    color: var(--color-white);
}

.s-loop-10__fallback-title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-compact);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0;
    color: var(--color-white);
}

.s-loop-10__fallback-body {
    padding: var(--space-xl);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.s-loop-10__fallback-desc {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-bottom: var(--space-lg);
}

.s-loop-10__fallback-price-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    margin-top: auto;
}

.s-loop-10__fallback-price-row .s-loop-10__price-campaign {
    font-size: var(--font-size-2-xl);
}

/* --- Slider: Card mode --- */
.s-loop-10__card-inner {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--color-border);
}

.s-loop-10__card-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.s-loop-10__card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s-loop-10__card-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--campaign-color);
}

.s-loop-10__card-image-placeholder .material-icons {
    font-size: var(--font-size-6-xl);
    color: var(--color-white);
    opacity: 0.5;
}

.s-loop-10__card-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
}

.s-loop-10__card-badge {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3-xs);
}

.s-loop-10__card-badge-label {
    display: inline-block;
    padding: var(--space-3-xs) var(--space-md);
    background-color: var(--campaign-color);
    color: var(--color-white);
    font-size: var(--font-size-2-xs);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-pill);
}

.s-loop-10__card-remaining {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
}

.s-loop-10__card-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-lg);
}

.s-loop-10__card-title-text {
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-compact);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0;
}

.s-loop-10__card-body {
    padding: var(--space-lg);
}

.s-loop-10__card-desc {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: var(--space-md);
}

.s-loop-10__card-price-divider {
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
}

.s-loop-10__card-price-divider .s-loop-10__price-campaign {
    font-size: var(--font-size-xl);
}

/* =========================================================================
   ARCHIVE CONTEXT — Full card display
   ========================================================================= */

/* --- Archive: Banner style --- */
.s-loop-10--archive-banner {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    grid-row: span 4;
    border: 1px solid var(--color-border);
}

.s-loop-10__favorite {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    z-index: 2;
}

.s-loop-10__favorite--right {
    left: auto;
    right: var(--space-md);
}

.s-loop-10__banner-link {
    display: block;
    position: relative;
    height: 100%;
    text-decoration: none;
}

.s-loop-10__banner-link:hover {
    opacity: 0.85;
}

.s-loop-10__banner-bg {
    position: relative;
    height: 100%;
    background-color: var(--campaign-color);
}

.s-loop-10__banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s-loop-10__banner-content {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-2-xl);
}

.s-loop-10__type-badge {
    align-self: flex-start;
    padding: var(--space-3-xs) var(--space-md);
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--campaign-color);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-xs);
}

.s-loop-10__banner-title {
    font-size: var(--font-size-3-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    margin: 0 0 var(--space-xs);
}

.s-loop-10__banner-price-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.s-loop-10__banner-price-original {
    color: var(--color-white);
    opacity: 0.7;
    font-size: var(--font-size-xl);
    text-decoration: line-through;
}

.s-loop-10__banner-price-campaign {
    font-size: var(--font-size-4-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-warning);
}

.s-loop-10__banner-discount {
    padding: var(--space-4-xs) var(--space-xs);
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.s-loop-10__remaining-badge--abs {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
}

.s-loop-10__remaining-badge--pill {
    padding: var(--space-xs) var(--space-lg);
    border-radius: var(--radius-pill);
}

/* --- Archive: Treatment card style --- */
.s-loop-10--archive-treatment {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    grid-row: span 4;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
}

.s-loop-10__treatment-header {
    padding: var(--space-xl);
    background-color: var(--campaign-color);
    color: var(--color-white);
}

.s-loop-10__treatment-type {
    display: inline-block;
    padding: var(--space-3-xs) var(--space-xs);
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-2-xs);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-xs);
    color: var(--color-white);
}

.s-loop-10__treatment-title {
    font-size: var(--font-size-2-xl);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-3-xs);
}

.s-loop-10__treatment-title a {
    color: var(--color-white);
    text-decoration: none;
}

.s-loop-10__treatment-title a:hover {
    opacity: 0.85;
}

.s-loop-10__treatment-desc {
    color: var(--color-white);
    opacity: 0.8;
    font-size: var(--font-size-sm);
}

.s-loop-10__treatment-meta {
    margin-top: var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.s-loop-10__treatment-remaining {
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--space-3-xs);
    color: var(--color-white);
}

.s-loop-10__treatment-remaining .material-icons {
    font-size: var(--font-size-lg);
    vertical-align: middle;
}

.s-loop-10__treatment-always {
    font-size: var(--font-size-sm);
    color: var(--color-white);
    opacity: 0.8;
}

/* Treatment tag list */
.s-loop-10__treatment-list {
    padding: var(--space-lg);
    flex: 1;
}

.s-loop-10__treatment-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.s-loop-10__treatment-tag {
    padding: var(--space-xs) var(--space-md);
    background-color: var(--color-bg-sub);
    color: var(--color-text);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
}

.s-loop-10__treatment-tag--more {
    background-color: var(--color-bg);
    color: var(--color-text-light);
}

/* Treatment footer CTA */
.s-loop-10__treatment-footer {
    padding: 0 var(--space-xl) var(--space-xl);
}

/* --- Archive: Card style (default) — subgrid 4-row --- */
.s-loop-10--archive-card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: grid;
    width: 100%;
    max-width: var(--card-xl);
    justify-self: center;
    grid-row: span 4;
    grid-template-rows: subgrid;
    border: 1px solid var(--color-border);
}

.s-loop-10--archive-card:hover {
    opacity: 0.85;
}

/* Row 1: Thumbnail（インスタ比率 1:1 — バナー原稿が正方形のため全面表示） */
.s-loop-10__archive-image {
    position: relative;
    aspect-ratio: 1 / 1;
    background-color: var(--color-bg-sub);
    overflow: hidden;
}

.s-loop-10__archive-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s-loop-10__archive-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--campaign-color);
}

.s-loop-10__archive-placeholder .material-icons {
    font-size: var(--font-size-6-xl);
    color: var(--color-white);
    opacity: 0.5;
}

.s-loop-10__archive-badges {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3-xs);
}

.s-loop-10__archive-badge-type {
    padding: var(--space-3-xs) var(--space-sm);
    background-color: var(--campaign-color);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-2-xs);
    font-weight: var(--font-weight-medium);
}

.s-loop-10__archive-badge-plan {
    padding: var(--space-3-xs) var(--space-sm);
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--color-text);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-2-xs);
    font-weight: var(--font-weight-medium);
}

.s-loop-10__archive-favorite {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    z-index: 1;
}

.s-loop-10__archive-remaining {
    position: absolute;
    bottom: var(--space-md);
    right: var(--space-md);
}

/* Row 2: Content */
.s-loop-10__archive-content {
    padding: var(--space-xl) var(--space-xl) 0;
}

.s-loop-10__archive-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-xs);
    line-height: var(--line-height-compact);
}

.s-loop-10__archive-title a {
    color: var(--color-text);
    text-decoration: none;
}

.s-loop-10__archive-title a:hover {
    opacity: 0.85;
}

.s-loop-10__archive-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: var(--line-height-normal);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: var(--space-md);
}

.s-loop-10__archive-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3-xs);
}

.s-loop-10__archive-tag {
    padding: var(--space-3-xs) var(--space-xs);
    background-color: var(--color-bg-sub);
    color: var(--color-text-light);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-2-xs);
}

/* Row 3: Price */
.s-loop-10__archive-price {
    padding: 0 var(--space-xl);
    display: flex;
    align-items: flex-end;
}

.s-loop-10__archive-price-inner {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-md);
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.s-loop-10__archive-price-inner .s-loop-10__price-campaign {
    font-size: var(--font-size-2-xl);
}

.s-loop-10__archive-discount-badge {
    padding: var(--space-4-xs) var(--space-xs);
    background-color: var(--color-bg-sub);
    color: var(--campaign-color);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-2-xs);
    font-weight: var(--font-weight-bold);
}

/* Row 4: CTA */
.s-loop-10__archive-cta {
    padding: 0 var(--space-xl) var(--space-xl);
    display: flex;
    align-items: flex-end;
}