/* ============================================================
   갈비프렌즈 — 확장 섹션 스타일 (원페이지 멀티섹션)
   style.css 다음에 로드. 신규 컴포넌트 전용.
   ============================================================ */

.container--narrow{max-width:860px}
.grid--5{grid-template-columns:repeat(5,1fr)}

/* ---------- 히어로 배지 (7개) ---------- */
.hero__badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hero__badges span{font-size:.85rem;font-weight:600;color:#e6e9ed;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:8px 15px;border-radius:30px}
.hero__badges span.hot{color:#fff;background:var(--orange);border-color:var(--orange)}

/* ---------- 번호 카드 (왜 지금 / 3박스) ---------- */
.num-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:38px 28px;transition:transform .25s ease,box-shadow .25s ease;text-align:center}
.num-card__icon{margin:0 auto 14px}
.num-card__icon img{width:92px;height:92px;object-fit:contain;display:block;margin:0 auto;filter:drop-shadow(0 9px 14px rgba(0,0,0,.12))}
.model-detail__icon{margin-bottom:12px}
.model-detail__icon img{width:66px;height:66px;object-fit:contain;display:block}
.support-card__top{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.support-card__icon{width:56px;height:56px;object-fit:contain;display:block;flex-shrink:0}
.point-card__icon img{width:82px;height:82px;object-fit:contain;display:block;margin-bottom:6px;filter:drop-shadow(0 9px 14px rgba(0,0,0,.28))}
.num-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.num-card__no{display:inline-block;font-size:2rem;font-weight:900;font-style:italic;color:var(--orange);line-height:1;margin-bottom:14px}
.num-card h3{font-size:1.3rem}
.num-card p{margin-top:10px;color:var(--muted);font-size:.97rem}

/* ---------- 전환 배너 ---------- */
.cta-banner{position:relative;padding:64px 0;background:linear-gradient(150deg,#2a1d12,#140d07);color:#fff;overflow:hidden}
.cta-banner::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 30%,rgba(242,111,33,.4),transparent 52%),radial-gradient(circle at 8% 82%,rgba(216,56,28,.24),transparent 46%)}
.cta-banner__inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:34px}
.cta-banner h2{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800;letter-spacing:-.02em}
.cta-banner p{margin-top:12px;color:#cdd3da;font-size:1.02rem;max-width:680px}
.cta-banner .btn{flex-shrink:0}
.cta-banner--light{background:#fff;color:var(--ink);padding:40px;border-radius:18px;box-shadow:var(--shadow);margin-top:44px}
.cta-banner--light::before{display:none}
.cta-banner--light p{color:var(--muted)}

/* ---------- 참숯 배경 시리즈 ---------- */
#taste{background:linear-gradient(rgba(16,10,5,.48),rgba(10,6,3,.64)),url('../images/bg/bg-embers.png') center/cover no-repeat fixed}
#support{background:linear-gradient(rgba(15,9,5,.5),rgba(10,6,3,.66)),url('../images/bg/bg-smoke.png') center/cover no-repeat fixed}
.cta-banner:not(.cta-banner--light){background:linear-gradient(rgba(13,7,3,.46),rgba(9,5,2,.62)),url('../images/bg/bg-flame.png') center/cover no-repeat fixed}
.footer{background:linear-gradient(rgba(11,7,4,.74),rgba(7,4,2,.86)),url('../images/bg/bg-smoke.png') center/cover no-repeat}
/* 옅은 오버레이에서도 텍스트 가독 확보 */
#taste .section__head,#support .section__head,.cta-banner__inner,.menu-head,#taste .quote{text-shadow:0 2px 16px rgba(0,0,0,.7)}

/* ---------- 맞춤 창업 모델 (가로 3열 카드) ---------- */
.models-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 26px;position:relative;overflow:hidden;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.mcard::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--orange),var(--red));transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.mcard:hover{transform:translateY(-8px);box-shadow:0 28px 52px -26px rgba(90,45,24,.45);border-color:#ffcfa3}
.mcard:hover::before{transform:scaleX(1)}
.mcard--feature{background:linear-gradient(172deg,#fff 58%,#fff4e9);border-color:#ffd6b0}
.mcard--feature::before{transform:scaleX(1)}
.mcard__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.mcard__icon img{width:74px;height:74px;object-fit:contain}
.mcard__no{font-size:2.7rem;font-weight:900;font-style:italic;color:#e9ddca;line-height:1}
.mcard--feature .mcard__no{color:#ffc794}
.mcard__tag{display:inline-block;font-size:.82rem;font-weight:800;letter-spacing:.04em;color:var(--orange);margin-bottom:8px}
.mcard h3{font-size:1.3rem;line-height:1.34;margin-bottom:13px}
.mcard p{color:var(--muted);font-size:.95rem;line-height:1.72;margin-bottom:18px}
.mcard__list{margin-bottom:24px}
.mcard__list li{position:relative;padding:8px 0 8px 26px;font-weight:600;color:#4a4138;font-size:.93rem;border-top:1px solid var(--line)}
.mcard__list li:first-child{border-top:none}
.mcard__list li::before{content:"✓";position:absolute;left:2px;color:var(--orange);font-weight:900}
.mcard__cta{margin-top:auto;width:100%}
@media (max-width:900px){.models-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}}

/* 창업 혜택 — 다크 임팩트 배경 */
#benefits{background:radial-gradient(circle at 50% -8%,rgba(242,111,33,.18),transparent 52%),linear-gradient(180deg,#1d150d,#140f09)}
#benefits .compare__col--bad{background:rgba(255,255,255,.06);color:#9aa0a7;border:1px solid rgba(255,255,255,.1)}
#benefits .compare__col--bad li{border-bottom-color:rgba(255,255,255,.08)}

/* ---------- 브랜드 스토리 ---------- */
.story{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center;margin-bottom:60px}
.story__text p{font-size:1.08rem;color:#41474e;margin-bottom:16px;line-height:1.85}
.story__text p b{color:var(--ink)}
.slogan{font-size:clamp(1.3rem,2.4vw,1.7rem)!important;font-weight:800;color:var(--orange-d)!important;margin-top:24px!important}
.story__visual .img-ph{height:100%}
.story__visual img{width:100%;border-radius:16px;display:block;box-shadow:0 22px 44px -22px rgba(0,0,0,.55)}

/* ---------- 브랜드 핵심 4 / 맛 포인트 4 ---------- */
.feature-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;transition:transform .25s ease,box-shadow .25s}
.feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.feature-card__no{display:block;font-size:1.1rem;font-weight:900;font-style:italic;color:var(--orange);margin-bottom:12px}
.feature-card h3{font-size:1.16rem;line-height:1.35}
.feature-card p{margin-top:10px;color:var(--muted);font-size:.93rem}

.point-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:28px 24px;transition:transform .25s ease,border-color .25s}
.point-card:hover{transform:translateY(-6px);border-color:var(--orange)}
.point-card__no{display:block;font-size:1.1rem;font-weight:900;font-style:italic;color:var(--orange-l);margin-bottom:12px}
.point-card h3{font-size:1.16rem;color:#fff}
.point-card p{margin-top:10px;color:#aeb6bf;font-size:.93rem}

/* ---------- 감성 인용 ---------- */
.quote{text-align:center;max-width:820px;margin:56px auto;font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:800;line-height:1.5;color:#fff;letter-spacing:-.01em}
.quote b{color:var(--orange-l)}
.quote span{display:block;margin-top:18px;font-size:1.02rem;font-weight:500;color:#b9c0c8;line-height:1.7}

.menu-head{text-align:center;font-size:1.5rem;font-weight:800;color:#fff;margin:20px 0 30px}

/* ---------- 창업 혜택 5박스 ---------- */
.benefit-card{text-align:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:38px 20px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.benefit-card:hover{transform:translateY(-8px);border-color:var(--orange);box-shadow:0 24px 50px -22px rgba(0,0,0,.65)}
.benefit-card__big{display:inline-block;font-size:clamp(2.1rem,4vw,2.9rem);font-weight:900;color:#fff;line-height:1.1;letter-spacing:-.02em}
.benefit-card__big small{font-size:1rem;font-weight:700;margin-left:2px}
.benefit-card h3{margin-top:12px;font-size:1.16rem;color:#fff}
.benefit-card p{margin-top:8px;color:#a9b1ba;font-size:.88rem}
.benefit-card--hot{background:linear-gradient(158deg,var(--orange),var(--red));border:none;box-shadow:0 22px 48px -16px rgba(242,111,33,.75)}
.benefit-card--hot .benefit-card__big{color:#fff}
.benefit-card--hot h3{color:#fff}
.benefit-card--hot p{color:rgba(255,255,255,.92)}
.benefit-focus__label{text-align:center;margin:38px 0 18px;font-size:1.08rem;color:#cdd3da}
.benefit-focus__label b{color:var(--orange-l);font-weight:800}
.benefit-focus{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;max-width:840px;margin:0 auto}
.benefit-focus .benefit-card{padding:44px 30px;box-shadow:0 18px 42px -20px rgba(242,111,33,.5)}
.benefit-focus .benefit-card__big{font-size:clamp(2.1rem,4.4vw,3rem)}

/* ---------- 강한 배너 ---------- */
.strong-banner{margin-top:46px;text-align:center;background:rgba(242,111,33,.1);border:1.5px solid rgba(242,111,33,.55);color:#fff;border-radius:18px;padding:48px 34px;position:relative;overflow:hidden;box-shadow:0 0 56px -14px rgba(242,111,33,.45)}
.strong-banner::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(242,111,33,.22),transparent 62%)}
.strong-banner h3{position:relative;font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800}
.strong-banner p{position:relative;margin-top:14px;color:#cdd3da;max-width:720px;margin-left:auto;margin-right:auto}

/* ---------- 비교 ---------- */
.compare{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;margin-top:50px}
.compare__col{border-radius:var(--radius);padding:30px}
.compare__col h4{font-size:1.15rem;margin-bottom:18px;text-align:center}
.compare__col ul li{padding:11px 0 11px 28px;position:relative;font-size:.98rem;border-bottom:1px dashed rgba(0,0,0,.08)}
.compare__col ul li:last-child{border-bottom:none}
.compare__col--bad{background:#f3f1ef;color:#7a756e}
.compare__col--bad li::before{content:"✕";position:absolute;left:4px;color:#b9b1a6;font-weight:800}
.compare__col--good{background:linear-gradient(160deg,#fff6ef,#ffe9d8);color:#3a2a1c;border:1px solid #ffd2ad}
.compare__col--good h4{color:var(--orange-d)}
.compare__col--good li::before{content:"✓";position:absolute;left:4px;color:var(--orange);font-weight:800}
.compare__arrow{font-size:2rem;color:var(--orange);font-weight:900}

/* ---------- 비용 표 ---------- */
.cost-table{width:100%;max-width:760px;margin:0 auto;border-collapse:separate;border-spacing:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#fff}
.cost-table th,.cost-table td{padding:18px 26px;font-size:1.05rem;text-align:left;border-bottom:1px solid var(--line)}
.cost-table th{width:42%;background:#faf7f3;font-weight:700;color:#3a3f45}
.cost-table td{font-weight:800;color:var(--ink)}
.cost-table tr:last-child th,.cost-table tr:last-child td{border-bottom:none}
.cost-table tr.hot th{background:#fff1e6;color:var(--orange-d)}
.cost-table tr.hot td{color:var(--orange-d)}

.notice{margin-top:28px;text-align:center;color:#8a8378;font-size:.84rem;line-height:1.8}

/* ---------- 맞춤 창업 모델 (큰 블록) ---------- */
.model-detail{padding:36px 38px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;margin-bottom:24px;transition:transform .25s ease,box-shadow .25s ease}
.model-detail:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.model-detail:last-child{margin-bottom:0}
.model-detail__tag{display:inline-block;font-size:.84rem;font-weight:800;letter-spacing:.06em;color:var(--orange);margin-bottom:12px}
.model-detail__body h3{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:800;line-height:1.35}
.model-detail__body p{margin-top:14px;color:#50565d;font-size:1rem;line-height:1.8}
.ticks{margin:20px 0 24px;display:grid;grid-template-columns:repeat(2,1fr);gap:2px 28px}
.ticks li{position:relative;padding:8px 0 8px 28px;font-weight:600;color:#3a3f45;font-size:.97rem}
.ticks li::before{content:"✓";position:absolute;left:2px;color:var(--orange);font-weight:900}

/* ---------- 본사 지원 (다크 카드) ---------- */
.support-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:26px 22px;transition:transform .25s ease,border-color .25s;display:flex;flex-direction:column}
.support-card:hover{transform:translateY(-6px);border-color:var(--orange)}
.support-card__no{font-size:1.1rem;font-weight:900;font-style:italic;color:var(--orange-l)}
.support-card h3{margin-top:8px;font-size:1.14rem;color:#fff}
.support-card p{margin-top:10px;color:#aeb6bf;font-size:.9rem;flex:1}
.support-card__key{margin-top:16px;font-size:.86rem;font-weight:700;color:#fff;border-left:3px solid var(--orange);padding-left:10px}

/* ---------- 창업 절차 (타임라인) ---------- */
.steps{position:relative;max-width:760px;margin:0 auto;counter-reset:none;list-style:none}
.steps::before{content:"";position:absolute;left:19px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--orange),rgba(242,111,33,.2))}
.step{position:relative;padding:0 0 30px 64px}
.step:last-child{padding-bottom:0}
.step__no{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--orange);color:#fff;font-size:.66rem;font-weight:800;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.1;box-shadow:0 0 0 5px var(--cream)}
.step h3{font-size:1.18rem;font-weight:800}
.step p{margin-top:7px;color:#50565d;font-size:.97rem;line-height:1.75}

/* ---------- FAQ 아코디언 ---------- */
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;font-size:1.08rem;font-weight:700;color:var(--ink);padding:22px 44px 22px 4px;position:relative;line-height:1.5}
.faq-q::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:400;color:var(--orange);transition:transform .3s}
.faq-q::before{content:"Q";color:var(--orange);font-weight:900;margin-right:12px}
.faq-item.open .faq-q::after{content:"−"}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a p{padding:0 4px 24px 30px;color:#50565d;font-size:.99rem;line-height:1.8}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width:980px){
  .grid--5{grid-template-columns:repeat(3,1fr)}
  .story{grid-template-columns:1fr;gap:30px}
  .story__visual{max-width:420px;margin:0 auto}
  .ticks{grid-template-columns:1fr}
  .cta-banner__inner{flex-direction:column;align-items:flex-start;gap:22px}
}
@media (max-width:768px){
  .grid--5{grid-template-columns:repeat(2,1fr)}
  .compare{grid-template-columns:1fr;gap:16px}
  .compare__arrow{transform:rotate(90deg);justify-self:center}
}
@media (max-width:600px){
  .grid--5{grid-template-columns:1fr}
  .benefit-focus{grid-template-columns:1fr}
  .cta-banner{padding:48px 0}
  .cta-banner--light{padding:28px}
  .strong-banner{padding:34px 22px}
  .cost-table th,.cost-table td{padding:14px 16px;font-size:.96rem}
  .quote{margin:40px auto}
}