/* POWERFIT 랜딩 — 시안 재현 (이너 1400px) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.css');

:root{
  --inner: 1400px;
  --blue-900:#121C9A;      /* 로고·헤드라인 강조·수치 */
  --blue-700:#2C36BE;
  --blue-600:#5766C5;      /* 아이콘·카드 번호 */
  --blue-050:#EEF0FB;
  --ink:#111114;
  --ink-2:#3A3A40;
  --ink-3:#6B6B73;
  --line:#E7E7EE;
  --bg-soft:#F7F7F8;
  --bg-trust:#F4F5FB;
  --navy:#2C3576;
  --navy-2:#232C63;
  --yellow:#FFE717;
  --naver:#03C75A;
  --star:#FBAF17;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* 메뉴 클릭 시 부드럽게 이동 (고정 헤더 높이만큼 여유) */
html{scroll-behavior:smooth; scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  color:var(--ink); background:#fff; -webkit-font-smoothing:antialiased;
  font-size:16px; line-height:1.55; word-break:keep-all;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

.inner{width:100%; max-width:var(--inner); margin:0 auto; padding:0 24px}
.sec-title{
  text-align:center; font-size:34px; font-weight:800; letter-spacing:-.02em;
  margin:0 0 30px; text-wrap:balance;
}
.sec-title .b{color:var(--blue-900)}

/* ── 스크롤 등장(아래→위) ─ 헤더·푸터 제외 ── */
html.js-aos .reveal{
  opacity:0; transform:translate3d(0,26px,0);
  transition:opacity .65s ease, transform .65s cubic-bezier(.22,.75,.28,1);
  will-change:opacity, transform;
}
html.js-aos .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html.js-aos .reveal{opacity:1 !important; transform:none !important; transition:none !important}
}

