/* =========================================================
   Jovely Class Common Shell
   모든 페이지의 상단 메뉴와 푸터를 동일하게 유지합니다.
========================================================= */

body{
  font-family:"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif !important;
}

.top-nav{
  position:relative !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:min(1120px,calc(100vw - 32px)) !important;
  min-height:44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  margin:0 0 28px !important;
  padding:0 !important;
}

.brand-link{
  flex:none !important;
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  text-decoration:none !important;
  color:#232a3b !important;
  font-size:15.5px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-.2px !important;
  white-space:nowrap !important;
}

.brand-mark{
  width:40px !important;
  height:40px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:13px !important;
  background:#fff !important;
  border:1px solid #e3e8f6 !important;
  box-shadow:0 7px 20px rgba(80,100,170,.10) !important;
  font-size:21px !important;
  line-height:1 !important;
}

.nav-links{
  flex:1 1 auto !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:4px !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding:2px 0 5px !important;
  scrollbar-width:none !important;
  -webkit-overflow-scrolling:touch !important;
}

.nav-links::-webkit-scrollbar{display:none !important}

.nav-link,
.nav-link.adobe-link{
  flex:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:36px !important;
  padding:8px 9px !important;
  border-radius:999px !important;
  text-decoration:none !important;
  color:#59627a !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:12.2px !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:-.15px !important;
  white-space:nowrap !important;
}

.nav-link:hover,
.nav-link.active,
.nav-link.adobe-link:hover,
.nav-link.adobe-link.active{
  color:#4f6df5 !important;
  background:#fff !important;
  box-shadow:0 5px 16px rgba(90,110,180,.08) !important;
}

/* 푸터: 반드시 2줄 */
.site-footer{
  display:block !important;
  width:100% !important;
  margin-top:24px !important;
  padding:21px 16px 22px !important;
  border-top:1px solid rgba(128,128,128,.18) !important;
  color:#7a849b !important;
  font-size:12.8px !important;
  line-height:1.65 !important;
  text-align:center !important;
  opacity:.82 !important;
}

.site-footer .footer-primary{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:0 !important;
}

.site-footer .footer-secondary{
  display:block !important;
  margin-top:5px !important;
  color:#929aad !important;
  font-size:11.5px !important;
  line-height:1.55 !important;
}

.site-footer a{
  color:inherit !important;
  text-decoration:none !important;
}

.site-footer .creator-link{
  margin-left:4px !important;
  color:#59627a !important;
  font-weight:850 !important;
}

.site-footer .divider{
  margin:0 8px !important;
  opacity:.4 !important;
}

.site-footer .youtube-link{
  padding-bottom:1px !important;
  border-bottom:1px solid rgba(128,128,128,.40) !important;
  font-weight:650 !important;
}

.site-footer a:hover{
  color:#4f6df5 !important;
  opacity:1 !important;
}

@media(max-width:760px){
  .top-nav{
    width:calc(100vw - 28px) !important;
    gap:12px !important;
    margin-bottom:22px !important;
  }
  .brand-link{
    font-size:14px !important;
  }
  .brand-mark{
    width:36px !important;
    height:36px !important;
    border-radius:12px !important;
    font-size:19px !important;
  }
  .nav-links{
    justify-content:flex-start !important;
  }
  .nav-link,
  .nav-link.adobe-link{
    min-height:34px !important;
    padding:7px 8px !important;
    font-size:11.5px !important;
  }
}

@media(max-width:470px){
  .top-nav{
    align-items:center !important;
    gap:9px !important;
  }
  .brand-link{
    font-size:13px !important;
  }
  .brand-mark{
    width:34px !important;
    height:34px !important;
    font-size:18px !important;
  }
}


/* =========================================================
   v6 - Jovely Class 추천 사이드바 / Adobe 강조
========================================================= */

/* 기존 오른쪽 세로형 AdSense는 사용하지 않음 */
.side-ad-right{
  display:none !important;
}

/* Adobe 메뉴: 전체 UI는 유지하면서 조금만 강조 */
.nav-link.adobe-link{
  color:#b63838 !important;
}
.nav-link.adobe-link:hover,
.nav-link.adobe-link.active{
  color:#aa2f2f !important;
  background:#fff2f2 !important;
  box-shadow:0 5px 16px rgba(170,47,47,.08) !important;
}

