/* 공개 「캠페인」 — 2026-10-01.

   **랜딩 하나가 화면 한 칸을 통째로 쓴다.** 늘어나면 아래로 계속 붙는다
   (사장님 "이렇게 가로로 한섹션 꽉차게 각 랜딩마다 넣을꺼야 ·
   랜딩은 한섹션당 하나로 진행하면서 늘어나면 밑쪽으로 계속 붙이고").
   칸을 누르면 그 장비군의 캠페인이 뜬다.

   히어로는 목록 화면들과 같은 것(_public_hero.html)을 쓴다 — 같은 회사로
   보여야 한다. 이 파일은 히어로 **아래**만 맡는다. */

/* 랜딩이 쌓인다 — Apple 홈 꼴(2026-10-01). 한 섹션에 **간단한 설명과 대표
   이미지**뿐. 버튼은 없다 — 섹션 전체가 버튼이다. 바탕이 번갈아 온다. */
.lp{display:flex;flex-direction:column;align-items:center;text-align:center;
  text-decoration:none;padding:56px 40px 0;box-sizing:border-box;
  background:#f5f5f7;color:#101418;transition:background .2s ease}
.lp.dk{background:#000;color:#fff}
.lp:hover{background:#eceef1}
.lp.dk:hover{background:#0a0a0b}
.lp h2{margin:0;font-size:clamp(32px,4.4vw,56px);font-weight:800;letter-spacing:-.05em;
  line-height:1.08}
.lp p{margin:12px 0 0;font-size:clamp(16px,1.5vw,20px);font-weight:500;
  letter-spacing:-.02em;color:#5b6472}
.lp.dk p{color:#a9abb1}
.lpi{margin-top:22px;height:330px;display:flex;align-items:flex-end;
  justify-content:center;width:100%;padding-bottom:34px;box-sizing:border-box}
/* 높이를 기준으로 세운다. max-height:100% 만 주고 width:auto 로 두면
   아직 안 받은 사진이 0x0 이 되고, lazy 면 영영 안 불러온다(오늘 두 번째다). */
.lpi img{max-height:100%;max-width:min(86%,560px);width:auto;height:auto;object-fit:contain;
  object-position:center bottom;display:block;
  transition:transform .3s cubic-bezier(.16,1,.3,1)}
.lp:hover .lpi img{transform:scale(1.03)}

/* 푸터 — 다른 공개 화면과 같은 꼴. 칸 바탕이 밝음/어두움 번갈아 오므로
   바탕을 직접 쥐어 준다(안 쥐면 어두운 칸 바로 밑에서 글자가 떠 보인다). */
.cmp-foot{background:#fff;border-top:1px solid rgba(15,22,28,.10);
  padding:40px 24px 60px;text-align:center;
  font-size:12.5px;line-height:2;color:#9aa5ad}
.cmp-foot b{color:#5b6472;font-weight:600}

@media(max-width:900px){
  .lp{padding:44px 24px 0}
  .lpi{margin-top:18px;height:220px;padding-bottom:26px}
  .lpi img{max-width:90%}
}


/* ── Apple 홈 비율로(2026-10-01 사장님 「hero가 있고 그 밑쪽으로 랜딩들이 붙는거야. 하나의 섹션에 랜딩이
   들어가고.. 참고는 애플이야」). 랜딩 한 칸이 화면 거의 한 장을 쓴다 — 큰 제목 · 한 줄 · 알약 하나 · 아래를
   채우는 큰 사진. 칸 사이는 흰 줄 12px(Apple 과 같은 이음매). 칸이 늘어나면 아래로 계속 붙는다. ── */
.lp{min-height:min(90vh,880px);padding:clamp(56px,6vw,88px) 32px 0;margin:0 0 12px}
.lp h2{font-size:clamp(40px,5.4vw,80px);font-weight:700;letter-spacing:-.045em;line-height:1.05}
.lp p{margin-top:14px;font-size:clamp(19px,1.9vw,28px);font-weight:500;color:#1d1d1f}
.lp.dk p{color:#f5f5f7}
.lpb{display:inline-block;margin-top:24px;padding:12px 24px;border-radius:999px;background:#1f6feb;
  color:#fff;font-size:17px;font-weight:600;letter-spacing:-.01em;transition:background .2s ease}
.lp:hover .lpb{background:#1558c0}
.lpi{flex:1 1 auto;height:auto;min-height:clamp(320px,50vh,580px);margin-top:28px;padding-bottom:0;
  position:relative}
.lpi img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  max-height:100%;max-width:min(92%,980px)}
.lp:hover .lpi img{transform:translateX(-50%) scale(1.03);transform-origin:center bottom}
.lp:hover{background:#f5f5f7}.lp.dk:hover{background:#000}
@media(max-width:900px){
  .lp{min-height:0;padding:48px 20px 0;margin-bottom:10px}
  .lpb{font-size:15px;padding:10px 20px;margin-top:18px}
  .lpi{min-height:300px;margin-top:22px}
}
/* 알약은 회사색(민트)으로 — 사장님 같은 날 「포인트로 괜찬네.. 우리 브랜드색으로 바꿔보자」. */
.lpb{background:#14a89a}
.lp:hover .lpb{background:#0e8878}
.lp.dk .lpb{background:#2FD1BE;color:#06201d}
.lp.dk:hover .lpb{background:#4FE0CF}

/* ── 캠페인 히어로(2026-10-01) — 광고 착지 화면. 짙은 바탕 + 민트 빛, 왼쪽 글 · 오른쪽 가격 사다리 그림.
   사다리 막대는 한 칸씩 늘어나며 쌓인다(기능 하나에 값 하나). 금액은 적지 않는다. ── */
.cph{position:relative;overflow:hidden;margin:0 0 12px;box-sizing:border-box;
  min-height:min(58vh,560px);display:flex;align-items:center;padding:56px 32px;color:#fff;
  background:radial-gradient(760px 520px at 78% 40%,rgba(47,209,190,.22),transparent 65%),
             radial-gradient(900px 600px at 10% 110%,rgba(20,168,154,.18),transparent 60%),#07090b}
.cph-in{width:100%;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;
  gap:64px;align-items:center}
.cph-eb{margin:0 0 20px;font-size:13px;font-weight:700;letter-spacing:.2em;color:#2FD1BE}
.cph-t{margin:0;font-size:clamp(48px,6.6vw,104px);font-weight:700;letter-spacing:-.055em;line-height:1.02;color:#fff}
.cph-t em{font-style:normal;background:linear-gradient(90deg,#2FD1BE,#7ef0e0);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.cph-s{margin:28px 0 0;max-width:30em;font-size:clamp(18px,1.6vw,23px);font-weight:500;line-height:1.55;
  letter-spacing:-.02em;color:#c9ced4}
/* 2026-10-02 — 첫 화면이 히어로뿐이라 캠페인 카드가 안 보였다(점검표 1 「/campaign 흐림」).
   높이를 줄여 첫 칸의 「캠페인 보기」가 데스크톱 첫 화면에 들게 하고, 아래 화살표 줄을 그 칸으로 가는 링크로. */
.cph-n{margin:32px 0 0;font-size:15px;font-weight:600;color:#7d858e}
.cph-n a{color:inherit;text-decoration:none}
.cph-n a:hover{color:#c9ced4}
.cph-n i{font-style:normal;display:inline-block;margin-left:4px;animation:cphb 1.8s ease-in-out infinite}
@keyframes cphb{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
/* 사다리 — 막대 길이가 본체 → +기능 … 으로 늘어난다. 마지막 줄은 합(민트 꽉 찬 막대). */
.cph-lad{display:flex;flex-direction:column;gap:14px;padding:34px 34px 30px;border-radius:26px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8);backdrop-filter:blur(6px)}
.cph-lad .r{display:grid;grid-template-columns:7.5em 1fr;align-items:center;gap:16px}
.cph-lad .r span{font-size:15px;font-weight:600;color:#aeb5bd;letter-spacing:-.01em}
.cph-lad .r b{display:block;height:16px;border-radius:999px;background:rgba(47,209,190,.85);
  transform-origin:left center;transform:scaleX(0);animation:cphg .9s cubic-bezier(.16,1,.3,1) forwards}
.cph-lad .r0 b{width:46%;background:#e8ecef;animation-delay:.15s}
.cph-lad .r1 b{width:58%;animation-delay:.45s}
.cph-lad .r2 b{width:71%;animation-delay:.75s}
.cph-lad .r3 b{width:84%;animation-delay:1.05s}
.cph-lad .tot{margin-top:8px;padding-top:18px;border-top:1px dashed rgba(255,255,255,.18)}
.cph-lad .tot span{color:#fff;font-weight:700}
.cph-lad .tot b{width:100%;height:22px;background:linear-gradient(90deg,#14a89a,#2FD1BE 60%,#7ef0e0);
  animation-delay:1.4s;box-shadow:0 0 30px rgba(47,209,190,.45)}
@keyframes cphg{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.cph-n i,.cph-lad .r b{animation:none;transform:none}}
@media(max-width:900px){
  .cph{min-height:0;padding:60px 22px 56px;margin-bottom:10px}
  .cph-in{grid-template-columns:1fr;gap:38px}
  .cph-lad{padding:24px 22px 22px}.cph-lad .r{grid-template-columns:6.5em 1fr}
}

/* ── 출시 예정(2026-10-01) — 위 랜딩보다 한 단 작은 타일 셋. 판 색은 회색 · 가운데만 짙게.
   민트는 쓰지 않는다(옅은 민트 · 민트 알약은 「탁하고 어색해」) — 알약은 먹 테두리. ── */
.sn{padding:clamp(64px,7vw,110px) 0 12px}
.sn-h{text-align:center;padding:0 24px}
.sn-eb{margin:0 0 12px;font-size:12.5px;font-weight:800;letter-spacing:.16em;color:#6e6e73}
.sn-h h2{margin:0;font-size:clamp(32px,4vw,52px);font-weight:700;letter-spacing:-.045em;line-height:1.1;color:#1d1d1f}
.sn-h p{margin:14px 0 0;font-size:clamp(16px,1.4vw,19px);font-weight:500;color:#6e6e73}
.sn-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(36px,4vw,56px)}
/* 2026-10-05 — 카드 수대로(템플릿이 sn-n1 · sn-n2 · sn-n3 을 붙인다). 휴대폰(아래 760px)은 그대로 옆으로 넘긴다. */
.sn-row.sn-n1{grid-template-columns:minmax(0,680px);justify-content:center}
.sn-row.sn-n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.snt{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  min-height:clamp(520px,44vw,640px);padding:clamp(40px,4vw,56px) 24px 0;background:#f5f5f7;color:#1d1d1f;
  text-decoration:none;overflow:hidden}
.snt.dk{background:#101418;color:#f5f5f7}
.snt-k{font-size:13px;font-weight:700;letter-spacing:.02em;color:#6e6e73}
.snt.dk .snt-k{color:#a1a1a6}
.snt h3{margin:8px 0 0;font-size:clamp(28px,2.6vw,40px);font-weight:700;letter-spacing:-.045em;line-height:1.1}
.snt p{margin:10px 0 0;max-width:30ch;font-size:clamp(15px,1.15vw,17px);font-weight:500;line-height:1.45;color:#424245}
.snt.dk p{color:#c7c7cc}
.snt-b{display:inline-block;margin-top:20px;padding:9px 18px;border-radius:999px;border:1.5px solid #1d1d1f;
  font-size:14px;font-weight:700;color:#1d1d1f;transition:background .2s,color .2s}
.snt.dk .snt-b{border-color:#f5f5f7;color:#f5f5f7}
.snt:hover .snt-b{background:#1d1d1f;color:#fff}
.snt.dk:hover .snt-b{background:#f5f5f7;color:#101418}
.snt-i{position:relative;flex:1 1 auto;width:100%;min-height:240px;margin-top:22px}
.snt-i img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);max-width:88%;max-height:100%;
  object-fit:contain;transition:transform .5s cubic-bezier(.16,1,.3,1);transform-origin:center bottom}
.snt:hover .snt-i img{transform:translateX(-50%) scale(1.04)}
@media(max-width:760px){
  .sn-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;
    padding:0 20px 8px;scrollbar-width:none}
  .sn-row::-webkit-scrollbar{display:none}
  .snt{flex:0 0 82vw;min-height:480px;scroll-snap-align:start;padding-top:40px}
}