/*
Theme Name: Jusocon Pixel V2.14.1
Description: 영상 기준 1280px / 5열 링크 디렉터리 UI
Version: 2.14.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: jusocon-pixel-v2141
*/

:root{
  --wrap:1280px;
  --pink:#ff98a8;
  --pinktext:#f58fa6;
  --navy:#2e128f;
  --green:#287151;
  --blue:#087fc4;
  --red:#ec2724;
  --line:#e5e5e5;
  --soft:#f3f3f3;
  --rank1:#ffb548;
  --rank2:#ff79ab;
  --rank3:#11c9b9;
}
*{box-sizing:border-box}
html{margin:0;padding:0;scroll-behavior:smooth}
body{
  margin:0;padding:0;background:#fff;color:#111;
  font-family:"Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo",Arial,sans-serif;
  font-size:14px;line-height:1.35;font-weight:600;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button,input,select{font:inherit}
.jc-wrap{width:var(--wrap);max-width:calc(100% - 32px);margin:0 auto}

/* 43px top */
.jc-quickbar{height:43px;border-bottom:1px solid #dedede;background:#fff}
.jc-quickbar .jc-wrap{height:43px;display:flex;align-items:center;justify-content:space-between}
.jc-quick-left,.jc-quick-right{display:flex;align-items:center;gap:9px;white-space:nowrap}
.jc-quick-left a,.jc-quick-right a{font-size:13px;font-weight:800;letter-spacing:-.3px}
.jc-tg{font-size:15px!important;font-weight:900!important}
.jc-tg::before{content:"●";display:inline-block;color:#33a8df;font-size:10px;margin-right:5px;transform:translateY(-1px)}
.jc-star::before{content:"★";color:#e7c637;margin-right:5px}
.jc-pill{height:27px;display:inline-flex;align-items:center;padding:0 12px;color:#fff!important;border-radius:4px;font-size:12px!important;font-weight:900!important}
.jc-pill-blue{background:#087dbf}
.jc-pill-red{background:#ed2724}
.jc-quick-right a:hover,.jc-tg:hover,.jc-star:hover{text-decoration:underline}

/* 106px masthead */
.jc-masthead{height:106px;background:#fff}
.jc-masthead-inner{
  height:106px;display:grid;
  grid-template-columns:220px 225px minmax(260px,1fr) 382px;
  column-gap:18px;align-items:center
}
.jc-date{text-align:center;font-weight:900}
.jc-date-day{display:block;color:#f392a6;font-size:20px;line-height:1.18;letter-spacing:-.7px}
.jc-date-time{display:block;color:#287151;font-size:20px;line-height:1.18;margin-top:8px;letter-spacing:-.2px}
.jc-trend{display:flex;align-items:center;justify-content:center;gap:6px;font-size:16px;font-weight:900;letter-spacing:-.5px}
.jc-trend-no{color:#f395aa}
.jc-brand{display:flex;align-items:center;justify-content:center;height:86px;min-width:0}
.jc-brand img{display:block;max-width:190px;max-height:78px;width:auto;height:auto;object-fit:contain}
.jc-brand-fallback{display:flex;align-items:center;justify-content:center;color:#f390a5;font-weight:950;font-size:36px;letter-spacing:-3px}
.jc-brand-fallback::before{content:"◢";font-size:42px;color:#f0b154;margin-right:5px}

.jc-search{width:382px;display:flex;align-items:center;gap:9px}
.jc-search select{
  width:123px;height:42px;border:0;border-radius:8px;background:#f3f3f3;
  padding:0 13px;outline:0;font-size:15px;font-weight:900;color:#111
}
.jc-search-field{position:relative;flex:1;height:42px}
.jc-search-field input{
  width:100%;height:42px;border:0;border-radius:8px;background:#f3f3f3;
  padding:0 48px 0 15px;outline:0;font-size:14px;font-weight:700;color:#333
}
.jc-search-field input::placeholder{color:#aaa;font-weight:800}
.jc-search-field button{
  position:absolute;right:0;top:0;width:45px;height:42px;border:0;background:transparent;
  display:grid;place-items:center;cursor:pointer;color:#333;padding:0
}
.jc-search-field svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7}

/* exact pink 57px nav */
.jc-nav{height:57px;background:var(--pink)}
.jc-nav .jc-wrap{height:57px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.jc-nav-item{
  height:57px;padding:0 9px;display:flex;align-items:center;justify-content:center;gap:5px;
  color:#fff;font-size:17px;font-weight:900;letter-spacing:-.8px;white-space:nowrap
}
.jc-nav-item:hover{background:rgba(255,255,255,.10)}
.jc-nav-icon-img{width:23px;height:23px;object-fit:contain;display:block}

/* body */
.jc-main{padding:9px 0 0}
.jc-guarantee-title{
  height:50px;display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:950;letter-spacing:-1.2px
}
.jc-guarantee-title .pink{color:#ff7896}
.jc-medal-img{width:29px;height:29px;object-fit:contain;margin:0 8px}

/* banners exactly: 1280x84 first, 638x84 after */
.jc-banner-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 16px}
.jc-banner{height:84px;display:block;overflow:hidden;border:1px solid #ddd;background:#f5f5f5}
.jc-banner:first-child{grid-column:1/-1}
.jc-banner img{width:100%;height:100%;display:block;object-fit:cover}
.jc-banner-empty{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(90deg,#eef8ff,#fff3f6);color:#aaa;font-weight:800
}

/* strip */
.jc-top10-strip{
  height:60px;border:1px solid #e4e4e4;border-radius:11px;
  display:flex;align-items:center;justify-content:center;margin-bottom:9px;
  color:#2d118f;font-size:20px;font-weight:900;letter-spacing:-.8px
}
.jc-finger-down{margin:0 13px;color:#333;font-family:"Segoe UI Symbol","Noto Sans Symbols",sans-serif;font-size:20px}

/* address/social */
.jc-social-strip{
  min-height:53px;border:1px solid #e4e4e4;border-radius:11px;
  display:flex;align-items:center;overflow:hidden;margin-bottom:10px
}
.jc-address{height:52px;display:flex;align-items:center;padding:0 18px;white-space:nowrap;font-size:17px;font-weight:900;letter-spacing:-.5px}
.jc-address .s1{color:#555}.jc-address .s2{color:#2478be}.jc-address .s3{color:#ff4e3f}.jc-address .s4{color:#111}
.jc-socials{margin-left:auto;height:52px;display:flex;align-items:center;gap:14px;padding-right:13px}
.jc-social{display:flex;align-items:center;gap:5px;white-space:nowrap;color:#333;font-size:16px;font-weight:800}
.jc-social-logo{width:30px;height:30px;border-radius:5px;display:grid;place-items:center;color:#fff;font-size:17px;font-weight:950}
.g{background:linear-gradient(135deg,#4285f4 0 25%,#34a853 25% 50%,#fbbc05 50% 75%,#ea4335 75%)}
.n{background:#04c75a}.d{background:linear-gradient(135deg,#fe4183,#ffd400)}
.k{background:#f7d600;color:#382f2d;font-size:10px}.b{background:#12bd38}.y{background:#e62117}
.i{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}.f{background:#3b5998}

/* 5 columns */
.jc-category-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:start;padding-bottom:17px}
.jc-card{border:1px solid #e4e4e4;border-radius:11px;overflow:hidden;background:#fff;min-width:0;min-height:468px}
.jc-card-head{height:64px;border-bottom:1px solid #e7e7e7;display:flex;align-items:center;padding:0 14px;gap:8px}
.jc-card-head img{width:22px;height:22px;display:block;object-fit:contain}
.jc-card-head a{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:19px;font-weight:900;letter-spacing:-.8px
}
.jc-hand{margin-left:auto;color:#999;font-family:"Segoe UI Symbol","Apple Symbols",sans-serif;font-size:31px;font-weight:400;line-height:1;transform:rotate(-16deg)}
.jc-list{list-style:none;margin:0;padding:10px 14px 11px;min-height:403px}
.jc-row{height:37px;display:flex;align-items:center;min-width:0;gap:7px}
.jc-rank-img{width:27px;height:27px;flex:0 0 27px;object-fit:contain}
.jc-site-icon{width:24px;height:24px;flex:0 0 24px;border:1px solid #ddd;border-radius:5px;overflow:hidden;background:#fff;display:grid;place-items:center}
.jc-site-icon img{width:100%;height:100%;object-fit:contain}
.jc-site-icon span{font-size:7px;color:#aaa}
.jc-site-name{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#111;font-size:16px;font-weight:900;letter-spacing:-.6px
}
.jc-row:nth-child(1) .jc-site-name{color:#f196aa}
.jc-row:nth-child(2) .jc-site-name{color:#8061af}
.jc-row:nth-child(3) .jc-site-name{color:#0aa68e}
.jc-empty{min-height:403px;display:flex;align-items:center;justify-content:center;text-align:center;color:#aaa;font-weight:700}

/* footer */
.jc-footer{min-height:110px;border-top:1px solid #e5e5e5;display:flex;align-items:center;justify-content:center;text-align:center;background:#fff}
.jc-footer-inner{font-size:13px;font-weight:800;line-height:1.65}
.jc-footer-inner strong{font-weight:950}
.jc-footer-sub{font-size:12px}

/* side scroll */
.jc-scrolls{position:fixed;right:28px;bottom:22px;z-index:100;display:flex;flex-direction:column;gap:9px}
.jc-scroll{width:45px;height:45px;border:0;border-radius:50%;background:#aaa;color:#fff;display:grid;place-items:center;font-size:24px;font-weight:900;cursor:pointer}
.jc-scroll:hover{background:#888}

/* taxonomy / ordinary pages */
.jc-page-main{padding:28px 0 60px}
.jc-page-title{font-size:26px;font-weight:900;margin:0 0 17px}
.jc-tax-box,.jc-content-box{border:1px solid #e4e4e4;border-radius:11px;background:#fff;padding:17px}
.jc-tax-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.jc-tax-item{min-height:57px;border:1px solid #ececec;border-radius:8px;display:flex;align-items:center;gap:8px;padding:8px 10px}

/* responsive */
@media(max-width:1320px){
  .jc-wrap{max-width:calc(100% - 24px)}
  .jc-masthead-inner{grid-template-columns:200px 190px minmax(180px,1fr) 360px;column-gap:12px}
  .jc-search{width:360px}
  .jc-nav-item{font-size:15px;padding:0 7px}
  .jc-socials{gap:9px}.jc-social{font-size:14px}
}
@media(max-width:1050px){
  .jc-masthead{height:auto}
  .jc-masthead-inner{height:auto;min-height:122px;padding:12px 0;grid-template-columns:1fr 1fr;row-gap:10px}
  .jc-brand{justify-content:flex-start}.jc-search{width:100%}.jc-search-field{flex:1}
  .jc-nav .jc-wrap{justify-content:flex-start;overflow-x:auto}
  .jc-category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .jc-social-strip{align-items:flex-start;flex-direction:column;padding:6px 0}
  .jc-socials{margin-left:0;height:auto;flex-wrap:wrap;padding:0 14px 5px}
}
@media(max-width:720px){
  .jc-wrap{max-width:calc(100% - 16px)}
  .jc-pill,.jc-star{display:none}
  .jc-quick-right{gap:7px}.jc-quick-right a{font-size:11px}
  .jc-masthead-inner{grid-template-columns:1fr}
  .jc-date,.jc-trend{display:none}
  .jc-brand{justify-content:center;height:70px}
  .jc-search{width:100%}.jc-search select{width:94px}
  .jc-nav,.jc-nav .jc-wrap,.jc-nav-item{height:49px}
  .jc-nav-item{font-size:14px}
  .jc-banner{height:55px}
  .jc-guarantee-title{font-size:20px}
  .jc-top10-strip{height:52px;font-size:16px}
  .jc-category-grid{grid-template-columns:1fr 1fr;gap:8px}
  .jc-card{min-height:430px}.jc-card-head{height:54px}.jc-card-head a{font-size:17px}
  .jc-list{min-height:365px;padding:8px 9px}.jc-row{height:35px}.jc-site-name{font-size:14px}
  .jc-social{font-size:12px}.jc-social-logo{width:25px;height:25px;font-size:13px}
  .jc-scrolls{right:10px;bottom:12px}.jc-scroll{width:40px;height:40px}
  .jc-tax-grid{grid-template-columns:1fr}
}
@media(max-width:470px){
  .jc-category-grid{grid-template-columns:1fr}
  .jc-pill-red{display:none!important}
  .jc-banner-grid{grid-template-columns:1fr}.jc-banner:first-child{grid-column:auto}
  .jc-banner{height:54px}
}


/* V2.1: 로그인/회원가입은 표시용 텍스트 */
.jc-static-auth{
  font-size:13px;
  font-weight:800;
  letter-spacing:-.3px;
  color:#111;
  cursor:default;
  user-select:none;
}
@media(max-width:720px){
  .jc-static-auth{font-size:11px}
}


/* V2.2 local asset tuning */
.jc-brand img{max-width:240px;max-height:84px}
.jc-social-logo{background:transparent!important;border-radius:6px;padding:0}
.jc-social-logo img{width:100%;height:100%;display:block;object-fit:contain}
.jc-medal-img{width:27px;height:27px}
.jc-nav-icon-img{width:23px;height:23px;border-radius:0}
.jc-card-head img{width:22px;height:22px;object-fit:contain}
.jc-rank-img{width:27px;height:27px;flex:0 0 27px;display:block}
.jc-site-icon img{width:100%;height:100%;display:block;object-fit:contain}


/* V2.3 telegram / hand local assets */
.jc-tg{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:15px!important;
  font-weight:900!important;
}
.jc-tg::before{
  content:"";
  width:18px;
  height:18px;
  background:url('assets/social/telegram.webp') center/contain no-repeat;
  display:inline-block;
  margin-right:0;
  transform:none;
}
.jc-hand{
  width:38px;
  height:38px;
  margin-left:auto;
  background:url('assets/ui/hand.webp') center/contain no-repeat;
  transform:rotate(-12deg);
  color:transparent!important;
  flex:0 0 38px;
}
@media(max-width:720px){
  .jc-hand{width:31px;height:31px;flex-basis:31px}
  .jc-tg{font-size:12px!important}
  .jc-tg::before{width:15px;height:15px}
}


/* =========================================================
   V2.4 영상/스크린샷 정밀 보정
   기준: 1728px 화면, 중앙 콘텐츠 1280px
========================================================= */

/* 원본 로고는 약 145~150px 폭 */
.jc-brand img{
  width:150px !important;
  max-width:150px !important;
  max-height:66px !important;
  height:auto !important;
  object-fit:contain;
}

/* 원본에서 날짜 → 인기검색어 → 넓은 로고영역 → 검색창 배치 */
.jc-masthead-inner{
  grid-template-columns:210px 150px minmax(0,1fr) 372px !important;
  column-gap:12px !important;
}

.jc-search{
  width:372px !important;
}

/* 11개 카테고리를 1280 안에 모두 보이게 */
.jc-nav .jc-wrap{
  justify-content:space-between !important;
  padding-left:62px;
  padding-right:62px;
  overflow:visible;
}

.jc-nav-item{
  padding-left:0 !important;
  padding-right:0 !important;
  font-size:16px !important;
  gap:5px !important;
}

.jc-nav-icon-img{
  width:22px !important;
  height:22px !important;
}

/* 원본 카드 글꼴 체감에 가깝게 */
.jc-card-head a{
  font-size:18px !important;
  font-weight:900 !important;
}

.jc-site-name{
  font-size:16px !important;
  font-weight:900 !important;
}

/* 원본 공식보증업체 제목 */
.jc-guarantee-title{
  font-size:24px !important;
  height:50px !important;
}

/* 워드프레스 관리자 바 때문에 화면 비교시 고정버튼이 가려지지 않도록 */
body.admin-bar .jc-scrolls{
  bottom:22px;
}

/* 1280 이하부터는 자연스럽게 스크롤형 메뉴로 전환 */
@media(max-width:1320px){
  .jc-nav .jc-wrap{
    padding-left:30px;
    padding-right:30px;
  }
  .jc-nav-item{
    font-size:15px !important;
  }
}

@media(max-width:1050px){
  .jc-nav .jc-wrap{
    justify-content:flex-start !important;
    padding-left:0;
    padding-right:0;
    overflow-x:auto;
    gap:15px;
  }
  .jc-masthead-inner{
    grid-template-columns:1fr 1fr !important;
  }
  .jc-search{
    width:100% !important;
  }
}

@media(max-width:720px){
  .jc-nav .jc-wrap{
    gap:12px;
  }
  .jc-brand img{
    width:145px !important;
  }
}


/* V2.4.1: '주소콘' 과 '공식보증업체' 사이 공백 간격 고정 */
.jc-guarantee-brand{
  display:inline-block;
  margin-right:8px;
}
@media(max-width:720px){
  .jc-guarantee-brand{
    margin-right:6px;
  }
}


/* =========================================================
   V2.5 - 영상 기준 액션 디테일
========================================================= */

/* 인기검색어 교체 애니메이션 */
.jc-trend{
  overflow:hidden;
}
.jc-trend-no,
.jc-trend-keyword{
  transition:
    opacity .18s ease,
    transform .18s ease;
}
.jc-trend.is-changing .jc-trend-no,
.jc-trend.is-changing .jc-trend-keyword{
  opacity:0;
  transform:translateY(-5px);
}

/* 검색영역 */
.jc-search select,
.jc-search-field input,
.jc-search-field button{
  transition:
    background-color .15s ease,
    box-shadow .15s ease,
    color .15s ease;
}
.jc-search select:hover,
.jc-search-field input:hover{
  background:#eeeeee;
}
.jc-search-field:focus-within input{
  background:#f7f7f7;
  box-shadow:inset 0 0 0 1px #dfdfdf;
}
.jc-search-field button:hover{
  color:#000;
  background:rgba(0,0,0,.025);
}
.jc-search-field button:active{
  transform:scale(.94);
}

/* 상단 버튼은 원본처럼 아주 미세하게만 반응 */
.jc-pill{
  transition:
    transform .12s ease,
    filter .12s ease;
}
.jc-pill:hover{
  transform:translateY(-1px);
  filter:brightness(1.035);
}
.jc-pill:active{
  transform:translateY(0);
}

/* 핑크 메뉴 */
.jc-nav-item{
  transition:
    background-color .14s ease,
    transform .14s ease;
}
.jc-nav-item:hover{
  background:rgba(255,255,255,.12);
  transform:translateY(-1px);
}
.jc-nav-item:active{
  transform:translateY(0);
}

/* 포털 아이콘 */
.jc-social{
  transition:
    color .14s ease,
    transform .14s ease;
}
.jc-social-logo{
  transition:transform .14s ease;
}
.jc-social:hover{
  transform:translateY(-1px);
}
.jc-social:hover .jc-social-logo{
  transform:scale(1.055);
}
.jc-social:active{
  transform:translateY(0);
}

/* 주소 바로가기 */
.jc-address{
  transition:background-color .14s ease;
}
.jc-address:hover{
  background:#fff9fa;
}

/* 배너는 확대하지 않고 밝기만 살짝 변경 */
.jc-banner img{
  transition:
    filter .18s ease,
    opacity .18s ease;
}
a.jc-banner:hover img{
  filter:brightness(1.035);
}
a.jc-banner:active img{
  opacity:.92;
}

/* TOP10 카드 / 링크 행 */
.jc-card{
  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}
.jc-card:hover{
  border-color:#dddddd;
  box-shadow:0 2px 7px rgba(0,0,0,.035);
}
.jc-row{
  transition:background-color .12s ease;
}
.jc-row:hover{
  background:#fffafb;
}
.jc-site-name{
  transition:
    transform .12s ease,
    color .12s ease;
}
.jc-row:hover .jc-site-name{
  transform:translateX(2px);
}
.jc-row:active .jc-site-name{
  transform:translateX(0);
}

/* 카드 헤더 손가락에 아주 미세한 액션 */
.jc-hand{
  transition:
    transform .16s ease,
    opacity .16s ease;
}
.jc-card:hover .jc-hand{
  transform:rotate(-8deg) translateY(-1px);
}

/* 상/하단 스크롤 버튼 */
.jc-scroll{
  transition:
    transform .12s ease,
    background-color .12s ease;
}
.jc-scroll:hover{
  transform:scale(1.05);
}
.jc-scroll:active{
  transform:scale(.92);
}

/* 모션 최소화 설정을 쓰는 사용자 배려 */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition:none !important;
    animation:none !important;
  }
}


/* =========================================================
   V2.6 - 두 액션 디테일 강화
   1) 검색엔진 드롭다운
   2) 인기검색어 롤링
========================================================= */

/* --- 검색엔진 커스텀 드롭다운 --- */
.jc-engine{
  position:relative;
  width:123px;
  flex:0 0 123px;
  height:42px;
}
.jc-engine-toggle{
  width:100%;
  height:42px;
  border:0;
  border-radius:8px;
  background:#f3f3f3;
  padding:0 13px;
  outline:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#111;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
  transition:
    background-color .15s ease,
    box-shadow .15s ease,
    transform .12s ease;
}
.jc-engine-toggle:hover{
  background:#eeeeee;
}
.jc-engine.is-open .jc-engine-toggle,
.jc-engine-toggle:focus-visible{
  background:#f7f7f7;
  box-shadow:inset 0 0 0 1px #dfdfdf;
}
.jc-engine-toggle:active{
  transform:scale(.985);
}
.jc-engine-caret{
  color:#444;
  font-size:12px;
  line-height:1;
  transition:transform .16s ease;
}
.jc-engine.is-open .jc-engine-caret{
  transform:rotate(180deg);
}

.jc-engine-menu{
  position:absolute;
  top:46px;
  left:0;
  width:123px;
  padding:6px 0;
  border:1px solid #e0e0e0;
  border-radius:10px;
  background:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  z-index:40;
  opacity:0;
  transform:translateY(-5px);
  pointer-events:none;
  transition:
    opacity .16s ease,
    transform .16s ease;
}
.jc-engine.is-open .jc-engine-menu{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.jc-engine-menu[hidden]{
  display:block !important;
  visibility:hidden;
}
.jc-engine.is-open .jc-engine-menu[hidden]{
  visibility:visible;
}
.jc-engine-item{
  width:100%;
  height:34px;
  border:0;
  background:#fff;
  display:flex;
  align-items:center;
  padding:0 12px;
  color:#222;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:
    background-color .12s ease,
    color .12s ease,
    padding-left .12s ease;
}
.jc-engine-item:hover{
  background:#fff7fa;
  color:#ff5d84;
  padding-left:15px;
}
.jc-engine-item.is-active{
  color:#111;
  background:#f8f8f8;
}

/* --- 인기검색어 롤링 디테일 --- */
.jc-trend{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:16px;
  font-weight:900;
  letter-spacing:-.5px;
  overflow:hidden;
}
.jc-trend-window{
  position:relative;
  display:inline-flex;
  align-items:center;
  overflow:hidden;
  min-width:92px;
  height:28px;
}
.jc-trend-stack{
  position:relative;
  display:block;
  height:28px;
}
.jc-trend-line{
  position:absolute;
  top:0;
  left:0;
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  transition:
    opacity .18s ease,
    transform .18s ease;
}
.jc-trend-line.is-current{
  opacity:1;
  transform:translateY(0);
}
.jc-trend-line.is-next{
  opacity:0;
  transform:translateY(18px);
}
.jc-trend.is-animating .jc-trend-line.is-current{
  opacity:0;
  transform:translateY(-18px);
}
.jc-trend.is-animating .jc-trend-line.is-next{
  opacity:1;
  transform:translateY(0);
}
.jc-trend-no{
  color:#f395aa;
}
.jc-trend-keyword{
  color:#333;
}
.jc-trend:hover .jc-trend-pause{
  opacity:1;
}
.jc-trend-pause{
  position:absolute;
  right:-18px;
  top:50%;
  transform:translateY(-50%);
  font-size:10px;
  color:#aaa;
  opacity:0;
  transition:opacity .15s ease;
}

@media(max-width:720px){
  .jc-engine{
    width:94px;
    flex-basis:94px;
    height:38px;
  }
  .jc-engine-toggle{
    height:38px;
    font-size:12px;
    padding:0 10px;
  }
  .jc-engine-menu{
    width:94px;
    top:42px;
  }
  .jc-engine-item{
    height:32px;
    font-size:12px;
    padding:0 10px;
  }
  .jc-trend-window{
    min-width:82px;
    height:24px;
  }
  .jc-trend-stack{
    height:24px;
  }
  .jc-trend-line{
    gap:4px;
  }
}


/* =========================================================
   V2.8 - 액션(색상변경 + 동작) 강화
========================================================= */

/* 상단 버튼 */
.jc-pill{
  transition:
    transform .16s ease,
    filter .16s ease,
    box-shadow .16s ease;
}
.jc-pill:hover{
  transform:translateY(-1px);
  filter:brightness(1.04) saturate(1.02);
  box-shadow:0 2px 6px rgba(0,0,0,.10);
}
.jc-pill:active{
  transform:translateY(0) scale(.985);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}

/* 텍스트 링크 공통 */
.jc-quick-right a,
.jc-static-auth{
  transition:
    color .14s ease,
    transform .14s ease;
}
.jc-quick-right a:hover{
  color:#4962ca;
  transform:translateY(-1px);
}
.jc-quick-right a:active{
  transform:translateY(0);
}

/* 검색창 전체 */
.jc-search{
  transition:transform .14s ease;
}
.jc-search:hover{
  transform:translateY(-1px);
}

/* 검색엔진 드롭다운 */
.jc-engine-toggle{
  transition:
    background-color .15s ease,
    box-shadow .15s ease,
    transform .14s ease,
    color .14s ease;
}
.jc-engine-toggle:hover{
  background:#ececec;
  color:#111;
}
.jc-engine.is-open .jc-engine-toggle{
  background:#f8f8f8;
  box-shadow:inset 0 0 0 1px #d9d9d9, 0 2px 7px rgba(0,0,0,.05);
}
.jc-engine-menu{
  transition:
    opacity .16s ease,
    transform .16s ease,
    box-shadow .16s ease;
}
.jc-engine.is-open .jc-engine-menu{
  box-shadow:0 10px 24px rgba(0,0,0,.11);
}
.jc-engine-item{
  transition:
    background-color .12s ease,
    color .12s ease,
    padding-left .12s ease;
}
.jc-engine-item:hover{
  background:#fff4f7;
  color:#ff5a84;
  padding-left:16px;
}
.jc-engine-item.is-active{
  background:#fff1f5;
  color:#ff4f7d;
}

/* 검색 입력부 */
.jc-search-field{
  transition:
    background-color .15s ease,
    box-shadow .15s ease;
}
.jc-search-field:hover{
  background:#f7f7f7;
}
.jc-search-field:focus-within{
  background:#fbfbfb;
  box-shadow:0 0 0 1px #dfdfdf inset;
}
.jc-search-field input{
  transition:color .15s ease, transform .15s ease;
}
.jc-search-field:focus-within input{
  transform:translateX(1px);
}
.jc-search-field button{
  transition:
    background-color .15s ease,
    color .15s ease,
    transform .12s ease;
}
.jc-search-field button:hover{
  background:#f0f0f0;
  color:#111;
}
.jc-search-field button:active{
  transform:scale(.93);
}

/* 인기검색어 */
.jc-trend{
  transition:
    color .15s ease,
    transform .15s ease;
}
.jc-trend:hover{
  transform:translateY(-1px);
}
.jc-trend-no{
  transition:color .16s ease;
}
.jc-trend-keyword{
  transition:color .16s ease;
}
.jc-trend:hover .jc-trend-no{
  color:#ff7497;
}
.jc-trend:hover .jc-trend-keyword{
  color:#111;
}

/* 핑크 메뉴 */
.jc-nav-item{
  transition:
    color .14s ease,
    transform .14s ease,
    opacity .14s ease;
}
.jc-nav-item:hover{
  color:#fffbe0;
  transform:translateY(-1px);
}
.jc-nav-item:hover .jc-nav-icon-img{
  transform:translateY(-1px) scale(1.05);
}
.jc-nav-item:active{
  transform:translateY(0) scale(.985);
}
.jc-nav-icon-img{
  transition:transform .14s ease, filter .14s ease;
}
.jc-nav-item:hover .jc-nav-icon-img{
  filter:brightness(1.05);
}

/* 공식보증업체 타이틀 */
.jc-guarantee-title{
  transition:transform .16s ease;
}
.jc-guarantee-title:hover{
  transform:translateY(-1px);
}
.jc-medal-img{
  transition:transform .16s ease;
}
.jc-guarantee-title:hover .jc-medal-img{
  transform:rotate(-9deg) translateY(-1px);
}

/* 주소 바로가기 줄 */
.jc-address{
  transition:
    background-color .14s ease,
    transform .14s ease,
    box-shadow .14s ease;
}
.jc-address:hover{
  background:#fff7fa;
  transform:translateY(-1px);
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.jc-address:active{
  transform:translateY(0) scale(.995);
}

/* 포털 아이콘 줄 */
.jc-social{
  transition:
    transform .14s ease,
    color .14s ease;
}
.jc-social:hover{
  transform:translateY(-2px);
  color:#111;
}
.jc-social-logo{
  transition:
    transform .14s ease,
    filter .14s ease;
}
.jc-social:hover .jc-social-logo{
  transform:scale(1.06);
  filter:brightness(1.03);
}
.jc-social:active{
  transform:translateY(0) scale(.99);
}

/* 배너 */
.jc-banner{
  transition:
    transform .16s ease,
    box-shadow .16s ease;
}
a.jc-banner:hover{
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.jc-banner img{
  transition:
    filter .18s ease,
    opacity .18s ease;
}
a.jc-banner:hover img{
  filter:brightness(1.04) saturate(1.02);
}
a.jc-banner:active{
  transform:translateY(0);
}
a.jc-banner:active img{
  opacity:.93;
}

/* TOP10 카드 */
.jc-card{
  transition:
    border-color .15s ease,
    box-shadow .16s ease,
    transform .16s ease;
}
.jc-card:hover{
  border-color:#dbdbdb;
  box-shadow:0 4px 14px rgba(0,0,0,.045);
  transform:translateY(-1px);
}
.jc-card-head{
  transition:
    background-color .14s ease,
    border-color .14s ease;
}
.jc-card:hover .jc-card-head{
  background:#fffafb;
  border-color:#ededed;
}
.jc-card-head a{
  transition:
    color .14s ease,
    transform .14s ease;
}
.jc-card:hover .jc-card-head a{
  color:#111;
}
.jc-card:hover .jc-card-head img{
  transform:translateY(-1px) scale(1.04);
}
.jc-card-head img{
  transition:transform .14s ease;
}
.jc-hand{
  transition:
    transform .16s ease,
    opacity .16s ease,
    filter .16s ease;
}
.jc-card:hover .jc-hand{
  transform:rotate(-7deg) translateY(-2px);
  filter:brightness(1.03);
}

/* 리스트 행 액션 */
.jc-row{
  transition:
    background-color .12s ease,
    transform .12s ease;
}
.jc-row:hover{
  background:#fffafb;
  transform:translateX(1px);
}
.jc-rank-img{
  transition:transform .12s ease;
}
.jc-row:hover .jc-rank-img{
  transform:scale(1.04);
}
.jc-site-icon{
  transition:
    transform .12s ease,
    box-shadow .12s ease;
}
.jc-row:hover .jc-site-icon{
  transform:translateY(-1px);
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.jc-site-name{
  transition:
    color .12s ease,
    transform .12s ease;
}
.jc-row:hover .jc-site-name{
  color:#222;
  transform:translateX(2px);
}
.jc-row:active{
  transform:translateX(0);
}

/* 위/아래 스크롤 버튼 */
.jc-scroll{
  transition:
    transform .13s ease,
    background-color .13s ease,
    box-shadow .13s ease;
}
.jc-scroll:hover{
  background:#888;
  transform:scale(1.06);
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}
.jc-scroll:active{
  transform:scale(.93);
}

/* 모션 줄이기 배려 */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    transition:none !important;
    animation:none !important;
    transform:none !important;
  }
}


/* =========================================================
   V2.9 - 원본 TOP10 무지개 글자 액션
   원본 영상 분석:
   - 글자 자체에만 색상 그라데이션
   - 좌우 손가락은 검정 고정
   - 빨강/핑크 ↔ 주황 ↔ 노랑 ↔ 초록 ↔ 파랑 ↔ 보라
   - 편도 약 2초, 왕복 약 4초
========================================================= */

.jc-top10-strip{
  color:#111 !important;
}

/* 원본처럼 좌우 아이콘은 움직이거나 색이 바뀌지 않음 */
.jc-top10-strip .jc-finger-down{
  display:inline-block;
  color:#111 !important;
  background:none !important;
  -webkit-text-fill-color:#111 !important;
  font-size:18px;
  line-height:1;
  margin:0 13px;
  transform:none !important;
  animation:none !important;
}

/*
 * 왼쪽→오른쪽 배경색 배열은
 * 보라→파랑→초록→노랑→주황→빨강→핑크.
 *
 * 실제 배경 이미지를 글자보다 약 5배 넓게 두고,
 * background-position을 왕복시켜
 * 원본 영상처럼 한 프레임 안에서도 글자 좌우의 색이 다르게 보이게 함.
 */
.jc-top10-rainbow{
  display:inline-block;

  background-image:linear-gradient(
    90deg,
    #d45bc9 0%,
    #8b38bf 8%,
    #3218a8 17%,
    #0755c8 27%,
    #0083b8 35%,
    #078b43 44%,
    #75b900 51%,
    #d5dc00 58%,
    #ffd000 65%,
    #ff9d00 73%,
    #ff6816 81%,
    #f12f49 90%,
    #e65ab7 100%
  );

  background-size:500% 100%;
  background-position:100% 50%;

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent !important;
  -webkit-text-fill-color:transparent;

  font-weight:900;

  animation:
    jc-original-top10-rainbow
    2s
    linear
    infinite
    alternate;

  will-change:background-position;
}

@keyframes jc-original-top10-rainbow{
  from{
    background-position:100% 50%;
  }

  to{
    background-position:0% 50%;
  }
}

/* hover 때문에 원본 애니메이션이 달라지지 않게 고정 */
.jc-top10-strip:hover .jc-top10-rainbow{
  animation-play-state:running;
  transform:none;
}

/* 모바일에서도 같은 액션 유지 */
@media(max-width:720px){
  .jc-top10-strip .jc-finger-down{
    font-size:16px;
    margin:0 8px;
  }
}

/*
 * 사용자 OS가 '모션 줄이기'를 켠 경우에도
 * 이 제목의 색 변화는 사이트 핵심 표현이라 유지.
 */
@media (prefers-reduced-motion: reduce){
  .jc-top10-rainbow{
    animation:
      jc-original-top10-rainbow
      2s
      linear
      infinite
      alternate !important;
  }
}


/* =========================================================
   V2.9.1 - TOP10 아래손가락 디테일 보정
   - 폭이 더 넓게 보이도록
   - 원본처럼 깜박임 추가
========================================================= */

.jc-top10-strip .jc-finger-down{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:34px;
  min-width:34px;
  height:24px;

  color:#111 !important;
  background:none !important;
  -webkit-text-fill-color:#111 !important;

  font-size:24px;
  font-weight:900;
  line-height:1;

  margin:0 12px;

  opacity:1;
  transform-origin:center center;
  will-change:opacity, transform, filter, text-shadow;

  animation:jc-finger-blink 0.92s steps(2,end) infinite;
}

/* 좌우가 동시에 완전히 똑같이 깜빡이지 않게 약간 시간차 */
.jc-top10-strip .jc-finger-right{
  animation-delay:.46s;
}

@keyframes jc-finger-blink{
  0%{
    opacity:1;
    transform:translateY(0) scale(1);
    text-shadow:0 0 0 rgba(0,0,0,0);
    filter:brightness(1);
  }

  24%{
    opacity:1;
    transform:translateY(0) scale(1.02);
    text-shadow:0 0 0 rgba(0,0,0,0);
    filter:brightness(1.02);
  }

  25%{
    opacity:.35;
    transform:translateY(0) scale(.98);
    text-shadow:0 0 0 rgba(0,0,0,0);
    filter:brightness(.88);
  }

  49%{
    opacity:.35;
    transform:translateY(0) scale(.98);
    text-shadow:0 0 0 rgba(0,0,0,0);
    filter:brightness(.88);
  }

  50%{
    opacity:1;
    transform:translateY(0) scale(1.03);
    text-shadow:0 0 5px rgba(0,0,0,.08);
    filter:brightness(1.05);
  }

  74%{
    opacity:1;
    transform:translateY(0) scale(1);
    text-shadow:0 0 0 rgba(0,0,0,0);
    filter:brightness(1);
  }

  75%{
    opacity:.58;
    transform:translateY(0) scale(.99);
    text-shadow:0 0 0 rgba(0,0,0,0);
    filter:brightness(.94);
  }

  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    text-shadow:0 0 0 rgba(0,0,0,0);
    filter:brightness(1);
  }
}

/* 모바일에서도 기존보다 넓고 잘 보이게 */
@media(max-width:720px){
  .jc-top10-strip .jc-finger-down{
    width:28px;
    min-width:28px;
    height:22px;
    font-size:21px;
    margin:0 7px;
  }
}


/* =========================================================
   V2.9.2 - TOP10 손가락 '아래로 가리키는' 액션 보정
   - 단순 깜박임만이 아니라 아래로 톡 찍는 동작 추가
   - 깜박임 + 아래 방향 바운스 동시 적용
========================================================= */

.jc-top10-strip .jc-finger-down{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:36px !important;
  min-width:36px !important;
  height:26px !important;

  font-size:25px !important;
  font-weight:900;
  line-height:1;

  margin:0 12px !important;

  color:#111 !important;
  background:none !important;
  -webkit-text-fill-color:#111 !important;

  transform-origin:center top;
  will-change:transform, opacity, filter, text-shadow;

  /*
   * 첫 번째 애니메이션:
   * 아래로 가리키는 톡톡 찍기 동작
   *
   * 두 번째 애니메이션:
   * 원본 느낌의 깜박임
   */
  animation:
    jc-finger-point-down .72s ease-in-out infinite,
    jc-finger-blink-plus .92s steps(2,end) infinite;
}

/* 좌우가 완전히 동시에 움직이지 않도록 살짝 차이 */
.jc-top10-strip .jc-finger-right{
  animation-delay:
    .18s,
    .46s;
}

@keyframes jc-finger-point-down{
  0%{
    transform:translateY(0) scale(1);
  }

  22%{
    transform:translateY(0) scale(1.02);
  }

  38%{
    transform:translateY(5px) scale(1.06);
  }

  52%{
    transform:translateY(2px) scale(1.01);
  }

  70%{
    transform:translateY(6px) scale(1.04);
  }

  100%{
    transform:translateY(0) scale(1);
  }
}

@keyframes jc-finger-blink-plus{
  0%{
    opacity:1;
    filter:brightness(1);
    text-shadow:0 0 0 rgba(0,0,0,0);
  }

  24%{
    opacity:1;
    filter:brightness(1.03);
    text-shadow:0 0 0 rgba(0,0,0,0);
  }

  25%{
    opacity:.38;
    filter:brightness(.88);
    text-shadow:0 0 0 rgba(0,0,0,0);
  }

  49%{
    opacity:.38;
    filter:brightness(.88);
    text-shadow:0 0 0 rgba(0,0,0,0);
  }

  50%{
    opacity:1;
    filter:brightness(1.08);
    text-shadow:0 0 6px rgba(0,0,0,.10);
  }

  74%{
    opacity:1;
    filter:brightness(1);
    text-shadow:0 0 0 rgba(0,0,0,0);
  }

  75%{
    opacity:.62;
    filter:brightness(.95);
    text-shadow:0 0 0 rgba(0,0,0,0);
  }

  100%{
    opacity:1;
    filter:brightness(1);
    text-shadow:0 0 0 rgba(0,0,0,0);
  }
}

@media(max-width:720px){
  .jc-top10-strip .jc-finger-down{
    width:30px !important;
    min-width:30px !important;
    height:23px !important;
    font-size:22px !important;
    margin:0 7px !important;
  }

  @keyframes jc-finger-point-down{
    0%{
      transform:translateY(0) scale(1);
    }

    22%{
      transform:translateY(0) scale(1.02);
    }

    38%{
      transform:translateY(4px) scale(1.05);
    }

    52%{
      transform:translateY(2px) scale(1.01);
    }

    70%{
      transform:translateY(5px) scale(1.03);
    }

    100%{
      transform:translateY(0) scale(1);
    }
  }
}


/* =========================================================
   V2.9.3 - TOP10 손가락 모양/움직임 원본 쪽으로 재보정
   - 문자(☟) 기반이 아니라 실제 손가락 아이콘 이미지 사용
   - 아래를 '콕콕' 찌르는 모션으로 변경
========================================================= */

/*
 * 이전 버전의 ☟ 글자형 손가락을 덮어씀.
 * 테마 내부의 hand.webp 아이콘을 회전해서 아래 방향 손가락으로 사용.
 */
.jc-top10-strip .jc-finger-down{
  display:inline-block !important;
  position:relative;
  vertical-align:middle;

  width:34px !important;
  min-width:34px !important;
  height:34px !important;

  margin:0 10px !important;

  font-size:0 !important;
  line-height:0 !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  text-shadow:none !important;
  background:none !important;

  transform-origin:50% 18%;
  will-change:transform, opacity, filter;
  filter:drop-shadow(0 0 0 rgba(0,0,0,0));

  animation:jc-finger-real-down 0.88s ease-in-out infinite !important;
}

.jc-top10-strip .jc-finger-down::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('assets/ui/hand.webp') center/contain no-repeat;

  /*
   * 기존 hand.webp가 비스듬한 방향 손가락이라
   * 아래를 가리키도록 회전.
   */
  transform:rotate(98deg);
  transform-origin:center center;
}

/* 좌우가 약간 어긋나게 콕콕 움직이도록 */
.jc-top10-strip .jc-finger-right{
  animation-delay:.22s !important;
}

@keyframes jc-finger-real-down{
  0%{
    transform:translateY(0) scale(1);
    opacity:1;
    filter:brightness(1);
  }

  18%{
    transform:translateY(0) scale(1.01);
    opacity:1;
    filter:brightness(1.01);
  }

  32%{
    transform:translateY(7px) scale(1.06);
    opacity:1;
    filter:brightness(1.03);
  }

  42%{
    transform:translateY(2px) scale(1.01);
    opacity:.88;
    filter:brightness(.98);
  }

  56%{
    transform:translateY(8px) scale(1.05);
    opacity:1;
    filter:brightness(1.04);
  }

  68%{
    transform:translateY(1px) scale(1);
    opacity:.9;
    filter:brightness(.98);
  }

  82%{
    transform:translateY(5px) scale(1.03);
    opacity:1;
    filter:brightness(1.02);
  }

  100%{
    transform:translateY(0) scale(1);
    opacity:1;
    filter:brightness(1);
  }
}

/* 모바일 */
@media(max-width:720px){
  .jc-top10-strip .jc-finger-down{
    width:29px !important;
    min-width:29px !important;
    height:29px !important;
    margin:0 7px !important;
  }

  @keyframes jc-finger-real-down{
    0%{
      transform:translateY(0) scale(1);
      opacity:1;
      filter:brightness(1);
    }

    18%{
      transform:translateY(0) scale(1.01);
      opacity:1;
      filter:brightness(1.01);
    }

    32%{
      transform:translateY(5px) scale(1.05);
      opacity:1;
      filter:brightness(1.03);
    }

    42%{
      transform:translateY(2px) scale(1.01);
      opacity:.9;
      filter:brightness(.98);
    }

    56%{
      transform:translateY(6px) scale(1.04);
      opacity:1;
      filter:brightness(1.04);
    }

    68%{
      transform:translateY(1px) scale(1);
      opacity:.92;
      filter:brightness(.98);
    }

    82%{
      transform:translateY(4px) scale(1.03);
      opacity:1;
      filter:brightness(1.02);
    }

    100%{
      transform:translateY(0) scale(1);
      opacity:1;
      filter:brightness(1);
    }
  }
}


/* =========================================================
   V2.9.4 - TOP10 손가락 모양 원본 캡처 기반 보정
   - 사용자가 보낸 원본 스크린샷에서 손가락 자체를 크롭해 사용
   - 좌/우 손가락 모양 그대로 반영
   - 아래로 콕 찍는 미세 액션 유지
========================================================= */

.jc-top10-strip .jc-finger-down{
  position:relative;
  display:inline-block !important;
  vertical-align:middle;

  width:36px !important;
  min-width:36px !important;
  height:28px !important;

  margin:0 10px !important;

  background:none !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
  text-shadow:none !important;

  transform-origin:center 35%;
  will-change:transform, opacity, filter;
  animation:jc-top10-finger-tap .82s ease-in-out infinite;
}

.jc-top10-strip .jc-finger-down::before{
  content:"";
  position:absolute;
  inset:0;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}

.jc-top10-strip .jc-finger-left::before{
  background-image:url('assets/ui/top10-finger-left.png');
}

.jc-top10-strip .jc-finger-right::before{
  background-image:url('assets/ui/top10-finger-right.png');
}

.jc-top10-strip .jc-finger-right{
  animation-delay:.20s;
}

@keyframes jc-top10-finger-tap{
  0%{
    transform:translateY(0) scale(1);
    opacity:1;
    filter:brightness(1);
  }
  20%{
    transform:translateY(0) scale(1.01);
    opacity:1;
    filter:brightness(1.01);
  }
  38%{
    transform:translateY(5px) scale(1.03);
    opacity:1;
    filter:brightness(1.02);
  }
  55%{
    transform:translateY(1px) scale(1);
    opacity:.92;
    filter:brightness(.98);
  }
  72%{
    transform:translateY(4px) scale(1.02);
    opacity:1;
    filter:brightness(1.01);
  }
  100%{
    transform:translateY(0) scale(1);
    opacity:1;
    filter:brightness(1);
  }
}

@media(max-width:720px){
  .jc-top10-strip .jc-finger-down{
    width:30px !important;
    min-width:30px !important;
    height:24px !important;
    margin:0 7px !important;
  }
}


/* =========================================================
   V2.9.5 - TOP10 손가락 모양 재크롭 보정
   - 최신 스크린샷 기준 더 타이트하게 손가락만 재크롭
   - 흰 배경 제거 PNG 적용
   - 모양 중심, 액션은 절제
========================================================= */

.jc-top10-strip .jc-finger-down{
  position:relative;
  display:inline-block !important;
  vertical-align:middle;

  width:30px !important;
  min-width:30px !important;
  height:24px !important;

  margin:0 12px !important;

  background:none !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
  text-shadow:none !important;

  transform-origin:center 40%;
  will-change:transform, opacity;
  animation:jc-top10-finger-tap-soft .95s ease-in-out infinite;
}

.jc-top10-strip .jc-finger-down::before{
  content:"";
  position:absolute;
  inset:0;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}

.jc-top10-strip .jc-finger-left::before{
  background-image:url('assets/ui/top10-finger-left.png');
}

.jc-top10-strip .jc-finger-right::before{
  background-image:url('assets/ui/top10-finger-right.png');
}

.jc-top10-strip .jc-finger-right{
  animation-delay:.18s;
}

@keyframes jc-top10-finger-tap-soft{
  0%{
    transform:translateY(0);
    opacity:1;
  }
  24%{
    transform:translateY(0);
    opacity:1;
  }
  42%{
    transform:translateY(4px);
    opacity:1;
  }
  58%{
    transform:translateY(1px);
    opacity:.96;
  }
  78%{
    transform:translateY(3px);
    opacity:1;
  }
  100%{
    transform:translateY(0);
    opacity:1;
  }
}

@media(max-width:720px){
  .jc-top10-strip .jc-finger-down{
    width:26px !important;
    min-width:26px !important;
    height:21px !important;
    margin:0 8px !important;
  }
}


/* =========================================================
   V2.9.6 - 원본 영상에서 직접 추출한 TOP10 손가락
   분석 결과:
   - 검은 손목 + 흰 손 + 검은/회색 테두리
   - 양쪽 동일한 아래 방향 손가락
   - 사라지는 깜박임 없음
   - 약 1.2초 주기로 최대 약 5px 아래로 이동 후 복귀
========================================================= */

.jc-top10-strip .jc-finger-down{
  display:inline-block !important;
  position:relative;
  vertical-align:middle;

  width:28px !important;
  min-width:28px !important;
  height:30px !important;

  margin:0 10px !important;

  font-size:0 !important;
  line-height:0 !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  background:none !important;
  text-shadow:none !important;

  opacity:1 !important;
  transform-origin:center center;
  will-change:transform;

  animation:
    jc-original-finger-down
    1.2s
    linear
    infinite !important;
}

/* 좌우 둘 다 원본과 같은 손가락 이미지 */
.jc-top10-strip .jc-finger-down::before{
  content:"";
  position:absolute;
  inset:0;

  background-image:url('assets/ui/top10-finger-original.png') !important;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;

  transform:none !important;
  opacity:1 !important;
}

/* 원본 영상에서는 좌/우가 같은 타이밍으로 움직임 */
.jc-top10-strip .jc-finger-right{
  animation-delay:0s !important;
}

/*
 * 실제 원본 프레임 이동량:
 * 0.0~0.3s : 상단 정지
 * 0.4~0.7s : 약 5px 아래로 이동
 * 0.8~1.2s : 다시 위로 복귀
 */
@keyframes jc-original-finger-down{
  0%{
    transform:translateY(0);
  }

  25%{
    transform:translateY(0);
  }

  33%{
    transform:translateY(2px);
  }

  42%{
    transform:translateY(3px);
  }

  50%{
    transform:translateY(4px);
  }

  58%{
    transform:translateY(5px);
  }

  67%{
    transform:translateY(4px);
  }

  75%{
    transform:translateY(4px);
  }

  83%{
    transform:translateY(3px);
  }

  92%{
    transform:translateY(1px);
  }

  100%{
    transform:translateY(0);
  }
}

@media(max-width:720px){
  .jc-top10-strip .jc-finger-down{
    width:25px !important;
    min-width:25px !important;
    height:27px !important;
    margin:0 7px !important;
  }
}


/* =========================================================
   V2.9.7 - TOP10 손가락 액션 확실히 작동하도록 수정
   핵심:
   - 바깥 span이 아니라 실제 손가락 이미지(::before)에 직접 애니메이션 적용
   - 아래로 내려갔다가 제자리로 오는 동작을 더 분명하게 보이게 조정
========================================================= */

.jc-top10-strip .jc-finger-down{
  display:inline-block !important;
  position:relative;
  vertical-align:middle;

  width:28px !important;
  min-width:28px !important;
  height:30px !important;

  margin:0 10px !important;

  font-size:0 !important;
  line-height:0 !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  background:none !important;
  text-shadow:none !important;

  opacity:1 !important;
  transform:none !important;
  animation:none !important;
  overflow:visible !important;
}

.jc-top10-strip .jc-finger-down::before{
  content:"";
  position:absolute;
  inset:0;

  background-image:url('assets/ui/top10-finger-original.png') !important;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;

  display:block;
  opacity:1 !important;
  transform:translate3d(0,0,0);
  will-change:transform;
  animation:jc-original-finger-down-real 1.15s ease-in-out infinite !important;
}

/* 좌우는 같은 타이밍으로 움직이게 유지 */
.jc-top10-strip .jc-finger-right::before{
  animation-delay:0s !important;
}

/* 아래로 내려갔다가 복귀하는 동작 */
@keyframes jc-original-finger-down-real{
  0%{
    transform:translate3d(0,0,0);
  }

  18%{
    transform:translate3d(0,0,0);
  }

  32%{
    transform:translate3d(0,2px,0);
  }

  45%{
    transform:translate3d(0,4px,0);
  }

  58%{
    transform:translate3d(0,6px,0);
  }

  70%{
    transform:translate3d(0,4px,0);
  }

  82%{
    transform:translate3d(0,2px,0);
  }

  100%{
    transform:translate3d(0,0,0);
  }
}

@media(max-width:720px){
  .jc-top10-strip .jc-finger-down{
    width:25px !important;
    min-width:25px !important;
    height:27px !important;
    margin:0 7px !important;
  }

  @keyframes jc-original-finger-down-real{
    0%{
      transform:translate3d(0,0,0);
    }

    18%{
      transform:translate3d(0,0,0);
    }

    32%{
      transform:translate3d(0,2px,0);
    }

    45%{
      transform:translate3d(0,3px,0);
    }

    58%{
      transform:translate3d(0,5px,0);
    }

    70%{
      transform:translate3d(0,3px,0);
    }

    82%{
      transform:translate3d(0,2px,0);
    }

    100%{
      transform:translate3d(0,0,0);
    }
  }
}


/* =========================================================
   V2.9.9 - TOP10 손가락 액션 더 크게 + 더 바르게
   - 손가락 모양은 그대로 유지
   - 기울거나 흔들리는 느낌 없이 '수직 아래'로만 이동
   - 이동폭을 더 크게 확대
========================================================= */

.jc-top10-strip .jc-finger-down{
  transform:none !important;
  animation:none !important;
}

.jc-top10-strip .jc-finger-down::before{
  display:block;
  transform:translate3d(0,0,0) !important;
  will-change:transform;
  animation:jc-original-finger-down-straight 1.08s cubic-bezier(.33,0,.2,1) infinite !important;
}

/* 좌우는 같은 타이밍, 같은 방향 */
.jc-top10-strip .jc-finger-right::before{
  animation-delay:0s !important;
}

/* 데스크톱: 최대 약 12px까지 수직 하강 후 복귀 */
@keyframes jc-original-finger-down-straight{
  0%{
    transform:translate3d(0,0,0);
  }

  15%{
    transform:translate3d(0,0,0);
  }

  28%{
    transform:translate3d(0,3px,0);
  }

  40%{
    transform:translate3d(0,7px,0);
  }

  52%{
    transform:translate3d(0,12px,0);
  }

  64%{
    transform:translate3d(0,9px,0);
  }

  76%{
    transform:translate3d(0,5px,0);
  }

  88%{
    transform:translate3d(0,2px,0);
  }

  100%{
    transform:translate3d(0,0,0);
  }
}

@media(max-width:720px){
  .jc-top10-strip .jc-finger-down::before{
    animation:jc-original-finger-down-straight-mobile 1.08s cubic-bezier(.33,0,.2,1) infinite !important;
  }

  /* 모바일: 최대 약 9px */
  @keyframes jc-original-finger-down-straight-mobile{
    0%{
      transform:translate3d(0,0,0);
    }

    15%{
      transform:translate3d(0,0,0);
    }

    28%{
      transform:translate3d(0,2px,0);
    }

    40%{
      transform:translate3d(0,5px,0);
    }

    52%{
      transform:translate3d(0,9px,0);
    }

    64%{
      transform:translate3d(0,7px,0);
    }

    76%{
      transform:translate3d(0,4px,0);
    }

    88%{
      transform:translate3d(0,2px,0);
    }

    100%{
      transform:translate3d(0,0,0);
    }
  }
}


/* =========================================================
   V2.10 - TOP10 손가락 액션 충돌 근본 수정

   기존 문제:
   이전 CSS의 transform: ... !important 가 keyframes transform을
   덮어써 실제 손가락이 움직이지 않았음.

   해결:
   transform 애니메이션을 완전히 버리고 실제 이미지(::before)의
   top 값을 0px -> 14px -> 0px 로 직접 움직임.
========================================================= */

.jc-top10-strip .jc-finger-down{
  position:relative !important;
  display:inline-block !important;
  vertical-align:middle !important;

  width:28px !important;
  min-width:28px !important;
  height:34px !important;

  margin:0 10px !important;

  overflow:visible !important;

  /* 바깥 span은 절대 움직이지 않음 */
  transform:none !important;
  animation:none !important;
}

.jc-top10-strip .jc-finger-down::before{
  content:"" !important;

  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:0;

  width:28px !important;
  height:30px !important;

  background-image:url('assets/ui/top10-finger-original.png') !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:contain !important;

  display:block !important;

  /*
   * 기존 transform !important가 남아 있어도 상관없음.
   * 이번 동작은 top 값만 애니메이션함.
   */
  transform:translate3d(0,0,0) !important;
  opacity:1 !important;

  will-change:top;

  animation:
    jc-top10-finger-top-motion
    2.2s
    ease-in-out
    infinite !important;
}

/* 좌우 동일 타이밍 */
.jc-top10-strip .jc-finger-left::before,
.jc-top10-strip .jc-finger-right::before{
  animation-delay:0s !important;
}

/*
 * 더 크게 + 정확히 수직 이동
 * 0px -> 14px -> 0px
 */
@keyframes jc-top10-finger-top-motion{
  0%{
    top:0;
  }

  15%{
    top:0;
  }

  28%{
    top:1px;
  }

  42%{
    top:4px;
  }

  54%{
    top:7px;
  }

  66%{
    top:5px;
  }

  78%{
    top:3px;
  }

  90%{
    top:2px;
  }

  100%{
    top:0;
  }
}

/*
 * 이전 버전의 prefers-reduced-motion 규칙에서
 * animation:none !important 가 걸려 있어도
 * TOP10 손가락만은 원본 UI 표현을 위해 다시 활성화.
 */
@media (prefers-reduced-motion: reduce){
  .jc-top10-strip .jc-finger-down::before{
    animation:
      jc-top10-finger-top-motion
      1.05s
      ease-in-out
      infinite !important;
  }
}

@media(max-width:720px){
  .jc-top10-strip .jc-finger-down{
    width:25px !important;
    min-width:25px !important;
    height:31px !important;
    margin:0 7px !important;
  }

  .jc-top10-strip .jc-finger-down::before{
    width:25px !important;
    height:27px !important;

    animation:
      jc-top10-finger-top-motion-mobile
      2.2s
      ease-in-out
      infinite !important;
  }

  @keyframes jc-top10-finger-top-motion-mobile{
    0%{ top:0; }
    15%{ top:0; }
    28%{ top:1px; }
    42%{ top:3px; }
    54%{ top:5px; }
    66%{ top:4px; }
    78%{ top:2px; }
    90%{ top:1px; }
    100%{ top:0; }
  }

  @media (prefers-reduced-motion: reduce){
    .jc-top10-strip .jc-finger-down::before{
      animation:
        jc-top10-finger-top-motion-mobile
        2.2s
        ease-in-out
        infinite !important;
    }
  }
}


/* =========================================================
   V2.10.5 - TOP10 손가락 이동폭만 조금 더 축소
   - 속도: 2.2초 유지
   - PC 최대 이동: 약 5px
   - 모바일 최대 이동: 약 4px
========================================================= */

@keyframes jc-top10-finger-top-motion{
  0%   { top:0; }
  15%  { top:0; }
  28%  { top:1px; }
  42%  { top:3px; }
  54%  { top:5px; }
  66%  { top:4px; }
  78%  { top:2px; }
  90%  { top:1px; }
  100% { top:0; }
}

@media (prefers-reduced-motion: reduce){
  .jc-top10-strip .jc-finger-down::before{
    animation:
      jc-top10-finger-top-motion
      2.2s
      ease-in-out
      infinite !important;
  }
}

@media(max-width:720px){
  @keyframes jc-top10-finger-top-motion-mobile{
    0%   { top:0; }
    15%  { top:0; }
    28%  { top:1px; }
    42%  { top:2px; }
    54%  { top:4px; }
    66%  { top:3px; }
    78%  { top:2px; }
    90%  { top:1px; }
    100% { top:0; }
  }

  @media (prefers-reduced-motion: reduce){
    .jc-top10-strip .jc-finger-down::before{
      animation:
        jc-top10-finger-top-motion-mobile
        2.2s
        ease-in-out
        infinite !important;
    }
  }
}


/* =========================================================
   V2.11 - 카테고리 페이지 / 콘텐츠 상세 페이지
========================================================= */

/* ---------- category archive ---------- */

.jc-category-page{
  padding:18px 0 70px;
  background:#fff;
}

.jc-category-page .jc-category-banner-grid{
  margin-bottom:22px;
}

.jc-category-titlebar{
  min-height:62px;
  border:1px solid #dedede;
  border-radius:4px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 18px;
  margin:0 0 3px;
  background:#fff;
}

.jc-category-titlebar h1{
  margin:0;
  font-size:21px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.8px;
  color:#111;
}

.jc-category-titlebar h1 a{
  color:inherit;
}

.jc-category-title-icon{
  width:31px;
  height:31px;
  object-fit:contain;
  flex:0 0 31px;
}

.jc-directory-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:3px;
  margin-top:0;
}

.jc-directory-card{
  position:relative;
  min-width:0;
  height:188px;
  border:1px solid #d6d6d6;
  background:#fff;
  overflow:hidden;
}

.jc-directory-card-main{
  display:grid;
  grid-template-rows:139px 49px;
  height:100%;
  color:#111;
}

.jc-directory-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:19px 20px 10px;
  background:#fff;
  overflow:hidden;
}

.jc-directory-logo img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:78px;
  object-fit:contain;
}

.jc-directory-logo-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:54px;
  padding:10px;
  background:#181818;
  color:#fff;
  font-size:17px;
  font-weight:900;
  text-align:center;
  letter-spacing:-.6px;
}

.jc-directory-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 10px;
  background:#e7e7e7;
  font-size:14px;
  font-weight:900;
  letter-spacing:-.4px;
}

.jc-directory-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.jc-directory-color-0{color:#ec5b73;}
.jc-directory-color-1{color:#72b733;}
.jc-directory-color-2{color:#1670bf;}
.jc-directory-color-3{color:#5a3798;}
.jc-directory-color-4{color:#168399;}

.jc-directory-views{
  white-space:nowrap;
  color:#e08a20;
  font-variant-numeric:tabular-nums;
}

.jc-heart{
  color:#ff1534;
  margin-right:3px;
}

.jc-favorite-badge{
  position:absolute;
  z-index:4;
  right:5px;
  top:5px;
  border:0;
  border-radius:3px;
  background:#f7d76d;
  color:#fff;
  height:22px;
  padding:0 8px;
  font-size:11px;
  font-family:inherit;
  font-weight:800;
  cursor:pointer;
  box-shadow:none;
}

.jc-favorite-badge span{
  font-size:13px;
}

.jc-favorite-badge.is-active{
  background:#f1bd39;
}

.jc-directory-card:hover{
  border-color:#bebebe;
}

.jc-directory-card:hover .jc-directory-logo img{
  transform:scale(1.025);
}

.jc-directory-logo img{
  transition:transform .16s ease;
}

.jc-directory-empty{
  min-height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #e2e2e2;
  margin-top:4px;
}


/* ---------- single jc_link ---------- */

.jc-detail-page{
  padding:14px 0 80px;
  background:#fff;
}

.jc-detail-category-titlebar{
  margin-bottom:26px;
}

.jc-detail-hero{
  padding:0 18px 22px;
  border-bottom:1px solid #ececec;
}

.jc-detail-site-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
  font-size:27px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:-1.1px;
  color:#111;
}

.jc-detail-star{
  color:#e6cf75;
  font-size:31px;
  font-weight:500;
}

.jc-detail-info-row{
  display:grid;
  grid-template-columns:200px minmax(0,1fr) 250px;
  gap:30px;
  align-items:center;
}

.jc-detail-thumb{
  width:200px;
  height:105px;
  border:1px solid #d9d9d9;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:#fff;
}

.jc-detail-thumb img{
  display:block;
  max-width:100%;
  max-height:68px;
  width:auto;
  height:auto;
  object-fit:contain;
}

.jc-detail-link-info{
  min-width:0;
}

.jc-detail-url-row{
  display:flex;
  align-items:center;
  gap:4px;
  margin-bottom:12px;
}

.jc-detail-url{
  color:#111;
  font-size:16px;
  font-weight:900;
  word-break:break-all;
}

.jc-detail-url-empty{
  color:#888;
}

.jc-detail-go{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:43px;
  height:21px;
  padding:0 5px;
  border:1px solid #b8b8b8;
  background:#efefef;
  color:#333;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}

.jc-detail-status-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
  font-size:14px;
  font-weight:800;
}

.jc-detail-status{
  display:inline-flex;
  align-items:center;
  color:#1386c2;
}

.jc-status-lines{
  width:14px;
  height:14px;
  margin-right:3px;
  background:
    repeating-linear-gradient(
      45deg,
      #79b7d1 0 1px,
      transparent 1px 3px
    );
}

.jc-detail-updated{
  color:#111;
}

.jc-page-info{
  justify-self:end;
  width:250px;
  min-height:66px;
  padding:12px 13px;
  border:1px solid #dedede;
  background:#f4f4f6;
  font-size:13px;
  font-weight:800;
}

.jc-page-info > strong{
  display:block;
  margin-bottom:3px;
  font-size:14px;
  color:#111;
}

.jc-info-dot{
  color:#e5931a;
  margin-left:2px;
}

.jc-detail-body{
  width:680px;
  max-width:calc(100% - 30px);
  margin:27px auto 0;
  color:#333;
  font-size:15px;
  line-height:1.9;
  font-weight:700;
  letter-spacing:-.35px;
}

.jc-detail-heading{
  margin:0 0 12px;
  color:#e76570;
  font-size:27px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:-1px;
}

.jc-detail-en{
  white-space:nowrap;
}

.jc-detail-lead{
  margin:0 0 30px;
  color:#404040;
  font-size:15px;
  line-height:2;
  font-weight:800;
}

.jc-detail-graybox{
  margin:0 0 35px;
  padding:30px 34px;
  background:#f1f2f3;
  color:#333;
  font-weight:800;
  line-height:2;
}

.jc-detail-graybox p:first-child{
  margin-top:0;
}

.jc-detail-graybox p:last-child{
  margin-bottom:0;
}

.jc-detail-feature-section{
  margin-bottom:34px;
}

.jc-detail-feature-section h3{
  border-left:5px solid #ef7780;
  padding-left:14px;
  margin:0 0 11px;
  font-size:20px;
  line-height:1.5;
  font-weight:900;
  color:#111;
}

.jc-detail-feature-row{
  padding:19px 0;
  border-bottom:1px solid #ececec;
  font-size:14px;
  line-height:2;
}

.jc-detail-feature-row strong{
  color:#333;
}

.jc-detail-tipbox{
  margin:0 0 34px;
  padding:22px 24px;
  background:#fff6dc;
  color:#222;
  line-height:2;
  font-size:14px;
}

.jc-detail-tipbox p{
  margin:0 0 10px;
}

.jc-detail-tipbox p:last-child{
  margin-bottom:0;
}

.jc-detail-outlinebox{
  border:1px solid #dedede;
  padding:22px 20px;
  margin-bottom:33px;
  line-height:2;
  color:#555;
}

.jc-detail-faq{
  margin-top:0;
}

.jc-detail-faq h3{
  margin:0 0 18px;
  text-align:center;
  color:#111;
  font-size:21px;
  font-weight:900;
}

.jc-faq-item{
  margin-bottom:20px;
  color:#333;
}

.jc-faq-item > strong{
  display:block;
  color:#111;
  font-size:13px;
  margin-bottom:5px;
}

.jc-faq-item p{
  margin:0;
  padding-left:20px;
  line-height:2;
}

.jc-detail-category-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0;
  border-top:1px solid #e9e9e9;
  padding-top:24px;
  margin-top:34px;
}

.jc-detail-category-links a{
  color:#4a94c4;
  font-size:12px;
  font-weight:900;
}

.jc-detail-category-links a:not(:last-child)::after{
  content:" | ";
  color:#777;
  margin:0 3px;
}

.jc-detail-keywords{
  margin-top:48px;
  color:#aaa;
  text-align:center;
  font-size:11px;
  line-height:1.7;
  font-weight:700;
}


/* ---------- responsive ---------- */

@media(max-width:1050px){

  .jc-directory-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .jc-detail-info-row{
    grid-template-columns:180px minmax(0,1fr);
  }

  .jc-detail-thumb{
    width:180px;
  }

  .jc-page-info{
    grid-column:1/-1;
    justify-self:stretch;
    width:100%;
  }
}

@media(max-width:720px){

  .jc-category-page,
  .jc-detail-page{
    padding-top:10px;
  }

  .jc-category-guarantee-title{
    font-size:20px;
  }

  .jc-category-banner-grid{
    grid-template-columns:1fr;
  }

  .jc-category-banner-grid .jc-banner:first-child{
    grid-column:auto;
  }

  .jc-category-titlebar{
    min-height:54px;
    padding:0 13px;
  }

  .jc-category-titlebar h1{
    font-size:18px;
  }

  .jc-category-title-icon{
    width:28px;
    height:28px;
    flex-basis:28px;
  }

  .jc-directory-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:3px;
  }

  .jc-directory-card{
    height:165px;
  }

  .jc-directory-card-main{
    grid-template-rows:119px 46px;
  }

  .jc-directory-logo{
    padding:18px 12px 8px;
  }

  .jc-directory-logo img{
    max-height:67px;
  }

  .jc-directory-meta{
    padding:0 7px;
    font-size:12px;
  }

  .jc-directory-views{
    font-size:11px;
  }

  .jc-favorite-badge{
    right:4px;
    top:4px;
    height:20px;
    padding:0 6px;
    font-size:10px;
  }

  .jc-detail-hero{
    padding:0 2px 20px;
  }

  .jc-detail-site-title{
    font-size:23px;
  }

  .jc-detail-info-row{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:13px;
  }

  .jc-detail-thumb{
    width:100%;
    height:115px;
  }

  .jc-detail-link-info{
    padding:0 3px;
  }

  .jc-detail-url-row{
    flex-wrap:wrap;
  }

  .jc-page-info{
    width:100%;
  }

  .jc-detail-body{
    max-width:100%;
    width:100%;
  }

  .jc-detail-heading{
    font-size:23px;
  }

  .jc-detail-graybox{
    padding:23px 20px;
  }

  .jc-detail-feature-section h3{
    font-size:18px;
  }

  .jc-detail-category-links{
    padding-left:7px;
    padding-right:7px;
  }
}

@media(max-width:420px){
  .jc-directory-grid{
    grid-template-columns:1fr;
  }

  .jc-directory-card{
    height:178px;
  }

  .jc-directory-card-main{
    grid-template-rows:130px 48px;
  }
}


/* =========================================================
   V2.11.4 - 메인 카테고리 박스 클릭 연결
========================================================= */

.jc-cat-head,
.jc-category-card-header,
.jc-card-head{
  text-decoration:none !important;
  color:inherit !important;
}

a.jc-cat-head,
a.jc-category-card-header,
a.jc-card-head{
  display:flex;
  width:100%;
  cursor:pointer;
}

.jc-category-card[data-jc-cat-url] .jc-category-card-header,
.jc-category-card[data-jc-cat-url] .jc-card-head,
.jc-category-card[data-jc-cat-url] .jc-cat-head,
.jc-category-card[data-jc-cat-url] .jc-card-title{
  cursor:pointer;
}


/* =========================================================
   V2.11.5 - 상세페이지 공통 전면 배너
========================================================= */

.jc-detail-page .jc-category-guarantee-title{
  margin-top:0;
}

.jc-detail-page .jc-category-banner-grid{
  margin-bottom:22px;
}

/* 공통 배너 뒤 상세 카테고리 타이틀 간격 */
.jc-detail-page .jc-category-banner-grid + .jc-detail-category-titlebar{
  margin-top:4px;
}

@media(max-width:720px){
  .jc-detail-page .jc-category-banner-grid{
    margin-bottom:16px;
  }
}


/* =========================================================
   V2.11.6 - 상세페이지 URL 글자 자체에도 앵커 적용
========================================================= */

a.jc-detail-url{
  display:inline-block;
  color:#111 !important;
  text-decoration:none !important;
  cursor:pointer;
}

a.jc-detail-url:visited{
  color:#111 !important;
}

a.jc-detail-url:hover,
a.jc-detail-url:focus{
  color:#111 !important;
  text-decoration:underline !important;
  text-underline-offset:2px;
}


/* =========================================================
   V2.11.7 - 상세페이지 방문자 친화 문구 + 해시태그 키워드
========================================================= */

.jc-detail-keywords{
  margin-top:34px !important;
  padding:22px 0 4px;
  border-top:1px solid #ececec;
  color:#555;
  text-align:left !important;
  font-size:13px !important;
  line-height:1.6;
}

.jc-keyword-label{
  display:block;
  margin-bottom:11px;
  color:#222;
  font-size:14px;
  font-weight:900;
}

.jc-keyword-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.jc-keyword-tag{
  display:inline-flex;
  align-items:center;
  min-height:29px;
  padding:4px 10px;
  border:1px solid #e1e4e8;
  border-radius:16px;
  background:#f7f8f9;
  color:#548eb8;
  font-size:12px;
  font-weight:800;
  line-height:1.2;
}

@media(max-width:720px){
  .jc-detail-keywords{
    margin-top:28px !important;
    padding-top:18px;
  }

  .jc-keyword-tag{
    min-height:27px;
    padding:4px 9px;
    font-size:11px;
  }
}


/* =========================================================
   V2.12.1 - 새 공통 배너 시스템
   4-column grid:
   full = 4칸 / half = 2칸 / quarter = 1칸
========================================================= */

.jc-banner-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:4px !important;
  margin:0 0 16px !important;
}

.jc-banner-grid .jc-banner,
.jc-banner-grid .jc-banner:first-child{
  grid-column:auto;
  height:84px;
  display:block;
  min-width:0;
  overflow:hidden;
  border:1px solid #ddd;
  background:#f5f5f5;
}

.jc-banner-grid .jc-banner-layout-full{
  grid-column:span 4 !important;
}

.jc-banner-grid .jc-banner-layout-half{
  grid-column:span 2 !important;
}

.jc-banner-grid .jc-banner-layout-quarter{
  grid-column:span 1 !important;
}

.jc-banner-grid .jc-banner img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.jc-banner-grid .jc-banner-empty{
  min-height:84px;
}

@media(max-width:720px){

  .jc-banner-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .jc-banner-grid .jc-banner-layout-full,
  .jc-banner-grid .jc-banner-layout-half{
    grid-column:span 2 !important;
  }

  .jc-banner-grid .jc-banner-layout-quarter{
    grid-column:span 1 !important;
  }
}

@media(max-width:430px){

  .jc-banner-grid{
    grid-template-columns:1fr !important;
  }

  .jc-banner-grid .jc-banner-layout-full,
  .jc-banner-grid .jc-banner-layout-half,
  .jc-banner-grid .jc-banner-layout-quarter{
    grid-column:span 1 !important;
  }
}


/* =========================================================
   V2.12.2 - 전면 중앙 3카드 팝업
========================================================= */

.jc-home-popups{
  position:fixed;
  z-index:9998;
  left:50%;
  top:70px;
  transform:translateX(-50%);
  width:min(1240px,calc(100vw - 60px));
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  pointer-events:none;
}

.jc-home-popups.is-hidden{
  display:none;
}

.jc-home-popup{
  position:relative;
  min-width:0;
  height:550px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  pointer-events:auto;
}

.jc-home-popup.is-hidden{
  display:none;
}

.jc-popup-body{
  height:500px;
  position:relative;
  overflow:hidden;
}

.jc-popup-actions{
  height:50px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  background:#21324e;
}

.jc-popup-actions button{
  border:0;
  background:none;
  color:#fff;
  font-family:inherit;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  padding:8px 2px;
}


/* ----- left security ----- */
.jc-home-popup-security .jc-popup-body{
  background:
    radial-gradient(circle at 50% 58%, rgba(58,169,255,.22), transparent 25%),
    linear-gradient(180deg,#090909 0%,#111 100%);
  color:#fff;
  text-align:center;
}

.jc-popup-security-ribbon{
  position:absolute;
  left:-34px;
  top:18px;
  width:130px;
  transform:rotate(-45deg);
  background:#e72d37;
  color:#fff;
  font-size:12px;
  font-weight:900;
  padding:5px 0;
}

.jc-popup-security-title{
  margin-top:55px;
  font-size:34px;
  line-height:1.15;
  font-weight:1000;
  color:#ff6d39;
  text-shadow:0 2px 0 #111;
}

.jc-popup-shield{
  width:165px;
  height:190px;
  margin:34px auto 22px;
  background:linear-gradient(160deg,#14384c,#0a171f);
  clip-path:polygon(50% 0,88% 18%,88% 59%,50% 100%,12% 59%,12% 18%);
  border:5px solid #4d8c7d;
  position:relative;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.55));
}

.jc-popup-eye{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-52%);
  display:flex;
  width:104px;
  height:68px;
  align-items:center;
  justify-content:center;
  border:12px solid #f4eb8d;
  border-radius:70% 20% 70% 20%;
  color:#2ad6f2;
  font-size:48px;
  line-height:1;
}

.jc-popup-security-copy{
  font-size:28px;
  line-height:1.3;
  font-weight:1000;
  letter-spacing:-1px;
}


/* ----- middle search ----- */
.jc-home-popup-search .jc-popup-body{
  background:linear-gradient(145deg,#f8b5c4,#f7d6dd 58%,#f3aabb);
  text-align:center;
}

.jc-popup-brand-small{
  padding-top:34px;
  font-size:13px;
  font-weight:800;
  color:#292929;
}

.jc-popup-brand{
  margin-top:2px;
  color:#ff6c88;
  font-size:46px;
  font-weight:1000;
  letter-spacing:-3px;
  text-shadow:0 2px 0 #fff;
}

.jc-popup-phone{
  width:82%;
  height:340px;
  margin:18px auto 0;
  border-radius:42px 42px 0 0;
  background:#fff;
  box-shadow:inset 0 0 0 6px #e8edf4;
  padding:90px 18px 0;
}

.jc-popup-google{
  font-size:42px;
  font-weight:700;
  letter-spacing:-2px;
  color:#4285f4;
}

.jc-popup-searchbar{
  height:58px;
  margin:28px -34px 0;
  border-radius:30px;
  background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.28);
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 18px;
  color:#222;
  font-size:26px;
}

.jc-popup-g{
  color:#4285f4;
  font-size:25px;
  font-weight:900;
}

.jc-popup-mic{
  margin-left:auto;
  color:#4285f4;
  font-size:16px;
}

.jc-popup-searchcopy{
  margin-top:32px;
  font-size:21px;
  line-height:1.45;
  color:#333;
}

.jc-popup-searchcopy strong{
  color:#f04d72;
}


/* ----- right domain ----- */
.jc-home-popup-domain .jc-popup-body{
  background:linear-gradient(145deg,#f9c1cc,#f8dbe1 56%,#f3b5c4);
  text-align:center;
  padding:45px 18px 0;
}

.jc-popup-domain-small{
  font-size:13px;
  font-weight:800;
  color:#444;
}

.jc-popup-domain-title{
  margin:5px 0 25px;
  font-size:39px;
  font-weight:1000;
  letter-spacing:-2px;
  color:#2d2d2d;
}

.jc-popup-domain-title span{
  color:#ff5f82;
}

.jc-popup-domain-label{
  width:78%;
  margin:14px auto -1px;
  padding:8px 12px;
  border-radius:30px;
  background:#fa6e8e;
  color:#fff;
  font-size:18px;
  font-weight:900;
}

.jc-popup-domain-box{
  width:94%;
  margin:0 auto;
  padding:17px 10px;
  border:4px solid #f77993;
  background:#fff;
  color:#333;
  font-size:31px;
  font-weight:900;
  line-height:1;
  word-break:break-all;
}

.jc-popup-domain-next{
  color:#e7353d;
}


/* responsive */
@media(max-width:1100px){
  .jc-home-popups{
    top:62px;
    width:min(920px,calc(100vw - 30px));
    gap:10px;
  }

  .jc-home-popup{
    height:500px;
  }

  .jc-popup-body{
    height:452px;
  }

  .jc-popup-security-title{
    font-size:27px;
  }

  .jc-popup-security-copy{
    font-size:22px;
  }

  .jc-popup-domain-title{
    font-size:31px;
  }

  .jc-popup-domain-box{
    font-size:24px;
  }

  .jc-popup-brand{
    font-size:38px;
  }
}

@media(max-width:760px){
  .jc-home-popups{
    position:fixed;
    left:10px;
    right:10px;
    top:56px;
    transform:none;
    width:auto;
    display:flex;
    overflow-x:auto;
    gap:10px;
    scroll-snap-type:x mandatory;
    padding-bottom:4px;
  }

  .jc-home-popup{
    flex:0 0 86vw;
    max-width:390px;
    height:500px;
    scroll-snap-align:center;
  }

  .jc-popup-body{
    height:452px;
  }
}


/* =========================================================
   V2.12.3 - 사용자 제공 원본 팝업 이미지 3장 그대로 적용
========================================================= */

.jc-home-popups{
  width:min(1240px,calc(100vw - 60px)) !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px !important;
}

.jc-home-popup-image{
  height:auto !important;
  background:transparent !important;
  border-radius:12px !important;
  overflow:hidden !important;
}

.jc-popup-image-wrap{
  position:relative;
  width:100%;
  aspect-ratio:432 / 500;
  overflow:hidden;
  background:#fff;
}

.jc-popup-original-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.jc-home-popup-image .jc-popup-actions{
  height:50px;
  background:#21324e;
}

/*
 * 오른쪽 원본 이미지에는 jusocon18.com / jusocon19.com 텍스트가
 * 이미지에 박혀 있으므로, 요청한 주소를 같은 위치 위에 덮어씀.
 */
.jc-popup-domain-overlay{
  position:absolute;
  left:4.2%;
  width:91.6%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#2b2b2b;
  font-family:"Noto Sans KR", sans-serif;
  font-size:clamp(22px,2.3vw,33px);
  font-weight:900;
  line-height:1;
  letter-spacing:-1.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  z-index:3;
}

.jc-popup-domain-overlay-current{
  top:59.4%;
  height:13.4%;
}

.jc-popup-domain-overlay-next{
  top:79.8%;
  height:13.4%;
  color:#2b2b2b;
}

.jc-popup-domain-overlay-next::first-letter{
  color:#2b2b2b;
}

@media(max-width:1100px){
  .jc-home-popups{
    width:min(920px,calc(100vw - 30px)) !important;
    gap:10px !important;
  }

  .jc-popup-domain-overlay{
    font-size:clamp(18px,2.6vw,27px);
  }
}

@media(max-width:760px){
  .jc-home-popups{
    display:flex !important;
    width:auto !important;
  }

  .jc-home-popup-image{
    flex:0 0 86vw !important;
    max-width:390px !important;
  }

  .jc-popup-image-wrap{
    aspect-ratio:432 / 500;
  }

  .jc-popup-domain-overlay{
    font-size:clamp(22px,7vw,30px);
  }
}


/* =========================================================
   V2.12.4 - 팝업 원본 이미지 전체 노출 + 화면 정중앙
   - 원본 이미지 400x500 비율 그대로
   - object-fit: contain
   - 팝업 전체 묶음을 가로/세로 정중앙 배치
========================================================= */

.jc-home-popups{
  position:fixed !important;

  left:50% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;

  transform:translate(-50%,-50%) !important;

  width:min(1236px,calc(100vw - 40px)) !important;
  max-height:calc(100vh - 30px);

  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,400px)) !important;
  justify-content:center !important;
  align-items:center !important;

  gap:18px !important;
  padding:0 !important;

  overflow:visible !important;
}


/* 원본 400x500 이미지 + 하단 50px 버튼 */
.jc-home-popup-image{
  width:100% !important;
  max-width:400px !important;

  height:auto !important;
  min-height:0 !important;

  border-radius:12px !important;
  overflow:hidden !important;

  background:#fff !important;
}


.jc-popup-image-wrap{
  position:relative !important;

  width:100% !important;
  height:auto !important;

  aspect-ratio:400 / 500 !important;

  overflow:hidden !important;
  background:transparent !important;
}


/* 원본을 자르지 않음 */
.jc-popup-original-image{
  display:block !important;

  width:100% !important;
  height:100% !important;

  object-fit:contain !important;
  object-position:center center !important;

  margin:0 !important;
  padding:0 !important;
}


/* 하단 버튼 영역 */
.jc-home-popup-image .jc-popup-actions{
  width:100% !important;
  height:50px !important;

  margin:0 !important;
  flex:0 0 50px;

  background:#21324e !important;
}


/*
 * 오른쪽 주소 텍스트:
 * 원본 흰 박스 안쪽만 덮어서
 * 핑크 라벨은 가리지 않도록 높이를 줄임.
 */
.jc-popup-domain-overlay{
  left:6.3% !important;
  width:87.4% !important;

  height:10.8% !important;

  background:#fff !important;

  font-size:clamp(20px,2.2vw,31px) !important;
  letter-spacing:-1px !important;
}


.jc-popup-domain-overlay-current{
  top:61.2% !important;
}


.jc-popup-domain-overlay-next{
  top:81.6% !important;
}


/* 화면 높이가 작은 경우 3개 모두 들어가도록 비율 축소 */
@media(max-height:650px) and (min-width:761px){

  .jc-home-popups{
    width:min(1080px,calc(100vw - 30px)) !important;
    grid-template-columns:repeat(3,minmax(0,340px)) !important;
    gap:12px !important;
  }

  .jc-home-popup-image{
    max-width:340px !important;
  }

  .jc-home-popup-image .jc-popup-actions{
    height:44px !important;
  }
}


/* 태블릿 */
@media(max-width:1000px) and (min-width:761px){

  .jc-home-popups{
    width:min(900px,calc(100vw - 24px)) !important;
    grid-template-columns:repeat(3,minmax(0,286px)) !important;
    gap:10px !important;
  }

  .jc-home-popup-image{
    max-width:286px !important;
  }

  .jc-popup-domain-overlay{
    font-size:clamp(17px,2.6vw,23px) !important;
  }
}


/* 모바일: 화면 중앙 + 가로 슬라이드 */
@media(max-width:760px){

  .jc-home-popups{
    position:fixed !important;

    left:50% !important;
    top:50% !important;
    right:auto !important;

    transform:translate(-50%,-50%) !important;

    width:calc(100vw - 20px) !important;
    max-height:calc(100vh - 20px) !important;

    display:flex !important;
    justify-content:flex-start !important;
    align-items:center !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    gap:10px !important;
    padding:0 5px 4px !important;

    scroll-snap-type:x mandatory;
  }

  .jc-home-popup-image{
    flex:0 0 min(400px,86vw) !important;
    max-width:min(400px,86vw) !important;

    scroll-snap-align:center;
  }

  .jc-popup-image-wrap{
    aspect-ratio:400 / 500 !important;
  }

  .jc-popup-original-image{
    object-fit:contain !important;
  }

  .jc-popup-domain-overlay{
    font-size:clamp(20px,7vw,29px) !important;
  }
}


/* =========================================================
   V2.12.6 - 팝업을 카테고리 바 바로 아래에 정렬
   - 가로 중앙 유지
   - 세로 중앙 배치 제거
   - JS가 실제 .jc-nav 하단 좌표를 계산해 --jc-popup-top 지정
========================================================= */

.jc-home-popups{
  left:50% !important;
  right:auto !important;
  top:var(--jc-popup-top, 214px) !important;
  bottom:auto !important;

  transform:translateX(-50%) !important;

  justify-content:center !important;
  align-items:start !important;
}

/* 화면 높이가 작아도 카테고리 아래 기준을 우선 */
@media(max-height:650px) and (min-width:761px){
  .jc-home-popups{
    top:var(--jc-popup-top, 214px) !important;
    transform:translateX(-50%) !important;
  }
}

/* 태블릿도 동일 */
@media(max-width:1000px) and (min-width:761px){
  .jc-home-popups{
    top:var(--jc-popup-top, 214px) !important;
    transform:translateX(-50%) !important;
  }
}

/* 모바일도 카테고리 바 아래를 기준으로 배치 */
@media(max-width:760px){
  .jc-home-popups{
    left:50% !important;
    right:auto !important;
    top:var(--jc-popup-top, 170px) !important;
    bottom:auto !important;
    transform:translateX(-50%) !important;
  }
}


/* =========================================================
   V2.12.9 - 모바일 레이아웃 재구축
   기준: 사용자가 제공한 jusocon18.com 모바일 캡처
   V2.12.6에서 다시 시작하여 이전 모바일 덧씌움 충돌 제거
========================================================= */

.jc-mobile-head-controls,
.jc-nav-banner-inquiry{
  display:none;
}


/* =========================================================
   MOBILE
========================================================= */
@media (max-width:760px){

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body{
    font-family:"Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo",sans-serif;
    font-size:14px;
    font-weight:700;
    line-height:1.35;
    -webkit-text-size-adjust:100%;
  }

  .jc-wrap{
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }


  /* -------------------------------------------------------
     상단 PC 퀵바 숨김
  ------------------------------------------------------- */
  .jc-quickbar{
    display:none !important;
  }


  /* -------------------------------------------------------
     헤더 : 원본 모바일 약 165~170 CSS px
  ------------------------------------------------------- */
  .jc-masthead{
    position:relative !important;
    width:100% !important;
    height:168px !important;
    min-height:168px !important;
    background:#fff !important;
    border:0 !important;
  }

  .jc-masthead-inner{
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:168px !important;
    min-height:168px !important;
    padding:0 12px !important;
  }


  /* 날짜 + 시간 */
  .jc-date{
    position:absolute !important;
    left:12px !important;
    top:14px !important;

    display:flex !important;
    align-items:center !important;
    gap:6px !important;

    width:auto !important;
    height:24px !important;

    margin:0 !important;
    padding:0 !important;

    text-align:left !important;
    white-space:nowrap !important;
    z-index:3 !important;
  }

  .jc-date-day,
  .jc-date-time{
    display:inline-block !important;
    margin:0 !important;

    font-size:15px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:-.65px !important;
  }

  .jc-date-day{
    color:#ef91a7 !important;
  }

  .jc-date-time{
    color:#397d5d !important;
  }


  /* 인기검색어: 날짜 우측 */
  .jc-trend{
    position:absolute !important;
    right:12px !important;
    top:12px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    width:116px !important;
    height:28px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    font-size:14px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:-.5px !important;

    background:#fff !important;
    z-index:4 !important;
  }

  .jc-trend-window{
    width:116px !important;
    min-width:116px !important;
    height:28px !important;
    overflow:hidden !important;
  }

  .jc-trend-stack{
    height:28px !important;
  }

  .jc-trend-line{
    height:28px !important;
    gap:4px !important;
  }

  .jc-trend-pause{
    display:none !important;
  }


  /* 로고 */
  .jc-brand{
    position:absolute !important;
    left:50% !important;
    top:44px !important;

    width:150px !important;
    height:62px !important;

    transform:translateX(-50%) !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;
    padding:0 !important;

    z-index:2 !important;
  }

  .jc-brand img{
    display:block !important;
    width:145px !important;
    max-width:145px !important;
    max-height:62px !important;
    height:auto !important;
    object-fit:contain !important;
  }


  /* 햄버거 / 찜 별 */
  .jc-mobile-head-controls{
    position:absolute !important;
    left:15px !important;
    right:15px !important;
    top:56px !important;

    height:52px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    z-index:5 !important;
    pointer-events:none !important;
  }

  .jc-mobile-hamburger,
  .jc-mobile-favorite{
    pointer-events:auto !important;
  }

  .jc-mobile-hamburger{
    width:38px !important;
    height:34px !important;
    padding:0 !important;
    margin:0 !important;

    border:0 !important;
    background:transparent !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;

    cursor:pointer !important;
  }

  .jc-mobile-hamburger span{
    display:block !important;
    width:34px !important;
    height:5px !important;
    border-radius:1px !important;
    background:#111 !important;
  }

  .jc-mobile-favorite{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:40px !important;
    height:40px !important;

    color:#ffc72e !important;
    font-size:37px !important;
    line-height:1 !important;

    text-decoration:none !important;
    text-shadow:0 1px 0 #d9aa18 !important;
  }


  /* 검색 */
  .jc-search{
    position:absolute !important;
    left:12px !important;
    right:12px !important;
    bottom:11px !important;

    width:auto !important;
    height:44px !important;

    display:flex !important;
    align-items:center !important;
    gap:8px !important;

    margin:0 !important;
    padding:0 !important;

    transform:none !important;
    z-index:6 !important;
  }

  .jc-search:hover{
    transform:none !important;
  }

  .jc-engine{
    position:relative !important;

    width:90px !important;
    min-width:90px !important;
    flex:0 0 90px !important;

    height:44px !important;
  }

  .jc-engine-toggle{
    width:90px !important;
    height:44px !important;

    border:0 !important;
    border-radius:9px !important;

    padding:0 12px !important;
    background:#f4f4f4 !important;

    font-size:15px !important;
    font-weight:900 !important;
  }

  .jc-engine-caret{
    font-size:10px !important;
    color:#aaa !important;
  }

  .jc-engine-menu{
    top:48px !important;
    width:90px !important;
    z-index:9999 !important;
  }

  .jc-engine-item{
    height:32px !important;
    padding:0 10px !important;
    font-size:12px !important;
  }

  .jc-search-field{
    position:relative !important;

    flex:1 1 auto !important;
    width:auto !important;
    height:44px !important;
  }

  .jc-search-field input{
    width:100% !important;
    height:44px !important;

    border:0 !important;
    border-radius:9px !important;

    background:#f4f4f4 !important;

    padding:0 45px 0 14px !important;

    color:#333 !important;
    font-size:14px !important;
    font-weight:800 !important;
  }

  .jc-search-field input::placeholder{
    color:#aaa !important;
    font-size:14px !important;
    font-weight:800 !important;
  }

  .jc-search-field button{
    right:0 !important;
    top:0 !important;

    width:44px !important;
    height:44px !important;
  }

  .jc-search-field svg{
    width:20px !important;
    height:20px !important;
  }


  /* -------------------------------------------------------
     카테고리 메뉴 : 4열 x 3행, 행 높이 50px
  ------------------------------------------------------- */
  .jc-nav{
    width:100% !important;
    height:150px !important;
    min-height:150px !important;

    margin:0 !important;
    padding:0 !important;

    background:#ff91a6 !important;
    overflow:hidden !important;
  }

  .jc-nav .jc-wrap{
    width:100% !important;
    max-width:100% !important;
    height:150px !important;

    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:repeat(3,50px) !important;

    align-items:stretch !important;
    justify-content:stretch !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;
  }

  .jc-nav-item{
    width:100% !important;
    min-width:0 !important;
    height:50px !important;

    margin:0 !important;
    padding:0 3px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;

    border-right:1px solid rgba(255,255,255,.30) !important;
    border-bottom:1px solid rgba(255,255,255,.30) !important;

    background:transparent !important;

    color:#fff !important;
    font-size:14px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:-.65px !important;
    text-align:center !important;
    white-space:nowrap !important;

    overflow:hidden !important;
  }

  .jc-nav-item:hover{
    background:transparent !important;
  }

  .jc-nav-icon-img{
    display:block !important;

    width:23px !important;
    min-width:23px !important;
    max-width:23px !important;
    height:23px !important;

    object-fit:contain !important;
    flex:0 0 23px !important;
  }

  .jc-nav-banner-inquiry{
    display:flex !important;
  }

  .jc-nav-banner-user{
    width:24px !important;
    height:24px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:50% !important;

    background:#fff !important;
    color:#ff91a6 !important;

    font-size:12px !important;
    line-height:1 !important;
  }


  /* -------------------------------------------------------
     메인
  ------------------------------------------------------- */
  .jc-main{
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
  }

  .jc-main > .jc-wrap{
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
  }


  /* 공식보증업체 */
  .jc-guarantee-title,
  .jc-category-guarantee-title{
    width:100% !important;
    height:60px !important;
    min-height:60px !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;

    border:0 !important;

    color:#111 !important;
    background:#fff !important;

    font-size:20px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:-.8px !important;
  }

  .jc-guarantee-brand{
    margin-right:4px !important;
  }

  .jc-guarantee-title .jc-medal-img,
  .jc-category-guarantee-title .jc-medal-img{
    width:30px !important;
    height:30px !important;

    margin:0 4px !important;
    object-fit:contain !important;
  }


  /* -------------------------------------------------------
     배너
     - fixed height 완전 제거
     - full/half => 모바일 전체폭
     - quarter => 모바일 2열
     - 이미지 자연비율 그대로
  ------------------------------------------------------- */
  .jc-banner-grid,
  .jc-category-banner-grid{
    position:static !important;

    width:100% !important;

    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    grid-auto-rows:auto !important;

    align-items:start !important;

    gap:3px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
  }

  .jc-banner-grid .jc-banner,
  .jc-banner-grid .jc-banner:first-child,
  .jc-category-banner-grid .jc-banner,
  .jc-category-banner-grid .jc-banner:first-child{
    position:static !important;

    display:block !important;

    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;

    overflow:hidden !important;

    background:#fff !important;

    transform:none !important;
    inset:auto !important;
  }

  .jc-banner-grid .jc-banner-layout-full,
  .jc-banner-grid .jc-banner-layout-half,
  .jc-category-banner-grid .jc-banner-layout-full,
  .jc-category-banner-grid .jc-banner-layout-half{
    grid-column:span 2 !important;
  }

  .jc-banner-grid .jc-banner-layout-quarter,
  .jc-category-banner-grid .jc-banner-layout-quarter{
    grid-column:span 1 !important;
  }

  .jc-banner-grid .jc-banner img,
  .jc-category-banner-grid .jc-banner img{
    position:static !important;

    display:block !important;

    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:contain !important;
    object-position:center center !important;

    transform:none !important;
  }

  .jc-banner-grid .jc-banner-empty,
  .jc-category-banner-grid .jc-banner-empty{
    min-height:50px !important;
    height:auto !important;
  }


  /* -------------------------------------------------------
     TOP10
  ------------------------------------------------------- */
  .jc-top10-strip{
    width:calc(100% - 2px) !important;
    height:49px !important;

    margin:24px 1px 12px !important;
    padding:0 6px !important;

    border:1px solid #dfdfdf !important;
    border-radius:12px !important;

    font-size:16px !important;
    line-height:1 !important;
    letter-spacing:-.7px !important;
  }

  .jc-top10-rainbow{
    font-size:16px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  .jc-top10-strip .jc-finger-down{
    width:24px !important;
    min-width:24px !important;
    height:26px !important;
    margin:0 5px !important;
  }


  /* -------------------------------------------------------
     주소안내 + 소셜
  ------------------------------------------------------- */
  .jc-social-strip{
    width:calc(100% - 2px) !important;
    min-height:90px !important;

    margin:0 1px 12px !important;
    padding:10px 10px 9px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    border:1px solid #dfdfdf !important;
    border-radius:12px !important;

    overflow:hidden !important;
    background:#fff !important;
  }

  .jc-address{
    width:100% !important;
    height:32px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:0 !important;
    margin:0 0 7px !important;

    font-size:16px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:-.65px !important;

    white-space:nowrap !important;
  }

  .jc-socials{
    width:100% !important;
    height:34px !important;

    margin:0 !important;
    padding:0 3px !important;

    display:grid !important;
    grid-template-columns:repeat(8,minmax(0,1fr)) !important;
    align-items:center !important;
    justify-items:center !important;

    gap:5px !important;
  }

  .jc-social{
    width:100% !important;
    height:34px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:0 !important;

    font-size:0 !important;
    overflow:hidden !important;
  }

  .jc-social-logo{
    width:31px !important;
    height:31px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:5px !important;

    overflow:hidden !important;
  }

  .jc-social-logo img{
    display:block !important;
    width:31px !important;
    height:31px !important;
    object-fit:contain !important;
  }


  /* -------------------------------------------------------
     카테고리 카드 : 모바일 2열
  ------------------------------------------------------- */
  .jc-category-grid{
    width:100% !important;

    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;

    gap:6px !important;

    align-items:start !important;

    padding:0 2px 18px !important;
    margin:0 !important;
  }

  .jc-card{
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;

    border:1px solid #e2e2e2 !important;
    border-radius:12px !important;

    overflow:hidden !important;
    background:#fff !important;
  }

  .jc-card-head{
    width:100% !important;
    height:62px !important;

    display:flex !important;
    align-items:center !important;

    gap:6px !important;

    padding:0 10px !important;

    border-bottom:1px solid #ededed !important;
  }

  .jc-card-head > img{
    width:26px !important;
    height:26px !important;
    flex:0 0 26px !important;
    object-fit:contain !important;
  }

  .jc-card-head a{
    min-width:0 !important;

    font-size:17px !important;
    line-height:1.1 !important;
    font-weight:900 !important;
    letter-spacing:-.75px !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .jc-hand{
    width:39px !important;
    height:39px !important;
    flex:0 0 39px !important;

    margin-left:auto !important;

    background-size:contain !important;
  }

  .jc-list{
    width:100% !important;
    min-height:0 !important;

    margin:0 !important;
    padding:9px 9px 12px !important;
  }

  .jc-row{
    width:100% !important;
    height:49px !important;
    min-height:49px !important;

    display:flex !important;
    align-items:center !important;

    gap:6px !important;

    transform:none !important;
  }

  .jc-row:hover{
    transform:none !important;
  }

  .jc-rank-img{
    width:29px !important;
    height:29px !important;
    flex:0 0 29px !important;

    object-fit:contain !important;
  }

  .jc-site-icon{
    width:25px !important;
    height:25px !important;
    flex:0 0 25px !important;

    border-radius:5px !important;
  }

  .jc-site-name{
    min-width:0 !important;

    font-size:15px !important;
    line-height:1.15 !important;
    font-weight:900 !important;
    letter-spacing:-.6px !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }


  /* -------------------------------------------------------
     우측 스크롤 버튼
  ------------------------------------------------------- */
  .jc-scrolls{
    right:12px !important;
    bottom:58px !important;
    gap:7px !important;
  }

  .jc-scroll{
    width:48px !important;
    height:48px !important;

    border-radius:50% !important;

    background:#9b9b9b !important;

    color:#fff !important;
    font-size:27px !important;
  }


  /* -------------------------------------------------------
     팝업 : 모바일에서도 카테고리 아래
     기존 기능 유지, 1장씩 가로 슬라이드
  ------------------------------------------------------- */
  .jc-home-popups{
    left:50% !important;
    right:auto !important;

    top:var(--jc-popup-top, 330px) !important;

    width:calc(100vw - 16px) !important;
    max-height:calc(100vh - 20px) !important;

    transform:translateX(-50%) !important;

    display:flex !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;

    gap:8px !important;

    padding:0 3px 4px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    scroll-snap-type:x mandatory !important;
  }

  .jc-home-popup-image{
    flex:0 0 min(400px,86vw) !important;
    max-width:min(400px,86vw) !important;

    scroll-snap-align:center !important;
  }

}


/* =========================================================
   아주 좁은 모바일
========================================================= */
@media (max-width:390px){

  .jc-date-day,
  .jc-date-time{
    font-size:13px !important;
  }

  .jc-trend{
    width:105px !important;
    font-size:12px !important;
  }

  .jc-trend-window{
    width:105px !important;
    min-width:105px !important;
  }

  .jc-brand{
    width:140px !important;
  }

  .jc-brand img{
    width:138px !important;
    max-width:138px !important;
  }

  .jc-nav-item{
    font-size:12.5px !important;
    gap:3px !important;
  }

  .jc-nav-icon-img{
    width:21px !important;
    min-width:21px !important;
    height:21px !important;
    flex-basis:21px !important;
  }

  .jc-guarantee-title,
  .jc-category-guarantee-title{
    font-size:18px !important;
  }

  .jc-card-head{
    padding:0 8px !important;
  }

  .jc-card-head a{
    font-size:15.5px !important;
  }

  .jc-hand{
    width:34px !important;
    height:34px !important;
    flex-basis:34px !important;
  }

  .jc-list{
    padding-left:7px !important;
    padding-right:7px !important;
  }

  .jc-row{
    gap:4px !important;
  }

  .jc-rank-img{
    width:27px !important;
    height:27px !important;
    flex-basis:27px !important;
  }

  .jc-site-icon{
    width:23px !important;
    height:23px !important;
    flex-basis:23px !important;
  }

  .jc-site-name{
    font-size:13.5px !important;
  }

}



/* =========================================================
   V2.13.0 - 모바일 정렬 미세조정
   1) 햄버거/즐겨찾기 크기 축소
   2) 햄버거/즐겨찾기와 로고 수평 정렬
   3) 모바일 전면 팝업을 좌우 스와이프가 아니라
      전면 고정 + 1열 세로 스택으로 변경
========================================================= */

@media (max-width:760px){

  /* 로고 중심선 기준으로 좌우 아이콘 정렬 */
  .jc-brand{
    top:46px !important;
    width:148px !important;
    height:58px !important;
  }

  .jc-brand img{
    width:144px !important;
    max-width:144px !important;
    max-height:58px !important;
  }

  .jc-mobile-head-controls{
    left:18px !important;
    right:18px !important;
    top:59px !important;
    height:30px !important;
    align-items:center !important;
  }

  /* 햄버거를 로고보다 작게 */
  .jc-mobile-hamburger{
    width:30px !important;
    height:24px !important;
    justify-content:space-between !important;
  }

  .jc-mobile-hamburger span{
    width:30px !important;
    height:4px !important;
    border-radius:1px !important;
  }

  /* 즐겨찾기 아이콘도 축소 */
  .jc-mobile-favorite{
    width:34px !important;
    height:34px !important;
    font-size:30px !important;
    line-height:1 !important;
    text-shadow:0 1px 0 #d9aa18 !important;
  }

  /* 전면 팝업: 한열 세로 고정, 좌우 슬라이드 제거 */
  .jc-home-popups{
    position:fixed !important;
    left:50% !important;
    right:auto !important;
    top:84px !important;
    bottom:auto !important;

    width:min(330px, calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
    max-height:calc(100vh - 110px) !important;

    transform:translateX(-50%) !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;

    padding:0 !important;
    margin:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    scroll-snap-type:none !important;
    z-index:99999 !important;
  }

  .jc-home-popups::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
  }

  .jc-home-popup-image{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 auto !important;
    scroll-snap-align:none !important;
  }

}

@media (max-width:390px){

  .jc-brand{
    width:140px !important;
    height:56px !important;
  }

  .jc-brand img{
    width:136px !important;
    max-width:136px !important;
    max-height:56px !important;
  }

  .jc-mobile-head-controls{
    left:16px !important;
    right:16px !important;
    top:60px !important;
    height:28px !important;
  }

  .jc-mobile-hamburger{
    width:28px !important;
    height:22px !important;
  }

  .jc-mobile-hamburger span{
    width:28px !important;
    height:4px !important;
  }

  .jc-mobile-favorite{
    width:32px !important;
    height:32px !important;
    font-size:28px !important;
  }

  .jc-home-popups{
    width:min(318px, calc(100vw - 20px)) !important;
    max-width:calc(100vw - 20px) !important;
    top:82px !important;
  }

}


/* =========================================================
   V2.13.1
   1) 모바일 카테고리 3번째 줄 잘림 수정
   2) 모바일 팝업 3장 포개기 + 닫을 때 다음장 표시
========================================================= */

@media (max-width:760px){

  /* -------------------------------------------------------
     카테고리 3행 전체가 잘리지 않도록 높이/box sizing 수정
  ------------------------------------------------------- */
  .jc-nav{
    height:auto !important;
    min-height:156px !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .jc-nav .jc-wrap{
    height:auto !important;
    min-height:156px !important;
    max-height:none !important;

    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:repeat(3,52px) !important;
    grid-auto-rows:52px !important;

    overflow:visible !important;
  }

  .jc-nav-item,
  .jc-nav-banner-inquiry{
    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;

    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  /* 다음 섹션이 3번째 줄 위를 덮지 않게 */
  .jc-main{
    clear:both !important;
    position:relative !important;
    z-index:1 !important;
  }


  /* -------------------------------------------------------
     모바일 팝업
     - 같은 자리에 3장 포개짐
     - 현재 카드 1장만 표시
     - 닫으면 JS가 다음 카드에 is-current 부여
  ------------------------------------------------------- */
  .jc-home-popups.jc-mobile-popup-stack{
    position:fixed !important;

    left:50% !important;
    top:84px !important;
    right:auto !important;
    bottom:auto !important;

    width:min(330px,calc(100vw - 24px)) !important;
    height:auto !important;
    max-height:calc(100vh - 105px) !important;

    transform:translateX(-50%) !important;

    display:block !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;

    z-index:99999 !important;
  }

  .jc-home-popups.jc-mobile-popup-stack .jc-home-popup{
    display:none !important;

    position:relative !important;

    width:100% !important;
    max-width:100% !important;
    height:auto !important;

    margin:0 !important;

    flex:none !important;

    transform:none !important;
  }

  .jc-home-popups.jc-mobile-popup-stack .jc-home-popup.is-current{
    display:block !important;
  }

  .jc-home-popups.jc-mobile-popup-stack .jc-home-popup.is-hidden{
    display:none !important;
  }

  .jc-home-popups.jc-mobile-popup-stack .jc-popup-image-wrap{
    width:100% !important;
    height:auto !important;
    aspect-ratio:400 / 500 !important;
  }

  .jc-home-popups.jc-mobile-popup-stack .jc-popup-original-image{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
  }

  .jc-home-popups.jc-mobile-popup-stack .jc-popup-actions{
    height:46px !important;
  }

}

@media (max-width:390px){

  .jc-nav{
    min-height:156px !important;
  }

  .jc-nav .jc-wrap{
    min-height:156px !important;
    grid-template-rows:repeat(3,52px) !important;
  }

  .jc-nav-item,
  .jc-nav-banner-inquiry{
    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;
  }

  .jc-home-popups.jc-mobile-popup-stack{
    width:min(318px,calc(100vw - 20px)) !important;
    top:82px !important;
  }

}


/* =========================================================
   V2.13.2
   - 모바일 팝업 완전 정중앙
   - 첫 번째 배너 모바일 크기 별도 보정
   - 모바일 9/10번 등 깨진 파비콘 이미지 안전 처리
========================================================= */

@media (max-width:760px){

  /* -------------------------------------------------------
     팝업: 상하 / 좌우 화면 정중앙
  ------------------------------------------------------- */
  .jc-home-popups.jc-mobile-popup-stack{
    left:50% !important;
    top:50% !important;
    right:auto !important;
    bottom:auto !important;

    transform:translate(-50%,-50%) !important;

    width:min(330px,calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
    max-height:calc(100vh - 24px) !important;

    overflow:visible !important;
  }

  .jc-home-popups.jc-mobile-popup-stack .jc-home-popup.is-current{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
  }


  /* -------------------------------------------------------
     첫 번째 배너만 모바일 원본 비율/높이 보정
     첫 배너는 전체폭 유지하되 너무 납작하거나 크게 보이지 않게
  ------------------------------------------------------- */
  .jc-banner-grid > .jc-banner:first-child,
  .jc-category-banner-grid > .jc-banner:first-child{
    grid-column:1 / -1 !important;

    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    aspect-ratio:auto !important;

    overflow:hidden !important;
  }

  .jc-banner-grid > .jc-banner:first-child img,
  .jc-category-banner-grid > .jc-banner:first-child img{
    display:block !important;

    width:100% !important;
    height:auto !important;

    max-height:none !important;

    object-fit:contain !important;
    object-position:center center !important;
  }


  /* -------------------------------------------------------
     모바일 사이트 파비콘/로고
     깨진 이미지 아이콘 자체를 숨기고 깔끔한 빈 카드로 대체
  ------------------------------------------------------- */
  .jc-site-icon{
    position:relative !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:25px !important;
    height:25px !important;

    border:1px solid #e5e5e5 !important;
    border-radius:5px !important;

    background:#fff !important;

    overflow:hidden !important;
  }

  .jc-site-icon img,
  img.jc-site-icon{
    display:block !important;

    width:100% !important;
    height:100% !important;

    object-fit:contain !important;
    object-position:center center !important;
  }

  .jc-site-icon img.is-broken,
  img.jc-site-icon.is-broken{
    display:none !important;
  }

  .jc-site-icon.jc-site-icon-broken::after,
  .jc-site-icon-broken::after{
    content:"";
    display:block;

    width:11px;
    height:11px;

    border-radius:3px;

    background:#f0f0f0;
    box-shadow:
      inset 0 0 0 1px #ddd;
  }

}


/* 아주 작은 화면 */
@media (max-width:390px){

  .jc-home-popups.jc-mobile-popup-stack{
    width:min(318px,calc(100vw - 20px)) !important;
    max-width:calc(100vw - 20px) !important;
  }

  .jc-site-icon{
    width:23px !important;
    height:23px !important;
  }

}


/* =========================================================
   V2.13.3
   - PC 팝업 닫기 동작 수정
   - 모바일 카테고리 분홍 영역 높이 축소
   - 아이콘/텍스트 좌우·상하 중앙 정렬
========================================================= */

@media (max-width:760px){

  /* 3행 x 46px = 138px */
  .jc-nav{
    height:138px !important;
    min-height:138px !important;
    max-height:138px !important;

    overflow:hidden !important;
  }

  .jc-nav .jc-wrap{
    height:138px !important;
    min-height:138px !important;
    max-height:138px !important;

    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:repeat(3,46px) !important;
    grid-auto-rows:46px !important;

    align-items:stretch !important;
    justify-items:stretch !important;

    padding:0 !important;
    margin:0 !important;

    overflow:hidden !important;
  }

  .jc-nav-item,
  .jc-nav-banner-inquiry{
    width:100% !important;
    min-width:0 !important;

    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;

    box-sizing:border-box !important;

    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;

    gap:4px !important;

    padding:0 3px !important;
    margin:0 !important;

    text-align:center !important;
    vertical-align:middle !important;

    line-height:1 !important;
    white-space:nowrap !important;

    overflow:hidden !important;
  }

  .jc-nav-item > span:not(.jc-nav-banner-user),
  .jc-nav-banner-inquiry > span:last-child{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    height:100% !important;

    margin:0 !important;
    padding:0 !important;

    line-height:1 !important;
    text-align:center !important;
  }

  .jc-nav-icon-img{
    display:block !important;

    width:22px !important;
    min-width:22px !important;
    max-width:22px !important;

    height:22px !important;

    flex:0 0 22px !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:contain !important;
    object-position:center center !important;
  }

  .jc-nav-banner-user{
    width:22px !important;
    min-width:22px !important;
    height:22px !important;

    flex:0 0 22px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;
    padding:0 !important;
  }

}

@media (max-width:390px){

  .jc-nav{
    height:132px !important;
    min-height:132px !important;
    max-height:132px !important;
  }

  .jc-nav .jc-wrap{
    height:132px !important;
    min-height:132px !important;
    max-height:132px !important;

    grid-template-rows:repeat(3,44px) !important;
    grid-auto-rows:44px !important;
  }

  .jc-nav-item,
  .jc-nav-banner-inquiry{
    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;

    font-size:12.5px !important;
  }

  .jc-nav-icon-img{
    width:21px !important;
    min-width:21px !important;
    max-width:21px !important;

    height:21px !important;

    flex-basis:21px !important;
  }

}


/* =========================================================
   V2.13.4 - 모바일 분홍 카테고리 완전 재정렬
   - 12칸 전부 동일한 구조
   - 4열 x 3행
   - 모든 행/열 높이 동일
   - 아이콘+텍스트 묶음 상하좌우 완전 중앙
   - 하단 잘림 방지
========================================================= */

.jc-nav-cell{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
}

.jc-nav-label{
  display:inline-block;
}

@media(max-width:760px){

  /* 부모 nav 높이를 3행 전체 높이보다 2px 여유 있게 */
  .jc-nav{
    position:relative !important;

    width:100% !important;

    height:128px !important;
    min-height:128px !important;
    max-height:128px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;

    background:#ff91a6 !important;

    box-sizing:border-box !important;
  }

  /* 4 x 3 완전 고정 */
  .jc-nav > .jc-wrap{
    position:relative !important;

    width:100% !important;
    max-width:100% !important;

    height:126px !important;
    min-height:126px !important;
    max-height:126px !important;

    display:grid !important;

    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows:repeat(3, 42px) !important;
    grid-auto-flow:row !important;
    grid-auto-rows:42px !important;

    gap:0 !important;

    align-items:stretch !important;
    justify-items:stretch !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;

    box-sizing:border-box !important;
  }

  /* 모든 12칸을 완전히 동일하게 리셋 */
  .jc-nav > .jc-wrap > .jc-nav-item{
    position:static !important;

    grid-column:auto !important;
    grid-row:auto !important;

    width:100% !important;
    min-width:0 !important;
    max-width:none !important;

    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;

    display:grid !important;
    place-items:center !important;

    align-self:stretch !important;
    justify-self:stretch !important;

    margin:0 !important;
    padding:0 !important;

    border-right:1px solid rgba(255,255,255,.28) !important;
    border-bottom:1px solid rgba(255,255,255,.28) !important;

    background:#ff91a6 !important;

    color:#fff !important;

    text-align:center !important;
    line-height:1 !important;

    overflow:hidden !important;

    box-sizing:border-box !important;

    transform:none !important;
    float:none !important;
  }

  /* 내부 묶음 자체를 셀 중앙에 */
  .jc-nav > .jc-wrap > .jc-nav-item > .jc-nav-cell{
    width:100% !important;
    height:100% !important;

    display:flex !important;
    flex-direction:row !important;

    align-items:center !important;
    justify-content:center !important;

    gap:4px !important;

    margin:0 !important;
    padding:0 3px !important;

    text-align:center !important;

    box-sizing:border-box !important;
  }

  .jc-nav-label{
    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    color:#fff !important;

    font-size:13px !important;
    font-weight:900 !important;
    line-height:1 !important;
    letter-spacing:-.55px !important;

    white-space:nowrap !important;

    text-align:center !important;
  }

  .jc-nav-icon-img{
    display:block !important;

    width:21px !important;
    min-width:21px !important;
    max-width:21px !important;

    height:21px !important;
    min-height:21px !important;
    max-height:21px !important;

    flex:0 0 21px !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:contain !important;
    object-position:center center !important;

    vertical-align:middle !important;
  }

  .jc-nav-banner-user{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:21px !important;
    min-width:21px !important;
    max-width:21px !important;

    height:21px !important;
    min-height:21px !important;
    max-height:21px !important;

    flex:0 0 21px !important;

    margin:0 !important;
    padding:0 !important;

    border-radius:50% !important;

    background:#fff !important;
    color:#ff91a6 !important;

    font-size:9px !important;
    line-height:1 !important;
  }

  /* 3번째 행 하단이 다음 영역에 가려지지 않게 */
  .jc-main{
    position:relative !important;

    margin-top:0 !important;
    padding-top:0 !important;

    clear:both !important;

    z-index:0 !important;
  }

  .jc-guarantee-title,
  .jc-category-guarantee-title{
    position:relative !important;
    z-index:0 !important;
  }

}


/* 390px 이하에서도 구조는 그대로, 폰트만 아주 약간 축소 */
@media(max-width:390px){

  .jc-nav{
    height:125px !important;
    min-height:125px !important;
    max-height:125px !important;
  }

  .jc-nav > .jc-wrap{
    height:123px !important;
    min-height:123px !important;
    max-height:123px !important;

    grid-template-rows:repeat(3, 41px) !important;
    grid-auto-rows:41px !important;
  }

  .jc-nav > .jc-wrap > .jc-nav-item{
    height:41px !important;
    min-height:41px !important;
    max-height:41px !important;
  }

  .jc-nav-label{
    font-size:12px !important;
    letter-spacing:-.65px !important;
  }

  .jc-nav-icon-img,
  .jc-nav-banner-user{
    width:20px !important;
    min-width:20px !important;
    max-width:20px !important;

    height:20px !important;
    min-height:20px !important;
    max-height:20px !important;

    flex-basis:20px !important;
  }

}


/* =========================================================
   V2.13.5 - 모바일 햄버거 사이드 메뉴
   원본 jusocon18 모바일 화면 기준
========================================================= */

.jc-mobile-drawer-shell{
  display:none;
}


/* 모바일 스크롤 잠금 */
html.jc-drawer-lock,
body.jc-drawer-lock{
  overflow:hidden !important;
  overscroll-behavior:none !important;
}


@media(max-width:760px){

  .jc-mobile-drawer-shell{
    position:fixed !important;
    inset:0 !important;

    display:block !important;

    visibility:hidden !important;
    opacity:0 !important;

    pointer-events:none !important;

    z-index:120000 !important;

    transition:
      visibility 0s linear .22s,
      opacity .22s ease !important;
  }

  .jc-mobile-drawer-shell.is-open{
    visibility:visible !important;
    opacity:1 !important;

    pointer-events:auto !important;

    transition-delay:0s !important;
  }


  /* 오른쪽 반투명 영역 */
  .jc-mobile-drawer-backdrop{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;

    background:rgba(0,0,0,.43) !important;

    opacity:0 !important;

    transition:opacity .22s ease !important;
  }

  .jc-mobile-drawer-shell.is-open .jc-mobile-drawer-backdrop{
    opacity:1 !important;
  }


  /* 좌측 패널: 원본 약 78% */
  .jc-mobile-drawer{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;

    width:78% !important;
    max-width:326px !important;
    min-width:292px !important;

    height:100% !important;

    display:flex !important;
    flex-direction:column !important;

    margin:0 !important;
    padding:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    -webkit-overflow-scrolling:touch !important;

    background:#fff !important;

    box-shadow:2px 0 10px rgba(0,0,0,.08) !important;

    transform:translateX(-102%) !important;

    transition:transform .24s ease !important;

    overscroll-behavior:contain !important;
  }

  .jc-mobile-drawer-shell.is-open .jc-mobile-drawer{
    transform:translateX(0) !important;
  }


  /* 상단 핑크 헤더 */
  .jc-drawer-head{
    position:relative !important;

    width:100% !important;
    height:64px !important;
    min-height:64px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    padding:0 21px 0 18px !important;

    background:#ff91a6 !important;
  }

  .jc-drawer-brand{
    height:64px !important;

    display:flex !important;
    align-items:center !important;

    gap:8px !important;

    color:#fff !important;
  }

  /* 메인 로고의 왼쪽 콘 아이콘 부분만 잘라 사용 */
  .jc-drawer-brand-icon{
    position:relative !important;

    display:block !important;

    width:31px !important;
    height:34px !important;

    overflow:hidden !important;

    flex:0 0 31px !important;
  }

  .jc-drawer-brand-icon img{
    position:absolute !important;
    left:0 !important;
    top:50% !important;

    width:77px !important;
    max-width:none !important;
    height:auto !important;

    transform:translateY(-50%) !important;

    object-fit:contain !important;
  }

  .jc-drawer-brand-text{
    color:#fff !important;

    font-size:21px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:-.8px !important;
  }

  .jc-drawer-close{
    width:30px !important;
    height:30px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;
    padding:0 0 2px !important;

    border:0 !important;

    background:transparent !important;

    color:#fff !important;

    font-size:29px !important;
    line-height:1 !important;
    font-weight:900 !important;

    cursor:pointer !important;
  }


  /* 문의 / 찜 / 공지 2x2 */
  .jc-drawer-quick-grid{
    width:100% !important;

    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:repeat(2,54px) !important;

    border-bottom:1px solid #e4e4e4 !important;

    background:#fff !important;
  }

  .jc-drawer-quick-grid a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-width:0 !important;

    border-right:1px solid #e3e3e3 !important;
    border-bottom:1px solid #e3e3e3 !important;

    color:#050505 !important;

    font-size:15.5px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:-.65px !important;

    text-align:center !important;
  }

  .jc-drawer-quick-grid a:nth-child(2n){
    border-right:0 !important;
  }

  .jc-drawer-quick-grid a:nth-child(n+3){
    border-bottom:0 !important;
  }


  /* 로그인 / 회원가입 */
  .jc-drawer-auth{
    width:100% !important;
    height:48px !important;
    min-height:48px !important;

    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;

    background:#ff91a6 !important;
  }

  .jc-drawer-auth span{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-right:1px solid rgba(255,255,255,.55) !important;

    color:#fff !important;

    font-size:16px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:-.6px !important;
  }

  .jc-drawer-auth span:last-child{
    border-right:0 !important;
  }


  /* 카테고리 2열 카드 */
  .jc-drawer-categories{
    width:100% !important;

    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;

    gap:8px !important;

    padding:14px 13px 14px !important;

    background:#fff !important;
  }

  .jc-drawer-category{
    width:100% !important;
    min-width:0 !important;
    height:58px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    gap:7px !important;

    padding:0 10px !important;

    border:1px solid #e3e3e3 !important;
    border-radius:12px !important;

    background:#fff !important;

    color:#080808 !important;

    overflow:hidden !important;

    box-shadow:0 1px 2px rgba(0,0,0,.025) !important;
  }

  .jc-drawer-category-icon{
    display:block !important;

    width:28px !important;
    min-width:28px !important;
    height:28px !important;

    flex:0 0 28px !important;

    object-fit:contain !important;
    object-position:center !important;
  }

  .jc-drawer-category > span:last-child{
    min-width:0 !important;

    color:#080808 !important;

    font-size:16px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:-.8px !important;

    white-space:nowrap !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .jc-drawer-user-icon{
    position:relative !important;

    width:28px !important;
    min-width:28px !important;
    height:28px !important;

    flex:0 0 28px !important;

    border:2px solid #050505 !important;
    border-radius:50% !important;
  }

  .jc-drawer-user-icon::before{
    content:"" !important;

    position:absolute !important;
    left:50% !important;
    top:5px !important;

    width:8px !important;
    height:8px !important;

    border-radius:50% !important;

    background:#050505 !important;

    transform:translateX(-50%) !important;
  }

  .jc-drawer-user-icon::after{
    content:"" !important;

    position:absolute !important;
    left:50% !important;
    bottom:4px !important;

    width:15px !important;
    height:8px !important;

    border-radius:9px 9px 5px 5px !important;

    background:#050505 !important;

    transform:translateX(-50%) !important;
  }


  /* 하단 링크 */
  .jc-drawer-footer{
    width:100% !important;

    margin-top:auto !important;

    padding:13px 13px 17px !important;

    border-top:1px solid #ededed !important;

    background:#fff !important;
  }

  .jc-drawer-telegram{
    width:100% !important;
    height:35px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    gap:6px !important;

    margin:0 0 8px !important;

    color:#4288c8 !important;

    font-size:17px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:-.4px !important;
  }

  .jc-drawer-telegram img{
    width:23px !important;
    height:23px !important;

    object-fit:contain !important;
  }

  .jc-drawer-channel,
  .jc-drawer-lifetime{
    width:100% !important;
    height:47px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;

    border-radius:4px !important;

    color:#fff !important;

    font-size:15.5px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:-.65px !important;

    text-align:center !important;
  }

  .jc-drawer-channel{
    margin-bottom:8px !important;
    background:#095bb0 !important;
  }

  .jc-drawer-lifetime{
    background:#f20c0c !important;
  }

}


/* 390px 이하 */
@media(max-width:390px){

  .jc-mobile-drawer{
    width:80% !important;
    min-width:282px !important;
    max-width:312px !important;
  }

  .jc-drawer-head{
    height:61px !important;
    min-height:61px !important;
  }

  .jc-drawer-brand,
  .jc-drawer-head{
    height:61px !important;
  }

  .jc-drawer-brand-text{
    font-size:20px !important;
  }

  .jc-drawer-quick-grid{
    grid-template-rows:repeat(2,51px) !important;
  }

  .jc-drawer-quick-grid a{
    font-size:14.5px !important;
  }

  .jc-drawer-auth{
    height:46px !important;
    min-height:46px !important;
  }

  .jc-drawer-auth span{
    font-size:15px !important;
  }

  .jc-drawer-categories{
    gap:7px !important;
    padding:13px 12px !important;
  }

  .jc-drawer-category{
    height:55px !important;
    padding:0 8px !important;
    gap:6px !important;
  }

  .jc-drawer-category-icon,
  .jc-drawer-user-icon{
    width:26px !important;
    min-width:26px !important;
    height:26px !important;
    flex-basis:26px !important;
  }

  .jc-drawer-category > span:last-child{
    font-size:15px !important;
  }

  .jc-drawer-footer{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .jc-drawer-channel,
  .jc-drawer-lifetime{
    font-size:14.5px !important;
  }

}


/* =========================================================
   V2.13.6
   모바일 카테고리 / 상세보기 페이지를 원본 모바일 구도에 맞춤
========================================================= */

.jc-detail-favorite{
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  font-family:inherit;
  cursor:pointer;
}

.jc-detail-list-button-wrap{
  display:flex;
  justify-content:center;
  margin-top:42px;
  padding-top:36px;
  border-top:1px solid #e9e9e9;
}

.jc-detail-list-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:114px;
  height:48px;
  padding:0 17px;
  border-radius:4px;
  background:#565d88;
  color:#fff;
  font-size:16px;
  font-weight:900;
}


/* =========================================================
   MOBILE: category + detail
========================================================= */
@media(max-width:760px){

  /* 페이지 바깥 여백 */
  .jc-category-page,
  .jc-detail-page{
    width:100% !important;
    padding:0 0 48px !important;
    margin:0 !important;
    background:#fff !important;
  }

  .jc-category-page > .jc-wrap,
  .jc-detail-page > .jc-wrap{
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
    margin:0 !important;
  }


  /* -------------------------------------------------------
     공통 카테고리 타이틀
     원본처럼 큰 흰색 박스
  ------------------------------------------------------- */
  .jc-category-titlebar{
    width:100% !important;
    height:66px !important;
    min-height:66px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;

    margin:0 0 5px !important;
    padding:0 23px !important;

    border:1px solid #dfdfdf !important;
    border-radius:4px !important;

    background:#fff !important;

    box-sizing:border-box !important;
  }

  .jc-category-title-icon{
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
    flex:0 0 34px !important;

    object-fit:contain !important;
  }

  .jc-category-titlebar h1{
    margin:0 !important;
    padding:0 !important;

    color:#050505 !important;

    font-size:24px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:-1px !important;
  }

  .jc-detail-category-titlebar{
    margin-bottom:26px !important;
  }


  /* -------------------------------------------------------
     CATEGORY PAGE
     2열 카드 / 큰 로고 / 회색 메타바
  ------------------------------------------------------- */
  .jc-directory-grid{
    width:100% !important;

    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;

    gap:3px !important;

    margin:0 !important;
    padding:0 2px !important;

    align-items:start !important;
  }

  .jc-directory-card{
    position:relative !important;

    width:100% !important;
    min-width:0 !important;

    height:211px !important;

    margin:0 !important;

    border:1px solid #cfcfcf !important;
    border-radius:0 !important;

    background:#fff !important;

    overflow:hidden !important;

    box-sizing:border-box !important;
  }

  .jc-directory-card-main{
    width:100% !important;
    height:100% !important;

    display:grid !important;
    grid-template-rows:161px 50px !important;

    color:#111 !important;
  }

  .jc-directory-logo{
    width:100% !important;
    height:161px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:30px 20px 16px !important;

    background:#fff !important;

    overflow:hidden !important;

    box-sizing:border-box !important;
  }

  .jc-directory-logo img{
    display:block !important;

    width:auto !important;
    max-width:100% !important;

    height:auto !important;
    max-height:82px !important;

    object-fit:contain !important;
    object-position:center center !important;

    transform:none !important;
  }

  .jc-directory-logo-fallback{
    width:100% !important;
    max-width:155px !important;

    min-height:50px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:8px !important;

    background:#151515 !important;
    color:#fff !important;

    font-size:13px !important;
    line-height:1.2 !important;
    font-weight:900 !important;

    text-align:center !important;
    letter-spacing:-.5px !important;
  }

  .jc-directory-meta{
    width:100% !important;
    height:50px !important;

    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;

    gap:6px !important;

    padding:0 12px !important;

    background:#e6e6e6 !important;

    box-sizing:border-box !important;
  }

  .jc-directory-name{
    min-width:0 !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;

    font-size:15px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:-.7px !important;
  }

  .jc-directory-views{
    display:flex !important;
    align-items:center !important;

    color:#ef8c14 !important;

    font-size:15px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:-.45px !important;

    white-space:nowrap !important;
  }

  .jc-directory-views .jc-heart{
    color:#f20c2a !important;
    margin-right:3px !important;

    font-size:18px !important;
    line-height:1 !important;
  }

  .jc-favorite-badge{
    position:absolute !important;

    right:7px !important;
    top:7px !important;

    z-index:5 !important;

    min-width:78px !important;
    height:23px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:3px !important;

    padding:0 8px !important;

    border:0 !important;
    border-radius:6px !important;

    background:linear-gradient(#ffe98b,#f3ca51) !important;
    color:#fff !important;

    font-size:11px !important;
    line-height:1 !important;
    font-weight:900 !important;

    box-shadow:inset 0 0 0 1px rgba(244,194,54,.25) !important;
  }

  .jc-favorite-badge span{
    font-size:15px !important;
  }


  /* -------------------------------------------------------
     DETAIL PAGE HERO
  ------------------------------------------------------- */
  .jc-detail-hero{
    width:100% !important;

    margin:0 !important;
    padding:0 24px 26px !important;

    border-bottom:1px solid #ececec !important;

    box-sizing:border-box !important;
  }

  .jc-detail-site-title{
    width:100% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    gap:9px !important;

    margin:0 0 22px !important;
    padding:0 !important;

    color:#050505 !important;

    font-size:29px !important;
    line-height:1.15 !important;
    font-weight:900 !important;
    letter-spacing:-1.25px !important;
  }

  .jc-detail-site-title-text{
    min-width:0 !important;
  }

  .jc-detail-favorite{
    position:relative !important;

    width:38px !important;
    min-width:38px !important;
    height:38px !important;

    flex:0 0 38px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .jc-detail-favorite-star{
    position:absolute !important;
    inset:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    color:#f4d968 !important;

    font-size:38px !important;
    line-height:1 !important;
    font-weight:600 !important;
  }

  .jc-detail-favorite-label{
    position:relative !important;

    z-index:2 !important;

    color:#d6bb55 !important;

    font-size:8px !important;
    line-height:1 !important;
    font-weight:900 !important;
  }

  .jc-detail-favorite.is-active .jc-detail-favorite-star{
    color:#efc843 !important;
  }


  /* 페이지 정보 먼저, 아래 로고 + 주소 */
  .jc-detail-info-row{
    width:100% !important;

    display:grid !important;

    grid-template-columns:145px minmax(0,1fr) !important;
    grid-template-areas:
      "pageinfo pageinfo"
      "thumb linkinfo" !important;

    gap:14px 24px !important;

    align-items:center !important;
  }

  .jc-page-info{
    grid-area:pageinfo !important;

    width:100% !important;
    min-height:66px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    padding:9px 12px !important;

    border:1px solid #ddd !important;

    background:#f4f4f6 !important;

    text-align:center !important;

    box-sizing:border-box !important;
  }

  .jc-page-info > strong{
    display:block !important;

    margin:0 0 5px !important;

    color:#111 !important;

    font-size:16px !important;
    line-height:1 !important;
    font-weight:900 !important;
  }

  .jc-page-info > div{
    color:#111 !important;

    font-size:14px !important;
    line-height:1.1 !important;
    font-weight:900 !important;

    white-space:nowrap !important;
  }

  .jc-page-info .jc-heart{
    font-size:16px !important;
  }

  .jc-detail-thumb{
    grid-area:thumb !important;

    width:145px !important;
    height:102px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:16px !important;

    border:1px solid #d6d6d6 !important;

    background:#fff !important;

    box-sizing:border-box !important;
  }

  .jc-detail-thumb img{
    display:block !important;

    width:auto !important;
    max-width:100% !important;

    height:auto !important;
    max-height:65px !important;

    object-fit:contain !important;
  }

  .jc-detail-link-info{
    grid-area:linkinfo !important;

    min-width:0 !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;

    padding:0 !important;
  }

  .jc-detail-url-row{
    width:100% !important;

    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;

    gap:5px !important;

    margin:0 0 13px !important;
  }

  .jc-detail-url{
    color:#111 !important;

    font-size:15px !important;
    line-height:1.35 !important;
    font-weight:900 !important;

    word-break:break-all !important;
  }

  .jc-detail-go{
    min-width:45px !important;
    height:22px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:0 6px !important;

    border:1px solid #bababa !important;

    background:#ededed !important;
    color:#333 !important;

    font-size:11px !important;
    line-height:1 !important;
    font-weight:900 !important;
  }

  .jc-detail-status-row{
    display:flex !important;
    align-items:flex-start !important;
    flex-wrap:wrap !important;

    gap:4px 6px !important;

    color:#111 !important;

    font-size:13px !important;
    line-height:1.65 !important;
    font-weight:900 !important;
  }

  .jc-detail-status{
    color:#1688bf !important;
  }

  .jc-detail-updated{
    color:#111 !important;
  }


  /* -------------------------------------------------------
     DETAIL BODY
  ------------------------------------------------------- */
  .jc-detail-body{
    width:calc(100% - 48px) !important;
    max-width:none !important;

    margin:58px auto 0 !important;
    padding:0 !important;

    color:#3d3d3d !important;

    font-size:17px !important;
    line-height:2 !important;
    font-weight:800 !important;
    letter-spacing:-.65px !important;
  }

  .jc-detail-heading{
    margin:0 0 20px !important;

    color:#e66873 !important;

    font-size:29px !important;
    line-height:1.85 !important;
    font-weight:900 !important;
    letter-spacing:-1.4px !important;

    word-break:keep-all !important;
  }

  .jc-detail-en{
    white-space:normal !important;
  }

  .jc-detail-lead{
    margin:0 0 32px !important;

    color:#424242 !important;

    font-size:17px !important;
    line-height:2.05 !important;
    font-weight:900 !important;
    letter-spacing:-.8px !important;

    word-break:keep-all !important;
  }

  .jc-detail-graybox{
    margin:0 0 36px !important;
    padding:27px 28px !important;

    background:#f3f4f5 !important;
    color:#333 !important;

    font-size:17px !important;
    line-height:2.05 !important;
    font-weight:900 !important;
    letter-spacing:-.75px !important;

    word-break:keep-all !important;
  }

  .jc-detail-feature-section{
    margin-bottom:34px !important;
  }

  .jc-detail-feature-section h3{
    padding-left:12px !important;
    margin-bottom:10px !important;

    font-size:19px !important;
    line-height:1.45 !important;
  }

  .jc-detail-feature-row{
    padding:17px 0 !important;

    font-size:15px !important;
    line-height:1.85 !important;
  }

  .jc-detail-tipbox,
  .jc-detail-outlinebox{
    font-size:15px !important;
    line-height:1.9 !important;
  }

  .jc-detail-faq h3{
    font-size:20px !important;
  }

  .jc-faq-item > strong{
    font-size:14px !important;
    line-height:1.55 !important;
  }

  .jc-faq-item p{
    padding-left:18px !important;

    font-size:14px !important;
    line-height:1.9 !important;
  }


  /* 원본 하단 파란 카테고리 링크 */
  .jc-detail-category-links{
    width:100% !important;

    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;

    gap:0 !important;

    margin:42px 0 0 !important;
    padding:31px 10px 0 !important;

    border-top:1px solid #e5e5e5 !important;

    text-align:center !important;

    box-sizing:border-box !important;
  }

  .jc-detail-category-links a{
    color:#4a9bd0 !important;

    font-size:15px !important;
    line-height:1.85 !important;
    font-weight:900 !important;
    letter-spacing:-.65px !important;
  }

  .jc-detail-category-links a:not(:last-child)::after{
    content:" | " !important;

    color:#4a4a4a !important;

    margin:0 3px !important;
  }


  /* 키워드 회색 영역 */
  .jc-detail-keywords{
    width:100% !important;

    margin:49px 0 0 !important;
    padding:0 13px !important;

    color:#a6a6a6 !important;

    text-align:center !important;

    font-size:14px !important;
    line-height:1.85 !important;
    font-weight:900 !important;
    letter-spacing:-.55px !important;

    box-sizing:border-box !important;
  }

  .jc-keyword-label{
    display:inline !important;
    margin-right:3px !important;
  }

  .jc-keyword-tags{
    display:inline !important;
  }

  .jc-keyword-tag{
    display:inline !important;
    margin:0 2px !important;
  }


  /* 목록으로 */
  .jc-detail-list-button-wrap{
    width:100% !important;

    margin:53px 0 0 !important;
    padding:39px 0 0 !important;

    border-top:1px solid #e5e5e5 !important;

    display:flex !important;
    justify-content:center !important;
  }

  .jc-detail-list-button{
    min-width:94px !important;
    height:45px !important;

    gap:6px !important;

    padding:0 14px !important;

    border-radius:4px !important;

    background:#565d88 !important;
    color:#fff !important;

    font-size:15px !important;
    line-height:1 !important;
    font-weight:900 !important;
  }

}


/* =========================================================
   390px 이하 미세 보정
========================================================= */
@media(max-width:390px){

  .jc-category-titlebar{
    height:62px !important;
    min-height:62px !important;

    padding:0 20px !important;
  }

  .jc-category-title-icon{
    width:31px !important;
    min-width:31px !important;
    height:31px !important;
    flex-basis:31px !important;
  }

  .jc-category-titlebar h1{
    font-size:22px !important;
  }

  .jc-directory-card{
    height:202px !important;
  }

  .jc-directory-card-main{
    grid-template-rows:154px 48px !important;
  }

  .jc-directory-logo{
    height:154px !important;
    padding-left:15px !important;
    padding-right:15px !important;
  }

  .jc-directory-name{
    font-size:14px !important;
  }

  .jc-directory-views{
    font-size:13.5px !important;
  }

  .jc-favorite-badge{
    min-width:72px !important;
    height:22px !important;
    font-size:10px !important;
  }

  .jc-detail-hero{
    padding-left:20px !important;
    padding-right:20px !important;
  }

  .jc-detail-site-title{
    font-size:27px !important;
  }

  .jc-detail-info-row{
    grid-template-columns:136px minmax(0,1fr) !important;
    gap:13px 17px !important;
  }

  .jc-detail-thumb{
    width:136px !important;
    height:98px !important;
  }

  .jc-detail-url{
    font-size:14px !important;
  }

  .jc-detail-status-row{
    font-size:12px !important;
  }

  .jc-detail-body{
    width:calc(100% - 42px) !important;
  }

  .jc-detail-heading{
    font-size:27px !important;
  }

  .jc-detail-lead,
  .jc-detail-graybox{
    font-size:16px !important;
  }

}


/* V2.13.7 - 원본 링크 기본 이미지 */
.jc-site-icon img,
.jc-directory-logo img,
.jc-detail-thumb img{
  object-fit:contain;
  object-position:center center;
}


/* =========================================================
   V2.13.9 - 팝업 3개 고정 관리자
========================================================= */

.jc-popup-click-link{
  display:block;
  width:100%;
  height:100%;
}

.jc-popup-click-link .jc-popup-original-image{
  display:block;
  width:100%;
  height:100%;
}



/* =========================================================
   V2.14.0 - 관련 키워드 (쉼표 구분 + 주소넷 검색 링크)
========================================================= */

.jc-detail-keywords .jc-keyword-tag{
  color:inherit;
  text-decoration:none;
  font-weight:inherit;
}

.jc-detail-keywords .jc-keyword-tag:hover{
  color:#4a94c4;
  text-decoration:underline;
}

.jc-keyword-comma{
  color:inherit;
}

@media(max-width:760px){

  .jc-detail-keywords .jc-keyword-tag{
    color:#9d9d9d !important;
    text-decoration:none !important;
  }

  .jc-detail-keywords .jc-keyword-tag:active,
  .jc-detail-keywords .jc-keyword-tag:focus{
    color:#4a9bd0 !important;
  }

}