/* F&B 사이트 (fnb.egglink.kr) — 목업 v5 기반. 브랜드: 검정 #111214 + 노랑 #FFC107 */
/* 브랜드: 로고 그대로 — 검정 #111214 + 노랑 #FFC107. 노랑은 글자색으로 쓰지 않고 면·선·형광펜으로만 */
:root{
  --ink:#111214; --ink-2:#4b5059; --ink-3:#8b9099; --line:#ebebed; --line-2:#f4f4f5;
  --bg:#fff; --soft:#f7f7f5; --dark:#111214;
  --y:#ffc107; --y-2:#fff5d1; --y-3:#fffbea; --y-d:#a77900;
  --green:#15a14b; --red:#e5484d; --kakao:#fee500;
  --sh:0 24px 60px -24px rgba(17,18,20,.28), 0 2px 8px rgba(17,18,20,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;word-break:keep-all;line-height:1.5}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.wrap{width:min(1200px,calc(100% - 48px));margin:0 auto}
svg.i{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
mark{background:linear-gradient(transparent 58%,var(--y) 58%);color:inherit;padding:0 3px}
.fn{font-size:12px;color:var(--ink-3);vertical-align:super;margin-left:1px}

/* 상단 */
.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:36px;height:72px}
.logo{display:flex;align-items:center;gap:10px}
.logo img{height:28px;width:auto}
.menu{display:flex;gap:26px;font-size:15px;font-weight:600;color:var(--ink-2)}
.menu a{padding:6px 0;position:relative}
.menu a:hover{color:var(--ink)}
.menu a.on{color:var(--ink)}
.menu a.on:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:2px;background:var(--y)}
.top-r{margin-left:auto;display:flex;gap:14px;align-items:center}
.client{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--ink-2);padding:8px 12px;border-radius:10px;border:1px solid var(--line)}
.client svg{width:16px;height:16px}
.tel{font-weight:700;font-size:15px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 26px;border-radius:14px;font-weight:700;font-size:16px;white-space:nowrap;transition:transform .18s, box-shadow .18s, background .18s}
.btn:hover{transform:translateY(-1px)}
.btn-k{background:var(--ink);color:#fff;box-shadow:0 12px 26px -14px rgba(17,18,20,.7)}
.btn-k:hover{background:#000}
.btn-y{background:var(--y);color:var(--ink)}
.btn-y:hover{background:#ffcb2b}
.btn-w{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-sm{height:42px;padding:0 18px;font-size:14px;border-radius:11px}

/* 첫 화면 */
.hero{position:relative;overflow:hidden;padding:68px 0 92px;background:radial-gradient(820px 520px at 88% 18%,#fff2c2 0%,rgba(255,242,194,0) 62%),linear-gradient(180deg,#fff 0%,#fff 70%,var(--soft) 100%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.tag{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14px;font-weight:700}
.tag b{display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 8px;border-radius:999px;background:var(--y);font-size:12px}
.hero h1{margin:22px 0 20px;font-size:58px;line-height:1.2;font-weight:800;letter-spacing:-.05em}
.hero .lead{font-size:18.5px;line-height:1.75;color:var(--ink-2);max-width:540px}
.hero .lead b{color:var(--ink)}
.ctas{display:flex;gap:10px;margin-top:32px}
.diag-note{margin-top:12px;font-size:13.5px;color:var(--ink-3)}
.proof{display:flex;gap:30px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.proof strong{display:block;font-size:22px;font-weight:800;letter-spacing:-.03em}
.proof span{font-size:13px;color:var(--ink-3)}

.stage{position:relative;height:600px}
.phone{position:absolute;width:300px;height:600px;border-radius:46px;background:#111;padding:10px;box-shadow:var(--sh)}
.scr{width:100%;height:100%;border-radius:37px;background:#fff;overflow:hidden;position:relative}
.isl{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:92px;height:26px;background:#111;border-radius:16px;z-index:3}
.p-map{left:80px;top:0}
.sb{height:46px}
.nsearch{margin:6px 14px 0;height:44px;border:2px solid #03c75a;border-radius:12px;display:flex;align-items:center;gap:8px;padding:0 12px;font-size:14px;font-weight:600}
.nsearch .n{width:20px;height:20px;border-radius:4px;background:#03c75a;color:#fff;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center}
.ntabs{display:flex;gap:14px;padding:12px 16px 8px;font-size:12.5px;color:var(--ink-3);border-bottom:1px solid var(--line-2)}
.ntabs b{color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:6px}
.mapbg{height:116px;background:linear-gradient(135deg,#eef2e9,#e8eef3);position:relative;overflow:hidden}
.mapbg:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#fff 2px,transparent 2px),linear-gradient(90deg,#fff 2px,transparent 2px);background-size:46px 38px;opacity:.75;transform:rotate(-8deg) scale(1.3)}
.pin{position:absolute;display:flex;align-items:center;gap:4px;background:#fff;border-radius:999px;padding:3px 8px 3px 3px;font-size:10.5px;font-weight:700;box-shadow:0 3px 8px rgba(0,0,0,.12)}
.pin i{width:16px;height:16px;border-radius:50%;background:#03c75a;color:#fff;font-style:normal;font-size:9px;display:flex;align-items:center;justify-content:center}
.pin.me{background:var(--ink);color:#fff}
.pin.me i{background:var(--y);color:var(--ink)}
.place{display:grid;grid-template-columns:62px 1fr;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line-2)}
.place .ph{width:62px;height:62px;border-radius:10px;background-size:cover;background-position:center}
.place b{font-size:14px;display:flex;align-items:center;gap:6px}
.place b em{font-style:normal;font-size:10.5px;font-weight:700;background:var(--y-2);padding:1px 6px;border-radius:4px}
.place .meta{font-size:11.5px;color:var(--ink-3);margin-top:3px}
.place .meta strong{color:#f2a900}
.place.me{background:linear-gradient(90deg,var(--y-3),#fff)}
.rk{font-size:11px;font-weight:800;color:var(--ink-3)}

.alim{position:absolute;left:0;top:318px;width:300px;background:#fff;border-radius:18px;box-shadow:var(--sh);overflow:hidden;z-index:4}
.alim-h{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--kakao);font-size:12.5px;font-weight:800}
.alim-h img{height:14px;width:auto;background:#fff;border-radius:5px;padding:3px}
.alim-h span{margin-left:auto;font-weight:600;font-size:11.5px;color:#5a4a00}
.alim-b{padding:12px 14px;font-size:12.5px;line-height:1.7;color:#222}
.alim-b b{display:block;font-size:13.5px;margin-bottom:4px}
.ln{display:flex;justify-content:space-between;gap:10px}
.ln span:last-child{font-weight:700;white-space:nowrap}
.alim-btn{margin:0 12px 12px;height:38px;border-radius:9px;background:#f3f3f4;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px}
.chip{position:absolute;z-index:5;display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:12px 16px;box-shadow:var(--sh);font-size:13px}
.chip .ic{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--y)}
.chip b{display:block;font-size:15px}
.chip small{color:var(--ink-3);font-size:12px}
.up{color:var(--green);font-weight:800}
.dn{color:var(--red);font-weight:800}

/* 매장명 흐름 */
.names{padding:42px 0 46px;border-bottom:1px solid var(--line);overflow:hidden;background:var(--soft)}
.names .cap{display:flex;justify-content:center;gap:10px;align-items:center;font-size:14.5px;color:var(--ink-3);font-weight:600;margin-bottom:22px;flex-wrap:wrap}
.names .cap strong{color:var(--ink)}
.names .cap a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.track{display:flex;width:max-content;animation:flow 75s linear infinite}
.track span{font-size:32px;font-weight:800;letter-spacing:-.04em;color:#c9ccd2;padding:0 20px;white-space:nowrap;transition:color .2s}
.track span:hover{color:var(--ink)}
.track span:after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--y);margin-left:40px;vertical-align:middle}
.names:hover .track{animation-play-state:paused}
@keyframes flow{to{transform:translateX(-50%)}}

/* 공통 */
.sec{padding:116px 0}
.sec.soft{background:var(--soft)}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--ink-2)}
.kicker:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--y)}
h2{font-size:44px;line-height:1.28;font-weight:800;letter-spacing:-.045em;margin-top:12px}
.sub{margin-top:16px;font-size:18px;line-height:1.75;color:var(--ink-2);max-width:640px}
.center{text-align:center}
.center .sub{margin-left:auto;margin-right:auto}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.more-link{font-weight:700;font-size:15px;display:inline-flex;gap:6px;align-items:center;border-bottom:2px solid var(--y);padding-bottom:2px}

/* 업종 */
.biz{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.bz{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;transition:transform .25s, box-shadow .25s, border-color .25s}
.bz:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:transparent}
.bz-h{display:flex;justify-content:space-between;align-items:center}
.bz-h b{font-size:21px;letter-spacing:-.035em}
.bz-h span{font-size:13px;font-weight:700;background:var(--y-2);padding:4px 10px;border-radius:999px}
.bz .stores{margin-top:14px;font-size:15px;line-height:1.7;color:var(--ink)}
.bz .stores i{font-style:normal;color:var(--ink-3)}
.bz .how{margin-top:16px;padding-top:16px;border-top:1px dashed var(--line);font-size:14px;color:var(--ink-2);line-height:1.65}
.bz .how strong{display:block;font-size:12.5px;color:var(--ink-3);font-weight:600;margin-bottom:2px}
.bz.fr{background:var(--ink);color:#fff;border-color:var(--ink)}
.bz.fr .bz-h span{background:var(--y);color:var(--ink)}
.bz.fr .stores{color:#fff}
.bz.fr .stores i,.bz.fr .how strong{color:#9a9ea6}
.bz.fr .how{color:#c9ccd2;border-top-color:rgba(255,255,255,.15)}

/* 매일 보고 */
.report{background:var(--dark);color:#fff;padding:116px 0;position:relative;overflow:hidden}
.report:before{content:"";position:absolute;right:-220px;top:-220px;width:720px;height:720px;background:radial-gradient(circle,rgba(255,193,7,.18),rgba(255,193,7,0) 65%)}
.report .wrap{position:relative}
.report h2{color:#fff}
.report .sub{color:#b4b7bd}
.report .kicker{color:#d9dbe0}
.vs{display:grid;grid-template-columns:1fr 1fr;max-width:640px;margin-top:30px;border:1px solid rgba(255,255,255,.14);border-radius:18px;overflow:hidden}
.vs div{padding:16px 20px}
.vs div+div{background:rgba(255,193,7,.12)}
.vs small{display:block;font-size:13px;color:#8d9097}
.vs b{display:block;margin-top:4px;font-size:17px}
.vs div:first-child b{color:#74777e;text-decoration:line-through}
.tabs{display:flex;gap:8px;margin-top:44px;flex-wrap:wrap}
.tabs button{height:46px;padding:0 20px;border-radius:999px;border:1px solid rgba(255,255,255,.18);color:#d9dbe0;font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:8px}
.tabs button.on{background:var(--y);border-color:var(--y);color:var(--ink)}
.tabs button svg{width:18px;height:18px}
.pane{display:none;margin-top:28px;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.pane.on{display:grid}
.pane-tx b{display:block;font-size:26px;letter-spacing:-.03em;line-height:1.4}
.pane-tx p{margin-top:12px;color:#b4b7bd;line-height:1.75;font-size:16px}
.pane-tx ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:12px}
.pane-tx li{display:flex;gap:10px;color:#e6e7ea;font-size:15.5px}
.pane-tx li svg{color:var(--y);width:20px;height:20px;stroke-width:2.4}
.pane-tx .real{margin-top:20px;font-size:13px;color:#8d9097}

.kakao-ui{width:390px;margin:0 auto;background:#bacee0;border-radius:30px;padding:16px 16px 22px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.k-top{display:flex;align-items:center;gap:10px;padding:4px 4px 14px;color:#1d2733;font-weight:800;font-size:15px}
.k-top .av{width:36px;height:36px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.k-top .av img{height:16px;width:24px;object-fit:cover;object-position:left}
.k-date{text-align:center;margin:6px 0 12px}
.k-date span{display:inline-block;background:rgba(0,0,0,.12);color:#fff;font-size:11.5px;padding:4px 12px;border-radius:999px}
.k-msg{display:flex;gap:6px;align-items:flex-end;margin-bottom:6px}
.k-card{width:292px;background:#fff;border-radius:6px 16px 16px 16px;overflow:hidden;color:#222}
.k-card .h{background:var(--kakao);padding:9px 12px;font-size:12px;font-weight:800}
.k-card .b{padding:12px 13px;font-size:12.8px;line-height:1.7}
.k-card .b b{display:block;font-size:13.5px;margin-bottom:6px}
.k-card .bt{margin:0 10px 10px;height:38px;border-radius:8px;background:#f2f2f3;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700}
.k-time{font-size:10.5px;color:#56687b;white-space:nowrap}
.dim{color:#666;font-size:12px}

.lphone{position:relative;width:310px;height:620px;margin:0 auto;border-radius:46px;background:#111;padding:10px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.lp{padding:52px 16px 16px;font-size:13px;color:var(--ink)}
.lp h5{font-size:17px;letter-spacing:-.02em}
.lp .s{color:var(--ink-3);font-size:12px;margin-top:2px}
.seg{display:flex;gap:6px;margin-top:12px}
.seg span{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--line-2);color:var(--ink-2)}
.seg span.on{background:var(--ink);color:#fff}
.card{margin-top:10px;border:1px solid var(--line);border-radius:14px;padding:11px 12px}
.card>b{font-size:12.5px}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 0;border-top:1px dashed var(--line);font-size:12.5px}
.card>.row:first-of-type{border-top:0}
.row a{text-decoration:underline;text-underline-offset:2px;color:var(--ink)}
.bar{height:7px;border-radius:7px;background:var(--line-2);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:var(--y);border-radius:7px}

.rpanel{background:#fff;color:var(--ink);border-radius:24px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.rpanel-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);font-size:13px;font-weight:700}
.rpanel-h span{margin-left:auto;color:var(--ink-3);font-weight:500}
.rpanel-b{padding:18px 20px 20px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpi{border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.kpi small{display:block;font-size:12px;color:var(--ink-3)}
.kpi b{display:block;font-size:22px;letter-spacing:-.03em;margin-top:2px}
.kpi em{font-style:normal;font-size:12px}
.chart{margin-top:14px;border:1px solid var(--line);border-radius:14px;padding:12px 14px 8px}
.chart-h{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700}
.chart-h span{color:var(--ink-3);font-weight:500}
.chart svg{width:100%;height:150px;display:block;margin-top:6px}
.lg{display:flex;gap:14px;font-size:12px;color:var(--ink-3);margin-top:4px}
.lg i{display:inline-block;width:12px;height:3px;border-radius:2px;margin-right:5px;vertical-align:middle}

/* 실제 기록 */
.ledger{margin-top:44px;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden}
.lr{display:grid;grid-template-columns:1.3fr .8fr 2.4fr .8fr;gap:16px;padding:16px 24px;border-top:1px solid var(--line-2);align-items:center;font-size:15px}
.lr:first-child{border-top:0;background:#fafafa;font-size:13px;color:var(--ink-3);font-weight:600}
.lr b{letter-spacing:-.02em}
.lr small{display:block;font-size:12.5px;color:var(--ink-3)}
.chs{display:flex;flex-wrap:wrap;gap:6px}
.chs span{font-size:12.5px;font-weight:600;padding:4px 9px;border-radius:7px;background:var(--line-2);color:var(--ink-2)}
.chs span.k{background:var(--y-2);color:var(--ink)}
.lr time{font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ledger-f{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#fafafa;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-3)}
.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.pr{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 24px}
.pr b{display:flex;gap:8px;align-items:center;font-size:16.5px}
.pr b svg{width:20px;height:20px;color:var(--y-d);stroke-width:2.4}
.pr p{margin-top:8px;font-size:14.5px;color:var(--ink-2);line-height:1.65}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:20px;border:1px solid var(--line);border-radius:20px;background:#fff}
.stats div{padding:22px 24px}
.stats div+div{border-left:1px solid var(--line)}
.stats strong{display:block;font-size:32px;font-weight:800;letter-spacing:-.04em}
.stats span{font-size:14px;color:var(--ink-2)}
.stats em{display:block;margin-top:6px;font-style:normal;font-size:11.5px;color:var(--ink-3)}

/* 패키지 */
.pk{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.pk a{display:block;border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--line);transition:transform .25s, box-shadow .25s}
.pk a:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.pk .img{aspect-ratio:3/2;background-size:cover;background-position:center}
.pk .tx{padding:18px 20px 20px}
.pk .tx-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pk .tx b{font-size:18px;letter-spacing:-.03em}
.pk .tx .p{font-size:20px;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.pk .tx p{margin-top:6px;font-size:14px;color:var(--ink-2);line-height:1.6}
.pk .off{display:inline-block;margin-top:10px;font-size:12px;font-weight:800;background:var(--y);padding:3px 8px;border-radius:6px}

/* 대표 + 시스템 */
.ceo{display:grid;grid-template-columns:420px 1fr;gap:64px;align-items:center}
.ceo-card{position:relative;border-radius:28px;overflow:hidden;background:var(--soft);aspect-ratio:4/5}
.ceo-card img{width:100%;height:100%;object-fit:cover}
.ceo-card .sig{position:absolute;left:20px;right:20px;bottom:20px;background:rgba(255,255,255,.94);border-radius:16px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center}
.ceo-card .sig b{font-size:17px}
.ceo-card .sig small{display:block;color:var(--ink-3);font-size:12.5px}
.ceo-card .sig img{height:20px;width:auto}
.quote{font-size:30px;line-height:1.5;font-weight:800;letter-spacing:-.04em}
.quote mark{padding:0 2px}
.ceo p.body{margin-top:20px;font-size:17px;line-height:1.85;color:var(--ink-2)}
.sys{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:30px}
.sys>div{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff}
.sys .ic{width:40px;height:40px;border-radius:12px;background:var(--y-2);display:flex;align-items:center;justify-content:center}
.sys b{display:block;font-size:15.5px}
.sys span{display:block;font-size:13.5px;color:var(--ink-3);margin-top:2px;line-height:1.5}

/* 질문 */
.faq{max-width:840px;margin:44px auto 0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 4px;font-weight:700;font-size:18px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";width:11px;height:11px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform .2s;margin-top:-6px;flex:0 0 auto}
.faq details[open] summary:after{transform:rotate(225deg);margin-top:6px}
.faq details p{padding:0 4px 22px;color:var(--ink-2);line-height:1.8}

/* 문의: 2단계 */
.cta{position:relative;overflow:hidden;border-radius:32px;padding:60px;background:var(--dark);color:#fff;display:grid;grid-template-columns:1fr 460px;gap:56px;align-items:center}
.cta:before{content:"";position:absolute;left:-180px;bottom:-220px;width:560px;height:560px;background:radial-gradient(circle,rgba(255,193,7,.22),rgba(255,193,7,0) 65%)}
.cta>*{position:relative}
.cta h2{color:#fff;margin-top:12px}
.cta .sub{color:#b4b7bd}
.cta .kicker{color:#d9dbe0}
.cta-alt{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.cta-alt a{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 18px;border-radius:13px;background:rgba(255,255,255,.08);font-weight:700;font-size:15px}
.cta-alt a.kk{background:var(--kakao);color:#3c1e1e}
.form{background:#fff;border-radius:24px;padding:26px;color:var(--ink)}
.steps{display:flex;gap:8px;font-size:13px;font-weight:700;color:var(--ink-3);margin-bottom:16px}
.steps span{display:flex;align-items:center;gap:6px}
.steps span i{width:20px;height:20px;border-radius:50%;background:var(--line-2);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:11px}
.steps span.on{color:var(--ink)}
.steps span.on i{background:var(--y)}
.form h4{font-size:19px;letter-spacing:-.03em}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.opts button{height:52px;border-radius:13px;border:1px solid var(--line);font-weight:700;font-size:15px;text-align:left;padding:0 16px;transition:border-color .15s, background .15s}
.opts button:hover{border-color:#cfd2d7}
.opts button.on{border-color:var(--ink);background:var(--y-3);box-shadow:inset 0 0 0 1px var(--ink)}
.form label{display:block;font-size:13.5px;font-weight:700;margin:14px 0 7px}
.form input{width:100%;height:50px;border:1px solid var(--line);border-radius:13px;padding:0 15px;font:inherit;font-size:15px}
.form input:focus{outline:2px solid var(--y);border-color:var(--ink)}
.check{display:flex;align-items:center;gap:8px;font-size:14px;margin-top:12px;font-weight:600}
.check input{width:18px;height:18px;accent-color:#111214}
.agree{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);margin-top:10px}
.agree input{width:18px;height:18px;accent-color:#111214}
.agree a{text-decoration:underline}
.form .btn{width:100%;margin-top:16px}
.step2{display:none}
.form.s2 .step1{display:none}
.form.s2 .step2{display:block}
.back{font-size:13px;color:var(--ink-3);text-decoration:underline;margin-top:12px;display:inline-block}

/* 다른 업종 · 푸터 */
.etc{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:28px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-3)}
.etc a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);color:var(--ink);font-weight:600}
footer{padding:36px 0 60px;color:var(--ink-3);font-size:14px;line-height:1.9;border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
footer b{color:var(--ink)}
footer img{height:24px;width:auto;margin-bottom:10px}


/* 첫 화면 진단 입력 */
.dx-bar{display:flex;align-items:center;gap:10px;max-width:560px;margin-top:30px;padding:8px 8px 8px 18px;background:#fff;border:2px solid var(--ink);border-radius:18px;box-shadow:0 14px 30px -18px rgba(17,18,20,.5)}
.dx-bar svg{color:var(--ink-3)}
.dx-bar input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:16.5px;height:48px;background:transparent}
.dx-bar .btn{height:50px;border-radius:12px}
.diag-note a{color:var(--ink);font-weight:700;margin-left:6px}

/* 진단 섹션 */
.dx{padding:110px 0;background:linear-gradient(180deg,#fff 0%,var(--y-3) 100%)}
.dx-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.dx-head .sub{margin-top:0}
.dx-box{margin-top:40px;background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--sh);padding:28px}
.dx-tools{display:flex;gap:8px;flex-wrap:wrap}
.dx-tools button{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--line);font-weight:700;font-size:14.5px;color:var(--ink-2)}
.dx-tools button svg{width:17px;height:17px}
.dx-tools button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.dx-bar.big{max-width:none;margin-top:16px}
.dx-eg{margin-top:12px;font-size:13.5px;color:var(--ink-3);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dx-eg button{font-size:13px;font-weight:700;color:var(--ink);background:var(--y-2);padding:5px 10px;border-radius:8px}
.dx-run{margin-top:24px;border:1px solid var(--line);border-radius:20px;padding:22px}
.dx-run-h{display:flex;justify-content:space-between;font-size:16px}
.dx-run-h span{font-weight:800}
.dx-prog{height:8px;border-radius:8px;background:var(--line-2);overflow:hidden;margin-top:12px}
.dx-prog i{display:block;height:100%;width:0;background:var(--y);border-radius:8px;transition:width .4s ease}
.dx-steps{list-style:none;margin-top:16px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.dx-steps li{font-size:14px;font-weight:700;color:var(--ink-3);padding:12px;border-radius:14px;background:var(--line-2);transition:background .3s,color .3s}
.dx-steps li span{display:block;font-size:12px;font-weight:500;margin-top:4px}
.dx-steps li.now{background:var(--y-2);color:var(--ink)}
.dx-steps li.done{background:var(--ink);color:#fff}
.dx-steps li.done span{color:#b4b7bd}

.dx-res{margin-top:24px}
.dx-top{display:grid;grid-template-columns:150px 1fr 300px;gap:28px;align-items:center;padding:24px;border-radius:22px;background:var(--soft)}
.score{position:relative;width:140px;height:140px}
.score svg{width:140px;height:140px}
.score #gauge{transition:stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1)}
.score div{position:absolute;inset:0;display:flex;align-items:baseline;justify-content:center;padding-top:44px;gap:2px}
.score strong{font-size:40px;font-weight:800;letter-spacing:-.04em}
.score span{font-size:14px;color:var(--ink-3)}
.grade{display:inline-block;font-size:13px;font-weight:800;background:var(--y);padding:4px 10px;border-radius:8px}
.sum h3{margin-top:10px;font-size:24px;letter-spacing:-.03em}
.sum p{margin-top:8px;color:var(--ink-2);line-height:1.7;font-size:15.5px}
.sum-meta{margin-top:10px;font-size:12.5px;color:var(--ink-3)}
.cats{display:flex;flex-direction:column;gap:10px}
.cats div{display:grid;grid-template-columns:76px 44px 1fr;gap:8px;align-items:center;font-size:13.5px}
.cats b{text-align:right;font-size:13px}
.cats i{height:8px;border-radius:8px;background:#e9e9eb;overflow:hidden}
.cats em{display:block;height:100%;width:0;background:var(--ink);border-radius:8px;transition:width 1s .3s ease}
.dx-res.show .cats em{width:var(--w)}
.dx-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;margin-top:16px}
.dx-side{display:flex;flex-direction:column;gap:16px}
.dx-card{border:1px solid var(--line);border-radius:20px;padding:20px 22px}
.dx-card h4{font-size:16.5px;display:flex;justify-content:space-between;align-items:baseline}
.dx-card h4 small{font-size:12.5px;color:var(--ink-3);font-weight:600}
.chk{list-style:none;margin-top:10px}
.chk li{display:grid;grid-template-columns:24px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--line-2)}
.chk li:first-child{border-top:0}
.chk li i{width:22px;height:22px;border-radius:50%;margin-top:1px;position:relative}
.chk li.ok i{background:#e8f6ee}
.chk li.ok i:after{content:"";position:absolute;left:7px;top:4px;width:6px;height:10px;border:solid var(--green);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.chk li.warn i{background:var(--y-2)}
.chk li.warn i:after{content:"!";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;color:var(--y-d);font-style:normal}
.chk li.bad i{background:#fdecec}
.chk li.bad i:after{content:"×";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;color:var(--red);font-style:normal}
.chk b{display:block;font-size:14.5px}
.chk span{display:block;font-size:13px;color:var(--ink-3);margin-top:1px}
.cmp{margin-top:12px;font-size:13.5px}
.cmp div{display:grid;grid-template-columns:40px 1.2fr 1fr .6fr .9fr;gap:6px;padding:9px 10px;border-radius:10px}
.cmp .h{color:var(--ink-3);font-size:12px;font-weight:600}
.cmp .me{background:var(--y-2);font-weight:800}
.todo{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.todo div{padding:14px;border-radius:14px;background:var(--soft)}
.todo b{display:block;font-size:15px}
.todo span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:3px}
.todo a{display:inline-block;margin-top:8px;font-size:13px;font-weight:800;border-bottom:2px solid var(--y)}
.dx-cta{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:16px;padding:22px 24px;border-radius:20px;background:var(--ink);color:#fff}
.dx-cta b{display:block;font-size:18px}
.dx-cta span{display:block;margin-top:6px;font-size:14px;color:#b4b7bd;line-height:1.6;max-width:600px}
.dx-cta form{display:flex;gap:8px;flex:0 0 auto}
.dx-cta input{width:190px;height:52px;border:0;border-radius:13px;padding:0 14px;font:inherit;font-size:15px}
.dx-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}
.dx-flow div{position:relative;padding:16px 18px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.dx-flow div:not(:last-child):after{content:"";position:absolute;right:-9px;top:50%;width:8px;height:8px;border-top:2px solid #c9ccd2;border-right:2px solid #c9ccd2;transform:translateY(-50%) rotate(45deg)}
.dx-flow b{display:block;font-size:15px}
.dx-flow span{font-size:13px;color:var(--ink-3)}
@media (max-width:1080px){
  .dx-head,.dx-grid{grid-template-columns:1fr}
  .dx-top{grid-template-columns:140px 1fr}
  .cats{grid-column:1/-1}
  .dx-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .dx{padding:72px 0}
  .dx-box{padding:16px;border-radius:22px}
  .dx-tools{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px}
  .dx-tools button{flex:0 0 auto}
  .dx-bar{padding-left:12px}
  .dx-bar .btn{padding:0 16px}
  .dx-bar input{font-size:15px}
  .dx-steps{grid-template-columns:1fr}
  .dx-top{grid-template-columns:1fr;justify-items:center;text-align:center;padding:20px}
  .cats{width:100%;text-align:left}
  .cmp div{grid-template-columns:30px 1.3fr 1fr .5fr .9fr;font-size:12.5px;padding:8px 6px}
  .dx-cta{flex-direction:column;align-items:stretch}
  .dx-cta form{flex-direction:column}
  .dx-cta input{width:100%}
  .dx-flow{grid-template-columns:1fr 1fr}
  .dx-flow div:after{display:none}
}

/* 등장: 한 번만 */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.float{animation:fl 6s ease-in-out infinite}
.float.b{animation-delay:-3s}
@keyframes fl{50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.track,.float{animation:none}}
.mbar{display:none}

@media (max-width:1080px){
  .menu,.client{display:none}
  .hero .wrap,.pane.on,.ceo{grid-template-columns:1fr}
  .stage{height:600px;max-width:460px;margin:0 auto;width:100%}
  .biz{grid-template-columns:1fr 1fr}
  .ceo-card{max-width:420px}
  .cta{grid-template-columns:1fr}
}
@media (max-width:720px){
  .wrap{width:calc(100% - 32px)}
  .tel{display:none}
  .top .wrap{height:62px}
  .logo img{height:24px}
  .hero{padding:34px 0 52px}
  .hero h1{font-size:36px;margin:16px 0 14px}
  .hero .lead{font-size:16px}
  .ctas{flex-direction:column}
  .proof{gap:0;justify-content:space-between}
  .proof strong{font-size:18px}
  .proof span{font-size:12px}
  .stage{height:560px;transform:scale(.92);transform-origin:top center}
  .p-map{left:50%;margin-left:-150px}
  .alim{left:-8px;top:330px;width:268px}
  .chip{display:none}
  .chip.keep{display:flex;right:-8px!important;top:110px!important}
  .track span{font-size:24px;padding:0 12px}
  .track span:after{margin-left:24px}
  .sec,.report{padding:76px 0}
  h2{font-size:29px}
  .sub{font-size:16px}
  .biz,.pk,.promise{grid-template-columns:1fr}
  .vs{grid-template-columns:1fr}
  .tabs{overflow-x:auto;flex-wrap:nowrap;margin-left:-16px;margin-right:-16px;padding:0 16px}
  .tabs button{flex:0 0 auto}
  .kakao-ui{width:100%}
  .k-card{width:calc(100% - 44px)}
  .lr{grid-template-columns:1fr auto;gap:8px 12px;padding:16px}
  .lr:first-child{display:none}
  .lr .chs{grid-column:1/-1}
  .lr>span:nth-child(2){display:none}
  .stats{grid-template-columns:1fr 1fr}
  .stats div:nth-child(3){border-left:0}
  .stats div:nth-child(n+3){border-top:1px solid var(--line)}
  .stats strong{font-size:24px}
  .quote{font-size:23px}
  .sys{grid-template-columns:1fr}
  .cta{padding:34px 18px;border-radius:24px}
  .form{padding:20px}
  .mbar{display:grid;grid-template-columns:52px 52px 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .mbar a{height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);font-weight:700}
  .mbar a.kk{background:var(--kakao);border-color:var(--kakao);color:#3c1e1e}
  .mbar a.go{background:var(--ink);border-color:var(--ink);color:#fff}
  footer{padding-bottom:110px}
  }

/* ---- 실제 페이지용 추가 ---- */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.fnb-tag{font-size:12px;font-weight:800;background:var(--ink);color:var(--y);padding:3px 8px;border-radius:6px;letter-spacing:.02em}
.bz{display:block}
a.bz.fr:hover{transform:translateY(-3px)}
.track .logo-item{display:inline-flex;align-items:center;padding:0 22px}
.track .logo-item img{height:40px;width:auto;filter:grayscale(1);opacity:.6;transition:filter .2s,opacity .2s}
.track .logo-item:hover img{filter:none;opacity:1}
.track .logo-item:after{display:none}
.dx-form{display:block}
.dx-kw{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.dx-kw label{font-size:14px;font-weight:700}
.dx-kw label span{font-weight:500;color:var(--ink-3)}
.dx-kw input{flex:1;min-width:200px;height:44px;border:1px solid var(--line);border-radius:12px;padding:0 14px;font:inherit;font-size:15px}
.dx-kw input:focus{outline:2px solid var(--y);border-color:var(--ink)}
.dx-what{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:16px;font-size:13px;color:var(--ink-3)}
.dx-what span{margin-right:4px}
.dx-what b{font-weight:600;color:var(--ink-2);background:var(--line-2);padding:4px 9px;border-radius:7px}
.dx-err{margin-top:16px;padding:14px 16px;border-radius:14px;background:#fdecec;color:#b42318;font-weight:600;font-size:14.5px}
.dx-cta form{flex-wrap:wrap;align-items:center;max-width:430px}
.agree-d{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#b4b7bd;width:100%;order:3}
.agree-d input{width:16px!important;height:16px!important;accent-color:#ffc107}
.agree-d a{color:#d9dbe0;text-decoration:underline}
.dx-done{font-weight:700;color:var(--y)}
.flash{margin-bottom:16px;padding:14px 18px;border-radius:14px;background:var(--y-2);font-weight:700}
.hq{background:#fff}
.hq-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.hq-list{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:16px}
.hq-list li{display:grid;grid-template-columns:24px 1fr;gap:12px}
.hq-list li svg{width:22px;height:22px;color:var(--y-d);stroke-width:2.4;margin-top:2px}
.hq-list b{display:block;font-size:17px}
.hq-list span{color:var(--ink-2);font-size:15px;line-height:1.65}
.hq-cta{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
.hq-note{margin-top:10px;font-size:13px;color:var(--ink-3)}
.hq-visual{position:relative}
.hq-card{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh);overflow:hidden}
.hq-card-h{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.hq-card-h b{font-size:16px}
.hq-card-h span{font-size:13px;color:var(--ink-3)}
.hq-row{display:grid;grid-template-columns:1fr 1.1fr 1fr .7fr;gap:8px;padding:13px 20px;border-top:1px solid var(--line-2);font-size:14px;align-items:center}
.hq-row.h{border-top:0;background:#fafafa;font-size:12.5px;color:var(--ink-3);font-weight:600}
.hq-row .src{font-size:12.5px;font-weight:700;background:var(--y-2);padding:3px 8px;border-radius:6px;justify-self:start}
.hq-row .st{font-size:12px;font-weight:700;padding:3px 8px;border-radius:6px;background:#eaf7ef;color:var(--green);justify-self:start}
.hq-row .st.w{background:#fdecec;color:var(--red)}
.hq-foot{display:grid;grid-template-columns:auto auto auto auto;gap:6px 14px;justify-content:start;align-items:baseline;padding:16px 20px;background:var(--soft);font-size:13px;color:var(--ink-3)}
.hq-foot b{font-size:18px;color:var(--ink)}
.hq-badge{position:absolute;right:-12px;bottom:-18px;display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:16px;padding:12px 16px;box-shadow:var(--sh);font-weight:700;font-size:14px}
.hq-badge img{height:18px;width:auto;background:#fff;border-radius:6px;padding:3px 5px}
footer a{color:inherit}
@media (max-width:1080px){.hq-grid{grid-template-columns:1fr}}
@media (max-width:720px){
  .hq-row{grid-template-columns:1fr 1fr;padding:12px 16px}
  .hq-row.h{display:none}
  .hq-foot{grid-template-columns:auto auto}
  .hq-badge{right:8px;bottom:-16px}
  .dx-kw{flex-direction:column;align-items:stretch}
  .dx-cta form{max-width:none}
}
@media (max-width:720px){.dx-cta form .btn{width:100%}}