@charset "utf-8";
/* 저당 디저트 페이지 전용 스타일 (공통은 fl-sub.css).
   다른 소개 페이지와 같은 톤(크림·딥그린·라운드·Oswald)이되 배치는 다르게 —
   큰 영문 두 줄 → 스크롤하면 한 단어씩 진해지는 소개 글 → 위로 차례로 쌓이는 원칙 카드 → 인스타 피드형 저당 메뉴 타일 → 사진 카드. */

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

#sub-lowsugar .fl-ls-kicker { font-family: var(--fl-font-display); font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--fl-mango); }
#sub-lowsugar .fl-ls-head { margin-bottom: clamp(40px, 4vw, 56px); text-align: center; }
#sub-lowsugar .fl-ls-head-title.is-solo { margin-top: 0; }
#sub-lowsugar .fl-ls-head-title { margin-top: 10px; font-size: clamp(26px, 2.8vw, 38px); font-weight: 800; letter-spacing: -0.03em; color: var(--fl-dark); }

/* ---------- 머리 ---------- */
#sub-lowsugar .fl-ls-intro { padding: clamp(72px, 7vw, 112px) 0 0; text-align: center; }
#sub-lowsugar .fl-ls-display { font-family: var(--fl-font-display); font-size: clamp(48px, 6vw, 96px); font-weight: 700; line-height: 1; text-transform: uppercase; color: var(--fl-primary); }
#sub-lowsugar .fl-ls-display span { display: block; }
#sub-lowsugar .fl-ls-display span + span { color: var(--fl-mango); }
#sub-lowsugar .fl-ls-intro-title { margin-top: 28px; font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; color: var(--fl-dark); }

/* ---------- 한 단어씩 진해지는 소개 글 ---------- */
#sub-lowsugar .fl-ls-story { padding: clamp(140px, 15vw, 240px) 0 clamp(140px, 15vw, 240px); } /* 큰 글자가 이어지므로 위 제목과 사이를 넉넉히 */
#sub-lowsugar .fl-ls-story-text { max-width: 860px; margin: 0 auto; font-size: clamp(22px, 2.4vw, 34px); font-weight: 800; line-height: 2.1; letter-spacing: -0.035em; text-align: center; }
#sub-lowsugar .fl-ls-word { color: color-mix(in srgb, var(--fl-dark) 16%, transparent); transition: color .35s ease; }
#sub-lowsugar .fl-ls-word.is-on { color: var(--fl-dark); }

/* ---------- 원칙: 쌓이는 카드 ----------
   카드마다 헤더 아래 조금씩 더 낮은 자리에 고정되어, 다음 카드가 올라오며 앞 카드를 덮고 윗부분(번호)만 남는다 */
#sub-lowsugar .fl-ls-rules { padding-bottom: var(--fl-ls-gap); }
#sub-lowsugar .fl-ls-stack { display: grid; gap: 32px; }
#sub-lowsugar .fl-ls-card {
    position: sticky; top: calc(var(--fl-hd-total) + 24px + var(--fl-ls-i) * 28px);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center;
    min-height: clamp(360px, 32vw, 460px); padding: clamp(32px, 4vw, 56px); box-sizing: border-box; border-radius: 32px;
    box-shadow: 0 -12px 32px rgba(30, 53, 39, .06);
}
#sub-lowsugar .fl-ls-card.is-c1 { background: var(--fl-white); }
#sub-lowsugar .fl-ls-card.is-c2 { background: var(--fl-leaf-soft); }
#sub-lowsugar .fl-ls-card.is-c3 { background: color-mix(in srgb, var(--fl-primary-soft) 70%, var(--fl-leaf) 30%); }
#sub-lowsugar .fl-ls-card.is-c4 { background: var(--fl-dark); --fl-focus: var(--fl-white); }
#sub-lowsugar .fl-ls-card-no { font-family: var(--fl-font-display); font-size: clamp(56px, 6vw, 96px); font-weight: 700; line-height: .9; color: var(--fl-primary); }
#sub-lowsugar .fl-ls-card-title { margin-top: 20px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; letter-spacing: -0.03em; color: var(--fl-dark); }
#sub-lowsugar .fl-ls-card-desc { margin-top: 14px; max-width: 440px; font-size: 17px; line-height: 1.8; color: var(--fl-ink-2); }
#sub-lowsugar .is-c4 .fl-ls-card-no { color: color-mix(in srgb, var(--fl-leaf) 55%, var(--fl-white)); } /* 딥그린 위 밝은 연두 */
#sub-lowsugar .is-c4 .fl-ls-card-title { color: var(--fl-white); }
#sub-lowsugar .is-c4 .fl-ls-card-desc { color: color-mix(in srgb, var(--fl-cream) 85%, transparent); }
#sub-lowsugar .fl-ls-card-img { overflow: hidden; aspect-ratio: 4 / 3; margin: 0; border-radius: 22px; }
#sub-lowsugar .fl-ls-card-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(.96); }

