.navbar {
      /* background: #2c3e50; */
      background:  #b71c1c;
      padding: 1rem 2rem;
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    .navbar ul {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      list-style: none;
      gap: 2rem;
    }

    .navbar li {
      display: flex;
      align-items: center;
    }

    .navbar a {
      color: white;
      text-decoration: none;
      font-weight: bold;
      font-size: 1rem;
      transition: color 0.3s ease;
    }

    .navbar a:hover {
      color: #ffd700;
    }
    .navbar a.active {
      border-bottom: 3px solid #ffd700;
      color: #ffd700;
    }
    #splash-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at center, #1a0000 0%, #000000 100%);
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      animation: fadeOut 1.2s ease-in-out 4s forwards;
    }

    .splash-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .splash-logo {
      font-size: 5rem;
      font-weight: bold;
      letter-spacing: 3px;
      animation: pulse 2s ease-in-out;
      text-shadow: 0 0 10px #ff3333, 0 0 20px #ff3333, 0 0 30px #ff3333, 0 0 40px #ff0000;
      color: #fff;
    }

    .splash-subtitle {
      margin-top: 1.5rem;
      font-size: 2rem;
      letter-spacing: 1px;
      color: #ff9999;
      text-shadow: 0 0 6px #ff3333, 0 0 12px #cc0000;
      opacity: 0;
      animation: fadeInSub 2s ease-in-out 0.5s forwards;
    }

    @keyframes pulse {
      0% { transform: scale(0.8); opacity: 0; }
      50% { transform: scale(1.1); opacity: 1; }
      100% { transform: scale(1); opacity: 1; }
    }

    @keyframes fadeOut {
      to {
        opacity: 0;
        visibility: hidden;
      }
    }
    body {
      margin: 0;
      font-family: 'Roboto', sans-serif;
      background-image: url('../../image/body_scene1.jpeg');
      background-repeat: no-repeat;
      background-position: center center;
      background-attachment: fixed;
      background-size: cover;
      overflow-x: hidden;
    }
    header {
      background: linear-gradient(135deg, rgba(139,0,0,0.6), rgba(178,34,34,0.6)),
                  url('../../image/scene_top3.jpeg') no-repeat center center;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center center;
      color: white;
      padding: 4rem 2rem;
      text-align: center;
      animation: fadeInDown 1s ease-in-out;
    }
    header h1 {
      margin: 0;
      font-size: 6rem;
    }
    .hero {
      padding: 4rem 2rem;
      text-align: center;
      background-image: url('../../image/body_scene6.jpeg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      position: relative;
      z-index: 1;
      animation: fadeIn 1.5s ease;
    }
    .hero::before {
      content: "";
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(255, 255, 255, 0.85);
      z-index: -1;
    }
    .hero h2 {
      font-size: 2rem;
    }
    .hero p {
      font-size: 1.2rem;
      margin-top: 1rem;
    }
    .app-intro {
      margin-top: 2rem;
      padding: 1.5rem;
      background: #fdf6e3;
      border-radius: 8px;
      border-left: 6px solid #ff6f00;
      text-align: left;
      max-width: 700px;
      animation: fadeIn 2s ease;
    }
    .app-intro h3 {
      margin-top: 0;
    }
    .app-intro-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      flex-wrap: wrap;
      padding: 2rem 1rem;
    }
    .app-phone {
      max-width: 160px;
      height: auto;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }
    .features {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 2rem;
      padding: 3rem 2rem;
      background: #ecf0f1;
      animation: fadeInUp 2s ease;
    }
    .feature {
      max-width: 300px;
      background: white;
      padding: 1.5rem;
      border-radius: 10px;
      box-shadow: 0 8px 16px rgba(0,0,0,0.1);
      transition: transform 0.3s ease;
    }
    .feature:hover {
      transform: scale(1.05);
    }
    .video {
      text-align: center;
      padding: 2rem 2rem;
      background: #fff;
      animation: fadeIn 2s ease;
    }
    .cta {
      text-align: center;
      padding: 0rem 0rem 0.5rem 0rem;
      background: #2c3e50;
      color: white;
      animation: fadeInUp 2s ease;
    }
    .cta h2 {
      font-size: 3rem; /* 원하는 크기로 조정 */
      margin-bottom: 1rem;
}
    .cta a {
      display: inline-block;
      margin-top: 1rem;
      background: #e74c3c;
      color: white;
      padding: 1rem 2rem;
      text-decoration: none;
      border-radius: 6px;
      font-weight: bold;
      transition: background 0.3s ease;
    }
    .cta a:hover {
      background: #c0392b;
    }
    footer {
      text-align: left;
      padding: 1rem;
      background: #bdc3c7;
      font-size: 0.9rem;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes fadeInDown {
      from { opacity: 0; transform: translateY(-30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeInSub {
      to {
        opacity: 1;
      }
    }

    .performance-section {
      background: #f8f8f8;
      padding: 0.1rem 1rem 2rem 0rem;
      text-align: center;
      animation: fadeIn 2s ease;
    }
    .performance-section h2 {
      margin-bottom: 1rem;
      font-size: 2.5rem;
    }
    .performance-section ul {
      list-style: none;
      padding: 0;
    }
    .performance-section li {
      margin: 0.5rem 0;
      font-size: 1.1rem;
    }
    .performance-section a {
      color: #007acc;
      text-decoration: none;
      font-weight: bold;
    }
    .performance-section a:hover {
      text-decoration: underline;
    }

    
.performance-container {
  max-width: 900px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.8);
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}


/* ─── Home: 미텐 AI 소개(서비스 스타일) ───────────────────────── */
.concept-section{padding:1.2rem 1.5rem 1rem; max-width: 980px; margin: 2rem auto; background: rgba(255,255,255,0.9); border-radius:10px; box-shadow:0 4px 10px rgba(0,0,0,0.1);}
.concept-section .hero-title{
  font-size: clamp(2rem, 2.2vw + 1.2rem, 2.9rem);
  line-height: 1.16;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 12px 0;
  position: relative;
  padding-bottom: .55rem;
  background: linear-gradient(90deg,#0d47a1 0%, #1976d2 45%, #26c6da 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 10px rgba(13,71,161,0.18);
  text-align: center;
}
.concept-section .hero-title .hero-sub{
  display:block;
  margin-top:.25rem;
  font-weight:800;
  font-size: clamp(1.1rem, 1.2vw + .8rem, 1.6rem);
  color:#0d47a1;
}
.concept-section .hero-title::before{ content:''; display:none; }
.concept-section .hero-title::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:0;
  width:140px;
  height:7px;
  border-radius:999px;
  background: linear-gradient(90deg, #0d47a1 0%, #26c6da 100%);
  box-shadow:0 6px 14px rgba(13,71,161,0.22);
  transform-origin:center;
  transform: translateX(-50%) scaleX(0);
  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}
.concept-section .hero-title.animate::after{ transform: translateX(-50%) scaleX(1); }

.concept-section .lead{font-size:1.15rem; line-height:1.9; color:#0d0d0d; max-width:900px; margin: .6rem auto 1rem; text-align:left;}
.concept-grid{display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:12px;}
.concept-card{background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:12px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,0.08);}
.concept-card img{ display:block; width:100%; height:auto; max-width:100%; }
.concept-card .cap{padding:10px 12px; font-size:0.98rem; line-height:1.55; color:#222;}
.badge{display:inline-block; padding:2px 8px; border-radius:999px; font-weight:800; font-size:0.78rem; letter-spacing:.02em; margin-right:6px;}
.badge-red{background:#b71c1c; color:#fff;}
.badge-green{background:#03712b; color:#fff;}
.badge-blue{background:#1976d2; color:#fff;}
.concept-bullets{margin-top:10px; background:#f8fafc; border:1px solid rgba(0,0,0,.06); border-left:6px solid #1976d2; padding:12px 14px; border-radius:10px; max-width:900px; margin-left:auto; margin-right:auto;}
.concept-bullets ul{list-style:'➡️ '; padding-left:1.1rem; margin:0; line-height:1.75;}
.concept-note{margin-top:8px; font-size:0.9rem; color:#5b636a; max-width:900px; margin-left:auto; margin-right:auto;}

.key-quote{ display:block; color:#d32f2f; font-weight:800; font-size:1.35rem; line-height:1.6; margin:8px 0 6px; }

/* 반응형 - 태블릿 */
@media (min-width: 769px) and (max-width: 1024px){
  .concept-grid{ grid-template-columns: repeat(2, 1fr); }
  .concept-card img{ max-width:82%; margin:0 auto; }
  .concept-card .cap{ font-size:1.14rem; line-height:1.75; padding:12px 14px; }
  .badge{ font-size:0.9rem; padding:4px 10px; }
  .concept-section .lead{ font-size:1.18rem; line-height:2.0; }
}

/* 반응형 - 모바일 */
@media (max-width: 768px){
  .concept-section{ margin: 1.5rem 1rem; }
  .concept-section .hero-title{ font-size:2.2rem; }
  .concept-section .hero-title::after{ width:110px; height:6px; }
  .concept-grid{ grid-template-columns:1fr; }
  .concept-card img{ max-width:85%; margin:0 auto; }
  .concept-card .cap{ font-size:1.02rem; line-height:1.65; padding:12px 14px; }
  .badge{ font-size:0.86rem; padding:3px 10px; }
}
@media (max-width:480px){
  .concept-card .cap{ font-size:1.08rem; line-height:1.7; }
  .concept-card{ box-shadow:0 6px 20px rgba(0,0,0,0.1); }
}

/* 인라인 CTA */
.inline-cta{ text-align:center; margin: 1.0rem 0 0.8rem; }
.inline-cta a{
  display:inline-block;
  background:#e74c3c;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  padding: .9rem 1.4rem;
  border-radius:10px;
  box-shadow:0 6px 14px rgba(231,76,60,.25);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.inline-cta a:hover{ transform: translateY(-1px); box-shadow:0 10px 22px rgba(231,76,60,.3); background:#d54333; }
.inline-cta small{ display:block; margin-top:.25rem; color:#5b636a; }
@media (max-width:600px){
  .inline-cta a{ width:100%; box-sizing:border-box; }
  .concept-section .lead{ line-height:2.0; }
}


/* iPhone 11 Pro (narrow viewport) Korean text wrapping fix
   Prevents per-character line breaks and odd justification in Safari */
   html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
@media (max-width: 390px){
  .intro-card p.desc,
  .bullet-list li,
  .note-box,
  .concept-section .lead,
  .concept-card .cap {
    word-break: keep-all;      /* keep Korean words together */
    overflow-wrap: break-word; /* break on word boundaries if needed */
    white-space: normal;
    text-align: left;
    letter-spacing: 0;
    line-height: 1.7;
  }
}

/* Extra safety for iOS Safari */
@supports (-webkit-touch-callout: none){
  .intro-card p.desc,
  .bullet-list li,
  .note-box,
  .concept-section .lead,
  .concept-card .cap {
    word-break: keep-all;
    overflow-wrap: break-word;
    white-space: normal;
    text-align: left;
    letter-spacing: 0;
  }
}


    .nav-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px);
      z-index: 999;
      display: none;
    }
    .nav-overlay.open {
      display: block;
    }

    .hamburger {
      width: 2rem;
      height: 1.5rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      cursor: pointer;
      position: absolute;
      top: 1rem;
      right: 1.5rem;
      z-index: 1001;
    }
    .hamburger span {
      height: 3px;
      background: white;
      border-radius: 2px;
      transition: all 0.4s ease;
      position: relative;
      display: block;
    }
    .hamburger.opened span:nth-child(1),
    .hamburger.opened span:nth-child(3) {
      transform-origin: center;
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      margin: auto;
    }
    .hamburger.opened span:nth-child(1) {
      transform: rotate(45deg);
    }
    .hamburger.opened span:nth-child(2) {
      opacity: 0;
    }
    .hamburger.opened span:nth-child(3) {
      transform: rotate(-45deg);
    }

    @media (max-width: 768px) {
      .navbar ul {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.4s ease, opacity 0.4s ease;
      }
      .navbar ul.open {
        max-height: 600px;
        opacity: 1;
      }
    }
  

    @media (max-width: 768px) {
      .app-intro-wrapper {
        display: block;
        text-align: center;
        padding: 2rem 1rem;
      }

      .app-intro {
        max-width: 90%;
        margin: 1rem auto;
        text-align: left;
      }

      .phone-top,
      .phone-bottom {
        display: block;
        margin: 1rem auto;
        max-width: 70%;
      }

      /* --- Mobile improvements for navbar and text scaling --- */
      .navbar ul {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 0;
      }

      .navbar {
        padding: 1rem;
      }

      .navbar a {
        font-size: 1rem;
      }

      header h1 {
        font-size: 3rem;
      }

      header p {
        font-size: 1rem;
      }

      .cta h2 {
        font-size: 1.8rem;
      }

      .hero h2 {
        font-size: 1.5rem;
      }

      .hero p {
        font-size: 1rem;
      }
    }
    

/* --- Fancy Intro (glassmorphism + chips + bullets) --- */
.app-intro-wrapper{gap:2.2rem}
.intro-card{
  position:relative;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.92));
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: 1.25rem 1.25rem 1.35rem;
  max-width: 700px;
}
.intro-card .kicker{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-weight:800;
  font-size:2rem;
  color:#f70202;
  background: rgba(13,71,161,.08);
  border:1px solid rgba(13,71,161,.18);
  padding:.25rem .6rem;
  border-radius:999px;
  letter-spacing:.02em;
}
.intro-card h3.title{
  margin:.6rem 0 .4rem;
  font-size:1.9rem;
  font-weight:900;
  letter-spacing:-.02em;
  background: linear-gradient(90deg,#e53935 0%, #fb8c00 45%, #fdd835 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.intro-card p.desc{margin:.3rem 0 0; color:#333; line-height:1.65; font-size:1.06rem;}
.stat-chips{display:flex; flex-wrap:wrap; gap:.5rem; margin:.9rem 0 .2rem}
.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  font-weight:800; font-size:.85rem; color:#0d0d0d;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:999px; padding:.38rem .7rem;
  box-shadow: 0 4px 10px rgba(0,0,0,.05);
}
.chip i{font-style:normal; opacity:.6}
.bullet-list{margin:.6rem 0 .2rem; padding-left:0; list-style:none}
.bullet-list li{
  position: relative;
  margin:.45rem 0;
  padding-left: 1.35rem;     /* 체크 아이콘 자리 */
  line-height:1.65;
  color:#222;
  font-size:1.02rem;
  display:block;             /* ← flex 제거: 한글 토막 현상 방지 */
  letter-spacing: 0;
  word-break: keep-all;      /* 한글 단어 유지 */
  overflow-wrap: break-word; /* 꼭 필요할 때만 단어 경계에서 줄바꿈 */
}
.bullet-list li::before{
  content:"✔";
  color:#2e7d32;
  font-weight:900;
  position:absolute;
  left:0;
  top:.05rem;
}

/* Fix: desktop web – align check icon and text together */
.intro-card .bullet-list{ text-align:left; }
.intro-card .bullet-list li{ 
  position: relative !important; /* ensure ::before is anchored to li */
  display: block;                /* avoid flex gaps */
  padding-left: 1.6rem;          /* space for the check icon */
  line-height: 1.65;
}
.intro-card .bullet-list li::before{
  content: "✔";
  position: absolute;
  left: 0;                       /* keep icon snug to text */
  top: .1rem;
  font-weight: 900;
  color:#2e7d32;
}

/* Guarantee left-align within intro card on wide screens */
@media (min-width: 1025px){
  .intro-card{ text-align:left; }
}
.note-box{
  margin-top:.7rem; border-left:5px solid #00acc1;
  background:#e0f7fa; color:#006064; padding:.7rem .85rem; border-radius:10px;
  font-size:.92rem;
}
.note-box.warn{border-left-color:#e67e22; background:#fff3e0; color:#6a3e00}
.cta-row{display:flex; gap:.6rem; margin-top:.9rem; flex-wrap:wrap; justify-content:center}
.btn-primary, .btn-ghost{
  display:inline-block; text-decoration:none; font-weight:800; border-radius:10px;
  padding:.78rem 1.2rem; box-shadow:0 6px 14px rgba(231,76,60,.18); transition:.2s;
}
.btn-primary{background:#e74c3c; color:#fff}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(231,76,60,.28); background:#d54333}
.btn-ghost{background:#0d47a1; color:#fff; box-shadow:0 6px 14px rgba(13,71,161,.22)}
.btn-ghost:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(13,71,161,.3); background:#0b3e8f}
/* phone decorative glow */
.phone-top, .phone-bottom{position:relative}
.phone-top::after, .phone-bottom::after{
  content:""; position:absolute; inset:auto; width:120%; height:40%;
  left:50%; transform:translateX(-50%); bottom:-6%;
  background: radial-gradient(ellipse at center, rgba(13,71,161,.18), rgba(13,71,161,0) 60%);
  filter: blur(10px); z-index:-1;
}
/* responsive tweaks */
@media (max-width: 900px){
  .intro-card{padding:1.1rem 1rem}
  .intro-card h3.title{font-size:1.6rem}
  .bullet-list li{font-size:1rem}
}


/* Tablet (iPad) – enlarge app screenshots in intro */
@media (min-width: 769px) and (max-width: 1024px){
  /* Make the phone images larger for iPad */
  .app-phone{ max-width: 300px; }              /* was 160px */
  .app-intro-wrapper{ gap: 3rem; }             /* add a bit more spacing */
  .intro-card{ max-width: 760px; }             /* let the text card breathe */
  /* Tweak decorative glow so it scales nicely */
  .phone-top::after, .phone-bottom::after{ width: 140%; height: 46%; }

  /* iPad font scaling */
  .navbar a{ font-size: 1.05rem; }
  header h1{ font-size: 4.2rem; }
  .hero h2{ font-size: 2.2rem; }
  .hero p{ font-size: 1.25rem; }
  .intro-card .kicker{ font-size: 2.1rem; }
  .intro-card h3.title{ font-size: 2.15rem; }
  .intro-card p.desc{ font-size: 1.18rem; line-height: 1.85; }
  .chip{ font-size: 1rem; padding: .5rem .9rem; }
  .bullet-list li{ font-size: 1.14rem; line-height: 1.85; }
  .note-box{ font-size: 1.05rem; }
  .btn-primary, .btn-ghost{ font-size: 1.05rem; padding: .9rem 1.4rem; }
  .concept-section .lead{ font-size: 1.22rem; line-height: 2.0; }
  .concept-card .cap{ font-size: 1.12rem; line-height: 1.75; }
  .concept-bullets ul{ line-height: 1.9; }
}


    @media (max-width: 768px) {
      header h1 {
        font-size: 3rem;
      }

      .splash-logo {
        font-size: 3rem;
      }

      .splash-subtitle {
        font-size: 1.3rem;
      }

      .hero, .cta, .performance-section {
        padding: 2rem 1rem;
      }

      .hero h2, .cta h2, .performance-section h2 {
        font-size: 1.5rem;
      }

      .hero p, .cta p, .performance-section p {
        font-size: 1rem;
      }

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

      img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
      }
    }

    .video-container {
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
      max-width: 100%;
      margin-bottom: 1rem;
    }
    iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        display: block;
        margin: 0 auto 1rem auto;
        max-width: 720px;     /* 최대 너비 제한 */
        max-height: 405px;    /* 최대 높이 제한 (16:9 기준) */
      }

    .video-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  }

    .video-container {
  aspect-ratio: 16 / 9;
  max-height: 520px;
  overflow: hidden;
  border-radius: 12px;
  margin: 0 auto;
}

.nav-toggle.opened {
  color: #ffd700;
}

@media (max-width: 768px) {
  .navbar ul {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    background: #b71c1c;
    width: 100%;
    padding: 1.2rem 1.5rem;
    gap: 1.2rem;
    position: absolute;
    top: 3.8rem;
    left: 0;
    z-index: 1000;
  }

  .navbar ul.open {
    display: flex;
  }
}