/* ============================================================
   SOP 자사몰 컴포넌트 스타일 v2
   - 레퍼런스: samsung-gudok.com (삼성전자 공식 구독 인증점)
   - SOP 템플릿 가이드 2026.04 필수 규격 준수
   - style.css 뒤에 로드되어 오버라이드
   ============================================================ */

:root {
    --sop-navy: #1428a0;
    --sop-blue: #2189ff;
    --sop-blue-soft: #eff6ff;
    --sop-blue-line: #bfdbfe;
    --sop-gray-50: #f8fafc;
    --sop-gray-100: #f3f4f6;
    --sop-gray-200: #e5e7eb;
    --sop-gray-500: #6b7280;
    --sop-gray-700: #374151;
    --sop-gray-900: #111827;
}

/* ── 전역 폰트 강제 (솔루션 CSS의 NotoSansKR을 대체, 아이콘 폰트 제외) ── */
body, input, select, textarea, button:not(.fa):not(.ionicons) {
    font-family: var(--sop-font-kr) !important;
}
.fa { font-family: 'FontAwesome' !important; }
.ionicons { font-family: 'Ionicons' !important; }
.sop-header *:not(.fa):not(.ionicons),
.sop-gnb-flex a, .sop-gnb-flex span:not(.grid):not([class*=ion]),
.sop-kv p, .sop-kv h2, .sop-kv a,
.sop-cql-head h3, .sop-cql-head p,
.sbn01 .bntxt,
.mtit .titxt,
a.sop-card span,
.fxbar p, .fxbar label, .fxbar input, .fxbar button, .fxbar a {
    font-family: var(--sop-font-kr) !important;
}

