@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
/* ===== 뷰티아카데미 프로그램 (모든 스타일은 .bna 안에서만 적용) ===== */
.bna{
  --navy:#5a4208; --navy2:#7a5c0a; --gold:#b8893c; --gold2:#d9b66a;
  --cream:#faf6ee; --line:#e8dcc4; --ink:#3a3220; --mute:#6b6150;
  --blue:#b08a1a; --green:#3f8a68; --violet:#6f5da0;
  font-family:'Pretendard','Noto Sans KR','Malgun Gothic',sans-serif;
  color:var(--ink); background:#fff; line-height:1.7; font-size:16px;
  word-break:keep-all; overflow:hidden;
}
.bna *{box-sizing:border-box}
.bna img{max-width:100%;display:block}
.bna h1,.bna h2,.bna h3,.bna p{margin:0}
.bna .wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.bna section{padding:72px 0}
.bna .alt{background:var(--cream)}
.bna .eyebrow{display:inline-block;font-size:15px;font-weight:700;letter-spacing:.14em;color:var(--gold);margin-bottom:10px}
.bna .sec-title{font-size:clamp(24px,3.4vw,34px);font-weight:800;color:var(--navy);line-height:1.35}
.bna .sec-desc{margin-top:12px;color:var(--mute);font-size:17px;max-width:720px}
.bna .sec-head{margin-bottom:40px}

/* HERO */
.bna .hero{position:relative;background:linear-gradient(135deg,#4a3606 0%,#7a5c0a 60%,#946f00 100%);color:#fff;padding:84px 0 92px}
.bna .hero:before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 85% 20%,rgba(217,182,106,.28),transparent 45%),
  radial-gradient(circle at 10% 90%,rgba(217,182,106,.14),transparent 40%)}