/* 오른쪽: Jovely Class 자체 추천 링크 */
.creator-side-panel{
  position:fixed;
  top:90px;
  left:calc(50% + 555px);
  width:clamp(205px,calc(50vw - 585px),255px);
  z-index:6;
  padding:13px;
  border:1px solid #e3e8f3;
  border-radius:17px;
  background:rgba(255,255,255,.96);
  box-shadow:0 12px 32px rgba(62,76,125,.10);
  backdrop-filter:blur(8px);
}
.creator-side-title{
  padding:2px 3px 10px;
  color:#778198;
  font-size:11.5px;
  font-weight:900;
  letter-spacing:.2px;
}
.creator-side-card{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:61px;
  margin-top:7px;
  padding:10px 10px;
  border:1px solid #e8ebf3;
  border-radius:13px;
  background:#fbfcff;
  color:#30384d;
  text-decoration:none;
  transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease,background .14s ease;
}
.creator-side-card:hover{
  transform:translateY(-1px);
  border-color:#d4dcf6;
  background:#fff;
  box-shadow:0 7px 18px rgba(64,80,135,.08);
}
.creator-side-card-adobe{
  border-color:#f0dddd;
  background:#fffafa;
}
.creator-side-card-adobe:hover{
  border-color:#e8c7c7;
  background:#fff7f7;
}
.creator-side-icon{
  flex:none;
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(120,130,160,.12);
  font-size:16px;
  line-height:1;
}
.creator-side-copy{
  min-width:0;
  flex:1;
}
.creator-side-copy strong{
  display:block;
  overflow:hidden;
  color:#30384d;
  font-size:12.6px;
  line-height:1.3;
  font-weight:900;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.creator-side-copy small{
  display:block;
  overflow:hidden;
  margin-top:4px;
  color:#8a93a7;
  font-size:10.5px;
  line-height:1.25;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.creator-side-card-adobe .creator-side-copy strong{
  color:#ad3434;
}
.creator-side-arrow{
  flex:none;
  color:#a5adbd;
  font-size:19px;
  line-height:1;
}

/* =========================================================
   v7 - 추천 바로가기 / YouTube 아이콘
========================================================= */

.creator-side-panel{
  width:clamp(215px,calc(50vw - 585px),270px) !important;
  padding:13px !important;
}

.creator-side-title{
  padding:2px 3px 9px !important;
  color:#4f5870 !important;
  font-size:12.2px !important;
  font-weight:900 !important;
  letter-spacing:-.1px !important;
}

.creator-side-section-label{
  margin:2px 4px 4px;
  color:#a0a8b8;
  font-size:9.8px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.6px;
}
.creator-side-section-gap{
  margin-top:11px;
  padding-top:10px;
  border-top:1px solid #edf0f6;
}

.creator-side-card{
  min-height:54px !important;
  margin-top:6px !important;
  padding:8px 9px !important;
}
.creator-side-card-tool{
  border-color:#dce4ff !important;
  background:linear-gradient(180deg,#fbfcff,#f7f9ff) !important;
}
.creator-side-card-tool:hover{
  border-color:#c8d5ff !important;
}
.creator-side-copy strong{
  font-size:12.1px !important;
}
.creator-side-copy small{
  font-size:10.2px !important;
}
.creator-side-icon{
  width:29px !important;
  height:29px !important;
  font-size:15px !important;
}
.creator-side-youtube{
  background:transparent !important;
  box-shadow:none !important;
}

/* YouTube 로고: 빨간 바탕 + 흰 재생 버튼 */
.yt-logo-icon{
  position:relative;
  display:inline-grid;
  place-items:center;
  width:42px;
  height:30px;
  border-radius:8px;
  background:#ff0033;
  box-shadow:0 5px 14px rgba(255,0,51,.18);
}
.yt-logo-icon > span{
  display:block;
  width:0;
  height:0;
  margin-left:2px;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:10px solid #fff;
}
.yt-logo-icon.yt-mini{
  width:29px;
  height:21px;
  border-radius:6px;
  box-shadow:none;
}
.yt-logo-icon.yt-mini > span{
  border-top-width:4px;
  border-bottom-width:4px;
  border-left-width:7px;
}
.yt-logo-icon.yt-large{
  width:58px;
  height:41px;
  border-radius:11px;
}
.yt-logo-icon.yt-large > span{
  border-top-width:8px;
  border-bottom-width:8px;
  border-left-width:13px;
}
.yt-logo-icon.yt-hero{
  width:64px;
  height:45px;
  border-radius:12px;
}
.yt-logo-icon.yt-hero > span{
  border-top-width:9px;
  border-bottom-width:9px;
  border-left-width:15px;
}



/* =========================================================
   Final - 사용방법 영상 버튼 / 준비중 안내
========================================================= */
.guide-video-wrap{
  display:flex;
  justify-content:center;
  margin-top:15px;
}
.guide-video-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:40px;
  padding:9px 14px;
  border:1px solid #d8e0fb;
  border-radius:11px;
  background:#fff;
  color:#4f64c7;
  box-shadow:0 7px 18px rgba(70,88,150,.07);
  cursor:pointer;
  font:inherit;
  font-size:12.5px;
  font-weight:900;
  transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease;
}
.guide-video-btn:hover{
  transform:translateY(-1px);
  border-color:#bdcaf5;
  box-shadow:0 9px 21px rgba(70,88,150,.11);
}
.guide-soon-toast{
  position:fixed;
  left:50%;
  bottom:24px;
  z-index:9999;
  transform:translate(-50%,16px);
  padding:10px 15px;
  border-radius:999px;
  background:#20283b;
  color:#fff;
  box-shadow:0 10px 28px rgba(20,28,45,.22);
  font-size:12px;
  font-weight:850;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
  white-space:nowrap;
}
.guide-soon-toast.show{
  opacity:1;
  transform:translate(-50%,0);
}


/* =========================================================
   FINAL v2 - 사용법 영상 버튼 / 중앙 준비중 안내
========================================================= */
.guide-video-btn{
  gap:8px !important;
  min-height:42px !important;
  padding:10px 15px !important;
  border-radius:12px !important;
  font-size:12.7px !important;
}
.guide-video-btn > span:first-child{
  color:#4f6df5;
  font-size:12px;
}

.guide-soon-toast{
  position:fixed !important;
  left:50% !important;
  top:50% !important;
  bottom:auto !important;
  z-index:99999 !important;
  max-width:min(420px,calc(100vw - 40px)) !important;
  padding:15px 20px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:15px !important;
  background:rgba(30,38,58,.96) !important;
  color:#fff !important;
  box-shadow:0 18px 48px rgba(20,28,45,.28) !important;
  font-size:13px !important;
  line-height:1.55 !important;
  font-weight:850 !important;
  text-align:center !important;
  white-space:normal !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:translate(-50%,-44%) scale(.97) !important;
  transition:opacity .18s ease,transform .18s ease !important;
  backdrop-filter:blur(8px);
}
.guide-soon-toast.show{
  opacity:1 !important;
  transform:translate(-50%,-50%) scale(1) !important;
}


/* =========================================================
   FINAL RELEASE - 도구 페이지 UI 통일
========================================================= */
.tool-hero{
  text-align:center;
  margin:16px 0 24px;
}
.tool-hero .logo{
  margin-bottom:7px;
}
.tool-hero h1{
  margin:0;
}
.tool-hero .brand-name{
  margin:6px 0 8px !important;
  color:#7a849b !important;
  font-size:14px !important;
  font-weight:750 !important;
  letter-spacing:.15px !important;
}
.tool-hero .tagline{
  margin:0 auto;
}
.guide-video-btn{
  min-width:128px !important;
}


/* =========================================================
   FINAL v3 - Breadcrumb / 사이드 NEW 배지
========================================================= */
.breadcrumb{
  margin:2px 0 12px !important;
  color:#7b8498 !important;
  font-size:12.5px !important;
  line-height:1.55 !important;
  font-weight:500 !important;
}
.breadcrumb a{
  color:#7b8498 !important;
  text-decoration:none !important;
  font-weight:500 !important;
}
.breadcrumb a:hover{
  color:#4f6df5 !important;
}
.breadcrumb a:visited{
  color:#7b8498 !important;
}

.side-new-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:5px;
  padding:2px 5px;
  border-radius:999px;
  background:#eef2ff;
  color:#4f6df5;
  font-size:8px;
  line-height:1.25;
  font-weight:950;
  letter-spacing:.25px;
  vertical-align:1px;
}

/* =========================================================
   FINAL v9 - 광고 우선 / 안전 반응형 레이아웃
   1순위: 왼쪽 AdSense
   2순위: 본문
   3순위: 오른쪽 '더 알차게 활용하기'
========================================================= */

/* 중앙 콘텐츠는 항상 화면 중앙에 유지 */
.wrap{
  width:100% !important;
  max-width:920px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* 상단 메뉴도 본문 폭 안에서 움직여 광고/사이드 패널과 겹치지 않게 함 */
.top-nav{
  left:0 !important;
  transform:none !important;
  width:100% !important;
  max-width:100% !important;
}

/* ---------------------------------------------------------
   왼쪽 AdSense
   - 1240px 이상에서만 표시
   - 세로형 responsive display
   - fixed/sticky가 아니라 absolute: 콘텐츠를 덮지 않고 스크롤 시 자연스럽게 사라짐
   - 본문과 최소 30px 이상 간격 확보
--------------------------------------------------------- */
.side-ad-left{
  display:none !important;
}

@media (min-width:1240px){
  .side-ad-left{
    display:block !important;
    position:absolute !important;
    top:90px !important;
    left:auto !important;
    right:calc(50% + 490px) !important;
    width:clamp(120px,calc((100vw - 920px)/2 - 40px),160px) !important;
    max-width:160px !important;
    min-width:120px !important;
    margin:0 !important;
    z-index:2 !important;
  }

  .side-ad-left .desktop-side-ad-unit{
    width:100% !important;
    max-width:100% !important;
  }
}

/* ---------------------------------------------------------
   오른쪽 자체 추천 패널
   - 1360px 이상: 오른쪽 레일
   - 1359px 이하: 본문 맨 아래 카드
   광고보다 먼저 아래로 이동하게 설계
--------------------------------------------------------- */
.creator-side-panel{
  position:static !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  width:100% !important;
  max-width:none !important;
  max-height:none !important;
  overflow:visible !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
  margin:22px 0 0 !important;
  padding:16px !important;
  border-radius:20px !important;
  background:#fff !important;
  box-shadow:0 12px 30px rgba(62,76,125,.08) !important;
  backdrop-filter:none !important;
}

.creator-side-title{
  grid-column:1 / -1 !important;
  padding:0 2px 4px !important;
  color:#4f5870 !important;
  font-size:15px !important;
}

.creator-side-section-label{
  display:none !important;
}

.creator-side-card{
  min-width:0 !important;
  min-height:68px !important;
  margin:0 !important;
  padding:10px 11px !important;
}

.creator-side-copy strong{
  font-size:12.6px !important;
}

.creator-side-copy small{
  font-size:10.5px !important;
}

@media (min-width:1360px){
  .creator-side-panel{
    position:fixed !important;
    top:90px !important;
    left:calc(50% + 490px) !important;
    right:auto !important;
    width:clamp(180px,calc((100vw - 920px)/2 - 40px),230px) !important;
    max-width:230px !important;
    max-height:calc(100vh - 112px) !important;
    overflow:auto !important;
    display:block !important;
    margin:0 !important;
    padding:13px !important;
    border-radius:17px !important;
    background:rgba(255,255,255,.97) !important;
    box-shadow:0 12px 32px rgba(62,76,125,.10) !important;
    backdrop-filter:blur(8px) !important;
    scrollbar-width:thin;
    z-index:6 !important;
  }

  .creator-side-title{
    display:block !important;
    padding:2px 3px 9px !important;
    font-size:12.2px !important;
  }

  .creator-side-section-label{
    display:block !important;
  }

  .creator-side-card{
    min-height:54px !important;
    margin-top:6px !important;
    padding:8px 9px !important;
  }

  .creator-side-copy strong{
    font-size:12.1px !important;
  }

  .creator-side-copy small{
    font-size:10.2px !important;
  }
}

/* 좁은 화면에서는 추천 카드만 자연스럽게 줄어듦 */
@media (max-width:820px){
  .creator-side-panel{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:620px){
  .creator-side-panel{
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin-top:18px !important;
    padding:13px !important;
    border-radius:17px !important;
  }

  .creator-side-title{
    font-size:14px !important;
  }

  .creator-side-card{
    min-height:58px !important;
  }
}


/* FINAL v11 - 본문 중간 반응형 AdSense */
.content-ad-slot{
  width:100%;
  max-width:100%;
  min-width:0;
  margin:22px 0;
  padding:2px 0;
  overflow:hidden;
  text-align:center;
}
.content-ad-slot .adsbygoogle{
  display:block;
  width:100%;
  max-width:100%;
}
@media(max-width:640px){
  .content-ad-slot{
    margin:18px 0;
  }
}

/* FINAL v13 - 오른쪽/하단 추천 패널의 도서명 잘림 방지 */
.creator-side-card[href*="book/index.html"] .creator-side-copy strong{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  line-height:1.25 !important;
  word-break:keep-all !important;
}
.creator-side-card[href*="book/index.html"]{
  min-height:64px !important;
}
@media (min-width:1360px){
  .creator-side-card[href*="book/index.html"] .creator-side-copy strong{
    font-size:11.7px !important;
  }
  .creator-side-card[href*="book/index.html"]{
    min-height:60px !important;
  }
}