/**
 * Joyn Shop v2 — Demo(교회 종합몰) 통합 스타일시트
 * Version: 2.0.3.1
 *
 * 이 파일은 joyn-shop-demo_3.html 시안을 v2 플러그인 페이지에서 재현합니다.
 * 모든 규칙은 body.joyn-shop-active 스코프로 제한되어 WP 사이트 다른 페이지에 영향을 주지 않습니다.
 * 변수는 v2 메인 CSS(joyn-shop.css)와 호환되는 --js-* prefix 체계를 사용합니다.
 *
 * v2.0.3.1: Astra/테마의 .site-header·.site-footer·.section·.hero 클래스 충돌 해결 —
 *           → .jsd-site-header·.jsd-site-footer·.jsd-section·.jsd-hero 로 rename.
 *           또한 chrome 래퍼에 viewport-full-width 트릭을 추가해서 테마 container의
 *           flex/grid/max-width 영향을 완전히 차단.
 */

/* ============================================================
   CHROME 보호 레이어 — 테마 container의 flex/grid/max-width 영향 차단
   ============================================================ */
.joyn-shop-chrome-top,
.joyn-shop-chrome-bottom {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 100vw !important;
    grid-column: 1 / -1 !important;
    box-sizing: border-box;
    /* 테마가 부모에 overflow-x:hidden을 걸어도 터널 통과 */
    z-index: 10;
}
.joyn-shop-chrome-top > *,
.joyn-shop-chrome-bottom > * {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
/* inner 래퍼는 max-width 1280px로 센터링 복원 */
.joyn-shop-chrome-top .header-inner,
.joyn-shop-chrome-top .gnav-inner,
.joyn-shop-chrome-bottom .jsd-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
}


