/* ================= BLOCK: BLOG CAROUSEL ================= */
.c-blog-carousel {
  position: relative;
  width: 100%;
  overflow-x: clip; 
  box-sizing: border-box;
  padding: var(--opad);
}

.c-blog-carousel * {
  box-sizing: border-box;
}

.c-blog-carousel__max-width {
  max-width: var(--max-w);
  margin: 0 auto;
}

.c-blog-carousel__wrap {
  display: flex;
  flex-direction: column;
  background: var(--bg-val);
  border-radius: var(--rad-tl-d) var(--rad-tr-d) var(--rad-br-d) var(--rad-bl-d);
  padding: var(--pt-d) var(--pr-d) var(--pb-d) var(--pl-d);
  gap: var(--gap-head-d);
  box-shadow: var(--wrap-shad-d);
  
  transform: rotate(var(--rot-d));
  transition: transform 0.4s ease;
  transform-origin: top right; 
}

.c-blog-carousel__wrap:hover {
  transform: rotate(0deg);
}

/* ================= 1. HEADER SECTION ================= */
.c-blog-carousel__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}

.c-blog-carousel__h-texts {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: var(--al-htxt-d);
}

.c-blog-carousel__h-tag {
  font-family: var(--ff-htg-d);
  font-size: var(--fs-htg-d);
  font-weight: var(--fw-htg-d);
  line-height: var(--lh-htg-d);
  color: var(--c-htag);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.c-blog-carousel__h-tit {
  font-family: var(--ff-hti-d);
  font-size: var(--fs-hti-d);
  font-weight: var(--fw-hti-d);
  line-height: var(--lh-hti-d);
  color: var(--c-htit);
  margin: 0;
}
.c-blog-carousel__h-tit em {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-style: italic;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.c-blog-carousel__h-btn {
  align-self: var(--b-as-d);
  width: var(--b-w-d);
  justify-content: var(--b-jc-d);
  
  display: inline-flex;
  align-items: center;
  gap: var(--gap-btn-d);
  min-height: 48px;
  padding: 16px 24px;
  border-radius: 800px;
  background-color: var(--c-bbg);
  color: var(--c-btxt);
  border: 1px solid var(--c-bbor);
  font-family: var(--ff-btn-d);
  font-size: var(--fs-btn-d);
  font-weight: var(--fw-btn-d);
  line-height: var(--lh-btn-d);
  text-decoration: none;
  transition: all 0.3s ease;
  flex-shrink: 0;
  text-align: center;
}
.c-blog-carousel__h-btn:hover { background-color: var(--c-bbg-h); color: var(--c-btxt-h); border-color: var(--c-bbor-h); }
.c-blog-carousel__h-btn:focus-visible { background-color: var(--c-bbg-f); color: var(--c-btxt-f); border-color: var(--c-bbor-f); outline: none; }
.c-blog-carousel__h-btn:focus:not(:focus-visible) { outline: none; }

.c-blog-carousel__h-btn--mob { display: none; }

/* ================= 2. CAROUSEL BODY ================= */
.c-blog-carousel__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-main-d);
}

.c-blog-carousel__track {
  position: relative;
  width: 100%;
  height: var(--tk-h-d);
  margin: var(--tk-mt-d) var(--tk-mr-d) var(--tk-mb-d) var(--tk-ml-d);
  overflow: hidden; 
}

.c-blog-carousel__card {
  position: absolute;
  top: 0;
  left: 0; 
  height: 100%; 
  width: var(--cw-d); 
  max-width: 100vw; 
  background-color: var(--c-cbg);
  border-radius: var(--crad-tl-d) var(--crad-tr-d) var(--crad-br-d) var(--crad-bl-d);
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateX(calc(var(--offset, 0) * var(--cdist-d)));
  
  display: flex;
  flex-direction: column;
}

.c-blog-carousel__card[data-pos="0"],
.c-blog-carousel__card[data-pos="1"],
.c-blog-carousel__card[data-pos="2"] {
  opacity: 1;
  pointer-events: auto;
  z-index: 10;
  box-shadow: var(--c-cshad-d);
  visibility: visible;
}

.c-blog-carousel__card[data-pos="-1"] {
  opacity: 1;
  pointer-events: none;
  z-index: 5;
  visibility: visible;
}

