/* ============================================
   Millie Partners v4.0 — Responsive Styles
   Breakpoints: 1200 / 1024 / 768 / 480 / 360
   Mobile-first approach for critical elements
   ============================================ */


/* --- 1200px: Large Desktop --- */
@media (max-width: 1200px) {
  .calculator__layout {
    gap: 40px;
  }

  .footer__links {
    gap: 40px;
  }
}


/* --- 1024px: Tablet Landscape / Small Desktop --- */
@media (max-width: 1024px) {
  html {
    scroll-padding-top: var(--header-h-mobile);
  }

  .header {
    height: var(--header-h-mobile);
  }

  .header__nav {
    display: none;
  }

  .header__cta {
    display: none;
  }

  .header__burger {
    display: flex;
  }

  /* Hero */
  .hero__title {
    font-size: var(--fs-48);
  }

  .hero__tile {
    flex: 0 0 140px;
    min-height: 100px;
  }

  /* Showcase */
  .showcase__panel {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .showcase__book {
    max-width: 170px;
  }

  /* Persona: Swiper handles layout */

  .persona__benefits-list {
    flex-wrap: wrap;
    gap: 16px;
  }

  .persona__benefit-item {
    padding: 14px 20px;
  }

  /* Calculator */
  .calculator__layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .calculator__info {
    text-align: left;
  }

  .calculator__desc {
    max-width: 560px;
    margin: 0 auto 32px;
    word-break: keep-all;
    text-align: left;
  }

  .calculator__formula {
    max-width: 400px;
    margin: 0 auto;
  }

  /* Blog Preview — 카드 크기 태블릿 조정 */
  .blog-preview__card {
    flex: 0 0 280px;
  }

  /* Testimonials: single column on tablet */
  .testimonials__rolling-wrap {
    grid-template-columns: 1fr;
    max-height: 500px;
  }

  .testimonials__rolling-col--2,
  .testimonials__rolling-col--3 {
    display: none;
  }

  /* Process */
  .process__steps {
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
  }

  .process__connector {
    display: none;
  }

  .process__step {
    flex: 0 0 calc(50% - 8px);
  }

  /* Footer */
  .footer__top {
    flex-direction: column;
    gap: 32px;
  }

  .footer__links {
    gap: 32px;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  /* Dark CTA */
  .dark-cta__title {
    font-size: var(--fs-36);
  }

  /* Mobile UI */
  .mobile-cta-bar {
    display: block;
  }

}


/* --- 768px: Tablet Portrait --- */
@media (max-width: 768px) {
  :root {
    --container-px: 20px;
    --sec-showcase-pt: 72px;
    --sec-showcase-pb: 60px;
    --sec-persona-pt: 80px;
    --sec-persona-pb: 72px;
    --sec-calc-pt: 60px;
    --sec-calc-pb: 80px;
    --sec-blog-pt: 72px;
    --sec-blog-pb: 60px;
    --sec-process-pt: 72px;
    --sec-process-pb: 48px;
    --sec-faq-pt: 60px;
    --sec-faq-pb: 72px;
    --sec-darkcta-py: 80px;
  }

  /* Hero */
  .hero__title {
    font-size: var(--fs-40);
  }

  .hero__sub {
    font-size: var(--fs-16);
  }

  .hero__tile {
    flex: 0 0 120px;
    min-height: 80px;
  }

  /* Showcase — 모바일: 탭/그리드 숨기고 2행 무한 마퀴 표시 */
  .showcase__title {
    font-size: var(--fs-28);
  }

  .showcase__tabs {
    display: none;
  }

  .showcase__grid {
    display: none;
  }

  .showcase__marquee {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
  }

  .showcase__marquee-row {
    overflow: hidden;
  }

  .showcase__marquee-track {
    display: flex;
    gap: 12px;
    width: max-content;
    animation: showcase-marquee 28s linear infinite;
    will-change: transform;
  }

  @keyframes showcase-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  .showcase__marquee-track .showcase__book {
    flex: 0 0 130px;
    max-width: 130px;
    scroll-snap-align: unset;
  }

  .showcase__marquee-track .showcase__book-cover {
    padding: 14px 12px;
    aspect-ratio: 3 / 3.6;
  }

  .showcase__marquee-track .showcase__book-title {
    font-size: var(--fs-13);
  }

  .showcase__marquee-track .showcase__book-author {
    font-size: var(--fs-11);
  }

  /* Market Growth — 모바일에서 chart 숨김 (텍스트만 유지) */
  .market-growth__inner {
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }

  .market-growth__chart {
    display: none;
  }

  .market-growth__title {
    font-size: var(--fs-20);
  }

  /* Stats */
  .stats__inner {
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }

  .stats__item {
    flex: 0 0 calc(50% - 10px);
  }

  .stats__divider {
    display: none;
  }

  .stats__number {
    font-size: var(--fs-32);
  }

  /* Persona */
  .persona__title {
    font-size: var(--fs-28);
  }

  .persona__card-img {
    height: 160px;
  }

  /* Calculator */
  .calculator__title {
    font-size: var(--fs-28);
  }

  .calculator__desc {
    word-break: keep-all;
    text-align: left;
  }

  .calculator__info {
    text-align: left;
  }

  .calculator__panel {
    padding: 28px;
  }

  .calculator__result-monthly {
    font-size: var(--fs-28);
  }

  /* Blog Preview */
  .blog-preview__title {
    font-size: var(--fs-28);
  }

  .blog-preview__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* Testimonials */
  .testimonials__title {
    font-size: var(--fs-28);
  }

  /* Process */
  .process__title {
    font-size: var(--fs-28);
  }

  /* FAQ */
  .faq__title {
    font-size: var(--fs-28);
  }

  .faq__question {
    font-size: var(--fs-15);
    padding: 16px 0;
  }

  /* Dark CTA */
  .dark-cta__title {
    font-size: var(--fs-32);
  }

  .dark-cta__desc {
    font-size: var(--fs-15);
  }

  .dark-cta__actions {
    flex-direction: column;
    align-items: center;
  }

  .btn--lg {
    padding: 16px 32px;
    font-size: var(--fs-16);
    width: 100%;
    max-width: 320px;
  }

  /* Footer */
  .footer {
    padding: 40px 0 24px;
  }

  .footer__links {
    flex-wrap: wrap;
    gap: 24px;
  }

  .footer__col {
    flex: 0 0 calc(50% - 12px);
  }
}


/* --- 480px: Mobile Large --- */
@media (max-width: 480px) {
  :root {
    --container-px: 16px;
    --sec-showcase-pt: 56px;
    --sec-showcase-pb: 48px;
    --sec-persona-pt: 64px;
    --sec-persona-pb: 56px;
    --sec-calc-pt: 48px;
    --sec-calc-pb: 64px;
    --sec-blog-pt: 56px;
    --sec-blog-pb: 48px;
    --sec-process-pt: 56px;
    --sec-process-pb: 40px;
    --sec-faq-pt: 48px;
    --sec-faq-pb: 56px;
    --sec-darkcta-py: 64px;
    --sec-stats-py: 36px;
  }

  /* Hero */
  .hero__label {
    font-size: var(--fs-12);
  }

  .hero__title {
    font-size: var(--fs-32);
  }

  .hero__title strong::after {
    height: 10px;
  }

  .hero__sub {
    font-size: var(--fs-14);
    margin-bottom: 28px;
    white-space: normal;
  }

  .hero__cta .btn {
    padding: 16px 32px;
  }

  .hero__trust {
    font-size: var(--fs-12);
  }

  .hero__scroll-hint {
    bottom: 20px;
  }

  .hero__tile {
    flex: 0 0 90px;
    min-height: 56px;
  }

  .hero__mosaic {
    gap: 6px;
    padding: 6px;
  }

  .hero__mosaic-track {
    gap: 6px;
  }

  /* Showcase */
  .showcase__title {
    font-size: var(--fs-24);
  }

  .showcase__desc {
    font-size: var(--fs-14);
  }

  .showcase__header {
    margin-bottom: 32px;
  }

  /* Stats */
  .stats__number {
    font-size: var(--fs-28);
  }

  .stats__label {
    font-size: var(--fs-12);
  }

  /* Persona: Swiper handles mobile layout */

  .persona__title {
    font-size: var(--fs-24);
  }

  .persona__header {
    margin-bottom: 36px;
  }

  .persona__card-img {
    height: 160px;
  }

  .persona__card-body {
    padding: 20px;
  }

  .persona__card-title {
    font-size: var(--fs-17);
  }

  .persona__card-desc {
    font-size: var(--fs-13);
    margin-bottom: 12px;
  }

  .persona__card-example {
    padding: 10px 12px;
  }

  .persona__card-example-value {
    font-size: var(--fs-14);
  }

  .persona__benefits {
    margin-top: 36px;
  }

  .persona__benefits-list {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .persona__benefit-item {
    width: 100%;
    max-width: 320px;
    padding: 12px 16px;
  }

  .persona__benefit-text {
    font-size: var(--fs-14);
  }

  /* Calculator */
  .calculator__title {
    font-size: var(--fs-24);
  }

  .calculator__panel {
    padding: 24px;
    border-radius: var(--r-xl);
  }

  .calculator__result {
    padding: 20px;
  }

  .calculator__result-monthly {
    font-size: var(--fs-24);
  }

  .calculator__result-yearly {
    font-size: var(--fs-17);
  }

  /* Blog Preview */
  .blog-preview__title {
    font-size: var(--fs-24);
  }

  .blog-preview__card {
    flex: 0 0 260px;
  }

  /* Testimonials */
  .testimonials__title {
    font-size: var(--fs-24);
  }

  .testimonials__highlight {
    padding: 16px 20px;
  }

  .testimonials__highlight p {
    font-size: var(--fs-14);
  }

  .testimonials__card {
    padding: 20px;
  }

  .testimonials__earning {
    font-size: var(--fs-17);
  }

  .testimonials__quote {
    font-size: var(--fs-14);
  }

  /* Process */
  .process__title {
    font-size: var(--fs-24);
  }

  .process__header {
    margin-bottom: 36px;
  }

  .process__step {
    flex: 0 0 calc(50% - 8px);
  }

  .process__step-icon {
    width: 52px;
    height: 52px;
  }

  .process__step-icon i {
    width: 22px;
    height: 22px;
  }

  /* FAQ */
  .faq__title {
    font-size: var(--fs-24);
  }

  .faq__question span {
    flex: 1;
    padding-right: 12px;
  }

  /* Dark CTA */
  .dark-cta__title {
    font-size: var(--fs-28);
  }

  .dark-cta__desc {
    font-size: var(--fs-14);
  }

  /* Footer */
  .footer__col {
    flex: 0 0 100%;
  }

  /* Mobile CTA Bar */
  .mobile-cta-bar {
    padding: 10px 16px;
  }

  .mobile-cta-bar__highlight {
    font-size: var(--fs-15);
  }

  /* Body padding for fixed bottom bar */
  body {
    padding-bottom: 68px;
  }
}


/* --- 360px: Mobile Small --- */
@media (max-width: 360px) {
  :root {
    --container-px: 14px;
  }

  .hero__title {
    font-size: var(--fs-24);
  }

  .hero__sub {
    font-size: var(--fs-13);
  }

  .hero__tile {
    flex: 0 0 80px;
    min-height: 48px;
  }

  .showcase__title,
  .persona__title,
  .calculator__title,
  .blog-preview__title,
  .testimonials__title,
  .process__title,
  .faq__title {
    font-size: var(--fs-22);
  }

  .showcase__panel {
    gap: 12px;
  }

  .stats__item {
    flex: 0 0 calc(50% - 8px);
  }

  .stats__number {
    font-size: var(--fs-24);
  }

  .persona__card-img {
    height: 140px;
  }

  .calculator__panel {
    padding: 20px;
  }

  .calculator__result-monthly {
    font-size: var(--fs-22);
  }

  .dark-cta__title {
    font-size: var(--fs-24);
  }

  .btn--lg {
    padding: 14px 24px;
    font-size: var(--fs-15);
  }

  .faq__question {
    font-size: var(--fs-14);
  }
}


/* --- Touch Devices --- */
@media (hover: none) and (pointer: coarse) {
  .persona__card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }

  .blog-preview__card:hover {
    transform: none;
  }

  .testimonials__card:hover {
    transform: none;
  }

  .showcase__book:hover .showcase__book-cover {
    transform: none;
  }
}


/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero__mosaic-track,
  .showcase__marquee-track {
    animation: none !important;
  }

  .hero__label,
  .hero__title,
  .hero__sub,
  .hero__cta,
  .hero__trust {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__scroll-hint span {
    animation: none !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}