/* ── 헤더 ───────────────────────────────── */
.hd{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(6px)}
.hd .inner{display:flex; align-items:center; height:78px; gap:40px}
.logo{font-size:28px; font-weight:900; letter-spacing:-.02em; color:var(--blue-900)}
.gnb{display:flex; gap:44px; margin-left:auto; font-size:17px; font-weight:700; color:#2B2B31}
.gnb a:hover{color:var(--blue-700)}
.gnb a.on{color:var(--blue-700)}
.hd-toggle{display:none; margin-left:auto; width:42px; height:42px; border:0; background:none}
.hd-toggle span{display:block; height:2px; background:#222; margin:7px 4px; transition:transform .2s, opacity .2s}
.hd-toggle.on span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.hd-toggle.on span:nth-child(2){opacity:0}
.hd-toggle.on span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.m-nav{display:none}
.m-nav[hidden]{display:none}

/* ── 히어로 ─────────────────────────────── */
.hero{position:relative; background:#F5F5F5; overflow:hidden}
.hero-photo{
  position:absolute; top:0; bottom:0; left:auto;
  right:max(0px, calc(50% - 900px));
  width:min(62%, 1000px);
  background:url('../img/hero.webp') right bottom/cover no-repeat;
}
.hero-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,#F5F5F5 0%,#F5F5F5 10%,rgba(245,245,245,.9) 26%,rgba(245,245,245,.4) 44%,rgba(245,245,245,0) 60%);
}
.hero .inner{position:relative; z-index:2; padding-top:64px; padding-bottom:70px; min-height:700px}
.hero h1{font-size:58px; line-height:1.28; font-weight:900; letter-spacing:-.03em; margin:0 0 32px}
.hero h1 .b{color:var(--blue-900)}
.hero p.lead{font-size:20px; font-weight:600; color:var(--ink-2); line-height:1.78; margin:0 0 58px}
.routines{display:flex; gap:44px}
.routine{text-align:center; width:112px}
.routine .ic{
  width:94px; height:94px; margin:0 auto 14px; border-radius:50%; background:#fff;
  display:grid; place-items:center; box-shadow:0 6px 18px rgba(30,30,60,.10);
}
.routine .ic svg{width:47px; height:47px}
.routine b{display:block; font-size:20px; font-weight:800; letter-spacing:-.02em}
.routine em{display:block; margin-top:6px; font-style:normal; font-size:16px; font-weight:700; color:var(--blue-700)}
.hero-cta{
  position:absolute; right:max(24px,calc((100% - var(--inner))/2 + 24px)); bottom:44px; z-index:3;
  display:flex; align-items:center; gap:26px; background:#fff; border-radius:16px;
  padding:16px 22px; box-shadow:0 10px 30px rgba(20,20,50,.14);
}
.hero-cta .t{font-size:14px; font-weight:600; color:#55555C}
.hero-cta .n{display:flex; align-items:center; gap:10px; margin-top:4px; font-size:20px; font-weight:800}
.n-badge{width:26px; height:26px; border-radius:7px; background:var(--naver); color:#fff; font-weight:900; font-size:17px; display:grid; place-items:center}
.hero-cta .arw{font-size:26px; color:#8A8A93; font-weight:400}

/* ── 영상 ───────────────────────────────── */
.videosec{padding:58px 0 56px; background:#fff}
.videosec[hidden]{display:none}
.video-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px}
.video-card{
  margin:0; min-width:0; border-radius:16px; overflow:hidden; background:#0E1020;
  aspect-ratio:16/9; box-shadow:0 10px 30px rgba(20,20,60,.14);
}
.video-card[hidden]{display:none}
.video-card video{width:100%; height:100%; display:block; object-fit:contain; background:#0E1020}
.video-note{margin:18px auto 0; text-align:center; font-size:15px; color:var(--ink-3); font-weight:600; text-wrap:balance}

/* ── 7가지 가치 ─────────────────────────── */
.values{padding:60px 0 58px; background:#fff}
.values-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:16px}
.vcard{
  border:1px solid var(--line); border-radius:16px; background:#fff; padding:28px 12px 30px;
  text-align:center; box-shadow:0 2px 10px rgba(30,30,60,.03);
}
.vcard .ic{height:58px; display:grid; place-items:center; margin-bottom:16px}
.vcard .ic svg{width:54px; height:54px}
.vcard h3{margin:0 0 12px; font-size:21px; font-weight:800; color:var(--blue-700); letter-spacing:-.02em}
.vcard h3 i{font-style:normal; margin-right:3px}
.vcard p{margin:0; font-size:15.5px; line-height:1.7; color:var(--ink-2); font-weight:500}

/* ── 시험·특허 근거 ─────────────────────── */
.evidence{padding:56px 0 52px; background:var(--bg-soft)}
.ev-wrap{display:grid; grid-template-columns:480px minmax(0,1fr); gap:28px; align-items:stretch}
.ev-wrap > *{min-width:0}
.ev-photo{border-radius:14px; overflow:hidden; background:#fff}
.ev-photo img{width:100%; height:100%; min-height:330px; object-fit:cover}
.ev-panel{background:#fff; border-radius:14px; padding:8px 10px}
.ev-row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
.ev-row + .ev-row{border-top:1px solid var(--line)}
.ev-row.r2{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr)}
.ev-cell{padding:26px 14px; text-align:center; position:relative}
.ev-cell + .ev-cell::before{content:''; position:absolute; left:0; top:24px; bottom:24px; width:1px; background:var(--line)}
.ev-cell .k{font-size:clamp(14px,1.2vw,17px); font-weight:800; color:#2A2A30; margin-bottom:12px}
.ev-cell .v{font-size:clamp(17px,1.5vw,22px); font-weight:800; color:var(--blue-900); letter-spacing:-.02em; margin-bottom:12px; white-space:nowrap}
.ev-cell .v .pfx{display:inline}
.ev-cell .v strong{font-size:clamp(28px,2.9vw,42px); font-weight:900; letter-spacing:-.03em}
.ev-cell .v .u{font-size:clamp(15px,1.5vw,21px)}
.ev-cell .v .s{color:var(--ink); font-weight:800}
.ev-cell .src{font-size:clamp(12px,1.05vw,15px); color:var(--ink-3); font-weight:600; word-break:keep-all}
.ev-patent{display:flex; align-items:center; justify-content:center; gap:16px; padding:26px 14px; position:relative}
.ev-patent::before{content:''; position:absolute; left:0; top:24px; bottom:24px; width:1px; background:var(--line)}
.ev-patent svg{width:52px; height:52px; flex:none}
.ev-patent b{display:block; font-size:24px; font-weight:800; letter-spacing:-.02em}
.ev-patent span{display:block; margin-top:6px; font-size:16px; color:var(--ink-2); font-weight:600}
.ev-note{margin:18px 0 0; text-align:right; font-size:14px; color:var(--ink-3); font-weight:500; text-wrap:balance}

/* ── 남녀노소 ───────────────────────────── */
.targets{padding:56px 0 0; background:#fff}
.tg-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); max-width:2000px; margin:0 auto}
.tg{position:relative}
.tg img{width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; object-position:center 18%}
.tg .lab{
  padding:13px 8px; text-align:center; font-size:23px; font-weight:800; color:#fff; letter-spacing:-.02em;
}
.tg.male   .lab{background:#3A4A73}
.tg.female .lab{background:linear-gradient(90deg,#F0B7B3,#E8A6AC); color:var(--blue-900)}
.tg.student .lab{background:#3B4C88}
.tg.senior .lab{background:#3F3F91}
.tg .desc{padding:18px 10px 26px; text-align:center; font-size:16.5px; line-height:1.7; color:var(--ink-2); font-weight:600}

/* ── 후기 ───────────────────────────────── */
.reviews{padding:52px 0 48px; background:#F8F7F9}
.rv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.rv{background:#fff; border-radius:16px; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) clamp(120px,40%,210px); box-shadow:0 2px 12px rgba(30,30,60,.05)}
.rv .txt{padding:26px 22px 24px}
.stars{display:flex; gap:2px; margin-bottom:14px}
.stars svg{width:21px; height:21px}
.rv .q{margin:0 0 22px; font-size:16px; line-height:1.8; color:#2E2E34; font-weight:600}
.rv .who{font-size:15px; color:var(--ink-3); font-weight:600}
.rv .ph{overflow:hidden}
.rv .ph img{width:100%; height:100%; object-fit:cover; object-position:center 22%}
.rv-note{margin:22px 0 0; text-align:center; font-size:15px; font-weight:700; color:var(--blue-700); text-wrap:balance}

/* ── 신뢰 근거자료 ──────────────────────── */
.trust{padding:46px 0; background:var(--bg-trust)}
.trust .inner{display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr; gap:22px; align-items:center}
.trust-lead h2{margin:0 0 16px; font-size:29px; font-weight:800; line-height:1.45; letter-spacing:-.02em; color:var(--blue-900)}
.trust-lead p{margin:0; font-size:18px; font-weight:700; color:var(--ink-2)}
.tcard{background:#fff; border-radius:14px; padding:12px 12px 16px; text-align:center; box-shadow:0 2px 10px rgba(30,30,60,.05)}
.tcard .im{height:150px; border-radius:10px; overflow:hidden; background:#EDF1F8; display:grid; place-items:center}
.tcard .im img{width:100%; height:100%; object-fit:cover}
.tcard .im svg{width:96px; height:96px}
.tcard b{display:block; margin-top:14px; font-size:17.5px; font-weight:800; letter-spacing:-.02em}
.tcard span{display:block; margin-top:5px; font-size:15px; color:var(--ink-2); font-weight:600}

/* ── 이벤트 ─────────────────────────────── */
.event{background:linear-gradient(180deg,var(--navy),var(--navy-2)); color:#fff; padding:40px 0 44px}
.event .inner{display:grid; grid-template-columns:minmax(0,1fr) 560px; gap:32px; align-items:center}
.ev-badge{display:inline-block; background:rgba(255,255,255,.16); border-radius:0 999px 999px 0; padding:7px 26px 7px 18px; margin:0 0 18px -24px; font-size:16px; font-weight:800; color:#EDEBFF}
.event h2{margin:0 0 6px; font-size:36px; font-weight:800; letter-spacing:-.03em}
.event h3{margin:0 0 14px; font-size:29px; white-space:nowrap; font-weight:800; letter-spacing:-.03em; color:var(--yellow); text-wrap:balance}
.event .sub{margin:0 0 24px; font-size:18px; font-weight:600; color:#D9D9F0}
.steps{display:flex; align-items:center; gap:14px}
.step{background:#fff; color:#1D1D24; border-radius:12px; padding:14px 18px; display:flex; align-items:center; gap:12px; font-size:15px; font-weight:700; line-height:1.5}
.step svg{width:30px; height:30px; flex:none}
.steps .ar{font-size:22px; color:#CFCFE6}
.event .fine{margin:20px 0 0; font-size:13px; color:#C6C6DE; font-weight:500}
.ticket{position:relative; padding:30px 8px 0}
.ticket-img{border-radius:10px; overflow:hidden; transform:rotate(-3deg) scale(.96); box-shadow:0 14px 34px rgba(0,0,0,.34); display:grid; grid-template-columns:minmax(0,1fr) clamp(148px,34%,210px); background:#0C1230}
.ticket-l{position:relative; padding:34px 26px; background:url('../img/event_sky.webp') center/cover}
.ticket-l h4{margin:0; font-size:40px; line-height:1.1; font-weight:900; color:#fff; letter-spacing:-.02em}
.ticket-r{background:#F4F4F8; color:#1C1C33; padding:22px clamp(10px,1.4vw,20px); border-left:3px dashed #C9C9D8; min-width:0}
.ticket-r .kwda{font-size:clamp(15px,1.4vw,19px); font-weight:900; letter-spacing:.02em; margin-bottom:16px}
.ticket-r p{margin:0 0 8px; font-size:clamp(12.5px,1.25vw,17px); font-weight:800; line-height:1.35; word-break:keep-all}
.ticket-tag{
  position:absolute; right:-2px; top:-26px; width:104px; height:104px; border-radius:50%;
  background:#3A2FA8; color:#fff; display:grid; place-items:center; text-align:center;
  font-size:15px; font-weight:800; line-height:1.4; box-shadow:0 8px 20px rgba(0,0,0,.3);
}
.buy-btn{
  margin-top:22px; display:flex; align-items:center; justify-content:center; gap:12px;
  background:var(--naver); color:#fff; border-radius:10px; min-height:64px; padding:10px 14px;
  font-size:clamp(15px,1.7vw,23px); font-weight:800; letter-spacing:-.02em; text-align:center;
}
.buy-btn .n-badge{width:34px; height:34px; border-radius:9px; background:#fff; color:var(--naver); font-size:23px}

/* 이벤트 헤드라인 한 줄은 1400 이너가 온전히 확보될 때만 */
@media (max-width:1400px){ .event h3{white-space:normal} }
.buy-btn .arw{margin-left:8px; font-weight:500}
.buy-btn .buy-txt{word-break:keep-all}

/* ── 푸터 ───────────────────────────────── */
.ft{background:#1A1A22; color:#9A9AA6; padding:44px 0 34px; font-size:14px; line-height:1.8}
.ft-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:32px; align-items:start}
.ft-brand b{display:block; color:#E9E9F2; font-size:24px; font-weight:900; letter-spacing:-.02em}
.ft-brand p{margin:10px 0 0; font-size:15px; color:#B7B7C4; font-weight:600}
.ft-sep{display:inline-block; width:14px}
.ft-seller h3{margin:0 0 12px; font-size:15px; font-weight:800; color:#D6D6E2; letter-spacing:-.01em}
.ft-seller dl{margin:0; display:grid; gap:4px}
.ft-seller dl > div{display:flex; gap:14px}
.ft-seller dt{width:64px; flex:none; color:#7E7E8C; font-weight:600}
.ft-seller dd{margin:0; color:#C9C9D6; font-weight:600}
.ft-more{display:inline-block; margin-top:14px; padding:7px 14px; border:1px solid #3A3A47; border-radius:8px; color:#D6D6E2; font-size:13px; font-weight:700}
.ft-more:hover{border-color:#5A5A6C; color:#fff}
.ft-note{margin:12px 0 0; max-width:46em; font-size:12.5px; color:#75757F; line-height:1.7; text-wrap:balance}
.ft-bottom{margin-top:28px; padding-top:18px; border-top:1px solid #2A2A34; font-size:13px; color:#75757F}

/* ── 반응형 ─────────────────────────────── */
/* 1400 미만: 근거 수치 접두어(알파파)를 윗줄로 내려 3줄 깨짐 방지 */
@media (max-width:1400px){
  .ev-cell .v .pfx{display:block; margin-bottom:2px}
}

@media (max-width:1200px){
  .ev-photo img{min-height:0; height:auto; aspect-ratio:1.318}
  .videosec{padding:48px 0 46px}
  .values-grid{grid-template-columns:repeat(4,1fr)}
  .ev-wrap{grid-template-columns:minmax(0,1fr)}
  .trust .inner{grid-template-columns:repeat(2,1fr)}
  .trust-lead{grid-column:1/-1}
  .event .inner{grid-template-columns:minmax(0,1fr)}
  .event h3{white-space:normal}
}
@media (max-width:900px){
  html{scroll-padding-top:84px}
  .ft-top{grid-template-columns:minmax(0,1fr); gap:26px}
  .ft{padding:34px 0 28px}
  .videosec{padding:42px 0 40px}
  .video-grid{grid-template-columns:minmax(0,1fr); gap:16px}
  .video-card{border-radius:12px}
  .tg img{height:auto; aspect-ratio:3/4}
  .trust .inner{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tcard .im{height:auto; aspect-ratio:1/1}
  .gnb{display:none}
  .m-nav{display:block; border-top:1px solid var(--line); background:#fff; padding:8px 24px 14px}
  .m-nav[hidden]{display:none}
  .m-nav a{display:block; padding:13px 2px; font-size:16px; font-weight:700; border-bottom:1px solid #F1F1F6}
  .m-nav a:last-child{border-bottom:0; color:var(--blue-700)}
  .hd-toggle{display:block}
  .hero-photo{position:relative; width:100%; height:300px; background-position:64% 18%}
  .hero-photo::after{background:linear-gradient(180deg,rgba(245,245,245,0) 60%,#F5F5F5 100%)}
  .hero .inner{min-height:0; padding-top:34px; padding-bottom:34px}
  .hero h1{font-size:32px}
  .hero p.lead{font-size:16px; margin-bottom:30px}
  .routines{gap:18px; justify-content:space-between}
  .routine{width:auto; flex:1}
  .routine .ic{width:68px; height:68px}
  .routine .ic svg{width:34px; height:34px}
  .hero-cta{position:static; margin-top:30px; right:auto; bottom:auto}
  .sec-title{font-size:24px}
  .values{padding:48px 0}
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .ev-wrap{grid-template-columns:minmax(0,1fr)}
  .ev-row,.ev-row.r2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ev-cell{padding:20px 8px}
  .ev-cell .v{white-space:nowrap; font-size:16px}
  .ev-cell .v strong{font-size:27px}
  .ev-cell .v .u{font-size:14px}
  .ev-cell .k{font-size:14px}
  .ev-cell .src{font-size:12px}
  .ev-patent{padding:20px 8px; gap:12px; grid-column:1/-1}
  .ev-patent svg{width:40px; height:40px}
  .ev-patent b{font-size:18px}
  .event .inner{grid-template-columns:minmax(0,1fr)}
  .event h3{white-space:normal}
  .event > .inner > div{min-width:0}
  .steps{gap:8px}
  .step{padding:10px 12px; font-size:12px; gap:8px}
  .steps .ar{font-size:18px}
  .ev-cell + .ev-cell::before{display:none}
  .ev-cell{border-top:1px solid var(--line)}
  .ev-note{text-align:left}
  .tg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rv-grid{grid-template-columns:minmax(0,1fr)}
  .trust .inner{grid-template-columns:repeat(2,1fr)}
  .event h2{font-size:24px}
  .event h3{font-size:21px}
  .steps{flex-wrap:wrap}
  .event .inner{grid-template-columns:1fr}
  .ticket-img{grid-template-columns:minmax(0,1fr) clamp(124px,34%,150px); transform:none}
  .ticket-l{padding:24px 16px}
  .ticket-l h4{font-size:26px}
  .ticket-tag{width:84px; height:84px; font-size:12px; top:-22px; right:-2px}
  .buy-btn{font-size:clamp(14px,4.2vw,18px); min-height:56px}
}
/* 후기 카드: 1100 이하에서는 사진을 원본 비율(정사각)로 — 얼굴만 남는 과잉 크롭 방지 */
@media (max-width:1100px){
  .rv{grid-template-columns:minmax(0,1fr) clamp(104px,32%,180px); align-items:center}
  .rv .ph{display:grid; align-items:center; padding:14px 14px 14px 0}
  .rv .ph img{height:auto; aspect-ratio:3/4; border-radius:12px; object-position:center 12%}
}
@media (max-width:560px){
  .rv{grid-template-columns:minmax(0,1fr) 36%}
  .rv .q br.pc{display:none}
  .tg img{aspect-ratio:4/5}
  .steps{flex-direction:column; align-items:stretch; gap:6px}
  .steps .ar{display:block; text-align:center; transform:rotate(90deg); font-size:16px; line-height:1}
  .step{justify-content:center}
}
@media (max-width:480px){
  .ticket-r p{font-size:11.5px}
  .ticket-r .kwda{font-size:14px; margin-bottom:12px}
}
@media (max-width:420px){
  /* 아주 좁은 화면에서는 시안의 강제 줄바꿈을 풀어 자연스럽게 흐르게 */
  .vcard p br.pc, .tg .desc br.pc{display:none}
  .ticket-r{padding:14px 8px}
  .ticket-r p{font-size:11px}
  .ticket-l{padding:18px 12px}
  .ticket-l h4{font-size:21px}
}