@charset "utf-8";
/* 활용 가이드 — 크림·샌드·딥 브라운 밴드 교차. 색은 --fl-* 토큰만 사용(SVG 내부 색 제외). */

#container > #sub-usage { background: var(--fl-cream); }
body:has(#sub-usage) { background: var(--fl-cream) !important; }
body:has(#sub-usage) #container_wr, body:has(#sub-usage) .gw-footer-container { background: var(--fl-cream); }
#sub-usage { color: var(--fl-ink); }
#sub-usage em { font-style: normal; color: var(--fl-primary); }
#sub-usage p, #sub-usage h3, #sub-usage h4 { word-break: keep-all; overflow-wrap: break-word; }

.hu-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fl-font-en); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fl-primary); }
.hu-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.hu-title { margin-top: 14px; font-size: clamp(28px, 3.4vw, 46px); font-weight: 800; line-height: 1.3; letter-spacing: -0.03em; color: var(--fl-ink); }
.hu-lead { margin-top: 18px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.8; color: var(--fl-ink-2); }
.hu-head { max-width: 760px; margin-bottom: 48px; }

/* 머리 */
.hu-intro { padding: clamp(72px, 8vw, 120px) 0; }
.hu-intro-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hu-caption { margin-top: 20px; padding: 12px 16px; border-left: 3px solid var(--fl-primary); background: var(--fl-sand); font-size: 14px; line-height: 1.7; color: var(--fl-ink-2); }
.hu-thermo { max-width: 260px; width: 100%; margin: 0 auto; padding: 24px; border-radius: 32px; background: var(--fl-sand); }
.hu-thermo svg { display: block; width: 100%; height: auto; }

/* 밴드 */
.hu-band { padding: var(--fl-sec-pad) 0; }
.hu-band.is-sand { background: var(--fl-sand); }
.hu-band.is-cream { background: var(--fl-cream); }
.hu-band.is-dark { background: var(--fl-dark); color: var(--fl-cream); --fl-focus: var(--fl-white); }
.hu-band.is-dark .hu-label, .hu-band.is-dark em { color: var(--fl-mango-on-dark); }
.hu-band.is-dark .hu-title { color: var(--fl-white); }
.hu-band.is-dark .hu-lead { color: color-mix(in srgb, var(--fl-cream) 78%, transparent); }

/* 요리별 카드 */
.hu-dishes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.hu-dish { position: relative; padding: clamp(24px, 2.6vw, 36px); border-radius: 24px; background: var(--fl-white); transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease; }
.hu-dish:hover { transform: translateY(-6px); box-shadow: var(--fl-shadow-lg); }
.hu-dish-no { position: absolute; top: 22px; right: 26px; font-family: var(--fl-font-display); font-size: 34px; line-height: 1; color: var(--fl-primary-soft); }
.hu-dish-en { font-family: var(--fl-font-en); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fl-primary); }
.hu-dish h4 { margin-top: 6px; font-size: 24px; font-weight: 800; }
.hu-dish-temp { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 5px 12px; border-radius: 999px; background: var(--fl-mango-soft); font-size: 13px; font-weight: 700; color: var(--fl-primary-dark); }
.hu-dish-temp i { width: 7px; height: 7px; border-radius: 50%; background: var(--fl-primary); }
.hu-dish-desc { margin-top: 14px; font-size: 15px; line-height: 1.8; color: var(--fl-ink-2); }

/* 온도 차트 */
.hu-chart { position: relative; padding: clamp(24px, 3vw, 44px); border-radius: 28px; background: color-mix(in srgb, var(--fl-cream) 8%, transparent); border: 1px solid color-mix(in srgb, var(--fl-cream) 16%, transparent); }
.hu-chart-zone { margin-bottom: 20px; font-size: 13.5px; font-weight: 700; color: var(--fl-mango-on-dark); }
.hu-chart-zone span { display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1px dashed var(--fl-mango-on-dark); }
.hu-bars { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.hu-bar { display: grid; grid-template-columns: 96px minmax(0, 1fr) 86px; gap: 16px; align-items: center; }
.hu-bar-name { font-size: 15px; font-weight: 700; color: var(--fl-white); }
.hu-bar-track { position: relative; height: 14px; border-radius: 999px; background: color-mix(in srgb, var(--fl-cream) 14%, transparent); }
.hu-bar-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--fl-mango-on-dark), var(--fl-mango)); }
.hu-bar-val { font-family: var(--fl-font-en); font-size: 13.5px; text-align: right; color: color-mix(in srgb, var(--fl-cream) 82%, transparent); white-space: nowrap; }
.hu-axis { display: flex; justify-content: space-between; margin: 14px 102px 0 112px; font-family: var(--fl-font-en); font-size: 12px; color: color-mix(in srgb, var(--fl-cream) 60%, transparent); }
.hu-note { margin-top: 24px; font-size: 14px; line-height: 1.8; color: color-mix(in srgb, var(--fl-cream) 70%, transparent); }

/* 팁 */
.hu-tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); margin: 0; padding: 0; list-style: none; }
.hu-tip { display: flex; gap: 20px; padding: 26px 0; border-top: 1px solid var(--fl-line); }
.hu-tip-no { flex: none; width: 44px; font-family: var(--fl-font-display); font-size: 30px; line-height: 1.1; color: var(--fl-primary); }
.hu-tip h4 { font-size: 18px; font-weight: 800; }
.hu-tip p { margin-top: 6px; font-size: 15px; line-height: 1.8; color: var(--fl-ink-2); }

/* CTA */
.hu-cta { padding: 0 0 var(--fl-sec-pad); background: var(--fl-cream); }
.hu-cta-card { padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 64px); border-radius: 32px; background: var(--fl-sand); text-align: center; }
.hu-cta-title { font-size: clamp(24px, 2.8vw, 38px); font-weight: 800; line-height: 1.35; letter-spacing: -0.03em; }
.hu-cta-desc { margin-top: 14px; font-size: 16px; line-height: 1.8; color: var(--fl-ink-2); }
.hu-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 30px; }

@media screen and (max-width: 1024px) {
    .hu-intro-grid { grid-template-columns: 1fr; }
    .hu-thermo { max-width: 220px; }
    .hu-dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hu-tips { grid-template-columns: 1fr; }
    .hu-band { padding: 80px 0; }
    .hu-cta { padding-bottom: 80px; }
}
@media screen and (max-width: 576px) {
    .hu-band { padding: 64px 0; }
    .hu-cta { padding-bottom: 64px; }
    .hu-head { margin-bottom: 32px; }
    .hu-dishes { grid-template-columns: 1fr; }
    .hu-bar { grid-template-columns: 1fr auto; gap: 6px 12px; }
    .hu-bar-track { grid-column: 1 / -1; grid-row: 2; }
    .hu-axis { margin: 12px 0 0; }
    .hu-actions .fl-btn { width: 100%; }
}