@charset "utf-8";
/* 제철 과일 페이지 전용 스타일 (공통은 fl-sub.css).
   가운데 한 줄 → 3월~2월 달 띠(지금 달 표시)와 계절 카드 4개(지금 계절만 딥그린) → 과일 누끼가 떠 있는 색 카드 3장 기준 → 사진 위 이어 보기 카드. */

#container > #sub-fruit { background: var(--fl-cream); }
#sub-fruit { --fl-fr-gap: clamp(100px, 10vw, 160px); color: var(--fl-ink); }
#sub-fruit p, #sub-fruit h3, #sub-fruit span, #sub-fruit strong { word-break: keep-all; overflow-wrap: break-word; }
body:has(#sub-fruit) { background: var(--fl-cream) !important; } /* gw.css 의 body #f8f8f8 !important 를 이 페이지에서만 덮는다 */
body:has(#sub-fruit) #container_wr, body:has(#sub-fruit) .gw-footer-container { background: var(--fl-cream); }

/* ---------- 머리 ---------- */
#sub-fruit .fl-fr-intro { padding: clamp(80px, 8vw, 128px) 0 clamp(56px, 6vw, 88px); text-align: center; }
#sub-fruit .fl-fr-intro-title { font-size: clamp(30px, 3.6vw, 50px); font-weight: 800; letter-spacing: -0.04em; color: var(--fl-dark); }
#sub-fruit .fl-fr-intro-desc { margin-top: 18px; font-size: 17px; line-height: 1.85; color: var(--fl-ink-2); }
.fl-reveal-on #sub-fruit .fl-fr-intro-title { transition-delay: .1s; }
.fl-reveal-on #sub-fruit .fl-fr-intro-desc { transition-delay: .2s; }

/* ---------- 한 해 제철 과일 ---------- */
#sub-fruit .fl-fr-year { padding-bottom: var(--fl-fr-gap); }
/* 달 띠: 3월~2월 12칸, 계절마다 네 칸씩 한 덩어리로 둥글게. 지금 계절은 딥그린, 지금 달에는 '지금' 말풍선 */
#sub-fruit .fl-fr-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-bottom: 20px; padding-top: 34px; }
#sub-fruit .fl-fr-month {
    position: relative; display: flex; align-items: center; justify-content: center; height: 44px;
    background: var(--fl-white); font-size: 14px; font-weight: 700; color: var(--fl-ink-3);
}
#sub-fruit .fl-fr-month:nth-child(3n+1) { border-radius: 999px 0 0 999px; margin-left: 4px; }
#sub-fruit .fl-fr-month:nth-child(3n) { border-radius: 0 999px 999px 0; margin-right: 4px; }
#sub-fruit .fl-fr-month.is-season { background: var(--fl-dark); color: color-mix(in srgb, var(--fl-cream) 70%, transparent); }
#sub-fruit .fl-fr-month.is-now { color: var(--fl-white); font-weight: 800; }
#sub-fruit .fl-fr-month em {
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px;
    background: var(--fl-mango); font-size: 12px; font-style: normal; font-weight: 800; color: var(--fl-white); white-space: nowrap;
}
#sub-fruit .fl-fr-month em::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--fl-mango); }
/* 달 띠 등장: 칸이 왼쪽부터 차례로 */
#sub-fruit .fl-fr-month { transition: opacity .5s ease, transform .5s cubic-bezier(.22, .8, .24, 1); transition-delay: calc(var(--fl-mi) * .04s); }
.fl-reveal-on #sub-fruit .fl-fr-months[data-fl-reveal]:not(.is-in) { opacity: 1; transform: none; }
.fl-reveal-on #sub-fruit .fl-fr-months:not(.is-in) .fl-fr-month { opacity: 0; transform: translateY(10px); }

