/* ================================
CHILL LEAF Promo Grid
White Card Version
================================ */

.cl-promo,
.cl-promo * {
box-sizing: border-box;
}

.cl-promo {
width: min(100% – 32px, 1180px);
margin: 28px auto 34px;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: 190px 190px;
gap: 14px;
}

/* ================================
Remove Link Underlines
================================ */

.cl-promo a,
.cl-promo a:link,
.cl-promo a:visited,
.cl-promo a:hover,
.cl-promo a:active,
.cl-promo a:focus,
.cl-promo-btn,
.cl-promo-card,
.cl-promo-card span {
text-decoration: none !important;
}

/* ================================
Common White Card Design
================================ */

.cl-promo-slider,
.cl-promo-card {
position: relative;
border: 1px solid rgba(20, 40, 20, 0.08);
border-radius: 18px;
background: #fff;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.06);
overflow: hidden;
}

.cl-promo-slider::before,
.cl-promo-card::before {
display: none;
}

/* ================================
Left Custom Slider
================================ */

.cl-promo-slider {
grid-column: 1 / 2;
grid-row: 1 / 3;
min-height: 394px;
}

.cl-promo-slide {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) 46%;
grid-template-rows: auto auto;
grid-template-areas:
“kicker kicker”
“copy visual”;
align-items: start;
column-gap: 16px;
row-gap: 22px;
padding: 28px 34px 50px;
opacity: 0;
transform: translateX(18px);
transition:
opacity 0.65s ease,
transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
pointer-events: none;
}

.cl-promo-slide.is-active {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}

.cl-promo-kicker {
grid-area: kicker;
position: relative;
z-index: 3;
margin: 0;
font-size: 24px;
line-height: 1.15;
font-weight: 900;
color: #07120a;
letter-spacing: -0.035em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.cl-promo-slide__copy {
grid-area: copy;
position: relative;
z-index: 2;
min-width: 0;
align-self: start;
}

.cl-promo-title {
margin: 0 0 12px;
font-size: 40px;
line-height: 0.95;
font-weight: 950;
color: #16870f;
letter-spacing: -0.04em;
}

.cl-promo-lead {
margin: 0 0 18px;
font-size: 14px;
line-height: 1.55;
font-weight: 650;
color: rgba(7, 18, 10, 0.82);
}

.cl-promo-btn,
.cl-promo-card span {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
min-height: 38px;
padding: 0 18px;
border-radius: 8px;
background: linear-gradient(180deg, #31ad24, #16870f);
color: #fff;
font-size: 13px;
font-weight: 850;
line-height: 1;
text-decoration: none !important;
box-shadow: 0 8px 16px rgba(24, 132, 17, 0.18);
}

.cl-promo-btn:hover,
.cl-promo-card:hover span {
color: #fff;
filter: brightness(1.04);
}

.cl-promo-slide__visual {
grid-area: visual;
position: relative;
z-index: 2;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
align-self: center;
}

.cl-promo-slide__visual img {
display: block;
width: 100%;
max-height: 310px;
object-fit: contain;
background: #fff;
border-radius: 14px;
padding: 0;
box-shadow: none;
filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.12));
transform: translateY(4px);
}

/* ================================
Slider Arrows
================================ */

.cl-promo-arrow {
position: absolute;
z-index: 5;
bottom: 22px;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid rgba(20, 40, 20, 0.08);
border-radius: 999px;
background: rgba(255, 255, 255, 0.96);
color: #16870f;
font-size: 30px;
line-height: 30px;
cursor: pointer;
box-shadow: 0 7px 16px rgba(0, 0, 0, 0.08);
}

.cl-promo-arrow–prev {
left: 24px;
}

.cl-promo-arrow–next {
right: 24px;
}

.cl-promo-arrow:hover {
background: #fff;
color: #0f6f0a;
}

/* ================================
Slider Dots
================================ */

.cl-promo-dots {
position: absolute;
z-index: 6;
left: 50%;
bottom: 28px;
transform: translateX(-50%);
display: flex;
gap: 10px;
}

.cl-promo-dots button {
width: 11px;
height: 11px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(7, 18, 10, 0.2);
cursor: pointer;
}

.cl-promo-dots button.is-active {
background: #16870f;
}

/* ================================
Right Cards
================================ */

.cl-promo-card {
display: grid;
grid-template-columns: minmax(0, 1fr) 42%;
align-items: center;
gap: 12px;
padding: 20px 22px;
color: #07120a;
text-decoration: none !important;
}

