/* =====================================================
찰싹 — 숙성 3mm 삼겹 고깃집 / 가맹 랜딩
디자인 시스템: 차콜 + 딥레드 + 크림 + 옐로 포인트
로고 컬러 확정되면 :root 변수만 바꾸면 전체 반영됨
===================================================== */
:root {
--red: #C0322B; /* 찰싹 브릭 레드 (엠블럼 #A52D28 기반) */
--red-deep: #6E1219; /* 워드마크 와인 레드 */
--yellow: #FFCE2E; /* 펑키 포인트 옐로 */
--charcoal: #161210;
--charcoal-2: #211C19;
--cream: #F7F2E8;
--cream-2: #EFE7D6;
--ink: #191512;
--ink-soft: #5e554c;
--line: rgba(255,255,255,.12);
--line-dark: rgba(0,0,0,.10);
--font-head: 'Black Han Sans', 'Jua', sans-serif;
--font-point:'Jua', 'Black Han Sans', sans-serif;
--font-body: 'Pretendard', -apple-system, sans-serif;
--maxw: 1180px;
--pad: clamp(20px, 5vw, 64px);
--radius: 18px;
--promo-h: 46px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 150px; }
body { font-family: var(--font-body); background: var(--cream); color: var(--ink); line-height: 1.68; letter-spacing: -.005em; word-break: keep-all; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, .nav__logo-text, .footer__logo { font-family: var(--font-head); font-weight: 400; letter-spacing: -.02em; line-height: 1.22; word-break: keep-all; text-wrap: balance; }
.hl { color: var(--red); }
.hl-y { color: var(--yellow); }
.stroke { -webkit-text-stroke: 2px currentColor; color: transparent; }
.strike { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 3px; opacity: .8; }
/* 형광펜 강조 */
b.mark, .mark { background: linear-gradient(transparent 55%, var(--yellow) 55%); padding: 0 2px; }
.section__kicker { font-family: var(--font-point); color: var(--red); letter-spacing: .12em; font-size: .85rem; margin-bottom: 14px; }
.section__title { font-size: clamp(1.95rem, 5.2vw, 3.35rem); }
.section__lead { color: var(--ink-soft); font-size: clamp(1.02rem, 2vw, 1.18rem); line-height: 1.72; margin-top: 16px; text-wrap: pretty; }
/* ---------- 버튼 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 999px; font-weight: 800; font-size: .98rem; cursor: pointer; border: 2px solid transparent; transition: transform .15s, background .2s, color .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--red); color: #fff; box-shadow: 0 8px 22px rgba(225,27,34,.32); }
.btn--primary:hover { background: var(--red-deep); }
.btn--ghost { background: rgba(0,0,0,.2); color: #fff; border-color: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--light { background: #fff; color: var(--red); }
.btn--lg { padding: 16px 36px; font-size: 1.08rem; }
/* ---------- 상단 고정 헤더 묶음 ---------- */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
/* ---------- 프로모 바 ---------- */
.promobar { position: relative; height: var(--promo-h); background: var(--red); color: #fff; display: flex; align-items: center; }
.promobar__inner { max-width: var(--maxw); margin: 0 auto; width: 100%; padding: 0 var(--pad); display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.promobar__flame { animation: wiggle 1s infinite; }
.promobar strong { font-weight: 800; }
.promobar__sep { opacity: .5; }
.promobar b { font-weight: 800; }
.promobar__cta { margin-left: auto; background: #fff; color: var(--red); padding: 5px 16px; border-radius: 999px; font-weight: 800; font-size: .85rem; }
.promobar__close { background: none; border: 0; color: #fff; cursor: pointer; font-size: 1rem; opacity: .8; padding: 4px; }
body.promo-closed .promobar { display: none; }
@keyframes wiggle { 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(8deg)} }
/* ---------- NAV ---------- */
.nav { position: relative; background: rgba(20,16,14,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.nav__inner { max-width: var(--maxw); margin: 0 auto; padding: 14px var(--pad); display: flex; align-items: center; gap: 28px; }
.nav__logo img { height: 36px; }
.nav__logo-text { font-size: 1.8rem; color: #fff; }
.nav__menu { display: flex; gap: 30px; margin-left: auto; }
.nav__menu a { color: #fff; font-weight: 700; font-size: 1.08rem; opacity: .9; transition: opacity .2s, color .2s; }
.nav__menu a:hover { opacity: 1; color: var(--yellow); }
.nav__cta { margin-left: 2px; font-size: 1.04rem; padding: 12px 26px; }
.nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; margin-left: auto; }
.nav__toggle span { width: 24px; height: 2px; background: #fff; transition: .3s; }
/* ---------- 마퀴 ---------- */
.marquee { position: relative; z-index: 1; background: var(--yellow); color: var(--charcoal); overflow: hidden; padding: 6px 0; font-family: var(--font-head); white-space: nowrap; border-bottom: 3px solid var(--charcoal); }
.marquee__track { display: inline-flex; animation: marquee 28s linear infinite; }
.marquee__track span { padding-right: 0; font-size: clamp(.9rem, 1.8vw, 1.05rem); letter-spacing: .01em; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ---------- HERO ---------- */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: var(--charcoal); padding: 160px var(--pad) 80px; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,18,16,.55), rgba(22,18,16,.45) 40%, rgba(22,18,16,.9)); }
.hero__content { position: relative; z-index: 2; color: #fff; max-width: 900px; }
.hero__badge { display: inline-block; background: var(--red); color: #fff; font-weight: 800; padding: 8px 20px; border-radius: 999px; font-size: .9rem; margin-bottom: 22px; transform: rotate(-2deg); }
.hero__title { font-size: clamp(2.5rem, 8vw, 5.4rem); line-height: 1.08; text-shadow: 0 4px 30px rgba(0,0,0,.4); }
.hero__title .stroke { -webkit-text-stroke: 2px #fff; }
.hero__slap { display: inline-flex; align-items: center; gap: 8px; margin: 22px 0 6px; background: var(--yellow); color: var(--charcoal); border: 0; font-family: var(--font-point); font-size: 1.1rem; padding: 8px 22px; border-radius: 999px; cursor: pointer; transform: rotate(-3deg); box-shadow: 0 6px 0 rgba(0,0,0,.25); transition: transform .1s; }
.hero__slap:active { transform: rotate(-3deg) translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.hero__slap.pop { animation: slappop .4s; }
@keyframes slappop { 0%{transform:scale(1) rotate(-3deg)} 40%{transform:scale(1.35) rotate(5deg)} 100%{transform:scale(1) rotate(-3deg)} }
.hero__sub { margin: 18px 0 32px; font-size: clamp(1rem, 2.3vw, 1.22rem); opacity: .94; }
.hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero__scroll { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2; color: #fff; font-size: .72rem; letter-spacing: .2em; opacity: .8; }
.hero__scroll::after { content: ""; display: block; width: 1px; height: 32px; background: #fff; margin: 8px auto 0; animation: scrolldown 1.8s infinite; }
@keyframes scrolldown { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }
/* ---------- 공통 섹션 ---------- */
section { padding: clamp(60px, 9vw, 120px) var(--pad); }
.sales__head, .sales__stats, .chart, .versus__head, .versus__grid, .influencer__head, .influencer__grid, .support__inner, .diff__head, .diff__grid, .nokitchen__head, .nokitchen__grid, .menu__head, .menu__grid, .sets, .selfbar, .magic__head, .magic__grid, .lunch__head, .lunch__grid, .lunch__more, .drinks__head, .drinks__grid, .drinks__side, .profit__head, .profit__body, .profit__note, .hq__head, .hq__stats, .hq__cols, .cost__head, .cost__table-wrap, .special__inner, .faq__head, .faq__list, .contact__inner { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.center { text-align: center; }
.sales__head, .versus__head, .influencer__head, .diff__head, .nokitchen__head, .menu__head, .magic__head, .lunch__head, .drinks__head, .profit__head, .hq__head, .cost__head, .faq__head { text-align: center; }
.sales__head .section__lead, .influencer__head .section__lead, .diff__head .section__lead, .nokitchen__head .section__lead, .menu__head .section__lead, .lunch__head .section__lead, .drinks__head .section__lead, .profit__head .section__lead { margin-left: auto; margin-right: auto; max-width: 640px; }
/* ---------- 실매출 ---------- */
.sales { background: var(--charcoal); color: #fff; }
.sales .section__lead { color: rgba(255,255,255,.72); }
.sales__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin: 48px auto; }
.sstat { background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 20px; text-align: center; }
.sstat__num { font-family: var(--font-head); font-size: clamp(2rem,5vw,3rem); color: var(--red); display: block; line-height: 1; }
.sstat__label { color: rgba(255,255,255,.8); font-weight: 700; margin-top: 12px; display: block; }
.sstat__label small { color: rgba(255,255,255,.5); font-weight: 400; }
.chart { background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; }
.chart__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; flex-wrap: wrap; gap: 6px; }
.chart__head strong { font-size: 1.1rem; }
.chart__total { color: var(--yellow); font-family: var(--font-point); font-size: 1.1rem; }
.chart__bars { display: flex; align-items: flex-end; gap: clamp(2px,.6vw,6px); height: 200px; }
.chart__bars .bar { flex: 1; background: linear-gradient(var(--red), var(--red-deep)); border-radius: 4px 4px 0 0; height: 0; transition: height 1s cubic-bezier(.2,.8,.2,1); min-width: 4px; position: relative; }
.chart__bars .bar:hover { background: linear-gradient(var(--yellow), #e0a800); }
.chart__bars .bar:hover::after { content: attr(data-label); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #fff; color: var(--ink); font-size: .7rem; padding: 3px 7px; border-radius: 6px; white-space: nowrap; margin-bottom: 4px; font-weight: 700; }
.chart__note { color: rgba(255,255,255,.4); font-size: .8rem; margin-top: 16px; }
/* ---------- 냉동 vs 숙성 ---------- */
.versus { background: var(--cream); }
.versus__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; margin-top: 44px; }
.vcard { border-radius: var(--radius); padding: 32px 30px; }
.vcard__tag { font-family: var(--font-point); font-size: 1.3rem; display: block; margin-bottom: 18px; }
.vcard ul { list-style: none; display: grid; gap: 12px; }
.vcard li { padding-left: 26px; position: relative; font-size: 1.05rem; }
.vcard--bad { background: #e9e3d6; color: #8a8377; }
.vcard--bad li::before { content: "✕"; position: absolute; left: 0; color: #b0a797; font-weight: 800; }
.vcard--good { background: var(--charcoal); color: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.2); transform: scale(1.04); }
.vcard--good li::before { content: "✓"; position: absolute; left: 0; color: var(--yellow); font-weight: 800; }
.vcard__price { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.vcard__price b { font-family: var(--font-head); font-size: 2rem; color: var(--yellow); }
.vcard__price span { display: block; color: rgba(255,255,255,.65); font-size: .9rem; margin-top: 4px; }
.versus__vs { font-family: var(--font-head); font-size: 2rem; color: var(--red); }
/* ---------- 인플루언서 ---------- */
.influencer { background: var(--charcoal); color: #fff; }
.influencer .section__lead { color: rgba(255,255,255,.72); }
.influencer__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 44px; }
.icard { background: var(--charcoal-2); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.icard__video { position: relative; aspect-ratio: 16/9; background: #000; }
.icard__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.icard figcaption { padding: 16px 20px; }
.icard figcaption strong { font-size: 1.15rem; }
.icard figcaption span { display: block; color: rgba(255,255,255,.6); font-size: .9rem; margin-top: 2px; }
.influencer__buzz { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; max-width: var(--maxw); margin: 32px auto 0; }
.influencer__buzz .buzz__item { background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; text-align: center; }
.influencer__buzz .buzz__item strong { display: block; font-size: 1.05rem; color: var(--yellow); }
.influencer__buzz .buzz__item span { display: block; color: rgba(255,255,255,.66); font-size: .9rem; margin-top: 4px; }
/* ---------- 본사 마케팅 지원 (강조) ---------- */
.support { background: linear-gradient(135deg, var(--red), var(--red-deep)); color: #fff; text-align: center; position: relative; overflow: hidden; }
.support::before, .support::after { content: "₩"; position: absolute; font-family: var(--font-head); font-size: 14rem; opacity: .07; }
.support::before { top: -20px; left: 20px; }
.support::after { bottom: -60px; right: 30px; }
.support__inner { position: relative; z-index: 1; }
.support__badge { display: inline-block; background: var(--yellow); color: var(--charcoal); font-weight: 800; padding: 8px 22px; border-radius: 999px; transform: rotate(-2deg); margin-bottom: 18px; }
.support__title { font-size: clamp(1.8rem,5vw,3rem); }
.support__big { margin: 10px 0 6px; }
.support__amount { font-family: var(--font-head); font-size: clamp(3.5rem,12vw,7rem); color: var(--yellow); line-height: 1; display: inline-block; text-shadow: 0 6px 0 rgba(0,0,0,.18); }
.support__lead { font-size: 1.15rem; opacity: .95; margin-bottom: 40px; }
.support__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.sup-item { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius); padding: 28px 22px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sup-item__ic { font-size: 2rem; display: block; margin-bottom: 10px; }
.sup-item strong { font-size: 1.25rem; display: block; margin-bottom: 8px; }
.sup-item p { opacity: .92; font-size: .96rem; }
/* ---------- 차별점 ---------- */
.diff { background: var(--cream); }
.diff__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 44px; }
.dcard { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.06); transition: transform .25s; }
.dcard:hover { transform: translateY(-6px); }
.dcard__img { aspect-ratio: 16/10; overflow: hidden; background: var(--cream-2); }
.dcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.dcard:hover .dcard__img img { transform: scale(1.06); }
.dcard h3 { font-size: 1.3rem; margin: 20px 24px 8px; }
.dcard p { margin: 0 24px 24px; color: var(--ink-soft); }
.dcard b { color: var(--red); }
/* ---------- 주방 불필요 ---------- */
.nokitchen { background: var(--charcoal); color: #fff; }
.nokitchen .section__lead { color: rgba(255,255,255,.72); }
.nokitchen__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 44px; }
.nocard { background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 28px; text-align: center; position: relative; }
.nocard__no { font-family: var(--font-head); font-size: 2.4rem; color: var(--red); display: block; margin-bottom: 8px; position: relative; }
.nocard__no::after { content: ""; position: absolute; left: 50%; top: 50%; width: 70px; height: 3px; background: var(--red); transform: translate(-50%,-50%) rotate(-12deg); }
.nocard strong { font-size: 1.3rem; display: block; margin-bottom: 10px; }
.nocard p { color: rgba(255,255,255,.72); font-size: .96rem; }
/* ---------- 메뉴 ---------- */
.menu { background: var(--cream); }
.menu__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 44px; max-width: 860px; }
.menu__item { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.06); transition: transform .25s; }
.menu__item:hover { transform: translateY(-6px); }
.menu__item--signature { outline: 3px solid var(--red); }
.menu__img { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--cream-2); }
.menu__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.menu__item:hover .menu__img img { transform: scale(1.07); }
.menu__star { position: absolute; top: 10px; left: 10px; background: var(--red); color: #fff; font-size: .72rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.menu__new { position: absolute; top: 10px; right: 10px; background: var(--yellow); color: var(--charcoal); font-size: .72rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.menu__item figcaption { padding: 16px 16px 18px; }
.menu__item h3 { font-size: 1.1rem; margin-bottom: 4px; }
.menu__item p { color: var(--ink-soft); font-size: .85rem; min-height: 2.4em; }
.menu__price { color: var(--red); font-weight: 800; font-family: var(--font-point); }
.sets { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin: 26px auto 0; }
.set { background: var(--charcoal); color: #fff; border-radius: 16px; padding: 24px; text-align: center; }
.set strong { display: block; font-size: 1.15rem; }
.set__price { font-family: var(--font-head); color: var(--yellow); font-size: 1.7rem; display: block; margin: 6px 0 10px; }
.set p { color: rgba(255,255,255,.7); font-size: .9rem; }
.selfbar { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; background: #fff; border-radius: var(--radius); padding: 36px; margin-top: 26px; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.selfbar__badge { display: inline-block; background: var(--yellow); color: var(--charcoal); font-weight: 800; padding: 6px 16px; border-radius: 999px; margin-bottom: 14px; }
.selfbar h3 { font-size: clamp(1.3rem,3vw,1.8rem); margin-bottom: 12px; }
.selfbar p { color: var(--ink-soft); }
.selfbar__img { aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; background: var(--cream-2); }
.selfbar__img img { width: 100%; height: 100%; object-fit: cover; }
/* ---------- 마법의 숫자 ---------- */
.magic { background: var(--charcoal); color: #fff; }
.magic__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 22px; margin-top: 44px; }
.mcard { background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px; }
.mcard__big { font-family: var(--font-head); font-size: clamp(3rem,8vw,5rem); color: var(--yellow); line-height: 1; display: block; margin-bottom: 16px; }
.mcard__big small { font-size: .4em; }
.mcard p { color: rgba(255,255,255,.82); font-size: 1.05rem; }
.mcard b { color: #fff; }
.mcard--900 .mcard__big { color: var(--red); }
.mcard__list { list-style: none; margin-top: 18px; display: grid; gap: 10px; }
.mcard__list li { color: rgba(255,255,255,.78); font-size: .95rem; padding-left: 4px; }
.mcard__list b { color: var(--yellow); margin-right: 6px; }
/* ---------- 점심 ---------- */
.lunch { background: var(--cream); }
.lunch__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 44px; }
.lcard { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.05); display: flex; flex-direction: column; }
.lcard img { aspect-ratio: 16/10; object-fit: cover; width: 100%; background: var(--cream-2); }
.lcard__body { padding: 20px 22px; }
.lcard__body strong { font-size: 1.15rem; display: block; }
.lcard__body p { color: var(--ink-soft); font-size: .92rem; margin: 6px 0 12px; }
.lcard__tag { display: inline-block; background: var(--cream-2); color: var(--red); font-weight: 700; font-size: .8rem; padding: 4px 12px; border-radius: 999px; }
.lunch__more { text-align: center; margin-top: 26px; color: var(--ink-soft); font-size: .95rem; }
/* ---------- 하이볼 ---------- */
.drinks { background: var(--charcoal); color: #fff; }
.drinks .section__lead { color: rgba(255,255,255,.72); }
.drinks__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 44px; }
.hcard { background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; }
.hcard__tag { font-family: var(--font-point); color: var(--yellow); font-size: .82rem; letter-spacing: .1em; }
.hcard strong { display: block; font-size: 1.3rem; margin: 8px 0; }
.hcard p { color: rgba(255,255,255,.72); }
.drinks__side { text-align: center; margin-top: 26px; color: rgba(255,255,255,.7); }
/* ---------- 수익구조 ---------- */
.profit { background: var(--cream); }
.profit__body { display: grid; grid-template-columns: .8fr 1.2fr; gap: 26px; margin-top: 44px; align-items: start; }
.profit__highlight { display: grid; gap: 16px; }
.phi { background: #fff; border-radius: var(--radius); padding: 30px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.05); }
.phi--accent { background: var(--red); color: #fff; }
.phi__num { font-family: var(--font-head); font-size: clamp(2.2rem,6vw,3.4rem); color: var(--red); display: block; line-height: 1; }
.phi--accent .phi__num { color: #fff; }
.phi__label { font-weight: 700; margin-top: 10px; display: block; }
.phi__label small { color: var(--ink-soft); font-weight: 400; }
.phi--accent .phi__label small { color: rgba(255,255,255,.85); }
.profit__table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.05); }
.profit__table th, .profit__table td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--line-dark); }
.profit__table thead th { background: var(--charcoal); color: #fff; font-weight: 700; }
.profit__table td:nth-child(2), .profit__table td:nth-child(3), .profit__table th:nth-child(2), .profit__table th:nth-child(3) { text-align: right; }
.profit__total td { color: var(--red); font-weight: 800; font-size: 1.05rem; border-bottom: none; background: var(--cream-2); }
.profit__note { text-align: center; color: var(--ink-soft); font-size: .85rem; margin-top: 18px; }
/* ---------- 든든한 본사 ---------- */
.hq { background: var(--charcoal); color: #fff; }
.hq__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin: 44px auto; }
.hqstat { background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; text-align: center; }
.hqstat__ic { font-size: 2rem; display: block; }
.hqstat__num { font-family: var(--font-head); font-size: clamp(2rem,5vw,3rem); color: var(--yellow); display: block; line-height: 1; margin: 8px 0; }
.hqstat__label { color: rgba(255,255,255,.75); }
.hq__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.hqcol { background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; }
.hqcol h3 { color: var(--red); font-size: 1.35rem; margin-bottom: 16px; }
.hqcol ul { list-style: none; display: grid; gap: 12px; }
.hqcol li { padding-left: 26px; position: relative; color: rgba(255,255,255,.82); }
.hqcol li::before { content: "✓"; position: absolute; left: 0; color: var(--yellow); font-weight: 800; }
/* ---------- 창업비용 ---------- */
.cost { background: var(--cream); }
.cost__table-wrap { margin-top: 44px; overflow-x: auto; }
.cost__table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.06); min-width: 560px; }
.cost__table th, .cost__table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line-dark); }
.cost__table thead th { background: var(--charcoal); color: #fff; }
.cost__table td:nth-child(2), .cost__table td:nth-child(3), .cost__table th:nth-child(2), .cost__table th:nth-child(3) { text-align: right; }
.cost__hl-col { background: rgba(225,27,34,.07); color: var(--red); font-weight: 800; }
.cost__free td { background: var(--cream-2); font-weight: 700; text-align: center !important; }
.cost__free b { color: var(--red); }
.cost__total td { font-family: var(--font-point); font-size: 1.2rem; border-bottom: none; }
.cost__total td:first-child { font-size: 1rem; }
.cost__total small { font-weight: 400; font-size: .8rem; color: var(--ink-soft); }
/* ---------- 업종변경 특별 ---------- */
.special { background: var(--charcoal); color: #fff; text-align: center; }
.special__inner { background: linear-gradient(135deg, #2a2320, var(--charcoal-2)); border: 2px solid var(--yellow); border-radius: 26px; padding: clamp(40px,7vw,68px); }
.special__badge { display: inline-block; background: var(--yellow); color: var(--charcoal); font-weight: 800; padding: 8px 22px; border-radius: 999px; margin-bottom: 18px; }
.special__title { font-size: clamp(2rem,6vw,3.6rem); }
.special__lead { margin: 18px 0 8px; opacity: .9; font-size: 1.1rem; }
.special__sub { font-size: 1.15rem; margin-bottom: 8px; }
.special__sub b { color: var(--yellow); }
.special__note { color: rgba(255,255,255,.55); font-size: .85rem; margin-bottom: 26px; }
/* ---------- FAQ ---------- */
.faq { background: var(--cream); }
.faq__list { max-width: 820px; margin: 40px auto 0; display: grid; gap: 12px; }
.faq__item { background: #fff; border-radius: 14px; padding: 4px 24px; box-shadow: 0 6px 18px rgba(0,0,0,.04); }
.faq__item summary { list-style: none; cursor: pointer; padding: 20px 0; font-weight: 800; font-size: 1.08rem; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-family: var(--font-head); color: var(--red); font-size: 1.5rem; transition: transform .2s; flex: 0 0 auto; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { color: var(--ink-soft); padding: 0 0 20px; }
/* ---------- CONTACT ---------- */
.contact { background: var(--charcoal); color: #fff; text-align: center; }
.contact .section__lead { color: rgba(255,255,255,.75); margin-left: auto; margin-right: auto; max-width: 560px; }
.contact__perks { list-style: none; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 24px 0 8px; }
.contact__perks li { color: var(--yellow); font-weight: 700; }
.cform { max-width: 640px; margin: 32px auto 0; text-align: left; display: grid; gap: 16px; }
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cform label { display: block; font-weight: 700; font-size: .9rem; color: rgba(255,255,255,.88); }
.cform input, .cform textarea, .cform select { width: 100%; margin-top: 8px; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--charcoal-2); color: #fff; font-family: inherit; font-size: 1rem; }
.cform input:focus, .cform textarea:focus, .cform select:focus { outline: none; border-color: var(--red); }
.cform option { background: var(--charcoal-2); color: #fff; }
.cform__agree { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: .88rem; flex-wrap: wrap; }
.cform__agree input { width: auto; margin: 0; }
.cform__agree small { color: rgba(255,255,255,.5); width: 100%; }
.cform__submit { width: 100%; margin-top: 6px; }
.cform__status { text-align: center; padding: 12px; border-radius: 10px; font-weight: 700; }
.cform__status.ok { background: rgba(40,167,69,.15); color: #6fdc8c; }
.cform__status.err { background: rgba(225,27,34,.15); color: #ff8a8a; }
.contact__alt { display: flex; gap: 16px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.contact__alt-item { background: var(--charcoal-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px 28px; min-width: 210px; transition: border-color .2s; }
.contact__alt-item:hover { border-color: var(--red); }
.contact__alt-item strong { display: block; }
.contact__alt-item span { color: rgba(255,255,255,.6); font-size: .9rem; }
/* ---------- FOOTER ---------- */
.footer { background: #100d0b; color: #fff; padding: 56px var(--pad) 24px; }
.footer__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 30px; align-items: center; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.footer__logo { font-size: 2rem; color: var(--red); }
.footer__brand p { color: rgba(255,255,255,.6); margin-top: 6px; font-size: .92rem; }
.footer__info p { color: rgba(255,255,255,.7); font-size: .9rem; line-height: 1.9; }
.footer__info a { color: #fff; }
.footer__bottom { max-width: var(--maxw); margin: 0 auto; padding-top: 20px; display: flex; justify-content: space-between; color: rgba(255,255,255,.4); font-size: .8rem; flex-wrap: wrap; gap: 8px; }
/* ---------- 플로팅 CTA ---------- */
.floating-cta { display: none; position: fixed; bottom: 16px; left: 16px; right: 16px; z-index: 90; background: var(--red); color: #fff; text-align: center; padding: 16px; border-radius: 14px; font-weight: 800; box-shadow: 0 8px 24px rgba(225,27,34,.45); }
/* ---------- 리빌 ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s, transform .7s; }
.reveal.in { opacity: 1; transform: none; }
/* =====================================================
반응형
===================================================== */
@media (max-width: 960px) {
.sales__stats, .influencer__grid, .support__grid, .nokitchen__grid, .hq__stats, .drinks__grid { grid-template-columns: repeat(3,1fr); }
.diff__grid { grid-template-columns: repeat(2,1fr); }
.menu__grid { grid-template-columns: repeat(3,1fr); }
.lunch__grid { grid-template-columns: repeat(2,1fr); }
.magic__grid, .profit__body, .hq__cols, .selfbar { grid-template-columns: 1fr; }
.versus__grid { grid-template-columns: 1fr; }
.versus__vs { margin: 0 auto; }
.vcard--good { transform: none; }
.footer__inner { grid-template-columns: 1fr; text-align: center; }
}
@media (max-width: 720px) {
.nav__menu { position: fixed; inset: 0 0 0 auto; width: 72%; max-width: 300px; background: var(--charcoal); flex-direction: column; justify-content: center; gap: 26px; transform: translateX(100%); transition: transform .3s; padding: 40px; }
.nav__menu.open { transform: none; }
.nav__cta { display: none; }
.nav__toggle { display: flex; }
.nav, .nav.scrolled { background: rgba(22,18,16,.94); backdrop-filter: blur(10px); }
.promobar__sep, .promobar__inner { font-size: .76rem; }
.promobar b.hl-y { display: none; }
.cform__row { grid-template-columns: 1fr; }
.sales__stats, .sets { grid-template-columns: 1fr; }
.influencer__grid, .support__grid, .nokitchen__grid, .menu__grid, .hq__stats, .drinks__grid, .lunch__grid { grid-template-columns: 1fr 1fr; }
.floating-cta { display: block; }
body { padding-bottom: 80px; }
.footer__bottom { justify-content: center; }
.chart__bars { height: 150px; }
}
@media (max-width: 460px) {
.diff__grid, .influencer__grid, .support__grid, .nokitchen__grid, .menu__grid, .lunch__grid, .hq__stats, .drinks__grid { grid-template-columns: 1fr; }
.influencer__buzz { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
.hero__scroll::after, .marquee__track, .promobar__flame { animation: none; }
html { scroll-behavior: auto; }
}
/* ============================================================
v3 — 레퍼런스(jejuhwaro)풍 풀 리디자인
크게 · 넓게 · 시원하게 · 밝게 · 모바일 가독성
(이 블록이 위 기본값을 전부 덮어씀)
============================================================ */
:root { --maxw: 1240px; }
html { font-size: 112.5%; } /* 16 → 18px 기준, 전체 확대 */
section { padding: clamp(88px, 12vw, 180px) var(--pad); }
/* ----- 섹션 헤더: 크고 당당하게 ----- */
.section__kicker {
display: inline-block; font-family: var(--font-point);
font-size: 1.02rem; font-weight: 700; letter-spacing: .16em;
color: var(--red); background: rgba(192,50,43,.09);
padding: 9px 22px; border-radius: 999px; margin-bottom: 24px;
}
.section__title { font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.1; letter-spacing: -.022em; }
.section__lead { font-size: clamp(1.22rem, 2.3vw, 1.6rem); line-height: 1.68; margin-top: 24px; max-width: 820px; color: var(--ink-soft); }
.sales__head .section__lead, .versus__head .section__lead, .influencer__head .section__lead,
.diff__head .section__lead, .nokitchen__head .section__lead, .menu__head .section__lead,
.lunch__head .section__lead, .drinks__head .section__lead, .profit__head .section__lead,
.hq__head .section__lead, .cost__head .section__lead, .faq__head .section__lead { margin-left: auto; margin-right: auto; }
/* ----- 카드 본문/제목 큼직하게 ----- */
.dcard h3 { font-size: 1.7rem; margin: 26px 28px 12px; }
.dcard p { font-size: 1.12rem; margin: 0 28px 28px; line-height: 1.65; }
.menu__item h3, .lcard__body strong, .nocard strong, .hcard strong { font-size: 1.5rem; }
.menu__item p, .lcard__body p, .nocard p, .mcard p, .hcard p { font-size: 1.12rem; line-height: 1.6; }
.faq__item summary { font-size: 1.28rem; }
.faq__item p { font-size: 1.12rem; line-height: 1.75; }
/* ----- 밝은 톤 전환 ----- */
.sales, .nokitchen, .hq { background: var(--cream-2); color: var(--ink); }
.influencer, .magic, .drinks { background: var(--cream); color: var(--ink); }
/* 밝아진 섹션의 리드/본문 흰 글씨 → 진하게 (안 보이던 버그 수정) */
.sales .section__lead, .influencer .section__lead,
.nokitchen .section__lead, .drinks .section__lead { color: var(--ink-soft); }
.sstat, .chart, .icard, .nocard, .mcard, .hcard, .hqstat, .hqcol,
.influencer__buzz .buzz__item, .set, .sstat {
background: #fff; border: 1px solid var(--line-dark); box-shadow: 0 14px 40px rgba(0,0,0,.06);
}
.sstat__label { color: var(--ink); }
.sstat__label small, .chart__note { color: var(--ink-soft); }
.chart__head strong { color: var(--ink); }
.chart__total { color: var(--red); }
.icard figcaption span { color: var(--ink-soft); }
.nocard p, .hcard p, .drinks__side, .mcard p, .mcard__list li { color: var(--ink-soft); }
.mcard b { color: var(--ink); }
.mcard__big { color: var(--red); }
.mcard__list b, .hcard__tag, .hqstat__num, .hqcol li::before { color: var(--red); }
.hqstat__label, .hqcol li { color: var(--ink-soft); }
.set { color: var(--ink); }
.set__price { color: var(--red); }
.set p { color: var(--ink-soft); }
/* ----- 인플루언서: 브랜드 로고 + 영상 카드 강화 ----- */
.influencer__logo { width: clamp(120px, 16vw, 190px); margin: 28px auto 0; opacity: .95; }
.influencer__grid { gap: 30px; margin-top: 56px; }
.icard figcaption { padding: 24px 26px 28px; text-align: center; }
.icard figcaption strong { font-size: 1.55rem; display: block; }
.icard figcaption span { font-size: 1.05rem; line-height: 1.5; margin-top: 8px; }
.influencer__buzz { margin-top: 28px; gap: 20px; }
.influencer__buzz .buzz__item { padding: 30px 24px; }
.influencer__buzz .buzz__item strong { font-size: 1.4rem; color: var(--red); }
.influencer__buzz .buzz__item span { font-size: 1.02rem; color: var(--ink-soft); margin-top: 8px; }
/* ----- 본사 마케팅 지원: 더 크게, 아이콘 키우고 ----- */
.support__title { font-size: clamp(2.2rem, 5.5vw, 3.6rem); }
.support__lead { font-size: clamp(1.2rem, 2.2vw, 1.45rem); margin-bottom: 52px; }
.support__grid { gap: 24px; max-width: 1100px; margin: 0 auto; }
.sup-item { padding: 40px 30px; }
.sup-item__ic { font-size: 3rem; margin-bottom: 18px; }
.sup-item strong { font-size: 1.6rem; margin-bottom: 12px; }
.sup-item p { font-size: 1.12rem; line-height: 1.6; }
/* ----- 메뉴: 큼직하게, 정렬 맞춤 ----- */
.menu__grid { max-width: 1080px; gap: 30px; margin-top: 56px; }
.menu__img { aspect-ratio: 4/3; }
.menu__item figcaption { padding: 26px 26px 30px; display: flex; flex-direction: column; gap: 6px; min-height: 168px; }
.menu__item h3 { font-size: 1.6rem; margin-bottom: 6px; }
.menu__item p { font-size: 1.08rem; min-height: auto; flex: 1; }
.menu__price { font-size: 1.6rem; color: var(--red); margin-top: 8px; }
.menu__star, .menu__new { font-size: .9rem; padding: 6px 14px; }
.sets { gap: 22px; margin-top: 36px; }
.set { padding: 32px 28px; }
.set strong { font-size: 1.45rem; }
.set__price { font-size: 2.2rem; margin: 10px 0 14px; }
.set p { font-size: 1.05rem; }
.selfbar { padding: 48px; margin-top: 40px; gap: 40px; }
.selfbar h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.selfbar p { font-size: 1.14rem; line-height: 1.65; }
/* ----- 마법의 숫자: PDF 느낌 탈피, 큼직한 카드 ----- */
.magic__grid { gap: 30px; margin-top: 56px; align-items: stretch; }
.mcard { padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; }
.mcard__big { font-size: clamp(4rem, 10vw, 6.5rem); margin-bottom: 24px; }
.mcard p { font-size: 1.25rem; line-height: 1.6; }
.mcard__list { margin-top: 26px; gap: 16px; }
.mcard__list li { font-size: 1.08rem; line-height: 1.5; }
.mcard--900 { background: linear-gradient(160deg, #fff, #fff6e6); }
/* ----- 주방 불필요: 비주얼 밴드 + 큼직 카드 ----- */
.nokitchen__visual { position: relative; max-width: var(--maxw); margin: 56px auto 0; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.12); }
.nokitchen__visual img { width: 100%; height: clamp(260px, 38vw, 460px); object-fit: cover; }
.nokitchen__visual-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(28px,5vw,52px) clamp(24px,5vw,56px); background: linear-gradient(transparent, rgba(15,12,10,.82)); color: #fff; }
.nokitchen__visual-cap strong { display: block; font-family: var(--font-head); font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.2; }
.nokitchen__visual-cap span { display: block; margin-top: 10px; font-size: clamp(1.02rem, 1.8vw, 1.2rem); color: rgba(255,255,255,.85); }
.nokitchen__grid { gap: 28px; margin-top: 28px; }
.nocard { padding: 48px 36px; }
.nocard__no { font-size: 3rem; }
.nocard strong { font-size: 1.65rem; }
.nocard p { font-size: 1.1rem; line-height: 1.6; }
/* ----- 점심/하이볼 카드 ----- */
.lcard__body { padding: 28px 28px; }
.lcard__tag { font-size: .92rem; padding: 6px 16px; }
.hcard { padding: 38px 34px; }
/* ----- 사진 placeholder (이미지 없을 때 깨짐 방지) ----- */
.menu__img, .dcard__img, .selfbar__img, .lcard img {
background: var(--cream-2) url("data:image/svg+xml;utf8,") center/auto no-repeat;
}
/* ----- 모바일 가독성 우선 ----- */
@media (max-width: 600px) {
html { font-size: 106.25%; }
section { padding: 60px var(--pad); }
/* 본문 강제 줄바꿈 제거 → 자연스러운 줄바꿈(keep-all)에 맡김 */
.br-pc { display: none; }
.section__title { font-size: clamp(2rem, 8.6vw, 2.7rem); line-height: 1.16; }
.section__lead { font-size: 1.18rem; line-height: 1.66; }
.menu__item p, .lcard__body p, .nocard p, .mcard p, .hcard p, .dcard p { font-size: 1.06rem; }
.dcard h3, .menu__item h3, .nocard strong, .icard figcaption strong { font-size: 1.4rem; }
.mcard { padding: 40px 30px; }
.mcard__big { font-size: clamp(3.4rem, 16vw, 4.6rem); }
.sup-item { padding: 32px 24px; }
.selfbar { padding: 32px; }
.menu__item figcaption { min-height: auto; }
/* 단어 깨짐 방지 + 매끄러운 줄바꿈 */
.section__title, .section__lead, .dcard h3, .dcard p, .menu__item h3,
.lcard__body strong, .hcard strong, .nocard strong, .sup-item p, .mcard p { text-wrap: pretty; word-break: keep-all; }
}
/* ============================================================
v3.1 — 주류 사진 슬롯 · 1억원 화려한 강조 · 브랜드 엠블럼
============================================================ */
/* ----- 주류 카드: 사진 슬롯 ----- */
.hcard { padding: 0; overflow: hidden; text-align: left; }
.hcard__img { aspect-ratio: 4/3; }
.hcard__img img { width: 100%; height: 100%; object-fit: cover; }
.hcard__img { background: var(--cream-2) url("data:image/svg+xml;utf8,") center/auto no-repeat; }
.hcard__body { padding: 28px 30px 32px; }
.hcard__body strong { margin: 8px 0; }
/* ----- 1억원 지원: 화려한 강조 애니메이션 ----- */
.special__inner { position: relative; animation: special-glow 2.8s ease-in-out infinite; }
.special__title { font-size: clamp(2.2rem, 6vw, 4rem); }
.special__amount {
display: inline-block; font-family: var(--font-head); line-height: 1;
font-size: clamp(3.4rem, 12vw, 6.4rem);
background: linear-gradient(100deg, #ffe7a0 8%, #fffaf0 28%, #ffce2e 50%, #fffaf0 72%, #ffe7a0 92%);
background-size: 240% auto; -webkit-background-clip: text; background-clip: text;
color: transparent; -webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 20px rgba(255,206,46,.5));
animation: amount-shine 3s linear infinite;
}
.special__badge { animation: badge-pop 2.2s ease-in-out infinite; }
.special__cta { animation: cta-glow 2s ease-in-out infinite; position: relative; z-index: 2; }
.special__spark { position: absolute; font-size: clamp(1.4rem, 3vw, 2.3rem); pointer-events: none; animation: float-spark 4s ease-in-out infinite; }
.special__spark--1 { top: 12%; left: 8%; animation-delay: 0s; }
.special__spark--2 { top: 18%; right: 9%; animation-delay: .8s; }
.special__spark--3 { bottom: 16%; left: 11%; animation-delay: 1.6s; }
.special__spark--4 { bottom: 22%; right: 8%; animation-delay: 2.4s; }
@keyframes special-glow { 0%,100% { box-shadow: 0 0 0 2px var(--yellow), 0 0 34px rgba(255,206,46,.22); } 50% { box-shadow: 0 0 0 2px var(--yellow), 0 0 64px rgba(255,206,46,.55); } }
@keyframes amount-shine { to { background-position: -240% center; } }
@keyframes float-spark { 0%,100% { transform: translateY(0) scale(1); opacity: .82; } 50% { transform: translateY(-14px) scale(1.16); opacity: 1; } }
@keyframes badge-pop { 0%,100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(-2deg) scale(1.06); } }
@keyframes cta-glow { 0%,100% { box-shadow: 0 0 0 rgba(255,206,46,0); } 50% { box-shadow: 0 0 28px rgba(255,206,46,.6); } }
/* ----- 브랜드 엠블럼 (중간 구분선 · 푸터) ----- */
.brand-divider { display: flex; align-items: center; justify-content: center; gap: 22px; max-width: var(--maxw); margin: 0 auto; padding: clamp(44px, 7vw, 80px) var(--pad) 0; background: var(--cream); }
.brand-divider::before, .brand-divider::after { content: ""; height: 2px; flex: 1; max-width: 130px; background: linear-gradient(90deg, transparent, var(--line-dark)); }
.brand-divider::after { transform: scaleX(-1); }
.brand-divider img { width: 50px; height: 50px; border-radius: 12px; box-shadow: 0 8px 20px rgba(192,50,43,.28); }
.footer__emblem { width: 46px; height: 46px; border-radius: 11px; margin-bottom: 12px; }
@media (prefers-reduced-motion: reduce) {
.special__inner, .special__amount, .special__badge, .special__cta, .special__spark { animation: none !important; }
.special__amount { -webkit-text-fill-color: var(--yellow); color: var(--yellow); }
}
/* ============================================================
v3.2 — 폰트 정돈 · 냉동vs숙성 확대 · 유튜브 카드 세로/컬러 · 3,000만원 이벤트 연출
============================================================ */
/* ----- 폰트: 귀여운 Jua 제거, 깔끔한 Pretendard로 통일(가독성↑·덜 AI) ----- */
:root { --font-point: 'Pretendard', -apple-system, sans-serif; }
.section__kicker { font-weight: 800; }
body { letter-spacing: -.01em; }
/* ----- 냉동 vs 숙성: 글씨 키움 ----- */
.vcard { padding: 40px 36px; }
.vcard__tag { font-size: 1.7rem; margin-bottom: 22px; }
.vcard li { font-size: 1.3rem; padding-left: 30px; }
.vcard__price b { font-size: 2.5rem; }
.vcard__price span { font-size: 1.05rem; }
.versus__vs { font-size: 2.6rem; }
/* ----- 유튜브 카드: 한 줄에 하나씩(세로) + 영상 옆 텍스트 + 컬러 태그 ----- */
.influencer__grid { grid-template-columns: 1fr; gap: 30px; max-width: 1040px; margin: 56px auto 0; }
.icard { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; overflow: hidden; }
.icard__video { aspect-ratio: 16/9; width: 100%; }
.icard figcaption { padding: 40px 44px; text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 16px; min-height: auto; }
.icard__tag { align-self: flex-start; font-family: var(--font-point); font-weight: 800; font-size: 1rem; padding: 9px 20px; border-radius: 999px; color: #fff; }
.icard__tag--red { background: var(--red); }
.icard__tag--wine { background: var(--red-deep); }
.icard__tag--gold { background: linear-gradient(135deg, #d99a00, var(--yellow)); color: var(--charcoal); }
.icard figcaption strong { font-size: clamp(1.7rem, 2.6vw, 2.3rem); color: var(--ink); display: block; }
.icard__desc { font-size: 1.18rem; line-height: 1.6; color: var(--ink-soft); }
/* ----- 본사 마케팅비 3,000만원: 시원하게 쏘는 이벤트 연출 ----- */
.support { overflow: hidden; }
.support__amount { font-size: clamp(4rem, 15vw, 8.5rem); filter: drop-shadow(0 0 22px rgba(255,206,46,.5)); animation: amount-pulse 2.4s ease-in-out infinite; }
.support__spark { position: absolute; font-size: clamp(1.6rem, 3.6vw, 2.8rem); pointer-events: none; animation: float-spark 4s ease-in-out infinite; z-index: 1; }
.support__spark--1 { top: 9%; left: 7%; animation-delay: 0s; }
.support__spark--2 { top: 15%; right: 8%; animation-delay: .7s; }
.support__spark--3 { bottom: 13%; left: 9%; animation-delay: 1.4s; }
.support__spark--4 { bottom: 19%; right: 8%; animation-delay: 2.1s; }
.sup-item__ic { font-size: 3.6rem; }
.sup-item strong { font-size: 1.7rem; }
.sup-item p { font-size: 1.14rem; }
@keyframes amount-pulse { 0%,100% { transform: scale(1); filter: drop-shadow(0 0 16px rgba(255,206,46,.4)); } 50% { transform: scale(1.05); filter: drop-shadow(0 0 36px rgba(255,206,46,.8)); } }
/* 주방 불필요 리드: 가운데 강조 줄 임팩트 */
.nokitchen__head .section__lead b.hl { font-family: var(--font-head); font-size: 1.25em; display: inline-block; margin: 6px 0; }
@media (prefers-reduced-motion: reduce) {
.support__amount, .support__spark { animation: none !important; }
}
/* ----- 모바일: 유튜브 카드 스택 · 폭 조정 ----- */
@media (max-width: 760px) {
.icard { grid-template-columns: 1fr; }
.icard figcaption { padding: 26px 26px 30px; gap: 12px; }
}
@media (max-width: 600px) {
.vcard li { font-size: 1.14rem; }
.vcard__tag { font-size: 1.45rem; }
.icard__desc { font-size: 1.08rem; }
.sup-item__ic { font-size: 3rem; }
}
/* ============================================================
v3.3 — 전체 글씨 한 단계 더 확대 · 그림형 엠블럼 로고빵(크게)
============================================================ */
html { font-size: 116.5%; } /* 18 → ~18.6px, 전체 한 단계 더 */
@media (max-width: 600px) { html { font-size: 109%; } }
/* 그림형 엠블럼 — 꽉 찬 로고빵 */
.brand-divider { gap: clamp(20px, 4vw, 38px); padding: clamp(56px, 8vw, 96px) var(--pad) 0; }
.brand-divider::before, .brand-divider::after { max-width: 160px; height: 3px; }
.brand-divider img { width: clamp(104px, 18vw, 148px); height: clamp(104px, 18vw, 148px); border-radius: 26px; box-shadow: 0 18px 44px rgba(192,50,43,.35); }
.footer__emblem { width: 62px; height: 62px; border-radius: 15px; }
/* ============================================================
v3.4 — 캡션 가독성 · NO카드 아이콘 · 세트/마법의숫자 사진
============================================================ */
/* ① 주방불필요 비주얼 캡션: 흰 글씨가 밝은 사진에 묻히던 문제 해결 */
.nokitchen__visual-cap {
background: linear-gradient(transparent, rgba(15,12,10,.42) 28%, rgba(15,12,10,.92));
padding-top: clamp(72px, 13vw, 140px);
}
.nokitchen__visual-cap strong { text-shadow: 0 2px 16px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.95); }
.nokitchen__visual-cap span { color: rgba(255,255,255,.96); text-shadow: 0 1px 10px rgba(0,0,0,.85); }
/* ② NO 카드: '사진 대신' 소제목 맞춤 아이콘 + 금지 슬래시 */
.nocard__icon {
display: inline-flex; align-items: center; justify-content: center;
width: clamp(82px, 15vw, 100px); height: clamp(82px, 15vw, 100px);
margin: 0 auto 16px; border-radius: 50%;
background: var(--cream-2); font-size: clamp(2.3rem, 6vw, 3rem);
position: relative; line-height: 1;
}
.nocard__icon::after {
content: ""; position: absolute; left: 50%; top: 50%;
width: 122%; height: 6px; background: var(--red); border-radius: 4px;
transform: translate(-50%,-50%) rotate(-18deg);
box-shadow: 0 0 0 3px #fff;
}
.nocard__no {
display: inline-block; font-family: var(--font-head);
font-size: 1.05rem; color: #fff; background: var(--red);
padding: 4px 18px; border-radius: 999px; margin-bottom: 14px;
letter-spacing: .05em;
}
.nocard__no::after { display: none; } /* 기존 가로 슬래시 제거 */
/* ③ 세트 메뉴: 상단 사진 + 텍스트 */
.set { padding: 0; overflow: hidden; text-align: center; }
.set__img { aspect-ratio: 4/3; overflow: hidden; background: var(--cream-2); }
.set__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.set:hover .set__img img { transform: scale(1.05); }
.set strong { display: block; margin-top: 24px; }
.set__price { margin: 8px 0 12px; }
.set p { padding: 0 22px 30px; }
/* ④ 마법의 숫자: 사진 얹어 '홈페이지'답게 */
.magic__grid { grid-template-columns: 1fr 1fr; align-items: stretch; }
.mcard { padding: 0; overflow: hidden; justify-content: flex-start; }
.mcard__img { aspect-ratio: 16/9; overflow: hidden; background: var(--cream-2); }
.mcard__img img { width: 100%; height: 100%; object-fit: cover; }
.mcard__body { padding: clamp(34px,4vw,48px) clamp(30px,4vw,48px) clamp(40px,5vw,52px); }
.mcard__label {
display: inline-block; font-family: var(--font-point); font-weight: 800;
font-size: .92rem; letter-spacing: .04em; color: var(--ink-soft);
background: var(--cream-2); padding: 6px 16px; border-radius: 999px; margin-bottom: 18px;
}
.mcard__label--red { color: #fff; background: var(--red); }
.mcard__big { margin-bottom: 18px; }
.mcard__list { margin-top: 24px; }
/* ⑤ 브랜드 엠블럼 디바이더: 더 예쁘게 + '찰싹!' 슬랩 애니메이션 */
.brand-divider { gap: clamp(18px, 3.5vw, 34px); }
.brand-divider::before, .brand-divider::after {
background: linear-gradient(90deg, transparent, rgba(192,50,43,.30)); max-width: 180px;
}
.brand-divider img { animation: emblem-slap 4.5s ease-in-out infinite; transform-origin: 50% 72%; }
@keyframes emblem-slap {
0%, 80%, 100% { transform: rotate(0) scale(1); }
85% { transform: rotate(-9deg) scale(1.07); }
90% { transform: rotate(7deg) scale(1.04); }
95% { transform: rotate(-3deg) scale(1.01); }
}
@media (max-width: 600px) { .magic__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .brand-divider img { animation: none; } }
/* ============================================================
v3.5 — 마법의 숫자 두 빨간 숫자 수직정렬 고정
============================================================ */
/* 두 카드 사진 높이를 픽셀로 동일하게 → 그 아래 라벨·숫자가 같은 높이에서 시작 */
.magic .mcard__img { aspect-ratio: auto; height: clamp(190px, 24vw, 280px); }
/* 라벨 한 줄 고정(줄바꿈 방지) → 숫자 시작 높이 흔들림 방지 */
.magic .mcard__label { white-space: nowrap; }
/* 두 카드 높이 동일 + 내용 위에서부터 정렬 */
.magic__grid { align-items: stretch; }
.magic .mcard { justify-content: flex-start; }
/* ============================================================
v3.6 — 마감: 직배송 캡션 가독성(확실히) · 히어로 영상 검은깜빡임 보정
============================================================ */
/* 캡션: 하단을 거의 불투명한 검은 띠로 → 밝은 고기사진 위에서도 또렷 */
.nokitchen__visual-cap {
background: linear-gradient(transparent, rgba(8,6,5,.50) 20%, rgba(8,6,5,.97));
padding-top: clamp(92px, 17vw, 180px);
}
.nokitchen__visual-cap strong {
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,.98), 0 3px 22px rgba(0,0,0,.9);
}
.nokitchen__visual-cap span {
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,.98), 0 2px 14px rgba(0,0,0,.85);
}
/* ============================================================
v3.7 — ① 직배송 캡션 확실한 가독성 ② 점심 슬라이더(PC 화살표·모바일 스와이프)
③ 섹션 배경 이미지(제로사이트풍 명암 리듬) — 감성/임팩트 섹션만, 데이터 섹션은 깨끗하게
============================================================ */
/* ── ① 직배송 캡션: 윗줄까지 어둡게 깔아 흰 글씨가 항상 또렷하게 ── */
.nokitchen__visual-cap {
/* 전 구간 최소 .45 어둠 → 밝은 고기사진 위에서도 헤드라인이 뜨지 않음 */
background: linear-gradient(rgba(8,6,5,.46) 0%, rgba(8,6,5,.74) 45%, rgba(8,6,5,.97) 100%);
padding-top: clamp(96px, 18vw, 190px);
}
.nokitchen__visual-cap strong { text-shadow: 0 2px 4px #000, 0 3px 24px rgba(0,0,0,.95); }
/* ── ② 점심: 가로 슬라이더(스크롤 스냅) ── */
.lunch__slider { position: relative; margin-top: 44px; }
.lunch__track {
display: flex; gap: 22px; overflow-x: auto;
scroll-snap-type: x mandatory; scroll-behavior: smooth;
padding: 6px 4px 20px; -ms-overflow-style: none; scrollbar-width: none;
}
.lunch__track::-webkit-scrollbar { display: none; }
.lunch__track .lcard { flex: 0 0 clamp(258px, 30vw, 322px); scroll-snap-align: start; }
.lslide-btn {
position: absolute; top: 42%; transform: translateY(-50%);
width: 54px; height: 54px; border-radius: 50%; border: 0;
background: var(--red); color: #fff; font-size: 1.9rem; line-height: 1;
cursor: pointer; display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 22px rgba(192,50,43,.42); z-index: 3;
transition: transform .15s, background .2s;
}
.lslide-btn:hover { background: var(--red-deep); transform: translateY(-50%) scale(1.07); }
.lslide-btn:active { transform: translateY(-50%) scale(.94); }
.lslide-btn--prev { left: -10px; }
.lslide-btn--next { right: -10px; }
.lunch__hint { display: none; text-align: center; color: var(--ink-soft); font-size: .95rem; margin-top: 2px; }
@media (max-width: 720px) {
.lslide-btn { display: none; } /* 모바일은 손가락 스와이프 */
.lunch__hint { display: block; }
.lunch__track .lcard { flex: 0 0 80%; } /* 다음 카드 살짝 보이게 */
}
/* ── ③ 섹션 배경 이미지: 어두운 오버레이 + 흰 글씨(데이터 섹션 제외) ── */
/* 공통: 배경 이미지 위 글씨 그림자로 한 번 더 보강 */
.versus, .drinks, .hq, .support, .special, .contact { background-attachment: scroll; }
/* 냉동 vs 숙성 — 프리미엄 생삼겹 보드 */
.versus {
background:
linear-gradient(rgba(14,10,8,.82), rgba(16,11,9,.9)),
url("../assets/img/gallery-meat-1.jpg") center/cover no-repeat;
}
.versus .section__title { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
/* 하이볼 — 건배 컷 */
.drinks {
background:
linear-gradient(rgba(12,9,7,.84), rgba(12,9,7,.9)),
url("../assets/img/store-5.jpg") center/cover no-repeat;
}
.drinks .section__title { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.drinks .section__lead, .drinks .drinks__side { color: rgba(255,255,255,.85) !important; }
/* 든든한 본사 — 어두운 매장 인테리어 */
.hq {
background:
linear-gradient(rgba(14,10,8,.86), rgba(14,10,8,.92)),
url("../assets/img/store-4.jpg") center/cover no-repeat;
color: #fff;
}
.hq .section__title { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.hq .section__lead { color: rgba(255,255,255,.85) !important; }
/* 마케팅비 3,000만 — 붉은 오버레이 + 고기 보드 */
.support {
background:
linear-gradient(135deg, rgba(192,50,43,.9), rgba(110,18,25,.93)),
url("../assets/img/og-cover.jpg") center/cover no-repeat;
}
/* 업종변경 1억 — 肉 네온 매장 벽 */
.special {
background:
linear-gradient(rgba(12,9,7,.78), rgba(12,9,7,.86)),
url("../assets/img/store-2.jpg") center/cover no-repeat;
}
/* 최종 문의 — 찰싹 매장 포토존 */
.contact {
background:
linear-gradient(rgba(16,12,10,.85), rgba(16,12,10,.92)),
url("../assets/img/store-1.jpg") center/cover no-repeat;
}
@media (max-width: 600px) {
/* 모바일에선 배경 디테일보다 글씨 가독성 — 오버레이 살짝 더 진하게 */
.versus, .drinks, .hq, .special, .contact { background-blend-mode: normal; }
}
/* ============================================================
v3.8 — 피드백 반영: ① 직배송 캡션 "확실히" 보이게(불투명 검은띠+노란 키워드)
② 배경 이미지 강하게(오버레이 줄여 사진이 살아나게 + 글씨 그림자로 가독성 유지)
(이 블록이 v3.6·v3.7 캡션/배경값을 덮어씀)
============================================================ */
/* ── ① 직배송 캡션: 거의 불투명한 검은 띠 + 키워드 노랑 ── */
.nokitchen__visual-cap {
background: linear-gradient(transparent 0%, rgba(6,4,3,.62) 14%, rgba(6,4,3,.98) 52%);
padding: clamp(120px,21vw,210px) clamp(24px,5vw,56px) clamp(30px,4vw,46px);
}
.nokitchen__visual-cap strong {
color: #fff;
text-shadow: 0 2px 6px #000, 0 4px 26px rgba(0,0,0,1);
}
.nokitchen__visual-cap strong b { color: var(--yellow); } /* "직배송" 노랑 강조 */
.nokitchen__visual-cap span {
color: #fff;
text-shadow: 0 2px 8px #000, 0 1px 3px #000;
}
/* ── ② 배경 이미지: 오버레이 확 줄여 사진이 보이게(글씨엔 그림자로 가독성 보강) ── */
/* 배경 위 직접 놓이는 큰 글씨는 공통으로 강한 그림자 */
.versus .section__title, .drinks .section__title, .drinks .section__lead, .drinks .drinks__side,
.hq .section__title, .hq .section__lead, .contact .section__title, .contact .section__lead {
text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 4px 24px rgba(0,0,0,.7);
}
.versus {
background:
linear-gradient(rgba(10,7,5,.50), rgba(12,8,6,.66)),
url("../assets/img/gallery-meat-1.jpg") center/cover no-repeat;
}
.drinks {
background:
linear-gradient(rgba(8,6,5,.52), rgba(8,6,5,.66)),
url("../assets/img/store-5.jpg") center/cover no-repeat;
}
.hq {
background:
linear-gradient(rgba(10,7,5,.58), rgba(10,7,5,.72)),
url("../assets/img/store-4.jpg") center/cover no-repeat;
}
/* 마케팅비: 브랜드 레드는 유지하되 고기 텍스처가 비치게 */
.support {
background:
linear-gradient(135deg, rgba(192,50,43,.74), rgba(110,18,25,.82)),
url("../assets/img/og-cover.jpg") center/cover no-repeat;
}
/* 1억: 가운데 카드가 내용을 덮으므로 배경(肉 네온 벽)은 더 잘 보이게 */
.special {
background:
linear-gradient(rgba(10,7,5,.42), rgba(10,7,5,.56)),
url("../assets/img/store-2.jpg") center/cover no-repeat;
}
.contact {
background:
linear-gradient(rgba(12,9,7,.58), rgba(12,9,7,.72)),
url("../assets/img/store-1.jpg") center/cover no-repeat;
}
@media (max-width: 600px) {
/* 모바일: 글씨가 직접 놓이는 섹션만 오버레이 약간 더 */
.versus { background: linear-gradient(rgba(10,7,5,.60), rgba(12,8,6,.74)), url("../assets/img/gallery-meat-1.jpg") center/cover no-repeat; }
.drinks { background: linear-gradient(rgba(8,6,5,.62), rgba(8,6,5,.74)), url("../assets/img/store-5.jpg") center/cover no-repeat; }
.hq { background: linear-gradient(rgba(10,7,5,.66), rgba(10,7,5,.78)), url("../assets/img/store-4.jpg") center/cover no-repeat; }
.contact { background: linear-gradient(rgba(12,9,7,.66), rgba(12,9,7,.78)), url("../assets/img/store-1.jpg") center/cover no-repeat; }
}
/* ============================================================
v3.9 — 피드백 반영
① 직배송 캡션: 무거운 Black Han Sans → 깔끔한 Pretendard, 글씨색·굵기 정리(가독성)
② "숙성 3mm 삼겹 시대"(냉동vs숙성) 배경 = 안 어울리던 보드 → 숙성 삼겹 부채 플레이팅
③ 배경 없던 섹션(차별점·유튜브화제·마법의숫자)에 내용 맞는 배경 추가 (데이터·표 섹션은 깨끗 유지)
(이 블록이 앞 캡션/배경값을 덮어씀)
============================================================ */
/* ── ① 캡션: 폰트·색·굵기 가독성 정리 ── */
.nokitchen__visual-cap strong {
font-family: var(--font-body); /* Black Han Sans → Pretendard(또렷) */
font-weight: 800; letter-spacing: -.01em;
font-size: clamp(1.5rem, 3.4vw, 2.3rem);
color: #fff;
text-shadow: 0 2px 6px #000, 0 3px 22px #000;
}
.nokitchen__visual-cap strong b { color: var(--yellow); } /* "직배송" 노랑 */
.nokitchen__visual-cap span {
font-weight: 600; color: #fff;
text-shadow: 0 2px 8px #000, 0 1px 3px #000;
}
/* ── ② 냉동vs숙성: 내용 맞는 숙성 삼겹 부채 플레이팅으로 교체 ── */
.versus {
background:
linear-gradient(rgba(10,7,5,.48), rgba(12,8,6,.64)),
url("../assets/img/diff-1.jpg") center/cover no-repeat;
}
@media (max-width: 600px) {
.versus { background: linear-gradient(rgba(10,7,5,.58), rgba(12,8,6,.72)), url("../assets/img/diff-1.jpg") center/cover no-repeat; }
}
/* ── ③ 빈 섹션에 배경 추가 ── */
/* 헤드 글씨(배경 위 직접) 공통 그림자 */
.diff .section__title, .diff .section__lead,
.influencer .section__title, .influencer .section__lead,
.magic .section__title {
color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 4px 24px rgba(0,0,0,.7);
}
/* 차별점 — 불판 위 삼겹 굽기(앞뒤 10초 체험형) */
.diff {
background:
linear-gradient(rgba(10,7,5,.54), rgba(10,7,5,.68)),
url("../assets/img/hero-poster.jpg") center/cover no-repeat;
}
/* 유튜브 화제 — (수정) gallery-meat-1.jpg는 실제로 '냉면'이라 워딩과 불일치 → 아래 v4.1에서 사진 제거 */
.influencer {
background:
linear-gradient(rgba(9,6,5,.56), rgba(9,6,5,.70)),
url("../assets/img/gallery-meat-1.jpg") center/cover no-repeat;
}
/* 마법의 숫자 — 숙성 목살 플레이팅(사진 카드 가독 위해 살짝 더 진하게) */
.magic {
background:
linear-gradient(rgba(8,6,5,.66), rgba(8,6,5,.78)),
url("../assets/img/menu-2.jpg") center/cover no-repeat;
}
/* ============================================================
v4.0 — 실매출 섹션("5,000만→8,200만")에 배경 추가
부제 '직영 본점 데이터' → 그 매출을 만든 실제 본점 매장을 배경으로
(차트·숫자 카드는 흰 박스라 어두운 배경 위에서 더 또렷)
============================================================ */
.sales {
background:
linear-gradient(rgba(10,7,5,.64), rgba(10,7,5,.78)),
url("../assets/img/store-1.jpg") center/cover no-repeat;
color: #fff;
}
.sales .section__title, .sales .section__lead {
color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 4px 24px rgba(0,0,0,.7);
}
@media (max-width: 600px) {
.sales { background: linear-gradient(rgba(10,7,5,.72), rgba(10,7,5,.84)), url("../assets/img/store-1.jpg") center/cover no-repeat; }
}
/* ============================================================
v4.1 — '유튜브에서 먼저 터졌습니다': 워딩(영상·셀럽·화제성)에 맞는 음식사진이 없음
→ 억지 사진(실제론 냉면이던 컷) 제거하고 '브랜드 톤 다크 배경'으로.
영상 썸네일이 주인공이 되게. (대처방안 ①) 나중에 실제 셀럽/매장 컷 생기면 교체.
============================================================ */
.influencer {
background: radial-gradient(120% 130% at 50% -10%, #2a1d1a 0%, var(--charcoal) 62%);
color: #fff;
}
.influencer .section__title { color: #fff; text-shadow: none; }
.influencer .section__lead { color: rgba(255,255,255,.78) !important; text-shadow: none; }
/* 은은한 레드 글로우 한 줄 — 비어 보이지 않게(브랜드 톤) */
.influencer .influencer__head { position: relative; }
/* ============================================================
v4.2 — 점심 섹션(그리드→슬라이더로 1줄이 되며) 아래 여백 과다 보정
점심 섹션 하단 패딩 + 바로 뒤 구분선 간격만 축소(다른 섹션 영향 없음)
============================================================ */
.lunch { padding-bottom: clamp(40px, 5vw, 72px); }
.lunch__more { margin-top: 20px; }
.lunch + .brand-divider { padding-top: clamp(26px, 3.5vw, 46px); }
/* ============================================================
v4.4 — 하단 고정 '빠른 가맹문의' 바 (PC). 전화 + 이름/연락처/지역 + 동의 + 버튼.
submit.php 로 본문 폼과 동일하게 접수(quickForm). 모바일은 기존 floating-cta 사용.
============================================================ */
.quickbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
background: linear-gradient(180deg, #221C19, #161210);
border-top: 3px solid var(--red);
box-shadow: 0 -8px 28px rgba(0,0,0,.38);
padding: 11px var(--pad);
}
.quickbar__inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; gap: 16px; }
.quickbar__brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.quickbar__label { font-family: var(--font-point); color: #fff; font-size: .82rem; line-height: 1.18; letter-spacing: -.01em; }
.quickbar__tel { font-family: var(--font-head); color: var(--yellow); font-size: 1.55rem; letter-spacing: -.01em; }
.quickbar__fields { display: flex; gap: 8px; flex: 1; min-width: 0; }
.quickbar__fields input {
flex: 1; min-width: 0; height: 44px; padding: 0 14px;
border: 1px solid rgba(255,255,255,.22); border-radius: 8px;
background: #fff; color: var(--ink); font-family: var(--font-body); font-size: .95rem;
}
.quickbar__fields input::placeholder { color: #9a9088; }
.quickbar__fields input:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(255,206,46,.35); }
.quickbar__agree { display: flex; align-items: center; gap: 7px; color: #e7e0d6; font-size: .82rem; flex-shrink: 0; cursor: pointer; }
.quickbar__agree input { width: 17px; height: 17px; accent-color: var(--red); flex-shrink: 0; cursor: pointer; }
.quickbar__agree a { color: var(--yellow); text-decoration: underline; }
.quickbar__submit {
flex-shrink: 0; height: 46px; padding: 0 30px; border: 0; border-radius: 8px;
background: var(--red); color: #fff; font-family: var(--font-head); font-size: 1.18rem; letter-spacing: .02em;
cursor: pointer; transition: background .2s, transform .12s;
}
.quickbar__submit:hover { background: var(--red-deep); transform: translateY(-1px); }
.quickbar__submit:active { transform: scale(.97); }
/* 고정바 높이만큼 본문 하단 여백(콘텐츠·푸터 가림 방지) */
body { padding-bottom: 80px; }
@media (max-width: 880px) {
.quickbar__label { display: none; }
.quickbar__agree span { display: none; } /* 좁아지면 체크박스만 */
}
/* 모바일: 고정바를 2~3줄 컴팩트 폼으로 (floating-cta 대체) */
@media (max-width: 720px) {
.floating-cta { display: none; }
body { padding-bottom: 150px; }
.quickbar { padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); }
.quickbar__inner { flex-wrap: wrap; gap: 7px; }
.quickbar__brand { display: none; }
.quickbar__fields { order: 1; flex: 1 0 100%; flex-wrap: wrap; gap: 6px; }
.quickbar__fields input { flex: 1 1 calc(50% - 3px); height: 42px; font-size: .92rem; }
.quickbar__fields input:nth-child(3) { flex-basis: 100%; } /* 지역 한 줄 */
.quickbar__agree { order: 2; flex: 1 1 auto; font-size: .8rem; }
.quickbar__agree span { display: inline; }
.quickbar__submit { order: 3; flex: 0 0 auto; height: 42px; padding: 0 26px; font-size: 1.08rem; }
}
/* ============================================================
v4.6 — 모바일 정밀 최적화 (PC 미변경)
① 타이포 위계 ② 카드 단조로움 해소(가로 스와이프·2열·컴팩트 타일)
③ 이모지→라인아이콘 ④ 섹션 여백 리듬
============================================================ */
/* ③ 라인 아이콘 사이징·색 (PC·모바일 공통) */
.nocard__icon, .hqstat__ic, .sup-item__ic { line-height: 1; }
.nocard__icon svg, .hqstat__ic svg, .sup-item__ic svg { width: 1em; height: 1em; display: block; margin: 0 auto; }
.nocard__icon { display: block; font-size: 2.1rem; margin-bottom: 14px; color: rgba(0,0,0,.3); }
.hqstat__ic { color: var(--red); }
.sup-item__ic { color: var(--yellow); }
@media (max-width: 720px) {
/* ── ① 타이포 위계: 제목은 더 크고 단단하게, 본문은 한 톤 낮춰 대비 ── */
.section__kicker { font-size: .8rem; letter-spacing: .18em; padding: 7px 16px; margin-bottom: 16px; }
.section__title { font-size: clamp(2.05rem, 8.8vw, 2.75rem); line-height: 1.12; letter-spacing: -.035em; }
.section__lead { font-size: 1.04rem; line-height: 1.64; margin-top: 14px; color: var(--ink-soft); }
/* ── ④ 여백 리듬: 데이터=타이트 / 감정·클로징=여유 (단조로운 등간격 깨기) ── */
section { padding: 52px var(--pad); }
.support, .special, .contact { padding-top: 78px; padding-bottom: 78px; }
.profit, .cost, .faq, .versus { padding-top: 42px; padding-bottom: 42px; }
/* 헤드~카드 간격 축소 (PC의 56px → 모바일 28px) */
.influencer__grid, .menu__grid, .magic__grid, .diff__grid, .drinks__grid,
.support__grid, .sales__stats, .hq__stats, .nokitchen__grid, .lunch__slider,
.sets, .selfbar, .profit__body, .chart, .hq__cols { margin-top: 28px !important; }
/* ── ② 단조로움 해소 ── */
/* (a) 숫자 통계: 1열 스택 → 3열 컴팩트 타일 (대시보드 느낌) */
.sales__stats, .hq__stats { grid-template-columns: repeat(3,1fr) !important; gap: 9px; }
.sstat, .hqstat { padding: 16px 6px; }
.sstat__num { font-size: 1.5rem; }
.sstat__label, .hqstat__label { font-size: .74rem; margin-top: 6px; line-height: 1.35; }
.hqstat__num { font-size: 1.55rem; margin: 6px 0; }
.hqstat__ic { font-size: 1.5rem; }
/* (b) 메뉴: 2열 그리드 유지 (1열로 길게 늘어놓지 않기) */
.menu__grid { grid-template-columns: 1fr 1fr !important; gap: 12px; max-width: none; }
.menu__item figcaption { padding: 14px 14px 16px; gap: 3px; }
.menu__item h3 { font-size: 1.12rem; }
.menu__item p { font-size: .92rem; line-height: 1.45; }
.menu__price { font-size: 1.2rem; }
/* (c) 차별점·하이볼: 세로 스택 → 가로 스와이프 카루셀 (다음 카드 살짝 보임) */
.diff__grid, .drinks__grid {
display: flex !important; grid-template-columns: none !important;
gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1);
padding: 2px var(--pad) 16px; -webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.diff__grid::-webkit-scrollbar, .drinks__grid::-webkit-scrollbar { display: none; }
.diff__grid > .dcard, .drinks__grid > .hcard { flex: 0 0 80%; scroll-snap-align: center; }
.dcard h3 { font-size: 1.35rem; margin: 20px 22px 8px; }
.dcard p { font-size: 1rem; margin: 0 22px 24px; }
.hcard { padding: 30px 26px; }
/* (d) 주방불필요: 큰 중앙 카드 → 가로형 컴팩트(NO를 왼쪽 아이콘으로) */
.nokitchen__grid { grid-template-columns: 1fr !important; gap: 10px; }
.nocard {
display: grid; grid-template-columns: auto 1fr; grid-template-areas: "no title" "no text";
column-gap: 18px; row-gap: 2px; align-items: center; text-align: left; padding: 20px 22px;
}
.nocard__icon { display: none; } /* 가로형에선 NO가 곧 아이콘 */
.nocard__no { grid-area: no; margin: 0; font-size: 2.6rem; align-self: center; }
.nocard__no::after { width: 56px; }
.nocard strong { grid-area: title; font-size: 1.2rem; margin: 0; }
.nocard p { grid-area: text; font-size: .96rem; line-height: 1.5; }
/* (e) 본사지원: 큰 중앙 카드 → 가로형 컴팩트(아이콘 왼쪽) */
.support__grid { grid-template-columns: 1fr !important; gap: 12px; }
.sup-item {
display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic title" "ic text";
column-gap: 16px; row-gap: 3px; align-items: center; text-align: left; padding: 20px 22px;
}
.sup-item__ic { grid-area: ic; font-size: 2rem; margin: 0; align-self: center; }
.sup-item strong { grid-area: title; font-size: 1.2rem; margin: 0; }
.sup-item p { grid-area: text; font-size: .96rem; line-height: 1.5; }
/* (f) 마법의 숫자: 과한 패딩 줄여 두 카드 균형 */
.mcard { padding: 32px 26px; }
.mcard__big { font-size: clamp(3rem, 15vw, 4.2rem); margin-bottom: 16px; }
.mcard p { font-size: 1.08rem; }
/* (g) 인플루언서 영상카드: 그대로 세로(영상은 폭 필요) — 간격만 정리 */
.influencer__grid { gap: 18px; }
.influencer__buzz { grid-template-columns: 1fr 1fr 1fr !important; gap: 8px; }
.influencer__buzz .buzz__item { padding: 16px 10px; }
.influencer__buzz .buzz__item strong { font-size: 1.05rem; }
.influencer__buzz .buzz__item span { font-size: .8rem; }
}
/* ============================================================
v4.7 — 모바일 마감: 메뉴 1개씩 크게 · 세트 슬라이드 · 모던 타이포 · 가독성
(대표 피드백: AI느낌 더 빼기 / 글꼴·굵기 요즘 감성)
============================================================ */
/* ── 모던 타이포 (모바일): 템플릿형 둥근 폰트(Black Han Sans·Jua) →
Pretendard 헤비 + 타이트 자간. 숫자/가격은 임팩트 위해 기존 유지 ── */
@media (max-width: 720px) {
.section__title, .hero__title, .menu__item h3, .dcard h3, .selfbar h3,
.special__title, .support__title, .hqcol h3, .nocard strong, .sup-item strong,
.hcard strong, .lcard__body strong, .set strong, .faq__item summary,
.vcard__tag, .nokitchen__visual-cap strong, .contact .section__title {
font-family: var(--font-body); font-weight: 800; letter-spacing: -.035em;
}
.section__title, .hero__title, .special__title, .support__title {
font-weight: 900; line-height: 1.1;
}
/* 키커·배지: 둥근 Jua → Pretendard, 살짝 넓은 자간(요즘 라벨 톤) */
.section__kicker { font-family: var(--font-body); font-weight: 700; }
.special__badge, .selfbar__badge, .support__badge, .hero__badge,
.menu__star, .menu__new, .mcard__label, .hcard__tag, .lcard__tag {
font-family: var(--font-body); font-weight: 700; letter-spacing: .02em;
}
/* ── 가독성: 줄간격·자간 여유, 본문 톤 안정 ── */
body { letter-spacing: -.012em; }
.section__lead { line-height: 1.72; }
.menu__item p, .dcard p, .nocard p, .sup-item p, .hcard p,
.lcard__body p, .set p, .faq__item p, .mcard p, .mcard__list li { line-height: 1.62; }
/* ── ① 메뉴: 2열 취소 → 1개씩 크게 (사진 크고 시원하게) ── */
.menu__grid { grid-template-columns: 1fr !important; gap: 18px; max-width: none; }
.menu__img { aspect-ratio: 16/11; }
.menu__item figcaption { padding: 20px 22px 24px; min-height: 0; }
.menu__item h3 { font-size: 1.5rem; }
.menu__item p { font-size: 1.02rem; display: block; }
.menu__price { font-size: 1.55rem; }
.menu__star, .menu__new { font-size: .82rem; padding: 5px 12px; }
/* ── ② 세트(2·3·4인): 가로 스와이프 슬라이드로 묶기 ── */
.sets {
display: flex !important; grid-template-columns: none !important;
gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1);
padding: 2px var(--pad) 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.sets::-webkit-scrollbar { display: none; }
.sets > .set { flex: 0 0 74%; scroll-snap-align: center; }
.set strong { font-size: 1.3rem; margin-top: 18px; }
.set__price { font-size: 2rem; }
.set p { font-size: .96rem; padding: 0 20px 26px; }
/* 마법의숫자 카드 패딩 버그 보정(이미지 카드라 본문에만 패딩) */
.mcard { padding: 0 !important; }
.mcard__body { padding: 26px 24px 32px; }
}
/* ============================================================
v4.8 — 한국어 줄바꿈 정리 (전체: PC+모바일) — 외톨이·들쭉날쭉·의미단위 끊김
제목/짧은문구=balance(줄 길이 균등) · 본문=pretty(끝줄 외톨이 방지) · keep-all 유지
※ 폰트는 PC=기존(Black Han Sans) / 모바일=Pretendard 유지 (줄바꿈만 공통)
============================================================ */
/* 제목 + 짧은 리드/카피: 줄 길이를 고르게 → 가운데정렬 들쭉날쭉·외톨이 해소 */
.section__title, .section__lead, .hero__title, .hero__sub, .hero__badge,
.support__title, .support__lead, .special__title, .special__lead, .special__sub,
.selfbar h3, .nokitchen__visual-cap strong, .nokitchen__visual-cap span,
.versus__head .section__lead, .contact .section__lead, .promobar__inner {
text-wrap: balance; word-break: keep-all; overflow-wrap: break-word;
}
/* 본문 단락/리스트: 마지막 줄에 한 단어만 떨어지는 외톨이 방지 */
.menu__item p, .dcard p, .dcard h3, .nocard p, .nocard strong, .sup-item p,
.sup-item strong, .hcard p, .hcard strong, .lcard__body p, .lcard__body strong,
.set p, .faq__item summary, .faq__item p, .mcard p, .mcard__list li,
.vcard li, .hqcol li, .hqcol h3, .icard figcaption span, .icard__desc,
.contact__perks li, .footer__info p, .selfbar p {
text-wrap: pretty; word-break: keep-all; overflow-wrap: break-word;
}
/* ============================================================
v5.4 — 대표 성공스토리 영상 섹션 (실매출 증명 바로 아래)
============================================================ */
.founder { background: var(--charcoal); color: #fff; }
.founder__inner { max-width: 880px; margin: 0 auto; text-align: center; }
.founder .section__title { color: #fff; }
.founder .section__lead { color: rgba(255,255,255,.72); margin: 0 auto; max-width: 640px; }
.founder__video {
position: relative; aspect-ratio: 16/9; margin-top: clamp(28px, 4vw, 44px);
border-radius: var(--radius); overflow: hidden; background: #000;
border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.founder__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.founder__divider {
margin-top: clamp(52px, 7vw, 84px); margin-bottom: clamp(8px, 2vw, 16px); text-align: center;
}
.founder__divider-tag {
display: inline-block; background: var(--red); color: #fff; font-weight: 800;
font-size: clamp(.82rem, 1.8vw, .98rem); letter-spacing: .04em;
padding: 8px 20px; border-radius: 999px; box-shadow: 0 8px 22px rgba(192,50,43,.4);
}
.founder__divider-title {
margin: 18px 0 6px; color: #fff; font-weight: 700; line-height: 1.14;
font-size: clamp(1.9rem, 5.5vw, 3rem); letter-spacing: -.01em;
}
.founder__divider-go {
margin: 0; color: var(--red); font-weight: 800;
font-size: clamp(1rem, 2.4vw, 1.25rem); letter-spacing: -.01em;
}
/* ===================================================
v5.6 : 가맹 1호 대전점 웨이팅 섹션 (.daejeon)
=================================================== */
.daejeon {
background: var(--charcoal);
color: #fff;
padding: clamp(72px, 10vw, 130px) 20px;
text-align: center;
}
.daejeon .section__title { color: #fff; }
.daejeon .section__lead { color: rgba(255,255,255,.78); }
.daejeon__media {
display: grid;
grid-template-columns: 1.7fr 1fr;
gap: 18px;
max-width: 1040px;
margin: clamp(34px, 5vw, 56px) auto 0;
}
.daejeon__clip {
margin: 0; position: relative; overflow: hidden;
border-radius: 18px; background: var(--charcoal-2);
border: 1px solid var(--line);
height: clamp(300px, 42vw, 520px);
}
.daejeon__clip video { width: 100%; height: 100%; object-fit: cover; display: block; }
.daejeon__clip figcaption {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 26px 18px 14px;
background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0));
font-size: .95rem; color: rgba(255,255,255,.92);
text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.daejeon__clip figcaption b { color: var(--yellow); font-weight: 800; }
.daejeon__note { margin-top: 18px; font-size: .82rem; color: rgba(255,255,255,.45); }
@media (max-width: 720px) {
.daejeon__media { grid-template-columns: 1fr; gap: 14px; }
.daejeon__clip--wide { height: auto; aspect-ratio: 16/9; }
.daejeon__clip--tall { height: auto; aspect-ratio: 3/4; }
}
.daejeon__head .section__lead { margin-left: auto; margin-right: auto; }
/* v5.7 : 대전점 사진·리스트 그리드 + 창업비용 순수비용 강조 */
.daejeon__proof {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
max-width: 1040px; margin: 14px auto 0;
}
.daejeon__proof .daejeon__clip { height: clamp(190px, 21vw, 280px); }
.daejeon__clip img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 720px) {
.daejeon__proof { grid-template-columns: 1fr 1fr; gap: 10px; }
.daejeon__proof .daejeon__clip { height: 44vw; }
}
.cost__pure {
max-width: 760px; margin: 34px auto 0; padding: 38px 30px;
background: linear-gradient(135deg, var(--red), var(--red-deep));
border-radius: var(--radius); text-align: center; color: #fff;
box-shadow: 0 14px 40px rgba(110,18,25,.25);
}
.cost__pure-label { display: block; font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 800; opacity: .92; letter-spacing: .02em; }
.cost__pure-amount { display: block; font-family: var(--font-point); font-size: clamp(3.4rem, 9vw, 5.6rem); line-height: 1.1; color: var(--yellow); margin: 6px 0 10px; }
.cost__pure-amount small { font-size: .42em; }
.cost__pure-note { display: block; font-size: .95rem; opacity: .85; }
/* ===================================================
v5.8 : 1달 만에 10호점 계약 돌파 · 전국 확산 (.tenth)
=================================================== */
.tenth {
background: linear-gradient(150deg, var(--red) 0%, var(--red-deep) 100%);
color: #fff;
padding: clamp(72px, 10vw, 130px) var(--pad);
text-align: center;
position: relative;
overflow: hidden;
}
.tenth::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 70% 55% at 50% -10%, rgba(255,206,46,.18), transparent 60%);
}
.tenth__inner { max-width: var(--maxw); margin: 0 auto; position: relative; }
.tenth__kicker { color: var(--yellow); }
.tenth .section__title { color: #fff; }
.tenth .section__lead { color: rgba(255,255,255,.82); margin-left: auto; margin-right: auto; max-width: 640px; }
.tenth__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin: 48px auto 0; max-width: 980px; }
.tstat {
background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.16);
border-radius: var(--radius); padding: 30px 20px; text-align: center;
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.tstat__num { font-family: var(--font-head); font-size: clamp(2rem,5vw,3rem); color: var(--yellow); display: block; line-height: 1; }
.tstat__label { color: rgba(255,255,255,.9); font-weight: 700; margin-top: 12px; display: block; }
.tstat__label small { color: rgba(255,255,255,.6); font-weight: 400; }
.tenth__progress {
max-width: 720px; margin: 34px auto 0; padding: 24px 26px;
background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius);
}
.tenth__progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: clamp(.95rem, 2vw, 1.08rem); }
.tenth__progress-head b { font-family: var(--font-head); font-size: 1.5em; color: var(--yellow); }
.tenth__bar { height: 14px; border-radius: 999px; background: rgba(255,255,255,.18); margin-top: 14px; overflow: hidden; }
.tenth__bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--yellow), #ffe27a); transition: width 1.2s cubic-bezier(.2,.7,.2,1) .2s; }
.tenth__progress.in .tenth__bar i { width: 83.3%; }
.tenth__progress-note { margin-top: 12px; font-size: .85rem; color: rgba(255,255,255,.65); }
.tenth__regions { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; max-width: 980px; margin: 40px auto 0; }
.tregion {
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
border-radius: var(--radius); padding: 22px 16px 20px;
}
.tregion h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); color: #fff; }
.tregion p { margin-top: 6px; font-size: .92rem; color: rgba(255,255,255,.78); line-height: 1.55; }
.tregion__badge {
display: inline-block; margin-top: 12px; padding: 4px 12px; border-radius: 999px;
font-size: .78rem; font-weight: 800;
background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.25);
}
.tregion__badge--open { background: var(--yellow); color: var(--charcoal); border-color: var(--yellow); }
.tregion__badge--recruit { background: #fff; color: var(--red); border-color: #fff; }
.tenth__cta { margin-top: 44px; }
.tenth__cta-note { margin-top: 14px; font-size: .8rem; color: rgba(255,255,255,.55); }
@media (max-width: 900px) {
.tenth__regions { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 720px) {
.tenth__stats { grid-template-columns: repeat(3,1fr); gap: 9px; }
.tstat { padding: 16px 6px; }
.tstat__num { font-size: 1.5rem; }
.tstat__label { font-size: .74rem; margin-top: 6px; line-height: 1.35; }
.tenth__progress { padding: 18px 16px; }
.tenth__progress-head { flex-direction: column; align-items: center; gap: 2px; }
.tenth__regions { grid-template-columns: 1fr 1fr; gap: 10px; }
.tregion { padding: 16px 12px 14px; }
.tregion p { font-size: .82rem; }
.tregion__badge { font-size: .7rem; padding: 3px 9px; }
}
/* ============================================================
v5.9 — REAL SALES 섹션 재구성 (A안) · '월매출 추이' 그래프
의도: 헤드라인 앵커를 8,200만 단일값으로 고정하고,
출발점 1,200만은 그래프 첫 막대(=맥락 있는 자리)에서만 노출.
(헤드라인의 1,200만 = '첫 달 기대치'로 읽힘 → 앵커 손실)
수치 변경은 index.html 의 data-h(8,200만 대비 %)와 라벨만 수정.
============================================================ */
.chart--month { margin-bottom: 20px; }
/* padding-top = 최고점(100%) 막대의 값 라벨이 차트 헤더와 겹치지 않게 확보하는 여백 */
.mbars { display: flex; align-items: flex-end; gap: clamp(8px, 2vw, 22px); padding-top: 44px; }
.mbar { flex: 1; display: flex; flex-direction: column; align-items: center; }
.mbar__col { position: relative; width: 100%; height: 190px; }
.mbar__fill {
position: absolute; left: 0; right: 0; bottom: 0; height: 0;
background: #ecdfc9; border-radius: 8px 8px 0 0;
transition: height 1.1s cubic-bezier(.2,.8,.2,1);
}
/* bottom 값 = 막대 높이(%). bottom 기준이라 요소는 그 지점에서 위로 자라므로
translateY 로 또 들어올리면 이중으로 밀린다(라벨이 차트 헤더를 침범). margin-bottom 으로만 간격을 준다. */
.mbar__val {
position: absolute; left: 0; right: 0; bottom: 0; margin-bottom: 8px;
text-align: center; white-space: nowrap;
font-family: var(--font-point); font-size: clamp(.78rem, 1.9vw, 1rem);
color: var(--ink-soft);
transition: bottom 1.1s cubic-bezier(.2,.8,.2,1);
}
.mbar__mon { margin-top: 10px; font-weight: 700; font-size: clamp(.72rem, 1.7vw, .85rem); color: var(--ink-soft); }
/* 마지막 달(현재) 만 브랜드 레드 — '지금은 여기' 가 한눈에 */
.mbar--now .mbar__fill { background: linear-gradient(var(--red), var(--red-deep)); }
.mbar--now .mbar__val { color: var(--red); font-family: var(--font-head); font-size: clamp(1.05rem, 3.2vw, 1.7rem); }
.mbar--now .mbar__mon { color: var(--ink); }
@media (max-width: 600px) {
.mbars { gap: 6px; padding-top: 38px; }
.mbar__col { height: 132px; }
}
/* ===================================================
v5.9 : 매장별 매출 현황 영상(.sales__video) + 웨이팅 섹션 매장 구분(.daejeon__store)
=================================================== */
.sales__video {
max-width: var(--maxw); margin: 20px auto 0;
background: #fff; border: 1px solid var(--line-dark);
border-radius: var(--radius); padding: 30px;
box-shadow: 0 14px 40px rgba(0,0,0,.06);
}
.sales__video video {
width: 100%; aspect-ratio: 16/9; display: block;
border-radius: 12px; background: var(--charcoal);
}
.daejeon__store {
max-width: 1040px; margin: clamp(34px, 5vw, 56px) auto 0;
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
text-align: left; padding-left: 14px; border-left: 4px solid var(--red);
}
.daejeon__store b { font-family: var(--font-head); font-weight: 400; font-size: clamp(1.3rem, 2.6vw, 1.7rem); color: #fff; }
.daejeon__store span { font-size: .95rem; color: rgba(255,255,255,.7); }
.daejeon__store + .daejeon__media { margin-top: 16px; }
.daejeon__media--single { grid-template-columns: 1fr; }
.daejeon__media--single .daejeon__clip { height: auto; aspect-ratio: 16/9; }
.sales__video .sales__video-mo { display: none; aspect-ratio: 1/1; }
@media (max-width: 720px) {
.sales__video { padding: 16px; }
.sales__video .sales__video-pc { display: none; }
.sales__video .sales__video-mo { display: block; }
.daejeon__store { gap: 4px 10px; }
.daejeon__store span { font-size: .85rem; }
}
/* v6.2 창업비용표: 인테리어 정가 취소선 */
.cost__was { color: #9a9088; font-size: .85em; margin-right: 6px; text-decoration-thickness: 1.5px; }