:root{
  --js-n950:#060f1e;--js-n900:#0b1830;--js-n800:#0f2040;--js-n700:#162952;
  --js-n600:#1e3870;--js-n500:#2a4d96;--js-n400:#4068bb;--js-n200:#a4b8e0;
  --js-n100:#d0dcf4;--js-n50:#edf2fb;
  --js-g700:#7a5110;--js-g600:#a0681a;--js-g500:#c98e2e;--js-g400:#d9a84e;
  --js-g300:#e8c578;--js-g100:#f7e8c0;--js-g50:#fdf5e0;
  --js-cream:#faf8f4;--js-cream2:#f2ede4;
  --js-w:#fff;
  --js-t900:#0d1220;--js-t700:#2a3349;--js-t500:#556080;--js-t300:#8c9ab7;--js-t100:#c5ccda;
  --js-border:rgba(15,32,64,.09);--js-border-md:rgba(15,32,64,.16);
  --js-r4:4px;--js-r8:8px;--js-r12:12px;--js-r16:16px;--js-r24:24px;
  --js-sh-sm:0 1px 3px rgba(15,32,64,.08);
  --js-sh:0 2px 12px rgba(15,32,64,.10),0 1px 4px rgba(15,32,64,.06);
  --js-sh-lg:0 8px 32px rgba(15,32,64,.13),0 2px 8px rgba(15,32,64,.07);
  --js-bnav-active:#f97316;
}
/* Acts .acts-public-wrap.acts-v3 —tab-h / --tab-safe 와 동일 정책(상한 10px) */
body.joyn-shop-active{
  --js-tab-h:56px;
  --js-tab-safe:min(env(safe-area-inset-bottom,0px),10px);
  --js-bnav-space:calc(var(--js-tab-h) + var(--js-tab-safe));
}
.joyn-shop-active *,.joyn-shop-active *::before,.joyn-shop-active *::after{box-sizing:border-box}
body.joyn-shop-active{font-size:16px;-webkit-font-smoothing:antialiased}
body.joyn-shop-active{font-family:'Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--js-cream);color:var(--js-t700);line-height:1.6;min-height:100vh}
/* 모바일: 더블탭 줌 대기·클릭 지연 완화 — HC Page Loader 첫 탭 체감 개선 */
body.joyn-shop-active a[href]{touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,.08)}
.joyn-shop-active a{text-decoration:none;color:inherit}
.joyn-shop-active button{cursor:pointer;font-family:inherit;border:none;background:none}
.joyn-shop-active img{display:block;max-width:100%}
.joyn-shop-active ul{list-style:none;margin:0;padding:0}
.joyn-shop-active input,.joyn-shop-active select{font-family:inherit}
body.joyn-shop-spa .jsp-page{display:none}body.joyn-shop-spa .jsp-page.active{display:block}
.announce-bar{background:var(--js-n800);color:var(--js-g300);text-align:center;padding:9px 16px;font-size:13px;letter-spacing:.02em}
.announce-bar strong{color:var(--js-g400);font-weight:600}
.jsd-site-header{background:var(--js-w);border-bottom:1px solid var(--js-border);position:sticky;top:0;z-index:200}
.header-inner{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:20px;height:68px}
.logo{display:flex;align-items:center;gap:10px;cursor:pointer;flex-shrink:0}
.logo-emblem{width:38px;height:38px;background:var(--js-n800);border-radius:var(--js-r8);display:flex;align-items:center;justify-content:center}
.logo-emblem i{font-size:20px;color:var(--js-g400)}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-name{font-family:'Pretendard',sans-serif;font-size:18px;font-weight:700;color:var(--js-n800);letter-spacing:-.02em}
.logo-sub{font-size:10px;color:var(--js-t300);letter-spacing:.08em;text-transform:uppercase}
.header-search{flex:1;max-width:520px;position:relative}
.header-search input{width:100%;height:42px;background:var(--js-cream);border:1.5px solid var(--js-border-md);border-radius:var(--js-r24);padding:0 48px 0 18px;font-size:14px;color:var(--js-t700);outline:none;transition:border-color .2s}
.header-search input:focus{border-color:var(--js-n400)}
.header-search input::placeholder{color:var(--js-t300)}
.search-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;background:var(--js-n800);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--js-g400);font-size:15px}
.header-actions{display:flex;align-items:center;gap:4px;margin-left:auto;flex-shrink:0}
.hdr-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 10px;border-radius:var(--js-r8);color:var(--js-t500);transition:color .2s,background .2s;position:relative;cursor:pointer}
.hdr-btn:hover{color:var(--js-n700);background:var(--js-n50)}
.hdr-btn i{font-size:22px}
.hdr-btn span{font-size:11px;font-weight:500;white-space:nowrap}
.cart-badge{position:absolute;top:6px;right:6px;background:var(--js-g500);color:var(--js-w);font-size:10px;font-weight:700;padding:2px 5px;border-radius:10px;min-width:18px;text-align:center;line-height:1.4}
.gnav{background:var(--js-n800);border-bottom:1px solid rgba(255,255,255,.06)}
.gnav-inner{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;overflow-x:auto;scrollbar-width:none}
.gnav-inner::-webkit-scrollbar{display:none}
.gnav .gnav-item{display:flex;align-items:center;gap:7px;padding:14px 16px;color:rgba(255,255,255,.70);font-size:13.5px;font-weight:500;white-space:nowrap;border-bottom:2.5px solid transparent;transition:color .2s,border-color .2s;cursor:pointer;flex-shrink:0}
.gnav .gnav-item i{font-size:15px}
.gnav .gnav-item:hover,.gnav .gnav-item.active{color:var(--js-g300);border-bottom-color:var(--js-g500)}
.gnav .gnav-item.hot{color:var(--js-g300)}
.jsd-hero{background:var(--js-n800);position:relative;overflow:hidden;min-height:460px;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0}
.hero-bg::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 90% at 60% 50%,rgba(201,142,46,.12) 0%,transparent 70%)}
.hero-dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1px);background-size:32px 32px}
.hero-cross{position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:400px;height:400px;opacity:.04}
.hero-cross::before,.hero-cross::after{content:'';position:absolute;background:var(--js-w)}
.hero-cross::before{left:50%;top:0;width:4px;height:100%;transform:translateX(-50%)}
.hero-cross::after{top:50%;left:0;height:4px;width:100%;transform:translateY(-50%)}
.hero-inner{max-width:1280px;margin:0 auto;padding:60px 24px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;position:relative;z-index:2;width:100%}
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(201,142,46,.18);border:1px solid rgba(201,142,46,.35);color:var(--js-g300);font-size:12px;font-weight:600;padding:5px 12px;border-radius:var(--js-r24);margin-bottom:20px;letter-spacing:.04em}
.hero-title{font-family:'Pretendard',sans-serif;font-size:42px;font-weight:700;color:var(--js-w);line-height:1.25;letter-spacing:-.03em;margin-bottom:16px}
.hero-title em{color:var(--js-g400);font-style:normal;display:block}
.hero-desc{color:var(--js-n200);font-size:15px;line-height:1.8;margin-bottom:28px;max-width:440px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.btn-gold{display:inline-flex;align-items:center;gap:8px;background:var(--js-g500);color:var(--js-w);padding:13px 24px;border-radius:var(--js-r8);font-size:14px;font-weight:600;transition:background .2s;cursor:pointer}
.btn-gold:hover{background:var(--js-g600)}
.btn-outline-w{display:inline-flex;align-items:center;gap:8px;border:1.5px solid rgba(255,255,255,.30);color:rgba(255,255,255,.85);padding:12px 22px;border-radius:var(--js-r8);font-size:14px;font-weight:500;transition:all .2s;cursor:pointer}
.btn-outline-w:hover{border-color:rgba(255,255,255,.60);color:var(--js-w)}
.hero-stats{display:flex;gap:24px;margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.10)}
.hero-stat strong{font-family:'Pretendard',sans-serif;font-size:22px;font-weight:700;color:var(--js-g300);display:block}
.hero-stat span{font-size:11px;color:rgba(255,255,255,.45);letter-spacing:.04em}
.hero-feats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hfeat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);border-radius:var(--js-r12);padding:18px;cursor:pointer;transition:all .2s}
.hfeat:hover{background:rgba(255,255,255,.12);border-color:rgba(201,142,46,.40)}
.hfeat-icon{width:40px;height:40px;background:rgba(201,142,46,.18);border-radius:var(--js-r8);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.hfeat-icon i{font-size:20px;color:var(--js-g400)}
.hfeat-name{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.90);margin-bottom:3px}
.hfeat-sub{font-size:12px;color:rgba(255,255,255,.38)}
.jsd-section{padding:56px 0}
.jsd-section-inner{max-width:1280px;margin:0 auto;padding:0 24px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:32px}
.sec-label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--js-g500);margin-bottom:6px}
.sec-title{font-family:'Pretendard',sans-serif;font-size:26px;font-weight:700;color:var(--js-n800);letter-spacing:-.03em;line-height:1.3}
.sec-more{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:500;color:var(--js-t500);transition:color .2s;cursor:pointer;white-space:nowrap}
.sec-more:hover{color:var(--js-n700)}
.cat-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.ccat{background:var(--js-w);border:1px solid var(--js-border);border-radius:var(--js-r12);padding:18px 12px;text-align:center;cursor:pointer;transition:all .2s}
.ccat:hover{border-color:var(--js-n200);box-shadow:var(--js-sh);transform:translateY(-2px)}
.ccat-icon{width:52px;height:52px;border-radius:var(--js-r12);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;transition:transform .2s}
.ccat:hover .ccat-icon{transform:scale(1.08)}
.ccat-icon i{font-size:24px}
.ccat-name{font-size:12.5px;font-weight:600;color:var(--js-t700);margin-bottom:3px}
.ccat-cnt{font-size:11px;color:var(--js-t300)}
.ci-book{background:#eef3fb;color:var(--js-n500)}.ci-bible{background:var(--js-g50);color:var(--js-g600)}.ci-music{background:#f0f9f4;color:#2d8a5a}.ci-media{background:#f5eef9;color:#8b3d9e}.ci-edu{background:#fff5eb;color:#d06518}.ci-goods{background:#fef0f0;color:#c0393e}.ci-church{background:#e8f4fd;color:#1975b5}.ci-faith{background:#f0f7ee;color:#3a7d44}
.pgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.pgrid.g4{grid-template-columns:repeat(4,1fr)}.pgrid.g3{grid-template-columns:repeat(3,1fr)}
.pcard{background:var(--js-w);border:1px solid var(--js-border);border-radius:var(--js-r12);overflow:hidden;transition:all .2s;cursor:pointer;display:flex;flex-direction:column}
.pcard:hover{box-shadow:var(--js-sh-lg);border-color:var(--js-n100);transform:translateY(-3px)}
.pcard-img{aspect-ratio:3/4;background:var(--js-cream2);overflow:hidden;position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;min-height:120px}
.pcard-img i{font-size:40px;color:var(--js-t100)}
.pcard-img span{font-size:11px;color:var(--js-t100)}
.pbadges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:4px}
.badge{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:4px;line-height:1.2}
.bn{background:var(--js-n800);color:var(--js-g300)}.bs{background:#c0393e;color:var(--js-w)}.bb{background:var(--js-g500);color:var(--js-w)}.bd{background:#6c3cad;color:var(--js-w)}.bf{background:#2d8a5a;color:var(--js-w)}
.pwish{position:absolute;top:8px;right:8px;width:30px;height:30px;background:rgba(255,255,255,.92);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--js-t300);opacity:0;transition:all .2s}
.pcard:hover .pwish{opacity:1}
.pwish:hover{color:#c0393e}
.pbody{padding:14px;display:flex;flex-direction:column;gap:5px;flex:1}
.pcat{font-size:11px;color:var(--js-t300);font-weight:500}
.ptitle{font-size:13.5px;font-weight:600;color:var(--js-t700);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pauthor{font-size:12px;color:var(--js-t300)}
.ppricing{display:flex;align-items:center;gap:7px;margin-top:6px}
.pdiscount{font-size:13px;font-weight:700;color:#c0393e}
.pprice{font-size:15px;font-weight:700;color:var(--js-n800);font-family:'Pretendard',sans-serif}
.porig{font-size:12px;color:var(--js-t100);text-decoration:line-through}
.prating{display:flex;align-items:center;gap:4px;margin-top:4px}
.stars{display:flex;gap:1px}.stars i{font-size:11px;color:var(--js-g500)}.stars .e{color:var(--js-t100)}
.prcnt{font-size:11px;color:var(--js-t300)}
.paction{margin-top:10px;display:flex;gap:6px}
.bcart{flex:1;padding:9px;background:var(--js-n50);border:1.5px solid var(--js-n100);border-radius:var(--js-r8);font-size:12.5px;font-weight:600;color:var(--js-n700);transition:all .15s;display:flex;align-items:center;justify-content:center;gap:5px}
.bcart:hover{background:var(--js-n800);border-color:var(--js-n800);color:var(--js-g300)}
.bbuy{flex:1;padding:9px;background:var(--js-n800);border-radius:var(--js-r8);font-size:12.5px;font-weight:600;color:var(--js-w);transition:background .15s}
.bbuy:hover{background:var(--js-n700)}
.digital-section{background:var(--js-n800);padding:56px 0;position:relative;overflow:hidden}
.digital-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 80% 50%,rgba(201,142,46,.10) 0%,transparent 65%)}
.digital-section .sec-label{color:var(--js-g400)}
.digital-section .sec-title{color:var(--js-w)}
.dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.dcard{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);border-radius:var(--js-r16);overflow:hidden;cursor:pointer;transition:all .2s}
.dcard:hover{background:rgba(255,255,255,.12);border-color:rgba(201,142,46,.40);transform:translateY(-3px)}
.dthumb{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
/* 디지털 썸네일: cover 중심을 아래로 이동해 상단 타이틀 노출 (50px = 30+20) */
.digital-section .dthumb img{width:100%;height:100%;object-fit:cover;object-position:center calc(50% + 50px);opacity:.85;display:block}
.dthumb i{font-size:40px;color:rgba(255,255,255,.15)}
.dplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.30);opacity:0;transition:opacity .2s}
.dcard:hover .dplay{opacity:1}
.dplay i{font-size:42px;color:var(--js-w)}
.dthumb-badge{position:absolute;top:10px;left:10px}
.dbody{padding:14px}
.dtype{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--js-g400);margin-bottom:5px}
.dtitle{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.90);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:8px}
.dmeta{display:flex;justify-content:space-between;align-items:center}
.dprice{font-size:14px;font-weight:700;color:var(--js-g300);font-family:'Pretendard',sans-serif}
.dfree{font-size:13px;font-weight:700;color:#4ade80}
.bstrip{background:var(--js-g50);border-top:1px solid var(--js-g100);border-bottom:1px solid var(--js-g100);padding:32px 0}
.bstrip-inner{max-width:1280px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bcard{background:var(--js-w);border:1px solid var(--js-border);border-radius:var(--js-r12);padding:22px;display:flex;align-items:center;gap:16px;cursor:pointer;transition:all .2s}
.bcard:hover{box-shadow:var(--js-sh);transform:translateY(-1px)}
.bcard-icon{width:48px;height:48px;border-radius:var(--js-r8);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bcard-icon i{font-size:24px}
.bcard-body{flex:1;min-width:0}
.bcard-title{font-size:15px;font-weight:700;color:var(--js-t700);margin-bottom:3px}
.bcard-desc{font-size:12.5px;color:var(--js-t300);line-height:1.4}
.bcard-arrow{font-size:20px;color:var(--js-t100);margin-left:auto;flex-shrink:0}
.hero-copy{min-width:0}
.shop-layout{display:grid;grid-template-columns:230px 1fr;gap:28px;max-width:1280px;margin:0 auto;padding:32px 24px}
.sidebar-sec{background:var(--js-w);border:1px solid var(--js-border);border-radius:var(--js-r12);padding:20px;margin-bottom:14px}
.sb-title{font-size:13px;font-weight:700;color:var(--js-t700);margin-bottom:14px;display:flex;align-items:center;gap:6px}
.sb-title i{font-size:15px;color:var(--js-n500)}
.sb-search{position:relative}
.sb-search input{width:100%;height:38px;border:1.5px solid var(--js-border-md);border-radius:var(--js-r8);padding:0 38px 0 12px;font-size:13px;outline:none}
.sb-search i{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--js-t300)}
.flist{display:flex;flex-direction:column;gap:2px}
.fitem{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-radius:var(--js-r8);cursor:pointer;transition:background .15s;font-size:13px;color:var(--js-t500)}
.fitem:hover{background:var(--js-n50);color:var(--js-n700)}
.fitem.active{background:var(--js-n50);color:var(--js-n700);font-weight:600}
.fcnt{font-size:11px;color:var(--js-t100);background:var(--js-cream2);padding:1px 7px;border-radius:10px}
.fitem.active .fcnt{background:var(--js-n100);color:var(--js-n600)}
.prange{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.pinput{height:36px;border:1.5px solid var(--js-border-md);border-radius:var(--js-r8);padding:0 10px;font-size:12px;outline:none;width:100%}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;background:var(--js-w);border:1px solid var(--js-border);border-radius:var(--js-r12);padding:12px 16px}
.pcount{font-size:13.5px;color:var(--js-t500)}.pcount strong{color:var(--js-n800);font-weight:700}
.pcontrols{display:flex;align-items:center;gap:8px}
.ssort{height:36px;border:1.5px solid var(--js-border-md);border-radius:var(--js-r8);padding:0 12px;font-size:13px;color:var(--js-t700);outline:none;background:var(--js-w);cursor:pointer}
.vtoggle{display:flex;gap:2px;background:var(--js-cream2);border-radius:var(--js-r8);padding:3px}
.vbtn{width:32px;height:32px;border-radius:var(--js-r4);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--js-t300);transition:all .15s;cursor:pointer}
.vbtn.active{background:var(--js-w);color:var(--js-n700);box-shadow:var(--js-sh-sm)}
.detail-page{max-width:1280px;margin:0 auto;padding:32px 24px}
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:28px;font-size:13px;color:var(--js-t300)}
.breadcrumb a{color:var(--js-t300);cursor:pointer;transition:color .2s}.breadcrumb a:hover{color:var(--js-n700)}
.breadcrumb i{font-size:14px}
.dlayout{display:grid;grid-template-columns:480px 1fr;gap:48px;margin-bottom:56px}
.gallery-main{border-radius:var(--js-r16);overflow:hidden;border:1px solid var(--js-border);background:var(--js-cream2);aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;margin-bottom:12px}
.gallery-main i{font-size:80px;color:var(--js-t100)}
.gallery-main span{font-size:13px;color:var(--js-t100)}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
/* 썸네일: flex 자식 img가 찌그러지지 않도록 고정 박스 + 절대배치, 비율 유지(contain) */
.thumb{flex:0 0 auto;position:relative;width:72px;height:90px;border-radius:var(--js-r8);overflow:hidden;border:2px solid transparent;cursor:pointer;background:var(--js-cream2);display:flex;align-items:center;justify-content:center;transition:border-color .2s;padding:0}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.thumb.active{border-color:var(--js-n500)}.thumb i{font-size:24px;color:var(--js-t100);position:relative;z-index:1}
.detail-info{}
.detail-info-top{display:flex;flex-wrap:nowrap;align-items:center;gap:8px 12px;margin-bottom:14px;min-width:0}
.detail-info-top .dcat{margin-bottom:0;font-size:12.5px;color:var(--js-t300);flex-shrink:1;min-width:0}
.detail-info-top .dbadges{margin-bottom:0;flex-shrink:0}
.detail-info-top .detail-edit-link{flex-shrink:0}
.detail-edit-link{font-size:12px;padding:6px 12px;background:var(--js-cream2);border-radius:var(--js-r8);color:var(--js-t500);text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap}
@media (max-width:380px){.detail-info-top{flex-wrap:wrap}}
.dbadges{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.dcat{font-size:12.5px;color:var(--js-t300);margin-bottom:8px}
.dtitle-main{font-family:'Pretendard',sans-serif;font-size:26px;font-weight:700;color:var(--js-n800);line-height:1.35;letter-spacing:-.03em;margin-bottom:8px}
.dauthor{font-size:14px;color:var(--js-t500);margin-bottom:16px}
.dauthor a{color:var(--js-n500);font-weight:500}
.drating-row{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--js-border)}
.dstars{display:flex;gap:2px}.dstars i{font-size:15px;color:var(--js-g500)}
.dscore{font-size:16px;font-weight:700;color:var(--js-t700)}
.drevlink{font-size:13px;color:var(--js-n500);text-decoration:underline;cursor:pointer}
.dsold{font-size:12.5px;color:var(--js-t300)}
.pricebox{background:var(--js-cream);border:1px solid var(--js-border);border-radius:var(--js-r12);padding:20px;margin-bottom:20px}
.price-row{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.pdpct{font-size:22px;font-weight:700;color:#c0393e}
.pdmain{font-family:'Pretendard',sans-serif;font-size:30px;font-weight:700;color:var(--js-n800)}
.pdorig{font-size:15px;color:var(--js-t100);text-decoration:line-through}
.pdpoints{font-size:13px;color:var(--js-t500)}.pdpoints strong{color:var(--js-n600);font-weight:700}
.bmgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px}
.bmitem{padding:10px 14px;background:var(--js-cream);border-radius:var(--js-r8);border:1px solid var(--js-border)}
.bmlabel{font-size:11px;color:var(--js-t300);font-weight:500}
.bmval{font-size:13.5px;font-weight:600;color:var(--js-t700)}
.fmt-sec{margin-bottom:20px}
.fmt-label{font-size:13px;font-weight:600;color:var(--js-t700);margin-bottom:10px}
.fmt-btns{display:flex;gap:8px;flex-wrap:wrap}
.fmt-btn{padding:9px 18px;border:1.5px solid var(--js-border-md);border-radius:var(--js-r8);font-size:13px;font-weight:500;color:var(--js-t500);cursor:pointer;transition:all .15s}
.fmt-btn.active{border-color:var(--js-n500);background:var(--js-n50);color:var(--js-n700);font-weight:600}
.qty-sec{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.qty-lbl{font-size:13px;font-weight:600;color:var(--js-t700);width:40px}
.qty-ctrl{display:flex;align-items:center;border:1.5px solid var(--js-border-md);border-radius:var(--js-r8);overflow:hidden}
.qbtn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--js-t500);background:var(--js-cream);cursor:pointer;transition:background .15s}
.qbtn:hover{background:var(--js-n50);color:var(--js-n700)}
.qinput{width:52px;height:38px;border:none;border-left:1px solid var(--js-border);border-right:1px solid var(--js-border);text-align:center;font-size:15px;font-weight:600;color:var(--js-t700);outline:none;background:var(--js-w)}
.total-row{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--js-n800);border-radius:var(--js-r12);margin-bottom:14px}
.total-lbl{font-size:13px;color:rgba(255,255,255,.60);font-weight:500}
.total-amt{font-family:'Pretendard',sans-serif;font-size:22px;font-weight:700;color:var(--js-g300)}
.dcta{display:grid;grid-template-columns:1fr 2fr;gap:10px;margin-bottom:16px}
.btn-cart-lg{padding:14px;background:var(--js-w);border:1.5px solid var(--js-n800);border-radius:var(--js-r8);font-size:14px;font-weight:700;color:var(--js-n800);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .15s}
.btn-cart-lg:hover{background:var(--js-n50)}
.btn-buy-lg{padding:14px;background:var(--js-n800);border-radius:var(--js-r8);font-size:14px;font-weight:700;color:var(--js-w);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:background .15s;border:none}
.btn-buy-lg:hover{background:var(--js-n700)}
.ship-box{border:1px solid var(--js-border);border-radius:var(--js-r8);padding:14px;display:flex;flex-direction:column;gap:10px}
.ship-row{display:flex;align-items:center;gap:10px;font-size:13px}
.ship-ico{width:28px;height:28px;background:var(--js-n50);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ship-ico i{font-size:14px;color:var(--js-n500)}
.sk{color:var(--js-t300);width:60px;flex-shrink:0}
.sv{color:var(--js-t700);font-weight:500}.sv.free{color:#2d8a5a;font-weight:700}
.tabs-wrap{background:var(--js-w);border:1px solid var(--js-border);border-radius:var(--js-r16);overflow:hidden;margin-bottom:40px}
.tabs-nav{display:flex;border-bottom:1px solid var(--js-border);padding:0 24px}
.ptab{padding:16px 20px;font-size:14px;font-weight:500;color:var(--js-t300);cursor:pointer;border-bottom:2.5px solid transparent;transition:color .2s,border-color .2s;white-space:nowrap}
.ptab.active{color:var(--js-n700);border-bottom-color:var(--js-n600);font-weight:700}
.ptab:hover{color:var(--js-n600)}
.tcontent{display:none;padding:28px 24px}
.tcontent.active{display:block}
.tcontent p{font-size:14px;line-height:1.85;color:var(--js-t500);margin-bottom:14px}
.tcontent h4{font-size:14px;font-weight:700;color:var(--js-t700);margin:20px 0 8px}
.tcontent ul{padding-left:20px;display:flex;flex-direction:column;gap:6px}
.tcontent li{font-size:13.5px;color:var(--js-t500);list-style:disc}
.dtable{width:100%;border-collapse:collapse;font-size:14px}
.dtable tr{border-bottom:1px solid var(--js-border)}
.dtable th{width:110px;padding:12px 16px;background:var(--js-cream);color:var(--js-t500);font-weight:600;text-align:left;white-space:nowrap}
.dtable td{padding:12px 16px;color:var(--js-t700)}
.cart-page{max-width:1280px;margin:0 auto;padding:32px 24px}
.cart-title{font-family:'Pretendard',sans-serif;font-size:28px;font-weight:700;color:var(--js-n800);margin-bottom:28px;display:flex;align-items:center;gap:10px}
.cart-title i{font-size:26px;color:var(--js-n600)}
.cart-layout{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}
.cart-items{background:var(--js-w);border:1px solid var(--js-border);border-radius:var(--js-r16);overflow:hidden}
.cart-header{padding:16px 20px;border-bottom:1px solid var(--js-border);display:flex;align-items:center;justify-content:space-between;background:var(--js-cream)}
.sel-all{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--js-t700);cursor:pointer}
.sel-all input{width:16px;height:16px;accent-color:var(--js-n700)}
.cart-hbtns{display:flex;gap:8px}
.bsm{padding:6px 14px;border-radius:var(--js-r8);font-size:12.5px;font-weight:600;transition:all .15s}
.bsm-o{border:1.5px solid var(--js-border-md);color:var(--js-t500);background:var(--js-w)}.bsm-o:hover{border-color:var(--js-n300);color:var(--js-n700)}
.bsm-p{background:var(--js-n800);color:var(--js-w)}.bsm-p:hover{background:var(--js-n700)}
.citem{padding:18px 20px;border-bottom:1px solid var(--js-border);display:flex;align-items:flex-start;gap:14px;transition:background .15s}
.citem:last-child{border-bottom:none}.citem:hover{background:var(--js-cream)}
.cichk input{width:16px;height:16px;accent-color:var(--js-n700);margin-top:4px}
.ciimg{width:70px;height:90px;border-radius:var(--js-r8);overflow:hidden;flex-shrink:0;background:var(--js-cream2);display:flex;align-items:center;justify-content:center;border:1px solid var(--js-border)}
.ciimg i{font-size:28px;color:var(--js-t100)}
.ciinfo{flex:1;min-width:0}
.cicat{font-size:11px;color:var(--js-t300);margin-bottom:3px}
.cititle{font-size:14px;font-weight:600;color:var(--js-t700);margin-bottom:4px;line-height:1.4}
.cisub{font-size:12.5px;color:var(--js-t300);margin-bottom:10px}
.ciqrow{display:flex;align-items:center;gap:10px}
.cqctrl{display:flex;align-items:center;border:1px solid var(--js-border-md);border-radius:var(--js-r8);overflow:hidden}
.cqbtn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--js-t500);background:var(--js-cream);cursor:pointer;transition:background .15s}
.cqbtn:hover{background:var(--js-n50);color:var(--js-n700)}
.cqval{width:38px;height:30px;text-align:center;font-size:13px;font-weight:600;color:var(--js-t700);border:none;border-left:1px solid var(--js-border);border-right:1px solid var(--js-border);outline:none;background:var(--js-w)}
.ciprice{text-align:right;flex-shrink:0;min-width:90px}
.ciprice-main{font-family:'Pretendard',sans-serif;font-size:16px;font-weight:700;color:var(--js-n800)}
.ciprice-orig{font-size:12px;color:var(--js-t100);text-decoration:line-through}
.cidel{font-size:13px;color:var(--js-t100);cursor:pointer;margin-top:8px;transition:color .15s;display:flex;align-items:center;gap:3px;justify-content:flex-end}
.cidel:hover{color:#c0393e}
.cidel i{font-size:14px}
.ship-prog{padding:14px 20px;background:var(--js-g50);border-top:1px solid var(--js-g100);border-bottom:1px solid var(--js-g100)}
.sp-text{display:flex;justify-content:space-between;font-size:12.5px;color:var(--js-t500);margin-bottom:8px}
.sp-text strong{color:#2d8a5a;font-weight:700}
.progbar{height:6px;background:var(--js-cream2);border-radius:3px;overflow:hidden}
.progfill{height:100%;background:linear-gradient(90deg,#2d8a5a,#4ade80);border-radius:3px}
.csummary{background:var(--js-w);border:1px solid var(--js-border);border-radius:var(--js-r16);padding:24px;position:sticky;top:100px}
.csum-title{font-size:16px;font-weight:700;color:var(--js-n800);margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--js-border)}
.srow{display:flex;justify-content:space-between;align-items:center;font-size:14px;padding:8px 0}
.srow .sl{color:var(--js-t500)}.srow .sv2{font-weight:600;color:var(--js-t700)}
.srow.disc .sv2{color:#c0393e}.srow.fship .sv2{color:#2d8a5a;font-weight:700}.srow.pts .sv2{color:var(--js-n600)}
.sdivider{height:1px;background:var(--js-border);margin:12px 0}
.stotrow{display:flex;justify-content:space-between;align-items:center;padding:14px 0}
.stot-lbl{font-size:15px;font-weight:700;color:var(--js-n800)}
.stot-val{font-family:'Pretendard',sans-serif;font-size:24px;font-weight:700;color:var(--js-n800)}
.stot-sub{font-size:12px;color:var(--js-t300);text-align:right;margin-top:2px}
.btn-checkout{width:100%;padding:16px;background:var(--js-n800);border-radius:var(--js-r12);font-size:15px;font-weight:700;color:var(--js-w);cursor:pointer;transition:background .15s;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;border:none;font-family:'Pretendard',-apple-system,BlinkMacSystemFont,sans-serif}
.btn-checkout:hover{background:var(--js-n700)}
.sbens{margin-top:16px;padding:14px;background:var(--js-n50);border-radius:var(--js-r8)}
.sben{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--js-t500);padding:4px 0}
.sben i{font-size:14px;color:var(--js-n500)}
.courow{display:flex;gap:8px;margin-top:10px}
.couinput{flex:1;height:38px;border:1.5px solid var(--js-border-md);border-radius:var(--js-r8);padding:0 12px;font-size:13px;outline:none}
.couinput:focus{border-color:var(--js-n400)}
.coubtn{padding:0 14px;height:38px;background:var(--js-n800);color:var(--js-w);border-radius:var(--js-r8);font-size:12.5px;font-weight:600;cursor:pointer;border:none}
.jsd-site-footer{background:var(--js-n950);color:rgba(255,255,255,.50);padding:48px 0 28px;margin-top:40px}
.jsd-footer-inner{max-width:1280px;margin:0 auto;padding:0 24px}
.ftop{display:grid;grid-template-columns:280px 1fr 1fr 1fr;gap:40px;margin-bottom:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08)}
/* 고객센터·이용안내 래퍼 — 데스크톱에서는 자식 .fcol 이 .ftop 그리드에 그대로 참여 */
.jsd-site-footer .f-support-legal-wrap{display:contents}
.f-brand-desc{font-size:13px;line-height:1.7;color:rgba(255,255,255,.40);margin-top:14px;max-width:240px}
.fcol-title{font-size:13px;font-weight:700;color:rgba(255,255,255,.70);margin-bottom:14px;letter-spacing:.02em}
.flinks{display:flex;flex-direction:column;gap:8px}
.flinks a{font-size:13px;color:rgba(255,255,255,.40);transition:color .2s}.flinks a:hover{color:rgba(255,255,255,.80)}
.jsd-site-footer .flinks button.js-biz-modal-open{display:block;width:100%;text-align:left;background:none;border:none;padding:0;margin:0;font:inherit;font-size:13px;color:rgba(255,255,255,.40);cursor:pointer;transition:color .2s;text-decoration:none}
.jsd-site-footer .flinks button.js-biz-modal-open:hover{color:rgba(255,255,255,.80)}
/* 사업자 정보 모달 */
.joyn-shop-biz-modal{position:fixed;inset:0;z-index:100050;display:none;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-bottom));box-sizing:border-box}
.joyn-shop-biz-modal.is-open{display:flex}
.joyn-shop-biz-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.joyn-shop-biz-modal__panel{position:relative;width:100%;max-width:380px;background:var(--js-w);color:var(--js-t700);border-radius:var(--js-r12);box-shadow:var(--js-sh-lg);padding:0;overflow:hidden}
.joyn-shop-biz-modal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--js-border)}
.joyn-shop-biz-modal__title{margin:0;font-size:17px;font-weight:700;color:var(--js-n800)}
.joyn-shop-biz-modal__close{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:var(--js-r8);background:var(--js-cream);color:var(--js-t500);cursor:pointer;padding:0}
.joyn-shop-biz-modal__close i{font-size:20px}
.joyn-shop-biz-modal__dl{margin:0;padding:16px 18px 20px}
.joyn-shop-biz-modal__row{display:grid;grid-template-columns:100px 1fr;gap:8px 12px;padding:8px 0;border-bottom:1px solid var(--js-border)}
.joyn-shop-biz-modal__row:last-child{border-bottom:none}
.joyn-shop-biz-modal__row dt{margin:0;font-size:12px;font-weight:600;color:var(--js-t300)}
.joyn-shop-biz-modal__row dd{margin:0;font-size:13px;line-height:1.5;color:var(--js-t700);word-break:keep-all}
@media(max-width:400px){
  .joyn-shop-biz-modal__row{grid-template-columns:1fr}
  .joyn-shop-biz-modal__row dt{padding-bottom:2px}
}
/* 이용약관·개인정보 등 외부 페이지 iframe 모달 */
.joyn-shop-legal-modal{position:fixed;inset:0;z-index:100051;display:none;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-bottom));box-sizing:border-box}
.joyn-shop-legal-modal.is-open{display:flex}
.joyn-shop-legal-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.joyn-shop-legal-modal__panel{position:relative;display:flex;flex-direction:column;width:100%;max-width:min(960px,calc(100vw - 24px));max-height:min(90vh,calc(100dvh - 24px));background:var(--js-w);color:var(--js-t700);border-radius:var(--js-r12);box-shadow:var(--js-sh-lg);overflow:hidden}
.joyn-shop-legal-modal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--js-border);flex-shrink:0}
.joyn-shop-legal-modal__title{margin:0;font-size:16px;font-weight:700;color:var(--js-n800);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.joyn-shop-legal-modal__close{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:var(--js-r8);background:var(--js-cream);color:var(--js-t500);cursor:pointer;padding:0;flex-shrink:0}
/* 이용약관 모달 열림: 플로팅 hc-joyn-menu(햄버거)가 모달 위에 겹치지 않도록 */
body.joyn-shop-legal-modal-open .hc-joyn-menu-trigger,
body.joyn-shop-legal-modal-open .hc-joyn-menu-overlay,
body.joyn-shop-legal-modal-open #hcMenuOverlay,
body.joyn-shop-legal-modal-open .hc-joyn-menu-wrapper,
body.joyn-shop-legal-modal-open #hcMenuWrapper,
body.joyn-shop-legal-modal-open .hc-joyn-menu-route-loading{display:none!important;visibility:hidden!important;pointer-events:none!important;opacity:0!important}
.joyn-shop-legal-modal__close i{font-size:20px}
.joyn-shop-legal-modal__body{flex:1;min-height:0;background:var(--js-n50)}
.joyn-shop-legal-modal__iframe{display:block;width:100%;height:min(72vh,560px);min-height:240px;border:0;background:var(--js-w)}
.fbot{display:flex;justify-content:space-between;align-items:center;font-size:12px}
.fcopy{color:rgba(255,255,255,.25)}
.fbadges{display:flex;gap:12px}
.fbadge{display:flex;align-items:center;gap:5px;padding:5px 10px;border:1px solid rgba(255,255,255,.12);border-radius:var(--js-r4);font-size:11px;color:rgba(255,255,255,.30)}
.fbadge i{font-size:13px;color:rgba(255,255,255,.30)}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(60px);background:var(--js-n900);color:var(--js-w);padding:12px 24px;border-radius:var(--js-r24);font-size:14px;font-weight:500;display:flex;align-items:center;gap:8px;box-shadow:var(--js-sh-lg);z-index:9999;opacity:0;transition:all .3s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast i{font-size:18px;color:var(--js-g400)}
/* ======= BOTTOM NAV (mobile only) =======
   joyn-members-pro acts: height calc(tab+safe), padding-bottom safe, min(env,10px) — 별도 visualViewport 보정 불필요 */
.bnav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:300;height:calc(var(--js-tab-h) + var(--js-tab-safe));min-height:var(--js-tab-h);padding:0;padding-bottom:var(--js-tab-safe);box-sizing:border-box;margin:0;background:#000;border:none;border-top:1px solid rgba(255,255,255,.12)}
.bnav-inner{display:flex;flex:0 0 var(--js-tab-h);height:var(--js-tab-h);align-items:center;width:100%;min-height:0}
.bnav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#fff;font-size:10px;font-weight:500;cursor:pointer;transition:color .15s;position:relative}
.bnav-btn.active{color:var(--js-bnav-active);font-weight:600}
.bnav-btn i{font-size:22px;color:inherit}
.bnav-badge{position:absolute;top:6px;right:calc(50% - 18px);background:var(--js-g500);color:var(--js-w);font-size:9px;font-weight:700;padding:1px 5px;border-radius:8px;min-width:16px;text-align:center;line-height:1.4}
/* 테마 링크색 덮어쓰기 — 비활성 #fff, 현재 탭 주황 */
body.joyn-shop-active .bnav .bnav-btn,
body.joyn-shop-active .bnav a.bnav-btn,
body.joyn-shop-active .bnav a.bnav-btn:visited{color:#fff!important;-webkit-text-fill-color:#fff!important}
body.joyn-shop-active .bnav .bnav-btn.active,
body.joyn-shop-active .bnav a.bnav-btn.active,
body.joyn-shop-active .bnav a.bnav-btn.active:visited{color:var(--js-bnav-active)!important;-webkit-text-fill-color:var(--js-bnav-active)!important}
body.joyn-shop-active .bnav .bnav-btn i,
body.joyn-shop-active .bnav .bnav-btn span{color:inherit!important;-webkit-text-fill-color:inherit!important}
/* ======= FILTER DRAWER ======= */
.filter-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:400;opacity:0;pointer-events:none;transition:opacity .3s}
.filter-overlay.open{opacity:1;pointer-events:all}
.filter-drawer{position:fixed;bottom:0;left:0;right:0;background:var(--js-w);border-radius:var(--js-r16) var(--js-r16) 0 0;z-index:401;transform:translateY(100%);transition:transform .35s cubic-bezier(.32,.72,0,1);max-height:88vh;overflow-y:auto;padding-bottom:env(safe-area-inset-bottom)}
.filter-drawer.open{transform:translateY(0)}
.drawer-handle{width:36px;height:4px;background:var(--js-t100);border-radius:2px;margin:10px auto 16px}
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:0 20px 14px;border-bottom:1px solid var(--js-border)}
.drawer-title{font-size:16px;font-weight:700;color:var(--js-n800)}
.drawer-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--js-cream2);font-size:18px;color:var(--js-t500);cursor:pointer}
.drawer-body{padding:20px}
.drawer-sec{margin-bottom:20px}
.drawer-sec-title{font-size:13px;font-weight:700;color:var(--js-t700);margin-bottom:10px}
.drawer-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:7px 14px;border:1.5px solid var(--js-border-md);border-radius:var(--js-r24);font-size:13px;color:var(--js-t500);cursor:pointer;transition:all .15s;white-space:nowrap}
.chip.active{border-color:var(--js-n600);background:var(--js-n800);color:var(--js-w)}
.drawer-footer{padding:16px 20px;border-top:1px solid var(--js-border);display:flex;gap:10px;position:sticky;bottom:0;background:var(--js-w)}
.btn-drawer-reset{flex:1;padding:13px;border:1.5px solid var(--js-border-md);border-radius:var(--js-r12);font-size:14px;font-weight:600;color:var(--js-t500);background:var(--js-w);cursor:pointer}
.btn-drawer-apply{flex:2;padding:13px;background:var(--js-n800);border-radius:var(--js-r12);font-size:14px;font-weight:700;color:var(--js-w);cursor:pointer;border:none}
/* ======= MOBILE SEARCH OVERLAY ======= */
.search-overlay{position:fixed;inset:0;background:var(--js-w);z-index:500;display:none;flex-direction:column}
.search-overlay.open{display:flex}
.search-ov-header{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--js-border)}
.search-ov-back{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--js-t500);cursor:pointer}
.search-ov-input-wrap{flex:1;position:relative}
.search-ov-input{width:100%;height:42px;background:var(--js-cream);border:1.5px solid var(--js-border-md);border-radius:var(--js-r24);padding:0 16px;font-size:15px;outline:none}
.search-ov-input:focus{border-color:var(--js-n400)}
.search-ov-hints{padding:16px}
.hint-label{font-size:12px;font-weight:600;color:var(--js-t300);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.hint-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.hint-chip{padding:7px 14px;background:var(--js-n50);border-radius:var(--js-r24);font-size:13px;color:var(--js-n700);cursor:pointer}
/* ======= STICKY DETAIL CTA (mobile) ======= */
.detail-sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--js-w);border-top:1px solid var(--js-border);padding:12px 16px;padding-bottom:calc(12px + var(--js-tab-h) + var(--js-tab-safe));z-index:250;gap:10px}

