/* ============================================================
   플랫폼 목록 (snspang category)
   ------------------------------------------------------------
   snspang 의 <style> 블록을 «순서 그대로» 이어 붙인 것이다.
   ⚠ 규칙 단위로 쪼개서 옮기면 안 된다. @media 안에 있던 규칙이
     밖으로 튀어나와 모바일 규칙이 데스크톱에도 걸린다 — 실제로 그렇게 깨졌다.
   ⚠ 화면마다 «한 파일»만 싣는다(x-layout 의 css 속성). 그래서 이 파일도
     머리줄·꼬리말 같은 공통 규칙을 스스로 갖고 있다. 합치지 말 것 —
     .trust 처럼 같은 이름이 화면마다 다른 뜻인 것이 있다.
   ============================================================ */


/* 웹폰트는 shell.css 한 벌로 옮겼다 (2026-09-16) — 일곱 벌 복사돼 있던 것이다 */


  /* 기본값·리셋(:root·*·body·a·img·.wrap·머리띠)은 shell.css 한 벌로 옮겼다 (2026-09-16) */
  /* 머리줄(로고줄·메뉴줄·검색) 규칙은 shell.css 한 벌로 옮겼다 (2026-09-16) */
  /* 메가 드롭다운(패널·카드·프로모) 규칙은 shell.css 한 벌로 옮겼다 (2026-09-16) */

  /* 카테고리 히어로 — 목적색(--gc) 은은한 틴트 + 세로 액센트 바 */
  .cathero{--gc:#2563eb;background:linear-gradient(120deg,#fff, color-mix(in srgb, var(--gc) 9%, #fff));padding:34px 0 30px;border-bottom:1px solid color-mix(in srgb, var(--gc) 16%, #eaeef5);cursor:default;}
  .cathero .wrap{display:flex;align-items:center;}
  .cathero .chead{border-left:4px solid var(--gc);padding-left:18px;}
  .cathero h1{font-size:28px;font-weight:900;letter-spacing:-.04em;color:#191c20;}
  .cathero p{font-size:14.5px;color:#667085;margin-top:5px;font-weight:600;}
  /* 이동 경로(.crumb) 규칙은 shell.css 한 벌로 옮겼다 (2026-09-16) */

  /* 서브 필터 탭 */
  .subfilter{position:sticky;top:56px;z-index:40;background:#fff;border-bottom:1px solid var(--line);}
  .subfilter .wrap{display:flex;gap:10px;overflow-x:auto;padding:14px 20px;}
  .chip{flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 18px;font-size:14px;font-weight:700;color:#555;cursor:pointer;white-space:nowrap;transition:.14s;}
  .chip:hover{border-color:#bbb;} .chip.on{background:#111;color:#fff;border-color:#111;}

  /* 정렬/개수 */
  .toolbar{display:flex;justify-content:space-between;align-items:center;padding:26px 0 18px;}
  .toolbar .count{font-size:14px;color:#555;font-weight:600;} .toolbar .count b{color:#111;}
  .toolbar .sort{display:flex;gap:14px;font-size:13px;color:#888;font-weight:600;}
  .toolbar .sort a.on{color:#111;} .toolbar .sort a:hover{color:#111;}

  /* 상품 그리드 (홈과 동일 카드) */
  .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding-bottom:40px;}
  .prod{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;cursor:pointer;box-shadow:0 3px 14px rgba(0,0,0,.04);transition:.16s;}
  .prod:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.09);}
  .prod .th{position:relative;aspect-ratio:1/1;background:var(--bg,#f6c945);overflow:hidden;display:grid;place-items:end center;}
  .prod .th .pl{position:absolute;top:16px;left:0;right:0;text-align:center;font-size:11px;font-weight:800;letter-spacing:.06em;color:rgba(20,20,20,.6);}
  .prod .th .tt{position:absolute;top:38px;left:0;right:0;text-align:center;font-size:26px;font-weight:900;color:#1a1a1a;line-height:1.14;letter-spacing:-.045em;}
  .prod .th .hot{position:absolute;top:13px;right:13px;background:#111;color:#fff;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:6px;} .prod .th .hot.best{background:#ff5b45;}
  /* 유지 시간 배지 — 라이브 시청자처럼 «시간만 다른» 상품에 붙는다.
     ⚠ .hot(배지)과 «반대쪽»에 둔다. 둘 다 오른쪽 위에 있으면 겹친다. */
  .prod .th .dur{position:absolute;top:13px;left:13px;background:rgba(17,17,17,.82);color:#fff;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:6px;letter-spacing:-.2px;}

  .prod .th img{width:58%;margin-bottom:2px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.13));}
  .prod .th.thumb-img{background:#fff;place-items:stretch;} .prod .th img.ff{width:100%;height:100%;margin:0;object-fit:contain;filter:none;}
  .prod .th .prop{position:absolute;bottom:28px;width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:16px;box-shadow:0 4px 8px rgba(0,0,0,.13);}
  .prod .th .prop.l{left:16px;} .prod .th .prop.r{right:16px;}
  .prod .info{display:block;white-space:normal;padding:15px 16px 17px;}
  .prod .nm{font-size:15px;font-weight:400;color:var(--ink);letter-spacing:-.02em;}
  .prod .pr{margin-top:9px;font-size:17px;font-weight:800;color:#111;} .prod .pr .dc{color:#ff5b45;margin-right:4px;font-size:14px;} .prod .pr small{font-size:13px;font-weight:700;}
  .prod .cnt{margin-top:9px;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;font-weight:900;color:#171717;} .prod .cnt .lbl{color:#aaa;font-weight:600;margin-right:2px;} .prod .cnt .st{color:#f5a623;}

  .pager{display:flex;justify-content:center;gap:6px;padding:14px 0 50px;}
  .pager a{min-width:38px;height:38px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;font-size:14px;font-weight:700;color:#555;}
  .pager a.on{background:#111;color:#fff;border-color:#111;} .pager a:hover{border-color:#999;}

  /* 푸터 규칙은 shell.css 한 벌로 옮겼다 (2026-09-16) — 일곱 벌 복사돼 있던 것이다 */

  @media(max-width:900px){.gnb{display:none;}.grid{grid-template-columns:repeat(2,1fr);}.subfilter{top:56px;}}


/* ===== 카테고리 프리미엄 (대기업 톤) ===== */
.cathero{padding:44px 0 38px;}
.cathero .chead{border-left-width:5px;padding-left:20px;}
.cathero h1{font-size:30px;letter-spacing:-.045em;color:#12180f;}
.cathero p{font-size:14.5px;color:#5f6b57;margin-top:7px;}
.subfilter .wrap{padding:16px 20px;gap:9px;}
.chip{border:1px solid #e4e7e0;padding:10px 20px;font-size:14px;}
.chip.on{background:#12180f;border-color:#12180f;}
.toolbar{padding:30px 0 20px;}
.toolbar .count b{color:var(--accent-d);}
.grid{gap:24px;}
.prod{border:1px solid #ebeee8;border-radius:16px;box-shadow:0 2px 10px rgba(16,24,40,.05);}
a.prod{display:block;text-decoration:none;color:inherit;}  /* div→a 전환(크롤 가능) 시 링크 기본스타일 제거 */
.prod:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(16,24,40,.1);border-color:#dfe3da;}
.prod .info{padding:16px 17px 18px;}
.prod .nm{font-size:14.5px;color:#2b3128;line-height:1.4;}
.prod .pr{margin-top:11px;font-size:18px;font-weight:900;color:#12180f;}
.prod .pr .lbl{font-size:12px;color:#98a09a;font-weight:600;margin-right:4px;}
.prod .pr small{font-size:13px;font-weight:800;color:#12180f;}
.prod .cnt{margin-top:11px;padding-top:11px;border-top:1px solid #f2f4ef;}
.pager a{border-color:#e4e7e0;border-radius:11px;}
.pager a.on{background:#12180f;border-color:#12180f;}
@media(max-width:640px){.grid{grid-template-columns:repeat(2,1fr);gap:14px;}}




.seotext{max-width:980px;margin:34px auto 10px;padding:22px 24px;border:1px solid #e8eee6;border-radius:14px;background:#fbfdfa;line-height:1.75;color:#3d4a3a}
.seotext h2{font-size:18px;font-weight:800;color:#1e283e;margin:0 0 12px;border:0;padding:0}
.seotext h3{font-size:15px;font-weight:800;color:#22355e;margin:20px 0 8px;border:0;padding:0}
.seotext p{font-size:14px;margin:0 0 10px}
.seotext dl{margin:0}
.seotext dt{font-size:14px;font-weight:800;color:#1e283e;margin:12px 0 3px}
.seotext dd{font-size:13.5px;margin:0;color:#51624d}
.seotext ul{margin:0;padding-left:18px}
.seotext li{font-size:13.5px;margin:0 0 6px}
.seotext a{color:#244283;font-weight:700;text-decoration:underline}
@media(max-width:640px){.seotext{margin:24px 12px 10px;padding:18px 16px}}






/* ── 플랫폼별 서비스 안내 (todaysns 「플랫폼별 서비스 안내」 짜임) ──────────
   ⚠ 이 화면은 «읽는 화면»이다. 글자 크기와 줄간격을 목록 화면 기준으로 잡으면
     본문이 빽빽해져 아무도 안 읽는다. 본문만 따로 잡는다. */
.pvpoints{list-style:none;margin:22px 0 0;padding:18px 20px;display:grid;gap:9px;
  border:1px solid #e6ebe2;border-radius:16px;background:#fbfdfa;}
.pvpoints li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.7;color:#39414f;font-weight:600;}
.pvpoints li::before{content:"";position:absolute;left:5px;top:9px;width:7px;height:7px;border-radius:50%;
  background:var(--gc,#2563eb);}

.pvread{margin:30px 0 4px;}
.pvread section{padding:20px 0;border-top:1px solid #eef1f5;}
.pvread section:first-child{border-top:0;padding-top:4px;}
.pvread h2{font-size:17px;font-weight:900;color:#12180f;letter-spacing:-.03em;margin:0 0 9px;line-height:1.45;}
.pvread p{font-size:14.5px;line-height:1.85;color:#4b5563;margin:0;word-break:keep-all;}

/* 구역 머리 — 가격표 / 자주 묻는 질문 */
.pvhd{display:flex;align-items:baseline;gap:10px;margin:38px 0 0;
  font-size:20px;font-weight:900;color:#12180f;letter-spacing:-.035em;}
.pvhd span{font-size:13px;font-weight:700;color:#9aa2ae;}

/* 짧은 문답 — 고객센터의 .faqitem 규칙을 그대로 쓴다(같은 모양이어야 한다).
   ⚠ 다만 cs.css 는 이 화면에 실리지 않는다. 필요한 만큼만 여기 다시 둔다. */
.pvfaq{margin:14px 0 0;border-top:1px solid #eaeef5;}
.pvfaq .faqitem{border-bottom:1px solid #eaeef5;}
.pvfaq summary.faqq{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 4px;font-size:15px;font-weight:700;color:#2b3240;cursor:pointer;}
.pvfaq summary.faqq::-webkit-details-marker{display:none}
.pvfaq .faqq .qi{color:#c4cad4;font-weight:900;transition:transform .15s;}
.pvfaq .faqitem[open] .faqq{color:var(--accent-d);}
.pvfaq .faqitem[open] .faqq .qi{transform:rotate(90deg);color:var(--accent-d);}
.pvfaq .faqa{padding:0 4px 18px;font-size:14px;line-height:1.8;color:#53658a;word-break:keep-all;}

/* 플랫폼 화면 아래 «읽을거리» — 목록에서 글로 나가는 길.
   ⚠ .pvread 는 «이미 문답 블록이 쓰는 이름»이다. 같은 이름을 쓰면 그쪽 여백이 덮인다.
   ⚠ 주문 단추(.pvgo)보다 위에 두되 눈에 덜 띄게 둔다. 사러 온 사람을 글로 새게 하면 안 된다. */
.pvarts{margin:44px 0 8px;}
.pvarts>h2{font-size:17px;font-weight:800;color:#2b3646;margin:0 0 12px;letter-spacing:-.02em;}
.pvarts-l{display:grid;gap:8px;}
.pvarts-l a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  background:#fff;border:1px solid #e8ecef;border-radius:12px;padding:13px 16px;}
.pvarts-l a b{font-size:14.5px;font-weight:700;color:#2b3646;line-height:1.5;word-break:keep-all;}
.pvarts-l a span{flex:none;font-size:12.5px;font-weight:700;color:#9aa4b2;}
.pvarts-l a:hover{border-color:var(--accent,#2563eb);}
.pvarts-l a:hover b{color:var(--accent,#2563eb);}
.pvgo{margin:32px 0 56px;}
.pvgo a{display:block;text-align:center;background:var(--accent,#2563eb);color:#fff;
  font-size:15.5px;font-weight:800;padding:16px;border-radius:14px;text-decoration:none;transition:.15s;}
.pvgo a:hover{background:var(--accent-d,#1d4ed8);transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(37,99,235,.28);}

@media(max-width:640px){
  .pvpoints{padding:16px 16px;}
  .pvread p{font-size:14px;}
  .pvhd{font-size:18px;margin-top:30px;}
}

/* 검색 결과 알림 줄 */
.searchbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;
  background:#f4f7fc;border:1px solid #e2e8f2;border-radius:12px;padding:12px 16px;
  font-size:13.5px;font-weight:700;color:#5b6472}
.searchbar b{color:#1d4ed8;font-weight:900}
.searchbar a{margin-left:auto;color:#5b6472;font-weight:700;font-size:12.5px;text-decoration:underline}
.searchnone{padding:56px 20px;text-align:center;color:#8a94a6;font-size:14.5px;font-weight:600;
  border:1px dashed #dfe4ee;border-radius:16px;margin-bottom:24px}
.searchnone a{display:inline-block;margin-left:8px;color:#2563eb;font-weight:800;text-decoration:none}

/* ── 갈래 화면 본문 (?goal=) ─────────────────────────────
   ★ 카드만 있는 화면은 본문이 400자 남짓이라 얇은 화면으로 묶인다.
     설명·문답·읽을거리를 얹어 「SNS 마케팅 가격」 같은 검색어를 받게 한다.
   ⚠ 문답을 <details> 로 접지 않는다 — 접힌 영역은 스니펫·AI 인용 자격을 얻기 어렵다. */
.goalcopy{margin:40px 0 8px;max-width:820px;}
.goalcopy .gclead{font-size:16px;font-weight:800;color:#2b3646;line-height:1.75;
  margin:0 0 14px;word-break:keep-all;letter-spacing:-.02em;}
.goalcopy p{font-size:14.5px;color:#5b6675;line-height:1.85;margin:0 0 12px;word-break:keep-all;}
.goalcopy>h2{font-size:17px;font-weight:800;color:#2b3646;margin:30px 0 12px;letter-spacing:-.02em;}
.gcqa{display:grid;gap:8px;}
.gcq{background:#fff;border:1px solid #e8ecef;border-radius:12px;padding:14px 16px;}
.gcq b{display:block;font-size:14.5px;font-weight:800;color:#2b3646;line-height:1.5;
  margin-bottom:6px;word-break:keep-all;}
.gcq p{margin:0;font-size:13.5px;line-height:1.75;color:#5b6675;}
@media(max-width:640px){.goalcopy{margin-top:28px;}.goalcopy .gclead{font-size:15px;}}

/* ── 모바일 머리줄(검색·링크) 규칙은 «site.css» 한 곳에 있다 (2026-09-16) ──
   전에는 이 블록이 화면 CSS 일곱 벌에 그대로 복사돼 있었다. 한 벌만 고치면 그 화면만
   바뀌고 나머지 여섯은 옛 모양으로 남는다 — 실제로 그렇게 어긋났다. site.css 는 모든
   화면에 «화면 CSS 뒤에» 실리므로 거기 한 벌이면 족하다. */


/* ── 모바일 머리줄이 «붙어 있다» (2026-09-12) — home.css 와 같은 규칙 ──
   🔴 로그인하면 한 줄에 다섯이 들어가 서로 닿아 보였다(로고·잔액·마이페이지·로그아웃·⚙관리자).
   ⚠ 잔액 칸과 ⚙관리자는 숨기지 않는다. 「마이페이지」 글자만 뺀다 — 잔액 칸이 같은 곳으로 간다. */