.c-blog-carousel__card:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="2"]):not([data-pos="-1"]) {
  opacity: 0; 
  pointer-events: none;
  z-index: 1;
  visibility: hidden; 
}

/* ================= IMAGE AT 1/3 WIDTH (33.333%) ================= */
.c-blog-carousel__card-img-wrap {
  width: 100%;
  height: 40%;
  flex: 0 0 40%;
  position: relative;
}

.c-blog-carousel__img-overlay-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background-color: var(--c-ctagbg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 800px;
  padding: 12px 16px;
  font-family: var(--ff-ctg-d);
  font-size: var(--fs-ctg-d);
  font-weight: var(--fw-ctg-d);
  line-height: var(--lh-ctg-d);
  color: var(--c-ctag);
  letter-spacing: 2px;
  text-transform: uppercase;
  z-index: 2;
}

.c-blog-carousel__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-blog-carousel__card-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.c-blog-carousel__card-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.c-blog-carousel__card-date,
.c-blog-carousel__card-dot,
.c-blog-carousel__card-read {
  font-family: var(--ff-cin-d);
  font-size: var(--fs-cin-d);
  line-height: var(--lh-cin-d);
  color: var(--c-cinfo);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.c-blog-carousel__card-date { font-weight: var(--fw-cin-d); }
.c-blog-carousel__card-read { font-weight: 400; }

.c-blog-carousel__card-text-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--gap-tw-d);
  margin-bottom: var(--mb-tw-d);
}

/* ================= CLAMPING SYSTEM (ELLIPSIS) ================= */
.c-blog-carousel__card-tit,
.c-blog-carousel__card-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.c-blog-carousel__card-tit {
  -webkit-line-clamp: var(--clamp-tit-d);
  font-family: var(--ff-cti-d);
  font-size: var(--fs-cti-d);
  font-weight: var(--fw-cti-d);
  line-height: var(--lh-cti-d);
  color: var(--c-ctit);
  margin: 0;
}

.c-blog-carousel__card-desc {
  -webkit-line-clamp: var(--clamp-desc-d);
  font-family: var(--ff-cde-d);
  font-size: var(--fs-cde-d);
  font-weight: var(--fw-cde-d);
  line-height: var(--lh-cde-d);
  color: var(--c-cdesc);
  margin: 0;
}
.c-blog-carousel__card-desc p { 
  display: inline;
  margin: 0; 
}

.c-blog-carousel__card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-lnk-d);
  font-size: var(--fs-lnk-d);
  font-weight: var(--fw-lnk-d);
  line-height: var(--lh-lnk-d);
  color: var(--c-clnk);
  text-decoration: none;
  padding: 4px 0;
  margin-top: auto; 
  align-self: flex-end; 
}
.c-blog-carousel__card-link span {
  border-bottom: 1px solid var(--c-clnk);
  padding: 8px 0;
}
.c-blog-carousel__card-link svg path {
  stroke: var(--c-clnk);
}
.c-blog-carousel__card-link:focus-visible { outline: 2px solid var(--c-clnk); outline-offset: 4px; border-radius: 4px; }
.c-blog-carousel__card-link:focus:not(:focus-visible) { outline: none; }

/* ================= 3. NAV CONTROLS ================= */
.c-blog-carousel__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.c-blog-carousel__arrow {
  width: 48px;
  height: 48px;
  border-radius: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: var(--c-abg);
  border: 1px solid var(--c-abo);
  color: var(--c-atx);
  transition: all 0.3s ease;
}
.c-blog-carousel__arrow:hover { background-color: var(--c-abg-h); border-color: var(--c-abo-h); color: var(--c-atx-h); }
.c-blog-carousel__arrow:focus-visible { background-color: var(--c-abg-f); border-color: var(--c-abo-f); color: var(--c-atx-f); outline: none; }
.c-blog-carousel__arrow:focus:not(:focus-visible) { outline: none; }

.c-blog-carousel__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.c-blog-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 800px;
  background-color: var(--c-dot);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}
.c-blog-carousel__dot:hover { background-color: var(--c-doth); }
.c-blog-carousel__dot.is-active { width: 32px; background-color: var(--c-dota); }
.c-blog-carousel__dot:focus-visible { outline: 2px solid var(--c-dota); outline-offset: 2px; }
.c-blog-carousel__dot:focus:not(:focus-visible) { outline: none; }

