/* ========================================================
   forestable.kr — 사이트 전용 스타일
   Bootstrap 5 위에 얹는 디자인 시스템 (BEM 'ft-' prefix)
   기존 style.css는 손대지 않음.
   ======================================================== */

:root {
    /* ==========================================================
       Heritage Forest Palette (단일 진실의 출처)
       ========================================================== */
    --pine:       #1a3a2e;
    --moss:       #2d4a36;
    --leaf:       #5a7a4f;
    --sage:       #8da884;
    --terracotta: #c46d3a;
    --rust:       #9b4a26;
    --gold:       #b8893d;
    --cream:      #f5f1e8;
    --paper:      #faf7ef;
    --ink:        #1a1f1c;
    --bark:       #6b4d2f;

    /* ==========================================================
       5섹션 시그니처 컬러 — 헤리티지 팔레트 매핑
       project=pine / contest=terracotta / library=bark
       community=gold / media=moss
       ========================================================== */
    --ft-project:   var(--pine);
    --ft-contest:   var(--terracotta);
    --ft-library:   var(--bark);
    --ft-community: var(--gold);
    --ft-media:     var(--moss);

    /* 브랜드(공통 액션) */
    --ft-brand:      var(--leaf);
    --ft-brand-dark: var(--pine);
    --ft-brand-soft: var(--cream);

    /* 텍스트/회색 스케일 (헤리티지 톤) */
    --ft-ink:    var(--ink);
    --ft-ink-2:  #3a3d35;
    --ft-muted:  #6b6f66;
    --ft-border: #e3ddd0;
    --ft-bg-soft: var(--cream);
    --ft-bg:     var(--paper);

    --ft-radius:    14px;
    --ft-radius-sm: 8px;
    --ft-shadow-sm: 0 1px 2px rgba(26,31,28,.06);
    --ft-shadow-md: 0 8px 24px rgba(26,31,28,.08);
    --ft-shadow-lg: 0 16px 40px rgba(26,31,28,.12);
}

/* ---------- Reset/Base ---------- */
.ft-body {
    font-family: 'IBM Plex Sans KR', system-ui, -apple-system, sans-serif;
    color: var(--ft-ink);
    background: var(--ft-bg);
    -webkit-font-smoothing: antialiased;
    line-height: 1.7;
}

