/* ── 데모 레이아웃 (실제 사용 시 제거) ── */
body.ev-demo-wrap {
  background: #f5f5f5;
  margin: 0;
  padding: 40px 0;
}

.demo-label-wrap {
  max-width: 750px;
  margin: 0 auto 8px;
  padding: 0 24px;
}

.demo-label {
  font-size: 11px;
  font-weight: 700;
  color: #999;
  letter-spacing: .06em;
}

.demo-code {
  font-size: 11px;
  font-family: monospace;
  color: #5B4FBE;
  background: #EEEDFE;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-left: 8px;
}

.demo-gap { height: 24px; }

/* ==================================================
   EventKit | ev-notice 컴포넌트 스타일
   Variants: ev-notice (기본형) / ev-notice--accordion (아코디언형)
   ================================================== */

/* ── CSS 변수 (커스터마이징 영역) ── */
.ev-notice {
  --notice-bg:           #ffffff;
  --notice-title-color:  #1a1a1a;
  --notice-text-color:   #333333;
  --notice-bullet-color: #1a1a1a;
  --notice-toggle-color: #000000;
  --notice-font-size:    14px;
  --notice-padding-v:    40px;
  --notice-padding-h:    24px;
}

/* ── 공통 구조 ── */
.ev-notice {width: 100%; background: var(--notice-bg); padding: var(--notice-padding-v) var(--notice-padding-h); box-sizing: border-box;}
.ev-notice__inner {max-width: 750px; margin: 0 auto;}
.ev-notice__title {font-size: 15px; font-weight: 700; color: var(--notice-title-color); margin: 0 0 14px 0; line-height: 1.4;}
.ev-notice__list {list-style: none; padding: 0; margin: 0;}
.ev-notice__item {font-size: var(--notice-font-size); color: var(--notice-text-color); line-height: 1.7; padding: 4px 0 4px 18px; position: relative; word-break: keep-all;}
.ev-notice__item::before {content: "•"; position: absolute; left: 0; top: 4px; color: var(--notice-bullet-color); font-size: 14px; line-height: 1.7;}

/* ── ev-notice--accordion (아코디언형) ── */
.ev-notice--accordion .ev-notice__header {display: flex; align-items: center; justify-content: center; gap: 6px; padding-bottom: 16px; cursor: pointer; user-select: none;}
.ev-notice--accordion .ev-notice__title {text-align: center; margin-bottom: 0;}
.ev-notice--accordion .ev-notice__icon {font-size: 16px; color: var(--notice-toggle-color); flex-shrink: 0;}
.ev-notice--accordion .ev-notice__toggle {font-size: 14px; color: var(--notice-toggle-color); flex-shrink: 0; transition: transform 0.2s ease; height: 8px; display: flex; justify-content: center; align-items: center;}
.ev-notice--accordion.is-closed .ev-notice__toggle {transform: rotate(180deg);}
.ev-notice--accordion.is-closed .ev-notice__list {display: none;}


/* ==================================================
   EventKit | ev-slide 컴포넌트 스타일
   Variants: ev-slide--stack (스택형) / ev-slide--row (로우형)
   ================================================== */
.ev-slide {
  --slide-bg: #D2F1FF;
  --slide-title-color: #007FB8;
  --slide-sub-color:   #000000;
  --slide-text-color:  #000000;
  --slide-pagination-bg: rgba(0, 0, 0, 0.3);
  --slide-pagination-text: #ffffff;
  --slide-title-font: 'Pretendard', sans-serif;
  --slide-title-font-size:    30px;
  --slide-title-font-size-pc: 50px;
  --slide-sub-font-size:      18px;
  --slide-sub-font-size-pc:   36px;
  --swiper-theme-color: rgba(0, 0, 0, 0.3);
}

.ev-slide {background: var(--slide-bg); padding: 60px 0;}
.ev-slide__text-wrap {margin: 0 0 30px 0;}
.ev-slide__title {font-family: var(--slide-title-font); font-size: var(--slide-title-font-size); font-weight: 700; margin: 0 0 10px 0; text-align: center; letter-spacing: -1.5px; color: var(--slide-title-color); line-height: 1.2;}
.ev-slide__sub {font-size: var(--slide-sub-font-size); color: var(--slide-sub-color); text-align: center; margin: 0; letter-spacing: -1px; font-weight: 500; line-height: 1.4;}

