/* Figma Frame 97 → HTML (375px 모바일 기준) */
*{box-sizing:border-box}
:root{color-scheme:only light}
html,body{margin:0;padding:0;background:#fff}
body{font-family:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;color:#000;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;line-height:1.2}
img{display:block}
.page{width:375px;margin:0 auto;position:relative;overflow:hidden;background:#fff}
.sec{position:relative;width:375px;overflow:hidden}
.abs{position:absolute}
.t{position:absolute;margin:0;white-space:nowrap}
.t.c{left:-1px;right:1px;text-align:center}
.bl{color:#1D74E7}

/* 공통 버튼 */
.btn{position:absolute;width:225px;height:50px;border-radius:10px;background:#1D74E7;box-shadow:3px 4px 4px rgba(0,0,0,.25);color:#fff;font-size:20px;font-weight:700;letter-spacing:-0.02em;display:flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap}
.btn:active{filter:brightness(.95)}

/* ===== S1 히어로 ===== */
.hero{background:linear-gradient(180deg,#F9FBFF 41.35%,#D8E7FF 100%)}
.logo{position:absolute;left:28px;top:24px;width:70px;height:38px;background:#D9D9D9;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:700;letter-spacing:-0.01em}
.phone{position:absolute;left:0;top:0;width:375px;height:700px}
.scr{position:absolute;left:61px;top:402px;width:254px;height:350.5px;background:#F4F4F4;border-radius:18px}
.scr-head{position:absolute;left:61px;top:402px;width:254px;height:76.5px;background:#fff;border-radius:9px 9px 0 0}
.rcard{position:absolute;left:81.9px;top:489.4px;width:211.2px;height:109.2px;border:2.28px solid #1D74E7;border-radius:17px;background:#fff}
.rpill{position:absolute;left:147px;top:504.8px;width:80.9px;height:18.7px;border-radius:9.3px;background:#E6F2FF;color:#1D74E7;font-size:10px;font-weight:400;display:flex;align-items:center;padding-left:19.5px;white-space:nowrap}
.rval{position:absolute;left:125.4px;top:556.7px;width:124.2px;height:27px;border-radius:4.8px;background:#1D74E7;color:#fff;font-size:23px;font-weight:700;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.lcard{position:absolute;left:81.9px;top:636.9px;width:211.2px;height:112.9px;background:#fff;border-radius:9.1px}
.lclip{position:absolute;left:2.8px;top:1.8px;width:205.7px;height:109.2px;overflow:hidden}
.lrow{margin:0 7.3px;height:27.57px;border-bottom:.46px solid #EBEBEB;display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:500;white-space:nowrap}
.lrow .v b{color:#1D74E7;font-weight:700}
.pframe{position:absolute;left:40.6px;top:382.6px;width:292.8px;height:589.4px}
.ico{position:absolute;left:0;top:0;pointer-events:none}

/* ===== S2 혹시 나도 해당될까 ===== */
.s2{background:#F9FBFF}
.pill2{position:absolute;left:107px;width:161px;height:27px;border-radius:13.5px;background:#1D74E7;color:#fff;font-size:14px;font-weight:600;letter-spacing:-0.04em;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.fcard{position:absolute;left:42px;width:290px;height:47px;border-radius:12px;background:#fff;border:.5px solid #D1D4D9;box-shadow:0 4px 10px rgba(29,116,231,.6);display:flex;align-items:center;padding-left:27.5px;font-size:16px;font-weight:500}
.fcard img{flex:none}
.fcard span{margin-left:28px;white-space:nowrap}

/* ===== S3 최적의 설계 (기울어진 카드) ===== */
.s3{background:#F2F3FF}
.tcard{position:absolute;width:199.7px;height:67.38px;border-radius:10px;background:#FEFEFD;transform:matrix(0.907108,-0.419209,0.856765,0.517406,0,0);transform-origin:0 0}
.tcard.gray{background:#DAD8D8}
.tcard span{position:absolute;transform:translate(-50%,-50%);font-size:16px;font-weight:700;line-height:1;white-space:nowrap}
.tsm{position:absolute;background:#DAD8D8;transform-origin:0 0}
.timg{transform-origin:0 0}

/* ===== S4 16조원 + 후기 캐러셀 ===== */
.s4{background:linear-gradient(180deg,#F9FBFF 0%,#EFF1F5 69.23%)}
.tms{position:absolute;left:0;width:375px;display:flex;gap:32px;padding:8px 80px 16px 11px;margin-top:-8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-left:11px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tms::-webkit-scrollbar{display:none}
.tm{flex:none;position:relative;width:284px;height:292px;border-radius:13px;background:#fff;border:1.5px solid #1D74E7;box-shadow:0 4px 8px rgba(29,116,231,.25);scroll-snap-align:start}
.tm h3{position:absolute;left:26px;top:36.6px;width:156px;margin:0;font-size:15px;line-height:19px;font-weight:600;letter-spacing:-0.02em;word-break:normal}
.tm h3 .bl{font-weight:600}
.tm .av{position:absolute;left:198.5px;top:36.5px;width:40px;height:40px;border-radius:50%}
.tm .nm{position:absolute;left:183.5px;top:84.5px;width:70px;height:16px;border-radius:8px;background:#C7E0FF;font-size:10px;font-weight:600;line-height:16px;text-align:center;letter-spacing:-0.03em;white-space:nowrap}
.tm .tg{position:absolute;left:183.5px;top:104.7px;width:70px;font-size:8px;line-height:10px;font-weight:700;text-align:center;white-space:nowrap}
.tm p{position:absolute;left:26px;top:142.7px;margin:0;font-size:12px;line-height:18px;font-weight:300;letter-spacing:-0.035em;white-space:nowrap}
.tm p .bl{font-weight:inherit}
.tdots{position:absolute;left:0;width:375px;display:flex;justify-content:center;gap:8px}
.tdots button{width:8px;height:8px;border-radius:4px;border:0;padding:0;background:#C7E0FF;cursor:pointer;transition:width .2s,background .2s}
.tdots button.on{width:20px;background:#1D74E7}

/* ===== S5 버튼 띠 ===== */
.s5{background:#F9FBFF}

/* ===== S6 조회 단계 ===== */
.s6{background:#F2F3FF}
.steps{position:absolute;left:32px;width:308px;height:340px;border-radius:18px;background:#fff}
.step{position:absolute;left:20px;height:24px}
.step i{position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:#E4E6EA;color:#4E5255;font-style:normal;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
.step.on i{background:#1D74E7;color:#fff}
.step b{position:absolute;left:40px;top:3.7px;font-size:15px;line-height:18px;font-weight:600;letter-spacing:-0.02em;white-space:nowrap}
.step span{position:absolute;left:40px;top:29.8px;font-size:15px;line-height:18px;font-weight:500;white-space:nowrap}
.stline{position:absolute;left:32px;width:1.2px;height:46px;background:#E4E6EA}

/* ===== S7 특허·인증 실적 ===== */
.s7{background:#fff}
.certs{position:absolute;left:12px;width:351px;filter:drop-shadow(0 3px 12px rgba(0,0,0,.25))}
.certs img{width:351px}
.certs .cm{position:relative;border-radius:0 0 4px 4px;overflow:hidden}
.certs .cm::after{content:"";position:absolute;inset:0;border:1px solid #E1E6EF;border-radius:0 0 4px 4px;pointer-events:none}

/* ===== S8 맞춤 진단 / 자금 설계 ===== */
.s8{background:#F1F3FF}
.pc{position:absolute;left:24px;width:327px;height:330px;border:1.5px solid #1D74E7;border-radius:10px;background:#fff}
.pc em{position:absolute;left:19px;top:21.8px;font-style:normal;font-size:16px;line-height:20px;font-weight:700;color:#1D74E7;white-space:nowrap}
.pc h3{position:absolute;left:18.5px;top:57.2px;margin:0;font-size:22px;line-height:29px;font-weight:700;color:#171B24;white-space:nowrap}
.pc p{position:absolute;left:18.5px;top:135.2px;margin:0;font-size:15px;line-height:23px;font-weight:400;color:#505967;white-space:nowrap}
.pc .chip{position:absolute;margin:-1.5px 0 0 -1.5px;border-radius:16.5px;background:#1D74E7;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.pc .t{margin:-1.5px 0 0 -1.5px}

/* ===== S9 상담 현황 테이블 ===== */
.s9{background:#F9FBFF}
.tbl{position:absolute;left:15px;width:344px;height:330.4px;background:#fff;font-size:10px}
.th,.tr{display:grid;grid-template-columns:55px 77px 69px 143px;align-items:center;text-align:center;white-space:nowrap}
.th{height:27.13px;margin-bottom:4.36px;background:#ECEDF9;font-weight:600}
.tr{height:27.13px;border-bottom:.97px solid #F2F2F2;font-weight:400}
.tr:first-of-type{border-top:.97px solid #F2F2F2}
.tr .no,.tr span:last-child{font-weight:500}
.tr span:last-child{letter-spacing:-0.03em}
.th span:last-child,.tr span:last-child{padding-left:9px}
.who{position:relative}
.who i{font-style:normal}
.who .mz{font-weight:inherit;filter:blur(2.6px);opacity:.7}
.tr.new{animation:rowIn .7s ease-out}
.tr.upd span:last-child{animation:flash 1.2s ease-out}
@keyframes rowIn{from{opacity:0;transform:translateY(-10px);background:#EAF2FF}to{opacity:1;transform:none;background:#fff}}
@keyframes flash{from{color:#1D74E7}to{color:inherit}}

/* ===== S10 / S11 푸터 ===== */
.s10{background:#fff}
.s11{background:#1D74E7}

/* ===== 스크롤 리빌 애니메이션 ===== */
.reveal{opacity:0;transform:translateY(28px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
/* tcard는 기존 회전 transform(matrix)을 유지해야 하므로 opacity만 애니메이션 */
.reveal-fade{opacity:0}
.reveal-fade.in{opacity:1;transition:opacity .7s cubic-bezier(.16,1,.3,1)}