/* ODDLAB index main */
#indexMain a { text-decoration:none; }

/* ══ WRAP ══ */
.wrap{max-width:var(--od-max-w);margin:0 auto;padding:0 40px}
@media(max-width:900px){.wrap{padding:0 24px}}
@media(max-width:480px){.wrap{padding:0 18px}}

/* ══ SCROLL REVEAL ══ */
.rv{opacity:0;transform:translateY(24px);transition:opacity .65s,transform .65s}
.rv.in{opacity:1;transform:none}
.rv2{opacity:0;transform:translateY(24px);transition:opacity .65s .14s,transform .65s .14s}
.rv2.in{opacity:1;transform:none}

/* ══ HERO ANIMATIONS ══ */
@keyframes fu{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fuLeft{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes fuRight{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 rgba(245,196,0,0.4)}70%{box-shadow:0 0 0 8px rgba(245,196,0,0)}}

/* ══ HERO ══ */
.hero{
  background:linear-gradient(160deg,#FFFDF0 0%,#F4F5FA 60%);
  background:url('https://mall.oddlab.org/data/oddlab/img/bg-cat.png');
  position:relative; overflow:hidden;
  background-position: 50% 30%; 
}
.hero::before{
  content:'';position:absolute;top:-100px;right:0;
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(245,196,0,0.13) 0%,transparent 70%);
  border-radius:50%;pointer-events:none;
}
.hero-inner{
  max-width:var(--od-max-w);margin:0 auto;
  padding:64px 40px 72px;
  display:flex;align-items:center;justify-content:space-between;gap:48px;
  min-height:540px;
}
.hero-content{max-width:520px}
.hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:#FFFFFF;border:1.5px solid var(--od-yellow);
  color:var(--od-dark);font-size:16px;font-weight:700;
  padding:6px 14px;border-radius:100px;margin-bottom:20px;
  animation:fu .6s ease both, badgePulse 2.5s 1s ease infinite;
}
.hero-badge::before{content:'✦';color:var(--od-yellow);font-size:10px}
.hero h1{
  font-size:64px;font-weight:800;line-height:1.15;letter-spacing:-1.5px;margin-bottom:24px;color:#fff;
  animation:fu .7s .08s ease both; text-shadow: 3px 3px 12px rgba(0, 0, 0, 0.6);
}
.hero h1 .hl{color:var(--od-yellow)}
.hero-desc{
  font-size:20px;color:#FFFFFF;line-height:1.75;margin-bottom:60px;
  animation:fu .7s .16s ease both;
   text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.261);
}
.hero-btns{display:flex;gap:12px;animation:fu .7s .24s ease both}
.btn-cta,
.btn-outline,
.btn-dark,
.btn-dark-outline {
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn-cta{
  background:var(--od-yellow);color:var(--od-text-main);border:none;
  padding:14px 28px;border-radius:10px;font-size:16px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:background .2s,transform .15s,box-shadow .2s;
}
.btn-cta:hover{background:#e07b00;transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,140,0,.3)}
.btn-outline{
  background:#FFFFFF;color:var(--od-text-main);
  border:1.5px solid var(--od-border);padding:14px 28px;border-radius:10px;
  font-size:16px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:border-color .2s,transform .15s;
}
.btn-outline:hover{border-color:var(--od-yellow);transform:translateY(-2px)}
.hero-visual{
  position:relative;flex-shrink:0;
  animation:fuRight .8s .2s ease both;
  
}
.hero-visual img{
  width:420px;max-width:100%;
  animation:float 4s ease-in-out infinite;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,0.1));
}
.hero-bubble1{position:absolute;top:-120px;right:220px; width: 145px;height: 117px;}
.hero-bubble2{position:absolute;top:40px;right:170px; width: 60px; height: 47px;}
.hero-bubble3{
  position:absolute;top:150px;right:60px;width: 158px;height: 96px;
}
.hero-bubble1 img,.hero-bubble2 img,.hero-bubble3 img{width:100%;height:100%;object-fit:contain;display:block}
.hero-bubble{
  position:absolute;top:100px;right:40px;
  background:#FFFFFF;border:1.5px solid var(--od-border);
  border-radius:12px;padding:10px 14px;
  font-size:16px;font-weight:600;color:var(--od-text-main);
  box-shadow:0 4px 16px rgba(0,0,0,0.3);white-space:nowrap;
  animation:fu .8s .4s ease both;
}

/* ══ SECTION COMMON ══ */
.section-wrap{padding:100px 0}
.section-title{
  text-align:center;font-size:50px;font-weight:800;
  line-height:1.3;letter-spacing:-1px;margin-bottom:56px;
}
.section-title .col{color:var(--od-yellow)}