/* ======= TABLET 1100 ======= */
@media(max-width:1100px){
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .pgrid.g4{grid-template-columns:repeat(3,1fr)}
  .cat-grid{grid-template-columns:repeat(4,1fr)}
  .hero-inner{grid-template-columns:1fr}
  .hero-feats{display:none}
  .dlayout{grid-template-columns:1fr}
  .ftop{grid-template-columns:1fr 1fr}
  .dgrid{grid-template-columns:repeat(2,1fr)}
}

/* ======= MOBILE 768 ======= */
@media(max-width:768px){
  body.joyn-shop-active{padding-bottom:var(--js-bnav-space)}
  body.joyn-shop-active .jsd-page{
    min-height:calc(100vh - var(--js-bnav-space));
  }
  @supports (height:100dvh){
    body.joyn-shop-active .jsd-page{
      min-height:calc(100dvh - var(--js-bnav-space));
    }
  }
  .announce-bar{font-size:11.5px;padding:8px 12px}
  .header-inner{height:56px;padding:0 14px;gap:10px}
  .logo-sub{display:none}
  .logo-name{font-size:16px}
  .logo-emblem{width:34px;height:34px}
  .logo-emblem i{font-size:18px}
  .header-search{display:none}
  #mob-search{display:flex !important}
  #hdr-user{display:none}
  .hdr-btn{display:none}
  .hdr-btn.mobile-show{display:flex;padding:8px}
  .hdr-btn.mobile-show span{display:none}
  .hdr-btn.mobile-show i{font-size:24px}
  .cart-badge{top:4px;right:2px}
  .gnav{background:var(--js-n800)}
  .gnav-inner{padding:0 12px;gap:4px}
  .gnav .gnav-item{font-size:12px;padding:12px 10px;gap:5px}
  .gnav .gnav-item i{font-size:13px}
  .bnav{display:block;isolation:isolate}
  .jsd-section{padding:32px 0}
  .jsd-section-inner{padding:0 14px}
  .sec-title{font-size:21px}
  .sec-label{font-size:10px}
  .hero-inner{padding:36px 14px}
  .hero-badge{font-size:11px;padding:4px 10px;margin-bottom:14px}
  .hero-title{font-size:28px;margin-bottom:12px}
  .hero-desc{font-size:13.5px;margin-bottom:20px}
  .hero-stats{gap:16px;padding-top:18px;flex-wrap:wrap}
  .hero-stat strong{font-size:18px}
  .hero-stat span{font-size:10px}
  .btn-gold,.btn-outline-w{font-size:13px;padding:11px 18px}
  .cat-grid{grid-template-columns:repeat(4,1fr);gap:8px}
  .ccat{padding:14px 8px}
  .ccat-icon{width:44px;height:44px;margin-bottom:8px}
  .ccat-icon i{font-size:20px}
  .ccat-name{font-size:11.5px}
  .ccat-cnt{display:none}
  .pgrid{grid-template-columns:repeat(2,1fr);gap:12px}
  .pgrid.g3,.pgrid.g4{grid-template-columns:repeat(2,1fr)}
  .pbody{padding:10px}
  .ptitle{font-size:12.5px}
  .pprice{font-size:13px}
  .paction{gap:5px}
  .bcart,.bbuy{padding:8px 5px;font-size:11.5px}
  .dgrid{grid-template-columns:1fr 1fr;gap:10px}
  .bstrip{padding:20px 0}
  .bstrip-inner{grid-template-columns:1fr;gap:10px;padding:0 14px}
  .bcard{padding:14px}
  .shop-layout{grid-template-columns:1fr;padding:16px 14px}
  .sidebar-sec{display:none}
  .mobile-filter-btn{display:flex}
  .cart-layout{grid-template-columns:1fr}
  .csummary{position:static}
  .dlayout{grid-template-columns:1fr;gap:24px}
  .detail-page{padding:16px 14px}
  .bmgrid{grid-template-columns:1fr 1fr}
  .dcta{display:none}
  .ship-box{display:none}
  .detail-sticky-cta{display:flex}
  .tabs-wrap{border-radius:var(--js-r12)}
  .tabs-nav{padding:0 14px}
  .ptab{padding:13px 12px;font-size:13px}
  .tcontent{padding:20px 14px}
  .cart-page{padding:16px 14px}
  .cart-title{font-size:22px;margin-bottom:18px}
  .ftop{grid-template-columns:1fr;gap:24px}
  /* 모바일: 푸터 카테고리 열 숨김(하단 네비·필터와 역할 분리) */
  body.joyn-shop-active .jsd-site-footer .fcol-categories{display:none!important}
  /* 모바일: 고객센터 | 이용안내 가로 2열 */
  .jsd-site-footer .f-support-legal-wrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px 14px;
    align-items:start;
    width:100%;
    grid-column:1 / -1;
  }
  .jsd-site-footer .f-support-legal-wrap .fcol{min-width:0}
  .fbot{flex-direction:column;gap:10px;align-items:flex-start}
  .fbadges{flex-wrap:wrap;gap:8px}
  .jsd-site-footer{padding:32px 0 20px;margin-top:0}
  .jsd-footer-inner{padding:0 14px}
  .bstrip-inner{padding:0 14px}
}

