/* 자동발행(publisher) 탭 — /publisher React 페이지를 SPA 탭으로 포팅한 스타일. pub- 프리픽스로 충돌 방지 */
/* hero 라벨 (섹션 라벨과 동일 톤) */
.pub-heroLabel { display: block; color: #2563eb; font-weight: 800; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 16px; }

/* ───────── HERO (light / premium) ───────── */
.pub-hero {
  position: relative; text-align: center; overflow: hidden;
  background:
    radial-gradient(820px 420px at 50% -8%, #e6ecff 0%, rgba(230,236,255,0) 70%),
    radial-gradient(700px 380px at 88% 8%, #e0f2fe 0%, rgba(224,242,254,0) 65%),
    #ffffff;
  padding: 92px 20px 64px;
}
.pub-heroInner { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; }
.pub-badge {
  display:inline-block; background:#eef2ff; border:1px solid #e0e7ff;
  color:#4f46e5; font-weight:700; font-size:13px; padding:8px 16px; border-radius:999px; margin-bottom:26px;
}
.pub-heroTitle {
  color:#0f172a; font-size:56px; font-weight:900; line-height:1.14; letter-spacing:-0.035em; margin:0;
}
.pub-heroTitle em { color:#2563eb; font-style:normal; }
.pub-heroSub { color:#64748b; font-size:19px; line-height:1.65; margin:22px auto 0; max-width:600px; }
.pub-heroBtns { margin-top:34px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.pub-btnPrimary {
  background:#2563eb; color:#fff; font-weight:800; font-size:16px; padding:16px 34px; border-radius:14px;
  text-decoration:none; box-shadow:0 14px 30px rgba(37,99,235,0.30); display:inline-block;
  transition: transform .12s ease, box-shadow .12s ease;
}
.pub-btnPrimary:hover { transform: translateY(-2px); box-shadow:0 18px 38px rgba(37,99,235,0.40); }
.pub-btnLight {
  background:#ffffff; color:#1d4ed8; font-weight:800; font-size:16px; padding:16px 34px; border-radius:14px;
  text-decoration:none; box-shadow:0 14px 32px rgba(2,6,23,0.18); display:inline-block;
  transition: transform .12s ease;
}
.pub-btnLight:hover { transform: translateY(-2px); }
.pub-btnGhost {
  background:#ffffff; color:#2563eb; font-weight:800; font-size:16px; padding:16px 34px; border-radius:14px;
  text-decoration:none; border:1.5px solid #c7d7fb; display:inline-block;
  transition: transform .12s ease, border-color .12s ease;
}
.pub-btnGhost:hover { transform: translateY(-2px); border-color:#2563eb; }
.pub-mobileOnly { display:none; }
.pub-heroPills { margin-top:24px; display:flex; gap:20px; justify-content:center; flex-wrap:wrap; color:#475569; font-size:14px; font-weight:600; }
.pub-heroPills span { display:flex; align-items:center; gap:6px; }
.pub-pillTick { color:#2563eb; font-weight:900; }

/* video frame — real player look */
.pub-videoWrap {
  position:relative; max-width:920px; margin:54px auto 0; aspect-ratio:16/9;
  background: linear-gradient(180deg,#0b1224 0%, #0f172a 100%);
  border:1px solid #1e293b; border-radius:18px; overflow:hidden;
  box-shadow:0 44px 90px rgba(15,23,42,0.24);
}
.pub-videoBar { position:absolute; top:0; left:0; right:0; height:40px; display:flex; align-items:center; gap:8px; padding:0 16px; background:#0b1224; border-bottom:1px solid #1e293b; }
.pub-dot { width:11px; height:11px; border-radius:999px; display:inline-block; }
.pub-videoBody { position:absolute; inset:40px 0 0 0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#94a3b8; font-size:14px; font-weight:600; }
.pub-playIcon {
  width:76px; height:76px; border-radius:999px;
  background:linear-gradient(135deg,#3b82f6,#2563eb); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:26px; padding-left:5px; margin-bottom:14px;
  box-shadow:0 14px 34px rgba(37,99,235,0.55);
}
.pub-video { position:absolute; top:40px; left:0; width:100%; height:calc(100% - 40px); object-fit:cover; display:block; background:#0b1224; }

/* ───────── sections ───────── */
.pub-section { padding: 92px 20px; }
.pub-alt { background: #f8fafc; }
.pub-dark { background: #0f172a; color:#e2e8f0; }
.pub-inner { max-width: 1040px; margin: 0 auto; }
.pub-head { text-align:center; max-width: 720px; margin: 0 auto 50px; }
.pub-label { color:#4f46e5; font-weight:800; font-size:13px; letter-spacing:0.14em; text-transform:uppercase; }
.pub-dark .pub-label { color:#818cf8; }
.pub-title { color:#0f172a; font-size:36px; font-weight:900; line-height:1.3; margin:14px 0 0; letter-spacing:-0.02em; }
.pub-dark .pub-title { color:#ffffff; }
.pub-subtitle { color:#64748b; font-size:17px; line-height:1.7; margin-top:16px; }
.pub-dark .pub-subtitle { color:#94a3b8; }

/* split text + screenshot */
.pub-split { display:grid; grid-template-columns: 1.05fr 0.95fr; gap:56px; align-items:center; }
.pub-shotFrame {
  background:#fff; border:1px solid #e2e8f0; border-radius:22px; padding:10px;
  box-shadow: 0 30px 70px rgba(15,23,42,0.14); max-width: 330px; margin: 0 auto; width:100%;
}
.pub-shotFrame img { display:block; width:100%; max-height: 600px; object-fit: cover; object-position: top center; border-radius: 14px; }

.pub-featList { margin-top: 24px; display:grid; gap:16px; }
.pub-featItem { display:flex; gap:12px; align-items:flex-start; }
.pub-tick { flex:0 0 auto; width:27px; height:27px; border-radius:8px; background:#eef2ff; color:#2563eb; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; }
.pub-featText b { display:block; font-size:16px; }
.pub-featText span { color:#64748b; font-size:14px; }

/* case cards */
.pub-cards { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.pub-case {
  background:#fff; border:1px solid #e2e8f0; border-radius:22px; padding:34px;
  box-shadow:0 16px 38px rgba(15,23,42,0.06);
}
.pub-caseImg { width:100%; height:290px; cursor:zoom-in; object-fit:cover; border-radius:14px; display:block; margin-bottom:20px; }
.pub-caseTag { font-size:13px; font-weight:700; color:#64748b; }
.pub-caseMetric { font-size:33px; font-weight:900; color:#2563eb; margin:10px 0 10px; letter-spacing:-0.03em; line-height:1.15; }
.pub-caseDesc { color:#475569; font-size:15px; line-height:1.7; }
.pub-foot { text-align:center; color:#94a3b8; font-size:13px; margin-top:28px; }

/* safe chips */
.pub-chips { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.pub-chip { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); border-radius:18px; padding:24px 28px; min-width:210px; text-align:center; }
.pub-chip b { display:block; font-size:17px; margin-bottom:7px; color:#fff; }
.pub-chip span { color:#94a3b8; font-size:14px; }

/* 순위 증거 이미지 (Safe 섹션) */
.pub-proof { display:grid; grid-template-columns:1fr 1fr; gap:30px; max-width:760px; margin:0 auto; align-items:start; }
.pub-proofItem { text-align:center; }
.pub-proofImg { width:100%; height:380px; object-fit:cover; object-position:top; background:#fff; border:1px solid #1e293b; border-radius:14px; padding:8px; display:block; box-shadow:0 20px 48px rgba(0,0,0,0.28); }
.pub-proofCap { margin-top:16px; color:#cbd5e1; font-size:15px; font-weight:700; }
.pub-proofCap b { color:#818cf8; }
.pub-proofLead { display:block; font-size:13px; font-weight:600; color:#818cf8; margin-bottom:4px; }

/* value compare (대행사 vs 블덱스) */
.pub-compare { display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:760px; margin:0 auto; }
.pub-compareCard { border-radius:20px; padding:36px 28px; text-align:center; }
.pub-compareBad { background:#f8fafc; border:1px solid #e2e8f0; }
.pub-compareGood { background:linear-gradient(135deg,#eef2ff,#e0f2fe); border:2px solid #2563eb; box-shadow:0 20px 48px rgba(37,99,235,0.18); }
.pub-compareLabel { font-size:15px; font-weight:700; color:#475569; }
.pub-compareBad .pub-compareLabel { color:#94a3b8; }
.pub-comparePrice { font-size:34px; font-weight:900; margin:12px 0 8px; color:#b4bdca; text-decoration:line-through; }
.pub-comparePriceFree { font-size:42px; font-weight:900; margin:12px 0 8px; color:#2563eb; letter-spacing:-0.03em; }
.pub-compareNote { font-size:14px; color:#64748b; }
.pub-compareGood .pub-compareNote { color:#1e40af; font-weight:600; }
.pub-valueCopy { max-width:700px; margin:40px auto 0; text-align:center; color:#475569; font-size:17px; line-height:1.8; }
.pub-valueCopy b { color:#0f172a; }

/* 와이드 스크린샷 섹션 (애드포스트 / 다른 작업) */
.pub-bigShot {
  max-width: 880px; margin: 0 auto; background:#fff; border:1px solid #e2e8f0; border-radius:20px; padding:12px;
  box-shadow: 0 30px 70px rgba(15,23,42,0.14);
}
.pub-bigShotImg { display:block; width:100%; height:auto; border-radius:12px; cursor:zoom-in; }
.pub-dark .pub-bigShot { background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.12); }

/* 라이트박스 (이미지 클릭 → 같은 사이트 안에서 크게) */
.pub-lightbox {
  position:fixed; inset:0; z-index:1000; background:rgba(2,6,23,0.86);
  display:flex; align-items:center; justify-content:center; padding:24px; cursor:zoom-out;
  animation: lbfade .15s ease;
}
.pub-lightboxImg { max-width:92vw; max-height:90vh; object-fit:contain; border-radius:12px; box-shadow:0 30px 90px rgba(0,0,0,0.5); cursor:default; }
.pub-lightboxClose {
  position:fixed; top:18px; right:22px; width:42px; height:42px; border:0; border-radius:999px;
  background:rgba(255,255,255,0.14); color:#fff; font-size:26px; line-height:1; cursor:pointer;
}
.pub-lightboxClose:hover { background:rgba(255,255,255,0.26); }
@keyframes lbfade { from{opacity:0} to{opacity:1} }

/* final cta */
.pub-final { background: linear-gradient(135deg,#4f46e5 0%, #2563eb 100%); color:#fff; text-align:center; padding:96px 20px; }
.pub-finalTitle { font-size:42px; font-weight:900; margin:0; letter-spacing:-0.03em; }
.pub-finalSub { font-size:18px; opacity:0.94; margin:18px 0 32px; }
.pub-finalBtns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* SPA 탭일 때: publisher 탭 활성화면 본문 컨테이너 숨기고 풀폭 표시 */
body.tab-publisher .container { display: none; }
#tabPublisher { width: 100%; }

@media (max-width: 820px) {
  .pub-hero { padding: 66px 18px 52px; }
  .pub-heroTitle { font-size: 36px; }
  .pub-heroSub { font-size: 16px; }
  .pub-videoWrap { margin-top: 38px; }
  .pub-hero .pub-videoWrap { aspect-ratio: 4 / 3; }
  /* 모바일 히어로: 버튼 한 줄(크기 축소). 부제목 위치는 HTML 순서(제목 아래)로 처리 — flex-column 은 영상 collapse 유발해 제거 */
  .pub-heroBtns { gap: 8px; flex-wrap: nowrap; }
  .pub-heroBtns .pub-btnPrimary, .pub-heroBtns .pub-btnGhost { padding: 14px 16px; font-size: 14px; white-space: nowrap; }
  .pub-heroSub { margin-top: 16px; }
  .pub-section { padding: 56px 20px; }
  .pub-title { font-size: 30px; }
  .pub-subtitle { font-size: 15px; }
  .pub-finalTitle { font-size: 30px; }
  .pub-split { grid-template-columns: 1fr; gap: 32px; }
  .pub-splitRev .pub-shotFrame { order: 2; }
  .pub-cards { grid-template-columns: 1fr; }
  .pub-caseImg { height: auto; }   /* 모바일: 사례 사진 안 잘리게 전체 표시(cover 290px 크롭 제거) */
  .pub-caseMetric { font-size: 24px; }
  .pub-compare { grid-template-columns: 1fr; }
  .pub-proof { grid-template-columns: 1fr; max-width: 420px; }
  .pub-proofImg { height: 300px; }
  .pub-bigShot { padding: 8px; }
  .pub-finalBtns { flex-direction: column; align-items: stretch; max-width: 360px; margin: 0 auto; }
  .pub-lightboxImg { max-width: 96vw; max-height: 86vh; }
  .pub-mobileOnly { display: block; text-align: center; font-size: 13px; font-weight: 700; color: #dc2626; margin-top: 14px; line-height: 1.5; }
}