/* ══ STEPS ══ */
.steps-section{background:var(--od-gray-bg)}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step-card{
  background:#FFFFFF;border-radius:20px;
  padding:32px 28px;box-shadow:0 4px 20px rgba(0,0,0,0.08);
  display:flex;flex-direction:column;gap:16px;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;
}
.step-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(0,0,0,.12)}
.step-card-top{
  display:flex;align-items:flex-start;
  justify-content:space-between;gap:12px;
}
.step-label{font-size:16px;font-weight:700;color:var(--od-text-muted);margin-bottom:6px}
.step-card h3{font-size:24px;font-weight:800;color:var(--od-dark);line-height:1.3;letter-spacing:-0.5px}
.step-illust{width:100px;height:80px;border-radius:12px;flex-shrink:0}
/* image placeholder */
.img-ph{
/*  background:#E8EAF0;border:2px dashed #C5CAD8;color:#9AA0B4;font-size:16px;font-weight:500;
  gap:8px;border-radius:12px;*/
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  
}
.img-ph img{width:120px;}
.step-card p{font-size:16px;color:var(--od-text-sub);line-height:1.7}

/* ══ PROGRAMS CAROUSEL ══ */
.programs-section{background:#111111;padding:100px 0;overflow:hidden}
.programs-section .section-title{color:#FFFFFF}
.progs-hdr{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:48px;
}
.progs-nav{display:flex;gap:8px}
.p-btn{
  width:48px;height:48px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.2);background:transparent;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;cursor:pointer;color:rgba(255,255,255,.7);
  transition:background .2s,border-color .2s,color .2s;
}
.p-btn:hover{background:#FFFFFF;color:var(--od-dark);border-color:#FFFFFF}
.p-btn:disabled,.p-btn.is-locked{opacity:.4;cursor:default;pointer-events:none}
.p-btn:disabled:hover,.p-btn.is-locked:hover{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.25)}
.car-vp{overflow:hidden;cursor:grab}
.car-vp:active{cursor:grabbing}
.car-track{
  display:flex;gap:24px;will-change:transform;
  transition:transform .56s cubic-bezier(.25,.8,.25,1);
  padding:8px 0 32px;
}
.car-track.nt{transition:none!important}
.pcard{
  flex-shrink:0;width:300px;height:440px;border-radius:20px;
  overflow:hidden;background:#1e1e1e;position:relative;
  cursor:pointer;user-select:none;display:block;
  transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s;
}
.pcard:hover{transform:translateY(-10px);box-shadow:0 28px 60px rgba(0,0,0,.4)}
.pcard-img{width:100%;height:100%;position:relative;overflow:hidden}
.pcard-img img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
.pcard:hover .pcard-img img{transform:scale(1.05)}
.pcard-img-ph{
  position:absolute;inset:0;
  background:#1e1e1e;border:1.5px dashed #3a3a3a;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  color:#555;gap:8px;font-size:16px;
}
.pcard-ft{
  position:absolute;bottom:0;left:0;right:0;
  padding:48px 18px 20px;
  background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.5) 60%,transparent 100%);
  z-index:2;
}
.pcard-cat{font-size:12px;font-weight:700;color:var(--od-yellow);letter-spacing:.5px;text-transform:uppercase;margin-bottom:4px}
.pcard-name{font-size:18px;font-weight:800;color:#fff;line-height:1.3;letter-spacing:-.3px}
.pcard-meta{font-size:14px;color:rgba(255,255,255,.55);margin-top:4px}

/* ══ VALUE / DEMO TAB SECTION ══ */
.value-section{background:#FFFFFF;padding:100px 0}
.value-layout{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}

/* left: image panel */
.value-left{position:relative}
.value-panel{
  width:100%;aspect-ratio:4/3;border-radius:24px;overflow:hidden;
  position:relative;
  background:var(--od-gray-bg);
}
.v-img{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(8px);
  transition:opacity .4s,transform .4s;
}
.v-img.active{opacity:1;transform:none}
.v-img img{width:100%;height:100%;object-fit:cover;display:block}
.v-img .img-ph{width:100%;height:100%;border-radius:24px;font-size:16px}
.value-deco{
  position:absolute;bottom:-16px;right:-16px;
  width:100px;height:100px;border-radius:20px;
  background:var(--od-yellow);opacity:.15;
  animation:float 5s ease-in-out infinite;
}

/* right: tabs */
.value-right{display:flex;flex-direction:column;gap:0}
.v-tab{
  padding:22px 20px;border-radius:14px;cursor:pointer;
  border:1px solid transparent;
  transition:background .2s,border-color .2s;
  position:relative;overflow:hidden;
}
.v-tab:hover{background:rgba(0,0,0,.03)}
.v-tab.active{background:var(--gray-light);border-color:var(--od-border)}
.v-tab-bar{
  position:absolute;left:0;top:0;bottom:0;width:3px;
  border-radius:3px;background:rgba(0,0,0,.06);overflow:hidden;
}
.v-tab.active .v-tab-bar::after{
  content:"";position:absolute;top:0;left:0;right:0;
  background:var(--od-yellow);animation:barFill var(--bar-dur,5s) linear forwards;
  height:0%;
}
@keyframes barFill{to{height:100%}}
.v-tab-icon{font-size:20px;margin-bottom:8px}
.v-tab-title{
  font-size:20px;font-weight:700;color:rgba(0,0,0,.4);
  /*letter-spacing:-.02em;*/ margin-bottom:4px;
}
.v-tab.active .v-tab-title{color:var(--od-dark);font-size:22px;}
.v-tab-desc{
  font-size:16px;color:var(--od-text-muted);line-height:1.6;
  max-height:0;overflow:hidden;transition:max-height .3s ease;
}
.v-tab.active .v-tab-desc{max-height:60px}

/* ══ TESTIMONIALS INFINITE SCROLL ══ */
.testi-section{background:var(--od-gray-bg);padding:80px 0;overflow:hidden}
.testi-title-wrap{margin-bottom:40px}
.testi-track-wrap{
  overflow:hidden;
  /* 좌우 화면 끝까지 확장 */
  margin:0 calc(50% - 50vw);
  padding:4px 0 8px;
}
.testi-row{
  display:flex;gap:24px;
  width:max-content;
  animation:tScroll 40s linear infinite;
}
.testi-track-wrap:hover .testi-row{animation-play-state:paused}
@keyframes tScroll{
  0%  {transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.t-card{
  flex-shrink:0;width:400px;
  background:#FFFFFF;border:1px solid var(--od-border);
  border-radius:16px;padding:24px 26px;
  display:flex;flex-direction:column;gap:12px;
  transition:box-shadow .25s,border-color .25s;
}
.t-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.07);border-color:rgba(245,196,0,.5)}
.t-text{
  font-size:18px;font-weight:500;line-height:1.7;
  color:var(--od-text-main);
}
.t-author{
  display:flex;align-items:center;gap:8px;
  padding-top:12px;border-top:1px solid var(--od-border);
}
.t-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--od-yellow);flex-shrink:0;
}
.t-name{font-size:16px;font-weight:700;color:var(--od-dark)}
.t-school{font-size:16px;color:var(--od-text-muted);margin-left:4px}