/* ── 헤더 ───────────────────────────────────── */
.sop-header { padding:11px 0; background:#fff; }
.sop-header .sop-inner { max-width:1280px; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:22px; }
.sop-logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.sop-logo-mark { width:50px; height:50px; border-radius:50%; background:var(--sop-navy); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:9px; line-height:1.25; font-weight:700; text-align:center; flex:none; letter-spacing:-0.3px; }
.sop-logo-txt strong { display:block; font-size:17px; font-weight:700; line-height:1.25; color:var(--sop-gray-900); letter-spacing:-0.3px; }
.sop-logo-txt span { display:block; font-size:12px; color:var(--sop-gray-500); margin-top:2px; }
.sop-search { flex:1; max-width:430px; margin:0 auto; position:relative; }
.sop-search input { width:100%; height:44px; border:1px solid var(--sop-gray-200) !important; border-radius:24px; padding:0 46px 0 20px; font-size:14px; background:var(--sop-gray-50) !important; outline:none; box-sizing:border-box; }
.sop-search input:focus { border-color:var(--sop-blue) !important; background:#fff !important; }
.sop-search button { position:absolute; right:8px; top:5px; width:34px; height:34px; border:0; background:none; cursor:pointer; font-size:15px; color:var(--sop-gray-500); }
.sop-hd-right { margin-left:auto; display:flex; align-items:center; gap:16px; white-space:nowrap; }
.sop-sns { display:flex; gap:8px; }
.sop-sns a { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; text-decoration:none; }
.sop-sns .s1 { background:radial-gradient(circle at 30% 110%, #ffd776 0%, #f14e95 45%, #b23bad 70%, #7b3bc0 100%); }
.sop-sns .s2 { background:#ff0000; }
.sop-sns .s3 { background:#03c75a; }
.sop-auth { display:flex; align-items:center; gap:10px; }
.sop-auth a { font-size:13px; font-weight:600; color:var(--sop-gray-700); text-decoration:none; }
.sop-auth a:hover { color:var(--sop-navy); }
.sop-auth .sep { width:1px; height:11px; background:var(--sop-gray-200); }

/* ── GNB (흰 배경, sticky) ──────────────────── */
#gnb.sop-gnb { border-top:1px solid var(--sop-gray-100); border-bottom:1px solid var(--sop-gray-200); background:#fff; font-size:14px; height:auto; }
#gnb.sop-gnb .sop-gnb-flex { max-width:1280px; margin:0 auto; padding:0 12px; display:flex; align-items:center; }
.sop-gnb-left { display:flex; align-items:center; }
.sop-gnb-left .sop-allcate { display:flex; align-items:center; gap:8px; font-weight:700; cursor:pointer; padding:12px 15px; color:var(--sop-gray-900); font-size:14px; }
.sop-allcate .grid { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.sop-allcate .grid i { width:6px; height:6px; background:var(--sop-navy); border-radius:1.5px; }
.sop-gnb-left > a { padding:12px 15px; font-weight:600; color:var(--sop-gray-700); text-decoration:none; font-size:14px; }
.sop-gnb-left > a:hover { color:var(--sop-navy); }
/* SOP 가이드 ②: GNB 우측 퀵링크 (메뉴 + 전화 노출) — 배경 없는 클린 화이트, 컬러 포인트는 아이콘 뱃지만 */
.sop-gnb-right { margin-left:auto; display:flex; align-items:center; align-self:stretch; padding:0 6px; gap:2px; }
.sop-gnb-right a { padding:12px 13px; font-weight:700; font-size:14px; color:var(--sop-gray-900); text-decoration:none; display:inline-flex; align-items:center; gap:7px; }
/* 메뉴별 색 다른 원형 아이콘 (extend sop_gnb_icon) */
.sop-gnb-right .gic { width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px !important; color:#fff; flex:none; box-shadow:0 1px 3px rgba(0,0,0,.18); }
.sop-gnb-right .gic-guide { background:#e8c37a; color:#3a2c07; }
.sop-gnb-right .gic-card { background:#0f1c6e; }
.sop-gnb-right .gic-faq { background:#ff8a3d; }
.sop-gnb-right .gic-sim { background:#2189ff; }
.sop-gnb-right .gic-zero { background:#e0334c; }
.sop-gnb-right a:hover { color:var(--sop-blue); }
.sop-gnb-right .tel { display:flex; align-items:center; gap:6px; padding:0 12px; font-family:var(--sop-font-en) !important; font-size:15px; font-weight:700; color:var(--sop-navy); white-space:nowrap; }
.sop-gnb-right .tel .ic { width:19px; height:19px; border-radius:50%; background:var(--sop-blue); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:10px; }
#gnb.sop-gnb.gnd_fixed { position:fixed; top:0; left:0; right:0; z-index:990; box-shadow:0 2px 10px rgba(0,0,0,.07); }

/* 전체 카테고리 — GNB 아래 풀폭 메가메뉴 (카테고리 컬럼 + 파란 밑줄 타이틀) */
#gnb.sop-gnb { position:relative; }
.sop-gnb .all_cate { position:static; }
.sop-gnb .allc_bd { display:none; position:absolute; left:0; right:0; top:100%; z-index:995; background:#fff; border-top:1px solid var(--sop-gray-100); box-shadow:0 30px 50px rgba(0,0,0,.10); border-radius:0; padding:44px 0 56px; }
.sop-gnb .allc_bd .con_bx { max-width:1280px; margin:0 auto; padding:0 40px; display:block; }
.sop-gnb .allc_bd .con_bx > ul { display:grid; grid-template-columns:repeat(5,1fr); gap:0 50px; list-style:none; margin:0; padding:0; }
.sop-gnb .allc_bd li { list-style:none; }
.sop-gnb .allc_bd .cate_tit { font-weight:800; font-size:17px; letter-spacing:-.3px; color:var(--sop-gray-900); text-decoration:none; display:inline-block; margin-bottom:20px; padding-bottom:12px; position:relative; }
.sop-gnb .allc_bd .cate_tit:after { content:''; position:absolute; left:0; bottom:0; width:42px; height:3px; background:var(--sop-blue); }
.sop-gnb .allc_bd .cate_tit:hover { color:var(--sop-navy); }
.sop-gnb .allc_bd .c_box ul { display:block; margin:0; padding:0; }
.sop-gnb .allc_bd li li a { font-size:14px; color:var(--sop-gray-700); text-decoration:none; display:block; padding:8px 0; }
.sop-gnb .allc_bd li li a:hover { color:var(--sop-blue); }
.sop-gnb .allc_clese { display:none; }

/* ── KV — 관리자 배너 슬라이더(#mbn_wrap) — 가이드 ⑤ 인디케이터 위치 고정 ── */
/* 등록한 배너 이미지의 비율 그대로 풀폭 표시 (세로 큰 이미지를 올리면 ujuclub처럼 대형 히어로가 됨) */
#mbn_wrap { position:relative; background:#f4f5f7; height:auto !important; overflow:hidden; }
#mbn_wrap .mbn_img { height:auto !important; }
#mbn_wrap .mbn_img img { display:block; width:100%; height:auto; }
#mbn_wrap .mbn_img a { display:block; }
#mbn_wrap .slick-slide, #mbn_wrap .slick-slide a { height:auto !important; }
/* 배너 오버레이 텍스트 (배너관리 뱃지/타이틀/설명) — ujuclub 히어로 구성 */
#mbn_wrap .mbn_img { position:relative; }
#mbn_wrap .mbn-ov { position:absolute; inset:0; display:flex; align-items:center; pointer-events:none; }
#mbn_wrap .mbn-ov-in { max-width:1280px; width:100%; margin:0 auto; padding:0 48px; text-align:left; }
#mbn_wrap .ov-badge { display:inline-block; background:#1c2e6e; color:#ffd83d; font-size:15px; font-weight:700; border-radius:8px; padding:8px 18px; letter-spacing:-.2px; margin-bottom:18px; }
#mbn_wrap .ov-title { margin:0; line-height:1.25; letter-spacing:-1.2px; }
#mbn_wrap .ov-title .t1 { display:block; font-size:44px; font-weight:900; color:#111827; }
#mbn_wrap .ov-title .t2 { display:block; font-size:44px; font-weight:900; color:#2189ff; }
#mbn_wrap .ov-desc { margin:22px 0 0; font-size:17px; line-height:1.6; color:#374151; }
#mbn_wrap .ov-desc b { color:#111827; }
@media (max-width:900px){
  #mbn_wrap .mbn-ov-in { padding:0 22px; }
  #mbn_wrap .ov-badge { font-size:12px; padding:6px 12px; margin-bottom:10px; }
  #mbn_wrap .ov-title .t1, #mbn_wrap .ov-title .t2 { font-size:24px; }
  #mbn_wrap .ov-desc { font-size:13px; margin-top:10px; }
}

/* ujuclub 방식: 양끝 중앙 원형 화살표 + 하단 중앙 알약 인디케이터 + 일시정지 */
#mbn_wrap .slick-arrow { width:36px !important; height:36px !important; top:50% !important; margin:-18px 0 0 0 !important; padding:0 !important; border-radius:50%; background:rgba(0,0,0,.1) !important; box-shadow:none !important; opacity:1 !important; z-index:5; transition:.15s; display:flex !important; align-items:center; justify-content:center; }
#mbn_wrap .slick-arrow:hover { background:rgba(0,0,0,.22) !important; }
#mbn_wrap .slick-prev { left:16px !important; }
#mbn_wrap .slick-next { right:16px !important; }
#mbn_wrap .slick-arrow:before { font-family:'Ionicons' !important; font-size:20px !important; color:#000 !important; opacity:1 !important; line-height:1 !important; display:block; margin:0 !important; }
#mbn_wrap .slick-prev:before { content:'\f3d2' !important; }
#mbn_wrap .slick-next:before { content:'\f3d3' !important; }
/* 일시정지 버튼 (dots 옆, JS가 append) */
#mbn_wrap .slick-dots .mbn-pause { width:24px; height:24px; border-radius:50%; border:0; background:rgba(0,0,0,.1); color:#000; font-size:8px; font-weight:700; letter-spacing:1px; line-height:1; cursor:pointer; margin-left:8px; display:flex; align-items:center; justify-content:center; padding:0 0 0 1px; transition:.15s; }
#mbn_wrap .slick-dots .mbn-pause:hover { background:rgba(0,0,0,.22); }
#mbn_wrap .slick-dots { position:absolute; left:50% !important; right:auto !important; transform:translateX(-50%); bottom:18px; width:auto !important; height:auto !important; background:none; border-radius:0; padding:0; margin:0 !important; list-style:none; display:flex; align-items:center; gap:8px; line-height:1 !important; }
#mbn_wrap .slick-dots li { width:8px; height:8px; margin:0 !important; padding:0; transition:.2s; }
#mbn_wrap .slick-dots li button { width:8px; height:8px; padding:0; border:0; border-radius:9999px; background:rgba(0,0,0,.3); font-size:0; text-indent:-9999px; cursor:pointer; display:block; transition:.2s; }
#mbn_wrap .slick-dots li.slick-active { width:24px; }
#mbn_wrap .slick-dots li.slick-active button { width:24px; background:#000; }
#mbn_wrap .slick-dots li button:before { display:none; content:none; }
/* KV 폴백 (배너 미등록 시) */
.sop-kv { background:linear-gradient(120deg,#eef3fa 0%, #dfe9f7 55%, #cfdff2 100%); }
.sop-kv-inner { max-width:1280px; margin:0 auto; padding:76px 24px 70px; position:relative; min-height:400px; display:flex; flex-direction:column; justify-content:center; box-sizing:border-box; }
.sop-kv .eyebrow { font-size:17px; line-height:1.4; color:var(--sop-gray-500); margin:0 0 14px; }
.sop-kv h2 { font-size:var(--sop-disp3); line-height:var(--sop-disp3-lh); font-weight:900; letter-spacing:-1px; margin:0; color:var(--sop-gray-900); }
.sop-kv .sub { margin:16px 0 0; font-size:17px; line-height:1.5; color:var(--sop-gray-500); }
.sop-kv .cta { display:inline-flex; align-items:center; margin-top:30px; background:var(--sop-gray-900); color:#fff; border-radius:9999px; padding:13px 32px; font-size:15px; font-weight:700; width:fit-content; cursor:pointer; text-decoration:none; }
.sop-kv-dots { position:absolute; left:50%; transform:translateX(-50%); bottom:20px; display:flex; align-items:center; gap:8px; background:rgba(0,0,0,.35); border-radius:9999px; padding:9px 16px; }
.sop-kv-dots i { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.5); }
.sop-kv-dots i.on { background:#fff; }
.sop-kv-dots .arrow { font-size:10px; color:#fff; margin-left:4px; line-height:1; }

/* ── 퀵링크 (카테고리별 둘러보기 — 2줄 랩 그리드, 레퍼런스 동일) ── */
.sbn01 { padding:52px 0 42px; }
.sop-cql-head { max-width:1280px; margin:0 auto 28px; padding:0 24px; display:flex; align-items:flex-end; justify-content:space-between; }
.sop-cql-head h3 { font-size:28px; font-weight:900; color:var(--sop-gray-900); margin:0; letter-spacing:-0.7px; }
.sop-cql-head .cnt { font-size:13px; color:var(--sop-gray-500); }
.sop-cql-grid { max-width:1280px; margin:0 auto; padding:0 24px; display:flex; flex-wrap:wrap; justify-content:center; gap:26px 20px; }
.sop-cql-grid .bnimg { width:118px; text-align:center; padding:6px 0 0 !important; margin:0 !important; box-sizing:border-box; background:none !important; box-shadow:none !important; border-radius:0 !important; overflow:visible !important; float:none !important; position:relative; cursor:pointer; }
.sop-cql-grid .bnimg a { text-decoration:none !important; color:var(--sop-gray-900) !important; display:block; }
/* B안: 소프트 그라데이션 원 + 호버 시 블루 링 (이미지는 multiply로 흰 배경 흡수) */
.sop-cql-grid .bnimg:before { content:''; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:100px; height:100px; border-radius:50%; background:radial-gradient(circle at 32% 28%, #fbfcfe 0%, #eef1f6 100%); transition:.18s; }
.sop-cql-grid .bnimg:after { content:''; position:absolute; top:2px; left:50%; transform:translateX(-50%); width:108px; height:108px; border-radius:50%; border:2px solid transparent; transition:.18s; pointer-events:none; }
.sop-cql-grid .bnimg:hover:before { background:radial-gradient(circle at 32% 28%, #f4f8ff 0%, #e3edfc 100%); }
.sop-cql-grid .bnimg:hover:after { border-color:var(--sop-blue); }
.sop-cql-grid .bnimg img.imgbx { position:relative; width:100px !important; height:100px !important; object-fit:contain; border-radius:50% !important; background:none !important; padding:19px; margin:0 !important; box-sizing:border-box; mix-blend-mode:multiply; transition:.18s; display:inline-block; }
.sop-cql-grid .bnimg:hover img.imgbx { transform:scale(1.08); }
.sop-cql-grid .bntxt { font-size:14px !important; font-weight:700 !important; color:var(--sop-gray-900) !important; margin-top:12px; line-height:1.35; word-break:keep-all; text-decoration:none !important; letter-spacing:-.2px; transition:.15s; }
.sop-cql-grid .bnimg:hover .bntxt { color:var(--sop-blue) !important; }

/* ── 섹션 타이틀 ────────────────────────────── */
.cont_wrap2 { max-width:1280px; margin:0 auto; padding:64px 24px 24px; }
.sop-video-grid { margin-top:36px; }
/* 마지막 섹션(블로그)과 푸터 사이 여유 */
.cont_wrap2.sop-blog { padding-bottom:120px; }
.mtit .titxt, .sop-sect-tit { font-family:var(--sop-font-kr) !important; font-size:30px !important; line-height:1.3; font-weight:900 !important; color:var(--sop-gray-900); letter-spacing:-0.7px; }

/* ── 상품 카드 (samsung-gudok product-card 규격 — 순정 dl 진열 마크업 위에 적용) ── */
.pr_desc ul { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; list-style:none; margin:0; padding:0; }
/* 베스트 탭: 표시 여부는 스킨 JS가 display:grid/none으로 제어 (순정 탭 로직 유지) */
.bestca ul { display:none; grid-template-columns:repeat(4,1fr); gap:20px; list-style:none; margin:0; padding:0; }
.bestca ul li.items1_cont1, .pr_desc ul li { border:0 !important; width:auto !important; height:auto !important; margin:0 !important; padding:0 !important; float:none !important; }
.pr_slide .prli { padding:0 10px; box-sizing:border-box; }
a.sop-card { display:block; text-decoration:none !important; color:inherit; position:relative; background:#fff; border:1px solid var(--sop-gray-200); border-radius:16px; overflow:hidden; transition:.15s; }
a.sop-card:hover { box-shadow:0 10px 28px rgba(17,24,39,.09); transform:translateY(-2px); }
/* 순정 스타일(.pr_desc li dl 등) 무력화 + 지금 카드 레이아웃: dd 순서는 CSS order로 재배열 */
a.sop-card dl { display:flex; flex-direction:column; margin:0; padding:0 0 16px !important; }
a.sop-card dd { margin:0; padding:0; text-align:left; height:auto !important; line-height:normal !important; }
a.sop-card .pimg { order:0; position:relative; display:block; width:auto !important; height:auto !important; margin:0 !important; background:#fff; aspect-ratio:1/1; overflow:hidden; text-align:center; border-bottom:1px solid var(--sop-gray-100); }
a.sop-card .pimg img { width:100% !important; height:100% !important; object-fit:contain; }
/* SOP 가이드 ⑩ 플래그: 우상단 고정, 최대 2개 세로 스택 */
.sop-flags { position:absolute; top:10px; right:10px; display:flex; flex-direction:column; gap:6px; z-index:2; }
.sop-flag { width:46px; height:46px; border-radius:50%; background:var(--sop-blue); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:11px; font-weight:700; line-height:1.25; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.sop-flag.partner { background:#fff; color:var(--sop-navy); border:1.5px solid var(--sop-navy); font-size:8px; box-sizing:border-box; }
.sop-flag.partner b { font-size:9px; }
/* 제품명 → 스펙 → SKU 순 노출 (마크업은 순정 순서 유지) */
a.sop-card .pname { order:1; margin:16px 16px 0 !important; font-size:14px; font-weight:700; line-height:1.4 !important; color:var(--sop-gray-900); min-height:2.8em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
a.sop-card .pspec { order:2; margin:2px 16px 0 !important; font-size:12px; color:var(--sop-gray-500); min-height:1.3em; }
a.sop-card .poption { order:3; margin:3px 16px 0 !important; height:auto !important; }
a.sop-card .poption span { font-size:12px !important; color:var(--sop-gray-500) !important; font-family:var(--sop-font-en) !important; margin:0 !important; height:auto !important; line-height:normal !important; }
/* SOP 가이드 ⑨ 가격 표기: 월 구독료(굵게) + 최대혜택가(파랑) + 포인트 — tit 라벨은 혜택가만 노출 */
a.sop-card .price1 { order:4; margin:12px 16px 0 !important; padding:10px 0 0 !important; border-top:1px solid var(--sop-gray-100) !important; height:auto !important; line-height:normal !important; text-align:left !important; color:var(--sop-gray-900) !important; }
a.sop-card .price1 .tit { display:none !important; }
a.sop-card .price1 .mpr { display:inline-block; font-size:18px !important; font-weight:800 !important; color:var(--sop-gray-900); margin:0; }
a.sop-card .price1 .mpr span { font-size:14px !important; font-weight:700 !important; margin-left:1px; }
a.sop-card .price2 { order:5; margin:4px 16px 0 !important; padding:0 !important; height:auto !important; line-height:normal !important; text-align:left !important; font-size:14px !important; font-weight:700; color:var(--sop-blue) !important; }
a.sop-card .price2 .tit { position:static !important; display:inline; font-weight:700; margin-right:2px; }
a.sop-card .price2 .spr { display:inline-block; font-size:14px !important; font-weight:700 !important; margin:0; }
a.sop-card .price2 .spr span { font-size:14px !important; font-weight:700 !important; }
a.sop-card .ppoint { order:6; margin:6px 16px 0 !important; font-size:12px; color:var(--sop-gray-500); min-height:1.2em; }

/* SOP 가이드: 캐러셀 하단 진행바 + 원형 화살표 */
.sop-carousel-foot { display:flex; align-items:center; margin-top:24px; }
.sop-progress { flex:0 0 220px; height:3px; background:var(--sop-gray-200); position:relative; overflow:hidden; }
.sop-progress i { position:absolute; left:0; top:0; height:3px; width:0; background:var(--sop-gray-900); transition:width .3s; }
.sop-arrows { margin-left:auto; display:flex; gap:10px; }
.sop-arrows .slick-arrow { position:static !important; width:36px; height:36px; border:1px solid var(--sop-gray-200); border-radius:50%; background:#fff; transform:none !important; margin:0; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.sop-arrows .slick-arrow:before { font-family:'Ionicons' !important; font-size:17px !important; color:var(--sop-gray-700); opacity:1; line-height:1; }
.sop-arrows .slick-prev:before { content:'\f3d2'; }
.sop-arrows .slick-next:before { content:'\f3d3'; }
.sop-arrows .slick-arrow:hover { border-color:var(--sop-gray-900); }

/* ── 메인 유튜브 영상 (영상으로 만나는 우리 이야기) ── */
.sop-video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:36px 24px; margin-top:30px; }
.sop-video-card { display:block; text-decoration:none !important; color:inherit; }
.sop-video-card .thumb { position:relative; display:block; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:var(--sop-gray-100); }
.sop-video-card .thumb img { width:100%; height:100%; object-fit:cover; transition:.25s; }
.sop-video-card:hover .thumb img { transform:scale(1.04); }
.sop-video-card .badge { position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:5px; background:rgba(0,0,0,.65); color:#fff; font-size:12px; font-weight:700; border-radius:9999px; padding:5px 12px; }
.sop-video-card .badge:before { content:'▶'; font-size:9px; }
.sop-video-card .play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.92); box-shadow:0 4px 14px rgba(0,0,0,.25); }
.sop-video-card .play:before { content:''; position:absolute; left:55%; top:50%; transform:translate(-50%,-50%); border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent var(--sop-gray-900); }
.sop-video-card .subj { display:block; margin-top:14px; font-size:17px; font-weight:700; line-height:1.4; color:var(--sop-gray-900); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sop-video-card .src { display:block; margin-top:6px; font-size:13px; color:var(--sop-gray-500); }
/* 블로그 카드: 영상 카드 스타일 재사용, 뱃지 아이콘만 교체 */
.sop-blog-card .badge:before { content:'✎'; font-size:11px; }
.sop-insta-card .badge { background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af); }
.sop-insta-card .badge:before { content:'◎'; font-size:11px; }

/* 더보기 버튼 */
.pr_more { text-align:center; margin:26px 0 8px; }
.pr_more .btnMore { display:inline-block; border:1px solid var(--sop-gray-200); border-radius:9999px; padding:11px 34px; font-size:14px; font-weight:600; color:var(--sop-gray-700); text-decoration:none; background:#fff; }
.pr_more .btnMore:hover { border-color:var(--sop-navy); color:var(--sop-navy); }

/* ── 플로팅 상담바 (SOP 가이드 ⑦ — 문구 고정) ── */
.fxbar { position:fixed; left:50% !important; transform:translateX(-50%); bottom:16px !important; top:auto !important; width:min(1060px, calc(100% - 28px)) !important; background:linear-gradient(90deg,#2b5ce6 0%, #1428a0 100%) !important; border-radius:9999px; box-shadow:0 10px 30px rgba(20,40,160,.35); color:#fff; padding:10px 12px 10px 26px !important; z-index:1000; height:auto !important; box-sizing:border-box; }
.fxbar p { margin:0 !important; padding:0 !important; line-height:1.3 !important; }
.fxbar .cstel, .fxbar .formbx, .fxbar .wrtbx, .fxbar form { padding:0 !important; margin:0 !important; height:auto !important; min-height:0 !important; }
.fxbar .fxbar_cont { display:flex !important; align-items:center; gap:14px; width:auto !important; max-width:none !important; padding:0 !important; flex-wrap:nowrap; height:auto !important; min-height:0 !important; }
.fxbar .cstel { display:flex !important; align-items:baseline; gap:8px; white-space:nowrap; width:auto !important; float:none !important; flex:none; padding:0 !important; background:none !important; height:auto !important; }
.fxbar .cstel .stxt { font-size:14px !important; font-weight:700; color:#fff !important; }
.fxbar .cstel .tel { font-family:var(--sop-font-en) !important; font-size:19px !important; font-weight:700; color:#fff !important; }
.fxbar .formbx { flex:1; min-width:0; float:none !important; width:auto !important; }
.fxbar .formbx form { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.fxbar .wrtbx { display:flex !important; align-items:center; gap:8px; flex:1; min-width:0; flex-wrap:nowrap; background:none !important; border:0 !important; padding:0 !important; float:none !important; }
.fxbar .fxagree { display:inline-flex !important; align-items:center; gap:5px; font-size:12px !important; color:#fff !important; white-space:nowrap; flex:none; margin:0 !important; }
.fxbar .fxagree label { color:#fff !important; font-size:12px !important; cursor:pointer; display:inline-flex; align-items:center; white-space:nowrap; margin:0 !important; padding:0 !important; }
.fxbar .fxagree label:before, .fxbar .fxagree label:after { display:none !important; content:none !important; }
.fxbar .fxagree input[type=checkbox] { display:inline-block !important; width:15px; height:15px; accent-color:#fff; margin:0 !important; position:static !important; }
.fxbar .fxbt_more { color:#fff !important; font-size:12px !important; text-decoration:underline !important; white-space:nowrap; flex:none; }
.fxbar .wrtbx input[type=text] { flex:1 !important; width:auto !important; min-width:70px; height:40px !important; line-height:40px !important; border:0 !important; border-radius:9999px; padding:0 16px !important; font-size:14px; background:rgba(255,255,255,.95) !important; box-sizing:border-box; color:var(--sop-gray-900) !important; }
.fxbar .wrtbx input[type=text]::placeholder { color:var(--sop-gray-500); }
/* 신청하기 버튼 — 입력칸과 같은 높이·라운드 캡슐, 흰 배경 (순정 .formbx .formbtn 특이성 대응) */
.fxbar .formbx .formbtn { flex:none; width:auto !important; height:40px !important; line-height:40px !important; border:0 !important; border-radius:9999px !important; background:#fff !important; color:var(--sop-navy) !important; font-size:14px !important; font-weight:800; padding:0 30px !important; cursor:pointer; white-space:nowrap; float:none !important; font-family:var(--sop-font-kr) !important; }
.fxbar .formbx .formbtn:hover { background:var(--sop-gray-100) !important; }
.fxbar .fxbBtn { display:none !important; }

/* ── 기타 정리 ─────────────────────────────── */
/* 사이드 퀵메뉴(최근 본 상품) 숨김 — 레퍼런스 사이트에 없음 */
#qcrM, .quick { display:none !important; }

/* ── 반응형 ─────────────────────────────────── */
@media (max-width:768px) {
    .sop-header .sop-inner { flex-wrap:wrap; gap:10px; padding:0 16px; }
    .sop-search { order:3; max-width:none; flex-basis:100%; }
    .sop-hd-right { gap:12px; }
    .sop-hd-tel .num { font-size:14px; }
    #gnb.sop-gnb .sop-gnb-flex { overflow-x:auto; padding:0 6px; }
    .sop-gnb-left .sop-allcate, .sop-gnb-left > a, .sop-gnb-right a { padding:11px 10px; white-space:nowrap; }
    .sop-gnb-right .tel { display:none; }
    .sop-kv-inner { padding:44px 20px 56px; min-height:280px; }
    .pr_desc ul, .bestca ul { grid-template-columns:repeat(2,1fr); gap:12px; }
    .sop-video-grid { grid-template-columns:1fr; gap:26px; }
    .mtit .titxt, .sop-sect-tit { font-size:22px !important; }
    .sop-cql-head h3 { font-size:20px; }
    .sop-cql-grid { gap:18px 10px; padding:0 12px; }
    .sop-cql-grid .bnimg { width:82px; padding-top:4px; }
    .sop-cql-grid .bnimg:before { top:4px; width:72px; height:72px; }
    .sop-cql-grid .bnimg:after { top:1px; width:78px; height:78px; }
    .sop-cql-grid .bnimg img.imgbx { width:72px !important; height:72px !important; border-radius:50%; padding:13px; }
    .sop-cql-grid .bntxt { font-size:12px !important; margin-top:8px; }
    .fxbar { border-radius:18px; padding:12px 14px !important; }
    .fxbar .fxbar_cont { flex-wrap:wrap; gap:8px; }
    .fxbar .formbx form { flex-wrap:wrap; }
    .fxbar .wrtbx { flex-wrap:wrap; }
    .fxbar .fxagree { order:0; flex-basis:100%; }
    .fxbar .wrtbx input[type=text] { flex-basis:calc(50% - 20px); }
    .fxbar .formbtn { width:100%; }
}

/* ── 메인 상담·후기 라이브 보드 (가상 데이터 순환) ─────────── */
.sop-cst-band { background:linear-gradient(180deg,#eaf2ff 0%,#f7faff 55%,#fff 100%); padding:76px 0 84px; margin-top:80px; }
.sop-cst-band .cont_wrap2.sop-consult { margin:0 auto; }
.sop-consult .sop-cst-tit .eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:#fff; background:linear-gradient(90deg,#1268e9,#1428a0); border-radius:9999px; padding:7px 16px 7px 12px; margin-bottom:14px; box-shadow:0 4px 14px rgba(18,104,233,.30); }
.sop-consult .sop-cst-tit .eyebrow .live { position:relative; width:8px; height:8px; border-radius:50%; background:#7fffcf; }
.sop-consult .sop-cst-tit .eyebrow .live:after { content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid rgba(127,255,207,.5); animation:sopCstPulse 1.8s ease-out infinite; }
@keyframes sopCstPulse { 0%{transform:scale(.6);opacity:1} 100%{transform:scale(1.5);opacity:0} }
.sop-consult .sop-cst-tit .titxt { display:block !important; }
.sop-consult .sop-cst-tit .titxt em { font-style:normal; background:linear-gradient(90deg,#1268e9,#1428a0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.sop-consult .sop-cst-tit .sctxt { margin-top:10px; font-size:16px; color:#555; }

.sop-cst-board { margin-top:42px; display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.sop-cst-panel { border-radius:26px; padding:24px 22px 22px; }
.sop-cst-panel .phead { display:flex; align-items:center; gap:10px; padding:0 6px 16px; }
.sop-cst-panel .phead .pico { display:inline-flex; width:32px; height:32px; border-radius:10px; align-items:center; justify-content:center; font-size:14px; }
.sop-cst-panel .phead h3 { font-size:18px; font-weight:900; color:#000; margin:0; }
.sop-cst-panel .phead .cnt { margin-left:auto; font-size:12.5px; font-weight:800; border-radius:9999px; padding:5px 12px; }
.sop-cst-panel.pl { background:#dce9fd; border:1px solid #c5d9f9; box-shadow:0 18px 44px rgba(20,40,160,.12); }
.sop-cst-panel.pl .phead .pico, .sop-cst-panel.pl .phead .cnt { background:#c3d8f9; }
.sop-cst-panel.pl .phead .cnt { color:#0b50c0; }
.sop-cst-panel.pr { background:#fff; border:1px solid #e7eefb; box-shadow:0 18px 44px rgba(20,40,160,.10); }
.sop-cst-panel.pr .phead .pico, .sop-cst-panel.pr .phead .cnt { background:#fff3d6; }
.sop-cst-panel.pr .phead .cnt { color:#9a6b00; }

.sop-cst-feed { position:relative; height:392px; overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%); }
.sop-cst-flow { display:flex; flex-direction:column; gap:10px; }
.sop-cst-flow.f1 { animation:sopCstUp 38s linear infinite; }
.sop-cst-flow.f2 { animation:sopCstUp 46s linear infinite; }
.sop-cst-feed:hover .sop-cst-flow { animation-play-state:paused; }
@keyframes sopCstUp { to { transform:translateY(calc(-50% - 5px)); } }
@media (prefers-reduced-motion: reduce) {
    .sop-cst-flow { animation:none !important; }
    .sop-cst-feed { overflow-y:auto; -webkit-mask-image:none; mask-image:none; }
}

.sop-cst-row { display:flex; align-items:center; gap:12px; background:#fff; border-radius:14px; padding:13px 16px; box-shadow:0 2px 8px rgba(10,25,90,.12); }
.sop-cst-row .ico { flex:none; width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.sop-cst-row .ico svg { width:20px; height:20px; }
.sop-cst-row .ico.c1 { background:#e5efff; } .sop-cst-row .ico.c1 svg { stroke:#1268e9; }
.sop-cst-row .ico.c2 { background:#e2f8ee; } .sop-cst-row .ico.c2 svg { stroke:#00b26b; }
.sop-cst-row .ico.c3 { background:#fff0e0; } .sop-cst-row .ico.c3 svg { stroke:#ff7a00; }
.sop-cst-row .ico.c4 { background:#f1eaff; } .sop-cst-row .ico.c4 svg { stroke:#7a4de8; }
.sop-cst-row .ico.c5 { background:#e0f5fb; } .sop-cst-row .ico.c5 svg { stroke:#0099c2; }
.sop-cst-row .bx { flex:1; min-width:0; }
.sop-cst-row .subj { display:block; font-size:14.5px; font-weight:700; color:#000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sop-cst-row .meta { display:flex; align-items:center; gap:6px; margin-top:4px; font-size:12px; color:#888; white-space:nowrap; overflow:hidden; }
.sop-cst-row .meta .st { flex:none; font-weight:800; font-size:11px; border-radius:9999px; padding:2.5px 9px; }
.sop-cst-row .st.st1 { color:#00834e; background:#e2f8ee; }
.sop-cst-row .st.st2 { color:#b25400; background:#fff0e0; }
.sop-cst-row .st.st3 { color:#0b50c0; background:#e5efff; }
.sop-cst-row .ago { margin-left:auto; flex:none; font-size:12px; color:#888; }
.sop-cst-row.new { box-shadow:0 0 0 2px rgba(18,104,233,.40), 0 2px 10px rgba(10,25,90,.14); }
.sop-cst-row.new .ago { color:#1268e9; font-weight:800; }

.sop-cst-rrow { background:#f8faff; border:1px solid #eef2fb; border-radius:14px; padding:14px 17px; }
.sop-cst-rrow .rtop { display:flex; align-items:center; gap:7px; }
.sop-cst-rrow .stars { font-size:12.5px; letter-spacing:1.5px; color:#ffb400; }
.sop-cst-rrow .score { font-size:12px; font-weight:800; color:#9a6b00; background:#fff3d6; border-radius:9999px; padding:2px 8px; }
.sop-cst-rrow .rtxt { margin:7px 0 0; font-size:14.5px; font-weight:500; color:#222; line-height:1.45; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sop-cst-rrow .rmeta { margin:6px 0 0; font-size:12.5px; color:#888; }
.sop-cst-rrow .rmeta b { font-weight:700; color:#1268e9; }

.sop-cst-cta { margin-top:38px; text-align:center; }
.sop-cst-cta a { display:inline-flex; align-items:center; gap:10px; background:linear-gradient(90deg,#1268e9,#1428a0); color:#fff !important; text-decoration:none !important; font-size:16.5px; font-weight:800; border-radius:9999px; padding:16px 40px; box-shadow:0 10px 26px rgba(18,104,233,.35); transition:.2s; }
.sop-cst-cta a:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(18,104,233,.45); }
.sop-cst-cta a .arw { font-weight:400; }
.sop-cst-cta p { margin-top:13px; font-size:13.5px; color:#888; }

@media (max-width:900px) {
    .sop-cst-board { grid-template-columns:1fr; }
}

/* ── 렌탈신청 폼 버튼 (렌탈간편신청 / 취소) ─────────── */
.sop-rtl-btns { text-align:center; }
.sop-rtl-btns .go { background:linear-gradient(90deg,#1268e9,#1428a0) !important; border:0 !important; border-radius:9999px !important; color:#fff !important; font-family:var(--sop-font-kr) !important; font-size:17px !important; font-weight:800 !important; height:58px !important; line-height:58px !important; padding:0 48px !important; box-shadow:0 10px 26px rgba(18,104,233,.35); cursor:pointer; transition:.2s; vertical-align:middle; }
.sop-rtl-btns .go:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(18,104,233,.45); }
.sop-rtl-btns .cancel { border:1px solid #d9d9d9 !important; border-radius:9999px !important; background:#fff !important; color:#555 !important; font-family:var(--sop-font-kr) !important; font-size:16px !important; font-weight:700 !important; height:58px !important; line-height:56px !important; padding:0 38px !important; vertical-align:middle; }
.sop-rtl-btns .cancel:hover { border-color:#999 !important; color:#111 !important; }

/* ── 신청 완료 페이지 안내 박스 ─────────── */
.rtlf_result .sop-rr-notice { max-width:560px; margin:26px auto 0; padding:16px 22px; background:#fff7e8; border:1px solid #f5dfb0; border-radius:14px; font-size:14.5px; line-height:1.6; color:#7a5b13; text-align:center; }
.rtlf_result .sop-rr-join { max-width:560px; margin:18px auto 0; padding:20px 22px; background:#eef4fe; border-radius:14px; text-align:center; }
.rtlf_result .sop-rr-join p { font-size:14.5px; color:#334; margin:0 0 12px; }
.rtlf_result .sop-rr-join a { display:inline-block; background:#1268e9; color:#fff !important; text-decoration:none !important; font-size:14px; font-weight:700; border-radius:9999px; padding:10px 26px; transition:.2s; }
.rtlf_result .sop-rr-join a:hover { background:#0b50c0; }

/* 플로팅바 placeholder — 순정 style.css의 흰색 !important 무력화 (흰 입력창 위 회색으로) */
.fxbar .formbx .wrtbx input[type=text]::-webkit-input-placeholder { color:#8a94a6 !important; }
.fxbar .formbx .wrtbx input[type=text]::-moz-placeholder { color:#8a94a6 !important; }
.fxbar .formbx .wrtbx input[type=text]:-ms-input-placeholder { color:#8a94a6 !important; }
.fxbar .formbx .wrtbx input[type=text]::placeholder { color:#8a94a6 !important; }

/* 헤더 이미지 로고 (배너관리 > 기본 로고 등록 시) */
.sop-logo .sop-logo-img { display:block; max-height:52px; width:auto; }

/* AI consult button in floating bar (extend/sop.ai.php sop_ai_floating_button) - SOP blue family, shine sweep + glow pulse (TNC style) */
.fxbar .formbx .sop-ai-fx { position:relative; overflow:hidden; flex:none; display:inline-flex; align-items:center; gap:8px; height:40px; border:0; border-radius:9999px; background:linear-gradient(135deg,#eaf4ff 0%,#bfdbfe 100%); color:var(--sop-navy); font-size:14px; font-weight:800; padding:0 18px 0 9px; cursor:pointer; white-space:nowrap; font-family:var(--sop-font-kr); box-shadow:0 0 0 0 rgba(125,211,252,.55), 0 4px 14px rgba(20,40,160,.25); animation:sopAiPulse 2.6s ease-out infinite; transition:transform .12s, background .12s; }
.fxbar .formbx .sop-ai-fx::after { content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,.75), transparent); transform:skewX(-20deg); animation:sopAiShine 3.2s ease-in-out infinite; pointer-events:none; }
.fxbar .formbx .sop-ai-fx i { position:relative; z-index:1; width:24px; height:24px; border-radius:50%; background:conic-gradient(from 210deg,var(--sop-navy),var(--sop-blue),#7dd3fc,var(--sop-navy)); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-style:normal; font-size:12px; box-shadow:0 0 0 2px rgba(255,255,255,.9); }
.fxbar .formbx .sop-ai-fx:hover { background:#fff; transform:translateY(-1px); }
@keyframes sopAiShine { 0% { left:-60%; } 55%,100% { left:135%; } }
@keyframes sopAiPulse { 0% { box-shadow:0 0 0 0 rgba(125,211,252,.55), 0 4px 14px rgba(20,40,160,.25); } 70% { box-shadow:0 0 0 9px rgba(125,211,252,0), 0 4px 14px rgba(20,40,160,.25); } 100% { box-shadow:0 0 0 0 rgba(125,211,252,0), 0 4px 14px rgba(20,40,160,.25); } }
@media (max-width:880px) { .fxbar .formbx .sop-ai-fx { width:100%; justify-content:center; } }
@media (prefers-reduced-motion:reduce) { .fxbar .formbx .sop-ai-fx, .fxbar .formbx .sop-ai-fx::after { animation:none; } }