/* 헤딩: 명조계 (Noto Serif KR) */
.ft-section__title,
.ft-page__title,
.ft-prose h2 {
    font-family: 'Noto Serif KR', serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* 영문 액센트: Cormorant Garamond italic */
.ft-tile__name,
.ft-eyebrow--latin {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
}
.ft-body a { color: var(--ft-brand-dark); text-decoration: none; }
.ft-body a:hover { color: var(--ft-brand); text-decoration: underline; }
.ft-main { min-height: 60vh; }

/* ---------- Top Ribbon ---------- */
.ft-ribbon {
    background: var(--pine);
    color: var(--cream);
    font-size: 13px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.ft-ribbon__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 8px 0; flex-wrap: wrap;
}
.ft-ribbon__dday { display: inline-flex; align-items: center; gap: 8px; }
.ft-ribbon__dday i { color: var(--gold); font-size: 14px; }
.ft-ribbon__label { opacity: .9; }
.ft-ribbon__count {
    background: var(--terracotta); color: #fff; font-weight: 700;
    padding: 2px 10px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.ft-ribbon__links { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ft-ribbon__links a {
    color: var(--cream); opacity: .85; font-size: 12px; letter-spacing: .02em;
}
.ft-ribbon__links a:hover { color: #fff; opacity: 1; text-decoration: none; }

/* ---------- Header ---------- */
.ft-header {
    position: sticky; top: 0; z-index: 1020;
    background: #fff;
    border-bottom: 1px solid var(--ft-border);
    transition: box-shadow .2s, background .2s;
}
.ft-header.is-stuck {
    background: #fff;
    box-shadow: var(--ft-shadow-md);
}
.ft-header__top { padding: 14px 0; gap: 24px; }
.ft-logo { display: inline-flex; align-items: center; color: var(--ft-ink); }
.ft-logo:hover { text-decoration: none; }
.ft-logo__img { display: block; height: 56px; width: auto; aspect-ratio: 685 / 560; }

.ft-gnb__list { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; }
.ft-gnb__item { position: relative; }
.ft-gnb__link {
    display: inline-block; padding: 22px 22px;
    color: var(--ft-ink); font-weight: 700; font-size: 18px; letter-spacing: -.01em;
    border-bottom: 3px solid transparent;
    transition: color .15s, border-color .15s;
}
.ft-gnb__link:hover, .ft-gnb__item.is-active .ft-gnb__link {
    text-decoration: none;
}
.ft-gnb__item--project.is-active .ft-gnb__link   { color: var(--ft-project);   border-color: var(--ft-project); }
.ft-gnb__item--contest.is-active .ft-gnb__link   { color: var(--ft-contest);   border-color: var(--ft-contest); }
.ft-gnb__item--library.is-active .ft-gnb__link   { color: var(--ft-library);   border-color: var(--ft-library); }
.ft-gnb__item--community.is-active .ft-gnb__link { color: var(--ft-community); border-color: var(--ft-community); }
.ft-gnb__item--media.is-active .ft-gnb__link     { color: var(--ft-media);     border-color: var(--ft-media); }

/* GNB 드롭다운 */
.ft-gnb__sub {
    position: absolute; top: 100%; left: 0;
    min-width: 200px; padding: 8px 0; margin: 0; list-style: none;
    background: #fff; border: 1px solid var(--ft-border); border-radius: var(--ft-radius-sm);
    box-shadow: var(--ft-shadow-md);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .15s, transform .15s, visibility .15s;
}
.ft-gnb__item:hover .ft-gnb__sub,
.ft-gnb__item:focus-within .ft-gnb__sub {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.ft-gnb__sub a {
    display: block; padding: 11px 18px; color: var(--ft-ink-2); font-size: 15px;
    border-left: 3px solid transparent;
}
.ft-gnb__sub a:hover, .ft-gnb__sub a.is-active {
    background: var(--ft-bg-soft); border-left-color: var(--ft-brand); color: var(--ft-brand-dark);
    text-decoration: none;
}

.ft-header__util { gap: 10px; }
.ft-util__name { color: var(--ft-muted); font-size: 14px; padding: 10px 6px; }
.ft-util__btn {
    padding: 12px 20px; border-radius: 999px;
    background: var(--ft-brand); color: #fff !important; font-size: 15px; font-weight: 700;
    display: inline-flex; align-items: center; gap: 6px;
}
.ft-util__btn:hover { background: var(--ft-brand-dark); text-decoration: none; }
.ft-util__btn--cta {
    background: var(--terracotta); color: #fff !important;
    padding: 13px 24px; font-weight: 700;
}
.ft-util__btn--cta:hover { background: var(--rust); }
.ft-util__btn--ghost {
    background: transparent; color: var(--ft-ink-2) !important;
    border: 1px solid var(--ft-border);
}
.ft-util__btn--ghost:hover { background: var(--cream); color: var(--ink) !important; }

.ft-header__toggle {
    border: none; background: transparent; font-size: 26px; color: var(--ft-ink);
}

/* 모바일 오프캔버스 */
.ft-mobile__list { margin: 0; padding: 0; }
.ft-mobile__group { border-bottom: 1px solid var(--ft-border); }
.ft-mobile__top {
    display: block; padding: 14px 6px; font-weight: 700; color: var(--ft-ink);
    border-left: 4px solid transparent;
}
.ft-mobile__group--project   .ft-mobile__top { border-left-color: var(--ft-project); }
.ft-mobile__group--contest   .ft-mobile__top { border-left-color: var(--ft-contest); }
.ft-mobile__group--library   .ft-mobile__top { border-left-color: var(--ft-library); }
.ft-mobile__group--community .ft-mobile__top { border-left-color: var(--ft-community); }
.ft-mobile__group--media     .ft-mobile__top { border-left-color: var(--ft-media); }
.ft-mobile__group ul { list-style: none; padding: 0 0 10px 18px; margin: 0; }
.ft-mobile__group ul a {
    display: block; padding: 8px 6px; color: var(--ft-ink-2); font-size: 14px;
}
.ft-mobile__group ul a.is-active { color: var(--ft-brand-dark); font-weight: 600; }

/* ---------- Generic Sections ---------- */
.ft-section { padding: 64px 0; }
.ft-section--soft { background: var(--ft-bg-soft); }
.ft-section__head { text-align: center; margin-bottom: 36px; }
.ft-section__eyebrow {
    color: var(--ft-brand-dark); font-size: 12px; letter-spacing: .2em;
    text-transform: uppercase; margin: 0 0 6px;
}
.ft-section__title { font-size: 28px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.ft-section__sub   { color: var(--ft-muted); margin: 10px auto 0; max-width: 720px; }

/* ---------- Cards ---------- */
.ft-card {
    background: #fff; border: 1px solid var(--ft-border); border-radius: var(--ft-radius);
    overflow: hidden; transition: transform .15s, box-shadow .15s, border-color .15s;
    height: 100%;
}
.ft-card:hover { transform: translateY(-2px); box-shadow: var(--ft-shadow-md); border-color: #d3d6db; }
.ft-card__img {
    aspect-ratio: 16/10; background: #eef0ec center/cover no-repeat;
    display: flex; align-items: center; justify-content: center;
    color: #b4bcb6; font-size: 32px;
}
.ft-card__body { padding: 18px 20px 22px; }
.ft-card__cat { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ft-muted); margin: 0 0 6px; }
.ft-card__title { font-size: 16px; font-weight: 700; margin: 0 0 6px; line-height:1.45; }
.ft-card__desc  { color: var(--ft-muted); font-size: 14px; margin: 0; }

/* ---------- 5 Section Tiles (홈) ---------- */
.ft-tiles { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 768px)  { .ft-tiles { grid-template-columns: repeat(5, 1fr); } }
.ft-tile {
    color: #fff; padding: 28px 20px 32px; border-radius: var(--ft-radius);
    display: flex; flex-direction: column; min-height: 180px;
    position: relative; overflow: hidden; transition: transform .15s;
}
.ft-tile:hover { transform: translateY(-3px); color: #fff; text-decoration: none; }
.ft-tile__name  { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; opacity: .9; }
.ft-tile__title { font-size: 22px; font-weight: 800; margin: 6px 0 14px; }
.ft-tile__list  { list-style:none; padding:0; margin:auto 0 0; font-size: 13px; opacity:.95; }
.ft-tile__list li { padding: 3px 0; }
.ft-tile__list li::before { content:'· '; opacity:.7; }
.ft-tile--project   { background: var(--ft-project); }
.ft-tile--contest   { background: var(--ft-contest); }
.ft-tile--library   { background: var(--ft-library); }
.ft-tile--community { background: var(--ft-community); color:#fff; }
.ft-tile--community .ft-tile__name { opacity: .9; }
.ft-tile--media     { background: var(--ft-media); }

/* ---------- 페이지 본문 ---------- */
.ft-page { padding: 56px 0 80px; }
.ft-page__lead { font-size: 18px; color: var(--ft-ink-2); max-width: 820px; }
.ft-prose { font-size: 16px; line-height: 1.8; color: var(--ft-ink-2); max-width: 920px; }
.ft-prose h2 { font-size: 22px; font-weight: 800; margin: 36px 0 14px; color: var(--ft-ink); }
.ft-prose h3 { font-size: 18px; font-weight: 700; margin: 24px 0 10px; color: var(--ft-ink); }
.ft-prose p  { margin: 0 0 14px; }
.ft-prose ul, .ft-prose ol { padding-left: 22px; margin: 0 0 14px; }
.ft-prose li { margin: 4px 0; }
.ft-prose blockquote {
    border-left: 4px solid var(--ft-brand); background: var(--ft-bg-soft);
    padding: 14px 18px; margin: 18px 0; border-radius: 0 var(--ft-radius-sm) var(--ft-radius-sm) 0;
}

/* ---------- Buttons ---------- */
.ft-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 11px 22px; border-radius: 999px;
    font-weight: 600; font-size: 14px; border: 1px solid transparent;
    line-height: 1.2; white-space: nowrap; text-align: center;
    transition: background .15s, color .15s, border-color .15s;
}
.ft-btn:hover { text-decoration: none; }
/* `.ft-body a { color: var(--ft-brand-dark) }` 가 `.ft-btn--primary` 보다
   특이도가 높아 어두운 배경에 어두운 글자색이 찍히는 문제가 있어,
   `.ft-body` 자손 셀렉터로 끌어올린다. (`.ed-btn` 과 동일 패턴) */
.ft-body .ft-btn--primary { background: var(--ft-brand); color: #fff; }
.ft-body .ft-btn--primary:hover { background: var(--ft-brand-dark); color: #fff; }
.ft-body .ft-btn--outline { border-color: var(--ft-brand); color: var(--ft-brand-dark); background: transparent; }
.ft-body .ft-btn--outline:hover { background: var(--ft-brand-soft); color: var(--ft-brand-dark); }
.ft-btn--lg { padding: 14px 30px; font-size: 15px; }

/* ---------- Coming Soon (준비중 박스) ---------- */
.ft-coming {
    border: 1px dashed var(--ft-border); border-radius: var(--ft-radius);
    padding: 60px 24px; text-align: center; background: var(--ft-bg-soft);
}
.ft-coming i { font-size: 36px; color: var(--ft-muted); }
.ft-coming__title { font-weight: 700; font-size: 18px; margin: 12px 0 6px; }
.ft-coming__desc  { color: var(--ft-muted); margin: 0; }

/* ---------- Footer ---------- */
.ft-footer {
    background: var(--ink); color: #cfd1ce; padding: 56px 0 32px; margin-top: 80px;
    font-family: 'IBM Plex Sans KR', sans-serif;
}
.ft-footer__brand {
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    flex-wrap: wrap;
}
.ft-footer__brand-left { max-width: 520px; flex: 1 1 auto; }
.ft-footer__logo { display: inline-flex; align-items: center; gap: 12px; color: #fff; }
.ft-footer__logo:hover { text-decoration: none; color: #fff; }
.ft-footer__mark {
    width: 40px; height: 40px; border-radius: 10px;
    background: linear-gradient(135deg, var(--leaf), var(--moss));
    display: inline-flex; align-items: center; justify-content: center; color: var(--cream); font-size: 18px;
}
.ft-footer__logo strong { display: block; font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 17px; }
.ft-footer__logo small  { display: block; color: var(--sage); letter-spacing: .2em; font-size: 10px; font-family: 'Cormorant Garamond', serif; font-style: italic; }
.ft-footer__tagline { color: #9aa19a; font-size: 13px; margin: 12px 0 0; line-height: 1.7; }

.ft-footer__sitemap { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ft-footer__sitemap { grid-template-columns: repeat(5, 1fr); } }
.ft-footer__col h6 { color: #fff; font-size: 14px; font-weight: 700; margin: 0 0 12px; }
.ft-footer__col h6 a { color: #fff; }
.ft-footer__col h6 a:hover { color: var(--sage); text-decoration: none; }
.ft-footer__col ul { list-style: none; padding: 0; margin: 0; }
.ft-footer__col li { margin: 6px 0; }
.ft-footer__col a { color: #9aa19a; font-size: 13px; }
.ft-footer__col a:hover { color: var(--sage); text-decoration: none; }
.ft-footer__sep { border-color: #2a2d28; margin: 28px 0 22px; }

.ft-footer__partners {
    display: flex; flex-direction: column; gap: 8px;
    font-size: 12px; color: #9aa19a; padding-bottom: 18px; border-bottom: 1px solid #2a2d28; margin-bottom: 20px;
}
.ft-footer__partners-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ft-footer__partners-label { color: var(--gold); letter-spacing: .12em; text-transform: uppercase; font-size: 11px; min-width: 70px; }
.ft-footer__partners a { color: #cfd1ce; }
.ft-footer__partners a:hover { color: #fff; text-decoration: none; }
.ft-footer__partners-divider { opacity: .35; }

.ft-footer__org strong { color: #fff; }

/* 푸터 우측 상단 — 운영사무국 연락처 카드 (로고와 같은 행) */
.ft-footer__contact {
    flex: 0 0 auto;
    min-width: 260px;
    padding: 18px 22px;
    background: linear-gradient(135deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.03) 100%);
    border: 1px solid rgba(255,255,255,.12);
    border-left: 4px solid var(--gold, #C8A24A);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 16px 32px -24px rgba(0,0,0,.45);
}
.ft-footer__contact-label {
    color: var(--gold, #C8A24A);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.ft-footer .ft-footer__contact a.ft-footer__contact-tel,
a.ft-footer__contact-tel,
a.ft-footer__contact-tel:link,
a.ft-footer__contact-tel:visited {
    color: #ffffff !important;
    font-weight: 800;
    font-size: 26px;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
    text-decoration: none !important;
    line-height: 1.1;
    transition: color .2s ease;
}
.ft-footer .ft-footer__contact a.ft-footer__contact-tel:hover,
a.ft-footer__contact-tel:hover {
    color: var(--gold, #C8A24A) !important;
    text-decoration: none !important;
}
.ft-footer__contact-hours {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255,255,255,.12);
    font-size: 11.5px;
    color: #9aa19a;
    line-height: 1.55;
}
.ft-footer__copy { color: #6b6f66; }
.ft-footer__legal { display: flex; flex-wrap: wrap; gap: 12px; }
.ft-footer__legal a { color: #cfd1ce; font-size: 12px; }
.ft-footer__legal a:hover { color: #fff; }
.ft-footer__legal a strong { color: #fff; font-weight: 700; }

/* ---------- Forms ---------- */
.ft-form .form-label { font-weight: 600; font-size: 14px; color: var(--ft-ink); }
.ft-form .form-label .req { color: #d6453a; }
.ft-form .form-control, .ft-form .form-select {
    border-radius: var(--ft-radius-sm); border-color: var(--ft-border); padding: 10px 14px;
}
.ft-form .form-control:focus, .ft-form .form-select:focus {
    border-color: var(--ft-brand); box-shadow: 0 0 0 3px rgba(90,122,79,.18);
}
.ft-form__hint { font-size: 12px; color: var(--ft-muted); margin-top: 4px; }

/* ---------- Tables ---------- */
.ft-table { width: 100%; border-collapse: collapse; }
.ft-table th, .ft-table td { padding: 12px 14px; border-bottom: 1px solid var(--ft-border); text-align: left; font-size: 14px; }
.ft-table th { background: var(--ft-bg-soft); font-weight: 700; }

/* ---------- Utility ---------- */
.ft-divider { height: 1px; background: var(--ft-border); margin: 32px 0; }
.ft-eyebrow { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ft-muted); }
.ft-mt-section { margin-top: 64px; }

/* ==========================================================
   Landing — Hero
   ========================================================== */
.ft-landing-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--pine), var(--moss) 60%, var(--leaf));
    color: var(--cream);
    padding: 96px 0 110px;
}
.ft-landing-hero__inner { position: relative; z-index: 2; max-width: 820px; }
.ft-landing-hero__leaf {
    position: absolute; color: rgba(255,255,255,.08); pointer-events: none;
}
.ft-landing-hero__leaf--a { right: -20px; top: -10px; }
.ft-landing-hero__leaf--b { right: 20%; bottom: -20px; transform: rotate(-15deg); }
.ft-landing-hero__eyebrow {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 16px; letter-spacing: .04em; opacity: .85; margin: 0 0 12px;
    color: var(--gold);
}
.ft-landing-hero__title {
    font-family: 'Noto Serif KR', serif; font-weight: 900; line-height: 1.18;
    font-size: 38px; letter-spacing: -.02em; margin: 0;
}
.ft-landing-hero__title em {
    font-style: normal; color: var(--gold);
}
@media (min-width: 768px)  { .ft-landing-hero__title { font-size: 52px; } }
@media (min-width: 1200px) { .ft-landing-hero__title { font-size: 60px; } }

.ft-landing-hero__lede {
    margin: 22px 0 0; font-size: 17px; line-height: 1.85; opacity: .92; max-width: 640px;
}
.ft-landing-hero__cta {
    display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px;
}

/* Hero 전용 버튼 변형 */
.ft-btn--ghost-light {
    background: rgba(255,255,255,.08); color: var(--cream);
    border: 1px solid rgba(255,255,255,.32);
}
.ft-btn--ghost-light:hover { background: rgba(255,255,255,.18); color: #fff; }
.ft-btn--gold { background: var(--gold); color: var(--ink); }
.ft-btn--gold:hover { background: #cc9c4a; color: var(--ink); }

/* ==========================================================
   Countdown Card
   ========================================================== */
.ft-cd-wrap {
    margin-top: -56px; position: relative; z-index: 5; padding-bottom: 24px;
}
.ft-countdown {
    background: var(--paper); border: 1px solid var(--ft-border); border-radius: 18px;
    box-shadow: var(--ft-shadow-lg);
    padding: 28px 32px;
    display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center;
}
@media (min-width: 992px) {
    .ft-countdown { grid-template-columns: 1.2fr 1fr; }
}
.ft-countdown__eyebrow {
    color: var(--terracotta); font-family: 'Cormorant Garamond', serif; font-style: italic;
    margin: 0 0 4px; font-size: 14px; letter-spacing: .04em;
}
.ft-countdown__title {
    font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 22px; margin: 0;
    color: var(--ink); line-height: 1.4;
}
.ft-countdown__sub { margin: 6px 0 0; color: var(--ft-muted); font-size: 13px; }
.ft-countdown__digits {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.ft-countdown__cell {
    background: var(--cream); border-radius: 10px; padding: 14px 10px; text-align: center;
}
.ft-countdown__cell strong {
    display: block; font-family: 'Noto Serif KR', serif; font-weight: 700;
    font-size: 32px; color: var(--pine); font-variant-numeric: tabular-nums;
    line-height: 1;
}
.ft-countdown__cell span {
    display: block; font-family: 'Cormorant Garamond', serif; font-style: italic;
    color: var(--ft-muted); font-size: 12px; margin-top: 6px; letter-spacing: .08em;
}
.ft-countdown.is-expired .ft-countdown__cell strong { color: var(--ft-muted); }

/* ==========================================================
   5단계 확산 모델 — Steps
   ========================================================== */
.ft-steps {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 14px; grid-template-columns: 1fr;
    counter-reset: ftstep;
}
@media (min-width: 768px)  { .ft-steps { grid-template-columns: repeat(5, 1fr); } }
.ft-steps__item {
    background: #fff; border: 1px solid var(--ft-border); border-radius: var(--ft-radius);
    padding: 22px 18px; position: relative; text-align: center;
}
.ft-steps__no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--pine); color: var(--cream);
    font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 16px;
}
.ft-steps__name {
    display: block; margin: 12px 0 6px; font-family: 'Noto Serif KR', serif;
    font-weight: 700; color: var(--ink); font-size: 18px;
}
.ft-steps__desc { color: var(--ft-ink-2); font-size: 13.5px; line-height: 1.6; }

/* ==========================================================
   Lifecycle 4부문
   ========================================================== */
.ft-lifecycle {
    display: grid; gap: 16px; grid-template-columns: 1fr;
}
@media (min-width: 576px) { .ft-lifecycle { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .ft-lifecycle { grid-template-columns: repeat(4, 1fr); } }

.ft-lifecycle__card {
    background: #fff; border: 1px solid var(--ft-border); border-radius: 14px;
    padding: 24px 22px 26px 28px; position: relative; overflow: hidden;
    transition: transform .15s, box-shadow .15s;
}
.ft-lifecycle__card:hover { transform: translateY(-3px); box-shadow: var(--ft-shadow-md); }
.ft-lifecycle__bar {
    position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
    background: var(--leaf);
}
.ft-lifecycle__card--leaf       .ft-lifecycle__bar { background: var(--leaf); }
.ft-lifecycle__card--sage       .ft-lifecycle__bar { background: var(--sage); }
.ft-lifecycle__card--gold       .ft-lifecycle__bar { background: var(--gold); }
.ft-lifecycle__card--terracotta .ft-lifecycle__bar { background: var(--terracotta); }

.ft-lifecycle__card--leaf       .ft-lifecycle__icon,
.ft-lifecycle__card--leaf       .ft-lifecycle__name { color: var(--leaf); }
.ft-lifecycle__card--sage       .ft-lifecycle__icon,
.ft-lifecycle__card--sage       .ft-lifecycle__name { color: var(--moss); }
.ft-lifecycle__card--gold       .ft-lifecycle__icon,
.ft-lifecycle__card--gold       .ft-lifecycle__name { color: var(--gold); }
.ft-lifecycle__card--terracotta .ft-lifecycle__icon,
.ft-lifecycle__card--terracotta .ft-lifecycle__name { color: var(--terracotta); }

.ft-lifecycle__icon { font-size: 26px; }
.ft-lifecycle__eyebrow {
    margin: 4px 0 0; font-family: 'Cormorant Garamond', serif; font-style: italic;
    color: var(--ft-muted); font-size: 14px;
}
.ft-lifecycle__name {
    font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 22px; margin: 4px 0 6px;
}
.ft-lifecycle__target { color: var(--ft-ink-2); font-size: 13px; margin: 0 0 12px; }
.ft-lifecycle__keywords { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ft-lifecycle__keywords li {
    background: var(--cream); color: var(--ft-ink-2); font-size: 12px;
    padding: 3px 9px; border-radius: 999px;
}

/* ==========================================================
   Roadmap Timeline
   ========================================================== */
.ft-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.ft-timeline::before {
    content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px;
    border-left: 2px dashed var(--sage);
}
.ft-timeline__item {
    position: relative; padding: 10px 0 10px 36px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.ft-timeline__dot {
    position: absolute; left: 4px; top: 16px;
    width: 16px; height: 16px; border-radius: 50%; background: #fff;
    border: 3px solid var(--sage); box-shadow: 0 0 0 3px var(--paper);
}
.ft-timeline__item--open .ft-timeline__dot { background: var(--terracotta); border-color: var(--terracotta); }
.ft-timeline__date {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    color: var(--ft-muted); font-size: 14px; min-width: 180px;
}
.ft-timeline__name {
    font-family: 'Noto Serif KR', serif; font-weight: 700; color: var(--ink);
}
.ft-timeline__item--open .ft-timeline__name { color: var(--terracotta); }
.ft-timeline__badge {
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    background: var(--terracotta); color: #fff; padding: 2px 10px; border-radius: 999px;
}

/* ==========================================================
   Multistep Form (Contest/apply)
   ========================================================== */
.ft-multistep__bar {
    height: 6px; background: var(--cream); border-radius: 999px; overflow: hidden; margin: 18px 0 6px;
}
.ft-multistep__bar > span {
    display: block; height: 100%; background: linear-gradient(90deg, var(--leaf), var(--terracotta));
    transition: width .3s ease;
}
.ft-multistep__indicator {
    text-align: right; font-family: 'Cormorant Garamond', serif; font-style: italic;
    color: var(--ft-muted); font-size: 14px; margin: 0 0 22px;
}
.ft-multistep__legend {
    display: flex; align-items: center; gap: 12px;
    font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 22px; color: var(--ink);
    margin: 8px 0 22px; padding-bottom: 14px; border-bottom: 1px solid var(--ft-border);
}
.ft-multistep__no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--pine); color: var(--cream);
    font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 15px;
}
.ft-multistep__nav {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 32px; gap: 12px;
}
.ft-btn--ghost {
    background: transparent; color: var(--ft-ink-2); border: 1px solid var(--ft-border);
}
.ft-btn--ghost:hover { background: var(--cream); color: var(--ink); }

/* 4부문 라디오 */
.ft-stage-radio {
    display: grid; gap: 12px; grid-template-columns: 1fr;
}
@media (min-width: 576px) { .ft-stage-radio { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .ft-stage-radio { grid-template-columns: repeat(4, 1fr); } }
.ft-stage-radio__item {
    position: relative; display: block; cursor: pointer;
    background: #fff; border: 2px solid var(--ft-border); border-radius: 14px;
    padding: 22px 18px; transition: border-color .15s, transform .1s, box-shadow .15s;
}
.ft-stage-radio__item:hover { transform: translateY(-2px); box-shadow: var(--ft-shadow-md); }
.ft-stage-radio__item input { position: absolute; opacity: 0; pointer-events: none; }
.ft-stage-radio__check {
    position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--ft-border); background: #fff;
}
.ft-stage-radio__icon { font-size: 28px; display: block; margin-bottom: 8px; }
.ft-stage-radio__body strong {
    display: block; font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 19px; color: var(--ink);
}
.ft-stage-radio__body small { display: block; color: var(--ft-muted); font-size: 13px; margin-top: 4px; }
.ft-stage-radio__body em {
    display: block; margin-top: 8px; color: var(--ft-ink-2); font-style: normal; font-size: 12px;
}

.ft-stage-radio__item--leaf       { border-color: rgba(90,122,79,.4); }
.ft-stage-radio__item--leaf       .ft-stage-radio__icon { color: var(--leaf); }
.ft-stage-radio__item--sage       { border-color: rgba(141,168,132,.4); }
.ft-stage-radio__item--sage       .ft-stage-radio__icon { color: var(--moss); }
.ft-stage-radio__item--gold       { border-color: rgba(184,137,61,.4); }
.ft-stage-radio__item--gold       .ft-stage-radio__icon { color: var(--gold); }
.ft-stage-radio__item--terracotta { border-color: rgba(196,109,58,.4); }
.ft-stage-radio__item--terracotta .ft-stage-radio__icon { color: var(--terracotta); }

.ft-stage-radio__item input:checked ~ .ft-stage-radio__check {
    background: var(--pine); border-color: var(--pine);
    box-shadow: inset 0 0 0 4px #fff;
}
.ft-stage-radio__item--leaf       input:checked ~ .ft-stage-radio__check { background: var(--leaf);       border-color: var(--leaf); }
.ft-stage-radio__item--sage       input:checked ~ .ft-stage-radio__check { background: var(--moss);       border-color: var(--moss); }
.ft-stage-radio__item--gold       input:checked ~ .ft-stage-radio__check { background: var(--gold);       border-color: var(--gold); }
.ft-stage-radio__item--terracotta input:checked ~ .ft-stage-radio__check { background: var(--terracotta); border-color: var(--terracotta); }

.ft-stage-radio__item:has(input:checked) { background: var(--cream); }
.ft-stage-radio__item--leaf:has(input:checked)       { border-color: var(--leaf); }
.ft-stage-radio__item--sage:has(input:checked)       { border-color: var(--moss); }
.ft-stage-radio__item--gold:has(input:checked)       { border-color: var(--gold); }
.ft-stage-radio__item--terracotta:has(input:checked) { border-color: var(--terracotta); }

/* 정원 진행 바 (taster) */
.ft-capacity { background: var(--cream); border-radius: 12px; padding: 14px 18px; margin: 14px 0 22px; }
.ft-capacity__head {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; color: var(--ft-ink-2); margin-bottom: 8px;
}
.ft-capacity__head strong { color: var(--terracotta); font-family: 'Noto Serif KR', serif; }
.ft-capacity__bar {
    height: 8px; background: rgba(196,109,58,.15); border-radius: 999px; overflow: hidden;
}
.ft-capacity__bar > span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--terracotta));
    transition: width .4s ease;
}

/* 파일 업로드 */
.ft-upload input[type="file"] {
    position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px;
}
.ft-upload__drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 36px 20px; cursor: pointer;
    border: 2px dashed var(--sage); border-radius: 14px; background: var(--cream);
    text-align: center; transition: border-color .15s, background .15s;
}
.ft-upload__drop:hover { border-color: var(--leaf); background: rgba(141,168,132,.08); }
.ft-upload__drop i { font-size: 36px; color: var(--leaf); }
.ft-upload__drop strong { color: var(--ink); font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 17px; }
.ft-upload__drop span { color: var(--ft-ink-2); font-size: 13px; }
.ft-upload__drop small { color: var(--ft-muted); font-size: 12px; }

.ft-upload__list { list-style: none; padding: 0; margin: 14px 0 0; }
.ft-upload__list li {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    background: #fff; border: 1px solid var(--ft-border); border-radius: 8px;
    margin-bottom: 6px; font-size: 13px;
}
.ft-upload__list li.is-too-big { border-color: var(--terracotta); background: rgba(196,109,58,.06); }
.ft-upload__list li em { color: var(--terracotta); font-style: normal; font-size: 12px; margin-left: auto; }
.ft-upload__list li span { color: var(--ft-muted); margin-left: auto; }

/* ==========================================================
   Media — 영상 그리드
   ========================================================== */
.ft-video-grid {
    display: grid; gap: 22px; grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .ft-video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .ft-video-grid { grid-template-columns: repeat(3, 1fr); } }

.ft-video-card {
    background: #fff; border: 1px solid var(--ft-border); border-radius: 14px;
    overflow: hidden; transition: transform .15s, box-shadow .15s;
}
.ft-video-card:hover { transform: translateY(-2px); box-shadow: var(--ft-shadow-md); }
.ft-video-card__embed {
    position: relative; aspect-ratio: 16 / 9; background: var(--ink);
}
.ft-video-card__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ft-video-card__placeholder {
    aspect-ratio: 16 / 9; background: var(--ink);
    display: flex; align-items: center; justify-content: center;
    color: var(--moss); font-size: 36px;
}
.ft-video-card__body { padding: 16px 18px 20px; }
.ft-video-card__title {
    font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 17px; margin: 0;
}
.ft-video-card__title a { color: var(--ink); }
.ft-video-card__meta {
    color: var(--ft-muted); font-size: 13px; margin: 6px 0 0;
}

/* ==========================================================
   Media — 사진 갤러리 + lightbox
   ========================================================== */
.ft-photo-grid {
    display: grid; gap: 8px;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 576px) { .ft-photo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .ft-photo-grid { grid-template-columns: repeat(4, 1fr); } }

.ft-photo-card {
    position: relative; display: block; aspect-ratio: 1 / 1;
    overflow: hidden; border-radius: 8px; background: var(--cream);
}
.ft-photo-card img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .3s;
}
.ft-photo-card:hover img { transform: scale(1.05); }
.ft-photo-card__placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    color: var(--ft-muted); font-size: 32px; background: var(--cream);
}
.ft-photo-card__overlay {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 16px 12px 10px;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(26,31,28,.85));
    color: #fff; opacity: 0; transition: opacity .15s;
}
.ft-photo-card:hover .ft-photo-card__overlay { opacity: 1; }
.ft-photo-card__overlay strong { display: block; font-size: 13px; line-height: 1.4; }
.ft-photo-card__overlay small  { display: block; font-size: 11px; opacity: .85; margin-top: 4px; }

.ft-lightbox .modal-content { background: var(--ink); border: 0; }
.ft-lightbox__close {
    position: absolute; top: -36px; right: 0; filter: invert(1); opacity: .9; z-index: 5;
}
.ft-lightbox__img { width: 100%; height: auto; max-height: 80vh; object-fit: contain; background: var(--ink); }
.ft-lightbox__caption { padding: 14px 18px; color: var(--cream); }
.ft-lightbox__caption strong { display: block; font-family: 'Noto Serif KR', serif; }
.ft-lightbox__caption small  { display: block; opacity: .7; font-size: 12px; margin-top: 4px; }

/* ==========================================================
   Media — SNS 카드
   ========================================================== */
.ft-sns-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 36px 24px; text-align: center; min-height: 220px;
    border-radius: 16px; color: #fff; gap: 6px;
    transition: transform .15s, box-shadow .15s;
}
.ft-sns-card:hover { transform: translateY(-3px); color: #fff; text-decoration: none; box-shadow: var(--ft-shadow-lg); }
.ft-sns-card i { font-size: 38px; }
.ft-sns-card strong { font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 22px; }
.ft-sns-card small { font-family: 'Cormorant Garamond', serif; font-style: italic; opacity: .85; font-size: 14px; }
.ft-sns-card__hint { font-size: 12px; opacity: .75; margin-top: 8px; }
.ft-sns-card--instagram { background: linear-gradient(135deg, #c46d3a, #b8893d); }
.ft-sns-card--blog      { background: linear-gradient(135deg, #5a7a4f, #2d4a36); }
.ft-sns-card--youtube   { background: linear-gradient(135deg, #9b4a26, #1a3a2e); }

/* ==========================================================
   Media — 언론 보도 리스트
   ========================================================== */
.ft-press-list { list-style: none; padding: 0; margin: 0; }
.ft-press-item { border-bottom: 1px solid var(--ft-border); }
.ft-press-item:first-child { border-top: 1px solid var(--ft-border); }
.ft-press-item a {
    display: grid; grid-template-columns: 110px 1fr auto; gap: 16px; align-items: center;
    padding: 18px 8px; color: var(--ink);
}
@media (max-width: 575px) {
    .ft-press-item a { grid-template-columns: 1fr; gap: 6px; }
    .ft-press-item__meta { text-align: left !important; }
}
.ft-press-item a:hover { background: var(--cream); text-decoration: none; }
.ft-press-item__cat {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    background: rgba(26,58,46,.1); color: var(--pine);
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px;
    text-align: center;
}
.ft-press-item__title {
    font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 16px; line-height: 1.5;
}
.ft-press-item__meta { color: var(--ft-muted); font-size: 13px; text-align: right; }

/* ==========================================================
   3-Step Process Indicator (Contest/process)
   ========================================================== */
.ft-process__steps {
    list-style: none; padding: 0; margin: 32px 0;
    display: grid; gap: 16px; grid-template-columns: 1fr;
    counter-reset: ftprocess;
}
@media (min-width: 768px) { .ft-process__steps { grid-template-columns: repeat(3, 1fr); } }
.ft-process__step {
    background: #fff; border: 1px solid var(--ft-border); border-radius: var(--ft-radius);
    padding: 24px 22px; position: relative;
}
.ft-process__step h3 {
    font-family: 'Noto Serif KR', serif; font-weight: 700;
    font-size: 19px; margin: 12px 0 4px; color: var(--ink);
}
.ft-process__step p { margin: 6px 0 0; color: var(--ft-ink-2); font-size: 14px; line-height: 1.7; }
.ft-process__date { color: var(--terracotta) !important; font-weight: 600; font-size: 13px !important; }
.ft-process__no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--terracotta); color: #fff;
    font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 16px;
}

/* ==========================================================
   4대 핵심 과업 (Project/about)
   ========================================================== */
.ft-tasks {
    display: grid; gap: 14px; grid-template-columns: 1fr;
}
@media (min-width: 768px) { .ft-tasks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .ft-tasks { grid-template-columns: repeat(4, 1fr); } }
.ft-task {
    background: #fff; border: 1px solid var(--ft-border); border-radius: var(--ft-radius);
    padding: 24px; position: relative; overflow: hidden;
}
.ft-task h3 {
    font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 18px;
    margin: 16px 0 8px; color: var(--ink);
}
.ft-task p { color: var(--ft-ink-2); font-size: 14px; line-height: 1.7; margin: 0; }
.ft-task__tag {
    display: inline-block; padding: 4px 10px; border-radius: 999px;
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600;
    font-size: 13px; letter-spacing: .04em;
}
.ft-task--input    { border-top: 4px solid var(--leaf); }
.ft-task--input    .ft-task__tag { background: rgba(90,122,79,.15);  color: var(--leaf); }
.ft-task--process  { border-top: 4px solid var(--gold); }
.ft-task--process  .ft-task__tag { background: rgba(184,137,61,.15); color: var(--gold); }
.ft-task--output   { border-top: 4px solid var(--terracotta); }
.ft-task--output   .ft-task__tag { background: rgba(196,109,58,.15); color: var(--terracotta); }
.ft-task--outcome  { border-top: 4px solid var(--pine); }
.ft-task--outcome  .ft-task__tag { background: rgba(26,58,46,.15);   color: var(--pine); }

/* ==========================================================
   Dashboard — KPI Cards + SROI
   ========================================================== */
.ft-kpi {
    background: #fff; border: 1px solid var(--ft-border); border-radius: 14px;
    padding: 22px 20px; height: 100%; position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 4px;
}
.ft-kpi::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
}
.ft-kpi--leaf::before       { background: var(--leaf); }
.ft-kpi--gold::before       { background: var(--gold); }
.ft-kpi--terracotta::before { background: var(--terracotta); }
.ft-kpi--pine::before       { background: var(--pine); }
.ft-kpi__icon { font-size: 24px; }
.ft-kpi--leaf       .ft-kpi__icon { color: var(--leaf); }
.ft-kpi--gold       .ft-kpi__icon { color: var(--gold); }
.ft-kpi--terracotta .ft-kpi__icon { color: var(--terracotta); }
.ft-kpi--pine       .ft-kpi__icon { color: var(--pine); }
.ft-kpi__num { font-family: 'Noto Serif KR', serif; font-weight: 900; font-size: 36px; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.ft-kpi__label { color: var(--ft-ink-2); font-size: 14px; }
.ft-kpi__hint { color: var(--ft-muted); font-size: 12px; margin-top: 4px; }

.ft-sroi {
    display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap;
    padding: 32px; background: var(--cream); border-radius: 14px;
}
.ft-sroi__item {
    background: #fff; border-radius: 12px; padding: 24px 36px; text-align: center;
    border: 2px solid transparent; min-width: 200px;
}
.ft-sroi__item--input  { border-color: var(--ft-border); }
.ft-sroi__item--output { border-color: var(--terracotta); background: linear-gradient(135deg, #fff, var(--paper)); }
.ft-sroi__item small { display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--ft-muted); font-size: 13px; letter-spacing: .04em; }
.ft-sroi__item strong { display: block; font-family: 'Noto Serif KR', serif; font-weight: 900; font-size: 56px; line-height: 1; margin: 8px 0; }
.ft-sroi__item--input strong  { color: var(--pine); }
.ft-sroi__item--output strong { color: var(--terracotta); }
.ft-sroi__item span { color: var(--ft-ink-2); font-size: 13px; }
.ft-sroi__arrow { font-size: 32px; color: var(--terracotta); }

/* ==========================================================
   Brand Palette
   ========================================================== */
.ft-brand-palette {
    display: grid; gap: 12px; margin-top: 20px;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 576px)  { .ft-brand-palette { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px)  { .ft-brand-palette { grid-template-columns: repeat(6, 1fr); } }

.ft-brand-swatch {
    border-radius: 12px; padding: 24px 18px; min-height: 140px;
    display: flex; flex-direction: column; justify-content: flex-end;
    border: 1px solid rgba(0,0,0,.05);
}
.ft-brand-swatch strong { font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 18px; }
.ft-brand-swatch code   { background: transparent; color: inherit; font-size: 13px; opacity: .85; }
.ft-brand-swatch small  { font-family: 'Cormorant Garamond', serif; font-style: italic; opacity: .8; font-size: 12px; margin-top: 4px; }

/* ==========================================================
   HFI Page
   ========================================================== */
.ft-hfi-formula {
    background: linear-gradient(135deg, var(--pine), var(--moss));
    color: var(--cream); border-radius: 16px; padding: 36px 28px; text-align: center;
}
.ft-hfi-formula__eyebrow { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--gold); margin: 0; font-size: 16px; }
.ft-hfi-formula__title   { font-family: 'Noto Serif KR', serif; font-weight: 900; color: #fff; font-size: 28px; margin: 6px 0 22px; }
.ft-hfi-formula__eq {
    display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: baseline;
    font-size: 18px; color: var(--cream);
}
.ft-hfi-formula__eq strong { color: var(--gold); font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 22px; }
.ft-hfi-formula__caption { color: rgba(245,241,232,.85); font-size: 13.5px; margin: 18px auto 0; max-width: 680px; line-height: 1.7; }

.ft-hfi-grades {
    display: grid; gap: 12px; grid-template-columns: 1fr;
    margin-top: 24px;
}
@media (min-width: 768px)  { .ft-hfi-grades { grid-template-columns: repeat(5, 1fr); } }

.ft-hfi-grade {
    background: #fff; border: 1px solid var(--ft-border); border-radius: 12px;
    padding: 22px 18px; text-align: center; position: relative; overflow: hidden;
}
.ft-hfi-grade::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
}
.ft-hfi-grade--rust::before       { background: var(--rust); }
.ft-hfi-grade--terracotta::before { background: var(--terracotta); }
.ft-hfi-grade--gold::before       { background: var(--gold); }
.ft-hfi-grade--leaf::before       { background: var(--leaf); }
.ft-hfi-grade--sage::before       { background: var(--sage); }
.ft-hfi-grade__no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--cream); color: var(--ink);
    font-family: 'Noto Serif KR', serif; font-weight: 900; font-size: 20px;
    margin-bottom: 10px;
}
.ft-hfi-grade--rust       .ft-hfi-grade__no { background: var(--rust); color: #fff; }
.ft-hfi-grade--terracotta .ft-hfi-grade__no { background: var(--terracotta); color: #fff; }
.ft-hfi-grade--gold       .ft-hfi-grade__no { background: var(--gold); color: #fff; }
.ft-hfi-grade--leaf       .ft-hfi-grade__no { background: var(--leaf); color: #fff; }
.ft-hfi-grade--sage       .ft-hfi-grade__no { background: var(--sage); color: var(--ink); }
.ft-hfi-grade__label  { display: block; font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 16px; color: var(--ink); }
.ft-hfi-grade__range  { color: var(--ft-muted); font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13px; margin: 4px 0; }
.ft-hfi-grade__effect { color: var(--ft-ink-2); font-size: 12.5px; margin: 6px 0 0; line-height: 1.6; }

.ft-hfi-bars { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.ft-hfi-bars__item { width: 100%; }
.ft-hfi-bars__row {
    display: grid; grid-template-columns: 180px 1fr 120px; gap: 14px; align-items: center;
    width: 100%; background: #fff; border: 1px solid var(--ft-border); border-radius: 12px;
    padding: 14px 18px; text-align: left; cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.ft-hfi-bars__row:hover { border-color: var(--terracotta); box-shadow: var(--ft-shadow-md); }
@media (max-width: 768px) {
    .ft-hfi-bars__row { grid-template-columns: 110px 1fr 80px; gap: 8px; padding: 12px; }
}
.ft-hfi-bars__label strong { display: block; font-family: 'Noto Serif KR', serif; font-weight: 700; color: var(--ink); font-size: 14.5px; }
.ft-hfi-bars__label small  { display: block; color: var(--ft-muted); font-size: 12px; }
.ft-hfi-bars__bar { display: block; height: 16px; background: rgba(141,168,132,.2); border-radius: 999px; overflow: hidden; }
.ft-hfi-bars__fill { display: block; height: 100%; border-radius: 999px; transition: width .6s ease; }
.ft-hfi-bars__value { text-align: right; }
.ft-hfi-bars__value strong { display: block; font-family: 'Noto Serif KR', serif; font-weight: 700; color: var(--pine); font-size: 16px; font-variant-numeric: tabular-nums; }
.ft-hfi-bars__value small  { display: block; color: var(--ft-muted); font-size: 11.5px; }

.ft-hfi-modal__total {
    display: flex; align-items: baseline; justify-content: center; gap: 8px;
    background: var(--cream); border-radius: 10px; padding: 14px;
}
.ft-hfi-modal__total strong { font-family: 'Noto Serif KR', serif; font-weight: 900; font-size: 32px; color: var(--terracotta); }
.ft-hfi-modal__total small  { color: var(--ft-muted); font-size: 13px; }

/* ==========================================================
   Smart Recipe Calculator (full)
   ========================================================== */
.ft-smart {
    display: grid; gap: 24px; grid-template-columns: 1fr;
}
@media (min-width: 992px) { .ft-smart { grid-template-columns: 320px 1fr; } }

.ft-smart__controls {
    background: #fff; border: 1px solid var(--ft-border); border-radius: 14px;
    padding: 22px; align-self: flex-start;
    position: sticky; top: 84px;
}
.ft-smart__row { margin-bottom: 18px; }
.ft-smart__row:last-child { margin-bottom: 0; }
.ft-smart__label {
    display: block; font-family: 'Cormorant Garamond', serif; font-style: italic;
    color: var(--ft-muted); font-size: 13px; margin: 0 0 6px;
}
.ft-smart__label strong { color: var(--terracotta); font-family: 'Noto Serif KR', serif; font-size: 18px; }
.ft-smart__row--presets { display: flex; gap: 6px; flex-wrap: wrap; }
.ft-smart__row--options { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ft-smart__option { cursor: pointer; }
.ft-smart__option.is-active { background: var(--terracotta); color: #fff; }

.ft-smart__result {
    background: #fff; border: 1px solid var(--ft-border); border-radius: 14px;
    padding: 24px;
}
.ft-smart__head { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--ft-border); }
.ft-smart__eyebrow {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    color: var(--ft-muted); font-size: 14px; margin: 0;
}
.ft-smart__title {
    font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 28px;
    color: var(--ink); margin: 4px 0 12px;
}
.ft-smart__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.ft-smart__badge {
    display: inline-block; padding: 5px 12px; border-radius: 999px;
    background: var(--cream); color: var(--ft-ink-2); font-size: 12.5px;
}
.ft-smart__badge--hfi  { background: rgba(184,137,61,.15); color: var(--gold); font-weight: 700; }
.ft-smart__badge--cost { background: rgba(196,109,58,.12); color: var(--terracotta); font-weight: 700; }

.ft-smart__tabs { border-bottom-color: var(--ft-border); margin-top: 8px; }
.ft-smart__tabs .nav-link { color: var(--ft-ink-2); border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; }
.ft-smart__tabs .nav-link.active {
    color: var(--pine); background: transparent; border-bottom-color: var(--terracotta);
    font-weight: 700;
}
.ft-smart__table { margin-top: 14px; }
.ft-smart__hint { color: var(--ft-muted); font-size: 12px; margin: 10px 0 0; }
.ft-smart__steps { padding-left: 18px; }
.ft-smart__steps li { margin: 8px 0; line-height: 1.7; }
.ft-smart__nut {
    background: var(--cream); border-radius: 10px; padding: 14px 12px; text-align: center;
}
.ft-smart__nut small { display: block; color: var(--ft-muted); font-size: 11px; }
.ft-smart__nut strong { display: block; font-family: 'Noto Serif KR', serif; font-weight: 700; color: var(--pine); font-size: 22px; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* ==========================================================
   Filter Bar (Library)
   ========================================================== */
.ft-filterbar {
    display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;
    background: #fff; border: 1px solid var(--ft-border); border-radius: 14px;
    padding: 14px 16px;
}
.ft-filterbar__group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ft-filterbar__group--search { flex: 1 1 240px; gap: 8px; }
.ft-filterbar__group--search input { min-width: 160px; }
.ft-filterbar__label {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    color: var(--ft-muted); font-size: 13px; margin: 0 6px 0 0;
    white-space: nowrap;
}

.ft-chip {
    display: inline-block; padding: 5px 12px; border-radius: 999px;
    background: var(--cream); color: var(--ft-ink-2); font-size: 12.5px;
    border: 1px solid transparent;
}
.ft-chip:hover { background: var(--paper); border-color: var(--ft-border); text-decoration: none; color: var(--ink); }
.ft-chip.is-active { background: var(--pine); color: #fff; }
.ft-chip--leaf.is-active       { background: var(--leaf); }
.ft-chip--sage.is-active       { background: var(--moss); }
.ft-chip--gold.is-active       { background: var(--gold); }
.ft-chip--terracotta.is-active { background: var(--terracotta); }

/* ==========================================================
   Recipe Detail — HFI Badge
   ========================================================== */
.ft-recipe-hfi {
    display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
    background: linear-gradient(135deg, var(--cream), var(--paper));
    border: 1px solid var(--ft-border); border-radius: 14px;
    padding: 18px 22px;
}
.ft-recipe-hfi__label { color: var(--ft-muted); font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13px; margin: 0; }
.ft-recipe-hfi__score {
    font-family: 'Noto Serif KR', serif; font-weight: 900; font-size: 32px; color: var(--terracotta);
    font-variant-numeric: tabular-nums; line-height: 1;
}
.ft-recipe-hfi__grade {
    display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 999px;
    background: var(--terracotta); color: #fff; font-size: 12px; font-weight: 700;
}
.ft-recipe-hfi__breakdown { display: flex; gap: 12px; margin-left: auto; }
.ft-recipe-hfi__breakdown span {
    background: #fff; border: 1px solid var(--ft-border); border-radius: 8px;
    padding: 8px 12px; text-align: center; min-width: 70px;
}
.ft-recipe-hfi__breakdown small  { display: block; color: var(--ft-muted); font-size: 11px; }
.ft-recipe-hfi__breakdown strong { display: block; font-family: 'Noto Serif KR', serif; font-weight: 700; color: var(--pine); font-variant-numeric: tabular-nums; }

/* ==========================================================
   Recipe Card (Library/recipes)
   ========================================================== */
.ft-recipe-card {
    display: block; background: #fff; border: 1px solid var(--ft-border); border-radius: 12px;
    overflow: hidden; color: var(--ink); height: 100%;
    transition: transform .12s, box-shadow .12s;
}
.ft-recipe-card:hover { transform: translateY(-2px); box-shadow: var(--ft-shadow-md); text-decoration: none; color: var(--ink); }
.ft-recipe-card__thumb {
    aspect-ratio: 4 / 3; background: var(--cream) center/cover no-repeat; position: relative;
    display: flex; align-items: center; justify-content: center;
    color: var(--sage); font-size: 32px;
}
.ft-recipe-card__grade {
    position: absolute; top: 8px; right: 8px; padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 700; color: #fff;
}
.ft-recipe-card__grade--1, .ft-recipe-card__grade--2 { background: var(--rust); }
.ft-recipe-card__grade--3                            { background: var(--gold); }
.ft-recipe-card__grade--4                            { background: var(--leaf); }
.ft-recipe-card__grade--5                            { background: var(--sage); }
.ft-recipe-card__body { padding: 12px 14px 16px; }
.ft-recipe-card__meta { font-size: 11.5px; color: var(--ft-muted); margin: 0 0 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ft-recipe-card__stage {
    display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px;
    background: var(--cream); color: var(--ft-ink-2);
}
.ft-recipe-card__stage--leaf       { background: rgba(90,122,79,.15);  color: var(--leaf); }
.ft-recipe-card__stage--sage       { background: rgba(141,168,132,.2); color: var(--moss); }
.ft-recipe-card__stage--gold       { background: rgba(184,137,61,.15); color: var(--gold); }
.ft-recipe-card__stage--terracotta { background: rgba(196,109,58,.15); color: var(--terracotta); }
.ft-recipe-card__title { font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 15.5px; line-height: 1.4; margin: 4px 0; }
.ft-recipe-card__ing { color: var(--ft-muted); font-size: 12px; margin: 0; }

/* ==========================================================
   Ingredient Grid (Library/ingredients)
   ========================================================== */
.ft-ing-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 576px) { .ft-ing-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .ft-ing-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px){ .ft-ing-grid { grid-template-columns: repeat(6, 1fr); } }

.ft-ing-card {
    display: block; background: #fff; border: 1px solid var(--ft-border); border-radius: 12px;
    overflow: hidden; color: var(--ink); transition: transform .12s, box-shadow .12s;
}
.ft-ing-card:hover { transform: translateY(-2px); box-shadow: var(--ft-shadow-md); text-decoration: none; color: var(--ink); }
.ft-ing-card__thumb {
    aspect-ratio: 1 / 1; background: var(--cream) center/cover no-repeat; position: relative;
    display: flex; align-items: center; justify-content: center;
    color: var(--sage); font-size: 28px;
}
.ft-ing-card__grade {
    position: absolute; top: 6px; right: 6px; padding: 2px 7px; border-radius: 999px;
    font-size: 10px; font-weight: 700; color: #fff; letter-spacing: .02em;
}
.ft-ing-card__body { padding: 10px 12px 14px; text-align: center; }
.ft-ing-card__name { display: block; font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 14px; }
.ft-ing-card__latin { display: block; color: var(--ft-muted); font-style: italic; font-family: 'Cormorant Garamond', serif; font-size: 12px; }
.ft-ing-card__cat { display: inline-block; margin-top: 4px; font-size: 11px; color: var(--ft-muted); }

/* ==========================================================
   Live + Finalist Cards (Contest)
   ========================================================== */
.ft-live { background: var(--ink); border-radius: 14px; overflow: hidden; padding: 22px; color: #fff; position: relative; }
.ft-live__badge {
    display: inline-block; background: var(--terracotta); color: #fff; padding: 4px 12px; border-radius: 999px;
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; letter-spacing: .05em;
    margin-bottom: 14px;
    animation: ft-live-pulse 2s ease-in-out infinite;
}
@keyframes ft-live-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.ft-live__embed { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.ft-live__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ft-live__caption { color: #cfd1ce; font-size: 13px; margin: 12px 0 0; }

.ft-finalist-card {
    background: #fff; border: 1px solid var(--ft-border); border-radius: 12px;
    padding: 20px 18px; position: relative; height: 100%;
    display: flex; flex-direction: column; gap: 6px;
    transition: transform .12s, box-shadow .12s;
}
.ft-finalist-card:hover { transform: translateY(-2px); box-shadow: var(--ft-shadow-md); }
.ft-finalist-card__no {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    color: var(--terracotta); font-size: 28px; font-weight: 600; line-height: 1;
}
.ft-finalist-card__category {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    background: var(--cream); color: var(--ft-ink-2); font-size: 11px;
    align-self: flex-start;
}
.ft-finalist-card__title {
    font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 16px; color: var(--ink);
    margin: 4px 0;
}
.ft-finalist-card__app { color: var(--ft-muted); font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px; }

/* ==========================================================
   Smart Recipe Calculator — 미리보기 (랜딩)
   ========================================================== */
.ft-smart-preview {
    background: #fff; border: 1px solid var(--ft-border); border-radius: 18px;
    padding: 28px; max-width: 800px; margin: 0 auto;
    box-shadow: var(--ft-shadow-md);
}
.ft-smart-preview__head { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ft-smart-preview__chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--cream); color: var(--ink); padding: 6px 14px; border-radius: 999px;
    font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 13px;
}
.ft-smart-preview__chip--hfi { background: rgba(184,137,61,.15); color: var(--gold); }
.ft-smart-preview__sliders {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 16px 0; border-top: 1px dashed var(--ft-border); border-bottom: 1px dashed var(--ft-border);
}
.ft-smart-preview__label { display: block; font-size: 12px; color: var(--ft-muted); letter-spacing: .04em; text-transform: uppercase; }
.ft-smart-preview__value { font-family: 'Noto Serif KR', serif; font-weight: 900; font-size: 36px; color: var(--pine); line-height: 1; }
.ft-smart-preview__value small { font-size: 14px; color: var(--ft-muted); margin-left: 6px; font-weight: 400; }
.ft-smart-preview__presets button {
    border: 1px solid var(--ft-border); background: #fff; padding: 8px 14px; border-radius: 999px;
    font-size: 13px; color: var(--ft-ink-2); cursor: not-allowed;
}
.ft-smart-preview__presets button.is-active { background: var(--pine); color: #fff; border-color: var(--pine); }
.ft-smart-preview__table { margin-top: 18px; overflow-x: auto; }
.ft-smart-preview__table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ft-smart-preview__table th { background: var(--cream); padding: 10px 12px; text-align: left; font-weight: 700; color: var(--ink); }
.ft-smart-preview__table td { padding: 10px 12px; border-bottom: 1px solid var(--ft-border); }
.ft-smart-preview__cta {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px;
}
.ft-smart-preview__hint { color: var(--ft-muted); font-size: 12px; }

/* ==========================================================
   HFI Mini Chart (랜딩)
   ========================================================== */
.ft-hfi-mini { max-width: 900px; margin: 0 auto; }
.ft-hfi-mini__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ft-hfi-mini__row {
    display: grid; grid-template-columns: 140px 1fr 80px; gap: 12px; align-items: center;
}
@media (max-width: 575px) {
    .ft-hfi-mini__row { grid-template-columns: 110px 1fr 60px; gap: 8px; }
}
.ft-hfi-mini__label strong { display: block; font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 14px; color: var(--ink); }
.ft-hfi-mini__label small  { display: block; color: var(--ft-muted); font-size: 12px; }
.ft-hfi-mini__bar { display: block; height: 14px; background: rgba(141,168,132,.2); border-radius: 999px; overflow: hidden; }
.ft-hfi-mini__fill { display: block; height: 100%; border-radius: 999px; transition: width .6s ease; }
.ft-hfi-mini__fill--g1 { background: var(--rust); }
.ft-hfi-mini__fill--g2 { background: var(--terracotta); }
.ft-hfi-mini__fill--g3 { background: var(--gold); }
.ft-hfi-mini__fill--g4 { background: var(--leaf); }
.ft-hfi-mini__fill--g5 { background: var(--sage); }
.ft-hfi-mini__value { font-family: 'Noto Serif KR', serif; font-weight: 700; color: var(--pine); font-variant-numeric: tabular-nums; text-align: right; font-size: 14px; }
.ft-hfi-mini__cta { text-align: center; margin-top: 24px; }

/* ==========================================================
   Dark CTA (품평단)
   ========================================================== */
.ft-cta-dark { background: linear-gradient(135deg, var(--pine), var(--ink)); color: var(--cream); padding: 64px 0; }
.ft-cta-dark__grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ft-cta-dark__grid { grid-template-columns: 1.4fr 1fr; align-items: center; } }
.ft-cta-dark__eyebrow {
    font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--gold);
    margin: 0 0 6px; font-size: 16px;
}
.ft-cta-dark__title { font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 32px; margin: 0 0 14px; color: #fff; }
.ft-cta-dark__desc { color: #cfd1cb; line-height: 1.85; max-width: 520px; margin: 0 0 22px; font-size: 15px; }
.ft-cta-dark__stats {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
@media (min-width: 992px) { .ft-cta-dark__stats { grid-template-columns: repeat(2, 1fr); } }
.ft-cta-dark__stats li {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    padding: 22px; border-radius: 14px; text-align: center;
}
.ft-cta-dark__stats strong {
    display: block; font-family: 'Noto Serif KR', serif; font-weight: 900;
    font-size: 36px; color: var(--gold); line-height: 1;
}
.ft-cta-dark__stats span {
    display: block; margin-top: 8px; font-size: 13px; color: #cfd1cb;
    font-family: 'Cormorant Garamond', serif; font-style: italic; letter-spacing: .04em;
}

/* ==========================================================
   Responsive — 모바일/태블릿 보강
   - 콘텐츠 가로 스크롤 방지 (img, iframe, table)
   - 헤더/리본/히어로/푸터/주요 그리드 폰트·여백 축소
   - 레거시 게시판·1:1문의·제휴문의·회원가입 페이지 강제 반응형
   ========================================================== */

/* 1) 글로벌 가드 — 콘텐츠가 가로로 넘치지 않도록 */
html, body { overflow-x: hidden; }
.ft-body img,
.ft-body video { max-width: 100%; height: auto; }
.ft-body iframe { max-width: 100%; }
.ft-prose img,
.ft-prose video { display: block; }

/* CMS 본문 안에 들어오는 와이드 표 — 세로 스크롤 허용 */
.ft-prose table,
.ft-page .ft-table,
.ft-card .ft-table { width: 100%; }
.ft-prose { overflow-wrap: anywhere; word-break: keep-all; }
.ft-prose .table-wrap,
.ft-page .table-responsive,
.ft-card .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 2) ≤ 991px (태블릿/모바일) — 헤더 컴팩트 */
@media (max-width: 991px) {
    .ft-header__top { gap: 12px; padding: 10px 0; }
    .ft-logo__img { height: 44px; }
    .ft-header__toggle { font-size: 24px; padding: 4px 8px; }
}

/* 3) ≤ 767px (모바일) — 본문/히어로/푸터 축소 */
@media (max-width: 767px) {
    /* 상단 리본: 한 줄로 안 들어가면 가운데 정렬, 외부링크 줄바꿈 */
    .ft-ribbon { font-size: 12px; }
    .ft-ribbon__row { gap: 8px; padding: 6px 0; justify-content: center; text-align: center; }
    .ft-ribbon__links { gap: 12px; font-size: 11px; }
    .ft-ribbon__links a { font-size: 11px; }

    /* 섹션 / 페이지 여백 축소 */
    .ft-section { padding: 44px 0; }
    .ft-page    { padding: 36px 0 56px; }
    .ft-section__title { font-size: 22px; }
    .ft-section__sub   { font-size: 14px; }

    /* 히어로 */
    .ft-landing-hero { padding: 60px 0 76px; }
    .ft-landing-hero__title { font-size: 30px; line-height: 1.25; }
    .ft-landing-hero__lede  { font-size: 15px; line-height: 1.75; }
    .ft-landing-hero__leaf--a svg { width: 80px; height: 80px; }
    .ft-landing-hero__leaf--b svg { width: 60px; height: 60px; }
    .ft-landing-hero__cta { gap: 8px; }
    .ft-landing-hero__cta .ft-btn { width: 100%; text-align: center; }

    /* 카운트다운 */
    .ft-cd-wrap     { margin-top: -32px; }
    .ft-countdown   { padding: 20px 18px; gap: 14px; }
    .ft-countdown__title { font-size: 18px; }
    .ft-countdown__cell  { padding: 10px 6px; }
    .ft-countdown__cell strong { font-size: 24px; }
    .ft-countdown__cell span   { font-size: 11px; }

    /* 5섹션 안내 타일 */
    .ft-tile { padding: 22px 18px 26px; min-height: 160px; }
    .ft-tile__title { font-size: 20px; }

    /* SROI */
    .ft-sroi { padding: 22px; gap: 14px; }
    .ft-sroi__item  { min-width: 0; padding: 18px 22px; flex: 1 1 140px; }
    .ft-sroi__item strong { font-size: 40px; }
    .ft-sroi__arrow { transform: rotate(90deg); font-size: 26px; }

    /* KPI 숫자 폭 줄이기 */
    .ft-kpi__num { font-size: 28px; }

    /* 다크 CTA — 통계 폰트 줄이기 */
    .ft-cta-dark { padding: 48px 0; }
    .ft-cta-dark__title  { font-size: 24px; }
    .ft-cta-dark__stats strong { font-size: 28px; }

    /* HFI 미니/풀 차트 행: 라벨 칸 더 좁게 */
    .ft-hfi-mini__row { grid-template-columns: 100px 1fr 56px; gap: 6px; }
    .ft-hfi-bars__row { grid-template-columns: 96px 1fr 70px; gap: 6px; padding: 10px; }

    /* 레시피 HFI 배지 */
    .ft-recipe-hfi { padding: 14px; gap: 10px; }
    .ft-recipe-hfi__breakdown { margin-left: 0; flex-wrap: wrap; gap: 8px; }
    .ft-recipe-hfi__breakdown span { padding: 6px 10px; min-width: 60px; }
    .ft-recipe-hfi__score { font-size: 26px; }

    /* 스마트레시피 미리보기 — 슬라이더 영역 줄바꿈 */
    .ft-smart-preview { padding: 18px; }
    .ft-smart-preview__sliders { gap: 10px; padding: 12px 0; }
    .ft-smart-preview__value { font-size: 28px; }

    /* 라이브 / 동영상 임베드 — 16:9 유지 (이미 aspect-ratio) */

    /* 푸터 — 사이트맵/메타 정보 축소 */
    .ft-footer { padding: 40px 0 24px; margin-top: 56px; }
    .ft-footer__brand { margin-bottom: 24px; gap: 22px; }
    .ft-footer__brand-left { max-width: 100%; }
    .ft-footer__contact { min-width: 0; width: 100%; padding: 14px 18px; }
    .ft-footer__contact-tel { font-size: 22px; }
    .ft-footer__sitemap { gap: 18px; }
    .ft-footer__partners { gap: 8px 12px; font-size: 11px; }
    .ft-footer__partners-divider { display: none; }
    .ft-footer__legal { gap: 8px 12px; }

    /* 일반 .container 좌우 패딩이 너무 좁으면 보강 */
    .container, .container-fluid { padding-left: 16px; padding-right: 16px; }

    /* 폼 컨트롤 — 모바일에서 폰트 16px 미만이면 iOS Safari 자동 줌 */
    .ft-form .form-control,
    .ft-form .form-select,
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    select,
    textarea { font-size: 16px; }
}

/* 4) ≤ 575px (소형 모바일) — 더 강한 압축 */
@media (max-width: 575px) {
    .ft-landing-hero__title { font-size: 26px; }
    .ft-section__title  { font-size: 20px; }

    .ft-countdown__digits { gap: 6px; }
    .ft-countdown__cell strong { font-size: 20px; }

    /* 헤더 로고 텍스트 너무 좁을 땐 영문 부제 숨김 */
    .ft-header__top { gap: 8px; }
    .ft-logo__img { height: 38px; }

    /* 히어로 CTA 풀폭 */
    .ft-landing-hero__cta { flex-direction: column; }
    .ft-landing-hero__cta .ft-btn { width: 100%; }
}

/* ==========================================================
   레거시 페이지 (구 게시판 / 1:1문의 / 제휴문의 / 회원가입) 반응형 강제
   - 새 디자인 시스템(ft-) 외에서 쓰는 클래스/구조에 안전 가드 적용
   ========================================================== */

/* 1:1문의 / 제휴문의 — .container_cus / .cus_leftmenu / .cusinfor */
.container_cus { display: block; max-width: 1200px; margin: 0 auto; padding: 24px 16px 48px; }
.container_cus::after { content:''; display:block; clear:both; }
.container_cus .cus_leftmenu {
    float: none; width: 100%; max-width: 100%;
    margin: 0 0 24px;
}
.container_cus .cusinfor { display: block; width: 100%; }
@media (min-width: 992px) {
    .container_cus { display: flex; gap: 28px; align-items: flex-start; }
    .container_cus .cus_leftmenu { float: none; width: 240px; flex: 0 0 240px; margin: 0; }
    .container_cus .cusinfor { flex: 1 1 auto; min-width: 0; }
}
.container_cus .page_title {
    font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 22px;
    color: var(--ink); margin: 0 0 18px;
}
.container_cus .cooper_title { font-size: 18px !important; line-height: 1.5; }
.container_cus .cooper_sub_tit { font-size: 14px !important; line-height: 1.6 !important; margin-bottom: 24px !important; }

/* 폼 입력 박스 폭 강제 — 인라인 width:160px/480px 등 무시 */
.container_cus input[type="text"],
.container_cus input[type="email"],
.container_cus input[type="tel"],
.container_cus input[type="password"],
.container_cus textarea,
.container_cus select {
    max-width: 100% !important;
    box-sizing: border-box;
}
.container_cus textarea { width: 100% !important; min-height: 160px; }

/* 레거시 폼 테이블 — 모바일에서 행/열 풀어서 한 줄씩 */
.container_cus .tb_form { width: 100%; border-collapse: collapse; }
.container_cus .tb_form th,
.container_cus .tb_form td {
    padding: 10px 12px; vertical-align: top;
    border-bottom: 1px solid var(--ft-border, #e3ddd0);
    font-size: 14px;
}
.container_cus .tb_form th { background: var(--ft-bg-soft, #f5f1e8); font-weight: 700; text-align: left; }
@media (max-width: 767px) {
    .container_cus .tb_form,
    .container_cus .tb_form tbody,
    .container_cus .tb_form tr,
    .container_cus .tb_form th,
    .container_cus .tb_form td { display: block; width: 100% !important; }
    .container_cus .tb_form colgroup { display: none; }
    .container_cus .tb_form th { padding: 12px 10px 4px; border: 0; background: transparent; color: var(--ft-ink, #1a1f1c); }
    .container_cus .tb_form td { padding: 0 10px 14px; border-bottom: 1px solid var(--ft-border, #e3ddd0); }
}

/* 게시판 (legacy) — bbsbox / tbl-list / tbl_view / areabox */
.bbsbox { display: block; padding: 0; }
.bbsbox .tbl-list { width: 100% !important; border-collapse: collapse; table-layout: fixed; }
.bbsbox .tbl-list td { padding: 12px 8px; border-bottom: 1px solid var(--ft-border, #e3ddd0); font-size: 14px; vertical-align: middle; word-break: break-word; }
.bbsbox .tbl-list td.subject { padding-left: 0; }
.bbsbox .tbl-list .sub  { font-weight: 600; color: var(--ft-ink, #1a1f1c); display: block; line-height: 1.5; }
.bbsbox .tbl-list .more { color: var(--ft-muted, #6b6f66); font-size: 12px; display: block; margin-top: 4px; }

.bbsbox .tbl_view { width: 100% !important; border-top: 2px solid var(--ft-ink, #1a1f1c); border-bottom: 1px solid var(--ft-border, #e3ddd0); }
.bbsbox .tbl_view th,
.bbsbox .tbl_view td { padding: 14px 12px; border-bottom: 1px solid var(--ft-border, #e3ddd0); font-size: 14px; line-height: 1.7; word-break: break-word; }
.bbsbox .tbl_view th.sub { font-size: 17px; font-weight: 700; background: var(--ft-bg-soft, #f5f1e8); }
.bbsbox .tbl_view .info { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; }
.bbsbox .tbl_view .info li strong { color: var(--ft-ink-2, #3a3d35); margin-right: 6px; }
.bbsbox .tbl_view td.contents { padding: 22px 14px; }
.bbsbox .tbl_view td.contents img { max-width: 100% !important; height: auto !important; }
.bbsbox .tbl_view td.contents iframe { max-width: 100%; }
.bbsbox .tbl_view td.contents table { max-width: 100%; }

.bbsbox input[type="text"],
.bbsbox input[type="password"],
.bbsbox input[type="email"],
.bbsbox select,
.bbsbox textarea {
    max-width: 100% !important; width: 100%;
    padding: 8px 12px; box-sizing: border-box;
    border: 1px solid var(--ft-border, #e3ddd0); border-radius: 6px; font-size: 15px;
}
.bbsbox textarea { min-height: 200px; }

.bbsbox .areabox {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    justify-content: space-between; padding: 18px 0;
}
.bbsbox .areabox .left,
.bbsbox .areabox .right { display: flex; gap: 8px; flex-wrap: wrap; }

.bbsbox .bbsbtn {
    display: inline-block; padding: 9px 18px; border-radius: 999px;
    background: var(--ft-bg-soft, #f5f1e8); color: var(--ft-ink-2, #3a3d35);
    font-size: 14px; font-weight: 600; border: 1px solid var(--ft-border, #e3ddd0);
}
.bbsbox .bbsbtn:hover { background: var(--cream, #f5f1e8); text-decoration: none; }
.bbsbox .bbsbtn.type2,
.bbsbox .bbsbtn.type02 {
    background: var(--ft-brand, #5a7a4f); color: #fff !important; border-color: var(--ft-brand, #5a7a4f);
}
.bbsbox .bbsbtn.type2:hover,
.bbsbox .bbsbtn.type02:hover { background: var(--ft-brand-dark, #1a3a2e); }

/* 게시판 검색 폼 영역 */
.bbsbox form > select,
.bbsbox form > input[type="text"] { display: inline-block; width: auto; max-width: 100%; }
.bbsbox form > input[type="submit"] {
    background: var(--ft-brand, #5a7a4f); color: #fff !important; border: 0;
    padding: 8px 16px; border-radius: 999px; cursor: pointer;
}

/* 모바일에서 게시판 목록 컬럼 비율 자동 */
@media (max-width: 575px) {
    .bbsbox .tbl-list colgroup { display: none; }
    .bbsbox .tbl-list col { width: auto; }
    .bbsbox .tbl-list td:first-child { width: 40px; padding-right: 4px; color: var(--ft-muted, #6b6f66); font-size: 12px; }
    .bbsbox .tbl_view th,
    .bbsbox .tbl_view td { padding: 12px 8px; font-size: 13.5px; }
}

/* 페이지네이션 (.paging .paginate) — 가운데 정렬 + 줄바꿈 */
.paging { margin: 28px 0 0; text-align: center; }
.paging .paginate {
    display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-items: center;
}
.paging .paginate a,
.paging .paginate strong {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 10px;
    border: 1px solid var(--ft-border, #e3ddd0); border-radius: 8px;
    color: var(--ft-ink-2, #3a3d35); font-size: 14px; text-decoration: none; background: #fff;
}
.paging .paginate strong {
    background: var(--ft-brand, #5a7a4f); color: #fff; border-color: var(--ft-brand, #5a7a4f);
}
.paging .paginate a:hover { background: var(--ft-bg-soft, #f5f1e8); text-decoration: none; }

/* 회원가입 레거시 페이지 (#cont_wrap)
   — 인라인 width:730px / height:1000px 등을 강제로 풀어 모바일 표시 */
#cont_wrap { width: 100% !important; max-width: 100% !important; padding: 16px; box-sizing: border-box; }
#cont_wrap > div[style*="width:730px"],
#cont_wrap > div[style*="width: 730px"] {
    width: 100% !important; max-width: 760px !important; height: auto !important;
    float: none !important; margin: 0 auto !important;
}
#cont_wrap div[style*="width:642px"],
#cont_wrap div[style*="width: 642px"] { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
#cont_wrap .sub_cont { width: 100% !important; max-width: 100% !important; }
#cont_wrap .tbl_list { width: 100%; border-collapse: collapse; }
#cont_wrap .tbl_list th,
#cont_wrap .tbl_list td { padding: 10px 12px; border-bottom: 1px solid var(--ft-border, #e3ddd0); font-size: 14px; vertical-align: top; }
#cont_wrap .tbl_list th { background: var(--ft-bg-soft, #f5f1e8); font-weight: 700; text-align: left; width: 140px; }
#cont_wrap input[type="text"],
#cont_wrap input[type="password"],
#cont_wrap input[type="email"],
#cont_wrap select,
#cont_wrap textarea {
    max-width: 100%; box-sizing: border-box;
    padding: 8px 10px; border: 1px solid var(--ft-border, #e3ddd0); border-radius: 6px; font-size: 15px;
}
@media (max-width: 767px) {
    #cont_wrap .tbl_list,
    #cont_wrap .tbl_list tbody,
    #cont_wrap .tbl_list tr,
    #cont_wrap .tbl_list th,
    #cont_wrap .tbl_list td { display: block; width: 100% !important; }
    #cont_wrap .tbl_list colgroup { display: none; }
    #cont_wrap .tbl_list th { padding: 12px 4px 4px; border: 0; background: transparent; }
    #cont_wrap .tbl_list td { padding: 0 4px 14px; }
}

/* CMS HTML 에디터 본문(컨텐츠) — 임의 폭/내장 미디어 가드 */
.ft-prose img,
.ft-prose video,
.ft-prose iframe,
.bbsbox img,
.bbsbox video,
.bbsbox iframe { max-width: 100% !important; height: auto; }
.ft-prose pre,
.bbsbox pre { white-space: pre-wrap; word-break: break-word; max-width: 100%; overflow-x: auto; }
/* CMS 에디터 본문에 들어오는 임의 와이드 표는 셀 단위 줄바꿈으로 우선 안전하게 표시 */
.ft-prose table,
.bbsbox table.editor-table { max-width: 100%; }
.ft-prose table td,
.ft-prose table th { word-break: break-word; }