/* ======= SMALL MOBILE 480 ======= */
@media(max-width:480px){
  .cat-grid{grid-template-columns:repeat(4,1fr);gap:7px}
  .hero-title{font-size:24px}
  .pgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .dgrid{grid-template-columns:1fr 1fr}
  .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .cart-header{flex-direction:column;align-items:flex-start;gap:10px}
  .ciinfo{min-width:0}
}
.joyn-shop-active ::-webkit-scrollbar{width:5px;height:5px}.joyn-shop-active ::-webkit-scrollbar-track{background:var(--js-cream)}.joyn-shop-active ::-webkit-scrollbar-thumb{background:var(--js-n100);border-radius:3px}


/* ============================================================
   v2.0.3.1: Astra 테마 헤더 중복 숨김 (옵션 활성 시)
   옵션 joyn_shop_hide_theme_header=1 일 때만 body.joyn-shop-hide-theme-header 로 Astra 헤더 숨김 (기본 0)
   ============================================================ */
body.joyn-shop-hide-theme-header #masthead,
body.joyn-shop-hide-theme-header .site-header:not(.jsd-site-header),
body.joyn-shop-hide-theme-header .ast-main-header-wrap,
body.joyn-shop-hide-theme-header .ast-above-header-wrap,
body.joyn-shop-hide-theme-header .ast-below-header-wrap {
    display: none !important;
}

