/* ---
*   CSS for ilbuntok Landing Page
*   Version: Production-Ready (Korean Startup Style)
*   Methodology: Mobile-First
--- */

/* --- 1. Design System & Variables --- */
:root {
  /* Colors */
  --color-primary: #4ea1e6; /* Point Color */
  --color-cta: #ff6464; /* Call to Action */
  --color-text-primary: #212529; /* Main Body Text */
  --color-text-secondary: #495057; /* Sub-text, captions */
  --color-text-subtle: #868e96; /* placeholder, disabled */
  --color-background-white: #ffffff;
  --color-background-gray: #eaf4fc; /* Light Gray for Sections (from gemini.md) */
  --color-background-header: #fcfcfc; /* Subtle off-white for header */
  --color-border: #e9ecef; /* Borders for cards, dividers */

  /* Typography */
  --font-family-base:
    "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;

  /* Spacing System (8px Grid) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;

  /* Header height */
  --header-height: 60px;
  --content-max-width: 960px; /* 최대 너비 변수 추가 */
}

/* --- 2. CSS Reset & Base Styles --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-base);
  background-color: var(--color-background-white);
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: var(--header-height); /* Space for fixed header */
}

h1,
h2,
h3,
p,
a {
  font-family: var(--font-family-base); /* Ensure all text uses Noto Sans KR */
}

/* --- 3. Layout & Global Components --- */
.container {
  max-width: var(--content-max-width, 720px); /* 720px → 960px */
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--space-3);
}

section,
header.hero-section,
footer {
  padding: var(--space-8) 0;
}

/* --- Main Header (Sticky) --- */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: var(
    --color-background-header
  ); /* Changed to subtle header color */
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  transition: transform 0.3s ease-out; /* Smooth transition for hide/show */
}

.main-header.header-hidden {
  transform: translateY(-100%); /* Hide header by moving it up */
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%; /* Ensure container fills parent */
  max-width: var(--content-max-width, 720px); /* 헤더도 960px 적용 */
}

.header-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.header-logo img {
  width: 48px; /* Increased size */
  height: 48px; /* Increased size */
  border-radius: 50%;
  object-fit: cover;
  margin-right: var(--space-1);
  /* Removed background-color, padding, border for transparent logo */
}

.main-nav {
  display: flex; /* Default to row for desktop */
  gap: var(--space-3);
  font-family: var(--font-family-base); /* Ensure nav links use Noto Sans KR */
}

.main-nav a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.125rem; /* Standardized font size */
  padding: var(--space-1) var(--space-2); /* Standardized padding */
  border-radius: 4px; /* Soften edges on hover */
  transition:
    color 0.2s ease,
    background-color 0.2s ease; /* Smooth transitions for both */
}

.main-nav a:hover {
  color: var(--color-text-primary); /* Dark black for letters on hover */
  background-color: #f5f5f5; /* Neutral light grey background on hover */
}

/* Hamburger Menu (Mobile Only) */
.hamburger-menu {
  display: none; /* Hidden by default on desktop */
  width: 30px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  z-index: 1001; /* Above nav links */
  outline: none; /* Remove outline on focus */
}

.hamburger-menu span {
  display: block;
  width: 100%;
  height: 2px; /* Thinner */
  background-color: var(--color-text-secondary); /* Lighter gray */
  border-radius: 2px;
  transition: all 0.2s ease-in-out;
  transform-origin: center center; /* Ensure rotation is in place */
}

/* Hamburger animation */
.hamburger-menu.is-active span:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
}
.hamburger-menu.is-active span:nth-child(2) {
  opacity: 0;
}
.hamburger-menu.is-active span:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
}

/* --- 4. Section Styling --- */

/* Hero Section */
.hero-section {
  text-align: center;
  padding-top: var(--space-6);
  padding-bottom: var(--space-10); /* Increased padding for separation */
}