/* 계절 카드 4개 — 흰 카드, 지금 계절만 딥그린 */
#sub-fruit .fl-fr-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
#sub-fruit .fl-fr-card { display: flex; flex-direction: column; min-height: 360px; padding: 32px 28px; box-sizing: border-box; border-radius: 28px; background: var(--fl-white); }
.fl-reveal-on #sub-fruit .fl-fr-card { transition-delay: calc(var(--fl-ci) * .1s); }
#sub-fruit .fl-fr-card-en { font-family: var(--fl-font-display); font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--fl-mango); }
#sub-fruit .fl-fr-card-ko { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--fl-dark); }
#sub-fruit .fl-fr-card-ko em { padding: 4px 10px; border-radius: 999px; background: var(--fl-mango); font-size: 12px; font-style: normal; font-weight: 800; letter-spacing: 0; color: var(--fl-white); }
#sub-fruit .fl-fr-card-months { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--fl-ink-3); }
#sub-fruit .fl-fr-card-fruits { margin-top: 28px; border-top: 1px solid var(--fl-line); }
#sub-fruit .fl-fr-card-fruits li { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--fl-line); }
#sub-fruit .fl-fr-card-fruits strong { font-size: 20px; font-weight: 800; color: var(--fl-dark); }
#sub-fruit .fl-fr-card-note { font-size: 14px; font-weight: 600; color: var(--fl-primary); }
#sub-fruit .fl-fr-card-vars { font-size: 15px; line-height: 1.6; color: var(--fl-ink-2); }
#sub-fruit .fl-fr-card.is-now { background: var(--fl-dark); box-shadow: 0 24px 48px rgba(30, 53, 39, .22); }
#sub-fruit .fl-fr-card.is-now .fl-fr-card-en { color: var(--fl-mango-on-dark); }
#sub-fruit .fl-fr-card.is-now .fl-fr-card-ko, #sub-fruit .fl-fr-card.is-now .fl-fr-card-fruits strong { color: var(--fl-white); }
#sub-fruit .fl-fr-card.is-now .fl-fr-card-months, #sub-fruit .fl-fr-card.is-now .fl-fr-card-vars { color: color-mix(in srgb, var(--fl-cream) 80%, transparent); }
#sub-fruit .fl-fr-card.is-now .fl-fr-card-note { color: var(--fl-mango-on-dark); }
#sub-fruit .fl-fr-card.is-now .fl-fr-card-fruits, #sub-fruit .fl-fr-card.is-now .fl-fr-card-fruits li { border-color: color-mix(in srgb, var(--fl-cream) 22%, transparent); }

/* ---------- 고르는 기준: 색이 다른 세로 카드 3장 ---------- */
#sub-fruit .fl-fr-rules { padding-bottom: var(--fl-fr-gap); }
#sub-fruit .fl-fr-head-title { margin-bottom: clamp(40px, 4vw, 64px); font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; letter-spacing: -0.03em; text-align: center; color: var(--fl-dark); }
#sub-fruit .fl-fr-rule-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: end; }
#sub-fruit .fl-fr-rc {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 460px; padding: 36px 32px; box-sizing: border-box;
    border-radius: 32px; overflow: hidden; transition: transform .5s cubic-bezier(.22, .8, .24, 1), box-shadow .5s ease;
}
/* 계단처럼: 가운데 카드가 가장 높다 */
/* 카드 색은 과일 색에 맞춘다: 딸기 레드 · 망고 옐로 · 블루베리 블루 */
#sub-fruit .fl-fr-rc.is-c1 { --fl-fruit: #c8323a; background: #f9e1e0; min-height: 440px; }
#sub-fruit .fl-fr-rc.is-c2 { --fl-fruit: #d98a0b; background: #fbeccb; min-height: 520px; }
#sub-fruit .fl-fr-rc.is-c3 { --fl-fruit: #3d4a86; background: #e3e6f3; min-height: 480px; }
#sub-fruit .fl-fr-rc-no { position: absolute; top: 28px; left: 32px; font-family: var(--fl-font-display); font-size: 18px; font-weight: 600; color: var(--fl-ink-3); }
/* 과일 누끼: 카드 위쪽에 떠서 천천히 흔들린다 */
#sub-fruit .fl-fr-rc-img { position: absolute; top: 28px; right: 24px; width: 46%; max-width: 200px; animation: fl-fr-bob 4.5s ease-in-out infinite; animation-delay: calc(var(--fl-ri) * -1.4s); }
#sub-fruit .fl-fr-rc-img img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(30, 53, 39, .22)); transition: transform .6s cubic-bezier(.22, .8, .24, 1); }
@keyframes fl-fr-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
#sub-fruit .fl-fr-rc-en { font-family: var(--fl-font-display); font-size: clamp(48px, 5vw, 76px); font-weight: 700; line-height: .95; text-transform: uppercase; color: var(--fl-fruit); }
#sub-fruit .fl-fr-rc-no { color: color-mix(in srgb, var(--fl-fruit) 60%, transparent); }
#sub-fruit .fl-fr-rc-ko { margin-top: 14px; font-size: 22px; font-weight: 800; color: var(--fl-dark); }
#sub-fruit .fl-fr-rc-desc { margin-top: 10px; font-size: 16px; line-height: 1.7; color: var(--fl-ink-2); }
/* 호버: 카드가 떠오르고 과일이 커지며 돈다 */
#sub-fruit .fl-fr-rc:hover { transform: translateY(-10px); box-shadow: 0 28px 48px rgba(30, 53, 39, .16); }
#sub-fruit .fl-fr-rc:hover .fl-fr-rc-img img { transform: scale(1.12) rotate(10deg); }
/* 등장: 카드는 아래에서 차례로, 과일은 뒤이어 튀어 오른다 */
.fl-reveal-on #sub-fruit .fl-fr-rc { transition: opacity .9s ease, transform .9s cubic-bezier(.22, .8, .24, 1), box-shadow .5s ease; transition-delay: calc(var(--fl-ri) * .15s); }
.fl-reveal-on #sub-fruit .fl-fr-rc.is-in:hover { transition-delay: 0s; }
.fl-reveal-on #sub-fruit .fl-fr-rc:not(.is-in) { transform: translateY(80px); }
#sub-fruit .fl-fr-rc-img { transition: opacity .6s ease, scale .8s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(.4s + var(--fl-ri) * .15s); }
.fl-reveal-on #sub-fruit .fl-fr-rc:not(.is-in) .fl-fr-rc-img { opacity: 0; scale: .4; }

