@charset "UTF-8";
/* ============================================================
   충북콘텐츠 통합 플랫폼 — 메인 (PSD 시안 stage 방식)
   ============================================================ */
@font-face{font-family:'Pretendard';font-weight:400;font-display:swap;
  src:url('fonts/Pretendard-Regular.woff2') format('woff2');}
@font-face{font-family:'Pretendard';font-weight:700;font-display:swap;
  src:url('fonts/Pretendard-Bold.woff2') format('woff2');}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{background:#e9ebf2;}
body.home-page{font-family:'Pretendard','Noto Sans KR',sans-serif;-webkit-font-smoothing:antialiased;}

.stage{position:relative;max-width:1920px;margin:0 auto;container-type:inline-size;
  aspect-ratio:1920/3380;
  background:url('../../images/front/main/main-bg.jpg?v=3') center top/100% 100% no-repeat;
  box-shadow:0 0 40px rgba(0,0,0,.08);overflow:hidden;}

.tx{position:absolute;z-index:5;pointer-events:none;}
.tx a,.tx button{pointer-events:auto;color:inherit;text-decoration:none;background:none;
  border:none;font:inherit;cursor:pointer;letter-spacing:inherit;}

/* 클릭 영역 — 네모박스 대신 은은한 하이라이트 */
.hot{position:absolute;z-index:10;display:block;cursor:pointer;background:transparent;
  border:none;outline:none;text-decoration:none;font:inherit;color:inherit;
  border-radius:1.2cqw;transition:background .25s ease,backdrop-filter .25s ease;}
.hot:hover{background:rgba(108,108,208,.12);}

/* 공지 텍스트 링크: 텍스트 자체에만 호버 (영역 전체 X) */
.cb-ntlink{transition:color .18s ease;}
.cb-ntlink:hover{color:#6561c5 !important;text-decoration:underline;}

/* 카드 그림자 (psd-tools가 PSD 드롭섀도 미렌더 → CSS 복원) */
.cb-shadow{position:absolute;z-index:1;border-radius:1.2cqw;
  box-shadow:0 .55cqw 1.8cqw rgba(20,30,60,.10);pointer-events:none;}

/* ═══ 이달의 추천 카드 (호버: 썸네일만 고급스럽게) ═══ */
.cb-card{position:absolute;z-index:10;display:block;text-decoration:none;cursor:pointer;}
.cb-card .cb-thumb-wrap{position:absolute;left:0;top:4.2%;width:100%;height:54.8%;
  overflow:hidden;border-radius:.7cqw;background:#e6e9f2;
  transition:transform .6s cubic-bezier(.16,.84,.34,1);}
.cb-card .cb-thumb-wrap img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.16,.84,.34,1),filter .6s ease;}
.cb-card .cb-thumb-wrap::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,0) 60%,rgba(20,30,60,.06));
  box-shadow:inset 0 0 0 0 rgba(255,255,255,0);
  transition:box-shadow .5s ease,opacity .5s ease;opacity:0;pointer-events:none;}
.cb-card:hover .cb-thumb-wrap{transform:translateY(-.35cqw);}
.cb-card:hover .cb-thumb-wrap img{transform:scale(1.08);filter:brightness(1.05) saturate(1.06);}
.cb-card:hover .cb-thumb-wrap::after{opacity:1;box-shadow:inset 0 0 0 .12cqw rgba(255,255,255,.55);}
.cb-card .cb-tag{position:absolute;left:5.9%;top:1.2%;z-index:2;color:#fff;font-weight:700;
  font-size:.7cqw;padding:.26cqw .66cqw;border-radius:.7cqw;white-space:nowrap;line-height:1.25;
  background:rgba(18,26,48,.62);backdrop-filter:blur(2px);box-shadow:0 .2cqw .6cqw rgba(0,0,0,.2);}
.cb-card-t{position:absolute;left:4.3%;top:63.5%;font-size:.8854cqw;color:#111;font-weight:700;
  line-height:1.4;white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis;}
.cb-card-d{position:absolute;left:4.3%;top:73%;width:88%;font-size:.8333cqw;color:#555;font-weight:700;
  line-height:1.38;overflow:hidden;max-height:2.6em;}