/* 스택형(.ev-slide--stack) */
.ev-slide__swiper-wrap {width: 100%; margin: 0 auto; position: relative;}
.swiper.ev-slide--stack {width: 100%; padding: 0px 0 160px 0;}
.swiper.ev-slide--stack[data-pagination="fraction"] {padding: 50px 0 120px 0;}
.swiper.ev-slide--stack .swiper-wrapper {position: relative;}
.swiper.ev-slide--stack .swiper-wrapper .swiper-slide {width: 250px; text-align: center;}
.swiper.ev-slide--stack .swiper-wrapper .swiper-slide .ev-slide__item-media {border-radius: 10px; width: 250px; margin: 0 auto; overflow: hidden; border: 1px solid #cfcfcf; background-color: #fff;}
.ev-slide__swiper-wrap .ev-slide__swiper-next.swiper-button-disabled, .ev-slide__swiper-wrap .ev-slide__swiper-prev.swiper-button-disabled {display: none;}
.swiper.ev-slide--stack .ev-slide__item-meta {width: 100%; margin: 0 auto; text-align: center; position: absolute; top: 270px; left: 50%; transform: translateX(-50%); opacity: 0; color: var(--slide-text-color); line-height: 1.4;}
.swiper.ev-slide--stack .swiper-slide-active .ev-slide__item-meta {opacity: 1; transition: opacity 0.5s;}
.swiper.ev-slide--stack .ev-slide__item-title {font-size: 20px; font-weight: bold; letter-spacing: -1px; margin-bottom: 5px; line-height: 1.2;}
.swiper.ev-slide--stack .ev-slide__item-author {font-size: 15px;}
.swiper.ev-slide--stack .ev-slide__item-category {display: inline-block; font-size: 14px; border: 1px solid var(--slide-text-color); padding: 4px 10px; border-radius: 20px; margin: 0 0 5px 0;}
.swiper.ev-slide--stack .ev-slide__pagination {width: 100%; display: flex; justify-content: center; align-items: center; position: absolute; z-index: 10; bottom: 0;}
.swiper.ev-slide--stack[data-pagination="fraction"] .ev-slide__pagination {width: 100%; display: flex; gap: 5px; justify-content: flex-end; padding: 0 10px; box-sizing: border-box;}

/* 로우형(.ev-slide--row) */
.ev-slide--row .swiper.ev-slide--row {width:100%;}
.ev-slide--row .swiper.ev-slide--row[data-pagination="fraction"] {padding: 50px 0 0 0; margin-bottom: -20px;}
.ev-slide--row .swiper.ev-slide--row[data-pagination="fraction"] .swiper-slide {padding-bottom: 140px;}
.ev-slide--row .swiper.ev-slide--row .swiper-wrapper {display: flex; align-items:center;}
.ev-slide--row .swiper.ev-slide--row .swiper-slide { width:200px; text-align: center; transform-origin: center; height: auto; padding-bottom:160px; position: relative; }
.ev-slide--row .swiper.ev-slide--row .swiper-slide img { width:200px; transform: scale(0.8); transition: transform 0.5s; background-color: #fff; border-radius: 10px; border: 1px solid #cfcfcf;}
.ev-slide--row .swiper.ev-slide--row .swiper-slide-active img {width: 200px; transform: scale(1); box-shadow:0 10px 15px rgba(0,0,0,0.4);}
.ev-slide--row .swiper.ev-slide--row .swiper-slide .ev-slide__item-meta {position: absolute; top:220px; left:-30%; width:160%; opacity:0; color: var(--slide-text-color);}
.ev-slide--row .swiper.ev-slide--row .ev-slide__item-title {font-size: 20px; font-weight: bold; letter-spacing: -1px; margin-bottom: 5px; line-height: 1.2;}
.ev-slide--row .swiper.ev-slide--row .ev-slide__item-author {font-size: 15px;}
.ev-slide--row .swiper.ev-slide--row .ev-slide__item-category {display: inline-block; font-size: 14px; border: 1px solid var(--slide-text-color); padding: 4px 10px; border-radius: 20px; margin: 0 0 5px 0;}
.ev-slide--row .swiper.ev-slide--row .swiper-slide-active .ev-slide__item-meta { opacity:1; transform: translateY(0); transition:all 1s; transition-delay:0.3s;}
.ev-slide--row .swiper.ev-slide--row .ev-slide__pagination {width: 100%; display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; padding: 0; z-index: 10;}
.ev-slide--row .swiper.ev-slide--row a {text-decoration: none;}
.ev-slide--row .swiper.ev-slide--row .ev-slide__swiper-next, .ev-slide--row .swiper.ev-slide--row .ev-slide__swiper-prev {display: none;}

/* 네비게이션 버튼: 모바일 숨김 */
.ev-slide__swiper-wrap .ev-slide__swiper-next, .ev-slide__swiper-wrap .ev-slide__swiper-prev,
.ev-slide--row .ev-slide__swiper-next, .ev-slide--row .ev-slide__swiper-prev {display: none;}

/* pagination 공통: fraction-type / 기본(불릿) 호환 */
.ev-slide .swiper[data-pagination="fraction"] .ev-slide__pagination {display: flex; gap: 5px; justify-content: flex-end; padding: 0 10px; box-sizing: border-box; top: 0; bottom: auto;}
.ev-slide .swiper[data-pagination="fraction"] .ev-slide__pagination .swiper-pagination.swiper-pagination-fraction {display: block; width: auto; min-width: 62px; padding: 0 10px; line-height: 30px; background: var(--slide-pagination-bg); font-size: 13px; color: var(--slide-pagination-text); border-radius: 50px; box-sizing: border-box; text-align: center; position: relative; bottom: 0;}
.ev-slide .swiper[data-pagination="fraction"] .ev-slide__pagination .ev-slide__autoplay-toggle {width: 30px; height: 30px; background-color: var(--slide-pagination-bg, rgba(0,0,0,0.3)); border-radius: 50%; opacity: 1; border: 0; display: flex; align-items: center; justify-content: center; padding: 0;}
.ev-slide .swiper[data-pagination="fraction"] .ev-slide__pagination .ev-slide__autoplay-toggle .icon-pause {display: block;}
.ev-slide .swiper[data-pagination="fraction"] .ev-slide__pagination .ev-slide__autoplay-toggle .icon-play {display: none;}
.ev-slide .swiper[data-pagination="fraction"] .ev-slide__pagination .ev-slide__autoplay-toggle.stop .icon-pause {display: none;}
.ev-slide .swiper[data-pagination="fraction"] .ev-slide__pagination .ev-slide__autoplay-toggle.stop .icon-play {display: block;}

.ev-slide .swiper:not([data-pagination="fraction"]) .ev-slide__pagination .swiper-pagination {position: static; display: flex; width: auto; }
.ev-slide .swiper:not([data-pagination="fraction"]) .ev-slide__pagination .swiper-pagination-bullet {height: 2px; background: var(--slide-pagination-bg); border-radius:0; margin:0!important; border:0; width:30px; opacity: 1;}
.ev-slide .swiper:not([data-pagination="fraction"]) .ev-slide__pagination .swiper-pagination-bullet-active {height: 2px; background: var(--slide-pagination-active-color, #00a3b3); border-radius:0; border:0;}
.ev-slide .swiper:not([data-pagination="fraction"]) .ev-slide__pagination .ev-slide__autoplay-toggle {width: 30px; height: 21px; background-color: transparent; border: 0; display: flex; align-items: center; justify-content: center; padding: 0;}
.ev-slide .swiper:not([data-pagination="fraction"]) .ev-slide__pagination .ev-slide__autoplay-toggle .icon-pause {display: block;}
.ev-slide .swiper:not([data-pagination="fraction"]) .ev-slide__pagination .ev-slide__autoplay-toggle .icon-play {display: none;}
.ev-slide .swiper:not([data-pagination="fraction"]) .ev-slide__pagination .ev-slide__autoplay-toggle.stop .icon-pause {display: none;}
.ev-slide .swiper:not([data-pagination="fraction"]) .ev-slide__pagination .ev-slide__autoplay-toggle.stop .icon-play {display: block;}

@media screen and (min-width: 750px) {
  .ev-slide {background: var(--slide-bg); padding: 80px 0;}
  .ev-slide__text-wrap {margin: 0 0 30px 0;}
  .ev-slide__title {font-weight: 700; margin: 0 0 10px 0; text-align: center; letter-spacing: -1.5px; color: var(--slide-title-color);  --slide-title-font-size: var(--slide-title-font-size-pc);}
  .ev-slide__sub {text-align: center; margin: 0; letter-spacing: -1px; font-weight: 500; --slide-sub-font-size: var(--slide-sub-font-size-pc);}

  .ev-slide__swiper-wrap {width: 930px; margin: 0 auto; position: relative; padding: 0 50px;}
  .swiper.ev-slide--stack {width: 800px; margin: 0 auto; padding: 50px 0 200px 0;}
  .swiper.ev-slide--stack[data-pagination="fraction"] {padding: 50px 0 150px 0;}
  .swiper.ev-slide--stack .swiper-wrapper .swiper-slide {width: 350px; padding-bottom: 0;}
  .swiper.ev-slide--stack .swiper-wrapper .swiper-slide .ev-slide__item-media {width: 350px; max-height: 350px;}
  .swiper.ev-slide--stack .swiper-wrapper .swiper-slide .ev-slide__item-media img {width: 100%;}
  .ev-slide__swiper-wrap .ev-slide__swiper-next, .ev-slide__swiper-wrap .ev-slide__swiper-prev {display: block; top:calc(50% - 40px)!important;}
  .swiper.ev-slide--stack .ev-slide__item-meta {width: 750px; margin: 0 auto; top: 380px;}
  .swiper.ev-slide--stack .ev-slide__item-title {font-size: 30px; font-weight: bold; letter-spacing: -1px; margin-bottom: 5px; line-height: 1.2;}
  .swiper.ev-slide--stack .ev-slide__item-author {font-size: 20px;}
  .swiper.ev-slide--stack .ev-slide__item-category {font-size: 18px; margin: 0 0 10px 0;}

  .ev-slide--row .swiper.ev-slide--row {width:880px; padding: 50px 0 0 0;}
  .ev-slide--row .swiper.ev-slide--row[data-pagination="fraction"] {padding: 70px 0 0 0; margin-bottom: -30px;}
  .ev-slide--row .swiper.ev-slide--row .swiper-slide {width:250px; padding-bottom:200px;}
  .ev-slide--row .swiper.ev-slide--row .swiper-slide-active {width: 250px;}
  .ev-slide--row .swiper.ev-slide--row .swiper-slide img { width: 250px; max-height: 250px; transform: scale(0.75); transition: transform 0.5s;}
  .ev-slide--row .swiper.ev-slide--row .swiper-slide-active img {width: 250px; transform: scale(1);}
  .ev-slide--row .swiper.ev-slide--row .swiper-slide .ev-slide__item-meta {left:-20%; width:140%; top: 280px;}
  .ev-slide--row .swiper.ev-slide--row .swiper-slide .ev-slide__item-title {font-size: 30px; font-weight: bold; letter-spacing: -1px; margin-bottom: 5px; line-height: 1.2;}
  .ev-slide--row .swiper.ev-slide--row .swiper-slide .ev-slide__item-author {font-size: 20px;}
  .ev-slide--row .swiper.ev-slide--row .swiper-slide .ev-slide__item-category {font-size: 18px; margin: 0 0 10px 0;}
  .ev-slide--row .swiper.ev-slide--row .ev-slide__swiper-next, .ev-slide--row .swiper.ev-slide--row .ev-slide__swiper-prev {display: block; top: 175px!important;}
  .ev-slide--row .swiper.ev-slide--row[data-pagination="fraction"] .ev-slide__swiper-next, .ev-slide--row .swiper.ev-slide--row[data-pagination="fraction"] .ev-slide__swiper-prev {display: block; top: 190px!important;}
}

/* ==================================================
   EventKit | ev-thumbnail 컴포넌트 스타일
   Variants: ev-thumbnail--author (작가형) / ev-thumbnail--series (작품형)
   ================================================== */

/* ── CSS 변수 (커스터마이징 영역) ── */
.ev-thumbnail {
  --thumb-bg:            #ffffff;
  --thumb-title-color:   #1a1a1a;
  --thumb-sub-color:     #555555;
  --thumb-title-font:         'Pretendard', sans-serif;
  --thumb-title-font-size:    30px;
  --thumb-title-font-size-pc: 40px;
  --thumb-sub-font-size:      18px;
  --thumb-sub-font-size-pc:   30px;
  --thumb-columns:       4;
  --thumb-img-radius:    12px;
  --thumb-category-color:     #333333;
  --thumb-name-color:    #1a1a1a;
  --thumb-author-color:  #888888;
  --thumb-btn-bg:        #1a1a1a;
  --thumb-btn-color:     #ffffff;
  --thumb-btn-radius:    6px;
  --thumb-cta-bg:        #1a1a1a;
  --thumb-cta-color:     #ffffff;
}

/* ── 공통 구조 ── */
.ev-thumbnail {width: 100%; background: var(--thumb-bg); padding: 60px 0; box-sizing: border-box;}
.ev-thumbnail__inner {max-width: 750px; margin: 0 auto; padding: 0 20px;}
.ev-thumbnail__text-wrap {margin: 0 0 30px 0;}
.ev-thumbnail__title {font-family: var(--thumb-title-font); font-size: var(--thumb-title-font-size); font-weight: 700; margin: 0 0 10px 0; text-align: center; letter-spacing: -1.5px; color: var(--thumb-title-color); line-height: 1.2;}
.ev-thumbnail__sub {font-size: var(--thumb-sub-font-size); text-align: center; margin: 0; letter-spacing: -1px; font-weight: 500; line-height: 1.4; color: var(--thumb-sub-color);}
.ev-thumbnail__grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 16px; list-style: none; padding: 0; margin: 0;}
.ev-thumbnail__item {display: flex; flex-direction: column; align-items: center; gap: 5px;}
.ev-thumbnail__img {width: 110px; height: 110px; border-radius: var(--thumb-img-radius); object-fit: cover; display: block; background: #dddddd; border: 1px solid #e0e0e0;}
.ev-thumbnail__category {font-size: 12px; color: var(--thumb-category-color); border: 1px solid; border-color: var(--thumb-category-color); padding: 3px 10px; border-radius: 20px; display: inline-block; margin: 5px 0;}
.ev-thumbnail__name {font-size: 15px; font-weight: 700; color: var(--thumb-name-color); text-align: center; line-height: 1.4; word-break: keep-all;}
.ev-thumbnail__author {font-size: 12px; color: var(--thumb-author-color); text-align: center;}
.ev-thumbnail__btn {font-size: 14px; font-weight: 700; color: var(--thumb-btn-color); background: var(--thumb-btn-bg); border: none; border-radius: var(--thumb-btn-radius); padding: 6px 16px; cursor: pointer; white-space: nowrap; margin: 5px 0;}
.ev-thumbnail__btn:hover {opacity: 0.85;}
.ev-thumbnail__cta {display: block; min-width: 250px; margin: 50px auto 0 auto; padding: 16px; background: var(--thumb-cta-bg); color: var(--thumb-cta-color); font-size: 20px; font-weight: 700; text-align: center; border-radius: 40px; border: none; cursor: pointer;}
.ev-thumbnail__cta:hover {opacity: 0.9;}
.ev-thumbnail__note {font-size: 13px; color: var(--thumb-author-color); text-align: center; margin-top: 10px;}

/* ── ev-thumbnail--author (작가형) ── */
.ev-thumbnail--author {--thumb-img-radius: 50%; --thumb-columns: 4;}
.ev-thumbnail--author .ev-thumbnail__img {border-radius: 50%;}

/* ── ev-thumbnail--series (작품형) ── */
.ev-thumbnail--series {--thumb-img-radius: 12px; --thumb-columns: 3;}

@media (min-width: 750px) {
  .ev-thumbnail {padding: 80px 0;}
  .ev-thumbnail__inner {max-width: 750px; margin: 0 auto;}
  .ev-thumbnail__grid {grid-template-columns: repeat(var(--thumb-columns), 1fr);}
  .ev-thumbnail__img {width: 160px; height: 160px;}
  .ev-thumbnail__text-wrap {margin: 0 0 50px 0;}
  .ev-thumbnail__title {font-size: var(--thumb-title-font-size-pc); font-weight: 700; margin: 0 0 10px 0; text-align: center; letter-spacing: -1.5px; color: var(--thumb-title-color);}
  .ev-thumbnail__sub {font-size: var(--thumb-sub-font-size-pc); text-align: center; margin: 0; letter-spacing: -1px; font-weight: 500;}
  .ev-thumbnail__name {font-size: 18px;}
  .ev-thumbnail__category {font-size: 15px; padding: 0 10px; line-height: 28px;}
  .ev-thumbnail__author {font-size: 15px;}
  .ev-thumbnail__btn {font-size: 15px; padding: 6px 16px;}
  .ev-thumbnail__cta {min-width: 250px; margin: 50px auto 0 auto; padding: 16px 30px; font-size: 24px; border-radius: 40px;}

  .ev-thumbnail--author .ev-thumbnail__img {width: 130px; height: 130px;}
}