/* ─── RingToll HowItWorksPage - main.css ─── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-family:'Noto Sans KR',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{background:#F5F6F8;color:#111;overflow-x:hidden}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
ul{list-style:none}

/* ─── Nav ─── */
.top-nav{background:#fff;border-bottom:1px solid #f3f4f6;position:sticky;top:0;z-index:50}
.top-nav-inner{max-width:1280px;margin:0 auto;padding:0 16px;height:56px;display:flex;align-items:center;justify-content:space-between}
.nav-left{display:flex;align-items:center;gap:12px}
.nav-back{display:flex;align-items:center;gap:6px;color:#6B7280;font-size:14px;transition:color .2s}
.nav-back:hover{color:#111}
.nav-back svg{width:20px;height:20px}
.nav-sep{width:1px;height:16px;background:#E5E7EB}
.nav-brand{display:flex;align-items:center;gap:6px}
.nav-brand svg{width:20px;height:20px;color:#0033A0}
.nav-brand span{font-size:14px;color:#111}
.nav-start{font-size:14px;padding:6px 16px;background:#0033A0;color:#fff;border-radius:20px;transition:background .2s}
.nav-start:hover{background:#002280}

/* ─── Hero ─── */
.hiw-hero{background:#0033A0;color:#fff;padding:40px 0 56px;position:relative;overflow:hidden;text-align:center}
.hiw-hero-bg{position:absolute;inset:0;pointer-events:none}
.hiw-hero-bg .hg1{position:absolute;top:0;right:0;width:60%;height:100%;background:linear-gradient(to bottom left,rgba(0,82,204,.4),transparent)}
.hiw-hero-bg .hg2{position:absolute;bottom:0;left:0;width:40%;height:60%;background:linear-gradient(to top right,rgba(0,26,92,.5),transparent)}
.hiw-hero-inner{max-width:1280px;margin:0 auto;padding:0 16px;position:relative;z-index:1}
.hiw-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:6px 16px;margin-bottom:16px}
.hiw-badge svg{width:14px;height:14px;color:#FCD34D}
.hiw-badge span{font-size:12px;color:rgba(255,255,255,.9)}
.hiw-hero h1{font-size:clamp(1.6rem,3vw,2.25rem);letter-spacing:-.02em;margin-bottom:12px}
.hiw-hero h1 .accent{color:#60B5FF}
.hiw-hero-desc{color:rgba(255,255,255,.6);font-size:14px;max-width:480px;margin:0 auto 24px}
/* Toggle */
.perspective-toggle{display:inline-flex;background:rgba(255,255,255,.1);backdrop-filter:blur(4px);border-radius:12px;padding:4px;border:1px solid rgba(255,255,255,.2)}
.persp-btn{display:flex;align-items:center;gap:8px;padding:8px 20px;border-radius:8px;font-size:14px;transition:all .25s}
.persp-btn svg{width:16px;height:16px}
.persp-btn.active{background:#fff;color:#0033A0;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.persp-btn:not(.active){color:rgba(255,255,255,.7)}
.persp-btn:not(.active):hover{color:#fff}

/* ─── Main Layout ─── */
.hiw-main{max-width:1200px;margin:0 auto;padding:32px 16px 48px}
.hiw-grid{display:grid;gap:40px;align-items:start}
@media(min-width:1024px){.hiw-grid{grid-template-columns:1fr 400px}}
.hiw-steps-col{order:2}
@media(min-width:1024px){.hiw-steps-col{order:1}}
.hiw-phone-col{order:1}
@media(min-width:1024px){.hiw-phone-col{order:2;position:sticky;top:80px}}

/* Steps */
.steps-label{font-size:12px;color:#9CA3AF;text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px;padding-left:4px}
.step-card{width:100%;text-align:left;border-radius:16px;padding:20px;transition:all .35s;border:2px solid transparent;margin-bottom:16px;cursor:pointer;background:rgba(255,255,255,.6)}
.step-card:hover{background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.06);border-color:#E5E7EB}
.step-card.active{background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.08);border-color:rgba(0,51,160,.4);transform:scale(1.01)}
.step-top{display:flex;gap:16px;align-items:flex-start}
.step-icon-wrap{position:relative;flex-shrink:0}
.step-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:background .3s}
.step-icon svg{width:20px;height:20px;transition:color .3s}
.step-card:not(.active) .step-icon{background:#E5E7EB}
.step-card:not(.active) .step-icon svg{color:#9CA3AF}
.step-card.active .step-icon svg{color:#fff}
.step-num-badge{position:absolute;top:-4px;right:-4px;width:20px;height:20px;background:#0033A0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;color:#fff;opacity:0;transform:scale(0);transition:all .3s}
.step-card.active .step-num-badge{opacity:1;transform:scale(1)}
.step-content{flex:1;min-width:0}
.step-meta{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.step-meta .step-num{font-size:10px;color:#9CA3AF;text-transform:uppercase;letter-spacing:.05em}
.step-current-tag{font-size:9px;padding:2px 8px;border-radius:10px;color:#fff;opacity:0;transform:scale(.8);transition:all .3s}
.step-card.active .step-current-tag{opacity:1;transform:scale(1)}
.step-card h3{font-size:16px;transition:color .3s;margin-bottom:2px}
.step-card:not(.active) h3{color:#6B7280}
.step-card.active h3{color:#111}
.step-sub{font-size:10px;color:#9CA3AF;text-transform:uppercase;letter-spacing:.05em}
/* Expandable desc */
.step-expand{max-height:0;overflow:hidden;transition:max-height .4s ease,opacity .3s;opacity:0}
.step-card.active .step-expand{max-height:200px;opacity:1}
.step-expand p{font-size:14px;color:#6B7280;line-height:1.7;margin:8px 0 12px}
.step-highlights{display:flex;flex-wrap:wrap;gap:6px}
.step-hl{font-size:11px;padding:4px 10px;border-radius:20px;background:#F3F4F6;color:#4B5563}
/* Arrow */
.step-arrow{display:none;align-items:center;gap:4px;flex-shrink:0;padding-top:8px;opacity:0;transition:opacity .3s}
@media(min-width:1024px){.step-arrow{display:flex}}
.step-card.active .step-arrow{opacity:1}
.step-arrow-line{width:20px;height:2px;border-radius:1px}
.step-arrow svg{width:16px;height:16px}

/* Playback controls */
.playback{display:flex;align-items:center;gap:12px;margin-top:24px;background:#fff;border-radius:12px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.play-btn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s,opacity .2s}
.play-btn svg{width:16px;height:16px}
.play-btn.nav-btn{background:#F3F4F6}
.play-btn.nav-btn:hover{background:#E5E7EB}
.play-btn.nav-btn:disabled{opacity:.3;cursor:default}
.play-btn.main-btn{background:#0033A0;color:#fff}
.play-btn.main-btn:hover{background:#002280}
.progress-dots{display:flex;gap:6px;flex:1;margin-left:8px}
.prog-bar{flex:1;height:8px;border-radius:4px;overflow:hidden;background:#E5E7EB;cursor:pointer}
.prog-fill{height:100%;border-radius:4px;background:#0033A0;transition:width .4s}
.play-counter{font-size:12px;color:#9CA3AF;margin-left:8px;font-variant-numeric:tabular-nums}

/* ─── Phone Mockup ─── */
.phone-label{border-radius:12px;padding:12px;color:#fff;text-align:center;margin-bottom:16px;transition:background .3s}
.phone-label .pl-sub{font-size:10px;opacity:.6}
.phone-label .pl-title{font-size:14px;margin-top:2px}
.phone-wrap{display:flex;justify-content:center;position:relative}
.phone-frame{width:300px;height:580px;background:#1f2937;border-radius:2.5rem;padding:10px;box-shadow:0 25px 50px -12px rgba(0,0,0,.3);border:1px solid #374151;position:relative}
.phone-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:96px;height:20px;background:#1f2937;border-radius:20px;z-index:5}
.phone-inner{width:100%;height:100%;background:#fff;border-radius:2rem;overflow:hidden;display:flex;flex-direction:column}
/* Phone screen content */
.ps-head{padding:32px 20px 16px}
.ps-head .ps-label{font-size:10px;margin-bottom:4px}
.ps-head .ps-number{font-size:20px;font-weight:500;color:#fff;letter-spacing:-.01em}
.ps-head .ps-tag{margin-top:8px;display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:4px 10px;font-size:10px}
.ps-head .ps-tag svg{width:12px;height:12px}
.ps-body{flex:1;padding:12px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.ps-card{border-radius:12px;padding:14px}
.ps-foot{padding:8px 16px 24px;display:flex;gap:12px}
.ps-foot button{flex:1;padding:12px;border-radius:12px;font-size:14px;border:none}
/* Animation */
.phone-screen-anim{animation:fadeSlideUp .45s ease-out}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
/* Sound wave */
.sound-wave{display:flex;gap:2px;align-items:center}
.sound-bar{width:4px;background:#3B82F6;border-radius:2px;animation:wave .8s ease-in-out infinite alternate}
.sound-bar:nth-child(1){animation-delay:0s}
.sound-bar:nth-child(2){animation-delay:.15s}
.sound-bar:nth-child(3){animation-delay:.3s}
.sound-bar:nth-child(4){animation-delay:.45s}
@keyframes wave{from{height:4px}to{height:14px}}
/* Spinner */
.spinner{width:14px;height:14px;border:2px solid #3B82F6;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Pulse dot */
.pulse-dot{width:8px;height:8px;border-radius:50%;animation:blink 1.5s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
/* Connect dots */
.connect-dots{display:flex;gap:6px}
.connect-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);animation:blink 1.5s infinite}
.connect-dot:nth-child(2){animation-delay:.3s}
.connect-dot:nth-child(3){animation-delay:.6s}
/* Keypad */
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.key{padding:8px;border-radius:8px;text-align:center;font-size:14px;transition:all .3s}
.key-normal{background:#F3F4F6;color:#4B5563}
.key-1{background:#0033A0;color:#fff;box-shadow:0 2px 8px rgba(0,51,160,.3);animation:keyPulse 1.5s infinite}
.key-1.pressed{background:#22C55E;animation:none}
@keyframes keyPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
/* Progress bar */
.live-bar{height:6px;background:#F3F4F6;border-radius:3px;overflow:hidden}
.live-fill{height:100%;border-radius:3px;transition:width .3s}
/* Revenue breakdown */
.rev-bar{display:flex;height:16px;border-radius:8px;overflow:hidden;gap:2px}
.rev-seg{border-radius:8px}

/* Floating badges */
.float-b{position:absolute;background:#fff;border-radius:12px;padding:8px 12px;box-shadow:0 4px 12px rgba(0,0,0,.1);border:1px solid #f3f4f6;display:flex;align-items:center;gap:8px;transition:opacity .4s,transform .4s}
.float-b.hide{opacity:0;transform:translateX(-10px)}
.fb-icon-sm{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.fb-icon-sm svg{width:16px;height:16px}
.float-b .fb-lbl{font-size:9px;color:#9CA3AF}
.float-b .fb-val{font-size:12px;color:#111;font-weight:500}
.fb-left{left:-80px;top:80px}
.fb-right{right:-80px;top:144px}
@media(max-width:1300px){.fb-left,.fb-right{display:none}}

/* Phone step dots */
.phone-dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
.p-dot{height:6px;border-radius:3px;cursor:pointer;transition:width .3s,background .3s}

/* Description card */
.desc-card{background:#fff;border-radius:12px;padding:16px;border:1px solid #f3f4f6;box-shadow:0 1px 3px rgba(0,0,0,.04);margin-top:16px;text-align:center;font-size:14px;color:#4B5563;line-height:1.7}

/* ─── Flow Diagram ─── */
.flow-section{max-width:960px;margin:0 auto 48px;padding:0 16px}
.flow-card{background:#fff;border-radius:16px;border:1px solid #f3f4f6;box-shadow:0 1px 3px rgba(0,0,0,.04);padding:24px 32px}
.flow-card h3{font-size:18px;color:#111;text-align:center;margin-bottom:24px}
.flow-row{display:flex;flex-direction:column;align-items:center;gap:12px}
@media(min-width:1024px){.flow-row{flex-direction:row;gap:0}}
.flow-item{display:flex;flex-direction:column;align-items:center;flex:0 0 auto}
.flow-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.flow-icon svg{width:28px;height:28px;color:#fff}
.flow-item-label{font-size:14px;color:#111;text-align:center}
.flow-item-sub{font-size:10px;color:#9CA3AF;text-align:center}
.flow-arrow{flex:1;height:2px;background:linear-gradient(90deg,#E5E7EB,#D1D5DB);margin:0 8px;position:relative;display:none}
@media(min-width:1024px){.flow-arrow{display:block}}
.flow-arrow svg{position:absolute;right:-8px;top:-7px;width:16px;height:16px;color:#9CA3AF}
.flow-down{display:block;color:#D1D5DB}
@media(min-width:1024px){.flow-down{display:none}}
.flow-down svg{width:20px;height:20px}
.flow-paths{display:grid;gap:16px;margin-top:32px}
@media(min-width:768px){.flow-paths{grid-template-columns:repeat(3,1fr)}}
.flow-path{border-radius:12px;padding:16px;border:1px solid}
.flow-path h4{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:8px}
.flow-path h4 svg{width:20px;height:20px}
.flow-path-steps{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;margin-bottom:8px}
.flow-path-steps span{padding:2px 8px;border-radius:4px}
.flow-path-steps svg{width:12px;height:12px}
.flow-path p{font-size:11px;line-height:1.5}

/* ─── Tech Cards ─── */
.tech-section{max-width:1280px;margin:0 auto 48px;padding:0 16px}
.tech-section h2{font-size:20px;color:#111;text-align:center;margin-bottom:32px}
.tech-grid{display:grid;gap:20px}
@media(min-width:768px){.tech-grid{grid-template-columns:repeat(3,1fr)}}
.tech-card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 1px 3px rgba(0,0,0,.04);border:1px solid #f3f4f6;transition:box-shadow .3s}
.tech-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.06)}
.tech-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.tech-icon svg{width:20px;height:20px;color:#fff}
.tech-card h3{font-size:16px;color:#111;margin-bottom:8px}
.tech-card>p{font-size:14px;color:#6B7280;margin-bottom:16px}
.tech-list li{display:flex;align-items:center;gap:8px;font-size:14px;color:#4B5563;padding:4px 0}
.tech-list li svg{width:16px;height:16px;color:#22C55E;flex-shrink:0}

/* ─── CTA ─── */
.cta-section{background:#0033A0;padding:56px 0}
.cta-inner{max-width:768px;margin:0 auto;padding:0 24px;text-align:center}
.cta-inner h2{color:#fff;font-size:clamp(1.3rem,3vw,1.8rem);margin-bottom:16px}
.cta-inner p{color:rgba(255,255,255,.6);margin-bottom:32px;font-size:14px}
.cta-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.cta-primary{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#0033A0;padding:14px 28px;border-radius:8px;font-size:15px;transition:background .2s}
.cta-primary:hover{background:#f3f4f6}
.cta-outline{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.3);color:#fff;padding:14px 28px;border-radius:8px;font-size:15px;transition:background .2s}
.cta-outline:hover{background:rgba(255,255,255,.1)}

/* ─── Footer ─── */
.hiw-footer{background:#fff;border-top:1px solid #f3f4f6;padding:24px 0}
.hiw-footer-inner{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.hiw-footer-left{display:flex;align-items:center;gap:8px}
.hiw-footer-left svg{width:20px;height:20px;color:#0033A0}
.hiw-footer-left span{font-size:14px;color:#111}
.hiw-footer-left .copy{font-size:12px;color:#9CA3AF;margin-left:8px}
.hiw-footer-right{font-size:14px;color:#0033A0}
.hiw-footer-right:hover{text-decoration:underline}

/* Reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .5s,transform .5s}
.reveal.visible{opacity:1;transform:translateY(0)}