.cb-card-v{position:absolute;left:37%;top:92.3%;font-size:.7812cqw;color:#333;font-weight:700;white-space:nowrap;}
.cb-card-l{position:absolute;left:66%;top:92.3%;font-size:.7812cqw;color:#333;font-weight:700;white-space:nowrap;}
/* 3번째 카드(index2): 배경 이모지가 더 우측이라 숫자도 우측 보정 */
.cb-card-v2{left:38.4%;}
.cb-card-l2{left:67.8%;}

/* ═══ 창작자 (시안 사진, 호버: 원형 ring) ═══ */
.cb-cr{position:absolute;z-index:10;display:block;text-decoration:none;cursor:pointer;}
.cb-cr::after{content:'';position:absolute;left:0;top:0;width:100%;aspect-ratio:1/1;border-radius:50%;
  box-shadow:0 0 0 0 rgba(255,255,255,0);opacity:0;
  transition:box-shadow .45s cubic-bezier(.16,.84,.34,1),opacity .45s ease,transform .45s ease;
  pointer-events:none;}
.cb-cr:hover::after{opacity:1;transform:scale(1.04);
  box-shadow:0 0 0 .3cqw rgba(255,255,255,.92),0 1cqw 2.4cqw rgba(20,30,60,.32);}
/* 가운데(4번째) 창작자는 원형이 더 크고 위에 있어 ring 위치 보정 */
.cb-cr-c::after{top:-1.04cqw;}

/* 분류 배지 유형별 컬러 (원본처럼) */
.cb-tag.t-video{background:#5B8FD6;}
.cb-tag.t-toon{background:#D86A6A;}
.cb-tag.t-novel{background:#2FB389;}
.cb-tag.t-publish{background:#D8A870;}
.cb-tag.t-music{background:#A87AD8;}
.cb-tag.t-perf{background:#D87A50;}
.cb-tag.t-exhibit{background:#E0743C;}
.cb-tag.t-character{background:#E08AB0;}
.cb-cr-name{position:absolute;top:81.5%;left:50%;transform:translateX(-50%);text-align:center;
  font-size:.9896cqw;color:#000;font-weight:700;line-height:1;white-space:nowrap;}
.cb-cr-sub{position:absolute;top:93%;left:50%;transform:translateX(-50%);text-align:center;
  font-size:.8333cqw;color:#333;font-weight:700;line-height:1;white-space:nowrap;}

/* ═══ 연도 배지 (균등 간격, 클릭시 활성 이동) ═══ */
.cb-year{position:absolute;z-index:8;transform:translate(-50%,-50%);color:#fff;font-weight:700;
  font-size:.9896cqw;cursor:pointer;white-space:nowrap;line-height:1;
  transition:background .25s,color .25s,padding .25s,box-shadow .25s;}
.cb-year:hover{opacity:.8;}
.cb-year.on{background:#fff;color:#6561c5;border-radius:1.6cqw;padding:.42cqw 1.15cqw;
  box-shadow:0 .5cqw 1.4cqw rgba(0,0,0,.16);opacity:1;}
/* 선택 연도 위를 따라다니는 노트+펜 아이콘 */
.cb-year-icon{position:absolute;z-index:9;width:2.55%;top:15.95%;transform:translateX(-50%);
  transition:left .35s cubic-bezier(.22,.61,.36,1);pointer-events:none;
  filter:drop-shadow(0 .25cqw .55cqw rgba(20,30,60,.2));}

/* 행사일정 탭 배지 (선택 탭에 흰 배지) */
.cb-etab2{position:absolute;z-index:8;transform:translate(-50%,-50%);color:#000;font-weight:700;
  font-size:.9896cqw;cursor:pointer;white-space:nowrap;line-height:1;
  transition:background .2s,color .2s,padding .2s,box-shadow .2s;}
.cb-etab2:hover{opacity:.72;}
.cb-etab2.on{background:#1F3A5F;color:#fff;border-radius:1.6cqw;padding:.42cqw 1.5cqw;
  box-shadow:0 .3cqw 1cqw rgba(29,56,99,.3);opacity:1;text-align:center;}

/* 가운데(4번째) 창작자: 원형이 더 커서 이름/분야를 그만큼 아래로 */
.cb-cr-c .cb-cr-name{top:86.8%;}
.cb-cr-c .cb-cr-sub{top:97.9%;}

/* ═══ 행사 D-day (원본: 알약 배경 없이 색 글자만) ═══ */
.cb-dday{color:#656565;}
.cb-dday.is-soon{color:#0d9387;}
.cb-dday.is-end{color:#656565;}

/* ═══ 콘텐츠 등록하기 버튼 호버 ═══ */
.cb-regbtn{transition:background .25s ease,box-shadow .25s ease;}
.cb-regbtn:hover{background:rgba(255,255,255,.16);box-shadow:0 .5cqw 1.6cqw rgba(0,0,0,.22);}

/* ═══ 추천 캐러셀 fade 전환 ═══ */
.cb-card{transition:opacity .45s ease,box-shadow .3s ease,transform .3s ease;}
.cb-card.cb-fade{opacity:0;}

@media (max-width:900px){
  body.home-page{overflow-x:auto;}
  .stage{width:1100px;max-width:none;}
}