.hero-illustration-img {
  max-width: 100%;
  height: auto;
  margin: 0 auto var(--space-4);
  display: block;
  border-radius: 8px; /* Optional: adds a soft touch to the image */
}

.hero-section h1 {
  font-size: 2rem; /* 32px */
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: var(--space-2);
  letter-spacing: -0.04em;
}

.hero-section p {
  font-size: 1.125rem; /* 18px */
  color: var(--color-text-secondary);
  margin: 0 auto var(--space-4);
  max-width: 500px;
}

.cta-button {
  display: inline-block;
  background-color: var(--color-cta);
  color: var(--color-background-white);
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border-radius: 100px; /* More rounded, pill shape */
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Initial subtle shadow */
}

.cta-button:hover {
  transform: translateY(-3px); /* More pronounced lift */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
}

/* Secondary CTA */
.secondary-cta-group {
  margin-top: var(--space-3); /* Space above the secondary CTA */
}

.secondary-cta {
  display: inline-flex; /* For icon alignment */
  align-items: center;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: 4px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.secondary-cta:hover {
  background-color: var(--color-background-gray);
  color: var(--color-text-primary);
}

.secondary-cta .icon-external-link {
  margin-left: var(--space-1);
  width: 14px;
  height: 14px;
  vertical-align: middle;
}

/* Content Section */
.content-section {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
  text-align: center;
}

.content-section h2 {
  margin-bottom: var(--space-4); /* Add space below heading */
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  text-align: center; /* Updated: Center align content within the card */
}

.card {
  background-color: var(--color-background-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  text-align: center; /* New: Center align all content within the card */
  align-items: center; /* New: Center items horizontally in a column layout */
}

.icon-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  margin-bottom: var(--space-2);
  background-color: transparent; /* Updated: Remove background color */
  border: none; /* New: Remove border */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary); /* Updated: Use brand primary color */
}

.icon-placeholder svg {
  width: var(--space-4); /* Updated: Make SVG icon larger (32px) */
  height: var(--space-4); /* Updated: Make SVG icon larger (32px) */
  margin: 0; /* New: Ensure no default margins on SVG */
  padding: 0; /* New: Ensure no default padding on SVG */
}

.card h3 {
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.card p {
  font-size: 1rem; /* 16px */
  color: var(--color-text-secondary);
}

.content-section h2 {
  margin-bottom: var(--space-4); /* Add space below heading */
}
.trust-section {
  background-color: var(--color-background-gray);
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
  text-align: center;
}

.trust-section h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: var(--space-6);
  letter-spacing: -0.03em;
}

.testimonial-card {
  background: var(--color-background-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-4); /* Increased padding for more space */
  max-width: 90%;
  margin: 0 auto;
  text-align: left; /* Align content left within the card */
}

.testimonial-card:not(:last-child) {
  margin-bottom: var(--space-3); /* Adjusted margin for three cards */
}

.testimonial-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-3); /* Increased margin below header */
}

.profile-img {
  /* Styles for the actual image */
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover; /* Ensure image covers the circular area */
  margin-right: var(--space-2); /* Increased margin from image to text */
  border: 2px solid var(--color-border); /* Subtle border for definition */
}

.testimonial-author {
  font-style: normal;
  font-size: 1rem; /* Slightly larger */
  color: var(--color-text-primary); /* More prominent color */
  font-weight: 700; /* Bolder */
}

.testimonial-card blockquote {
  font-size: 1.125rem; /* Larger font size for quote */
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Subscribe Section */
.subscribe-section {
  background-color: var(--color-primary);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  text-align: center;
  color: var(--color-background-white);
}

.subscribe-section h2 {
  color: var(--color-background-white);
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.subscribe-section p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-4);
}