/* ---------- 저당 메뉴: 인스타 피드형 타일(눈꽃을비비다 시그니처와 같은 결) ---------- */
#sub-lowsugar .fl-ls-menu { padding-bottom: var(--fl-ls-gap); }
#sub-lowsugar .fl-ls-feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
#sub-lowsugar .fl-ls-tile { position: relative; aspect-ratio: 1; overflow: hidden; }
#sub-lowsugar .fl-ls-tile.is-t1 { background: var(--fl-mango-soft); }
#sub-lowsugar .fl-ls-tile.is-t2 { background: var(--fl-primary-soft); }
#sub-lowsugar .fl-ls-tile.is-t3 { background: color-mix(in srgb, var(--fl-cream) 80%, var(--fl-mango) 20%); }
#sub-lowsugar .fl-ls-tile.is-t4 { background: color-mix(in srgb, var(--fl-cream) 70%, var(--fl-leaf) 30%); }
#sub-lowsugar .fl-ls-tile-link { display: flex; flex-direction: column; align-items: center; height: 100%; padding: 6% 14% 0; box-sizing: border-box; text-decoration: none; }
#sub-lowsugar .fl-ls-tile-brand { margin-bottom: 5%; font-family: var(--fl-font-display); font-size: clamp(13px, 1.2vw, 18px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--fl-dark) 55%, transparent); }
#sub-lowsugar .fl-ls-tile-frame {
    display: flex; flex-direction: column; width: 100%; padding: 6px; box-sizing: border-box; background: var(--fl-white);
    box-shadow: 0 16px 32px rgba(30, 53, 39, .12); transition: transform .6s cubic-bezier(.22, .8, .24, 1);
}
#sub-lowsugar .fl-ls-tile-img { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; }
#sub-lowsugar .fl-ls-tile-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(.94) brightness(1.03); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
/* 영양정보에 당류가 있으면 사진 위에 작게 */
#sub-lowsugar .fl-ls-tile-sugar {
    position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: baseline; gap: 2px; padding: 5px 12px; border-radius: 999px;
    background: var(--fl-dark); color: var(--fl-cream); font-size: 12px; font-weight: 700;
}
#sub-lowsugar .fl-ls-tile-sugar b { margin-left: 4px; font-family: var(--fl-font-display); font-size: 16px; font-weight: 700; color: var(--fl-white); }
#sub-lowsugar .fl-ls-tile-label { display: flex; flex-direction: column; gap: 4px; padding: 12px 10px 14px; }
#sub-lowsugar .fl-ls-tile-en { font-family: var(--fl-font-display); font-size: clamp(18px, 1.7vw, 26px); font-weight: 700; line-height: 1.05; text-transform: uppercase; color: var(--fl-dark); }
#sub-lowsugar .fl-ls-tile-name { font-size: 15px; font-weight: 800; color: var(--fl-ink); }
#sub-lowsugar .fl-ls-tile-link:hover .fl-ls-tile-frame, #sub-lowsugar .fl-ls-tile-link:focus-visible .fl-ls-tile-frame { transform: translateY(-10px); }
#sub-lowsugar .fl-ls-tile-link:hover .fl-ls-tile-img img { transform: scale(1.06); }
#sub-lowsugar .fl-ls-tile-link:focus-visible, #sub-lowsugar .fl-ls-tile-all:focus-visible { outline-offset: -8px; }
/* 전체 보기 칸: 3열 줄의 남은 칸을 모두 채움 */
#sub-lowsugar .fl-ls-tile.is-all { grid-column: span var(--fl-ls-span, 1); aspect-ratio: auto; background: var(--fl-primary); }
#sub-lowsugar .fl-ls-tile-all { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; height: 100%; min-height: 100%; padding: 40px 14%; box-sizing: border-box; text-decoration: none; }
#sub-lowsugar .fl-ls-tile.is-all:not([style*="span: 1"]) .fl-ls-tile-all { padding-left: 7%; }
#sub-lowsugar .fl-ls-tile-all-en { font-family: var(--fl-font-display); font-size: clamp(44px, 5vw, 80px); font-weight: 700; line-height: .95; text-transform: uppercase; color: var(--fl-white); }
#sub-lowsugar .fl-ls-tile-all-ko { font-size: 17px; font-weight: 700; color: var(--fl-cream); }
#sub-lowsugar .fl-ls-tile-all-arrow {
    display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-top: 8px;
    border: 1.5px solid var(--fl-cream); border-radius: 50%; font-size: 22px; color: var(--fl-cream); transition: background .3s ease, color .3s ease, transform .3s ease;
}
#sub-lowsugar .fl-ls-tile-all:hover .fl-ls-tile-all-arrow { background: var(--fl-cream); color: var(--fl-primary); transform: translateX(6px); }
.fl-reveal-on #sub-lowsugar .fl-ls-tile:nth-child(3n+2) { transition-delay: .1s; }
.fl-reveal-on #sub-lowsugar .fl-ls-tile:nth-child(3n) { transition-delay: .2s; }

