@import url('https://cdn.jsdelivr.net/npm/suit-font/dist/suit.css');
*{box-sizing:border-box}
html,body{scroll-behavior:smooth}
body{margin:0;background:#fafafa;color:#111;font-family:'SUIT',-apple-system,BlinkMacSystemFont,'Noto Sans KR',Arial;line-height:1.65}
a{text-decoration:none;color:inherit}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
.section{padding:72px 0}

/* Header */
.site-header{position:sticky;top:0;background:#ffffffd9;backdrop-filter:blur(8px);border-bottom:1px solid #ddd;z-index:50}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:800}
.nav a{margin-left:16px;opacity:.85}
.nav a:hover{opacity:1}

/* HERO */
.hero{min-height:680px;height:100vh;display:flex;align-items:center;background:#000;color:#fff}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.hero-text{font-size:clamp(26px,4.5vw,44px);line-height:1.15;font-weight:650}
.row{display:grid;grid-template-columns:auto auto;gap:28px;align-items:baseline}
.left{text-align:right;opacity:.95}
.right{font-weight:700}
.right.strong{font-weight:900}
.hero-logo img{width:clamp(200px,32vw,420px);display:block;margin-left:auto;}

/* Basics */
.cta{background:#fff;border-top:1px solid #eee;border-bottom:1px solid #eee}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;border:1px solid #111;font-weight:700;background:#fff}
.btn.primary{background:#111;color:#fff}
.site-footer{background:#fff;border-top:1px solid #ddd;padding:20px 0;text-align:center;color:#666}
#toTop{position:fixed;right:16px;bottom:16px;background:#111;color:#fff;border:none;padding:10px 14px;border-radius:12px;cursor:pointer}

@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:28px;text-align:center}
  .left{text-align:right}
  .hero-logo img{margin:0 auto}
}


/* === v7 alignment overrides === */
.hero-text{font-size:clamp(24px,4.2vw,40px);line-height:1.18;font-weight:700}
/* left column has fixed width in 'ch' so all right words start at the same x */
.row{display:grid;grid-template-columns:12ch auto;column-gap:2ch;align-items:baseline}
.left{text-align:right;white-space:nowrap}
.right{white-space:nowrap}
.right.strong{font-weight:900}
@media(max-width:900px){
  .row{grid-template-columns:10ch auto;column-gap:1.6ch}
}


/* === v9 single-column alignment (no spacing issues) === */
.single-column {
  font-size: clamp(28px, 4.5vw, 46px);
  line-height: 1.18;
  font-weight: 800;
  white-space: nowrap;
}
.single-column p { margin: 0; }
.single-column .indent { padding-left: 4.2ch; font-weight: 900; }


/* v18 About styling (hero untouched) */
.about-title{font-size:52px;font-weight:800;margin-bottom:32px}
.about-main{font-size:20px;line-height:1.7;margin-bottom:28px;color:#444;max-width:900px}
.about-sub{font-size:18px;line-height:1.7;color:#666;max-width:900px}


/* v19 About Title size confirm */
.about-title{font-size:52px;font-weight:800;margin-bottom:32px}


/* v20 About Title confirm */
.about-title{font-size:52px;font-weight:800;margin-bottom:32px}


/* v21 About Title confirm */
.about-title{font-size:52px;font-weight:800;margin-bottom:32px;line-height:1.25}


/* v22 About Title confirm */
.about-title{font-size:52px;font-weight:800;margin-bottom:32px;line-height:1.25}


/* v23 About two-column layout */
@media (max-width: 900px){
  #about .container{flex-direction:column !important;gap:32px !important}
}


#about .container img {
  max-width: 280px !important;
}


/* v25 enforce right-side image two-column */
#about .container{display:flex !important; align-items:flex-start; gap:48px;}
#about .about-text{flex:1; min-width:0;}
#about .about-media{flex:0 0 auto; display:flex; justify-content:flex-end;}
#about .about-media .about-hand{max-width:280px; width:280px; height:auto; object-fit:cover; border-radius:8px; filter:grayscale(100%);}

/* mobile stack */
@media (max-width: 900px){
  #about .container{flex-direction:column !important; gap:32px;}
  #about .about-media .about-hand{width:100%; max-width:100%;}
}


/* v26: bigger right image and vertical centering */
#about .container{align-items:center !important; gap:56px !important;}
#about .about-media .about-hand{width:360px !important; max-width:360px !important;}

/* closing section fade-in */
.fade-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}
.fade-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* testimonials grid */
.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
}
.testimonial-card{
  background:#111;
  border:1px solid #222;
  border-radius:16px;
  padding:28px;
}
.testimonial-card h4{
  font-size:18px;
  font-weight:700;
  margin:0 0 12px;
}
.testimonial-card p{
  font-size:16px;
  line-height:1.8;
  opacity:.9;
}

/* responsive */
@media (max-width: 900px){
  .testimonials-grid{ grid-template-columns:1fr; }
}

/* fade in baseline (safety) */
.fade-section{ opacity:0; transform:translateY(40px); transition:opacity 1.2s ease-out, transform 1.2s ease-out; }
.fade-section.visible{ opacity:1; transform:translateY(0); }


.testimonial-card{
  background:#fff;
  border:1px solid #ddd;
  border-radius:16px;
  padding:28px;
  color:#333;
}
.testimonial-card h4{
  color:#222;
}
.testimonial-card p{
  color:#444;
}
.stars{
  font-size:18px;
  color:#f4b400;
  margin-bottom:12px;
}


/* Testimonials title underline */
#testimonials h2{
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}
#testimonials h2::after{
  content: "";
  position: absolute;
  width: 60px;
  height: 3px;
  background: #000;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}


/* Slight delay for closing fade */
#closing.fade-section{
  transition-delay: 0.15s;
}


/* Sticky logo shrink */
header .container, nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo { display: flex; align-items: center; }
.logo img {
  height: 36px;
  width: auto;
  display: block;
  transition: height .25s ease, transform .25s ease;
}

.scrolled .logo img {
  height: 30px;
  transform: translateY(0);
}

header, nav { padding: 16px 0; }
.scrolled header, .scrolled nav { padding: 10px 0; }


/* ===== Mobile Optimizations v1 ===== */
@media (max-width: 768px){

  body { padding-top: 72px; }

  section { padding: 60px 20px; }

  .container { max-width: 100%; padding: 0 20px; }

  h1 { font-size: 34px; line-height: 1.2; letter-spacing: -0.5px; }
  h2 { font-size: 26px; line-height: 1.25; letter-spacing: -0.3px; }
  h3 { font-size: 20px; line-height: 1.3;  }

  p, li { font-size: 16px; line-height: 1.8; }

  /* Two-column style to single column */
  .row, .grid, .cols, .two-col { display:block; }
  .row > *, .grid > *, .cols > *, .two-col > * { width: 100% !important; }

  /* Process/steps spacing */
  .step, .process-item, .feature-item { margin-bottom: 28px; }

  /* Images scale to container */
  img { max-width: 100%; height: auto; }

  /* Testimonials already 1col below 900px, tighten padding on phones */
  .testimonial-card { padding: 20px; }

  /* Closing section typography */
  #closing h2 { font-size: 22px; }
  #closing h3 { font-size: 17px; }
  #closing p  { font-size: 15px; }

  /* Navigation compact */
  nav a { font-size: 14px; padding: 8px 8px; }
}

/* Smaller phones */
@media (max-width: 420px){
  h1 { font-size: 30px; }
  h2 { font-size: 24px; }
}


/* ===== Mobile Optimizations v2 (Korean typography & layout) ===== */
@media (max-width: 768px){

  html, body {
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
    word-break: keep-all;         /* 한글 단어 중간 줄바꿈 방지 */
  }

  /* global spacing */
  section { padding: 48px 18px; }
  .container { max-width: 100%; padding: 0 18px; }

  /* headings */
  h1 { font-size: 30px; line-height: 1.25; letter-spacing: -0.6px; margin-bottom: 16px; }
  h2 { font-size: 24px; line-height: 1.28; letter-spacing: -0.4px; margin-bottom: 14px; }
  h3 { font-size: 18px; line-height: 1.35; margin-bottom: 10px; }
  p, li { font-size: 16px; line-height: 1.9; }

  /* Hero style (첫 섹션 큰 타이틀이 너무 커지는 문제) */
  .hero h1, #hero h1, .intro h1 { font-size: 28px; line-height:1.25; }
  .hero p, #hero p, .intro p { font-size: 16px; opacity: .9; }

  /* Any 2~3 column areas -> single column */
  .row, .grid, .cols, .two-col, .three-col,
  [class*="grid-"], [class*="col-"], [class*="columns"] {
    display: block !important;
  }
  .row > *, .grid > *, .cols > *, .two-col > *, .three-col > *,
  [class*="grid-"] > *, [class*="col-"] > *, [class*="columns"] > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Process / Steps blocks */
  #process h2, .process h2, [class*="process"] h2 { font-size: 24px; }
  .step, .process-item, .feature-item { margin-bottom: 24px; }

  /* Images responsiveness */
  img { max-width: 100%; height: auto; display: block; }

  /* Testimonials tighten */
  .testimonials-grid { display:block !important; }
  .testimonial-card { padding: 18px; }

  /* Closing section */
  #closing h2 { font-size: 22px; }
  #closing h3 { font-size: 17px; }
  #closing p  { font-size: 15px; }

  /* Header/nav compact (sticky header 보정 포함) */
  body { padding-top: 72px; }
  header, nav { padding: 12px 0 !important; }
  .logo img { height: 26px !important; }
  nav a { font-size: 14px; padding: 8px 8px; }

  /* Back-to-top / floating buttons shrink */
  .to-top, .back-to-top, .scrollup, [class*="to-top"] {
    width: 38px; height: 38px; right: 12px; bottom: 16px;
    font-size: 12px;
  }
}

/* Smaller phones */
@media (max-width: 420px){
  h1 { font-size: 26px; }
  h2 { font-size: 22px; }
  .logo img { height: 24px !important; }
}


/* === Mobile A layout (stack images before paragraphs, header inline) === */
@media (max-width: 768px){
  header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px !important;}
  header .logo{font-size:16px !important;font-weight:700;line-height:1;white-space:nowrap;}
  nav{display:flex;gap:14px;}
  nav a{font-size:14px !important;white-space:nowrap;}

  /* Make images block and give margin */
  section img{display:block;max-width:100%;height:auto;margin:12px 0;}
  /* Prevent awkward Korean breaks */
  html,body{word-break:keep-all;line-height:1.75;}
  /* Hero title enforce 3 lines */
  .hero h1, #hero h1, .intro h1{white-space:pre-line !important;font-size:28px;line-height:1.3;}
}