/* Astra container의 padding을 쇼핑몰 페이지에서는 0으로 */
body.joyn-shop-active .ast-container,
body.joyn-shop-active #primary,
body.joyn-shop-active .site-content > .ast-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.joyn-shop-active .entry-content,
body.joyn-shop-active article.post,
body.joyn-shop-active article.page {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Astra Child에서 .entry-content 내부가 max-width 600px 같은 좁은 제약이 걸린 경우 무효화 */
body.joyn-shop-active .entry-content > * {
    max-width: none !important;
}

/* ============================================================
   v2.0.3.2: Astra .ast-container의 flex-direction:row를 돌파
   본문 전체를 .jsd-page로 감싸서 flex item 1개만 만들고 전체 너비 차지
   ============================================================ */
body.joyn-shop-active .jsd-page {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    grid-column: 1 / -1 !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* .ast-container가 display:flex여도 .jsd-page 혼자만 아이템이 되도록 */
body.joyn-shop-active #content .ast-container > .jsd-page {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ============================================================
   v2.0.3.3: 테마 i 태그 font-size 40px 영향 차단
   .badge·.ccat·.hfeat 등 아이콘 부모의 크기 상속으로 강제 리셋
   ============================================================ */
body.joyn-shop-active .badge i,
body.joyn-shop-active .gnav-item i,
body.joyn-shop-active .hdr-btn i,
body.joyn-shop-active .ccat-icon i,
body.joyn-shop-active .hfeat-icon i,
body.joyn-shop-active .bnav-btn i,
body.joyn-shop-active .bcard-icon i {
    font-size: inherit !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    display: inline !important;
}

/* 상품카드·카테고리·기능 카드는 각자 명시한 크기를 유지해야 하므로 restore */
body.joyn-shop-active .ccat-icon i { font-size: 24px !important; }
body.joyn-shop-active .hfeat-icon i { font-size: 20px !important; }
body.joyn-shop-active .bcard-icon i { font-size: 24px !important; }
body.joyn-shop-active .bnav-btn i { font-size: 22px !important; }
body.joyn-shop-active .gnav-item i { font-size: 13.5px !important; }
body.joyn-shop-active .hdr-btn i { font-size: 20px !important; }
body.joyn-shop-active .pcard-img > i { font-size: 40px !important; }
body.joyn-shop-active .gallery-main i { font-size: 80px !important; }
body.joyn-shop-active .dthumb i { font-size: 40px !important; }

/* 이미지 로드 실패 시 broken image 아이콘 숨김 */
body.joyn-shop-active .pcard-img img[alt]:not([src]),
body.joyn-shop-active .pcard-img img[src=""],
body.joyn-shop-active .pcard-img img.pcard-img-broken { display: none !important; }

/* ============================================================
   v2.0.3.4: 상품 상세 페이지 2단 레이아웃 (왼쪽 카테고리 사이드바)
   ============================================================ */
body.joyn-shop-active .jsd-shop-detail-layout {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 24px 48px;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 28px;
    align-items: start;
}

body.joyn-shop-active .jsd-shop-detail-main {
    min-width: 0;  /* grid item 내부 overflow 방지 */
}

/* 사이드바 자체는 archive-products와 동일한 sticky 스타일 */
body.joyn-shop-active .jsd-shop-sidebar {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

/* 상세 페이지 내부 .detail-page의 좌우 padding 제거 (상위 레이아웃이 이미 가짐) */
body.joyn-shop-active .jsd-shop-detail-layout .detail-page {
    max-width: 100%;
    padding: 0;
}

/* 모바일: 사이드바 감추고 단일 컬럼 */
@media (max-width: 1100px) {
    body.joyn-shop-active .jsd-shop-detail-layout {
        grid-template-columns: 1fr;
        padding: 16px 14px 40px;
    }
    body.joyn-shop-active .jsd-shop-detail-layout .jsd-shop-sidebar {
        display: none;
    }
}

/* ============================================================
   v2.0.3.4: jmp-theme-dark 플러그인 등 외부 다크모드 차단
   쇼핑몰 페이지에서는 데모 색상 체계 강제
   ============================================================ */
body.joyn-shop-active {
    background: var(--js-cream) !important;
    color: var(--js-t700) !important;
}

/* 다크모드 플러그인이 특정 요소 색상을 강제로 바꿔도 쇼핑몰 카드/섹션은 원래 색 유지 */
body.joyn-shop-active .pcard,
body.joyn-shop-active .jsd-section,
body.joyn-shop-active .cart-items,
body.joyn-shop-active .csummary,
body.joyn-shop-active .tabs-wrap,
body.joyn-shop-active .topbar,
body.joyn-shop-active .sidebar-sec,
body.joyn-shop-active .ciimg,
body.joyn-shop-active .pricebox,
body.joyn-shop-active .bmitem {
    color: var(--js-t700);
}

/* ============================================================
   v2.0.3.6: 주요 콘텐츠 버튼 배경 복구
   .joyn-shop-active button { background: none } 규칙(0,1,1) 이
   .bbuy(0,1,0) 등을 이기는 것을 body 스코프 규칙(0,2,0)으로 돌파
   ============================================================ */
body.joyn-shop-active .bbuy         { background: var(--js-n800); color: var(--js-w); }
body.joyn-shop-active .bbuy:hover   { background: var(--js-n700); }
body.joyn-shop-active .bcart        { background: var(--js-n50); border: 1.5px solid var(--js-n100); color: var(--js-n700); }
body.joyn-shop-active .bcart:hover  { background: var(--js-n800); border-color: var(--js-n800); color: var(--js-g300); }
body.joyn-shop-active .btn-buy-lg   { background: var(--js-n800); color: var(--js-w); }
body.joyn-shop-active .btn-buy-lg:hover { background: var(--js-n700); }
body.joyn-shop-active .btn-cart-lg  { background: var(--js-w); border: 1.5px solid var(--js-n800); color: var(--js-n800); }
body.joyn-shop-active .btn-cart-lg:hover { background: var(--js-n50); }
body.joyn-shop-active .btn-checkout { background: var(--js-n800); color: var(--js-w); }
body.joyn-shop-active .btn-checkout:hover { background: var(--js-n700); }
body.joyn-shop-active .btn-gold     { background: var(--js-g500); color: var(--js-w); }
body.joyn-shop-active .btn-gold:hover { background: var(--js-g600); }
body.joyn-shop-active .btn-outline-w { background: transparent; border: 1.5px solid rgba(255,255,255,.3); color: rgba(255,255,255,.85); }
body.joyn-shop-active .btn-drawer-apply { background: var(--js-n800); color: var(--js-w); }
body.joyn-shop-active .btn-drawer-reset { background: var(--js-w); border: 1.5px solid var(--js-border-md); color: var(--js-t500); }
body.joyn-shop-active .coubtn       { background: var(--js-n800); color: var(--js-w); }
body.joyn-shop-active .bsm-p        { background: var(--js-n800); color: var(--js-w); }
body.joyn-shop-active .bsm-o        { background: var(--js-w); border: 1.5px solid var(--js-border-md); color: var(--js-t500); }
body.joyn-shop-active .hint-chip    { background: var(--js-n50); color: var(--js-n700); }
body.joyn-shop-active .mobile-filter-btn { background: var(--js-w); }
body.joyn-shop-active .chip         { background: var(--js-w); border: 1.5px solid var(--js-border-md); color: var(--js-t500); }
body.joyn-shop-active .chip.active  { background: var(--js-n800); border-color: var(--js-n600); color: var(--js-w); }
body.joyn-shop-active .coupon-apply-btn { background: var(--js-n800); color: var(--js-w); }

/* 포맷 선택 버튼 */
body.joyn-shop-active .fmt-btn      { background: var(--js-w); border: 1.5px solid var(--js-border-md); color: var(--js-t500); }
body.joyn-shop-active .fmt-btn.active { background: var(--js-n50); border-color: var(--js-n500); color: var(--js-n700); }

/* 수량 버튼 */
body.joyn-shop-active .qbtn, body.joyn-shop-active .cqbtn { background: var(--js-cream); color: var(--js-t500); }
body.joyn-shop-active .qbtn:hover, body.joyn-shop-active .cqbtn:hover { background: var(--js-n50); color: var(--js-n700); }

/* bnav "검색" button 태그 투명 유지 */
body.joyn-shop-active .bnav-btn    { background: transparent; }

/* ============================================================
   v2.0.3.6: 카테고리 그리드 접기/펼치기
   데스크탑 8개, 모바일 4개 기본, 더보기 토글로 전체 표시
   ============================================================ */
body.joyn-shop-active .cat-grid-wrap { position: relative; }
body.joyn-shop-active .cat-grid-collapsed > :nth-child(n+9) { display: none; }

body.joyn-shop-active .cat-grid-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 24px auto 0;
    padding: 10px 28px;
    background: var(--js-w);
    border: 1.5px solid var(--js-border-md);
    border-radius: var(--js-r24);
    color: var(--js-t700);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
body.joyn-shop-active .cat-grid-toggle:hover {
    border-color: var(--js-n400);
    color: var(--js-n700);
    background: var(--js-cream);
}
body.joyn-shop-active .cat-grid-toggle i { font-size: 15px; transition: transform .2s; }
body.joyn-shop-active .cat-grid-toggle.expanded i { transform: rotate(180deg); }
body.joyn-shop-active .cat-grid-toggle-hidden { display: none; }

@media (max-width: 768px) {
    body.joyn-shop-active .cat-grid-collapsed > :nth-child(n+5) { display: none; }
}

/* ============================================================
   v2.0.3.7: 헤더 재배치 — 로고 + 액션 아이콘만 왼쪽 정렬
   큰 검색창 제거, 검색 아이콘만 유지, 모든 아이콘 일관 표시
   ============================================================ */
body.joyn-shop-active .jsd-site-header .header-search { display: none !important; }
body.joyn-shop-active .jsd-site-header .header-actions {
    margin-left: 8px !important;  /* 로고 바로 옆 */
    gap: 2px !important;
}

/* hdr-btn 데스크탑에서도 아이콘+텍스트 유지, 텍스트 작게 */
body.joyn-shop-active .jsd-site-header .hdr-btn {
    background: transparent;
    border: none;
    min-width: 56px;
}
body.joyn-shop-active .jsd-site-header .hdr-btn i { font-size: 20px; }
body.joyn-shop-active .jsd-site-header .hdr-btn span {
    font-size: 11px;
    font-weight: 500;
    display: block;  /* 모바일에서도 텍스트 표시 — 기존 mobile.show 로직 무효화 */
}

/* 모바일 (≤768px): 아이콘만 보이게, 텍스트 숨김 */
@media (max-width: 768px) {
    body.joyn-shop-active .jsd-site-header .hdr-btn span { display: none; }
    body.joyn-shop-active .jsd-site-header .hdr-btn {
        min-width: 40px;
        padding: 6px 8px;
    }
    body.joyn-shop-active .jsd-site-header .hdr-btn i { font-size: 22px; }
    body.joyn-shop-active .jsd-site-header .header-actions { gap: 0 !important; }
    body.joyn-shop-active .jsd-site-header .logo-sub { display: none; }
}

/* 기존 모바일 #mob-search 스타일 무효화 (이제 항상 표시되므로) */
body.joyn-shop-active .jsd-site-header #mob-search { display: flex !important; }

/* ============================================================
   v2.0.3.8: 디지털 콘텐츠 썸네일 세로 30% 증가
   기존 16/9 (1.78:1) → 4/3 (1.33:1) 약 33% 세로 확대
   ============================================================ */
body.joyn-shop-active .dthumb { aspect-ratio: 4/3 !important; }

/* ============================================================
   v2.0.3.8: 모바일 헤더 아이콘+라벨 모두 표시 (Image 2 스타일)
   검색·쇼핑·위시리스트·장바구니·주문내역 5개 모두 보이도록
   ============================================================ */
@media (max-width: 768px) {
    /* 모바일에서도 라벨 표시 */
    body.joyn-shop-active .jsd-site-header .hdr-btn span {
        display: block !important;
        font-size: 10.5px;
        line-height: 1.2;
        margin-top: 2px;
    }
    /* 공간 확보: 버튼 패딩/min-width 축소 */
    body.joyn-shop-active .jsd-site-header .hdr-btn {
        min-width: 52px;
        padding: 6px 6px;
    }
    body.joyn-shop-active .jsd-site-header .header-actions {
        gap: 0 !important;
        margin-left: auto !important;  /* 모바일: 로고와 떨어뜨려서 오른쪽 */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    body.joyn-shop-active .jsd-site-header .header-actions::-webkit-scrollbar { display: none; }
    /* 로고 크기 축소 */
    body.joyn-shop-active .jsd-site-header .logo-emblem { width: 32px; height: 32px; }
    body.joyn-shop-active .jsd-site-header .logo-emblem i { font-size: 16px; }
    body.joyn-shop-active .jsd-site-header .logo-name { font-size: 15px; }
    /* 헤더 높이 적당히 */
    body.joyn-shop-active .jsd-site-header .header-inner { height: 58px; padding: 0 14px; gap: 8px; }
}

/* 초소형 (≤400px): 위시리스트·주문내역 라벨 생략해서 공간 확보 */
@media (max-width: 400px) {
    body.joyn-shop-active .jsd-site-header .hdr-btn { min-width: 40px; padding: 6px 4px; }
    body.joyn-shop-active .jsd-site-header .hdr-btn span { font-size: 9.5px; }
}

/* R2 상세 HTML 인라인: iframe 없이 본문 탭에서 페이지(브라우저) 스크롤만 사용 */
.joynshop-desc-r2-inline.joynshop-product-description-html {
    width: 100%;
    max-width: 100%;
    overflow: visible;
}
.joynshop-desc-r2-inline.joynshop-product-description-html img,
.joynshop-desc-r2-inline.joynshop-product-description-html video {
    max-width: 100%;
    height: auto;
}
.joynshop-desc-r2-inline.joynshop-product-description-html iframe {
    max-width: 100%;
}

/*
 * R2 본문: 목차·동화명 2단 (display:table → 좁은 모바일에서 세로 쌓임 / 한글 한 글자 줄바꿈)
 * · 권장 마크업: .jb-toc-2col > div × 2
 * · 구 마크업: display:table + table-cell width 50% 도 grid로 보정 (:has 지원 브라우저)
 */
.joynshop-desc-r2-inline .jb-toc-2col {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px 12px;
    width: 100%;
    box-sizing: border-box;
}
.joynshop-desc-r2-inline .jb-toc-2col > div {
    min-width: 0;
    box-sizing: border-box;
}
.joynshop-desc-r2-inline .jb-toc-2col .jb-toc-s {
    word-break: keep-all;
    overflow-wrap: break-word;
}
/* 구 HTML: 50% 셀 2개짜리 테이블 레이아웃만 grid로 전환 */
.joynshop-desc-r2-inline div[style*="display:table"][style*="width:100%"]:has(> div[style*="width:50%"][style*="table-cell"]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 4px 10px;
    box-sizing: border-box;
}
.joynshop-desc-r2-inline div[style*="display:table"][style*="width:100%"]:has(> div[style*="width:50%"][style*="table-cell"]) > div[style*="table-cell"] {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    vertical-align: top;
    box-sizing: border-box;
}
.joynshop-desc-r2-inline .jb-toc-s {
    word-break: keep-all;
    overflow-wrap: break-word;
}

.joynshop-desc-r2-fail {
    padding: 16px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: var(--js-r8, 8px);
    font-size: 14px;
    color: #78350f;
}
.joynshop-desc-r2-fail a { color: #1e3a5f; font-weight: 600; }

/* ============================================================
   상품 상세 — 상품소개 하단 공유 (Joyn LMS / 헬프데스크와 동일 UX)
   테마 전역 button 스타일 덮어쓰기: body·탭 ID로 특이성 + !important
   ============================================================ */
.joynshop-product-share-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 28px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    border-top: 1px solid var(--js-border);
    text-align: center;
}
.joynshop-product-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 600;
    color: #fff !important;
    background: #2563eb !important;
    border: none !important;
    border-radius: var(--js-r12);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.joynshop-product-share-btn:hover,
.joynshop-product-share-btn:focus {
    background: #1d4ed8 !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.4);
    outline: none;
}
.joynshop-product-share-btn:active {
    transform: translateY(1px);
}
.joynshop-product-share-btn i {
    font-size: 18px;
    color: #fff !important;
}
.joynshop-product-share-btn span {
    color: #fff !important;
}
.joynshop-product-share-feedback {
    font-size: 13px;
    color: var(--js-n600);
    text-align: center;
    width: 100%;
    opacity: 0;
    transition: opacity 0.2s;
}
.joynshop-product-share-feedback.is-visible {
    opacity: 1;
}

/* 테마/블록 에디터 button 규칙보다 우선 (동일 파일 내 덮어쓰기) */
body.joyn-shop-active .joynshop-product-share-box {
    align-items: center;
    text-align: center;
}
body.joyn-shop-active #tab-desc .joynshop-product-share-btn,
body.joyn-shop-active #tab-description .joynshop-product-share-btn,
body.joyn-shop-active .tcontent .joynshop-product-share-btn,
body.joyn-shop-active .joynshop-product-share-btn.button,
body.joyn-shop-active .joynshop-product-share-btn.wp-element-button {
    background: #2563eb !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}
body.joyn-shop-active #tab-desc .joynshop-product-share-btn:hover,
body.joyn-shop-active #tab-desc .joynshop-product-share-btn:focus,
body.joyn-shop-active #tab-description .joynshop-product-share-btn:hover,
body.joyn-shop-active #tab-description .joynshop-product-share-btn:focus,
body.joyn-shop-active .tcontent .joynshop-product-share-btn:hover,
body.joyn-shop-active .tcontent .joynshop-product-share-btn:focus {
    background: #1d4ed8 !important;
    color: #fff !important;
}
body.joyn-shop-active #tab-desc .joynshop-product-share-btn i,
body.joyn-shop-active #tab-desc .joynshop-product-share-btn span,
body.joyn-shop-active #tab-description .joynshop-product-share-btn i,
body.joyn-shop-active #tab-description .joynshop-product-share-btn span,
body.joyn-shop-active .tcontent .joynshop-product-share-btn i,
body.joyn-shop-active .tcontent .joynshop-product-share-btn span {
    color: #fff !important;
}

/* Joyn SNS — joyn_sns_render_share_button (docs: joyn-sns/docs/integration-api.md) */
.joynshop-product-share-box .joyn-sns-button.joynshop-product-share-joyn-sns {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 600;
    color: #fff !important;
    background: #2563eb !important;
    border: none !important;
    border-radius: var(--js-r12);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.joynshop-product-share-box .joyn-sns-button.joynshop-product-share-joyn-sns:hover,
.joynshop-product-share-box .joyn-sns-button.joynshop-product-share-joyn-sns:focus {
    background: #1d4ed8 !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.4);
    outline: none;
}
.joynshop-product-share-box .joyn-sns-button.joynshop-product-share-joyn-sns:active {
    transform: translateY(1px);
}
.joynshop-product-share-box .joyn-sns-button.joynshop-product-share-joyn-sns .joyn-sns-button__label {
    color: #fff !important;
}
.joynshop-product-share-box .joyn-sns-button.joynshop-product-share-joyn-sns .joyn-sns-button__icon svg {
    stroke: #fff !important;
}
body.joyn-shop-active #tab-desc .joyn-sns-button.joynshop-product-share-joyn-sns,
body.joyn-shop-active #tab-description .joyn-sns-button.joynshop-product-share-joyn-sns,
body.joyn-shop-active .tcontent .joyn-sns-button.joynshop-product-share-joyn-sns {
    background: #2563eb !important;
    color: #fff !important;
    border: none !important;
}
body.joyn-shop-active #tab-desc .joyn-sns-button.joynshop-product-share-joyn-sns:hover,
body.joyn-shop-active #tab-description .joyn-sns-button.joynshop-product-share-joyn-sns:hover,
body.joyn-shop-active .tcontent .joyn-sns-button.joynshop-product-share-joyn-sns:hover {
    background: #1d4ed8 !important;
    color: #fff !important;
}