/* ================= TABLET (<= 1024px) ================= */
@media (max-width: 1024px) {
  .c-blog-carousel {
    padding: var(--opt-t) var(--opr-t) var(--opb-t) var(--opl-t);
  }

  .c-blog-carousel__wrap {
    border-radius: var(--rad-tl-t) var(--rad-tr-t) var(--rad-br-t) var(--rad-bl-t);
    padding: var(--pt-t) var(--pr-t) var(--pb-t) var(--pl-t);
    gap: var(--gap-head-t);
    box-shadow: var(--wrap-shad-t);
    transform: rotate(var(--rot-t));
  }

  .c-blog-carousel__h-texts { text-align: var(--al-htxt-t); }
  
  .c-blog-carousel__h-btn {
    align-self: var(--b-as-t); width: var(--b-w-t); justify-content: var(--b-jc-t);
    gap: var(--gap-btn-t);
    font-family: var(--ff-btn-t); font-size: var(--fs-btn-t); font-weight: var(--fw-btn-t); line-height: var(--lh-btn-t);
  }

  .c-blog-carousel__h-tag { font-family: var(--ff-htg-t); font-size: var(--fs-htg-t); font-weight: var(--fw-htg-t); line-height: var(--lh-htg-t); }
  .c-blog-carousel__h-tit { font-family: var(--ff-hti-t); font-size: var(--fs-hti-t); font-weight: var(--fw-hti-t); line-height: var(--lh-hti-t); }
  
  .c-blog-carousel__body { gap: var(--gap-main-t); }

  .c-blog-carousel__track {
    height: var(--tk-h-t);
    margin: var(--tk-mt-t) var(--tk-mr-t) var(--tk-mb-t) var(--tk-ml-t);
  }

  .c-blog-carousel__card {
    width: var(--cw-t);
    border-radius: var(--crad-tl-t) var(--crad-tr-t) var(--crad-br-t) var(--crad-bl-t);
    transform: translateX(calc(var(--offset, 0) * var(--cdist-t)));
  }

  .c-blog-carousel__card[data-pos="0"],
  .c-blog-carousel__card[data-pos="1"] {
    opacity: 1;
    pointer-events: auto;
    z-index: 10;
    box-shadow: var(--c-cshad-t);
    visibility: visible;
  }

  .c-blog-carousel__card[data-pos="-1"] {
    opacity: 1;
    pointer-events: none;
    z-index: 5;
    visibility: visible;
  }

  .c-blog-carousel__card:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="-1"]) {
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    visibility: hidden;
  }
  
  .c-blog-carousel__img-overlay-tag { font-family: var(--ff-ctg-t); font-size: var(--fs-ctg-t); font-weight: var(--fw-ctg-t); line-height: var(--lh-ctg-t); }

  .c-blog-carousel__card-date,
  .c-blog-carousel__card-dot,
  .c-blog-carousel__card-read { font-family: var(--ff-cin-t); font-size: var(--fs-cin-t); line-height: var(--lh-cin-t); }
  .c-blog-carousel__card-date { font-weight: var(--fw-cin-t); }

  .c-blog-carousel__card-text-wrap { gap: var(--gap-tw-t); margin-bottom: var(--mb-tw-t); }

  .c-blog-carousel__card-tit {
    -webkit-line-clamp: var(--clamp-tit-t);
    font-family: var(--ff-cti-t); font-size: var(--fs-cti-t); font-weight: var(--fw-cti-t); line-height: var(--lh-cti-t); 
  }
  .c-blog-carousel__card-desc { 
    -webkit-line-clamp: var(--clamp-desc-t);
    font-family: var(--ff-cde-t); font-size: var(--fs-cde-t); font-weight: var(--fw-cde-t); line-height: var(--lh-cde-t); 
  }

  .c-blog-carousel__card-link { font-family: var(--ff-lnk-t); font-size: var(--fs-lnk-t); font-weight: var(--fw-lnk-t); line-height: var(--lh-lnk-t); }
}