.subscribe-form-wrapper {
  background-color: var(--color-background-white);
  border-radius: 12px;
  padding: var(--space-2); /* Minimal padding for edge-to-edge form feel */
  max-width: 420px;
  margin: 0 auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.form-reassurance {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Footer Section */
.footer-section {
  background-color: var(--color-background-gray);
  border-top: 1px solid var(--color-border);
  padding: var(--space-8) 0 var(--space-2) 0; /* Updated: reduced bottom padding */
}

/* --- Footer Specific Styles --- */
.footer-top-row {
  /* New class for the top part of the footer */
  display: flex;
  flex-direction: row; /* Desktop default: row layout */
  justify-content: space-between;
  align-items: flex-start; /* Align content to the top of the flex container */
  padding: 0 var(--space-3) var(--space-5); /* Horizontal and bottom padding */
  gap: 192px; /* Updated: gap space doubled (192px) */
  margin-bottom: var(
    --space-4
  ); /* Updated: Space between top and bottom footer rows */
}

.footer-left,
.footer-right {
  flex: 1; /* Allow items to grow and shrink */
  max-width: none; /* Updated: 45% 제한 제거 - Allows full expansion on desktop */
}

.footer-heading {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.footer-business-info {
  font-size: 0.75rem; /* Proposed value */
  color: var(--color-text-subtle); /* Proposed value */
  line-height: 1.6; /* Proposed value */
  margin-bottom: 0; /* Proposed value */
}

.footer-links {
  list-style: none;
  padding: 0;
}

.footer-links li a {
  color: var(--color-text-secondary);
  text-decoration: none;
  display: block;
  margin-bottom: 0; /* Updated: reduence space between rows of menu */
  font-size: 0.95rem; /* Slightly smaller than main nav, but consistent with general sub-text */
  padding: var(--space-1) var(--space-2); /* Consistent with main nav links */
  border-radius: 4px; /* Consistent with main nav links */
  transition:
    color 0.2s ease,
    background-color 0.2s ease; /* Smooth transitions for both */
}

.footer-links li a:hover {
  color: var(--color-text-primary); /* Dark black for letters on hover */
  /* Removed: background-color: #F5F5F5; */
  font-weight: 700; /* New: bold on hover */
}

/* Specific styles for preventing text wrap in business info */
.nowrap-text {
  white-space: nowrap; /* Keep text on a single line */
  display: block; /* Ensure it takes full width for auto overflow to work */
  overflow-x: auto; /* Allow horizontal scrolling if content is too wide */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  padding-right: var(--space-1); /* New: add 10px padding for cut words */
}

/* Footer bottom row for copyright */
.footer-bottom-row {
  border-top: 1px solid var(--color-border); /* Separator line */
  padding: var(--space-2) var(--space-3); /* Updated: Vertical and horizontal padding */
  text-align: center; /* Center align copyright text */
}

.footer-copyright {
  font-size: 0.8rem; /* Proposed value */
  color: var(--color-text-subtle); /* Subtle text color */
  margin: 0; /* Remove default paragraph margin */
}

/* --- About Us Page Specific Styles --- */
.about-hero-section {
  text-align: center;
  padding-top: var(--space-8); /* Adjusted to var(--space-8) */
  padding-bottom: var(
    --space-10
  ); /* Adjusted to var(--space-8) -> var(--space-10) */
}

.about-hero-image {
  max-width: 500px; /* max-width 600px -> 500px */
  width: 100%;
  height: auto;
  margin: 0 auto var(--space-6) auto; /* 중앙 정렬, 아래 여백 var(--space-4) -> var(--space-6) */
  display: block;
  border-radius: 12px; /* border-radius 12px */
}

.about-hero-section h1 {
  font-size: 2rem; /* 32px */
  font-weight: 700;
  line-height: 1.4; /* Added line-height for consistency */
  margin-bottom: var(--space-3); /* Changed var(--space-2) -> var(--space-3) */
  letter-spacing: -0.04em;
}

.about-hero-section p {
  font-size: 1.125rem; /* 18px */
  color: var(--color-text-secondary);
  max-width: 600px; /* New: max-width for readability */
  margin: 0 auto var(--space-3) auto; /* New: Added margin for paragraph spacing */
  line-height: 1.7; /* New: for better readability */
}

.about-hero-section p:last-child {
  margin-bottom: 0;
}

.about-mission-section,
.about-promise-section {
  padding-top: var(--space-10); /* padding-top/bottom var(--space-10) */
  padding-bottom: var(--space-10);
  text-align: center;
}

.about-mission-section {
  background-color: var(
    --color-background-gray
  ); /* Subtle background for mission */
}

.about-mission-section h2,
.about-promise-section h2 {
  font-size: 1.75rem; /* 28px */
  font-weight: 700;
  margin-bottom: var(--space-4); /* Changed var(--space-6) -> var(--space-4) */
  letter-spacing: -0.03em;
}

.mission-text {
  font-size: 1.125rem; /* 18px */
  color: var(--color-text-secondary);
  max-width: 700px; /* max-width 700px */
  margin: 0 auto var(--space-4) auto; /* margin auto and bottom spacing */
  line-height: 1.7; /* line-height 1.7 */
}

.mission-highlight {
  background-color: var(--color-background-white);
  border-left: 4px solid var(--color-primary);
  padding: var(--space-3) var(--space-4);
  max-width: 700px;
  margin: 0 auto;
  border-radius: 8px;
}

.mission-highlight p {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text-primary);
}

.promise-list {
  list-style: none;
  padding: 0;
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

.promise-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-3); /* var(--space-3) */
  font-size: 1.125rem; /* 1.125rem */
  color: var(--color-text-primary); /* var(--color-text-primary) */
}

.promise-list li:last-child {
  margin-bottom: 0;
}

.promise-list li svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary);
}

