/* TrendyPicker home magazine — /main/index + home_widget magazine iframe */

.tp-main-magazine.magazine-block {
  display: grid;
  width: 100%;
  gap: 22px;
  margin-right: 0;
  margin-bottom: 120px;
  margin-left: 0;
  padding: 36px 42px 38px;
  border: 1px solid #ece6f4;
  border-radius: 18px;
  background: #fff;
  box-sizing: border-box;
}

.tp-main-magazine__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.tp-main-magazine__head h2 {
  margin: 0;
  color: #171321;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
}

.tp-main-magazine__head a {
  flex: 0 0 auto;
  color: var(--purple, #7b2de2);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.tp-main-magazine__head a:hover,
.tp-main-magazine__head a:focus-visible {
  color: #5d19c7;
}

.tp-main-magazine__frame {
  display: block;
  width: 100%;
  min-height: 520px;
  border: 0;
  background: transparent;
}

html.tp-home-magazine-frame,
html.tp-home-magazine-frame body {
  width: 100%;
  min-width: 0;
  margin: 0;
  background: transparent;
}

.tp-home-magazine-widget {
  display: grid;
  grid-template-columns: minmax(0, 1.36fr) minmax(360px, 1fr);
  gap: 28px;
  width: 100%;
  color: #171321;
  font-family: var(
    --tp-font-family,
    "Pretendard Variable",
    Pretendard,
    sans-serif
  );
  box-sizing: border-box;
}

.tp-home-magazine-widget button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tp-home-magazine-feature,
.tp-home-magazine-item {
  min-width: 0;
}

.tp-home-magazine-feature__media,
.tp-home-magazine-item__media {
  display: block;
  overflow: hidden;
  width: 100%;
  border-radius: 8px;
  background: #eeeaf4;
}

.tp-home-magazine-feature__media {
  aspect-ratio: 1.6 / 1;
}

.tp-home-magazine-feature__media img,
.tp-home-magazine-item__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.tp-home-magazine-feature__media:hover img,
.tp-home-magazine-feature__media:focus-visible img,
.tp-home-magazine-item__media:hover img,
.tp-home-magazine-item__media:focus-visible img {
  transform: scale(1.025);
}

.tp-home-magazine-feature__copy {
  padding-top: 14px;
}

.tp-home-magazine-category {
  margin: 0 0 7px;
  color: var(--purple, #7b2de2);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.tp-home-magazine-feature h3,
.tp-home-magazine-item h3 {
  margin: 0;
}

.tp-home-magazine-feature h3 button {
  font-size: 23px;
  font-weight: 800;
  line-height: 1.25;
}

.tp-home-magazine-excerpt {
  display: -webkit-box;
  overflow: hidden;
  margin: 6px 0 0;
  color: #62596f;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-weight: 500;
}

.tp-home-magazine-widget time {
  display: block;
  margin-top: 10px;
  color: #887e96;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.tp-home-magazine-list {
  display: grid;
  align-content: start;
  gap: 20px;
}

.tp-home-magazine-list .tp-home-magazine-item:nth-child(n + 5) {
  display: none;
}

.tp-home-magazine-item {
  display: grid;
  grid-template-columns: minmax(136px, 180px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.tp-home-magazine-item__media {
  aspect-ratio: 1.55 / 1;
}

.tp-home-magazine-item h3 button {
  display: block;
  width: 100%;
  overflow: hidden;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}

.tp-home-magazine-item__title-text {
  display: -webkit-box;
  max-height: 2.6em;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.tp-home-magazine-item__excerpt {
  display: -webkit-box;
  overflow: hidden;
  margin: 5px 0 0;
  color: #62596f;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-weight: 500;
}

.tp-home-magazine-empty {
  display: grid;
  min-height: 300px;
  place-items: center;
  color: #766b84;
  font-family: var(
    --tp-font-family,
    "Pretendard Variable",
    Pretendard,
    sans-serif
  );
  font-size: 14px;
}

@media (max-width: 1120px) {
  .tp-home-magazine-list .tp-home-magazine-item:nth-child(n + 4) {
    display: none;
  }

  .tp-main-magazine.magazine-block {
    gap: 20px;
    margin-bottom: 72px;
    padding: 30px 28px 34px;
  }

  .tp-main-magazine__head h2 {
    font-size: 25px;
  }

  .tp-home-magazine-widget {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .tp-home-magazine-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .tp-home-magazine-item {
    display: block;
  }

  .tp-home-magazine-item__copy {
    padding-top: 10px;
  }

  .tp-home-magazine-item__excerpt {
    -webkit-line-clamp: 2;
  }

  /* The home cards render inside an iframe. Near the desktop breakpoint the
     iframe itself can be narrower than 1121px even though the parent page is
     desktop, so parent JS marks the widget and keeps the desktop composition. */
  .tp-home-magazine-widget[data-tp-layout="desktop"] {
    grid-template-columns: minmax(0, 1.36fr) minmax(360px, 1fr);
    gap: 28px;
  }

  .tp-home-magazine-widget[data-tp-layout="desktop"]
    .tp-home-magazine-list {
    grid-template-columns: none;
    gap: 20px;
  }

  .tp-home-magazine-widget[data-tp-layout="desktop"]
    .tp-home-magazine-list
    .tp-home-magazine-item:nth-child(4) {
    display: grid;
  }

  .tp-home-magazine-widget[data-tp-layout="desktop"]
    .tp-home-magazine-item {
    display: grid;
    grid-template-columns: minmax(136px, 180px) minmax(0, 1fr);
    gap: 18px;
  }

  .tp-home-magazine-widget[data-tp-layout="desktop"]
    .tp-home-magazine-item__copy {
    padding-top: 0;
  }

  .tp-home-magazine-widget[data-tp-layout="desktop"]
    .tp-home-magazine-item__excerpt {
    -webkit-line-clamp: 1;
  }
}

@media (max-width: 600px) {
  .tp-main-magazine.magazine-block {
    gap: 16px;
    margin-bottom: 54px;
    padding: 24px 18px 28px;
    border-radius: 15px;
  }

  .tp-main-magazine__head h2 {
    font-size: 22px;
  }

  .tp-main-magazine__head a {
    font-size: 12px;
  }

  .tp-home-magazine-widget {
    gap: 18px;
  }

  .tp-home-magazine-feature h3 button {
    font-size: 19px;
  }

  .tp-home-magazine-list {
    display: flex;
    overflow-x: auto;
    gap: 14px;
    padding: 0 0 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .tp-home-magazine-list::-webkit-scrollbar {
    display: none;
  }

  .tp-home-magazine-item {
    flex: 0 0 min(74vw, 270px);
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tp-home-magazine-feature__media img,
  .tp-home-magazine-item__media img {
    transition: none;
  }
}

/* ===== Card-by-card reveal =============================================
   These rules apply inside the board iframe, where this stylesheet is also
   loaded. The hidden state is gated on [data-tp-reveal-armed], which
   trendypicker-main-magazine.js sets from the parent page only once it has
   reached the cards and is able to reveal them again. If that never happens
   the attribute is absent and the cards render normally. */

.tp-home-magazine-widget[data-tp-reveal-armed] .tp-home-magazine-feature,
.tp-home-magazine-widget[data-tp-reveal-armed] .tp-home-magazine-item {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.78s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.78s cubic-bezier(0.22, 1, 0.36, 1);
  /* 0.17s apart: the five cards span ~1.5s, which still reads as a sequence
     without leaving the reader waiting on the last one. */
  transition-delay: calc(var(--reveal-index, 0) * 0.17s);
}

.tp-home-magazine-widget[data-tp-reveal-armed].is-inview .tp-home-magazine-feature,
.tp-home-magazine-widget[data-tp-reveal-armed].is-inview .tp-home-magazine-item {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .tp-home-magazine-widget[data-tp-reveal-armed] .tp-home-magazine-feature,
  .tp-home-magazine-widget[data-tp-reveal-armed] .tp-home-magazine-item {
    transform: none;
    transition: opacity 0.4s ease;
    transition-delay: 0s;
  }

  .tp-home-magazine-widget[data-tp-reveal-armed].is-inview .tp-home-magazine-feature,
  .tp-home-magazine-widget[data-tp-reveal-armed].is-inview .tp-home-magazine-item {
    transform: none;
  }
}