.bna .hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.bna .hero .eyebrow{color:var(--gold2)}
.bna .hero h1{font-size:clamp(30px,5vw,50px);font-weight:800;line-height:1.28;letter-spacing:-.01em}
.bna .hero h1 em{font-style:normal;color:var(--gold2)}
.bna .hero p.lead{margin-top:20px;font-size:18px;color:rgba(255,255,255,.88);max-width:560px}
.bna .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.bna .chip{font-size:15px;padding:8px 16px;border:1px solid rgba(217,182,106,.6);border-radius:99px;color:#f6e8c6;background:rgba(255,255,255,.06)}
.bna .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.bna .btn{display:inline-block;padding:14px 28px;border-radius:99px;font-weight:700;font-size:16px;text-decoration:none;transition:transform .25s,box-shadow .25s,background .25s}
.bna .btn.gold{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#3b2f12}
.bna .btn.line{border:1.5px solid rgba(255,255,255,.6);color:#fff}
.bna .btn:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.bna .hero-img{position:relative}
.bna .hero-img .frame{border-radius:28px;overflow:hidden;border:1px solid rgba(217,182,106,.6);box-shadow:0 24px 60px rgba(0,0,0,.4);background:#3a2a04;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;animation:bnaFloat 6s ease-in-out infinite}
.bna .hero-img img{width:100%;height:100%;object-fit:cover}
.bna .hero-img .fallback{padding:24px;text-align:center;color:var(--gold2);font-weight:700;font-size:20px;line-height:1.5}
.bna .hero-img .badge{position:absolute;left:-14px;bottom:26px;background:#fff;color:var(--navy);border-radius:16px;padding:12px 18px;font-weight:800;font-size:15px;box-shadow:0 12px 30px rgba(0,0,0,.3);line-height:1.4}
.bna .hero-img .badge b{color:var(--gold);font-size:22px;display:block}
@keyframes bnaFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* CARD (PC에서만 박스) */
.bna .card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 8px 28px rgba(90,66,8,.06);transition:transform .3s,box-shadow .3s}
.bna .card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(90,66,8,.12)}

/* 개요 */
.bna .info{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.bna .info .card{display:flex;gap:18px;align-items:flex-start}
.bna .ico{flex:none;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#f6e8c6,#ead29b);display:flex;align-items:center;justify-content:center;font-size:24px}
.bna .info h3{font-size:17px;color:var(--navy);font-weight:800;margin-bottom:4px}
.bna .info p{font-size:16px;color:var(--ink)}
.bna .info p small{display:block;font-size:15px;color:var(--mute)}

/* 당일 진행 */
.bna .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.bna .step{text-align:center}
.bna .step .no{display:inline-block;font-size:15px;font-weight:800;letter-spacing:.1em;color:#fff;background:var(--navy);padding:5px 16px;border-radius:99px;margin-bottom:14px}
.bna .step .em{font-size:40px;margin-bottom:6px}
.bna .step h3{font-size:19px;color:var(--navy);font-weight:800;margin-bottom:8px}
.bna .step p{font-size:16px;color:var(--mute)}
.bna .step .time{margin-top:10px;display:inline-block;font-size:15px;font-weight:700;color:var(--gold)}
.bna .step:not(:last-child) .card:after{content:"›";position:absolute;right:-16px;top:46%;font-size:30px;color:var(--gold);font-weight:700}
.bna .step .card{position:relative;height:100%}
.bna .note{margin-top:28px;padding:18px 22px;border-left:4px solid var(--gold);background:#fff;border-radius:0 14px 14px 0;font-size:16px;color:var(--ink)}

/* 키트 */
.bna .kit{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bna .kit .card{text-align:center;border-top:5px solid var(--c)}
.bna .kit .k1{--c:var(--blue)} .bna .kit .k2{--c:var(--gold)} .bna .kit .k3{--c:var(--green)}
.bna .kit .num{width:40px;height:40px;border-radius:50%;background:var(--c);color:#fff;font-weight:800;display:inline-flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:12px}
.bna .kit h3{font-size:20px;color:var(--navy);font-weight:800}
.bna .kit .tag{display:inline-block;margin:10px 0;font-size:16px;font-weight:800;color:var(--c)}
.bna .kit p{font-size:16px;color:var(--mute)}

/* 시술교육 4단계 */
.bna .how{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.bna .how .card{padding:24px 22px}
.bna .how .n{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:12px;font-size:16px}
.bna .how h3{font-size:18px;color:var(--navy);font-weight:800;margin-bottom:6px}
.bna .how p{font-size:16px;color:var(--mute)}
.bna .how .key{border-color:var(--gold);box-shadow:0 10px 30px rgba(184,137,60,.18)}
.bna .how .key .n{background:var(--gold)}
.bna .how .key h3 b{color:#d0463b}

/* 타임라인 */
.bna .tl{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bna .tl:before{content:"";position:absolute;left:8%;right:8%;top:30px;height:3px;background:linear-gradient(90deg,var(--gold2),var(--gold));transform-origin:left;transform:scaleX(0);transition:transform 1.4s ease .2s}
.bna .tl.in:before{transform:scaleX(1)}
.bna .round{position:relative;padding-top:0}
.bna .round .dot{position:relative;z-index:1;width:60px;height:60px;border-radius:50%;margin:0 auto 18px;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#3b2f12;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px #fff}
.bna .round h3{font-size:20px;color:var(--navy);font-weight:800;text-align:center}
.bna .round .who{display:block;text-align:center;margin:6px 0 14px;font-size:15px;font-weight:700;color:var(--gold)}
.bna .round .self{color:var(--green)}
.bna .round ul{list-style:none;margin:0;padding:0}
.bna .round li{font-size:16px;color:var(--ink);padding:8px 0 8px 22px;position:relative;border-top:1px dashed var(--line)}
.bna .round li:first-child{border-top:0}
.bna .round li:before{content:"";position:absolute;left:2px;top:17px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.bna .round li b{color:var(--navy)}
.bna .badge-self{margin-top:36px;display:flex;gap:16px;align-items:center;background:linear-gradient(135deg,#eaf5ef,#f4faf6);border:1px solid #cfe6d9;border-radius:20px;padding:22px 26px}
.bna .badge-self .ico{background:#cfe6d9}
.bna .badge-self p{font-size:17px;color:#25533e}
.bna .badge-self p b{color:#1c7a50}

/* 주의 */
.bna .care{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.bna .care .card{padding:22px 24px}
.bna .care h3{font-size:17px;color:var(--navy);font-weight:800;margin-bottom:4px}
.bna .care p{font-size:16px;color:var(--mute)}

/* CTA */
.bna .cta{background:linear-gradient(135deg,#4a3606,#7a5c0a);color:#fff;text-align:center}
.bna .cta h2{font-size:clamp(24px,3.6vw,36px);font-weight:800;line-height:1.4}
.bna .cta h2 em{font-style:normal;color:var(--gold2)}
.bna .cta p{margin:14px auto 0;font-size:17px;color:rgba(255,255,255,.85);max-width:640px}
.bna .place{display:inline-block;margin-top:28px;text-align:left;background:rgba(255,255,255,.07);border:1px solid rgba(217,182,106,.5);border-radius:18px;padding:20px 28px;font-size:16px;line-height:1.9}
.bna .place b{color:var(--gold2);margin-right:8px}
.bna .cta .btns{justify-content:center}
.bna .disc{background:#f3f1ec;padding:28px 0;font-size:15px;color:#766c58;line-height:1.7}

/* 등장 애니메이션 */
.bna.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease;transition-delay:var(--d,0s)}
.bna.js .rv.in{opacity:1;transform:none}

/* 태블릿 */
@media (max-width:960px){
  .bna .hero .wrap{grid-template-columns:1fr;gap:36px}
  .bna .hero-img{max-width:440px;margin:0 auto;width:100%}
  .bna .steps,.bna .how{grid-template-columns:repeat(2,1fr)}
  .bna .step:not(:last-child) .card:after{display:none}
}

/* 모바일: 박스 없이, 좌우 여백 15px */
@media (max-width:768px){
  .bna section{padding:48px 0}
  .bna .wrap{padding:0 15px}
  .bna .hero{padding:52px 0 56px}
  .bna .hero-img .badge{left:10px;bottom:14px}
  .bna .card{background:none;border:0;border-radius:0;box-shadow:none;padding:0 0 22px;border-bottom:1px solid var(--line);margin-bottom:22px}
  .bna .card:hover{transform:none;box-shadow:none}
  .bna .info,.bna .steps,.bna .kit,.bna .how,.bna .tl,.bna .care{grid-template-columns:1fr;gap:0}
  .bna .info .card:last-child,.bna .steps .step:last-child .card,.bna .kit .card:last-child,.bna .how .card:last-child,.bna .care .card:last-child{border-bottom:0;margin-bottom:0}
  .bna .kit .card{border-top:0;text-align:left}
  .bna .how .key{border-color:var(--line);box-shadow:none}
  .bna .step{text-align:left}
  .bna .step .card{display:block}
  .bna .tl:before{left:29px;right:auto;top:0;bottom:0;width:3px;height:auto;transform:scaleY(0);transform-origin:top}
  .bna .tl.in:before{transform:scaleY(1)}
  .bna .round{padding-left:76px;margin-bottom:28px}
  .bna .round .dot{position:absolute;left:0;top:0;margin:0}
  .bna .round h3,.bna .round .who{text-align:left}
  .bna .badge-self{background:none;border:0;border-top:1px solid #cfe6d9;border-radius:0;padding:22px 0 0}
  .bna .note{background:none;padding:6px 0 6px 16px;border-radius:0}
  .bna .place{background:none;border:0;border-top:1px solid rgba(217,182,106,.5);border-bottom:1px solid rgba(217,182,106,.5);border-radius:0;padding:18px 0;display:block}
  .bna .btn{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .bna *{animation:none!important;transition:none!important}
  .bna.js .rv{opacity:1;transform:none}
  .bna .tl:before{transform:none}
}

/* ===== v2: 전체폭(100%) · 모바일 보강 ===== */
.bna{width:var(--bna-vw,100vw);max-width:var(--bna-vw,100vw);margin-left:calc(50% - var(--bna-vw,100vw) / 2);margin-right:0}
html:has(.bna),body:has(.bna){overflow-x:clip}
.bna .hero-img .frame img{transition:transform 1.2s ease}
.bna .hero-img:hover .frame img{transform:scale(1.05)}
.bna .eyebrow{animation:bnaGlow 3s ease-in-out infinite}
@keyframes bnaGlow{0%,100%{opacity:1}50%{opacity:.65}}
.bna .btn.gold{background-size:200% 100%;animation:bnaShine 4s ease-in-out infinite}
@keyframes bnaShine{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}
@media (max-width:768px){
  .bna .wrap{padding-left:15px;padding-right:15px}
  .bna .hero{padding:44px 0 48px}
  .bna .hero .wrap{gap:28px}
  .bna .hero h1{font-size:30px;line-height:1.3}
  .bna .hero p.lead{font-size:16px;margin-top:16px}
  .bna .chips{gap:8px;margin-top:20px}
  .bna .btns{margin-top:24px}
  .bna .hero-img{max-width:none;width:100%}
  .bna .hero-img .frame{border-radius:20px}
  .bna .sec-head{margin-bottom:26px}
  .bna .sec-desc{font-size:16px}
  .bna .step .em{font-size:34px}
  .bna .kit .card,.bna .how .card,.bna .care .card,.bna .info .card{padding-bottom:20px;margin-bottom:20px}
  .bna .round{margin-bottom:24px}
  .bna .cta h2{font-size:24px}
  .bna .disc{padding:22px 0}
}


/* ===== program_02 수소건강 전용 ===== */
.bna{--aqua:#2d9cb5;--aqua2:#8bdcea}
.bna .hero:before{background:radial-gradient(circle at 85% 20%,rgba(139,220,234,.30),transparent 45%),radial-gradient(circle at 10% 90%,rgba(217,182,106,.16),transparent 40%)}
.bna .hero-img.coll .frame{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px;background:rgba(255,255,255,.1)}
.bna .hero-img.coll .cell{background:#fff;border-radius:16px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.bna .hero-img.coll .cell img{width:100%;height:100%;object-fit:contain;padding:8px}
.bna .hero-img.coll .badge b{color:var(--aqua)}
.bna .chain{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bna .chain .it{position:relative;text-align:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 18px}
.bna .chain .it:not(:last-child):after{content:"›";position:absolute;right:-14px;top:42%;font-size:28px;color:var(--aqua);font-weight:700}
.bna .chain .em{font-size:34px;margin-bottom:6px}
.bna .chain h3{font-size:18px;color:var(--navy);font-weight:800;margin-bottom:4px}
.bna .chain p{font-size:16px;color:var(--mute)}
.bna .chain .last{border-color:var(--aqua);background:linear-gradient(135deg,#eef9fc,#fff)}
.bna .prod{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bna .prod .card{padding:0;overflow:hidden}
.bna .prod .pic{background:#f1f8fb;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.bna .prod .pic img{width:100%;height:100%;object-fit:contain;padding:14px;transition:transform .6s ease}
.bna .prod .card:hover .pic img{transform:scale(1.07)}
.bna .prod .body{padding:20px 22px 24px}
.bna .prod .type{display:inline-block;font-size:15px;font-weight:800;color:var(--aqua);margin-bottom:2px}
.bna .prod h3{font-size:20px;color:var(--navy);font-weight:800}
.bna .prod p{font-size:16px;color:var(--mute);margin-top:6px}
.bna .prod .main{border-color:var(--aqua);box-shadow:0 12px 32px rgba(45,156,181,.18)}
.bna .steps.s3{grid-template-columns:repeat(3,1fr)}
.bna .tipbox{margin-top:28px;display:flex;gap:16px;align-items:center;background:linear-gradient(135deg,#eef9fc,#f7fcfd);border:1px solid #cdebf2;border-radius:20px;padding:22px 26px}
.bna .tipbox .ico{background:#cdebf2}
.bna .tipbox p{font-size:17px;color:#1d5f70}
.bna .tipbox p b{color:#13495a}
.bna .tipbox a{color:#13495a;font-weight:800}
@media (max-width:960px){
  .bna .chain,.bna .prod{grid-template-columns:repeat(2,1fr)}
  .bna .chain .it:after{display:none}
}
@media (max-width:768px){
  .bna .hero-img.coll .frame{padding:8px;gap:8px}
  .bna .chain,.bna .prod,.bna .steps.s3{grid-template-columns:1fr;gap:0}
  .bna .chain .it{background:none;border:0;border-radius:0;border-bottom:1px solid var(--line);padding:0 0 18px;margin-bottom:18px;text-align:left}
  .bna .chain .last{background:none}
  .bna .chain .it:last-child{border-bottom:0;margin-bottom:0}
  .bna .prod .card{padding:0 0 22px;margin-bottom:22px}
  .bna .prod .card:last-child{margin-bottom:0;border-bottom:0}
  .bna .prod .pic{border-radius:16px}
  .bna .prod .body{padding:14px 0 0}
  .bna .prod .main{border-color:var(--line);box-shadow:none}
  .bna .tipbox{background:none;border:0;border-top:1px solid #cdebf2;border-radius:0;padding:22px 0 0}
}


/* ===== 소변분석기 전용 ===== */
.bna .hero:before{background:radial-gradient(circle at 85% 20%,rgba(120,200,235,.30),transparent 45%),radial-gradient(circle at 10% 90%,rgba(217,182,106,.16),transparent 40%)}
.bna .vf{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05))}
.bna .phone{width:58%;max-width:230px;background:#fff;border-radius:26px;padding:16px 14px 18px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.bna .phone .pt{font-size:15px;font-weight:800;color:#1e4fd0;text-align:center;margin-bottom:10px}
.bna .phone .gauge{display:flex;justify-content:center;gap:12px;margin-bottom:10px}
.bna .phone .gauge span{width:46px;height:46px;border-radius:50%;color:#fff;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center}
.bna .phone .g1{background:#2f6fd8}.bna .phone .g2{background:#e04a4a}
.bna .phone .ln{height:10px;border-radius:5px;background:#e6edf7;margin:9px 0}
.bna .phone .ln.s{width:70%}
.bna .strip{display:flex;gap:6px;background:#fff;padding:10px 12px;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.bna .strip i{display:block;width:20px;height:34px;border-radius:4px;animation:bnaPad 3.6s ease-in-out infinite}
.bna .strip i:nth-child(1){background:#f6e9a6}.bna .strip i:nth-child(2){background:#efd37f;animation-delay:.2s}
.bna .strip i:nth-child(3){background:#c8dc8d;animation-delay:.4s}.bna .strip i:nth-child(4){background:#8fcf9d;animation-delay:.6s}
.bna .strip i:nth-child(5){background:#7fc4b8;animation-delay:.8s}.bna .strip i:nth-child(6){background:#79b6d8;animation-delay:1s}
.bna .strip i:nth-child(7){background:#9b9fe0;animation-delay:1.2s}.bna .strip i:nth-child(8){background:#c58fd6;animation-delay:1.4s}
.bna .strip i:nth-child(9){background:#e58fb4;animation-delay:1.6s}.bna .strip i:nth-child(10){background:#f0a07a;animation-delay:1.8s}
@keyframes bnaPad{0%,100%{filter:saturate(.75) brightness(1.06)}50%{filter:saturate(1.6) brightness(.93)}}
.bna .uritems{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.bna .ur{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 16px 18px;transition:transform .3s,box-shadow .3s}
.bna .ur:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(90,66,8,.12)}
.bna .ur:before{content:"";position:absolute;left:0;top:0;right:0;height:6px;background:var(--p)}
.bna .ur h3{font-size:18px;color:var(--navy);font-weight:800;margin-bottom:4px}
.bna .ur p{font-size:16px;color:var(--mute)}
.bna .u1{--p:#f0d27a}.bna .u2{--p:#d7c97a}.bna .u3{--p:#c8dc8d}.bna .u4{--p:#8fcf9d}.bna .u5{--p:#7fc4b8}
.bna .u6{--p:#79b6d8}.bna .u7{--p:#9b9fe0}.bna .u8{--p:#c58fd6}.bna .u9{--p:#e58fb4}.bna .u10{--p:#f0a07a}
.bna .bands{display:grid;gap:14px}
.bna .band{display:grid;grid-template-columns:210px 1fr;gap:20px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 20px}
.bna .band .lv{border-radius:14px;padding:12px;text-align:center;font-weight:800;font-size:18px;color:#3b2f12;background:var(--b)}
.bna .band .lv small{display:block;font-size:15px;font-weight:700}
.bna .band p{font-size:16px;color:var(--ink)}
.bna .bd1{--b:#b9ecc6}.bna .bd2{--b:#fff08a}.bna .bd3{--b:#ffc766}.bna .bd4{--b:#ff9b92}
@media (max-width:960px){.bna .uritems{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){
  .bna .vf{padding:16px;gap:16px}
  .bna .uritems{grid-template-columns:1fr;gap:0}
  .bna .ur{background:none;border:0;border-bottom:1px solid var(--line);border-left:6px solid var(--p);border-radius:0;padding:4px 0 14px 14px;margin-bottom:14px}
  .bna .ur:before{display:none}
  .bna .ur:hover{transform:none;box-shadow:none}
  .bna .ur:last-child{border-bottom:0;margin-bottom:0}
  .bna .band{grid-template-columns:1fr;gap:10px;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0 0 16px;margin-bottom:6px}
  .bna .band:last-child{border-bottom:0}
}