.promise-list li span {
  line-height: 1.6;
}

/* --- 5. Media Queries (Mobile-First) --- */
@media (max-width: 767px) {
  /* Mobile specific styles */
  /* 메뉴 열렸을 때 X 버튼 우측 정렬 - 이 부분 추가! */
  .main-header.is-menu-open .header-container {
    justify-content: flex-end;
  }

  .main-header.is-menu-open .header-logo {
    display: none; /* Hide logo when menu is open */
  }

  .main-nav {
    display: none; /* Hide nav links by default on mobile */
    flex-direction: column;
    position: absolute;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background-color: var(--color-background-header);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    padding: var(--space-3) 0;
    z-index: 999;
    overflow-y: auto; /* Allow scrolling for long menus */
    max-height: calc(
      100vh - var(--header-height)
    ); /* Max height for scrollable menu */
  }

  .main-nav.is-active {
    display: flex; /* Show when active */
  }

  .main-nav a {
    margin: 0; /* Override desktop margin */
    text-align: center; /* Align text center for mobile menu */
  }

  .hamburger-menu {
    display: flex; /* Show hamburger on mobile */
  }

  .hero-container {
    flex-direction: column;
    text-align: center;
  }
  .hero-illustration-img {
    width: 80%; /* Adjust image size for mobile */
    max-width: 300px;
    margin-top: var(--space-l);
  }
  .card-grid {
    grid-template-columns: 1fr;
  }
  .testimonial-card {
    max-width: 100%;
  }
  .footer-top-row {
    /* Targets the new top row of the footer */
    flex-direction: column; /* Stack vertically on mobile */
    text-align: left; /* Left-justify content on mobile */
    gap: var(--space-5); /* Space between stacked columns */
  }
  .footer-left {
    margin-bottom: var(
      --space-5
    ); /* Add space below .footer-left when stacked */
    max-width: 100%; /* Allow it to take full width on mobile */
  }
  .footer-right {
    max-width: 100%; /* Allow it to take full width on mobile */
  }

  .container {
    padding: 0 var(--space-2); /* 모바일 패딩 감소 (24px → 16px) */
  }

  /* About Us Page Mobile Adjustments */
  .about-hero-section h1 {
    font-size: 1.75rem;
  }
  .about-hero-section p,
  .mission-text {
    font-size: 1rem;
  }
  .about-mission-section h2,
  .about-promise-section h2 {
    font-size: 1.5rem;
  }
  .mission-highlight p {
    font-size: 0.9rem;
  }
  .promise-list li {
    font-size: 1rem;
  }

  /* New Mobile Styles for Stats Grid and Promise Grid Layout */
  .stats-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .promise-item,
  .promise-item-reverse {
    grid-template-columns: 1fr; /* Stack on mobile */
    text-align: center;
    gap: var(--space-2);
  }

  .promise-item-reverse .promise-content {
    order: 0; /* Reset order for mobile stacking */
    text-align: center;
  }

  .promise-icon {
    margin: 0 auto; /* Center icon on mobile */
  }
}