.cl-promo-card:hover {
color: #07120a;
border-color: rgba(49, 173, 36, 0.28);
box-shadow: 0 16px 38px rgba(0, 0, 0, 0.075);
}

.cl-promo-card–wide {
grid-column: 2 / 4;
}

.cl-promo-card__copy {
position: relative;
z-index: 2;
min-width: 0;
}

.cl-promo-card-title {
margin: 0 0 8px;
font-size: 22px;
line-height: 1.25;
font-weight: 900;
color: #16870f;
letter-spacing: -0.03em;
}

.cl-promo-card p:not(.cl-promo-card-title) {
margin: 0 0 14px;
font-size: 13px;
line-height: 1.65;
font-weight: 600;
color: rgba(7, 18, 10, 0.76);
}

.cl-promo-card span {
min-height: 34px;
padding: 0 14px;
font-size: 13px;
}

.cl-promo-card img {
position: relative;
z-index: 2;
display: block;
width: 100%;
max-height: 145px;
object-fit: contain;
justify-self: end;
background: #fff;
border-radius: 14px;
padding: 0;
box-shadow: none;
filter: drop-shadow(0 10px 13px rgba(0, 0, 0, 0.1));
transition: transform 0.35s ease;
}

.cl-promo-card:hover img {
transform: translateY(-3px) scale(1.025);
}

/* ================================
Tablet
================================ */

@media (max-width: 1024px) {
.cl-promo {
width: min(100% – 24px, 760px);
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
gap: 10px;
margin: 18px auto 28px;
}

.cl-promo-slider {
grid-column: 1 / -1;
grid-row: auto;
min-height: 430px;
}

.cl-promo-slide {
padding: 28px 30px 52px;
row-gap: 20px;
}

.cl-promo-kicker {
font-size: 23px;
}

.cl-promo-title {
font-size: 38px;
}

.cl-promo-card–wide {
grid-column: 1 / -1;
}

.cl-promo-card {
min-height: 170px;
}
}

/* ================================
Mobile
================================ */

@media (max-width: 640px) {
.cl-promo {
width: min(100% – 20px, 520px);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
margin: 16px auto 26px;
}

.cl-promo-slider {
min-height: 330px;
border-radius: 16px;
}

.cl-promo-slide {
grid-template-columns: minmax(0, 1fr) 43%;
grid-template-rows: auto auto;
grid-template-areas:
“kicker kicker”
“copy visual”;
column-gap: 8px;
row-gap: 18px;
padding: 22px 18px 50px;
}

.cl-promo-kicker {
font-size: 22px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.cl-promo-title {
font-size: 38px;
margin-bottom: 10px;
line-height: 0.95;
}

.cl-promo-lead {
font-size: 13px;
line-height: 1.55;
margin-bottom: 16px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.cl-promo-btn {
min-height: 38px;
padding: 0 17px;
font-size: 13px;
}

.cl-promo-slide__visual img {
max-height: 210px;
filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.1));
}

.cl-promo-arrow {
bottom: 20px;
width: 34px;
height: 34px;
font-size: 28px;
line-height: 28px;
}

.cl-promo-arrow–prev {
left: 14px;
}

.cl-promo-arrow–next {
right: 14px;
}

.cl-promo-dots {
bottom: 27px;
}

.cl-promo-dots button {
width: 10px;
height: 10px;
}

.cl-promo-card {
grid-template-columns: 1fr;
min-height: 168px;
padding: 14px;
border-radius: 15px;
}

.cl-promo-card–wide {
grid-template-columns: minmax(0, 1fr) 38%;
min-height: 145px;
}

.cl-promo-card-title {
font-size: 17px;
margin-bottom: 6px;
}

.cl-promo-card p:not(.cl-promo-card-title) {
font-size: 11.5px;
line-height: 1.55;
margin-bottom: 10px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

/* 모바일 하단 두 카드 설명만 1줄 */
.cl-promo-card:not(.cl-promo-card–wide) p:not(.cl-promo-card-title) {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.cl-promo-card span {
min-height: 30px;
padding: 0 11px;
font-size: 11.5px;
}

.cl-promo-card img {
max-height: 88px;
justify-self: center;
filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.08));
}

.cl-promo-card–wide img {
max-height: 112px;
}
}

/* ================================
Small Mobile
================================ */

@media (max-width: 390px) {
.cl-promo-slider {
min-height: 310px;
}

.cl-promo-slide {
padding: 20px 15px 48px;
row-gap: 14px;
}

.cl-promo-kicker {
font-size: 20px;
}

.cl-promo-title {
font-size: 33px;
}

.cl-promo-lead {
font-size: 12px;
}

.cl-promo-slide__visual img {
max-height: 188px;
}

.cl-promo-card-title {
font-size: 16px;
}

.cl-promo-card p:not(.cl-promo-card-title) {
font-size: 11px;
}
}