/* ══ CTA ══ */
.cta-section{background:#FFFFFF;text-align:center;padding:100px 0}
.cta-desc{font-size:20px;color:var(--od-text-sub);line-height:1.7;margin-bottom:40px}
.cta-btns{display:flex;gap:12px;justify-content:center}
.btn-dark{
  background:var(--od-dark);color:#FFFFFF;border:none;
  padding:16px 32px;border-radius:12px;font-size:16px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:background .2s,transform .15s;
}
.btn-dark:hover{background:#333;transform:translateY(-2px)}
.btn-dark-outline{
  background:#FFFFFF;color:var(--od-dark);border:1.5px solid var(--od-dark);
  padding:16px 32px;border-radius:12px;font-size:16px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:background .2s,color .2s,transform .15s;
}
.btn-dark-outline:hover{background:var(--od-dark);color:#FFFFFF;transform:translateY(-2px)}

/* ══ BLOG ══ */
.blog-section a{text-decoration:none;color:inherit}
.blog-section{background:var(--od-gray-bg);padding:100px 0}
.blog-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;align-items:stretch}
.blog-main-card{
  background:var(--od-yellow);border-radius:20px;padding:32px;min-height:300px;
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;
  transition:transform .3s;
}
.blog-main-card:hover{transform:translateY(-4px)}
.blog-main-card h3{font-size:40px;font-weight:800;color:var(--od-dark);line-height:1.3;z-index:1;position:relative}
.blog-main-card a{
  display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;
  font-size:16px;font-weight:700;color:var(--od-dark);
  z-index:1;position:relative;transition:gap .2s;
}
.blog-main-card a:hover{gap:10px}
.blog-main-card a::after{content:'→'}
.blog-card-char{position:absolute;bottom:0;right:16px;width:100px;height:100px;border-radius:12px}
.blog-col{display:flex;flex-direction:column}
.blog-col-title{
  font-size:16px;font-weight:800;color:var(--od-dark);margin-bottom:8px;
  display:flex;align-items:center;justify-content:space-between;
}
.blog-col-title a{font-size:16px;font-weight:600;color:var(--od-text-muted)}
.blog-col-title a:hover{color:var(--od-dark)}
.blog-item{
  display:flex;flex-direction:column;gap:4px;
  padding:14px 0;border-bottom:1px solid var(--od-border);cursor:pointer;
  transition:padding-left .2s;
   
}
.blog-item:hover{padding-left:6px}
.blog-item:last-child{border-bottom:none}
.blog-item-title{font-size:16px;font-weight:600;color:var(--od-dark);line-height:1.45;}
   
.blog-item-date{font-size:16px;color:var(--od-text-muted)}
.blog-banner{
  display:block;
  border-radius:20px;overflow:hidden;min-height:300px;
  background:#fff;border:1px solid #e3e3e3;
  color:#9AA0B4;transition:transform .3s;
  text-decoration:none;
  cursor:pointer;
  background-image: url('https://mall.oddlab.org/data/oddlab/img/sect-blog-2.jpg');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.blog-banner:hover{transform:translateY(-4px)}
.blog-banner svg{opacity:.4}
.blog-banner span{font-size:16px;font-weight:500;opacity:.7}

/* ══ MOBILE ══ */
/* 블로그 쪽만 일부 제어 */
@media (min-width: 1025px) {
  /* 1024px 초과만 적용될 스타일 */
   .blog-item-title {
    width: 360px;
    white-space: nowrap;         /* 줄바꿈 금지 */
    overflow: hidden;            /* 넘치는 콘텐츠 숨김 */
    text-overflow: ellipsis;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* 768px 초과, 1024px 이하에서만 적용될 스타일 */
   .blog-item-title {
    width: 240px;
    white-space: nowrap;         /* 줄바꿈 금지 */
    overflow: hidden;            /* 넘치는 콘텐츠 숨김 */
    text-overflow: ellipsis;
    }
    .m-hidden{display: none;}
    .blog-main-card h3 {font-size: 32px;}
    .blog-main-card {justify-content:flex-start;}
    .blog-banner {background-image: url('https://mall.oddlab.org/data/oddlab/img/sect-blog-2-.jpg');}
}



/* 일반 전반 모바일 및 태블릿 제어*/
@media(max-width:1024px){ /*햄신설*/
  .hero{background-position :65% 30%;}
  .hero-bubble1 {top:-120px; right:240px;}
  .hero-bubble2 {display: none;}
  .blog-item-title {width: 280px;}
}

@media(max-width:768px){
  .hero{background-position :70% 30%;}
  .hero-bubble1 {display: none;}
  .hero-bubble2 {display: none;}
  .hero-bubble3 {top:80px; right:-180px;}
  .blog-item-title {width: 100%;}
  .hero-inner{flex-direction:column-reverse;padding:32px 24px 48px;gap:24px;min-height:auto}
  .hero h1{font-size:50px; text-shadow:2px 2px 8px rgba(0, 0, 0, 0.6);}
  .hero .hero-desc {text-shadow:2px 2px 6px rgba(0, 0, 0, 0.6);}
  .hero-visual img{width:100%}
  .hero-bubble{top:auto;bottom:16px;right:8px;font-size:14px}
  .hero-btns{flex-direction:column}
  .btn-cta,.btn-outline{width:100%;text-align:center;justify-content:center}
  .section-wrap{padding:64px 0}
  .section-title{font-size:28px;margin-bottom:36px}
  .steps-grid{grid-template-columns:1fr;gap:16px}
  .pcard{width:240px;height:360px}
  .value-layout{grid-template-columns:1fr;gap:32px}
  .testi-track-wrap{margin:0 -24px}
  .testi-header{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:28px}
  .cta-btns{flex-direction:column;align-items:center}
  .btn-dark,.btn-dark-outline{width:100%;max-width:320px}
  .blog-grid{grid-template-columns:1fr;gap:20px}
}

@media(max-width:480px){
  /* hero */
  .hero{background-position :75% 45%; background-size: 1000px;}
  .hero-bubble1 {display: none;}
  .hero-bubble2 {display: none;}
  .hero-bubble3 {display: none;}
  .hero-desc {display: none;}
  .hero h1{font-size:42px}
  .pcard{width:200px;height:300px}
}