@media (min-width: 768px) and (max-width: 960px) {
  .footer-top-row {
    gap: var(--space-10); /* Intermediate gap for medium screens */
  }
}

@media (min-width: 768px) {
  /* Desktop specific styles */
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .testimonial-card {
    max-width: 450px;
  }

  .promise-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
    gap: var(--space-4); /* Larger gap on desktop */
  }
}

/* =========================================================
   NEW ABOUT PAGE STYLES (Appended Fixes)
   ========================================================= */

/* 1. Warm Hero Section Override */
.about-hero-section {
  text-align: center;
  background: #ffffff !important;
  padding-top: 96px;
  padding-bottom: 80px;
}

.about-hero-image {
  max-width: 600px;
  width: 100%;
  height: auto;
  margin: 0 auto 48px auto;
  display: block;
  border-radius: 12px;
}

.about-hero-section h1 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 24px;
  color: #333;
  letter-spacing: -0.04em;
}

.about-hero-section p {
  font-size: 1.125rem;
  color: #495057;
  max-width: 600px;
  margin: 0 auto 24px auto;
  line-height: 1.7;
}

/* 2. Dark Mission Section (High Contrast) */
.about-mission-section.dark-mode {
  background-color: #222;
  color: white;
  padding: 96px 0;
}

.split-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 64px;
}

.mission-left {
  flex: 0 0 40%;
}

.mission-left h2 {
  font-size: 2.5rem;
  line-height: 1.25;
  color: white;
  text-align: left;
  margin-bottom: 32px;
}

.mission-right {
  flex: 1;
  max-width: 500px;
  text-align: left;
}

.mission-text-light {
  color: #ccc;
  font-size: 1.1rem;
  margin-bottom: 48px;
  line-height: 1.7;
}





/* Mobile Adjustments for New About Sections */
@media (max-width: 767px) {
  .split-layout {
    flex-direction: column;
    gap: 48px;
  }

  .mission-left h2 {
    font-size: 2rem;
    margin-bottom: 16px;
  }



  .about-hero-section h1 {
    font-size: 1.8rem;
  }
  .about-hero-image {
    max-width: 300px;
  }

  .stats-grid {
    grid-template-columns: 1fr; /* Stack on mobile */
    gap: var(--space-6); /* More space between stacked items */
  }
}

/* Stats Grid for About Page */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Allow cards to shrink to 200px before wrapping */
  gap: var(--space-4); /* Adjust gap as needed */
  margin-top: var(--space-6); /* Space below the H2 title */
  text-align: center;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3); /* Optional padding */
}

.stat-icon {
  width: 40px; /* Larger icon */
  height: 40px;
  margin-bottom: var(--space-2);
  color: var(--color-primary); /* Use brand primary color */
}

.stat-number {
  font-size: 2rem; /* Big number */
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.stat-label {
  font-size: 0.95rem; /* Small label */
  color: var(--color-text-secondary);
  line-height: 1.5;
}