:root{
      --ink:#0b0c10;
      --muted:#6b7280;
      --pill:#0f172a;
      --fg:#e6edf3;
      --line:#e5e7eb;
      --headerH:72px;           
      --headerW:97vw;           
      --headerMax:1900px;
      --container:1100px;
      --radius:18px;
    }
    




    *{box-sizing:border-box;  word-break: keep-all;}
    

html, body {
  font-family: "SUIT", system-ui, -apple-system, "Segoe UI", Roboto,
               "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
	    
}


body { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

img {max-width:100%}

    html{scroll-behavior:smooth}
    body{
      margin:0; color:var(--ink);
      background:#fff;

      line-height:1.6;
    }
    h1{letter-spacing:-.02em}
    h2 {absolute:relative; font-size:clamp(20px,3.4vw,40px);letter-spacing:-0.02em;margin:0 0 24px;font-weight:900; line-height:1.3}
    h3 {font-weight:800;}
    
h2::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #334eff;
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: middle;
  margin-top:15px;
}


    .site-header{
      position:sticky; top:0; z-index:1000;
      backdrop-filter: blur(10px);
      background:rgba(255,255,255,.85);
      border-bottom:1px solid rgba(0,0,0,.06);
    }
    .header-wrap{
      width:var(--headerW);
      max-width:var(--headerMax);
      margin:0 auto;
      padding:12px 20px;
      display:flex; align-items:center; gap:24px;
    }
    .brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.02em}
    .brand img {height:30px;}
    .logo-dot{width:22px;height:22px;border-radius:7px;
      background: radial-gradient(120% 120% at 0% 0%, #ffe6f7 0% 40%, #f0f4ff 60%, #e8ecff 100%);
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
    }
    
    .right{margin-left:auto; display:flex; align-items:center; gap:24px;}
    .main-nav{display:flex; align-items:center; gap:20px;}
    .main-nav a{
      text-decoration:none; font-weight:800; letter-spacing:.02em;
      color:var(--ink); white-space:nowrap;
      padding:8px 14px; border-radius:999px;
      transition:.2s background-color, .2s color, .2s transform;
    }
    .main-nav a:hover{transform:translateY(-1px)}
    .main-nav a.active,
    .main-nav a[aria-current="page"]{background:var(--pill); color:#fff;}
    .sns{display:flex; gap:12px}
    .sns a{
      width:38px; height:38px; display:grid; place-items:center;
      border-radius:50%; background:#0b0b0b; color:#fff; text-decoration:none;
      transition:.2s transform, .2s opacity;
      padding:0px 0px;
    }
    .sns a:hover{transform:translateY(-1px); opacity:.9}
    .menu-toggle{display:none; border:0; background:transparent; font-size:24px; padding:6px 10px; cursor:pointer;}
    
    /*
    @media (max-width: 900px){
      .menu-toggle{display:block}
      .main-nav{
        display:none; position:absolute; right:16px; top:100%;
        background:rgba(255,255,255,.97); border:1px solid rgba(0,0,0,.06);
        border-radius:16px; padding:12px; gap:6px; flex-direction:column; align-items:stretch;
        box-shadow:0 10px 30px rgba(0,0,0,.06);
      }
      .main-nav a{padding:10px 14px}
      .main-nav.open{display:flex}
      .sns{display:none;}
    }
    */
    






@media (max-width: 1000px) {
  .menu-toggle {
    display: block;
  }

  .main-nav {
    display: none;
    position: absolute;
    right: 16px;
    top: 100%;
    background: rgba(255, 255, 255, .97);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 16px;
    padding: 12px;
    gap: 6px;
    flex-direction: column;
    align-items: stretch;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
  }

  .main-nav a {
    padding: 10px 14px;
  }

  .main-nav.open {
    display: flex;
  }

  .sns {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }

.sns a{
      width:38px; height:38px; display:grid; place-items:center;
      border-radius:50%; background:#0b0b0b; color:#fff; text-decoration:none;
      transition:.2s transform, .2s opacity;
      padding:0px 0px;
    }
}

    /* ===== Sections (generic) ===== */
    section[id]{scroll-margin-top:var(--headerH)}
    .section{min-height:100vh; display:flex; align-items:center; padding:150px 0 150px 0}
    .container{max-width:var(--container); margin:0 auto}
    .lead{color:var(--muted); font-size:clamp(13px, 2vw, 20px)}

    /* ===== HERO — Video Background (from index2) ===== */
    .hero-video{position:relative; isolation:isolate; overflow:hidden; color:var(--fg); background:#000}
    .hero-video video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; filter:saturate(105%) contrast(105%);}
    .hero-video::after{
      content:""; position:absolute; inset:0; z-index:-1;
      background:
        radial-gradient(1200px 500px at 20% 10%, #1a2346a0, transparent 60%),
        linear-gradient(to bottom, #000000cc 0%, #00000088 40%, #000000ee 100%);
    }
    .hero-video .wrap{width:100%; max-width:1100px; margin:0 auto;}
    .hero-video .kicker{ text-transform:uppercase; letter-spacing:.2em; font-size:.8rem; color:#9ba3af }
    .hero-video .hero-copy{display:grid; gap:clamp(16px, 2.2vw, 28px);}
    .hero-video h1{margin:0; font-size:clamp(20px, 6vw, 64px); line-height:1.08; letter-spacing:-.02em; font-weight:900;}
    .hero-video p{margin:0; color:#d6dde6}
    .btn{
      display:inline-flex; align-items:center; gap:10px;
      padding:12px 18px; border-radius:12px; border:1px solid #334eff;
      background:#334eff; color:#ffffff; text-decoration:none; font-weight:700;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px #0006; background:#334eff }

    /* ===== About — S-Patch Wear hero (from index1) ===== */
    #about {background:#f9f9f9}
    .s-patch-hero .hero{
      max-width:var(--container); margin:0 auto;
      
      display:grid; grid-template-columns: 1fr 1fr; align-items:center;;
    }
    .s-patch-hero .badge{
      display:inline-flex; align-items:center; gap:8px;
      background:var(--pill); color:#e6edf3;
      border-radius:999px; padding:8px 14px; font-weight:800; font-size:.9rem;
      box-shadow:0 6px 16px #0002;
    }
    .s-patch-hero h2{}
    .s-patch-hero p{margin-top:30px; color:var(--muted)}
    .s-patch-hero .art{width:100%; position:relative; text-align:right}
    .s-patch-hero svg{width:100%; height:100%; display:block}


    /* ===== Tabs (from index4) ===== */
    .tabs-demo .wrap{max-width:1100px;margin:0 auto;}
    .tabs-demo h2{}
    .tabs-demo .tablist{display:flex;gap:16px;align-items:center;margin:8px 0 28px}
    .tabs-demo .tab{
      appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);
      padding:12px 22px;border-radius:999px;font-weight:700;cursor:pointer;
      transition:transform .12s ease, background .2s ease, color .2s ease, border-color .2s ease;
      outline:0;
    }
    .tabs-demo .tab[aria-selected="true"]{background:#111827;color:#fff;border-color:#111827}
    .tabs-demo .tab:focus-visible{box-shadow:0 0 0 3px rgba(59,130,246,.45)}
    .tabs-demo .tab:active{transform:scale(.98)}
    .tabs-demo .panels{position:relative}
    .tabs-demo [role="tabpanel"]{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
    @media (max-width:960px){
    .tabs-demo [role="tabpanel"]{grid-template-columns:1fr;gap:28px}}
    .tabs-demo [role="tabpanel"][hidden]{display:none}
    .tabs-demo .heroCard{
      width:100%;aspect-ratio:16/9;border-radius:28px;border:1px solid var(--line);
      background:
        radial-gradient(75% 120% at 20% 10%, rgba(59,130,246,.10), transparent 60%),
        radial-gradient(80% 120% at 90% 80%, rgba(99,102,241,.10), transparent 60%),
        linear-gradient(#fff,#fff);
      display:grid;place-items:center;overflow:hidden;position:relative;
    }
    .tabs-demo .heroCard .caption{font-size:14px;color:var(--muted);margin-top:8px}
    .tabs-demo .device{width:min(560px,85%);aspect-ratio:19/5;border-radius:999px;background:#fff;border:1px solid var(--line);
      position:relative; z-index:1; box-shadow:0 10px 40px rgba(0,0,0,.06);}
    .tabs-demo .bullets{list-style:none;margin:0;padding:0;display:grid;gap:18px}
    .tabs-demo .bullet{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start}
    .tabs-demo .bullet h3{margin:0 0 2px;font-size:18px}
    .tabs-demo .bullet p{margin:0;color:var(--muted)}
    .tabs-demo .icon{width:28px;height:28px;display:inline-grid;place-items:center;border-radius:50%;
      border:1px solid var(--line);background:#fff}
    .tabs-demo .fade{animation:fade .24s ease}
    @keyframes fade{from{opacity:.001;transform:translateY(6px)} to{opacity:1;transform:none}}

    /* ===== Scoring Board (from index3) ===== */
    .scoring-board{
      background-image: radial-gradient(#eaeaea 1px, transparent 1px);
      background-size:24px 24px;
    }
    .sbs-grid{display:grid;grid-template-columns: 0.7fr 1fr;gap:40px 48px;align-items:start}
    .sbs-grid h3 {font-size:25px;}
    
    @media (max-width:980px){
    .sbs-grid{grid-template-columns:1fr;gap:28px}
    }
    .sbs-headline{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
    /*
    .sbs-toggle{width:60px;height:34px;border-radius:999px;background:#334eff;position:relative; flex:0 0 auto;
      box-shadow:inset 0 0 0 2px rgba(0,0,0,.02);}
    .sbs-toggle::before{content:""; position:absolute; left:6px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.05);}
    */
   .sbs-toggle {
  display: inline-block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #334eff;
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .02);
}

.sbs-toggle .checkmark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%) rotate(45deg);
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
}


    .sbs h2{}
    .sbs-lead{font-weight:700; font-size:clamp(13px,2vw,20px);line-height:1.7}

    /* ===== Features Grid (from index5) ===== */
    .features-grid {}
    .features-grid .wrap{max-width:1100px;margin:0 auto;}
    .features-grid h2{}
    .features-grid .lead{margin:6px 0;color:var(--muted);line-height:1.65}
    .features-grid .grid{display:grid;gap:26px;margin-top:28px;grid-template-columns:repeat(3,1fr)}
    @media (max-width:1000px){.features-grid .grid{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:680px){.features-grid .grid{grid-template-columns:1fr}}

    .feature{
      background:#f6f5f7;
      border-radius:var(--radius);
      padding:34px 28px 26px;
      box-shadow:0 0 0 1px rgba(0,0,0,.03) inset;
      transition:transform .18s ease, box-shadow .18s ease;
      position:relative; overflow:hidden;
    }
    .feature:hover{transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.04) inset}
    .feature .icon{height:160px;display:grid;place-items:center;margin:8px 0 8px}
    .feature .icon img{max-width:120px;max-height:120px}
    .feature h3{margin:8px 0 14px;line-height:1.25; font-size:clamp(15px,1.5vw,20px)}
    .feature h3 em{color:#334eff; font-style:normal}
    .feature hr{border:0;border-top:1px solid var(--line);margin:10px 0 14px}
    .feature .desc{color:var(--muted);margin:0;line-height:1.7}

    .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s ease}
    .reveal._in{opacity:1;transform:none}

    /* ===== Contact (simple) =====*/
    .contact .lead{max-width:760px}
    .to-top{
      position:fixed;right:18px;bottom:18px;z-index:30;
      width:44px;height:44px;border-radius:999px;border:1px solid var(--line);
      background:#fff;display:grid;place-items:center;cursor:pointer;
      box-shadow:0 6px 18px rgba(0,0,0,.12);
      opacity:0;transform:translateY(12px);pointer-events:none;
      transition:opacity .2s ease, transform .2s ease;
    }
    .to-top.show{opacity:1;transform:none;pointer-events:auto}
    .to-top svg{width:20px;height:20px}
    
    
        .banner-wrap {
        border-top:1px solid #f9f9f9;
      overflow: hidden;
      width: 100%;
      background: #fff;
      margin-top:-50px;
      padding:50px 0 50px 0;
    }

    .banner-track {
      display: flex;
      width: max-content;
      animation: scrollBanner 30s linear infinite;
    }

    .banner-track img {
      max-height: 50px;
      margin-right: 20px;
    }

    @keyframes scrollBanner {
      0% {
        transform: translateX(0%);
      }
      100% {
        transform: translateX(-50%);
      }
    }
    
    .circle-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #334eff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-icon i {
  color: white;
  font-size: 26px;
}


 .succ_wrap {

      max-width: 1100px;
      margin: 0 auto;
   margin-bottom:50px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, 280px);
      gap: 10px;
    }

    .item {
      position: relative;
      overflow: hidden;
      border-radius:16px;
    }

    .item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

.overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0) 30.01%, rgba(0, 0, 0, 0) 100%);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  padding: 20px;
}

.overlay h4 {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 800;
  color:#ffffff;
}

.overlay strong {
  margin-top: -5px;
  font-size: 1.2rem;
  font-weight: 800;
}

    /* 그리드 배치 */

    .goobne { grid-column: 1 / 2; grid-row: 1 / 2; }
    .goya { grid-column: 2 / 3; grid-row: 1 / 2; }
    .usmef { grid-column: 3 / 5; grid-row: 1 / 2; }

    .sony { grid-column: 1 / 3; grid-row: 2 / 3; }
    .pass { grid-column: 3 / 4; grid-row: 2 / 3; }
    .pollo { grid-column: 4 / 5; grid-row: 2 / 3; }



    @media (max-width: 768px) {
      .succ_wrap {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
      }

      .item {
        height: 200px;
      }

      .goobne,
      .goya,
      .usmef,
      .sony,
      .pass,
      .pollo {
        grid-column: auto;
        grid-row: auto;
      }
    }
    .succ_h2 {margin-bottom:50px; margin-top:100px;}
    
      /* ===== AI Matters (scoped) ===== */
  .aimatters2{
    position:relative; color:#0b0c10;
    background:
      radial-gradient(1200px 600px at -10% -10%, #eef6ff 0%, transparent 40%),
      radial-gradient(900px 480px at 110% -10%, #f3e8ff 0%, transparent 45%),
      linear-gradient(180deg,#f8fafc 0%, #f5f3ff 100%);
      padding:150px 0 150px 0;
  }
  .aimatters2 .am-wrap{
    width:min(1100px, 90vw); margin:0 auto;
    display:grid; gap:40px; align-items:center;
    grid-template-columns: 1.1fr 0.9fr;
  }
  @media (max-width: 980px){
    .aimatters2 .am-wrap{ grid-template-columns:1fr; }
  }

  .aimatters2 .copy h2{

  }
  .aimatters2 .copy h2 em{}
  .aimatters2 .lead{ margin:.35rem 0; line-height:1.7; font-size:1.1rem }

  .aimatters2 .bullets{ margin:16px 0 24px; padding:0; list-style:none; }
  .aimatters2 .bullets li{
    position:relative; padding-left:20px; margin:.4rem 0; line-height:1.6;
  }
  .aimatters2 .bullets li::before{
    content:""; position:absolute; left:0; top:.72em;
    
    
   width:4px; height:4px; transform:rotate(45deg) translateY(-50%); background:#334eff; border-radius:50%

    
  }

 .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
  .btn-row p {line-height:25px; margin-left:20px}
 .am-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 18px; border-radius:16px; font-weight:800; text-decoration:none;
    transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  }
 .am-btn--primary{ background:#334eff; color:#fff; border:1px solid #334eff; }
 .am-btn--primary:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.12); }
 .am-btn--ghost{ background:#ffffff; color:#334eff; border:1px solid #334eff; }
 .am-btn--ghost:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.08); }

  .aimatters2 .visual .site-card{ text-align:center;
width:100%;

  }
  .aimatters2 .visual img{ display:block; width:100%; height:auto; margin-left:50px }
  
  .sbs-grid {margin-bottom:50px}
.sbs-grid:last-child {margin-bottom:0px}

 .contact-section {padding:150px 0px 150px 0px; text-align:center; background:#f9f9f9}
  .contact-section h2 {}
  .contact-section .subtitle {font-size:1.25rem; color:#334eff; font-weight:600;}
  .contact-section .description {color:#555; margin-bottom:40px;}
  .contact-cards {display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px;}
  .contact-cards .card {background:#fff; border-radius:16px; padding:50px; text-align:left;}
  .contact-cards .card h3 {margin:0; padding:0;}
  .contact-cards .card p {margin-bottom:8px; font-size:0.95rem; line-height:1.5;}
  .contact-cards .card .department {font-weight:700; margin-top:10px;}
  
  /* ===== Footer ===== */
.site-footer{background:#3a3a3a;color:#d7dbe0;font-family:"SUIT",system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans KR",sans-serif}
.site-footer a{color:#e8f0ff;text-decoration:underline;text-underline-offset:3px}
.site-footer a:hover{opacity:.9}

.site-footer .inner{
  width:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 0.3fr;
}

.footer-left{padding:50px;line-height:1.7;font-size:14px}
.footer-left p{margin:.25rem 0}
.footer-left .copy{margin-top:10px;color:#b7bcc3}

.footer-right{
  background:#111;color:#e8eef5;padding:50px;border-left:1px solid #000;
  display:flex;flex-direction:column;justify-content:center
}
.footer-right img {max-height:20px}
.footer-right h3{margin:0 0 10px;font-size:16px;font-weight:700;color:#b9c2cc}
.footer-right .tel{margin:.2rem 0;font-size:clamp(20px,3.2vw,28px);font-weight:800;letter-spacing:.02em}
.footer-right .fax{margin:.2rem 0;color:#9aa3ad}
.footer-right a:first-child img {margin-bottom:20px}
@media (max-width:900px){
  .site-footer .inner{grid-template-columns:1fr}
  .footer-right{border-left:0;border-top:1px solid #000}
}


@media (max-width:1000px){
	
	h2::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #334eff;
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: middle;
  margin-top:10px;
}


.section{min-height:100vh; display:flex; align-items:center; padding:50px 0 50px 0; }


	.wrap {width:90%; margin:0 auto}
	  .aimatters2 .visual .site-card{ text-align:center;width:100%;}
 .aimatters2 .visual .site-card img {width:70%}
.s-patch-hero {width:100%; margin-top:-50px}
.s-patch-hero .hero {
    grid-template-columns: 1fr; /* 한 칸만 */
    grid-template-rows: auto auto; /* 위/아래로 쌓임 */
    gap: 0px; /* 필요 시 여백 */
    width:90%;
}
.aimatters2 .visual img{ display:block; width:100%; height:auto; margin-left:0px; margin:0 auto }
  .succ_wrap {width:90%}
.s-patch-hero .art {width:90%; position:relative; text-align:center; display:block; margin:0 auto; padding:50px 0 0 0; margin-bottom:-50px}
  .s-patch-hero .art img {width:70%;}
   .sbs-grid h3 {font-size:18px; }
    .sbs-grid li {font-size:12px}
    
    
        .circle-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #334eff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-icon i {
  color: white;
  font-size: 15px;
}

 .succ_h2 { width:90%; margin:0 auto; margin-bottom:30px; margin-top:100px;}
.hero-video{height: 50vh !important; min-height:50vh;}
 .brand img {height:20px;}
 
 .sbs-grid .sbs-headline {background:; margin-bottom:-30px}
  .btn-row {padding-left:5%}
    .btn-row p {line-height:20px; margin-left:0px}
    
     .lead{font-size:13px !important}
     
       .aimatters2{
      padding:50px 0 50px 0;
  }
  
    .aimatters2 .bullets li{
    font-size:12px;
  }
   .am-btn{
padding:7px 7px;
    font-size:13px;
    border-radius:5px;
  }
  
  .feature .desc{font-size:13px;}
  
   .contact-section {padding:50px 0px 50px 0px; }

  .contact-section .description {font-size:13px;}
.contact-cards {width:90%; margin:0 auto}
.contact-section p {font-size:12px}
.footer-left{padding:30px;line-height:1.5;font-size:11px}
.footer-right{padding:30px;}

    .btn{
      display:inline-flex; align-items:center; gap:10px;
      padding:6px 20px 6px 20px; border-radius:5px; border:1px solid #334eff;
      background:#334eff; color:#ffffff; text-decoration:none; font-weight:700;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
      font-size:13px;
    }
    

    .feature {padding-top:0px}
    .feature .icon{height:120px;display:grid;place-items:center;margin:8px 0 8px}
    .feature .icon img{max-width:120px;max-height:120px}
    .feature h3{margin:8px 0 14px;line-height:1.25; font-size:clamp(15px,1.5vw,20px)}
    .feature h3 em{color:#334eff; font-style:normal}
    .feature hr{border:0;border-top:1px solid var(--line);margin:10px 0 14px}
    .feature .desc{color:var(--muted);margin:0;line-height:1.7}
    .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0) 40.01%, rgba(0, 0, 0, 0) 100%);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  padding: 20px;
}


}





/* 기본 데스크탑 스타일 */
.slider-box {
	float:right;
  width: 90%;
  max-width: 600px;
  height: 350px; /* 7줄 * 50px */
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

}

.highlight-frame {
  position: absolute;
  top: 135px;
  width: 100%;
  height: 80px;
  border: 5px solid #334eff;
  background: transparent;
  z-index: 2;
  pointer-events: none;
  box-sizing: border-box;
}

.text-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.8s ease-in-out;
}

.text-item {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  color: #000;
  opacity: 0.5;
  filter: blur(1px);
  transition: all 0.5s;
  z-index: 1;
}

.text-item.active {
  font-size: 33px;
  opacity: 1;
  font-weight: 900;
  filter: none;
  position: relative;
  z-index: 3;

}

/* ✅ 모바일 반응형 (480px 이하) */
@media (max-width: 1000px) {
  .slider-box {
    height: 210px; /* 7줄 * 30px */
    width: 100%;
  }

  .text-item {
    height: 30px;
    font-size: 14px;
  }

  .text-item.active {
    font-size: 24px;
  }

  .highlight-frame {
	  line-height:50px;
    height: 50px;
    top: 80px; /* 3줄 x 30px */
     width: 100%;
  }
}