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

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

.hp-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); }
.hp-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.hp-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); }
.hp-lead { margin-top: 18px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.8; color: var(--fl-ink-2); }
.hp-head { max-width: 760px; margin-bottom: 48px; }
.hp-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hp-actions.is-center { justify-content: center; }

/* 머리 */
.hp-intro { padding: clamp(72px, 8vw, 120px) 0; }
.hp-intro-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hp-mark { max-width: 340px; width: 100%; margin: 0 auto; }
.hp-mark svg { display: block; width: 100%; height: auto; }

/* 밴드 */
.hp-band { padding: var(--fl-sec-pad) 0; }
.hp-band.is-sand { background: var(--fl-sand); }
.hp-band.is-dark { background: var(--fl-dark); color: var(--fl-cream); --fl-focus: var(--fl-white); }
.hp-band.is-dark .hp-label, .hp-band.is-dark em { color: var(--fl-mango-on-dark); }
.hp-band.is-dark .hp-title { color: var(--fl-white); }

/* 대상 카드 */
.hp-targets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.hp-target { padding: clamp(26px, 3vw, 40px); border-radius: 28px; background: var(--fl-white); transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease; }
.hp-target:hover { transform: translateY(-6px); box-shadow: var(--fl-shadow-lg); }
.hp-target-ico { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--fl-primary-soft); color: var(--fl-primary-dark); }
.hp-target-ico svg { width: 28px; height: 28px; }
.hp-target-en { margin-top: 20px; font-family: var(--fl-font-en); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fl-primary); }
.hp-target h4 { margin-top: 6px; font-size: 22px; font-weight: 800; }
.hp-target-desc { margin-top: 12px; font-size: 15px; line-height: 1.85; color: var(--fl-ink-2); }

/* 절차 */
.hp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.hp-step { position: relative; padding: 28px 24px 30px; border-radius: 24px; background: color-mix(in srgb, var(--fl-cream) 8%, transparent); border: 1px solid color-mix(in srgb, var(--fl-cream) 16%, transparent); }
.hp-step:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -14px; width: 8px; height: 8px; border-top: 2px solid var(--fl-mango-on-dark); border-right: 2px solid var(--fl-mango-on-dark); rotate: 45deg; }
.hp-step-no { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--fl-primary); font-family: var(--fl-font-en); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; color: var(--fl-white); }
.hp-step h4 { margin-top: 18px; font-size: 20px; font-weight: 800; color: var(--fl-white); }
.hp-step p { margin-top: 8px; font-size: 14.5px; line-height: 1.75; color: color-mix(in srgb, var(--fl-cream) 78%, transparent); }
.hp-note { margin-top: 28px; font-size: 14px; line-height: 1.8; color: color-mix(in srgb, var(--fl-cream) 70%, transparent); }

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

@media screen and (max-width: 1024px) {
    .hp-intro-grid { grid-template-columns: 1fr; }
    .hp-mark { max-width: 260px; }
    .hp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-step:nth-child(2)::after { display: none; }
    .hp-band, .hp-cta { padding: 80px 0; }
}
@media screen and (max-width: 576px) {
    .hp-band, .hp-cta { padding: 64px 0; }
    .hp-head { margin-bottom: 32px; }
    .hp-targets, .hp-steps { grid-template-columns: 1fr; }
    .hp-step::after { display: none; }
    .hp-actions .fl-btn { width: 100%; }
}