/* Astra 기본 p margin 무력화 – promo 내부만 */
.entry-content .cl-promo .cl-promo-kicker,
.entry-content .cl-promo .cl-promo-title,
.entry-content .cl-promo .cl-promo-lead,
.entry-content .cl-promo .cl-promo-card-title,
.entry-content .cl-promo .cl-promo-card p {
margin-top: 0;
}

/* ================================
Astra p margin override
================================ */

.entry-content .cl-promo .cl-promo-kicker {
margin: 0 !important;
}

.entry-content .cl-promo .cl-promo-title {
margin: 0 0 12px !important;
}

.entry-content .cl-promo .cl-promo-lead {
margin: 0 0 18px !important;
}

.entry-content .cl-promo .cl-promo-card-title {
margin: 0 0 8px !important;
}

.entry-content .cl-promo .cl-promo-card p:not(.cl-promo-card-title) {
margin: 0 0 14px !important;
}

@media (max-width: 640px) {
.entry-content .cl-promo .cl-promo-title {
margin: 0 0 10px !important;
}

.entry-content .cl-promo .cl-promo-lead {
margin: 0 0 16px !important;
}

.entry-content .cl-promo .cl-promo-card-title {
margin: 0 0 6px !important;
}

.entry-content .cl-promo .cl-promo-card p:not(.cl-promo-card-title) {
margin: 0 0 10px !important;
}
}

document.addEventListener(‘DOMContentLoaded’, function () {
const slider = document.querySelector(‘[data-cl-slider]’);
if (!slider) {
console.log(‘CL slider not found’);
return;
}

const slides = Array.from(slider.querySelectorAll(‘.cl-promo-slide’));
const dots = Array.from(slider.querySelectorAll(‘.cl-promo-dots button’));
const prev = slider.querySelector(‘.cl-promo-arrow–prev’);
const next = slider.querySelector(‘.cl-promo-arrow–next’);

if (!slides.length) {
console.log(‘CL slides not found’);
return;
}

let index = 0;
let timer = null;
const delay = 4500;

function showSlide(nextIndex) {
index = (nextIndex + slides.length) % slides.length;

slides.forEach(function (slide, i) {
if (i === index) {
slide.classList.add(‘is-active’);
} else {
slide.classList.remove(‘is-active’);
}
});

dots.forEach(function (dot, i) {
if (i === index) {
dot.classList.add(‘is-active’);
} else {
dot.classList.remove(‘is-active’);
}
});
}

function goNext() {
showSlide(index + 1);
}

function goPrev() {
showSlide(index – 1);
}

function startAuto() {
stopAuto();
timer = window.setInterval(goNext, delay);
}

function stopAuto() {
if (timer) {
window.clearInterval(timer);
timer = null;
}
}

if (next) {
next.addEventListener(‘click’, function (e) {
e.preventDefault();
goNext();
startAuto();
});
}

if (prev) {
prev.addEventListener(‘click’, function (e) {
e.preventDefault();
goPrev();
startAuto();
});
}

dots.forEach(function (dot, i) {
dot.addEventListener(‘click’, function (e) {
e.preventDefault();
showSlide(i);
startAuto();
});
});

slider.addEventListener(‘mouseenter’, stopAuto);
slider.addEventListener(‘mouseleave’, startAuto);

slider.addEventListener(‘touchstart’, stopAuto, { passive: true });
slider.addEventListener(‘touchend’, startAuto, { passive: true });

showSlide(0);
startAuto();

console.log(‘CL slider loaded’);
});

人気リキッド

Inferno Drop

選ばれている定番リキッドを、
まずはここからチェック。

商品を見る

定番フレーバー

Melody Flow

まろやかな余韻で、
チルタイムを心地よく。

商品を見る

ハーブライン

宵闇の葉

静けさに包まれる
深い香りと落ち着いた余韻を。

商品を見る

ハーブライン

陽光の葉

太陽の恵みを浴びた
爽やかな香りと心地よい余韻を。

商品を見る

‹
›

デトックスリキッド

H4CBD35%配合。
ひと息つきたい時間に。

商品を見る

陽光の葉

太陽の恵みを浴びた
爽やかな香りと、
心地よい余韻を。

商品を見る

宵闇の葉

静けさに包まれる
深い香りと、
落ち着いた時間を。

商品を見る

ショップ