/* MomSpeak Layout - Desktop/Mobile Responsive Wrapper */
/* Based on withnanny ViewWrapper pattern */

/* ============================================
   Base HTML/Body styles
   ============================================ */
html, body {
  background-color: var(--ms-orange-100);
  min-height: 100vh;
  min-height: 100dvh;
}

/* ============================================
   Desktop Background & Wrapper
   ============================================ */
.page-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--ms-orange-100);
}

/* Wave Background Pattern - Top */
.page-wrapper::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 400px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ff7f24' fill-opacity='0.15' d='M0,96L48,112C96,128,192,160,288,154.7C384,149,480,107,576,112C672,117,768,171,864,186.7C960,203,1056,181,1152,154.7C1248,128,1344,96,1392,80L1440,64L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'%3E%3C/path%3E%3C/svg%3E") no-repeat top;
  background-size: 100% auto;
  pointer-events: none;
  z-index: 0;
}

/* Wave Background Pattern - Bottom */
.page-wrapper::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 300px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffedd4' fill-opacity='0.7' d='M0,192L48,176C96,160,192,128,288,133.3C384,139,480,181,576,197.3C672,213,768,203,864,170.7C960,139,1056,85,1152,74.7C1248,64,1344,96,1392,112L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") no-repeat bottom,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffd8a8' fill-opacity='0.5' d='M0,64L48,80C96,96,192,128,288,128C384,128,480,96,576,106.7C672,117,768,171,864,181.3C960,192,1056,160,1152,138.7C1248,117,1344,107,1392,101.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") no-repeat bottom;
  background-size: 100% auto;
  pointer-events: none;
  z-index: 0;
}

/* Mobile: Center the content */
@media (max-width: 767px) {
  .page-wrapper {
    justify-content: center;
  }
}

/* ============================================
   Left Desktop Sidebar (Marketing/Branding)
   ============================================ */
.desktop-sidebar {
  display: none;
}

@media (min-width: 768px) {
  .desktop-sidebar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: calc(50vw - 240px);
    min-width: 280px;
    height: 100vh;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 2rem;
    padding-right: clamp(2rem, 8vw, 6rem);
    background: transparent;
    z-index: 10;
  }

  .desktop-spacer {
    z-index: 1;
  }

  .sidebar-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 320px;
    min-width: 0;
    text-wrap: balance;
    overflow: hidden;
  }

  .sidebar-logo {
    margin-bottom: 0;
  }

  .sidebar-logo-img {
    height: 4rem;
    width: auto;
    min-width: 0;
    object-fit: contain;
    flex-shrink: 0;
  }

  .sidebar-slogan-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .sidebar-logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ms-primary-normal);
  }

  .sidebar-slogan {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ms-gray-900);
    letter-spacing: -0.02em;
    margin: 0;
  }

  .sidebar-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.5rem;
  }

  .sidebar-feature {
    display: flex;
    align-items: center;
    gap: 0.875rem;
  }

  .sidebar-feature-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background-color: var(--ms-primary-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .sidebar-feature-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--ms-static-white);
  }

  .sidebar-feature-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ms-gray-800);
  }

  .sidebar-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.875rem 2rem;
    border: none;
    border-radius: 0.75rem;
    background-color: var(--ms-primary-normal);
    color: var(--ms-static-white);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(255, 127, 36, 0.3);
    transition: all 0.2s ease;
  }

  .sidebar-cta:hover {
    background-color: var(--ms-orange-600);
    box-shadow: 0 6px 20px rgba(255, 127, 36, 0.4);
    transform: translateY(-1px);
  }
}

/* ============================================
   Left Spacer (to push content)
   ============================================ */
.desktop-spacer {
  display: none;
}

@media (min-width: 768px) {
  .desktop-spacer {
    display: block;
    width: calc(50vw - 240px);
    min-width: 280px;
    flex-shrink: 0;
  }
}

/* ============================================
   App Container (Mobile UI)
   ============================================ */
.app-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 350px;
  max-width: 480px;
  height: 100vh;
  height: 100dvh;
  background-color: var(--ms-bg-normal);
  position: relative;
  z-index: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

@media (min-width: 768px) {
  .app-container {
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
    /* Phone mockup effect on desktop */
  }

  /* 데스크톱에서 page-wrapper 영역 클릭시에도 app-container가 스크롤되도록 */
  .page-wrapper {
    overflow: hidden;
  }
}

/* ============================================
   Right Desktop Area (Optional decoration)
   ============================================ */
.desktop-right {
  display: none;
}

@media (min-width: 1200px) {
  .desktop-right {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 2rem;
  }
}