:root{
      --yellow:#d9dcf5; /* 메인 배경 */
      --text:#111;
      --muted:#6b7280;
      --line:#e5e7eb;
      --card:#f3f4f6; /* 회색 박스 */
      --max:1280px; /* 컨텐츠 최대폭 */
      --radius:18px;
    }
.divider {
  border: 0;
  height: 1px;
  margin: 80px 0;
  background: linear-gradient(to right, transparent, #999, transparent);
}


    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;font-family:Pretendard,system-ui,-apple-system,Segoe UI,Roboto,Arial,Apple SD Gothic Neo,Noto Sans KR,\"맑은 고딕\",sans-serif;color:var(--text);word-wrap: break-word;word-break : keep-all; }
    img{max-width:100%;height:auto;display:block}
    a{color:inherit;text-decoration:none}

    /* 헤더 */
	/* 초기엔 투명, 스크롤 후 흰 배경 */
	.header{
	  position:fixed; inset:0 0 auto 0; z-index:50;
	  transition: background .25s ease, box-shadow .25s ease;
	  background: transparent;                  /* ← 추가 */
	}
	.header.scrolled{
	  background:#fff; box-shadow:0 6px 24px rgba(0,0,0,.05);
	}
    .brand{font-weight:800;letter-spacing:.2px;font-size:1.5em}
    .brand small{font-weight:500;color:var(--muted)}


	/* 헤더 내부 간격 유지 */
	.header-inner{
	  max-width:var(--max);
	  margin:0 auto; padding:16px 20px;
	  display:flex; align-items:center; justify-content:space-between;
	  gap:14px;                                  /* ← 버튼이 2줄로 내려가도 여유 */
	}

	/* 버튼 그룹(선택) */
	.cta-group{display:flex; gap:12px; flex-wrap:wrap;}  /* ← 인라인 margin 대신 gap */

	/* 버튼 공통 */
	.cta{
	  display:inline-flex; gap:10px; align-items:center;
	  padding:10px 16px; border-radius:999px;
	  background:#111; color:#fff; font-weight:600;
	  border:1px solid #111;                     /* ← outline 변형을 위해 추가 */
	  transition: all .2s ease;
	}
	.cta:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.12); }

	/* 테두리형 변형(선택) */
	.cta.outline{
	  background:transparent; color:#111;
	}
	.cta.outline:hover{ background:#111; color:#fff; }

	/* 모바일 컴팩트 */
	@media (max-width:640px){
	  .brand{font-size:1.25em;}
	  .cta{padding:9px 12px; font-size:13px}
	}

    /* 히어로 */
    .hero{background:var(--yellow);padding-top:84px}
    .hero-inner{max-width:var(--max);margin:0 auto;padding:56px 20px 72px;display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
    .eyebrow{font-size:14px;color:#000;opacity:.9;margin-bottom:6px}
    .title{font-size:clamp(36px,6vw,64px);line-height:1.05;margin:0 0 8px}
    .subtitle{margin:0 0 22px;color:#3f3f46}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .btn{padding:12px 18px;border-radius:12px;border:1px solid #111;background:#111;color:#fff;font-weight:700}
    .btn.outline{background:transparent;color:#111}

    .ph{background:var(--card);border-radius:var(--radius);position:relative;overflow:hidden}
    .ph::after{content:"";display:block;/*aspect-ratio:16/10*/}
    .ph.tall::after{aspect-ratio:4/5}

	.ph {
	  overflow: hidden;   /* 넘치는 이미지 잘라내기 */
	  border-radius: 12px;
	}

	.ph img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;  /* 비율 유지 + 꽉 채우기 */
	  display: block;
	}



    /* 공통 레이아웃 */
    .section{padding:72px 20px}
    .container{max-width:var(--max);margin:0 auto}
    .section h2{text-align:center;font-size:clamp(32px,4.5vw,48px);font-weight:800;margin:0 0 14px}
    .section .lead{color:var(--muted);margin:0 0 28px}

    /* 카드 그리드 */
    .grid{display:grid;gap:48px}
    .grid.cols-2{grid-template-columns:repeat(2,1fr)}
    .grid.cols-3{grid-template-columns:repeat(3,1fr)}
    .grid.cols-4{grid-template-columns:repeat(4,1fr)}
    .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
    .card .body{padding:16px}
    .card h3{font-size:1.5em;font-weight:800}
    .muted{color:var(--muted)}

    /* 강조 박스 */
    .strip{background:var(--yellow)}
    .strip .container{padding:56px 20px}

    /* 스텝 카드 */
    .steps{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
    .step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
    .step .tag{display:inline-block;background:#111;color:#fff;border-radius:999px;padding:6px 10px;font-size:13px;margin-bottom:10px}

    /* 푸터 */
    footer{background:var(--yellow);padding:60px 20px;margin-top:28px}
    footer .foot-inner{max-width:var(--max);margin:0 auto;text-align:center;color:#1f2937}

    /* 반응형 */
    @media (max-width:1024px){
      .hero-inner{grid-template-columns:1fr}
      .grid.cols-4{grid-template-columns:repeat(2,1fr)}
      .grid.cols-3{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:640px){
      .grid.cols-2{grid-template-columns:1fr}
      .grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
      .steps{grid-template-columns:1fr}
      .cta{padding:9px 14px}
    }
    /* HERO (시안 반영) */
    .hero-v1{ background-color: var(--yellow); /* 베이스 */
  background-image: radial-gradient(#a7aadf 1px, transparent 2px);
  background-size: 40px 40px; /* 점 간격 */
  padding:250px 20px 250px;margin-top:0}
    .hero-v1 .inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
    .hero-v1 .kicker{font-weight:800;font-size:20px;letter-spacing:-0.2px;margin-bottom:14px}
    .hero-v1 .title{font-size:clamp(64px,9vw,100px);line-height:.95;margin:0 0 18px}
    .hero-v1 .pill{display:inline-block;background:#111;color:#fff;padding:12px 24px;border-radius:999px;font-weight:900;letter-spacing:.45em;margin-bottom:18px}
    .hero-v1 .desc{max-width:720px;color:#1f2937;font-weight:600;line-height:1.7}
    .hero-v1 .device{justify-self:end}
    .hero-v1 .device img{width:100%;height:auto;display:block;border-radius:24px;/*box-shadow:0 28px 64px rgba(0,0,0,.25)*/}
    @media (max-width:1024px){.hero-v1{padding:120px 20px 80px}.hero-v1 .inner{grid-template-columns:1fr}.hero-v1 .device{order:-1;justify-self:stretch}}
    /* WHAT section (centered, reusable) */
    #what{background:#f7f7f8;padding-top:180px;padding-bottom:180px}
    #what .head{max-width:980px;margin:0 auto 88px auto;text-align:center}
    #what .head h2{font-size:clamp(44px,6.4vw,60px);font-weight:900;letter-spacing:-0.02em;margin:0 0 20px}
    #what .head .lead{font-size:clamp(18px,2.2vw,24px);font-weight:800;color:#111;margin:0 0 30px}
    #what .head .desc{color:#4b5563;line-height:1.7;font-weight:600;margin:0 auto}
    #what .grid{margin-top:24px}
    #what .card{border:0;box-shadow:0 10px 24px rgba(0,0,0,.06);padding:28px;border-radius:22px;display:flex;flex-direction:column;gap:18px}
    #what .ph::after{/*aspect-ratio:16/9*/}


/* WHY section */
#why-choose {
  background: var(--yellow);
  padding: 196px 20px 180px;
}
#why-choose .top {
  max-width: var(--max);
  margin: 0 auto 86px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
#why-choose .icon-board {
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  padding: 22px;
}
#why-choose .icon-grid {
  display: grid;
 /* grid-template-columns: repeat(4,1fr);*/
  gap: 14px;
}
#why-choose .icon-grid .mini {
  background: #f2f3f5;
  border-radius: 16px;
  aspect-ratio: 1 / 1;
}

/* 우측 텍스트 영역 */
#why-choose .copy h2 {
  font-size: clamp(28px,3.6vw,40px);
  margin: 0 0 10px;
  font-weight: 900;
}
#why-choose .copy p { margin: 6px 0; color: #1f2937; line-height: 1.4; }

/* 하단 4 카드 */
#why-choose .feat-wrap { max-width: var(--max); margin: 8px auto 0; }
#why-choose .feat-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 22px;
}
#why-choose .feat-card {
  background:#fff;
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(0,0,0,.08);
  overflow: hidden;
}
#why-choose .feat-card .thumb {
  margin: 22px;
  background:#f2f3f5;
  border-radius: 14px;
  aspect-ratio: 16/12;
}
#why-choose .feat-card .body { padding: 0 22px 22px; }
#why-choose .feat-card h3 { margin: 30px 0 10px; font-size: 1.5em; line-height: 1.35; }
#why-choose .feat-card p { margin: 0; color: var(--muted); line-height: 1.65; }

@media (max-width: 1024px){

	#what {padding-top: 100px; padding-bottom: 100px;}
  #why-choose .top { grid-template-columns: 1fr; }
  #why-choose .feat-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  #why-choose { padding: 80px 18px 64px; }
  #why-choose .feat-grid { grid-template-columns: 1fr; }
}

/* CLASSROOM section */
#classroom-v1{background:#f7f7f8;padding:96px 20px}
#classroom-v1 .head{max-width:960px;margin:0 auto 28px;text-align:center}
#classroom-v1 .eyebrow{font-weight:800;color:#6b7280;margin-bottom:6px}
#classroom-v1 h2{font-size:clamp(28px,3.6vw,40px);margin:0 0 8px;font-weight:900}
#classroom-v1 .sub{color:#475569;line-height:1.7;margin:0}

#classroom-v1 .eco{max-width:var(--max);margin:28px auto 40px;background:#fff;border-radius:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);padding:22px}
#classroom-v1 .eco h3{margin:0 0 12px;text-align:center}
#classroom-v1 .eco .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
#classroom-v1 .eco .tile{background:var(--yellow);border-radius:12px;padding:18px;text-align:center;font-weight:800}
#classroom-v1 .eco .tile small{display:block;margin-top:4px;font-weight:600}

#classroom-v1 .alt{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:24px}
#classroom-v1 .alt .card{background:#fff;border-radius:18px;box-shadow:0 10px 24px rgba(0,0,0,.06);overflow:hidden}
#classroom-v1 .alt .body{padding:22px}
#classroom-v1 .alt .ph{min-height:180px;background:#eef0f3}

#classroom-v1 .grid3, #classroom-v1 .grid2{max-width:var(--max);margin:18px auto 0;display:grid;gap:22px}
#classroom-v1 .grid3{grid-template-columns:repeat(3,1fr)}
#classroom-v1 .grid2{grid-template-columns:repeat(2,1fr)}
#classroom-v1 .mini{background:#fff;border-radius:16px;box-shadow:0 10px 24px rgba(0,0,0,.06)}
#classroom-v1 .mini .thumb{margin:18px;background:#eef0f3;border-radius:12px;aspect-ratio:16/10}
#classroom-v1 .mini .body{padding:0 18px 18px}
#classroom-v1 .mini h4{margin:6px 0 8px}
#classroom-v1 .mini p{margin:0;color:#475569;line-height:1.65}

@media (max-width:1024px){
  #classroom-v1 .alt{grid-template-columns:1fr}
  #classroom-v1 .grid3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  #classroom-v1{padding:80px 18px}
  #classroom-v1 .eco .steps{grid-template-columns:1fr}
  #classroom-v1 .grid3,#classroom-v1 .grid2{grid-template-columns:1fr}
}

.lesson-v1{background:#fafafa;padding:100px 0}
.lesson-head{text-align:center;max-width:860px;margin:0 auto 64px}
.lesson-head .eyebrow{font-size:15px;color:#6b7280;margin-bottom:6px}
.lesson-head h2{font-size:clamp(32px,5vw,52px);font-weight:800;margin:0 0 16px}
.lesson-head .desc{color:#374151;line-height:1.7;font-size:16px}


.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:56px;text-align:center}
.steps .step{background:var(--yellow);border-radius:14px;padding:26px;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.steps .step span{display:block;margin-top:6px;font-weight:400;font-size:15px}


.lesson-cards{display:grid;gap:32px;margin-bottom:56px}
.lesson-cards.grid-2{grid-template-columns:repeat(2,1fr)}
.lesson-cards.grid-3{grid-template-columns:repeat(3,1fr)}
.lesson-cards .card{background:#fff;border-radius:20px;box-shadow:0 12px 28px rgba(0,0,0,.06);overflow:hidden;padding-top:40px;padding-bottom:40px}
.lesson-cards .card>.ph{margin:0 40px 20px;border-radius:14px;min-height:160px;background:#f3f4f6}
.lesson-cards .card .body{padding:0 40px 40px}
.lesson-cards .card .body .eyebrow{font-size:18px;color:#000;margin:0 0 6px;font-weight:800}
.lesson-cards .card h3{margin:6px 0 10px;font-size:24px;font-weight:800;line-height:1.4}
.lesson-cards .card p{margin:0;font-size:15px;line-height:1.7;color:#4b5563}


@media(max-width:1024px){
.steps{grid-template-columns:1fr}
.lesson-cards.grid-2,.lesson-cards.grid-3{grid-template-columns:1fr}
}


/* 생태계 보드 */
.ecosys{
  background:#fff;border-radius:22px;
  box-shadow:0 12px 28px rgba(0,0,0,.06);
  padding:26px;margin-bottom:56px;
}
.ecosys-title{
  text-align:center;margin:0 0 16px;
  font-weight:900;font-size:20px;
}
.ecosys-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ecosys .tile{
  background:var(--yellow);border-radius:18px;
  padding:32px 16px;text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
}
.ecosys .tile.light{background:#FDF0B4;} /* 중앙 밝은 톤 */
.ecosys .tile strong{display:block;font-size:24px}
.ecosys .tile small{display:block;margin-top:10px;color:#4b5563;font-weight:600}
@media(max-width:1024px){ .ecosys-tiles{grid-template-columns:1fr} }
/* 교차형 피처 행 */
.lesson-features{display:grid;gap:28px;margin-bottom:56px}
.feature-row{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  background:#fff;border-radius:20px;box-shadow:0 12px 28px rgba(0,0,0,.0);
  padding:0px;
}
.feature-row .media{background:#f3f4f6;border-radius:14px;min-height:220px}
.feature-row .content .eyebrow{font-size:3em;color:#000;margin:0 0 8px;font-weight: 100;}
.feature-row .content h3{margin:0 0 10px;font-size:2.4em;line-height:1.25;font-weight:800}
.feature-row.reverse .media{order:2}
.feature-row.reverse .content{order:1}
@media(max-width:1024px){
  .feature-row{grid-template-columns:1fr;padding: 30px;}
  .feature-row.reverse .media,.feature-row.reverse .content{order:initial}
}

/* 미래 배너 + 카피라이트 */
#future-cta{
   background-color: var(--yellow); /* 베이스 */
  background-image: radial-gradient(#a7aadf 1px, transparent 1px);
  background-size: 24px 24px; /* 점 간격 */
  padding: clamp(64px,10vw,220px) 20px;
  text-align: center;
}
#future-cta .inner{max-width: 980px; margin: 0 auto;}
#future-cta h2{
  font-size: clamp(32px,5.6vw,64px);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
#future-cta p{margin: 6px 0; font-weight: 800;}

#site-footer{
  background: #fff;
  padding: 56px 20px 84px;
  text-align: center;
}
#site-footer .brand{
  font-size: clamp(22px,3vw,32px);
  font-weight: 900;
  margin: 0 0 16px;
  text-align: center;

#site-footer .brand img{text-align:center}
}
#site-footer .copy{
  max-width: 960px;
  margin: 0 auto;
  color: #4b5563;
  line-height: 1.8;
  font-size: 14px;
}
.cardio_logo {width:100%;max-width:180px; text-align:center}
.cardio_logo_footer {width:100%;max-width:180px; text-align:center;margin: 0 auto;}

/* 연구 결과 + 생태계 카드 */
#research-ecosys{
  background:#fff;border-radius:22px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  padding:46px 46px;margin:0 auto 28px;max-width:var(--max);
}

/* 상단 카피 */
#research-ecosys .head{ text-align:center; margin-bottom:18px; }
#research-ecosys .head h3{
  margin:0 0 6px;font-weight:900;font-size:clamp(18px,2.3vw,32px);
}
#research-ecosys .head p{ margin:4px 0;color:#6b7280; }

/* 그래프 4개 */
.metrics{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin:40px 0 26px;
}
.metric{
  border:1px solid #eceef1;border-radius:14px;background:#fff;
  padding:24px;text-align:center;
}
.metric .chart{
  height:230px;display:flex;align-items:flex-end;justify-content:center;
  gap:25px;background:#f7f8fa;border-radius:10px;margin-bottom:10px;
}
.metric .bar{
  --c:#d1d5db; /* 기본 회색 */
  width:36px;border-radius:8px 8px 0 0;background:var(--c);
  position:relative;height:0%;
}
.metric .bar::after{
  content:attr(data-val);position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(100% + 6px);font-size:12px;font-weight:700;color:#111;
}
.metric .bar.primary{ --c:#111; }
.metric .bar.accent{ --c:#FFD352; }
.metric h4{ margin:15px 0 15px;font-size:16px;font-weight:800; }
.metric small{ color:#6b7280; }

/* STEP 보드 */
.eco-board{ padding-top:46px; }
.eco-board h5{ text-align:center;margin:40px 0 46px;font-size:32px;font-weight:900; }
.eco-tiles{ display:grid;grid-template-columns:repeat(3,1fr);gap:18px; }
.eco-tiles .tile{
  background:#cacdec;border-radius:18px;padding:28px 16px;text-align:center;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.eco-tiles .tile.mid{ background:#ecedf8; }
.eco-tiles .tile strong{ display:block;font-size:20px;margin-bottom:6px; }
.eco-tiles .tile span{ color:#4b5563; font-weight:400; }



.eco-board2{ padding-top:46px; }
.eco-board2 h5{ text-align:center;margin:40px 0 46px;font-size:32px;font-weight:900; }
.eco-tiles2{ display:grid;grid-template-columns:repeat(2,1fr);gap:18px; }
.eco-tiles2 .tile{
  background:#cacdec;border-radius:18px;padding:28px 16px;text-align:center;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.eco-tiles2 .tile.mid{ background:#ecedf8; }
.eco-tiles2 .tile strong{ display:block;font-size:20px;margin-bottom:6px; }
.eco-tiles2 .tile span{ color:#4b5563; font-weight:400; }


.eco-tiles3{ display:grid;grid-template-columns:repeat(4,1fr);gap:18px; }
.eco-tiles3 .tile{
  background:#cacdec;border-radius:18px;padding:28px 16px;text-align:center;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.eco-tiles3 .tile.mid{ background:#ecedf8; }
.eco-tiles3 .tile strong{ display:block;font-size:20px;margin-bottom:6px; }
.eco-tiles3 .tile span{ color:#4b5563; font-weight:400; }



@media (max-width:1024px){
  .metrics{ grid-template-columns:repeat(1,1fr); }
  .eco-tiles{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .metric .chart{ height:130px; }
}
.br-pc {
  display: none;
}
@media (min-width:1024px) { /* PC 해상도 기준 */
  .br-pc {
    display: block;
  }
}

/* 예: 모바일에서 폰트·여백 축소 */
@media (max-width: 980px) {
  html { font-size: 87.5%; } /* 14px 기반 (기존 16px 대비 0.875) */
  :root { --max: 92%; }      /* 컨테이너 폭 축소 */
  .section { padding: 56px 0px; }
  .card .body { padding: 14px 0px; }
  /* 필요 섹션별로 clamp()/gap/spacing을 추가로 축소 */


.eco-tiles2{ display:grid;grid-template-columns:repeat(2,1fr);gap:18px; }
.eco-tiles3{ display:grid;grid-template-columns:repeat(2,1fr);gap:18px; }


.hero-v1 .kicker {
    font-weight: 800;
    font-size: 14px;
    letter-spacing: -0.2px;
    margin-bottom: 14px;
}
.hero-v1 .pill {
    display: inline-block;
    background: #111;
    color: #fff;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: 0em;
    margin-bottom: 18px;
}


.hero-v1 .desc {
    max-width: 720px;
    color: #1f2937;
    font-weight: 400;
    line-height: 1.6;
	zoom:0.9
}

#research-ecosys {
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
    padding: 50px 26px;
    margin: 0 auto 28px;
    max-width: 100%;
}

.lesson-head .desc {
    color: #374151;
    line-height: 1.7;
    font-size: 14px;
}

.lesson-cards .card .body {
    padding: 0 30px 30px;
}

.lesson-cards .card>.ph {
    margin: 0 30px 20px;
    border-radius: 14px;
    min-height: 160px;
    background: #f3f4f6;
}

.lesson-cards .card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #4b5563;
}
}