/*
 * PC main responsive boundary
 * - desktop: 1280px and wider (the existing desktop CSS remains authoritative)
 * - compact PC/tablet: below 1280px (this file supplies one fluid layout)
 * - narrow desktop windows keep the current URL and continue using this layout.
 */

body.page--main .freeclass-floating-btn {
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

body.page--main .freeclass-floating-btn.is-context-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 16px);
}

@media not all and (min-width: 768px) {
  html body.page--main {
    --main-character-right: clamp(28px, 7vw, 100px);
    --main-character-width: clamp(220px, 25vw, 300px);
    --main-banner-frame-gutter: 0px;
    --main-banner-text-inset: var(--main-gutter);
    --main-banner-freedom-left: max(var(--main-gutter), calc((100% - 1200px) / 2 + 60px));
  }

  body.page--main .ivy__title .ivy__crown {
    display: none;
  }

  html body.page--main .support-text .title {
    word-break: normal;
  }

  html body.page--main .support-text .desc br {
    display: inline;
  }

  body.page--main .sec2__stage {
    min-height: 0;
    padding-bottom: 8px;
  }

  body.page--main .sec2__bubbles {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  html body.page--main .sec2 .sec2__bubbles .bubble {
    position: relative;
    left: auto;
    top: auto;
    width: fit-content;
    max-width: 100%;
    margin-top: 0;
    padding: 12px;
    transform: none;
    font-size: clamp(12px, 3.4vw, 14px);
    line-height: 1.45;
    white-space: nowrap;
    word-break: keep-all;
  }

  body.page--main .sec2__bubbles .bubble:nth-child(odd) {
    align-self: flex-start;
  }

  body.page--main .sec2__bubbles .bubble:nth-child(even) {
    align-self: flex-end;
  }

  body.page--main .sec2__bubbles .bubble::after {
    bottom: -7px;
    width: 12px;
    height: 8px;
  }

  body.page--main .re-bestseller__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page--main .main-top-band__inner {
    width: calc(100% - 48px);
    grid-template-columns: 32px minmax(0, 1fr) 32px;
  }

  body.page--main .main-top-band__close {
    right: 8px;
  }
}

@media not all and (min-width: 1280px) {
  body.page--main {
    --main-gutter: clamp(20px, 3.125vw, 40px);
    --main-grid-gap: clamp(20px, 3vw, 32px);
    --main-banner-frame-gutter: var(--main-gutter);
    --main-banner-text-inset: clamp(24px, 7vw, 96px);
    --main-banner-freedom-left: calc(var(--main-gutter) + var(--main-banner-text-inset));
  }

  body.page--main .wrapper {
    min-width: 0;
  }

  body.page--main .page.main > .section:not(.section--1) > .wrap,
  body.page--main .page.main > section > .wrap,
  body.page--main .page.main .sec2__wrap,
  body.page--main .page.main .sec4__wrap,
  body.page--main .page.main .sec5__inner,
  body.page--main .section.section--18 .wrap,
  body.page--main .section.section--19 > .wrap,
  body.page--main section.section--last .wrap,
  body.page--main .detail-curriculum .wrap,
  body.page--main .re-bestseller .wrap {
    width: 100%;
    max-width: 1200px;
    padding-inline: var(--main-gutter);
  }

  body.page--main .container {
    max-width: none;
    padding-inline: 0;
  }

  body.page--main .page.main img {
    max-width: 100%;
  }

  /* Banner: one flexible stage and one four-column navigation grid. */
  body.page--main .banner__slider .banner__item {
    height: clamp(620px, 55vw, 703px);
    min-height: clamp(620px, 55vw, 703px);
    --stage-right: var(--main-gutter);
    --asset-right: 12px;
    --asset-width: min(46vw, 560px);
  }

  body.page--main .banner_text {
    width: min(calc(100% - (var(--main-banner-frame-gutter) * 2)), 1200px);
    padding-inline: var(--main-banner-text-inset);
  }

  body.page--main .banner_inner_txt--lg,
  body.page--main .banner_inner_txt--lg.main {
    font-size: clamp(34px, max(calc(2.12vw + 25.7px), 4.4vw), 56px);
  }

  body.page--main .banner_inner_txt--sm {
    max-width: min(52%, 560px);
    word-break: keep-all;
  }

  body.page--main .freedom-slide .banner_text {
    position: absolute;
    top: var(--text-top, 50%);
    left: var(--main-banner-freedom-left);
    width: min(46%, 520px);
    max-width: none;
    padding: 0;
    transform: translateY(-50%);
  }

  body.page--main .freedom-slide .banner_inner_txt--lg {
    font-size: clamp(34px, 4vw, 48px);
  }

  body.page--main .freedom-slide .banner_inner_txt--sm {
    width: 100%;
    max-width: none;
    /* 다른 슬라이드의 --sm 텍스트는 이 구간에서 font-size를 안 건드려 기본값
       var(--pc-fz-card)(22px 고정)을 쓰는데, 여기만 vw로 줄어들게 돼 있어
       1222px 미만 태블릿 폭에서 유독 작아 보였음. 고정값으로 통일 */
    font-size: var(--pc-fz-card);
    word-break: keep-all;
  }

  body.page--main .freedom-slide .freedom_asset--01 {
    right: auto;
    left: calc(50% + 40px);
    top: auto;
    bottom: 30px;
    width: clamp(190px, 24vw, 300px);
  }

  body.page--main .freedom-slide .freedom_asset--02 {
    right: max(var(--main-gutter), calc((100% - 1200px) / 2 + 20px));
    left: auto;
    top: 110px;
    bottom: auto;
    width: clamp(210px, 25vw, 320px);
  }

  body.page--main .banner_floating_img {
    right: var(--main-character-right, clamp(80px, 13vw, 170px));
    width: var(--main-character-width, clamp(260px, 28vw, 300px));
  }

  body.page--main .face-marquee {
    bottom: clamp(24px, 3vw, 36px);
  }

  body.page--main .face-marquee img {
    width: clamp(96px, 9vw, 110px);
    height: clamp(96px, 9vw, 110px);
  }

  body.page--main .face-marquee .track {
    animation-duration: 16s;
  }

  body.page--main .video_asset,
  body.page--main .animation_asset {
    --asset-width: min(60vw, 760px);
    --asset-right: -24px;
  }

  body.page--main .book_asset,
  body.page--main .fast_asset,
  body.page--main .trend_asset {
    --asset-width: min(46vw, 560px);
  }

  body.page--main .banner_badges {
    width: calc(100% - (var(--main-gutter) * 2));
    justify-content: center;
    gap: clamp(8px, 1.4vw, 18px);
  }

  body.page--main .banner_badges .badge {
    width: clamp(88px, 10vw, 132px);
  }

  body.page--main .banner_badges_source {
    right: var(--main-gutter);
  }

  body.page--main .banner__slider .slick-dots {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.page--main .banner__slider .slick-dots li {
    min-width: 0;
  }

  /* 4열 2줄로 쌓일 때 위/아래 줄 구분용 가로선 (5번째 항목부터, 즉 두 번째 줄부터) */
  body.page--main .banner__slider .slick-dots li:nth-child(n + 5)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--color-border);
  }

  body.page--main .banner__slider .slick-dots li button {
    width: 100%;
    min-height: 48px;
    padding: 6px 6px;
    /* main.jsp 인라인 <style>의 .slick-dots li button{font-size:88% !important;}
       (전역, 비반응형 규칙)가 이 값을 덮어써서 !important로 맞섬 */
    font-size: 16px !important;
    line-height: 1.3;
    white-space: normal;
  }

  body.page--main .banner__slider .slick-dots::before,
  body.page--main .banner__slider .slick-dots::after {
    width: 100%;
  }

  body.page--main .section--1 .banner__ctrl {
    position: absolute;
    top: calc(clamp(620px, 55vw, 703px) - 50px);
    left: 50%;
    bottom: auto;
    width: max-content;
    margin: 0;
    transform: translateX(-50%);
  }

  /* Large headings have one fluid rule; body and control text stay fixed. */
  body.page--main .ivy--green,
  body.page--main .sec2__title--white,
  body.page--main .sec2__title--green,
  body.page--main .section--19 .title,
  body.page--main section.section--last .title {
    font-size: clamp(42px, 4.5vw, 58px);
  }

  body.page--main .sec5 .sec5__title {
    font-size: clamp(48px, 5vw, 64px);
  }

  body.page--main .support-text .title {
    font-size: clamp(42px, 4vw, 48px);
    word-break: keep-all;
  }

  body.page--main .support-text .desc br {
    display: none;
  }

  body.page--main .sec2 .bubble {
    left: clamp(150px, var(--x), calc(100% - 150px));
    width: max-content;
    max-width: calc(100% - 40px);
    box-sizing: border-box;
  }

  /* Grids wrap from their minimum readable card width, not a new breakpoint. */
  body.page--main .support-inner {
    width: min(calc(100% - (var(--main-banner-frame-gutter) * 2)), 1080px);
    max-width: 1080px;
    margin-inline: auto;
    padding-inline: var(--main-banner-text-inset);
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: var(--main-grid-gap);
  }

  body.page--main .support-media {
    min-width: 0;
  }

  body.page--main .support-image {
    min-width: 0;
    width: 100%;
    max-width: 600px;
    margin-inline: auto;
  }

  body.page--main .ivy__wrap {
    width: min(1030px, 100%);
    padding-inline: var(--main-gutter);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: var(--main-grid-gap);
  }

  body.page--main .ivy-tabs {
    width: 100%;
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    grid-auto-rows: minmax(112px, auto);
    align-content: start;
  }

  body.page--main .ivy-tabs .ivy-tab {
    min-height: 112px;
  }

  body.page--main .ivy-panel {
    min-width: 0;
  }

  body.page--main .ivy-panel--cover {
    height: clamp(420px, 50vw, 620px);
    min-height: 0;
    padding: 0;
  }

  body.page--main .re-tab-desc {
    word-break: keep-all;
  }

  body.page--main .wrap-re-tab .re-tab-btn li {
    min-width: 0;
    padding-inline: 4px;
    font-size: clamp(20px, 2.2vw, 26px);
  }

  body.page--main .re-card__title {
    width: calc(100% - 52px);
    min-height: 2.5em;
    font-size: clamp(19px, 1.8vw, 22px);
    word-break: keep-all;
    text-wrap: balance;
  }

  body.page--main .re-card__desc {
    font-size: clamp(14px, 1.5vw, 16px);
    word-break: keep-all;
  }

  body.page--main #reTabAnimation .re-tab-slider ul > li > span {
    top: clamp(70px, calc(8.8vw + 3px), 100px);
    right: 18px;
    width: clamp(48px, 5vw, 60px);
    height: clamp(48px, 5vw, 60px);
    font-size: clamp(15px, 1.5vw, 18px);
  }

  body.page--main .re-bestseller__copy h3 {
    font-size: clamp(22px, 2.7vw, 34px);
    word-break: keep-all;
    white-space: nowrap;
  }

  body.page--main .stats-marquee__track {
    animation-name: main-stats-marquee-left;
  }

  @keyframes main-stats-marquee-left {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% + var(--edge-fade) - 12px)); }
  }

  body.page--main .stat-card {
    height: auto;
    min-height: 192px;
    grid-template-rows: auto 1fr auto;
  }

  body.page--main .section--19 .hscroll {
    padding-inline: var(--main-gutter);
  }

  body.page--main section.section--last .last-card {
    width: min(800px, 100%);
    padding: clamp(36px, 5vw, 52px);
  }

  body.page--main .popup-panel {
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
  }

  body.page--main .popup-contents {
    max-height: calc(100vh - 108px);
    max-height: calc(100dvh - 108px);
    overflow-y: auto;
  }
}