/* ================= MOBILE (<= 768px) ================= */
@media (max-width: 768px) {
  .c-blog-carousel {
    padding: var(--opt-m) var(--opr-m) var(--opb-m) var(--opl-m);
  }

  .c-blog-carousel__wrap {
    border-radius: var(--rad-tl-m) var(--rad-tr-m) var(--rad-br-m) var(--rad-bl-m);
    padding: var(--pt-m) var(--pr-m) var(--pb-m) var(--pl-m);
    gap: var(--gap-head-m);
    box-shadow: var(--wrap-shad-m);
    transform: rotate(var(--rot-m));
  }

  .c-blog-carousel__header { flex-direction: column; gap: 24px; }
  .c-blog-carousel__h-texts { text-align: var(--al-htxt-m); }

  .c-blog-carousel__h-btn--desk { display: none; }
  .c-blog-carousel__h-btn--mob {
    display: inline-flex;
    align-self: var(--b-as-m); width: var(--b-w-m); justify-content: var(--b-jc-m); gap: var(--gap-btn-m);
    font-family: var(--ff-btn-m); font-size: var(--fs-btn-m); font-weight: var(--fw-btn-m); line-height: var(--lh-btn-m);
    margin-top: 16px; 
  }

  .c-blog-carousel__body { gap: var(--gap-main-m); }

  .c-blog-carousel__h-tag { font-family: var(--ff-htg-m); font-size: var(--fs-htg-m); font-weight: var(--fw-htg-m); line-height: var(--lh-htg-m); }
  .c-blog-carousel__h-tit { font-family: var(--ff-hti-m); font-size: var(--fs-hti-m); font-weight: var(--fw-hti-m); line-height: var(--lh-hti-m); }
  
  .c-blog-carousel__track { 
    height: var(--tk-h-m); 
    margin: var(--tk-mt-m) var(--tk-mr-m) var(--tk-mb-m) var(--tk-ml-m);
    width: calc(100% + var(--pr-m)); 
    overflow: visible; 
  }

  .c-blog-carousel__card {
    width: var(--cw-m);
    border-radius: var(--crad-tl-m) var(--crad-tr-m) var(--crad-br-m) var(--crad-bl-m);
    transform: translateX(calc(var(--offset, 0) * var(--cdist-m)));
  }
  
  .c-blog-carousel__card[data-pos="0"], 
  .c-blog-carousel__card[data-pos="1"] { 
    opacity: 1; 
    z-index: 10;
    box-shadow: var(--c-cshad-m); 
    pointer-events: auto;
    visibility: visible;
  }
  
  .c-blog-carousel__card[data-pos="-1"] { 
    opacity: 1; 
    z-index: 5;
    pointer-events: none;
    visibility: visible;
  }

  .c-blog-carousel__card:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="-1"]) { 
    opacity: 0; 
    z-index: 1;
    pointer-events: none;
    visibility: hidden;
  }

  .c-blog-carousel__img-overlay-tag { font-family: var(--ff-ctg-m); font-size: var(--fs-ctg-m); font-weight: var(--fw-ctg-m); line-height: var(--lh-ctg-m); }

  .c-blog-carousel__card-date,
  .c-blog-carousel__card-dot,
  .c-blog-carousel__card-read { font-family: var(--ff-cin-m); font-size: var(--fs-cin-m); line-height: var(--lh-cin-m); }
  .c-blog-carousel__card-date { font-weight: var(--fw-cin-m); }

  .c-blog-carousel__card-text-wrap { gap: var(--gap-tw-m); margin-bottom: var(--mb-tw-m); }

  .c-blog-carousel__card-tit { 
    -webkit-line-clamp: var(--clamp-tit-m);
    font-family: var(--ff-cti-m); font-size: var(--fs-cti-m); font-weight: var(--fw-cti-m); line-height: var(--lh-cti-m); 
  }
  .c-blog-carousel__card-desc { 
    -webkit-line-clamp: var(--clamp-desc-m);
    font-family: var(--ff-cde-m); font-size: var(--fs-cde-m); font-weight: var(--fw-cde-m); line-height: var(--lh-cde-m); 
  }
  
  .c-blog-carousel__card-link { font-family: var(--ff-lnk-m); font-size: var(--fs-lnk-m); font-weight: var(--fw-lnk-m); line-height: var(--lh-lnk-m); }

  .c-blog-carousel__dots { display: none; }
  .c-blog-carousel__nav { flex-wrap: wrap; }
}