/*! SPDX-License-Identifier: LicenseRef-Bubbly-Proprietary | Proprietary. Copyright (c) 2026 ROLLER COASTER (롤러코스터). All rights reserved. Unauthorized copying, reverse engineering, or license circumvention is prohibited. See NOTICE. */
/* 홈 화면: N A안(mockups/home-n/src/A-effects.html, 대표 확정 2026-10-30)을 옮김 */
:root{--blue:#0a6bf0;--ink:#17191d;--muted:#646971}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:#fff;color:var(--ink);font-family:Arial,'Apple SD Gothic Neo',sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:5px}header{height:88px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;background:#fffffff2;backdrop-filter:blur(16px);position:sticky;top:0;z-index:10;border-bottom:1px solid #eceef0}nav{display:flex;gap:38px;align-items:center}nav a{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:400;white-space:nowrap}nav a:hover{opacity:.65}.app-icon{width:36px;height:36px;object-fit:contain}.language{position:relative}.globe{width:42px;height:42px;display:grid;place-items:center;background:none;border:0;border-radius:50%;color:var(--ink)}.globe:hover{background:#f0f2f5}.globe svg{width:22px;height:22px}.language-panel{position:absolute;right:0;top:54px;padding:8px;width:160px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 12px 35px #17191d14}.language-panel[hidden]{display:none}.language-panel button{display:flex;justify-content:space-between;width:100%;padding:12px;border:0;border-radius:8px;background:white;text-align:left}.language-panel button:hover{background:#f3f5f7}.language-panel [aria-checked=true]::after{content:'✓';color:var(--blue)}.hero{height:calc(100svh - 88px);min-height:500px;background:#e5e6e8;display:grid;place-items:center;color:#7a7d82;font-size:13px;letter-spacing:.12em}.features{max-width:1240px;margin:auto;padding:140px 32px 100px}.feature{display:grid;grid-template-columns:1fr 1.45fr;align-items:center;gap:70px;margin-bottom:130px;min-height:360px}.feature:last-child{margin-bottom:0}h2{font-size:43px;line-height:1.25;letter-spacing:-1.8px;font-weight:600;margin:0 0 25px}p{font-size:18px;line-height:1.85;letter-spacing:-.4px;color:var(--muted);margin:0}.visual-space{height:360px;border-radius:30px;background:#eef5fb}.feature:nth-child(2) .visual-space{background:#f1f0fa}.feature:nth-child(3) .visual-space{background:#f8f1e9}.feature:nth-child(4) .visual-space{background:#edf4ef}.details{padding:100px 5%;background:#f5f6f8}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:1176px;margin:auto;align-items:stretch}.card{position:relative;overflow:hidden;isolation:isolate;padding:34px 30px;min-height:330px;background:#fff;border:1px solid #dce0e6;border-radius:22px;box-shadow:0 5px 16px #17191d04;transition:border-color .45s,box-shadow .45s,transform .45s cubic-bezier(.2,.8,.2,1)}.card h2{font-size:27px;letter-spacing:-1px;margin:25px 0 19px}.card p{font-size:16px;line-height:1.85}.card .big{font-size:52px;letter-spacing:-2px;font-weight:700;line-height:1;color:var(--blue);transition:color .45s}.card .big small{font-size:20px;letter-spacing:-.5px;font-weight:600;color:var(--ink);margin-left:4px;transition:color .45s}.card h2,.card p{transition:color .45s}.card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(140deg,#2f86ff 0%,#0a6bf0 45%,#0047c2 100%);opacity:0;transition:opacity .45s}.card::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:45%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55) 50%,transparent);transform:translateX(-160%) skewX(-18deg);opacity:0}@keyframes flare{0%{transform:translateX(-160%) skewX(-18deg);opacity:1}100%{transform:translateX(330%) skewX(-18deg);opacity:1}}.card.visible,.motion-ready .card.visible{transition:opacity .75s,border-color .45s,box-shadow .45s,transform .45s cubic-bezier(.2,.8,.2,1);transition-delay:0s}@media(hover:hover){.card:hover,.motion-ready .card.visible:hover{border-color:transparent;box-shadow:0 34px 60px -24px #0a6bf08c;transform:translateY(-10px) scale(1.025)}.card:hover::before{opacity:1}.card:hover::after{animation:flare .9s ease-out .05s}.card:hover h2,.card:hover .big,.card:hover .big small{color:#fff}.card:hover p{color:#ffffffd1}}.cta{text-align:center;padding:140px 24px}.cta h2{font-size:49px;margin-bottom:38px}.buttons{display:flex;gap:14px;justify-content:center}.download{border:0;background:var(--blue);color:#fff;padding:19px 27px;border-radius:13px;font-size:17px;transition:background .2s,transform .2s,box-shadow .2s}.download:hover{background:#0859cc;transform:translateY(-3px);box-shadow:0 9px 20px #0a6bf024}.download:active{transform:translateY(0)}footer{padding:38px 5%;border-top:1px solid #eceef0;color:#777d85;font-size:13px;display:flex;gap:24px}.motion-ready .reveal{opacity:0;transform:translateY(36px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.65,.3,1);transition-delay:var(--delay,0ms)}.motion-ready .reveal.visible{opacity:1;transform:translateY(0)}
@media(max-width:700px){header{height:76px;padding:0 18px}nav{gap:18px}nav a{font-size:13px;gap:6px}.app-icon{width:29px;height:29px}.globe{width:30px;height:36px}.globe svg{width:20px;height:20px}.hero{height:calc(100svh - 76px);min-height:480px}.features{padding:85px 24px 75px}.feature{grid-template-columns:1fr;gap:30px;margin-bottom:82px;min-height:0}h2{font-size:32px;letter-spacing:-1.2px;margin-bottom:17px}p{font-size:16px;line-height:1.85}.visual-space{height:230px;border-radius:23px}.details{padding:64px 24px}.cards{grid-template-columns:1fr;gap:18px}.card{min-height:275px;padding:27px}.card h2{font-size:25px}.cta{padding:92px 24px}.cta h2{font-size:34px}.buttons{flex-direction:column;max-width:340px;margin:auto}.download{font-size:16px}footer{font-size:11px;gap:15px;padding:28px 24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.motion-ready .reveal{opacity:1;transform:none}.card:hover,.download:hover{transform:none}}

/* 헤더 배치만 조정: 레퍼런스의 1560px 내용 폭과 메뉴 안쪽 여백 관찰값. */
header{height:74px;padding:0;display:block}.header-inner{max-width:1560px;height:100%;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}nav{gap:8px}nav a{padding:10px 16px}.globe{width:40px;height:40px}.hero{height:calc(100svh - 74px)}
@media(min-width:1200px) and (max-width:1535px){.header-inner{margin:0 50px;padding:0 24px}}
@media(min-width:1536px){.header-inner{width:calc(100% - 270px)}}
@media(max-width:700px){header{height:76px}.header-inner{padding:0 18px}nav{gap:18px}nav a{padding:0}.globe{width:30px;height:36px}.hero{height:calc(100svh - 76px)}}

/* 특장점 루프 영상: 칸에 꽉 차게, 스크롤해서 가까워질 때만 받음(script.js) */
.visual-space{overflow:hidden}.visual-space video{width:100%;height:100%;object-fit:cover;display:block}
@media(prefers-reduced-motion:reduce){.visual-space video{display:none}.visual-space[data-poster]{background-size:cover;background-position:center}}
/* 법률 페이지(legal/*.html, build-legal.py가 만듦) */
.legal{max-width:760px;margin:0 auto;padding:40px 16px 80px}
.legal pre{white-space:pre-wrap;font:inherit;line-height:1.8}

.dl-hero{padding-bottom:90px}.dl-lead{font-size:20px;margin:-14px 0 38px}.dl-note{font-size:14px;margin-top:22px;color:#8a9097}.dl-steps .cards{max-width:1176px}.dl-steps .card{min-height:260px}.dl-faq{max-width:760px;margin:auto;padding:100px 24px}.dl-faq h2{font-size:34px;text-align:center;margin-bottom:34px}.dl-faq details{border-bottom:1px solid #eceef0;padding:20px 4px}.dl-faq summary{cursor:pointer;font-size:18px;font-weight:600;letter-spacing:-.4px;list-style:none;display:flex;justify-content:space-between;gap:16px}.dl-faq summary::-webkit-details-marker{display:none}.dl-faq summary::after{content:'+';color:var(--blue);font-size:22px;line-height:1}.dl-faq details[open] summary::after{content:'−'}.dl-faq details p{font-size:16px;margin-top:12px}.dl-faq a{color:var(--blue);text-decoration:underline}
@media(max-width:700px){.dl-hero{padding-bottom:60px}.dl-lead{font-size:16px}.dl-faq{padding:64px 24px}.dl-faq h2{font-size:26px}.dl-faq summary{font-size:16px}.dl-steps .card{min-height:0}}

.dl-req{max-width:900px;margin:auto;padding:20px 24px 100px;text-align:center}.dl-req>h2{font-size:34px;margin-bottom:34px}.dl-req-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;text-align:left}.dl-req article{padding:30px;border:1px solid #dce0e6;border-radius:22px;background:#fff}.dl-req h3{font-size:24px;margin:0 0 18px;letter-spacing:-.8px}.dl-req dl{margin:0}.dl-req dt{font-size:13px;color:#8a9097;margin-top:14px}.dl-req dd{margin:3px 0 0;font-size:17px;letter-spacing:-.3px}.dl-req .dl-note{margin-top:26px}
@media(max-width:700px){.dl-req{padding:10px 24px 64px}.dl-req>h2{font-size:26px}.dl-req-grid{grid-template-columns:1fr}}

.download:disabled{background:#aab4c4;cursor:default;transform:none;box-shadow:none}.dl-soon{font-size:16px;margin-top:18px;color:var(--blue);font-weight:600}.dl-faq summary{font-size:20px;line-height:1.5}.dl-faq .dl-ans p,.dl-faq .dl-ans li{font-size:17px;line-height:1.9}.dl-faq .dl-ans h4{font-size:18px;margin:24px 0 8px;letter-spacing:-.4px}.dl-faq .dl-ans ul{margin:8px 0 0;padding-left:22px;color:var(--muted)}.dl-faq .dl-ans li{margin-bottom:8px}.dl-faq .dl-ans strong{color:var(--ink)}.dl-faq .dl-ans{margin-top:12px}.dl-faq details p{margin-top:0}.dl-faq .dl-ans p+p{margin-top:12px}
@media(max-width:700px){.dl-faq summary{font-size:17px}.dl-faq .dl-ans p,.dl-faq .dl-ans li{font-size:16px}}
.download{position:relative;isolation:isolate;transition:transform .35s cubic-bezier(.2,.8,.2,1),background .35s}.download::before{content:"";position:absolute;inset:-3px;z-index:-1;border-radius:16px;background:conic-gradient(from var(--a,0deg),#ff5f6d,#ffc371,#f7ff6d,#5dffa0,#4dc8ff,#8f6dff,#ff6dd8,#ff5f6d);opacity:0;filter:blur(7px);transition:opacity .4s}.download::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:inherit}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes spin{to{--a:360deg}}
@media(hover:hover){.download:hover,.download:disabled:hover{transform:translateY(-5px) scale(1.04);box-shadow:none}.download:hover::before{opacity:.95;animation:spin 2.6s linear infinite}}
.dl-req{padding-top:110px}@media(max-width:700px){.dl-req{padding-top:70px}}

footer{flex-wrap:wrap}#biz{flex-basis:100%;line-height:1.7;font-size:12px;color:#8a9097}

.hero{display:block;padding:0;background:#e5e6e8;overflow:hidden}.hero iframe{width:100%;height:100%;border:0;display:block}@media(max-width:700px){.hero{height:auto;min-height:0;aspect-ratio:16/9}}

/* 푸터 글자 시작점을 헤더(첫 메뉴 글자)와 같은 줄에: 헤더와 같은 가로 규칙 + 메뉴 글자 안쪽 여백(16px) */
footer{display:block;padding:38px 0}.footer-inner{max-width:1560px;margin:0 auto;padding:0 24px 0 40px;display:flex;flex-wrap:wrap;gap:24px}
@media(min-width:1200px) and (max-width:1535px){.footer-inner{margin:0 50px}}
@media(min-width:1536px){.footer-inner{width:calc(100% - 270px)}}
@media(max-width:700px){footer{padding:28px 0}.footer-inner{padding:0 18px;gap:15px}}

/* 가운데 로고: 앱 아이콘 + 캘리그라피 '편하다'(Nanum Brush Script 윤곽을 SVG로 변환, 글꼴 파일 미배포). 누르면 반짝이고 홈으로 */
.header-inner{position:relative}
.logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;text-decoration:none;-webkit-tap-highlight-color:transparent}
.logo-in{position:relative;display:flex;align-items:center;gap:10px;padding:4px 8px;overflow:visible}
.logo-icon{width:34px;height:34px;display:block}
.logo-text{height:34px;width:auto;display:block}
.lg{position:relative;display:block}
.lg::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.95) 50%,transparent 70%) 130% 0/300% 100% no-repeat;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.lgi::after{-webkit-mask-image:url(assets/app-icon-512.png);mask-image:url(assets/app-icon-512.png)}
.lgt::after{-webkit-mask-image:url(assets/logo-text.svg);mask-image:url(assets/logo-text.svg)}
.logo .sp{position:absolute;width:14px;height:14px;opacity:0;pointer-events:none;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 4px #7fb2ff)}
.logo .s1{left:-6px;top:-2px}.logo .s2{right:-4px;top:-6px;width:10px;height:10px}.logo .s3{left:46%;bottom:-6px;width:12px;height:12px}.logo .s4{right:18%;top:48%;width:9px;height:9px}
.logo.shine .lg img{animation:logoGlow .9s ease-out}
.logo.shine .lg::after{opacity:1;animation:logoSweep .8s ease-out}
.logo.shine .sp{animation:logoTwinkle .8s ease-out}.logo.shine .s2{animation-delay:.08s}.logo.shine .s3{animation-delay:.16s}.logo.shine .s4{animation-delay:.24s}
@keyframes logoSweep{from{background-position:130% 0}to{background-position:-30% 0}}
@keyframes logoTwinkle{0%{opacity:0;transform:scale(.2) rotate(0)}35%{opacity:1;transform:scale(1.25) rotate(45deg)}100%{opacity:0;transform:scale(.4) rotate(90deg)}}
@keyframes logoGlow{0%{filter:none}35%{filter:drop-shadow(0 0 10px rgba(42,134,255,.75)) brightness(1.12)}100%{filter:none}}
.logo:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:8px}
@media(prefers-reduced-motion:reduce){.logo.shine .lg img,.logo.shine .lg::after,.logo.shine .sp{animation:none}}
@media(max-width:700px){.logo-in{gap:6px;padding:2px}.logo-icon{width:26px;height:26px}.logo-text{height:24px}.logo .sp{display:none}}
@media(max-width:700px){nav{gap:12px}nav a{font-size:12px}.logo-icon{width:24px;height:24px}.logo-text{height:22px}}
@media(max-width:400px){nav{gap:10px}nav a{font-size:11.5px}}

/* 글로벌 UI 규칙: 한국어판은 '편하다', 그 밖의 언어판은 'Bubbly' 로고 글자(script.js setLogoLang) */
.logo[data-lang=en] .lgt::after{-webkit-mask-image:url(assets/logo-text-en.svg);mask-image:url(assets/logo-text-en.svg)}
.feature .visual-space{position:relative;transition:opacity .75s ease,box-shadow .45s,transform .45s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover){.feature .visual-space:hover,.motion-ready .feature .visual-space.visible:hover{z-index:5;box-shadow:0 40px 80px -24px #0a6bf08c;transform:scale(1.5)}}
@media(hover:hover) and (max-width:1100px){.feature .visual-space:hover,.motion-ready .feature .visual-space.visible:hover{transform:scale(1.15)}}
@media(hover:none),(max-width:700px){.feature .visual-space:hover,.motion-ready .feature .visual-space.visible:hover{z-index:5;box-shadow:0 24px 48px -20px #0a6bf08c;transform:scale(1.14)}}

.hero-x{display:none}.hero.full{position:fixed;inset:0;z-index:100;height:auto;aspect-ratio:auto;background:#000}.hero.full .hero-x{display:flex;position:absolute;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));width:36px;height:36px;align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;z-index:2}.hero.full .hero-x svg{width:18px;height:18px}body.hero-full{overflow:hidden}