/* 기프트애드 랜딩 — 목적은 상담 신청 수집.
   연회색 바탕 위에 흰 카드를 띄우는 구조. 데스크톱은 '늘린 모바일' 이 되면 안 되므로
   히어로에서 메시지와 상담 폼을 두 단으로 나란히 둔다 (첫 화면에 폼이 보여야 한다). */
:root{
  --bg:#fafbfd; --card:#fff; --dark:#15171d;
  --line:#e6e8ee; --line-2:#eef0f4;
  --ink:#15171d; --ink-2:#555a66; --ink-3:#8a8f9c;
  --brand:#ffb300; --brand-ink:#9a6a00; --brand-soft:#fff6e1; --brand-line:#ffe2a4;
  --kko:#fee500; --kko-ink:#191600;
  --r:18px; --r-sm:12px;
  --sh:0 1px 2px rgba(21,23,29,.03), 0 8px 24px -16px rgba(21,23,29,.14);
  --sh-lg:0 2px 8px rgba(21,23,29,.04), 0 30px 60px -28px rgba(21,23,29,.26);
  --dock:66px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:70px}
body{word-break:keep-all; overflow-wrap:break-word; 
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:15.5px; line-height:1.7; letter-spacing:-.022em;
  padding-bottom:calc(var(--dock) + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{margin:0; letter-spacing:-.048em; line-height:1.26; font-weight:800}
p{margin:0}
.wrap{max-width:1320px; margin:0 auto; padding:0 20px}
.ic{width:20px; height:20px; flex:0 0 20px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.ib{display:grid; place-items:center; width:38px; height:38px; border-radius:11px;
  background:var(--brand-soft); color:var(--brand-ink); margin-bottom:12px}

/* ── 헤더 ───────────────────────────────────────────── */
.bar{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid var(--line)}
.bar-in{display:flex; align-items:center; gap:28px; height:58px}
.logo{display:flex; align-items:center; gap:8px; text-decoration:none; flex:0 0 auto}
.logo img{width:auto; height:21px}
.logo b{font-size:15.5px; letter-spacing:-.045em}
.nav{display:none}
.bar-r{display:flex; align-items:center; gap:14px; margin-left:auto}
.bar-login{font-size:13.5px; font-weight:600; color:var(--ink-2); text-decoration:none}
.bar-cta{display:none}

/* ── 공통 ───────────────────────────────────────────── */
.sec{padding:58px 0; background:var(--bg)}
.sec.soft{background:#fff}
.sec.dark{background:var(--dark); color:#fff}
.head{margin-bottom:28px}
.kick{display:block; font-size:12px; font-weight:800; letter-spacing:.1em;
  color:var(--brand-ink); margin-bottom:10px}
.sec.dark .kick{color:var(--brand)}
h2{font-size:clamp(26px,7vw,34px); margin-bottom:14px}
h2 em,h1 em,h3 em{font-style:normal; color:var(--brand-ink)}
.sec.dark h2 em,.sec.dark h3 em{color:var(--brand)}
.lead{color:var(--ink-2); font-size:15.5px; line-height:1.8}
.sec.dark .lead{color:rgba(255,255,255,.6)}
.tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:16px}
.tags span{font-size:12px; font-weight:700; color:var(--ink-2); background:#fff;
  border:1px solid var(--line); border-radius:999px; padding:6px 13px}
.sec.soft .tags span{background:var(--bg)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px;
  width:100%; min-height:54px; padding:0 22px; border:0; border-radius:13px; cursor:pointer;
  font-family:inherit; font-size:16px; font-weight:800; letter-spacing:-.03em;
  text-decoration:none; transition:transform .06s ease, box-shadow .18s, filter .18s}
.btn:active{transform:translateY(1px)}
.btn-main{background:var(--dark); color:#fff; box-shadow:0 12px 26px -16px rgba(21,23,29,.9)}
.btn-main:hover{filter:brightness(1.18)}
.btn-line{background:#fff; color:var(--ink); border:1px solid var(--line)}
.btn-kko{background:var(--kko); color:var(--kko-ink); margin-top:10px}

/* ── 히어로 ─────────────────────────────────────────── */
.hero{position:relative; padding:34px 0 46px; overflow:hidden}
.hero:before{content:""; position:absolute; inset:-240px -30% auto; height:620px; z-index:0;
  background:radial-gradient(58% 64% at 50% 58%, rgba(255,179,0,.16), transparent 72%)}
.hero-in{position:relative; z-index:1}
.pill{display:inline-flex; align-items:center; gap:7px; background:#fff;
  border:1px solid var(--line); border-radius:999px; padding:7px 14px 7px 11px;
  font-size:12.5px; font-weight:700; color:var(--ink-2); margin-bottom:16px}
.pill .ic{width:15px; height:15px; flex-basis:15px; color:var(--brand-ink); stroke-width:2}
h1{font-size:clamp(29px,8.6vw,41px); margin-bottom:22px}
.hero-sub{font-size:12.5px; font-weight:800; letter-spacing:.02em;
  color:var(--brand-ink); margin-bottom:11px}

.perk{list-style:none; margin:0 0 20px; padding:0; display:grid; gap:10px;
  grid-template-columns:1fr 1fr}
.perk li{background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:15px 16px; display:grid; grid-template-columns:auto minmax(0,1fr);
  column-gap:12px; row-gap:2px; align-content:center}
.perk .ib{grid-row:1 / span 2; align-self:center;
  width:34px; height:34px; border-radius:10px; margin:0}
.perk .ib .ic{width:17px; height:17px; flex-basis:17px}
.perk b{display:block; font-size:14.5px; letter-spacing:-.035em; line-height:1.35}
/* .ib 도 span 이라 그냥 '.perk span' 으로 잡으면 아이콘 박스가 같이 걸린다
   (display:grid 와 색이 덮여 아이콘이 왼쪽 위로 몰렸었다) */
.perk li>span:not(.ib){display:block; font-size:12px;
  color:var(--ink-3); line-height:1.5}

.hero-act{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.hero-act .btn{width:auto; min-height:48px; font-size:14.5px}
.hero-tel{font-size:13px; color:var(--ink-3)}
.hero-tel a{font-weight:800; color:var(--ink-2); text-decoration:none}

/* ── 카드 · 폼 ──────────────────────────────────────── */
.card{background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:24px 20px; box-shadow:var(--sh-lg); max-width:560px; margin:28px auto 0}
.card-hd{margin-bottom:20px}
.card-hd h2{font-size:22px}
.card-hd p{margin-top:9px; font-size:13.5px; color:var(--ink-2); line-height:1.72}
.last-sec{background:var(--dark)}
.last-sec .card{margin-top:0}

.leadform .f{display:block; margin-bottom:15px}
.leadform .f>span{display:block; font-size:13px; font-weight:700; margin-bottom:7px}
.leadform .f>span i{font-style:normal; font-size:11px; font-weight:800; color:#d14836; margin-left:4px}
.leadform input[type=text],.leadform input[type=tel]{
  width:100%; height:50px; padding:0 15px; font-family:inherit; font-size:16px;
  border:1px solid var(--line); border-radius:12px; background:#fcfcfd; color:var(--ink);
  transition:border-color .15s, box-shadow .15s, background .15s}
.leadform input::placeholder{color:#b4b8c2}
.leadform input:focus{outline:0; background:#fff; border-color:var(--brand);
  box-shadow:0 0 0 3.5px rgba(255,179,0,.2)}
.leadform input[aria-invalid="true"]{border-color:#d14836}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{font-family:inherit; font-size:12.5px; font-weight:600; letter-spacing:-.025em;
  padding:9px 13px; border:1px solid var(--line); border-radius:999px;
  background:#fff; color:var(--ink-2); cursor:pointer; transition:all .14s}
.chip:hover{border-color:var(--brand-line)}
.chip.on{background:var(--brand-soft); border-color:var(--brand); color:#3d2a00; font-weight:800}
.agree{display:flex; align-items:center; gap:9px; margin:6px 0 2px; font-size:13px}
.agree input{width:18px; height:18px; accent-color:var(--brand); flex:0 0 18px}
.agree i{font-style:normal; font-size:11px; font-weight:800; color:#d14836}
.terms{margin:0 0 17px 27px}
.terms summary{font-size:12px; color:var(--ink-3); cursor:pointer}
.terms p{margin-top:7px; font-size:11.5px; line-height:1.7; color:var(--ink-3)}
.msg{margin-top:12px; font-size:13.5px; font-weight:700; min-height:1.3em; text-align:center}
.msg.ok{color:#17803d}
.msg.err{color:#d14836}

/* ── 체류시간 막대 ──────────────────────────────────── */


.two{display:grid; gap:12px; grid-auto-rows:1fr; align-content:center}
.tile{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px 20px}
.sec.soft .tile{background:var(--bg)}
.tile h3{font-size:18.5px; margin-bottom:10px}
.tile p{font-size:15px; color:var(--ink-2); line-height:1.8}

.split{display:grid; gap:22px; align-items:stretch}
.split>img{border-radius:var(--r); border:1px solid var(--line); box-shadow:var(--sh);
  width:100%; height:auto}
.ticks{list-style:none; margin:20px 0 0; padding:0}
.ticks li{position:relative; padding-left:27px; margin-bottom:12px;
  font-size:14.5px; color:var(--ink-2); line-height:1.7}
.ticks li:before{content:""; position:absolute; left:0; top:7px; width:15px; height:8px;
  border-left:2.6px solid var(--brand); border-bottom:2.6px solid var(--brand);
  transform:rotate(-45deg)}

/* ── 숫자 · 성장 ────────────────────────────────────── */

/* ── 광고 종류 ──────────────────────────────────────── */
.types{display:grid; gap:16px}
.types article{display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh)}
.t-body{padding:18px 19px 20px; display:flex; flex-direction:column; flex:1}
.t-tag{display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  font-size:11.5px; font-weight:800; color:var(--brand-ink);
  background:var(--brand-soft); border-radius:999px; padding:5px 11px 5px 9px; margin-bottom:11px}
.t-tag .ic{width:14px; height:14px; flex-basis:14px; stroke-width:2}
.types h3{font-size:19.5px; margin-bottom:10px}
.types p{font-size:15px; color:var(--ink-2); line-height:1.8; flex:1}
.types ul{list-style:none; margin:15px 0 0; padding:13px 0 0;
  border-top:1px solid var(--line-2); display:flex; flex-wrap:wrap; gap:6px}
.types li{font-size:11.5px; font-weight:700; color:var(--ink-2);
  background:var(--bg); border-radius:7px; padding:5px 10px}

/* ── 계산기 ─────────────────────────────────────────── */

/* ── 사례 ───────────────────────────────────────────── */

/* ── 단계 · 규격 ────────────────────────────────────── */
.steps{counter-reset:s; list-style:none; margin:0; padding:0}
.steps li{counter-increment:s; position:relative; padding:0 0 20px 42px;
  border-left:1px solid var(--line); margin-left:13px}
.steps li:last-child{border-left-color:transparent; padding-bottom:0}
.steps li:before{content:counter(s,decimal-leading-zero); position:absolute; left:-14px; top:-3px;
  width:28px; height:28px; border-radius:50%; background:var(--brand); color:#3d2a00;
  display:grid; place-items:center; font-size:11px; font-weight:900}
.steps b{display:block; font-size:16px; letter-spacing:-.04em}
.steps span{display:block; margin-top:4px; font-size:13.5px; color:var(--ink-2)}
.spec{margin-top:26px; background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r); padding:4px 18px}
.sec.soft .spec{background:#fff}
.spec>div{display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid var(--line-2)}
.spec>div:last-child{border-bottom:0}
.spec span{font-size:12.5px; color:var(--ink-3); flex:0 0 auto}
.spec b{font-size:13px; font-weight:700; text-align:right}

/* ── FAQ ────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; position:relative;
  padding:22px 40px 22px 0; font-size:17.5px; font-weight:700; line-height:1.55}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+"; position:absolute; right:2px; top:15px;
  font-size:22px; font-weight:400; color:var(--ink-3); line-height:1}
.faq details[open] summary:after{content:"\2212"}
.faq details p{margin:0; padding:0 40px 26px 0; font-size:15.5px;
  line-height:1.9; color:var(--ink-2)}

/* ── 푸터 ───────────────────────────────────────────── */
.foot{background:var(--dark); color:rgba(255,255,255,.6); padding:44px 0 30px; font-size:13px;
  border-top:1px solid rgba(255,255,255,.1)}
.foot-logo{width:auto; height:26px; margin-bottom:14px}
.foot-tag{font-size:13.5px; line-height:1.72; color:rgba(255,255,255,.82)}
.foot-info{margin:26px 0 0; display:grid; gap:11px}
.foot-info div{display:flex; gap:12px}
.foot-info dt{flex:0 0 74px; font-size:12px; color:rgba(255,255,255,.42)}
.foot-info dd{margin:0; font-size:13px}
.foot-info a{color:#fff; text-decoration:none}
.foot-bot{margin-top:26px; padding-top:17px; border-top:1px solid rgba(255,255,255,.12);
  font-size:11.5px; color:rgba(255,255,255,.4)}
.foot-bot a{color:rgba(255,255,255,.58)}

/* ── 플로팅 (데스크톱) · 하단 고정 바 (모바일) ──────── */
.float{display:none}
.dock{position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; gap:8px; align-items:center;
  height:calc(var(--dock) + env(safe-area-inset-bottom));
  padding:0 12px env(safe-area-inset-bottom);
  background:rgba(255,255,255,.95); backdrop-filter:blur(14px);
  border-top:1px solid var(--line); box-shadow:0 -8px 24px -18px rgba(21,23,29,.5)}
.dock a{display:flex; align-items:center; justify-content:center;
  text-decoration:none; font-weight:800; letter-spacing:-.03em}
.d-tel,.d-kko{flex:0 0 58px; height:50px; flex-direction:column; gap:2px;
  border-radius:13px; font-size:10.5px}
.d-tel{background:var(--bg); color:var(--ink-2); border:1px solid var(--line)}
.d-kko{background:var(--kko); color:var(--kko-ink)}
.dock .ic{width:18px; height:18px; flex-basis:18px}
.d-cta{flex:1; height:50px; border-radius:13px; background:var(--dark);
  color:#fff; font-size:16px}

/* ── 매체 소개 ──────────────────────────────────────── */
.media-grid{display:grid; gap:12px; margin-bottom:26px}
.mcard{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px 20px}
.sec.soft .mcard{background:var(--bg)}
.mcard h3{font-size:18.5px; margin-bottom:10px}
.mcard p{font-size:15px; color:var(--ink-2); line-height:1.8}
.spec-media{margin-top:0}

.award{display:grid; grid-template-columns:auto 1fr; gap:4px 13px; align-items:center;
  margin-top:22px; padding:18px 20px; background:var(--dark); color:#fff; border-radius:var(--r)}
.award .ic{grid-row:span 2; width:30px; height:30px; flex-basis:30px; color:var(--brand); stroke-width:1.5}
.award b{font-size:14.5px; letter-spacing:-.035em; line-height:1.45}
.award span{font-size:12px; color:rgba(255,255,255,.55); line-height:1.6}

/* ── 기기 목업 — 테두리는 CSS, 화면은 자르지 않는다 ─── */
.tab-badge{position:absolute; left:-6px; top:-11px; z-index:1;
  display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px;
  background:var(--brand); color:#3d2a00; font-size:12px; font-weight:800;
  box-shadow:0 10px 22px -10px rgba(21,23,29,.6)}
.tab-badge .ic{width:14px; height:14px; flex-basis:14px; stroke-width:2.2}


.dgrid{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.dgrid li{background:#fff; padding:17px 18px}
.sec.soft .dgrid li{background:var(--bg)}
.dgrid b{display:block; font-size:14.5px; letter-spacing:-.035em}
.dgrid span{display:block; margin-top:4px; font-size:12.5px; color:var(--ink-3); line-height:1.6}

/* ── 브랜드 로고 월 ─────────────────────────────────── */

/* ══ 데스크톱 ═══════════════════════════════════════ */
@media (min-width:980px){
  body{font-size:16.5px; padding-bottom:0}
  .wrap{padding:0 40px}
  .bar-in{height:68px}
  .nav{display:flex; gap:26px}
  .nav a{font-size:14.5px; font-weight:600; color:var(--ink-2); text-decoration:none;
    transition:color .15s}
  .nav a:hover{color:var(--ink)}
  .bar-cta{display:inline-flex; align-items:center; height:40px; padding:0 18px;
    border-radius:11px; background:var(--dark); color:#fff; font-size:14px;
    font-weight:800; text-decoration:none}

  /* 히어로 — 왼쪽 메시지 / 오른쪽 상담 폼. 폼이 첫 화면에 보여야 한다 */
  .hero{padding:58px 0 76px}
  .hero:before{inset:-340px -10% auto; height:900px}
  .hero-in{display:grid; grid-template-columns:minmax(0,560px) minmax(0,430px);
    gap:56px; align-items:start; justify-content:center}
  h1{font-size:46px; margin-bottom:26px}
  .perk{grid-template-columns:1fr 1fr; gap:12px; margin-bottom:24px}
  .perk li{padding:17px 19px; column-gap:14px}
  .perk b{font-size:16px}
  .perk li>span:not(.ib){font-size:12.5px}
  .hero-r .card{margin:0; max-width:none; padding:28px 26px}
  .hero-r .card-hd h2{font-size:21px}

  .sec{padding:116px 0}
  .head{margin:0 auto 54px; text-align:center}
  .head .lead{margin-inline:auto; max-width:48em}
  .head .tags{justify-content:center}
  h2{font-size:44px; margin-bottom:18px; letter-spacing:-.045em}
  .lead{font-size:19px; line-height:1.72}


  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px}
  .split.rev>img{order:2}
  .two{gap:18px; grid-template-columns:1fr 1fr}
  .tile{padding:26px 24px}


  .types{grid-template-columns:repeat(3,1fr); gap:22px}



  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin:0}
  .steps li{border-left:0; border-top:2px solid var(--line); padding:26px 0 0; margin:0}
  .steps li:last-child{border-top-color:var(--line)}
  .steps li:before{left:0; top:-15px}
  .spec{margin-inline:auto; display:grid;
    grid-template-columns:repeat(3,1fr); padding:6px 26px; gap:0 32px}
  .spec>div{border-bottom:0}

  .faq{margin:0 auto}
  .last-sec .card-hd h2{font-size:26px}


  .foot{padding:58px 0 32px}
  .foot-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,580px); gap:48px}
  .foot-info{margin:0; grid-template-columns:repeat(3,1fr); gap:20px}
  .foot-info div{display:block}
  .foot-info dt{margin-bottom:5px}

  .media-grid{grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:32px}
  .mcard{padding:26px 24px}
  .award{grid-template-columns:auto 1fr auto; align-items:center; padding:22px 28px; margin-top:26px}
  .award b{font-size:16px}
  .dgrid{grid-template-columns:repeat(4,1fr); margin-top:26px; margin-inline:auto}
  .dgrid li{padding:20px 20px 22px}

  .dock{display:none}
  .float{display:flex; flex-direction:column; gap:9px; position:fixed;
    right:22px; bottom:24px; z-index:45}
  .float a{display:flex; align-items:center; gap:8px; height:46px; padding:0 17px;
    border-radius:999px; text-decoration:none; font-size:13.5px; font-weight:800;
    box-shadow:var(--sh-lg); transition:transform .12s}
  .float a:hover{transform:translateY(-2px)}
  .f-kko{background:var(--kko); color:var(--kko-ink)}
  .f-tel{background:var(--dark); color:#fff}
  .float .ic{width:17px; height:17px; flex-basis:17px}
}


@property --p{syntax:"<number>"; inherits:false; initial-value:0}

/* ══ 태블릿 화면 — 스크린샷 대신 글자와 도형으로 그린다 ══ */
.dev{position:relative}
.dev-scr{container-type:inline-size; aspect-ratio:16/10; border:9px solid #1d2027; border-radius:14px;
  overflow:hidden; background:#fff; box-shadow:0 20px 40px -22px rgba(21,23,29,.55)}
.dev:after{content:""; display:block; height:9px; margin:0 32%;
  border-radius:0 0 9px 9px; background:linear-gradient(#d9dce3,#b9bdc7)}
/* 어두운 바탕에서는 이 받침이 흰 막대처럼 떠 보인다 */
.live .dev:after,.sec.dark .dev:after{background:linear-gradient(#3b3e47,#23252c)}
.tabwrap{position:relative}
.tab-badge{position:absolute; left:-6px; top:-11px; z-index:1;
  display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px;
  background:var(--brand); color:#3d2a00; font-size:12px; font-weight:800;
  box-shadow:0 10px 22px -10px rgba(21,23,29,.6)}
.tab-badge .ic{width:14px; height:14px; flex-basis:14px; stroke-width:2.2}

/* ── 주문 화면 ─────────────────────────────────────── */

/* ── 광고 화면 3종 ─────────────────────────────────── */

@media (min-width:980px){
  .dev-scr{border-width:12px; border-radius:18px}
  .dev:after{height:11px}
}

/* ══ 광고주 화면 — 스크린샷이 아니라 글자와 도형으로 그린다 ══
   그래서 어떤 해상도에서도 선명하고, 화면에 들어오면 숫자와 막대가 움직인다. */
.ui{--nv:#1d2a5c; --nv2:#16224d; --ui-line:#e9ecf3;
  display:grid; grid-template-columns:118px minmax(0,1fr);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:#fff; box-shadow:var(--sh-lg); font-size:12px; line-height:1.4}

.ui-side{background:var(--nv); color:#fff; padding:15px 13px 20px}
.ui-logo{width:78px; height:auto; margin-bottom:17px}
.ui-side-t{display:block; font-size:11.5px; font-weight:800; margin-bottom:9px}
.ui-side ul{list-style:none; margin:0; padding:0}
.ui-side li{padding:6px 8px; border-radius:7px; font-size:11px;
  color:rgba(255,255,255,.5); margin-bottom:1px}
.ui-side li.on{background:rgba(255,255,255,.12); color:#fff; font-weight:700}

.ui-row{display:grid; gap:10px; grid-template-columns:minmax(0,1fr)}
.ui-row2{display:grid; gap:10px; grid-template-columns:minmax(0,1fr)}
.ui-card{background:#fff; border:1px solid var(--ui-line); border-radius:11px; padding:12px 13px}
.ui-hd{display:flex; align-items:baseline; gap:7px; margin-bottom:9px}
.ui-hd b{font-size:12.5px; letter-spacing:-.03em}
.ui-hd span{font-size:10.5px; color:var(--ink-3)}
.ui-hd2{display:block; font-size:10.5px; font-weight:800; color:var(--ink-3);
  letter-spacing:.04em; margin-bottom:9px}
.ui b{letter-spacing:-.04em}

/* 송출 장치 수 / LIVE */
.ui-main{padding:13px; background:#f7f8fb; display:grid; gap:10px; min-width:0; position:relative}
.ui-live{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.ui-live span{display:block; font-size:10.5px; color:var(--ink-3); margin-bottom:3px}
.ui-live b{font-size:22px; font-weight:800; color:var(--nv)}
.ui-live b.ui-on{color:#16a34a}
.ui-dot{display:inline-flex; align-items:center; gap:5px}
.ui-dot:before{content:""; width:7px; height:7px; border-radius:50%; background:#16a34a}
.mo .ui-dot:before{animation:blip 1.6s ease-in-out infinite}
@keyframes blip{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.55)} 55%{box-shadow:0 0 0 6px rgba(22,163,74,0)}}

/* 24시간 그래프 — 막대가 바닥에서 자란다 */
.ui-plot{height:92px; display:flex; align-items:flex-end;
  border-bottom:1px solid var(--ui-line); padding-bottom:1px}
.ui-bars{display:flex; align-items:flex-end; gap:2px; width:100%; height:100%}
.ui-bars i{flex:1; min-width:0; border-radius:2px 2px 0 0; height:0;
  background:linear-gradient(180deg,#ffc83d,#ffb300); transition:height .7s cubic-bezier(.2,.7,.3,1)}
.ui-bars i.hi{background:linear-gradient(180deg,#34488f,var(--nv))}
.ui-legend{display:flex; align-items:center; gap:5px; margin-top:8px;
  font-size:10px; color:var(--ink-3)}
.ui-legend i{width:7px; height:7px; border-radius:50%; margin-left:7px}
.ui-legend i:first-child{margin-left:0}
.l1{background:#ffb300} .l2{background:#4f7df0} .l3{background:#1d2a5c}

/* 최근 24시간 숫자 */
.ui-kpi>div{display:flex; align-items:baseline; justify-content:space-between; gap:9px;
  padding:7px 0; border-bottom:1px solid #f1f3f8}
.ui-kpi>div:last-child{border-bottom:0; padding-bottom:0}
.ui-kpi span{font-size:11px; color:var(--ink-3)}
.ui-kpi b{font-size:14px; font-weight:800; color:var(--nv)}

/* 집행률 도넛 */
.ui-donut{display:grid; justify-items:center}
.ui-ring{position:relative; --p:0; width:92px; height:92px; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--nv) calc(var(--p)*1%), #e9ecf3 0);
  transition:--p 1.1s ease}
.ui-ring:before{content:""; position:absolute; width:68px; height:68px;
  border-radius:50%; background:#fff}
.ui-ring b{position:relative; font-size:20px; font-weight:900; color:var(--nv)}
.ui-ring b small{font-size:.55em}
.ui-sub{margin-top:9px; font-size:10.5px; color:var(--ink-3); text-align:center}

/* 지역별 송출 막대 */
.ui-geo-r{display:grid; grid-template-columns:72px minmax(0,1fr) 44px;
  align-items:center; gap:9px; padding:5px 0}
.ui-geo-r span{font-size:11px; color:var(--ink-2)}
.ui-geo-r i{height:7px; border-radius:999px; background:#eef0f6; overflow:hidden}
.ui-geo-r em{display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,#4f7df0,#9db6f7); transition:width .9s cubic-bezier(.2,.7,.3,1)}
.ui-geo-r b{font-size:11.5px; font-weight:800; text-align:right; color:var(--nv)}

/* 들어오기 전엔 0 에서 시작한다 */
.mo .ui:not(.in) .ui-bars i,.mo .ui:not(.in) .ui-geo-r em{height:0; width:0}
.ui.in .ui-geo-r em{width:var(--w)}

@media (min-width:980px){
  .ui{grid-template-columns:150px minmax(0,1fr); font-size:13px; margin-inline:auto}
  .ui-logo{width:94px}
  .ui-row{grid-template-columns:200px minmax(0,1fr) 190px}
  .ui-row2{grid-template-columns:230px minmax(0,1fr)}
  .ui-live{grid-template-columns:1fr; align-content:start}
  .ui-plot{height:128px}
  .ui-live b{font-size:26px}
  .ui-card{padding:14px 16px}
}

.ui-note{margin-top:11px; font-size:11.5px; color:var(--ink-3); text-align:center}

/* ── 브랜드 — 글자로 (로고 원본이 84x13px 이라 키우면 뭉갠다) ─ */
@media (min-width:980px){
}

/* ══ 주문 → 광고 전환 플로우 ════════════════════════
   화면 한 장으로는 흐름이 설명되지 않는다. 네 단계가 차례로 돌아간다. */
.flow{display:grid; gap:20px; max-width:var(--cw); margin-inline:auto}
.flow .dev-scr{position:relative}
.fs{position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .45s ease, visibility .45s}
.fs.on{opacity:1; visibility:visible}

.flow-rail{counter-reset:f; list-style:none; margin:0; padding:0;
  display:grid; gap:9px}
.flow-rail li{counter-increment:f; position:relative; cursor:pointer;
  padding:13px 15px 15px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:#fff; transition:border-color .2s, background .2s}
.sec.soft .flow-rail li{background:var(--bg)}
.flow-rail li:before{content:counter(f,decimal-leading-zero);
  font-size:10.5px; font-weight:900; color:var(--ink-3); letter-spacing:.06em}
.flow-rail b{display:block; margin-top:4px; font-size:14.5px; letter-spacing:-.035em}
.flow-rail span{display:block; margin-top:3px; font-size:12.5px; color:var(--ink-3); line-height:1.55}
.flow-rail li.on{border-color:var(--brand); background:var(--brand-soft)}
.flow-rail li.on:before{color:var(--brand-ink)}
/* 아래 가는 줄이 차오르면서 다음 단계로 넘어가는 걸 알린다 */
.flow-rail i{position:absolute; left:0; right:0; bottom:0; height:2px;
  border-radius:0 0 var(--r-sm) var(--r-sm); overflow:hidden; background:transparent}
.flow-rail em{display:block; height:100%; width:0; background:var(--brand)}
.mo .flow-rail li.on em{animation:tick 4.6s linear forwards}
@keyframes tick{from{width:0} to{width:100%}}

/* ══ 광고주 화면 — 메뉴 네 개가 실제로 전환된다 ══════ */
.ui-side li{cursor:pointer}
.ui-side li:focus-visible{outline:2px solid var(--brand); outline-offset:1px}
.ui-main>.up{display:none}
.ui-main>.up.on{display:block}
.mo .ui-main>.up.on{animation:fade .4s ease both}
@keyframes fade{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}

/* 송출 매장 표 */
.ui-tbl{font-size:11px}
.ui-th,.ui-tr{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) 42px 62px;
  gap:8px; align-items:center; padding:7px 0; border-bottom:1px solid #f1f3f8}
.ui-th{font-weight:800; color:var(--ink-3); font-size:10px}
.ui-tr:last-child{border-bottom:0}
.ui-tr span:nth-child(2){color:var(--ink-3)}
.ui-badge{display:inline-flex; align-items:center; gap:4px; color:#16a34a; font-weight:700}
.ui-badge i{width:5px; height:5px; border-radius:50%; background:#16a34a}
.mo .ui-main>.up.on .ui-badge i{animation:blip 1.6s ease-in-out infinite}

/* 보고서 */
.ui-row3{display:grid; gap:10px; grid-template-columns:minmax(0,1fr)}
.ui-rep{display:grid; align-content:start; gap:10px}
.ui.in .ui-sex em{width:var(--m)}
.ui-rep2{padding:4px 0 2px}
.ui-rep2 b{display:block; font-size:30px; font-weight:900; letter-spacing:-.05em;
  line-height:1; color:var(--nv)}
.ui-rep2 span{display:block; margin-top:6px; font-size:10.5px; color:var(--ink-3)}
.ui-pdf{display:inline-block; align-self:start; border:1px solid var(--ui-line);
  border-radius:8px; padding:7px 11px; font-size:10.5px; color:var(--ink-2)}

/* ══ 광고 소재 — 색 바탕에 글자만 얹으면 광고로 안 보인다 ══ */

.cr-top{display:flex; justify-content:space-between; align-items:center; font-size:1em}
.cr-step{font-weight:900; letter-spacing:.14em; opacity:.8}
.cr-time{background:rgba(0,0,0,.28); border-radius:999px; padding:.25em .8em; font-weight:800}


/* 제품 박스 — 사진 대신 형태만 */


/* 광고 소재 — 실제 송출 영상을 그대로 재생하고 그 위에 태블릿 UI 를 얹는다 */
.cr{position:relative; height:100%; background:#0b0d12;
  font-size:clamp(6px,1.5cqw,10px); color:#fff}
.cr-v{display:block; width:100%; height:100%; object-fit:cover}
.cr-top{position:absolute; left:4%; right:4%; top:5%;
  display:flex; justify-content:space-between; align-items:center; font-size:1em}
.cr-step{font-weight:900; letter-spacing:.14em; text-shadow:0 1px 4px rgba(0,0,0,.6)}
.cr-time{background:rgba(0,0,0,.45); border-radius:999px; padding:.25em .8em; font-weight:800}
.ad-tag{position:absolute; left:4%; top:5%; background:rgba(0,0,0,.4); color:#fff;
  border-radius:4px; padding:2px 7px; font-size:.92em; font-weight:700}
.ad-prog{position:absolute; left:5.5%; right:5.5%; bottom:12%; height:3px;
  border-radius:999px; background:rgba(255,255,255,.22); overflow:hidden}
.ad-prog i{display:block; height:100%; width:38%; border-radius:999px; background:var(--brand)}
.mo .on .ad-prog i{animation:fill 4.6s linear infinite}
@keyframes fill{from{width:4%} to{width:100%}}
.ad-foot{position:absolute; left:0; right:0; bottom:0; padding:2.2% 0; text-align:center;
  background:rgba(0,0,0,.42); font-size:.95em; font-weight:600}
.ad-done{position:absolute; left:50%; top:7%; translate:-50% 0; z-index:1; text-align:center;
  background:#fff; color:var(--ink); border-radius:12px; padding:.7em 1.3em;
  font-size:1.05em; font-weight:800; box-shadow:0 1em 2.4em -1em rgba(0,0,0,.5)}
.ad-done i{display:inline-block; width:.7em; height:.7em; border-radius:50%;
  background:#16a34a; margin-right:.45em}
.ad-done em{display:block; margin-top:.3em; font-style:normal; font-size:.82em;
  font-weight:600; color:var(--ink-3)}
.ad-tag-p{background:rgba(0,0,0,.55)}
.ad-toast{position:absolute; left:50%; top:6%; translate:-50% 0; z-index:1;
  display:inline-flex; align-items:center; gap:.45em; background:#fff; color:var(--ink);
  border-radius:999px; padding:.5em 1.1em; font-size:1em; font-weight:800;
  box-shadow:0 .8em 2em -.8em rgba(0,0,0,.45)}
.ad-toast i{width:.7em; height:.7em; border-radius:50%; background:#16a34a}
.ad-mission{position:absolute; left:50%; bottom:22%; translate:-50% 0;
  display:inline-flex; align-items:center; gap:.5em; background:#fff; color:var(--ink);
  border-radius:999px; padding:.55em 1.2em; font-size:1.05em; font-weight:800;
  box-shadow:0 1em 2.4em -1em rgba(0,0,0,.55)}
.ad-mission i{width:.75em; height:.75em; border-radius:50%; background:#e8372c}
.mo .on .ad-mission i{animation:blip2 1.4s ease-out infinite}
@keyframes blip2{0%{box-shadow:0 0 0 0 rgba(232,55,44,.6)} 70%,100%{box-shadow:0 0 0 .9em rgba(232,55,44,0)}}
.ad-gift{position:absolute; right:5%; bottom:6%; display:inline-flex; align-items:center; gap:.4em;
  background:var(--brand); color:#3d2a00; border-radius:999px; padding:.4em .9em;
  font-size:.98em; font-weight:800}
.ad-gift .ic{width:1.1em; height:1.1em; flex-basis:1.1em; stroke-width:2.4}

/* ══ 광고주 화면 — 빈칸 없이 채운다 ══════════════════ */
.ui-acc{margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.12)}
.ui-acc span{display:block; font-size:10px; color:rgba(255,255,255,.45)}
.ui-acc b{display:block; margin-top:3px; font-size:10.5px; font-weight:700}
.ui-side{display:flex; flex-direction:column}

.ui-rate{margin-top:auto; padding-top:10px}
.ui-rate i{display:block; height:6px; border-radius:999px; background:#eef0f6; overflow:hidden}
.ui-rate em{display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,#16a34a,#5ed08a); transition:width .9s cubic-bezier(.2,.7,.3,1)}
.ui.in .ui-rate em{width:var(--w)}
.ui-rate span{display:block; margin-top:5px; font-size:10px; color:var(--ink-3)}
.ui-live{display:grid; align-content:start}

/* 그래프에 눈금과 시간축 */
.ui-plot{position:relative}
.ui-grid{position:absolute; inset:0; display:grid; grid-template-rows:repeat(4,1fr)}
.ui-grid i{border-top:1px solid #f2f4f9}
.ui-bars{position:relative}
.ui-ax{display:flex; justify-content:space-between; margin-top:5px;
  font-size:9.5px; color:var(--ink-3)}

/* 요약 네 칸 */
.ui-sum{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--ui-line);
  border:1px solid var(--ui-line); border-radius:11px; overflow:hidden; margin-bottom:10px}
.ui-sum>div{background:#fff; padding:10px 13px}
.ui-sum span{display:block; font-size:10px; color:var(--ink-3)}
.ui-sum b{display:block; margin-top:3px; font-size:14px; font-weight:800; color:var(--nv)}
.ui-sum i{display:block; height:4px; margin-top:7px; border-radius:999px;
  background:#eef0f6; overflow:hidden}
.ui-sum em{display:block; height:100%; width:0; border-radius:999px; background:#4f7df0;
  transition:width .9s cubic-bezier(.2,.7,.3,1)}
.ui.in .ui-sum em{width:var(--w)}

/* 보고서 누적 곡선 */
.ui-tr2{margin-top:2px}
.ui-area{height:46px; margin-top:6px; border-radius:7px; overflow:hidden;
  background:#f5f7fc; display:flex; align-items:flex-end}
.ui-area i{display:block; width:0; height:100%;
  background:linear-gradient(180deg,rgba(79,125,240,.18),rgba(79,125,240,.55));
  clip-path:polygon(0 100%,0 86%,18% 72%,38% 56%,58% 40%,78% 22%,100% 4%,100% 100%);
  transition:width 1.1s cubic-bezier(.2,.7,.3,1)}
.ui.in .ui-area i{width:100%}

@media (min-width:980px){
  .ui-sum{grid-template-columns:repeat(4,1fr)}
  .ui-sum>div{padding:13px 16px}
  .ui-sum b{font-size:16px}
  .ui-area{height:62px}
}

.ui-plot-s{height:64px}
/* 탭마다 높이가 달라 넘길 때 화면이 출렁인다 — 가장 큰 칸에 맞춰 둔다 */
.ui-main{min-height:300px}
@media (min-width:980px){ .ui-main{min-height:394px} .ui-plot-s{height:84px} }

/* ══ 보상품 미션 — 현장 사진 네 장으로 흐름을 보여준다 ══ */
.msteps{counter-reset:m; list-style:none; margin:0 0 26px; padding:0;
  display:grid; gap:14px; max-width:var(--cw); margin-inline:auto}
.msteps li{position:relative}
.msteps figure{margin:0 0 11px; border-radius:var(--r-sm); overflow:hidden;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12)}
.msteps img{width:100%; height:auto; display:block; aspect-ratio:16/10; object-fit:cover}
.ms-n{display:inline-block; font-size:10.5px; font-weight:900; letter-spacing:.1em;
  color:var(--brand)}
.msteps b{display:block; margin-top:3px; font-size:16px; letter-spacing:-.04em}
.ms-d{display:block; margin-top:4px; font-size:12.5px; line-height:1.6;
  color:rgba(255,255,255,.58)}

.mfoot{display:grid; gap:16px; padding-top:24px; max-width:var(--cw); margin-inline:auto;
  border-top:1px solid rgba(255,255,255,.14)}
.mfoot>div:first-child b{display:block; font-size:clamp(30px,8vw,42px); font-weight:900;
  letter-spacing:-.05em; line-height:1}
.mfoot>div:first-child span{display:block; margin-top:5px; font-size:12.5px;
  color:rgba(255,255,255,.55)}
.mpat{display:grid; grid-template-columns:auto 1fr; gap:2px 12px; align-items:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-sm); padding:14px 16px}
.mpat .ic{grid-row:span 2; width:26px; height:26px; flex-basis:26px; color:var(--brand)}
.mpat b{font-size:13.5px; letter-spacing:-.03em}
.mpat span{font-size:11.5px; color:rgba(255,255,255,.55)}
.mfoot p{font-size:13.5px; line-height:1.75; color:rgba(255,255,255,.62)}

/* ══ 타겟팅 + 매체 지도 ═══════════════════════════ */
.tsplit{display:grid; gap:18px; max-width:var(--cw); margin-inline:auto}
.chips2{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px;
  align-content:start}
.chips2 li{background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:9px 15px; font-size:13px; font-weight:700; color:var(--ink-2);
  transition:border-color .18s, color .18s}
.sec.soft .chips2 li{background:var(--bg)}
.chips2 li:hover{border-color:var(--brand); color:var(--ink)}


/* ══ 이용자 인사이트 ═════════════════════════════ */
.ins{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  max-width:var(--cw); margin-inline:auto}
.ins>div{background:#fff; padding:20px 18px}
.sec.soft .ins>div{background:var(--bg)}
.ins b{display:block; font-size:clamp(28px,7.5vw,38px); font-weight:900;
  letter-spacing:-.055em; line-height:1; color:var(--ink)}
.ins b .num{font-variant-numeric:tabular-nums}
.ins-k{display:block; margin-top:9px; font-size:13px; font-weight:800; letter-spacing:-.03em}
.ins-d{display:block; margin-top:4px; font-size:11.5px; line-height:1.6; color:var(--ink-3)}
.ins-note{max-width:var(--cw); margin:16px auto 0; font-size:12.5px;
  line-height:1.75; color:var(--ink-3)}

/* ══ 업종별 ═══════════════════════════════════════ */
.inds{display:grid; gap:12px; max-width:var(--cw); margin-inline:auto}
.inds article{background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:22px 20px; display:flex; flex-direction:column}
.sec.soft .inds article{background:var(--bg)}
.inds b{display:block; font-size:18.5px; letter-spacing:-.04em; margin-bottom:10px}
.inds p{font-size:15px; line-height:1.8; color:var(--ink-2); flex:1}
.ind-who{display:block; margin-top:14px; padding-top:12px; font-size:11.5px;
  font-weight:700; color:var(--brand-ink); border-top:1px solid var(--line-2)}

/* ══ QR · 알림톡 ══════════════════════════════════ */
.acts{display:grid; gap:12px; max-width:var(--cw); margin-inline:auto}
.acts article{background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:22px 20px; display:flex; flex-direction:column}
.sec.soft .acts article{background:var(--bg)}
.acts b{display:block; font-size:18.5px; letter-spacing:-.04em; margin-bottom:10px}
.acts p{font-size:15px; line-height:1.8; color:var(--ink-2); flex:1}
.acts p em{font-style:normal; font-weight:800; color:var(--ink)}
.acts ul{list-style:none; margin:14px 0 0; padding:12px 0 0; display:flex;
  flex-wrap:wrap; gap:6px; border-top:1px solid var(--line-2)}
.acts li{font-size:11.5px; font-weight:700; color:var(--ink-2);
  background:var(--bg); border-radius:7px; padding:5px 10px}
.sec.soft .acts li{background:#fff}

/* ══ 요금 — 권역별 ════════════════════════════════ */
.tiers{display:grid; gap:12px; max-width:var(--cw); margin-inline:auto}
.tiers article{position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:22px 20px}
.sec.soft .tiers article{background:var(--bg)}
.tiers .best{background:var(--dark); border-color:var(--dark); color:#fff}
.t-best{position:absolute; right:18px; top:18px; background:var(--brand); color:#3d2a00;
  border-radius:6px; padding:3px 9px; font-size:10.5px; font-weight:900; letter-spacing:.08em}
.tiers b{display:block; font-size:19px; letter-spacing:-.04em}
.t-area{display:block; margin-top:4px; font-size:12px; color:var(--ink-3)}
.best .t-area{color:rgba(255,255,255,.55)}
.tiers strong{display:block; margin:14px 0 4px; font-size:clamp(32px,8.5vw,42px);
  font-weight:900; letter-spacing:-.055em; line-height:1}
.best strong{color:var(--brand)}
.tiers strong small{font-size:.33em; font-weight:700; letter-spacing:-.02em; margin-left:4px}
.tiers dl{margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line-2)}
.best dl{border-top-color:rgba(255,255,255,.16)}
.tiers dl>div{display:flex; justify-content:space-between; gap:12px; padding:7px 0;
  font-size:12.5px}
.tiers dt{color:var(--ink-3)}
.best dt{color:rgba(255,255,255,.5)}
.tiers dd{margin:0; font-weight:800; letter-spacing:-.02em}
.t-per{color:var(--brand-ink)}
.best .t-per{color:var(--brand)}
.tier-note{max-width:var(--cw); margin:16px auto 0; font-size:11.5px;
  line-height:1.7; color:var(--ink-3)}
.tier-cta{max-width:320px; margin:18px auto 0; display:flex}

@media (min-width:980px){
  .msteps{grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:34px}
  .mfoot{grid-template-columns:auto auto minmax(0,1fr); gap:28px; align-items:center;
    padding-top:30px}
  .tsplit{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; align-items:center}
  .ins{grid-template-columns:repeat(4,1fr)}
  .ins>div{padding:26px 24px}
  .inds,.acts,.tiers{grid-template-columns:repeat(3,1fr); gap:18px}
  .tiers{grid-template-columns:repeat(4,1fr)}
  .inds{grid-template-columns:repeat(3,1fr)}
  .inds article,.acts article,.tiers article{padding:26px 24px}
}

.scr-shot{width:100%; height:100%; object-fit:cover; display:block}
.act-qr{padding:0 !important; overflow:hidden}
.act-qr>img{width:100%; height:auto; display:block; border-bottom:1px solid var(--line)}
.act-qr .ib{margin:20px 20px 12px}
.act-qr b,.act-qr p,.act-qr ul{margin-left:20px; margin-right:20px}
.act-qr ul{margin-bottom:20px}
/* 매체 지도 — 실제 화면을 얹는다 (가짜 핀은 오히려 싸구려로 보였다) */
.mapcard{display:block; overflow:hidden; text-decoration:none; background:var(--dark);
  color:#fff; border-radius:var(--r); box-shadow:var(--sh);
  transition:translate .2s ease, box-shadow .2s ease}
.mapcard:hover{translate:0 -3px; box-shadow:var(--sh-lg)}
.mapcard>img{width:100%; height:auto; display:block; aspect-ratio:16/10; object-fit:cover;
  object-position:center 42%; border-bottom:1px solid rgba(255,255,255,.1)}
.map-t{padding:20px 22px 22px}
.mapcard .kick{color:var(--brand)}
.mapcard b{display:block; font-size:clamp(18px,4.6vw,21px); letter-spacing:-.045em; line-height:1.32}
.map-d{display:block; margin-top:9px; font-size:12.5px; line-height:1.7; color:rgba(255,255,255,.6)}
.map-go{display:inline-block; margin-top:15px; background:var(--brand); color:#3d2a00;
  border-radius:999px; padding:9px 17px; font-size:13.5px; font-weight:800}

/* 자주 묻는 질문이 좁아 답변이 답답했다 — 넓은 칸 폭으로 */
.faq{max-width:var(--cw)}

/* 마지막 상담 폼이 너무 작았다 — 여기까지 내려온 사람은 신청할 사람이다 */
.last-sec .card{max-width:680px; padding:30px 26px}
/* AI 시뮬레이터 체험 띠 — 상담 전에 직접 돌려보게 한다 */
.simband{display:grid; gap:7px; text-decoration:none; margin-top:20px;
  background:var(--dark); color:#fff; border-radius:var(--r); padding:26px 24px;
  max-width:var(--cw); margin-inline:auto; transition:translate .2s ease, box-shadow .2s ease}
.simband:hover{translate:0 -3px; box-shadow:var(--sh-lg)}
.sim-k{font-size:12px; font-weight:800; letter-spacing:.1em; color:var(--brand)}
.simband b{font-size:clamp(20px,5vw,26px); letter-spacing:-.045em; line-height:1.3}
.sim-d{font-size:14px; line-height:1.72; color:rgba(255,255,255,.62); max-width:46em}
.sim-go{justify-self:start; margin-top:8px; background:var(--brand); color:#3d2a00;
  border-radius:999px; padding:11px 20px; font-size:14.5px; font-weight:800}

/* 타겟팅 — 제목을 왼쪽 칸으로 넣어 좌우 균형을 맞춘다 */
.head-l{text-align:left !important; max-width:none !important; margin:0 0 24px !important}
.head-l .lead{margin-inline:0 !important}
.t-left{display:grid; align-content:start}

/* 플로우와 아래 타일이 붙어 겹쳐 보였다 */
.flow{margin-bottom:26px}
/* 세 칸 모두 같은 크기의 그림 자리를 두고, 상황만 다르게 그린다 */

/* 엘리베이터 — 문 사이 좁은 세로 화면 */

/* 온라인 영상 — 건너뛰기 버튼이 바로 보인다 */

/* 테이블오더 — 실제 송출 화면 */

@media (min-width:980px){ .vs-art{height:184px; margin-bottom:20px} }
.vs figure{margin:0 0 16px; border-radius:12px; overflow:hidden; background:#eceef3}
.vs img{width:100%; height:auto; display:block; aspect-ratio:16/10; object-fit:cover}
/* 우리 칸만 또렷하게 — 앞 둘은 한 톤 죽인다 */
.vs>div:not(.on) img{filter:saturate(.35) brightness(.96)}
@media (min-width:980px){ .vs figure{margin-bottom:20px} }
/* 체류시간 비교 — 숫자 크기로 차이를 보여 준다 */
.vs{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; max-width:var(--cw); margin:0 auto 30px}
.vs>div{background:#fff; padding:16px 16px 22px; text-align:center}
.sec.soft .vs>div{background:var(--bg)}
.vs span{display:block; font-size:13px; font-weight:700; color:var(--ink-3)}
.vs b{display:block; margin:10px 0 6px; font-size:clamp(32px,9vw,40px); font-weight:900;
  letter-spacing:-.055em; line-height:1; color:#b9bec9}
.vs em{display:block; font-style:normal; font-size:12.5px; color:var(--ink-3)}
.vs .on{background:var(--brand-soft)}
.sec.soft .vs .on{background:var(--brand-soft)}
.vs .on span{color:var(--brand-ink)}
.vs .on b{font-size:clamp(44px,13vw,64px); color:#3d2a00}
.vs .on em{color:#6b4c00; font-weight:700}
@media (min-width:980px){
  .vs{grid-template-columns:repeat(3,1fr); margin-bottom:40px}
  .vs>div{padding:20px 22px 32px}
}
/* ══ 폭 통일 ════════════════════════════════════════
   섹션마다 740/880/1000/1060 으로 제각각이던 걸 두 가지로 줄인다.
   --cw: 그림·표·카드가 들어가는 넓은 칸 / --cn: 읽는 글. */
:root{--cw:1240px; --cn:860px}
.head{max-width:var(--cn)}

@media (min-width:980px){
  .flow{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:34px; align-items:center}
  .flow-rail{align-self:center}
  .ui-row3{grid-template-columns:260px minmax(0,1fr)}
  .ui-tbl{font-size:12px}
  .ui-th,.ui-tr{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) 54px 74px; padding:9px 0}
}

/* ── PC 하단 빠른 상담 바 ─────────────────────────
   히어로 폼을 지나친 뒤부터 마지막 폼이 보이기 전까지만 뜬다.
   모바일은 이미 하단 고정 바가 있어 띄우지 않는다. */
.qbar{display:none}
@media (min-width:980px){
  .qbar{display:block; position:fixed; left:0; right:0; bottom:0; z-index:48;
    background:rgba(255,255,255,.97); backdrop-filter:saturate(1.6) blur(14px);
    border-top:1px solid var(--line); box-shadow:0 -10px 30px -22px rgba(21,23,29,.55)}
  .qbar[hidden]{display:none}
  .mo .qbar{animation:qup .3s cubic-bezier(.2,.7,.2,1) both}
  @keyframes qup{from{transform:translateY(100%)} to{transform:none}}
  .qbar-in{display:flex; align-items:center; gap:20px; padding-block:14px}
  .qbar p{margin:0; font-size:15px; letter-spacing:-.03em}
  .qbar p b{font-weight:800}
  .qbar p span{margin-left:8px; color:var(--ink-3); font-size:13.5px}
  .qbar-f{display:flex; align-items:center; gap:10px; margin-left:auto}
  .qbar-f input{width:210px; height:48px; padding:0 15px; font-family:inherit;
    font-size:15px; border:1px solid var(--line); border-radius:12px;
    background:#fcfcfd; color:var(--ink); transition:border-color .15s, box-shadow .15s}
  .qbar-f input::placeholder{color:#b4b8c2}
  .qbar-f input:focus{outline:0; background:#fff; border-color:var(--brand);
    box-shadow:0 0 0 3.5px rgba(255,179,0,.2)}
  .qbar-f input[aria-invalid="true"]{border-color:#d14836}
  .qbar-f .btn{width:auto; min-height:48px; font-size:15px; padding:0 24px}
  .qbar-x{flex:0 0 auto; width:34px; height:34px; border:0; border-radius:10px;
    background:transparent; color:var(--ink-3); font-size:21px; line-height:1;
    cursor:pointer; transition:background .15s, color .15s}
  .qbar-x:hover{background:var(--bg); color:var(--ink)}
  /* 바가 떠 있는 동안 플로팅 버튼을 위로 올린다 */
  body.has-qbar .float{bottom:100px}
}
/* ══ 모바일 — 세로로 쌓으면 14화면이라 옆으로 민다 ══════ */
@media (max-width:979px){
  .head{margin-bottom:22px}

  /* 좌우 스와이프. 화면 가장자리까지 흘러야 더 있다는 게 보인다 */
  .swipe{display:flex !important; grid-template-columns:none !important;
    gap:11px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    margin-inline:-20px; padding:2px 20px 4px; scroll-padding-inline:20px;
    scrollbar-width:none}
  .swipe::-webkit-scrollbar{display:none}
  .swipe>*{flex:0 0 82%; min-width:0; scroll-snap-align:start}
  .swipe>*:last-child{margin-right:20px}   /* 마지막 칸도 끝까지 붙게 */
  .two.swipe>*{flex-basis:88%}

  /* 넘길 수 있다는 표시 — 첫 스와이프 뒤 JS 가 뗀다 */
  .dots{display:flex; justify-content:center; gap:6px; margin-top:14px}
  .dots i{width:6px; height:6px; border-radius:50%; background:var(--line);
    transition:width .25s ease, background .25s ease}
  .dots i.on{width:18px; background:var(--brand)}
  .sec.dark .dots i{background:rgba(255,255,255,.25)}
  .sec.dark .dots i.on{background:var(--brand)}
  @keyframes nudge{0%,100%{transform:translateX(0)} 55%{transform:translateX(5px)}}
  .hint{display:flex; align-items:center; justify-content:center; gap:5px;
    margin-top:11px; font-size:11.5px; font-weight:700; color:var(--ink-3);
    transition:opacity .3s}
  .hint b{animation:nudge 1.5s ease-in-out infinite; font-weight:700}
  .hint.off{opacity:0; pointer-events:none}

  /* 광고주 화면 — 세로로 풀면 809px 이라 사이드바를 윗줄로 눕힌다 */
  .ui{grid-template-columns:minmax(0,1fr)}
  .ui-side{display:flex; align-items:center; gap:10px; padding:10px 13px}
  .ui-logo{width:68px; margin:0}
  .ui-side-t{margin:0; font-size:11px; color:rgba(255,255,255,.55)}
  .ui-side{display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 10px;
    align-items:center; padding:10px 12px}
  .ui-side ul{grid-column:1/-1; display:flex; gap:5px; overflow-x:auto;
    scrollbar-width:none; margin-top:2px}
  .ui-side ul::-webkit-scrollbar{display:none}
  .ui-side li{flex:0 0 auto; padding:6px 11px; font-size:10.5px; margin:0}
  .ui-acc{display:none}
  .ui-kpi{display:grid; grid-template-columns:1fr 1fr; gap:0 12px}
  .ui-kpi>div{border-bottom:1px solid #f1f3f8 !important; padding-bottom:7px !important}
  .ui-row2{grid-template-columns:118px minmax(0,1fr)}
  .ui-ring{width:78px; height:78px}
  .ui-ring:before{width:58px; height:58px}
  .ui-ring b{font-size:17px}
  .ui-geo-r{grid-template-columns:58px minmax(0,1fr) 38px; gap:7px}

  /* 광고주 화면 — 둘씩 묶으려 했지만 짝이 될 칸이 전부 1/-1 이라
     옆자리가 늘 비어 있었다. 한 줄에 하나씩 두고 카드 안을 눕힌다 */
  .ui-main{min-height:0}
  .ui-row,.ui-row3{grid-template-columns:1fr}
  /* 네 줄로 쌓이면 길다 — 전체폭을 쓰는 김에 둘씩 */
  .ui-kpi{grid-template-columns:1fr 1fr; column-gap:16px}
  .ui-kpi>.ui-hd2{grid-column:1/-1}
  .ui-kpi>div:nth-last-child(2){border-bottom:0; padding-bottom:0}
  /* 고리만 가운데 있으면 양옆이 빈다 — 왼쪽에 눕히고 설명을 옆에 세운다 */
  .ui-donut{grid-template-columns:auto minmax(0,1fr); column-gap:15px;
    align-items:center; justify-items:start}
  .ui-donut>.ui-hd2{grid-column:1/-1}
  .ui-donut .ui-sub{margin-top:0; text-align:left}
  /* 다섯 칸을 335px 에 밀어 넣으면 '일반음식/점' 으로 뭉갠다 */
  .ui-th>span:nth-child(3),.ui-tr>span:nth-child(3){display:none}
  .ui-th,.ui-tr{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 40px 58px}
  .ui-donut .ui-ring{width:72px; height:72px}
  .ui-donut .ui-ring:before{width:54px; height:54px}
  .ui-donut .ui-ring b{font-size:16px}

  /* 아이콘이 위에 있으면 카드가 아래로만 길어진다. 히어로 혜택 카드처럼
     아이콘을 왼쪽에 두고 제목과 한 줄에 세운다 — 카드마다 40px 씩 줄어든다. */
  .mcard,.tile,.acts article{display:grid; grid-template-columns:auto minmax(0,1fr);
    column-gap:12px; row-gap:7px; align-items:start}
  .mcard .ib,.tile .ib,.acts .ib{margin:0; width:34px; height:34px; border-radius:10px}
  .mcard h3,.tile h3,.acts b{align-self:center; margin:0}
  .mcard p,.tile p,.acts p,.acts ul{grid-column:2}
  .acts ul{margin-top:10px; padding-top:10px}

  /* QR 카드는 사진이 머리에 붙어 있어 격자에서 빠진다 */
  .act-qr>img{grid-column:1/-1; margin:-18px -17px 14px; width:calc(100% + 34px);
    max-width:none; border-radius:0}
  .act-qr{padding:18px 17px !important}
  .act-qr .ib,.act-qr b,.act-qr p,.act-qr ul{margin-left:0; margin-right:0}

  /* 세로로 내리다 보면 옆으로 숨은 내용을 못 본다. 스와이프는 "여러 개를 견주는"
     구간에만 남기고(비교·단계·상품·업종·요금), 읽는 카드는 그냥 쌓는다. */
  .media-grid{gap:10px}
  .mcard{padding:18px 17px}
  .mcard h3{font-size:17px}
  .mcard p{font-size:14px; line-height:1.72}
  .two{gap:10px}
  .tile{padding:18px 17px}
  .tile h3{font-size:17px}
  .tile p{font-size:14px; line-height:1.72}

  /* 섹션끼리 너무 붙어 숨 쉴 틈이 없었다 */
  .sec{padding:56px 0}
  .head{margin-bottom:26px}
  /* 혜택 카드는 아이콘이 왼쪽이라 2단이면 글자 자리가 82px 밖에 안 남는다 */
  .perk{grid-template-columns:1fr}
  .perk li{padding:13px 15px}
  /* 미션 네 장을 세로로 쌓으면 1,600px — 옆으로 민다 */
  .msteps.swipe>*{flex-basis:72%}
  /* 태블릿 화면 안 오버레이 글자가 5~6px 까지 줄어 읽히지도 않는다 — 큰 것만 남긴다 */
  .cr-top,.ad-tag,.ad-foot,.ad-done em{display:none}
  .ad-done{font-size:9px; padding:.55em 1em}
  .ad-mission,.ad-gift{font-size:9px}
  /* 비교 세 칸을 세로로 쌓으면 900px — 옆으로 민다 */
  .vs.swipe{border:0; background:none; border-radius:0; margin-bottom:24px}
  .vs.swipe>*{flex-basis:76%; border:1px solid var(--line); border-radius:var(--r)}
  /* 플로우 단계 네 줄은 두 칸씩 — 세로로 쌓으면 450px 이 그냥 간다 */
  .flow-rail{grid-template-columns:1fr 1fr}
  .flow-rail li{padding:11px 13px 13px}
  .flow-rail b{font-size:13.5px}
  .flow-rail span{font-size:11.5px}
  .msteps img{aspect-ratio:4/3}
  .tiers.swipe>*{flex-basis:76%}
  /* 집행률·지역은 결과분석 탭에 또 있다 — 모바일 첫 칸에선 뺀다 */
  .up[data-panel="0"] .ui-row3{display:none}

  /* 브랜드 25개를 세로로 쌓으면 13줄 — 두 줄로 눕혀 옆으로 민다 */

  /* 성과 항목은 네 줄이면 길다 — 두 칸씩 */
  .dgrid{grid-template-columns:1fr 1fr}

  /* 브랜드 로고 — 아홉 줄이던 걸 두 줄로 흘려보낸다 */
  @keyframes slide{to{transform:translateX(-50%)}}
}


/* ══ 움직임 ═════════════════════════════════════════
   landing.js 가 <html> 에 .mo 를 붙일 때만 숨겼다가 보여 준다.
   JS 가 꺼져 있거나 '움직임 줄이기' 를 쓰는 사용자는 처음부터 전부 보인다. */
.bar{transition:box-shadow .25s ease, background .25s ease}
.bar.scrolled{box-shadow:0 1px 22px -8px rgba(21,23,29,.22)}

/* 히어로 — 스크롤을 기다리지 않고 바로 올라온다 */
@keyframes rise{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
.mo .hero-l>*{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.mo .hero-l>:nth-child(2){animation-delay:.07s}
.mo .hero-l>:nth-child(3){animation-delay:.13s}
.mo .hero-l>:nth-child(4){animation-delay:.19s}
.mo .hero-l>:nth-child(5){animation-delay:.27s}
.mo .hero-r{animation:rise .9s cubic-bezier(.2,.7,.2,1) .24s both}
.mo .hero:before{animation:rise 1.4s ease both}

/* 하나씩 등장 */
.mo [data-mo]{opacity:0;
  transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1)}
.mo [data-mo=up]{transform:translateY(26px)}
.mo [data-mo=left]{transform:translateX(-44px)}
.mo [data-mo=right]{transform:translateX(44px)}
.mo [data-mo=zoom]{transform:translateY(28px) scale(.965)}
.mo [data-mo].in{opacity:1; transform:none}
/* 모바일은 폭이 꽉 차 있어 옆에서 들여보내면 가로 스크롤이 생긴다 */
@media (max-width:979px){
  .mo [data-mo=left],.mo [data-mo=right]{transform:translateY(26px)}
}

/* 묶음 — 자식이 차례로. 등장 뒤 hover 는 바로 먹어야 하므로 지연은 앞 두 속성만 준다 */
.mo [data-mo-group]>*{opacity:0; transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1),
             translate .2s ease, box-shadow .2s ease, border-color .2s ease;
  transition-delay:calc(var(--i,0) * 80ms), calc(var(--i,0) * 80ms), 0s, 0s, 0s}
.mo [data-mo-group].in>*{opacity:1; transform:none}

/* 체류시간 막대 — 줄이 들어온 뒤 차오른다 (칸 너비는 인라인 값 그대로 쓴다) */

/* 펼친 FAQ 답변 */
@keyframes faqp{from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:none}}
.mo .faq details[open] p{animation:faqp .3s ease both}
.faq summary{transition:color .15s}
.faq summary:hover{color:var(--brand-ink)}
.faq summary:after{transition:transform .2s ease, color .15s}
.faq details[open] summary:after{transform:rotate(180deg); color:var(--brand-ink)}

/* 계산기 숫자가 바뀔 때 */
@keyframes bump{50%{transform:scale(1.05)}}
.bump{animation:bump .24s ease}

/* 손가락이 아닌 마우스에서만 들어올린다 (transform 은 등장이 쓰므로 translate 로 분리) */
@media (hover:hover){
  .types article,.tile,.camps figure,.perk li,.stats>div{
    transition:translate .2s ease, box-shadow .2s ease, border-color .2s ease}
  .types article:hover,.tile:hover{translate:0 -4px; box-shadow:var(--sh-lg); border-color:var(--brand-line)}
  .perk li:hover{border-color:var(--brand-line)}
  .btn-main:hover,.bar-cta:hover,.d-cta:hover{translate:0 -1px}
  .bar-cta,.d-cta{transition:translate .15s ease, filter .15s}
  .bar-cta:hover,.d-cta:hover{filter:brightness(1.18)}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
  [data-mo],[data-mo-group]>*{opacity:1 !important; transform:none !important}
  /* 흐르던 소재 띠가 멈춰 버리므로 손으로 밀어 볼 수 있게 한다.
     .awall{overflow:hidden} 이 이 블록보다 아래에 있어 !important 가 필요하다 */
  .awall{overflow-x:auto !important}
}

/* 연락처 형식 오류 — 칸 바로 밑에 붙여야 어디가 틀렸는지 보인다 */
.f-err{display:block; margin-top:6px; font-size:12px; font-style:normal;
  font-weight:700; color:#d93b3b}
/* hidden 속성이 주는 display:none 은 브라우저 기본값이라 위 display:block 에 덮인다.
   그래서 아무것도 안 쳤는데 빨간 오류 문구가 늘 떠 있었다. */
.f-err[hidden]{display:none}
input[aria-invalid]{border-color:#d93b3b}

/* ══ B 안 : 집행 사례 · 광고 기준 · 푸터 회사정보 ══════════ */
.works{display:grid; gap:12px; max-width:var(--cw); margin-inline:auto}
.works article{background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:22px 20px; display:flex; flex-direction:column}
.sec.soft .works article{background:var(--bg)}
.w-cat{display:inline-block; align-self:start; background:var(--bg); border-radius:7px;
  padding:4px 10px; font-size:11px; font-weight:800; color:var(--brand-ink)}
.sec.soft .w-cat{background:#fff}
.works b{display:block; margin:12px 0 5px; font-size:16.5px; letter-spacing:-.04em;
  line-height:1.45}
.w-how{display:block; font-size:12px; font-weight:700; color:var(--ink-3)}
.works p{margin-top:11px; padding-top:11px; font-size:13.5px; line-height:1.78;
  color:var(--ink-2); border-top:1px solid var(--line-2); flex:1}
.work-cta{max-width:380px; margin:20px auto 0; display:flex}

.pol{display:grid; gap:12px; max-width:var(--cw); margin-inline:auto}
.pol article{background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:22px 20px}
.sec.soft .pol article{background:var(--bg)}
.pol b{display:block; margin-bottom:12px; font-size:16px; letter-spacing:-.04em}
.pol ul{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.pol li{position:relative; padding-left:19px; font-size:13px; line-height:1.65;
  color:var(--ink-2)}
.pol li:before{position:absolute; left:0; top:0; content:'✕'; font-weight:800;
  color:#d93b3b}
.pol-ok li:before{content:'✓'; color:#1f9d55}

/* 정가 → 할인가. 근거 없는 가격보다 깎인 가격이 설득이 된다 */
.t-was{display:block; margin-top:7px; font-size:11.5px; font-weight:700;
  color:rgba(255,255,255,.55)}
.src{display:block; margin-top:7px; font-size:11px; color:var(--ink-3)}
.bar-kit{font-size:13.5px; font-weight:700; color:var(--ink-2); padding:9px 14px;
  border:1px solid var(--line); border-radius:999px; transition:border-color .18s}
.bar-kit:hover{border-color:var(--brand)}
.foot-addr dd{line-height:1.6}

@media (min-width:980px){
  .works{grid-template-columns:repeat(2,1fr); gap:18px}
  .works article{padding:26px 24px}
  .pol{grid-template-columns:1fr 1fr; gap:18px}
  .pol article{padding:26px 24px}
  .pol ul{grid-template-columns:1fr 1fr; gap:8px 18px}
}
@media (max-width:979px){
  .bar-kit{display:none}
}

/* 약관 · 방침 문서 */
.doc{max-width:var(--cn); margin-inline:auto}
.doc h1{font-size:clamp(26px,6.5vw,34px); letter-spacing:-.045em; margin-bottom:14px}
.doc h2{margin:28px 0 8px; font-size:16px; letter-spacing:-.035em}
.doc p{font-size:14px; line-height:1.85; color:var(--ink-2)}
.doc-d{color:var(--ink-3); font-size:13px}

/* ══ B 안 v2 : 히어로 숫자 띠 · 사례 안 업종 · 비교 세 번째 줄 ══ */
.hstat{background:var(--dark); color:#fff; padding:22px 0}
.hstat-in{display:grid; grid-template-columns:1fr 1fr; gap:18px 12px}
.hstat b{display:block; font-size:clamp(26px,7vw,34px); font-weight:900;
  letter-spacing:-.055em; line-height:1}
.hstat b .num{font-variant-numeric:tabular-nums; color:var(--brand)}
.hstat>div>span,.hstat-in>div>span{display:block; margin-top:6px; font-size:12px;
  color:rgba(255,255,255,.6)}
.hstat-src{grid-column:1/-1; font-size:11px; color:rgba(255,255,255,.4)}

.vs-x{display:block; margin-top:7px; font-size:11.5px; font-style:normal;
  color:var(--ink-3)}

.w-ind{max-width:var(--cw); margin:22px auto 0; padding-top:22px;
  border-top:1px solid var(--line)}
.w-ind>b{display:block; font-size:17px; letter-spacing:-.04em}
.w-ind>p{margin-top:7px; font-size:13.5px; line-height:1.75; color:var(--ink-2)}
.w-ind ul{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px}
.w-ind li{background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:14px 16px}
.sec.soft .w-ind li{background:var(--bg)}
.w-ind li b{display:block; font-size:14px; letter-spacing:-.035em}
.w-ind li span{display:block; margin-top:5px; font-size:12.5px; line-height:1.7;
  color:var(--ink-2)}
.w-ind li em{display:block; margin-top:7px; font-size:11px; font-style:normal;
  font-weight:700; color:var(--brand-ink)}
.w-cta{display:grid; gap:10px; max-width:var(--cw); margin:20px auto 0}

@media (min-width:980px){
  .hstat{padding:28px 0}
  .hstat-in{grid-template-columns:repeat(4,1fr); gap:0}
  .hstat-in>div{padding-left:26px; border-left:1px solid rgba(255,255,255,.14)}
  .hstat-in>div:first-child{padding-left:0; border-left:0}
  .hstat-src{margin-top:16px}
  .w-ind ul{grid-template-columns:repeat(3,1fr); gap:14px}
  .w-cta{grid-template-columns:auto auto; justify-content:center; gap:14px}
}

/* ══ C 안 : 히어로 안의 숫자 넷 ══════════════════════
   띠로 따로 빼 뒀더니 히어로 왼쪽이 통째로 비었다. 안으로 들인다. */
/* 칸마다 왼쪽 선만 긋다 보니 글자 길이에 따라 선 높이가 제각각이라
   네 칸이 흩어져 보였다 — 하나의 격자로 묶는다 */
.hero-n{list-style:none; margin:22px 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:14px;
  overflow:hidden}
.hero-n li{background:#fffdf7; padding:16px 18px}
.hero-n b{display:block; font-size:clamp(24px,6.5vw,31px); font-weight:900;
  letter-spacing:-.055em; line-height:1; color:var(--ink)}
.hero-n b .num{font-variant-numeric:tabular-nums}
.hero-n li>span{display:block; margin-top:6px; font-size:12px; color:var(--ink-3)}
.hero-src{margin-top:14px; font-size:11px; color:var(--ink-3)}
.hero-l .hero-sub{margin-top:14px; font-size:14.5px; line-height:1.75;
  color:var(--ink-2); max-width:27em}

/* 지도가 세로로 너무 길었다 — 가로로 눕힌다 */
.map-img{aspect-ratio:16/9; object-fit:cover; object-position:center 42%}
@media (min-width:980px){
  .hero-n{margin-top:26px}
  .hero-n li{padding:20px 22px}
  .map-img{aspect-ratio:16/10}
}

/* 수상 · 특허는 띠로 흘려보내면 안 읽힌다 — 히어로 왼쪽 빈자리에 세운다 */
.hero-cred{list-style:none; margin:18px 0 0; padding:16px 0 0; display:grid; gap:9px;
  border-top:1px solid var(--line)}
.hero-cred li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:9px;
  align-items:center; font-size:12.5px; line-height:1.5; color:var(--ink-2)}
.hero-cred .ic{width:17px; height:17px; color:var(--brand-ink)}


/* ══ 실제로 나간 광고 — 두 줄로 흘려보낸다 ═══════════
   글 카드는 안 읽힌다. 소재를 그대로 보여주는 쪽이 증거가 된다. */
.awall{overflow:hidden; margin-top:4px;
  mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent)}
.awall-t{display:flex; gap:14px; width:max-content; padding:8px 0}
.mo .awall-t{animation:awalk 64s linear infinite}
.mo .awall-b .awall-t{animation-direction:reverse; animation-duration:72s}
.awall:hover .awall-t{animation-play-state:paused}
@keyframes awalk{to{transform:translateX(-50%)}}
.awall figure{flex:0 0 auto; width:208px; margin:0}
.awall img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:12px;
  background:var(--line-2); border:1px solid var(--line);
  box-shadow:0 10px 24px -18px rgba(21,23,29,.5)}
.awall figcaption{margin-top:8px; font-size:11.5px; font-weight:700;
  color:var(--ink-3); text-align:center; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
#work .head{text-align:center; margin-inline:auto}
#work .w-cta{margin-top:26px}

@media (min-width:980px){
  .awall figure{width:268px}
  .awall-t{gap:18px}
}

/* 광고주 화면이 1,345 × 422 = 3.2:1 로 옆으로 늘어나 띠처럼 보였다.
   실제 관리자 화면은 노트북 비율이다 — 폭을 묶고 높이를 준다 */
@media (min-width:980px){
  .ui{max-width:1060px; margin-inline:auto}
  .ui-main{min-height:530px}
  .ui-main>.up.on{display:grid; align-content:start; gap:12px; height:100%}
  .ui-row3{align-items:stretch}
  .ui-tbl{font-size:12.5px}
  .ui-tr,.ui-th{padding:11px 2px}
}

/* 문의 카드 — C · D 안이 같이 쓴다 (D 전용 파일에 있어 C 에서 스타일이 빠졌다) */
/* ── 문의 : 어두운 카드 안에 폼 ── */
.dapply{background:var(--dark); border-radius:26px; padding:34px 24px; color:#fff;
  display:grid; gap:26px}
.dapply .dkick{color:var(--brand)}
.dapply h2{margin-top:10px; font-size:clamp(24px,6.4vw,36px); line-height:1.3;
  letter-spacing:-.05em; font-weight:900; color:#fff}
.dapply-l>p{margin-top:14px; font-size:14px; line-height:1.8;
  color:rgba(255,255,255,.66); max-width:30em}
.dapply-c{margin:22px 0 0; padding-top:18px; display:grid; gap:9px;
  border-top:1px solid rgba(255,255,255,.14)}
.dapply-c>div{display:grid; grid-template-columns:86px minmax(0,1fr); gap:12px;
  font-size:13.5px}
.dapply-c dt{color:rgba(255,255,255,.5)}
.dapply-c dd{margin:0; font-weight:700}
.dapply-r{background:#fff; border-radius:20px; padding:24px 20px; color:var(--ink)}

@media (min-width:980px){
  .dapply{grid-template-columns:minmax(0,1fr) minmax(0,.9fr); padding:56px 52px;
    gap:48px; align-items:center}
  .dapply-r{padding:30px 28px}
}

/* ══ 실제 송출 화면 ═══════════════════════════════
   '테이블오더에서 광고가 나온다' 를 글로 설명하면 감이 안 온다.
   매장 영상을 배경으로 깔고 그 위 태블릿에서 진짜 소재를 돌린다. */
.live{position:relative; overflow:hidden; isolation:isolate; padding:56px 0;
  background:#0e0f13; color:#fff}
.live-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:-2; opacity:.5}
.live:after{content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(14,15,19,.72), rgba(14,15,19,.90))}
.live-in{display:grid; gap:28px; align-items:center}
.live-l .kick{color:var(--brand)}
.live-l h2{margin-top:10px; font-size:clamp(25px,6.6vw,40px); line-height:1.3;
  letter-spacing:-.05em; font-weight:900; color:#fff}
.live-l h2 em{font-style:normal; color:var(--brand)}
.live-l p{margin-top:14px; font-size:14.5px; line-height:1.8;
  color:rgba(255,255,255,.7); max-width:28em}
.live-l ul{list-style:none; margin:20px 0 0; padding:0; display:flex;
  flex-wrap:wrap; gap:8px}
.live-l li{background:rgba(255,255,255,.12); border-radius:999px; padding:8px 15px;
  font-size:12.5px; font-weight:700}
.live-r .dev-scr{border-color:#2a2e38; box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.live-r video{width:100%; height:100%; object-fit:cover; display:block}
.live-cap{display:block; margin-top:14px; text-align:center; font-size:12px;
  color:rgba(255,255,255,.5)}

@media (min-width:980px){
  .live{padding:80px 0}
  .live-in{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:56px}
}

/* 요금표 항목이 12.5px 이라 읽히지 않았다 — 광고주가 제일 들여다보는 표다 */
.tiers dl{margin-top:16px; padding-top:14px}
.tiers dl>div{padding:9px 0; font-size:14px}
.tiers dt{font-size:13.5px}
.tiers dd{font-size:14.5px}
.t-area{font-size:13px}
@media (min-width:980px){
  .tiers dl>div{font-size:14.5px}
  .tiers dd{font-size:15px}
}

/* 배경으로 깔면 글만 읽히고 영상은 안 보인다 — 문의 카드 왼쪽 빈자리에 넣는다 */
.dapply-v{margin-top:22px; border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14)}
.dapply-v video{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}

/* 섹션마다 붙던 작은 노란 라벨을 뺀다 — 제목만으로 충분하고, 열 개가 넘으니 소음이다 */
.kick,.dkick,.pt-kick{display:none}
.head h2,.dhead h2{margin-top:0}
.card-hd h2,.dapply h2,.live-l h2{margin-top:0}

/* 매체 지도를 뺐다 — 두 칸이던 타겟팅이 한 칸이 된다 */
@media (min-width:980px){
  .tsplit-1{grid-template-columns:1fr; max-width:var(--cn); text-align:center}
  .tsplit-1 .head-l{margin-inline:auto}
  .tsplit-1 .chips2{justify-content:center}
}