/* ---------- 하단 카드 ---------- */
#sub-lowsugar .fl-ls-cta { padding-bottom: var(--fl-ls-gap); }
#sub-lowsugar .fl-ls-cta-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-lowsugar .fl-ls-cta-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
#sub-lowsugar .fl-ls-cta-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(30, 53, 39, .72); }
#sub-lowsugar .fl-ls-cta-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-lowsugar .fl-ls-cta-title { margin-top: 10px; font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -0.03em; color: var(--fl-white); }
#sub-lowsugar .fl-ls-cta-desc { margin-top: 16px; font-size: 17px; line-height: 1.75; color: var(--fl-cream); }
#sub-lowsugar .fl-ls-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }

@media (max-width: 1024px) {
    #sub-lowsugar .fl-ls-card { grid-template-columns: 1fr; gap: 20px; min-height: 0; }
    #sub-lowsugar .fl-ls-card-img { order: -1; aspect-ratio: 16 / 9; }
    #sub-lowsugar .fl-ls-card-title { margin-top: 10px; }
    #sub-lowsugar .fl-ls-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #sub-lowsugar .fl-ls-tile.is-all { grid-column: 1 / -1; min-height: 200px; }
    #sub-lowsugar .fl-ls-cta-card { border-radius: 28px; }
}
@media (max-width: 576px) {
    #sub-lowsugar .fl-ls-card { top: calc(var(--fl-hd-total) + 12px + var(--fl-ls-i) * 18px); padding: 22px; border-radius: 24px; }
    #sub-lowsugar .fl-ls-card-img { border-radius: 16px; }
    #sub-lowsugar .fl-ls-card-no { font-size: 44px; }
    #sub-lowsugar .fl-ls-card-desc, #sub-lowsugar .fl-ls-cta-desc { font-size: 16px; }
    #sub-lowsugar .fl-ls-tile { aspect-ratio: auto; min-height: 220px; }
    #sub-lowsugar .fl-ls-tile-link { padding: 14px 12px 16px; }
    #sub-lowsugar .fl-ls-tile-brand { margin-bottom: 10px; font-size: 12px; }
    #sub-lowsugar .fl-ls-tile-frame { padding: 4px; }
    #sub-lowsugar .fl-ls-tile-label { padding: 8px 6px 10px; }
    #sub-lowsugar .fl-ls-tile-en { font-size: 16px; }
    #sub-lowsugar .fl-ls-tile-name { font-size: 13px; }
    #sub-lowsugar .fl-ls-tile-sugar { top: 6px; left: 6px; padding: 3px 9px; }
    #sub-lowsugar .fl-ls-tile-all { padding: 28px 24px !important; gap: 10px; }
    #sub-lowsugar .fl-ls-tile-all-en { font-size: 40px; }
    #sub-lowsugar .fl-ls-tile-all-arrow { width: 44px; height: 44px; font-size: 18px; }
    #sub-lowsugar .fl-ls-cta-card { border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    #sub-lowsugar .fl-ls-card { position: static; }
    #sub-lowsugar .fl-ls-word { transition: none; }
    #sub-lowsugar .fl-ls-tile-img img, #sub-lowsugar .fl-ls-tile-frame { transition: none; }
}