/* ---------- 이어 보기: 사진 위 딥그린 카드 ---------- */
#sub-fruit .fl-fr-next { padding-bottom: var(--fl-fr-gap); }
#sub-fruit .fl-fr-next-card { --fl-focus: var(--fl-white); position: relative; isolation: isolate; overflow: hidden; padding: clamp(64px, 8vw, 112px) 24px; border-radius: 40px; text-align: center; background: var(--fl-dark); }
#sub-fruit .fl-fr-next-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
#sub-fruit .fl-fr-next-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(30, 53, 39, .72); }
#sub-fruit .fl-fr-next-en { font-family: var(--fl-font-display); font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--fl-mango-on-dark); }
#sub-fruit .fl-fr-next-title { margin-top: 10px; font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -0.03em; color: var(--fl-white); }
#sub-fruit .fl-fr-next-desc { margin-top: 16px; font-size: 17px; line-height: 1.75; color: var(--fl-cream); }
#sub-fruit .fl-fr-next-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }

/* 계절 카드는 4열 1행을 최대한 유지 — 좁아질수록 카드 안 여백·글자만 줄인다 */
@media (max-width: 1200px) {
    #sub-fruit .fl-fr-cards { gap: 12px; }
    #sub-fruit .fl-fr-card { padding: 28px 20px; border-radius: 24px; }
    #sub-fruit .fl-fr-card-ko { gap: 6px; font-size: 26px; }
    #sub-fruit .fl-fr-card-ko em { padding: 3px 8px; font-size: 11px; }
    #sub-fruit .fl-fr-card-fruits strong { font-size: 18px; }
    #sub-fruit .fl-fr-card-vars { font-size: 14px; }
}
@media (max-width: 1024px) {
    #sub-fruit .fl-fr-rule-cards { grid-template-columns: 1fr; gap: 14px; }
    #sub-fruit .fl-fr-rc, #sub-fruit .fl-fr-rc.is-c1, #sub-fruit .fl-fr-rc.is-c2, #sub-fruit .fl-fr-rc.is-c3 { min-height: 300px; }
    #sub-fruit .fl-fr-rc-img { width: 34%; max-width: 160px; }
    #sub-fruit .fl-fr-card { min-height: 0; }
    #sub-fruit .fl-fr-next-card { border-radius: 28px; }
}
@media (max-width: 768px) {
    /* 4열이 비좁아지면 지금 계절만: 달 띠는 지금 계절 석 달, 카드는 지금 계절 한 장 */
    #sub-fruit .fl-fr-months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #sub-fruit .fl-fr-month:not(.is-season) { display: none; }
    #sub-fruit .fl-fr-month { transition-delay: 0s; }
    /* 석 달은 흰 띠로 두고 지금 달만 딥그린 알약으로 */
    #sub-fruit .fl-fr-month.is-season { isolation: isolate; background: var(--fl-white); color: var(--fl-ink-3); }
    #sub-fruit .fl-fr-month.is-now { color: var(--fl-white); }
    #sub-fruit .fl-fr-month.is-now::before { content: ""; position: absolute; inset: 4px; z-index: -1; border-radius: 999px; background: var(--fl-dark); }
    #sub-fruit .fl-fr-cards { grid-template-columns: 1fr; }
    #sub-fruit .fl-fr-card:not(.is-now) { display: none; }
    #sub-fruit .fl-fr-card { padding: 32px 28px; border-radius: 28px; }
    #sub-fruit .fl-fr-card-ko { gap: 10px; font-size: 30px; }
    #sub-fruit .fl-fr-card-ko em { padding: 4px 10px; font-size: 12px; }
    #sub-fruit .fl-fr-card-fruits strong { font-size: 20px; }
    #sub-fruit .fl-fr-card-vars { font-size: 15px; }
}
@media (max-width: 576px) {
    #sub-fruit .fl-fr-months { padding-top: 32px; }
    #sub-fruit .fl-fr-month { height: 40px; }
    #sub-fruit .fl-fr-card { padding: 26px 22px; border-radius: 22px; }
    #sub-fruit .fl-fr-card-ko { font-size: 26px; }
    #sub-fruit .fl-fr-next-card { border-radius: 24px; }
    #sub-fruit .fl-fr-next-desc { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    #sub-fruit .fl-fr-month { transition: none; }
    #sub-fruit .fl-fr-rc-img { animation: none; }
    #sub-fruit .fl-fr-rc, #sub-fruit .fl-fr-rc-img img { transition: none; }
}