:root{--bg:#f3f6f7;--card:#fff;--ink:#10222b;--mut:#5a6b73;--line:#d3dfe3;--pri:#0b4f6c;--grid:rgba(11,79,108,.07)}
@media(prefers-color-scheme:dark){:root{--bg:#0d1a20;--card:#14262e;--ink:#eaf2f4;--mut:#9db0b7;--line:#25404a;--pri:#6cc3e6;--grid:rgba(108,195,230,.08)}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 Inter,"Noto Sans KR","Noto Sans JP",-apple-system,"Apple SD Gothic Neo","Hiragino Sans",sans-serif}
a{color:var(--pri)}a:focus-visible{outline:3px solid var(--pri);outline-offset:3px;border-radius:4px}
.container{max-width:1080px;margin:0 auto;padding:0 20px}
.site-header{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:5}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.logo{font-weight:700;font-size:20px;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.nav{display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:15px}
.nav a{color:var(--ink);text-decoration:none}.nav a:hover{color:var(--pri)}
.langs{display:flex;gap:4px;margin-left:8px}
.langs a,.langs span{font-size:13px;padding:2px 9px;border:1px solid var(--line);border-radius:99px;color:var(--mut)}
.langs span{background:var(--pri);color:var(--bg);border-color:var(--pri);font-weight:600}
.hero{padding:72px 0 56px;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px;border-bottom:1px solid var(--line)}
.hero-title{font-size:clamp(48px,11vw,112px);line-height:1;margin:0 0 16px;font-weight:700;letter-spacing:-.045em}
.hero-desc{font-size:clamp(17px,2.4vw,22px);color:var(--mut);margin:0;max-width:34em}
.section{padding:56px 0}.section-title{font-size:26px;margin:0 0 24px;letter-spacing:-.02em}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.tile{display:flex;flex-direction:column;gap:8px;padding:22px 20px 18px;background:var(--card);border:1px solid var(--line);border-left:6px solid var(--c);border-radius:6px;color:var(--ink);text-decoration:none;transition:transform .15s,border-color .15s}
.tile:hover{transform:translateY(-3px);border-color:var(--c)}
.tile h3{margin:0;font-size:22px;letter-spacing:-.02em}.tile p{margin:0;color:var(--mut);font-size:15px;flex:1}
.badge{font-size:13px;color:var(--c);font-weight:600}.go{font-size:14px;font-weight:600;color:var(--c)}
.cta{background:var(--card);border-top:1px solid var(--line)}
.btn{display:inline-block;padding:12px 22px;border-radius:6px;background:var(--pri);color:var(--bg);font-weight:600;text-decoration:none}
.site-footer{border-top:1px solid var(--line);padding:24px 0;font-size:14px;color:var(--mut)}
.footer-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}.footer-inner nav{display:flex;gap:16px}
.p-hero{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center;padding:48px 0}
.p-hero h1{font-size:clamp(40px,6vw,66px);line-height:1.05;margin:8px 0 12px;letter-spacing:-.04em;color:var(--c)}
.p-hero h1 .title-ico{height:.82em;margin-right:.1em;vertical-align:-.1em}
.p-hero p{color:var(--mut);font-size:18px;margin:0}.back{font-size:14px;text-decoration:none;color:var(--mut)}
.slot{margin:0;aspect-ratio:16/10;border:2px dashed var(--c);border-radius:8px;overflow:hidden;background:var(--card)}
.slot.sm{aspect-ratio:4/3}.slot img{width:100%;height:100%;object-fit:cover;display:block}
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.feat h3{font-size:17px;margin:12px 0 0}
.others{display:flex;flex-wrap:wrap;gap:10px}
.others a{padding:8px 16px;border:1px solid var(--line);border-left:5px solid var(--c);border-radius:6px;text-decoration:none;color:var(--ink);background:var(--card)}
@media(max-width:760px){.p-hero{grid-template-columns:1fr;gap:24px}.hero{padding:48px 0 40px}}
.header-inner{position:relative}
.dd{position:relative;display:flex;align-items:center}
.dd-btn{background:none;border:0;color:var(--ink);cursor:pointer;padding:4px 6px;font-size:12px;line-height:1;transition:transform .15s}
.dd-btn:focus-visible{outline:3px solid var(--pri);border-radius:4px}
.dd.open .dd-btn{transform:rotate(180deg)}
.dd-panel{display:none;position:absolute;left:0;top:100%;width:260px;padding-top:12px;z-index:10}
.dd-grid{display:grid;grid-template-columns:1fr;gap:8px;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.dd-grid a{display:flex;flex-direction:column;padding:10px 12px;border-left:5px solid var(--c);border-radius:4px;background:var(--bg);color:var(--ink);text-decoration:none}
.dd-grid a:hover{background:var(--line)}.dd-grid b{font-size:16px}.dd-grid span{font-size:12px;color:var(--mut)}
.dd.open .dd-panel{display:block}
@media(hover:hover) and (min-width:761px){.dd:hover .dd-panel,.dd:focus-within .dd-panel{display:block}.dd:hover .dd-btn,.dd:focus-within .dd-btn{transform:rotate(180deg)}}
@media(max-width:760px){.dd{flex-wrap:wrap;width:100%}.dd-panel{position:static;width:100%;padding-top:8px}.dd-grid{box-shadow:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ===== 인터랙션 효과 (index) ===== */
:root{--spot:rgba(255,255,255,.6)}
@media(prefers-color-scheme:dark){:root{--spot:rgba(108,195,230,.16)}}
/* 헤더 */
.header-inner{transition:padding .25s}
.site-header.scrolled{background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 6px 24px rgba(0,0,0,.08)}
.site-header.scrolled .header-inner{padding-top:6px;padding-bottom:6px}
.progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:30;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#3a5ba0,#23856a,#b8691f,#86499a);pointer-events:none}
/* 드롭다운 */
.dd-panel{transform-origin:top left;animation:ddIn .22s ease-out}
.dd-grid a{transition:background .15s,transform .15s;animation:ddItem .38s cubic-bezier(.2,.8,.2,1) backwards}
.dd-grid a:nth-child(1){animation-delay:.04s}.dd-grid a:nth-child(2){animation-delay:.10s}.dd-grid a:nth-child(3){animation-delay:.16s}.dd-grid a:nth-child(4){animation-delay:.22s}
.dd-grid a:hover{transform:translateX(5px)}
@keyframes ddIn{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ddItem{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
/* 히어로 */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero .container{position:relative;z-index:1}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(440px circle at var(--mx,70%) var(--my,30%),var(--spot),transparent 65%)}
.orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.38;pointer-events:none;animation:orb 16s ease-in-out infinite alternate}
.o1{width:420px;height:420px;background:#3a5ba0;top:-140px;left:-90px}
.o2{width:380px;height:380px;background:#23856a;top:10px;right:-90px;animation-delay:-5s}
.o3{width:340px;height:340px;background:#86499a;bottom:-170px;left:42%;animation-delay:-9s}
.o4{width:300px;height:300px;background:#b8691f;bottom:-120px;right:18%;animation-delay:-13s}
@keyframes orb{to{transform:translate(70px,45px) scale(1.18)}}
@supports (background-clip:text) or (-webkit-background-clip:text){
.hero-title{background:linear-gradient(90deg,#3a5ba0,#23856a,#b8691f,#86499a,#3a5ba0);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-bottom:.08em;animation:sweep 1.1s cubic-bezier(.2,.8,.2,1) both,flow 9s linear infinite}}
@keyframes sweep{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 -10% 0)}}
@keyframes flow{to{background-position:300% 0}}
.hero-desc{animation:fadeUp .9s .55s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* 스크롤 등장 */
.js .reveal{opacity:0;translate:0 34px;transition:opacity .7s ease var(--d,0s),translate .7s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .15s,border-color .15s}
.js .reveal.in{opacity:1;translate:0 0}
/* 카드 */
.tile{position:relative;overflow:hidden;will-change:transform}
.tile::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(280px circle at var(--x,50%) var(--y,50%),color-mix(in srgb,var(--c) 24%,transparent),transparent 70%)}
.tile:hover::before{opacity:1}
.tile:hover{box-shadow:0 18px 40px -12px color-mix(in srgb,var(--c) 45%,transparent)}
.tile h3{transition:color .2s}.tile:hover h3{color:var(--c)}
.tile .go{transition:translate .2s}.tile:hover .go{translate:8px 0}
.tile:active{scale:.98}
/* 버튼 */
.btn{position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px var(--pri)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);translate:-120% 0;transition:translate .7s}
.btn:hover::after{translate:120% 0}
@media(prefers-reduced-motion:reduce){.orb,.hero-title,.hero-desc,.dd-panel,.dd-grid a{animation:none!important}.js .reveal{opacity:1;translate:none}.progress{display:none}}

/* ===== 프로그램 소개 페이지 효과 + 이미지 슬라이더 ===== */
.js .reveal{transition:opacity .7s ease var(--d,0s),translate .7s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .15s,border-color .15s,box-shadow .25s}
.p-top{position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px}
.p-top .container{position:relative;z-index:1}
.p-top::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(440px circle at var(--mx,70%) var(--my,30%),var(--spot),transparent 65%)}
.p-bg .orb{background:var(--c);opacity:.26}
.back{display:inline-block;transition:translate .2s,color .2s;animation:fadeUp .6s backwards}.back:hover{translate:-5px 0;color:var(--c)}
.p-hero p{animation:fadeUp .9s .45s cubic-bezier(.2,.8,.2,1) backwards}
@supports (background-clip:text) or (-webkit-background-clip:text){
.p-hero h1{background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 40%,#fff),var(--c));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-bottom:.1em;animation:sweep 1.1s cubic-bezier(.2,.8,.2,1) both,flow 7s linear infinite}}
.feat{position:relative;overflow:hidden;padding:12px 12px 16px;background:var(--card);border:1px solid var(--line);border-radius:12px;will-change:transform}
.feat::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(280px circle at var(--x,50%) var(--y,50%),color-mix(in srgb,var(--c) 22%,transparent),transparent 70%)}
.feat:hover::before{opacity:1}.feat:hover{border-color:var(--c);box-shadow:0 18px 40px -14px color-mix(in srgb,var(--c) 45%,transparent)}
.feat .slot img{transition:scale .5s cubic-bezier(.2,.8,.2,1)}.feat:hover .slot img{scale:1.07}
.feat h3{position:relative;transition:color .2s}.feat:hover h3{color:var(--c)}
.others a{transition:transform .2s,box-shadow .2s}.others a:hover{transform:translateY(-3px);box-shadow:0 10px 24px -10px var(--c)}
/* 슬라이더 */
.carousel{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:0 28px 56px -28px color-mix(in srgb,var(--c) 60%,transparent);touch-action:pan-y;-webkit-user-select:none;user-select:none}
.carousel:focus-visible{outline:3px solid var(--c);outline-offset:3px}
.car-track{position:absolute;inset:0}
.car-slide{position:absolute;inset:0;margin:0;overflow:hidden;transform:translateX(100%);transition:transform .9s cubic-bezier(.65,0,.25,1)}
.car-slide:first-child{transform:none}
.car-slide.on{z-index:1}
.car-slide img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.car-slide.on img{animation:kb 8s ease-out both}
@keyframes kb{from{scale:1}to{scale:1.1}}
.car-btn{position:absolute;top:50%;translate:0 -50%;z-index:3;width:42px;height:42px;border-radius:50%;border:0;background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;opacity:0;transition:opacity .2s,background .2s,color .2s}
.car-btn.prev{left:12px}.car-btn.next{right:12px}
.carousel:hover .car-btn,.car-btn:focus-visible{opacity:1}
@media(hover:none){.car-btn{opacity:.85}}
.car-btn:hover{background:var(--c);color:#fff}
.car-dots{position:absolute;left:0;right:0;bottom:18px;z-index:3;display:flex;justify-content:center;gap:8px}
.car-dots button{width:9px;height:9px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(0,0,0,.25);cursor:pointer;transition:width .3s,background .3s}
.car-dots button.on{width:28px;background:var(--c)}
.car-pp{position:absolute;right:12px;bottom:12px;z-index:3;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--bg) 72%,transparent);color:var(--ink);font-size:11px;cursor:pointer}
.car-bar{position:absolute;left:0;right:0;bottom:0;height:4px;z-index:3;background:rgba(0,0,0,.12)}
.car-bar i{display:block;height:100%;background:var(--c);transform-origin:0 50%;transform:scaleX(0);animation:fill 5s linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
.carousel:hover .car-bar i,.carousel.paused .car-bar i,.carousel:has(:focus-visible) .car-bar i{animation-play-state:paused}
.carousel.single .car-btn,.carousel.single .car-dots,.carousel.single .car-bar,.carousel.single .car-pp{display:none}
@media(prefers-reduced-motion:reduce){.back,.p-hero p,.p-hero h1{animation:none!important}.car-bar,.car-pp{display:none}.car-slide{transition:none}.car-slide.on img{animation:none}}

/* ===== 스크린샷 확대 보기 ===== */
.slot.zoomable{position:relative;cursor:zoom-in}
.slot.zoomable::after{content:"확대";position:absolute;right:10px;bottom:10px;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600;color:#fff;background:var(--c);opacity:0;translate:0 6px;transition:opacity .2s,translate .2s;pointer-events:none}
.slot.zoomable:hover::after,.slot.zoomable:focus-visible::after{opacity:1;translate:0 0}
.slot.zoomable:focus-visible{outline:3px solid var(--c);outline-offset:3px}
html.lb-lock{overflow:hidden}
.lb{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;gap:12px;padding:56px 16px 24px;background:rgba(5,12,16,.84);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lb.open{display:flex;animation:lbBg .25s ease-out}
.lb-f{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.lb-f img{display:block;width:min(88vw,1100px);height:auto;max-height:76vh;object-fit:contain;border-radius:10px;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.5);animation:lbZoom .35s cubic-bezier(.2,.8,.2,1)}
.lb-f figcaption{color:#fff;font-size:15px;text-align:center}
.lb button{border:0;cursor:pointer;color:#fff;background:rgba(255,255,255,.14);transition:background .2s;line-height:1}
.lb button:hover{background:rgba(255,255,255,.3)}.lb button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.lb-x{position:absolute;top:12px;right:16px;width:44px;height:44px;border-radius:50%;font-size:28px}
.lb-n{flex:none;width:44px;height:44px;border-radius:50%;font-size:28px}
@keyframes lbBg{from{opacity:0}to{opacity:1}}
@keyframes lbZoom{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@media(max-width:640px){.lb{gap:0}.lb-n{position:absolute;bottom:20px}.lb-n.prev{left:calc(50% - 56px)}.lb-n.next{right:calc(50% - 56px)}.lb-f{padding-bottom:56px}}
@media(prefers-reduced-motion:reduce){.lb.open,.lb-f img{animation:none}}

/* ===== 앱 다운로드 (Apple 공식 배지) ===== */
.section.dl{padding-top:32px;padding-bottom:0}
.dl-wrap{display:flex;flex-wrap:wrap;gap:12px}
.dl-card{flex:1 1 150px;max-width:220px;padding:12px 16px 10px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.dl-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dl-head b{font-size:16px;letter-spacing:-.02em}
.dl-ico{display:flex;align-items:center;gap:6px;color:var(--ink)}
.dl-ico svg{display:block;width:20px;height:20px}
.dl-rec{display:none;margin-left:auto;padding:0 8px;border-radius:99px;font-size:11px;font-weight:600;background:var(--pri);color:var(--bg)}
.dl-card.rec .dl-rec{display:inline-block}
.dl-slot{display:flex;align-items:center;min-height:0;padding:8px 0 0}
.dl-badge{display:inline-block;line-height:0;padding:4px 0}
.dl-badge img{display:block;height:48px;width:auto}
.dl-card .dl-badge img,.dl-card .dl-soon img{height:34px}
.dl-soon{display:inline-block;line-height:0;padding:4px 0}
.dl-soon img{display:block;height:48px;width:auto}
.dl-text{display:inline-block;padding:10px 16px;border:1px solid var(--line);border-radius:8px;font-size:15px;color:var(--pri);text-decoration:none}

/* 프로그램 소개 페이지의 앱별 배지 */
.app-dl{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:22px}
.app-dl-i{display:flex;flex-direction:column;gap:2px}
.app-dl-h{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--mut)}
.app-dl-h svg{display:block}
.app-dl .dl-slot{min-height:56px;padding:4px 0 0}

/* ===== 타이틀 앞 앱 아이콘 ===== */
.title-ico{display:inline-block;height:1em;width:auto;vertical-align:-.14em;margin-right:.14em;border-radius:21%;box-shadow:0 6px 18px -6px rgba(0,0,0,.35)}
.title-ico.ico-brain{border-radius:0;box-shadow:none;vertical-align:-.17em;margin-right:.08em}

/* =====================================================
   추가 이펙트 (fx) — 파티클 · 패럴랙스 · 커서 · 리플 · 마키 · 맨 위로
   ※ 모두 .js 클래스(한국어 페이지)나 JS가 만든 요소에만 적용됩니다.
   ===================================================== */

/* 페이지 이동 전환 (지원 브라우저만, 헤더는 고정) */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
::view-transition-old(root){animation:fxOut .22s ease both}
::view-transition-new(root){animation:fxIn .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes fxOut{to{opacity:0;transform:translateY(-8px);filter:blur(4px)}}
@keyframes fxIn{from{opacity:0;transform:translateY(14px);filter:blur(6px)}}

/* 히어로: 파티클 캔버스 + 패럴랙스 */
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.js .hero .container{translate:0 calc(var(--sy,0)*.2px);opacity:calc(1 - var(--sy,0)*.0016)}
.js .p-top .container{translate:0 calc(var(--sy,0)*.08px)}
.orb{translate:calc(var(--px,0)*var(--k,1)*-36px) calc(var(--py,0)*var(--k,1)*-36px + var(--sy,0)*var(--k,1)*.12px)}
.o1{--k:1.2}.o2{--k:.8}.o3{--k:1.6}.o4{--k:1}

/* 스크롤 등장: 블러 → 선명 */
.js .reveal{filter:blur(8px);transition:opacity .7s ease var(--d,0s),translate .7s cubic-bezier(.2,.8,.2,1) var(--d,0s),filter .7s ease var(--d,0s),transform .15s,border-color .15s,box-shadow .25s}
.js .reveal.in{filter:none}

/* 섹션 제목 밑줄이 그려짐 */
.js .section-title{position:relative;padding-bottom:14px}
.js .section-title::after{content:"";position:absolute;left:0;bottom:0;width:72px;height:4px;border-radius:4px;background:linear-gradient(90deg,#3a5ba0,#23856a,#b8691f,#86499a);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s cubic-bezier(.2,.8,.2,1) .3s}
.js .section-title.in::after{transform:scaleX(1)}

/* 메뉴 밑줄 */
.js .nav>a,.js .dd>a{padding-bottom:2px;background:linear-gradient(var(--pri),var(--pri)) no-repeat 0 100%/0 2px;transition:background-size .3s,color .2s}
.js .nav>a:hover,.js .dd>a:hover{background-size:100% 2px}
.logo{display:inline-block;transition:translate .25s cubic-bezier(.2,.8,.2,1)}

/* 프로그램 카드: 아이콘 · 빛 스윕 */
.tile.has-ico .badge{padding-right:64px}
.tile-ico{position:absolute;top:14px;right:14px;width:52px;height:52px;border-radius:21%;pointer-events:none;box-shadow:0 8px 20px -8px color-mix(in srgb,var(--c) 70%,transparent);animation:fxBob 5s ease-in-out infinite;transition:rotate .4s cubic-bezier(.2,.8,.2,1),scale .4s cubic-bezier(.2,.8,.2,1)}
.tile:hover .tile-ico{rotate:-9deg;scale:1.14}
@keyframes fxBob{50%{translate:0 -5px}}
.tile::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,color-mix(in srgb,var(--c) 20%,transparent) 50%,transparent 65%);translate:-130% 0;transition:translate .8s}
.tile:hover::after{translate:130% 0}

/* 다운로드 카드 */
.dl-card{position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.dl-card:hover{transform:translateY(-4px);border-color:var(--pri);box-shadow:0 16px 36px -16px var(--pri)}

/* 문의 섹션: 오로라 배경 */
.js .cta{position:relative;overflow:hidden;isolation:isolate}
.js .cta::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:max(140%,900px);aspect-ratio:1;translate:-50% -50%;pointer-events:none;background:conic-gradient(rgba(58,91,160,.24),rgba(35,133,106,.24),rgba(184,105,31,.24),rgba(134,73,154,.24),rgba(58,91,160,.24));filter:blur(50px);animation:fxSpin 22s linear infinite}
@keyframes fxSpin{to{rotate:360deg}}
.btn{transition:transform .2s,box-shadow .2s,translate .25s cubic-bezier(.2,.8,.2,1)}

/* 클릭/터치 리플 */
.others a,.dd-grid a{position:relative;overflow:hidden}
.fx-ripple{position:absolute;border-radius:50%;pointer-events:none;background:color-mix(in srgb,var(--c,var(--pri)) 38%,transparent);transform:scale(0);animation:fxRip .7s ease-out forwards}
.btn .fx-ripple{background:rgba(255,255,255,.4)}
@keyframes fxRip{to{transform:scale(1);opacity:0}}

/* 마우스 커서 follower (마우스가 있는 기기만) */
.fx-cur,.fx-dot{position:fixed;left:0;top:0;z-index:200;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .25s}
.fx-cur{width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid var(--cc,var(--pri));transition:opacity .25s,scale .25s,background .25s,border-color .25s}
.fx-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--cc,var(--pri))}
.fx-on .fx-cur,.fx-on .fx-dot{opacity:1}
.fx-cur.big{scale:1.8;background:color-mix(in srgb,var(--cc,var(--pri)) 14%,transparent)}
.fx-cur.down{scale:.75}
.fx-cur.big.down{scale:1.4}

/* 이미지 슬라이더 3D 기울기 + 반사광 */
.carousel{transition:transform .6s cubic-bezier(.2,.8,.2,1);will-change:transform}
.carousel.tilting{transition:transform .12s linear}
.carousel::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.26),transparent 55%)}
.carousel.tilting::after{opacity:1}

/* 흐르는 키워드 띠 (홈) */
.fx-marquee{position:relative;overflow:hidden;padding:18px 0;background:var(--card);border-bottom:1px solid var(--line)}
.fx-skew{transform:skewX(calc(var(--sk,0)*1deg));-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fx-track{display:flex;width:max-content;will-change:transform}
.fx-item{display:inline-flex;align-items:baseline;gap:12px;padding:0 22px;white-space:nowrap}
.fx-item b{font-size:clamp(22px,3.4vw,34px);letter-spacing:-.03em;color:var(--c)}
.fx-item:nth-child(even) b{color:transparent;-webkit-text-stroke:1.5px var(--c)}
.fx-item em{font-style:normal;font-size:14px;color:var(--mut)}
.fx-item i{font-style:normal;color:var(--c);opacity:.6;margin-left:10px}

/* 맨 위로 (스크롤 진행 링) */
.fx-top{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:40;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--card) 82%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--pri);cursor:pointer;box-shadow:0 10px 28px -10px rgba(0,0,0,.35);opacity:0;visibility:hidden;translate:0 20px;transition:opacity .3s,translate .3s,scale .2s,visibility 0s .3s}
.fx-top.show{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
.fx-top:hover{scale:1.1}.fx-top:active{scale:.94}
.fx-top:focus-visible{outline:3px solid var(--pri);outline-offset:3px}
.fx-top svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.fx-top circle{fill:none;stroke-width:3}
.fx-top .tr{stroke:var(--line)}
.fx-top .pg{stroke:var(--pri);stroke-linecap:round;stroke-dasharray:125.66px;stroke-dashoffset:calc(125.66px*(1 - var(--p,0)))}
.fx-top .ar{position:relative;font-size:20px;line-height:1}

/* 모션 줄이기 설정 */
@media(prefers-reduced-motion:reduce){
@view-transition{navigation:none}
.js .reveal{filter:none}
.tile-ico,.js .cta::before{animation:none!important}
.fx-ripple{display:none}
}

/* 다운로드 위 소개 문구 */
.dl-intro{max-width:46em;margin:0 0 22px;font-size:clamp(15px,2vw,18px);line-height:1.85;letter-spacing:-.01em;word-break:keep-all}
.dl-intro p{margin:0}.dl-intro p+p{margin-top:.7em}
.dl-intro strong{color:var(--pri)}

/* 주요 기능 이미지: 점선 테두리 제거 (한국어 페이지) */
.js .slot{border:0}


/* 주요 기능 소개 (요약) */
.feat-lead{max-width:46em;margin:0 0 20px}
.feat-lead p{margin:0}
.feat-tag{margin-bottom:8px!important;font-size:clamp(20px,3vw,26px);font-weight:800;letter-spacing:-.03em;line-height:1.35;color:var(--c,var(--pri));word-break:keep-all}
.feat-desc{line-height:1.85;word-break:keep-all}
.feat-points{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0 0 20px;padding:0;list-style:none}
.feat-points li{padding:14px 16px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--c,var(--pri));border-radius:10px;font-size:14.5px;line-height:1.7;word-break:keep-all}
.feat-points b{display:block;margin-bottom:4px;font-size:15.5px;letter-spacing:-.02em}
@media(max-width:640px){.feat-points{grid-template-columns:1fr}}

/* 일본어: 한국어용 keep-all 대신 일반 줄바꿈(금칙 처리 포함) */
html[lang="ja"] .dl-intro,html[lang="ja"] .feat-tag,html[lang="ja"] .feat-desc,html[lang="ja"] .feat-points li{word-break:normal;line-break:strict}
.dl-rec{white-space:nowrap}

/* =====================================================
   홈 개편 (Zotero 구조 참고): 히어로 + 화면 쇼케이스 + 프로그램 소개 + 시작 유도
   ===================================================== */
.btn.ghost{background:transparent;color:var(--pri);box-shadow:inset 0 0 0 1.5px var(--pri)}
.btn.ghost:hover{background:var(--pri);color:var(--bg)}

/* 히어로: 머리글만 스크롤에 따라 흐려지고, 쇼케이스는 그대로 유지 */
.hero.has-showcase{padding-bottom:48px}
.js .hero.has-showcase .container{translate:none;opacity:1}
.js .hero-head{translate:0 calc(var(--sy,0)*.2px);opacity:calc(1 - var(--sy,0)*.0016)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.hero-note{margin:14px 0 0;font-size:14px;color:var(--mut)}

/* 화면 쇼케이스 */
.showcase{margin-top:44px}
.show-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 18px}
.show-tabs button{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 10px;border:1px solid var(--line);border-radius:99px;background:var(--card);color:var(--ink);font:600 14px/1 inherit;font-family:inherit;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .2s}
.show-tabs button:hover{transform:translateY(-2px);border-color:var(--c)}
.show-tabs button:focus-visible{outline:3px solid var(--c);outline-offset:2px}
.show-tabs button img{width:22px;height:22px;border-radius:21%}
.show-tabs button.on{background:var(--c);border-color:var(--c);color:#fff}
.show-tabs button.on::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:rgba(255,255,255,.7);transform-origin:0 50%;animation:fxTab 6s linear forwards}
@keyframes fxTab{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.showcase.manual .show-tabs button.on::after{animation:none;transform:scaleX(0)}
.showcase.hov .show-tabs button.on::after,.showcase.out .show-tabs button.on::after{animation-play-state:paused}
.show-stage{position:relative;max-width:1000px;margin:0 auto;aspect-ratio:16/10;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.show-stage.tilting{transition:transform .12s linear}
.show-slide{position:absolute;inset:0;display:block;opacity:0;scale:.97;pointer-events:none;transition:opacity .6s ease,scale .6s cubic-bezier(.2,.8,.2,1)}
.show-slide.on{opacity:1;scale:1;pointer-events:auto}
.show-slide::before{content:"";position:absolute;inset:10% 8%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 38%,transparent),transparent);filter:blur(36px)}
.show-slide img{display:block;width:100%;height:100%;object-fit:contain}

/* 프로그램 소개: 화면과 글이 번갈아 */
.progs{display:flex;flex-direction:column}
.prog{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,64px);align-items:center;padding:44px 0;border-top:1px solid var(--line)}
.prog:first-child{border-top:0;padding-top:12px}
.prog:nth-child(even) .prog-txt{order:2}
.prog-txt h3{display:flex;align-items:center;gap:10px;margin:6px 0 12px;font-size:18px;letter-spacing:-.02em;color:var(--c)}
.prog-ico{width:36px;height:36px;border-radius:21%;box-shadow:0 6px 16px -6px color-mix(in srgb,var(--c) 60%,transparent)}
.prog-tag{margin:0 0 12px;font-size:clamp(22px,3vw,30px);font-weight:800;line-height:1.35;letter-spacing:-.03em;word-break:keep-all}
.prog-desc{margin:0 0 16px;color:var(--mut);line-height:1.85;word-break:keep-all}
.prog-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none}
.prog-chips li{padding:4px 12px;border-radius:99px;border:1px solid color-mix(in srgb,var(--c) 30%,transparent);background:color-mix(in srgb,var(--c) 9%,transparent);color:var(--c);font-size:13px;font-weight:600}
.prog-txt .go{display:inline-block;text-decoration:none;transition:translate .2s}
.prog-txt .go:hover{translate:6px 0}
.prog-shot{position:relative;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.prog-shot.tilting{transition:transform .12s linear}
.prog-shot::before{content:"";position:absolute;inset:10% 6%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 30%,transparent),transparent);filter:blur(34px)}
.prog-shot img{display:block;width:100%;height:auto}
.prog{isolation:isolate}
@media(max-width:860px){.prog{grid-template-columns:1fr;gap:20px;padding:32px 0}.prog:nth-child(even) .prog-txt{order:0}}
@media(max-width:560px){.show-tabs button{padding:7px 12px 7px 8px;font-size:13px}.show-tabs button img{width:18px;height:18px}.showcase{margin-top:32px}}

/* 마무리 시작 유도 */
.try{text-align:center;padding:72px 0}
.try h2{margin:0 0 10px;font-size:clamp(26px,4vw,40px);letter-spacing:-.03em;line-height:1.3;word-break:keep-all}
.try p{margin:0 0 24px;color:var(--mut)}
@media(prefers-reduced-motion:reduce){.show-tabs button.on::after{animation:none}.show-slide,.show-stage,.prog-shot{transition:none}}

/* =====================================================
   프로그램 페이지 개편 (Zotero 구조): 히어로 + 큰 화면 + 번갈아 나오는 기능 소개 + 시작 유도
   ===================================================== */
.p-hero.p-hero2{display:block;padding:48px 0 0}
.p-hero2 .p-badge{margin:0 0 6px;font-size:14px}
.p-hero2 .p-badge strong{color:var(--c)}
.p-hero2 .p-tag{margin:0 0 14px;max-width:22em;font-size:clamp(24px,3.6vw,38px);font-weight:800;line-height:1.3;letter-spacing:-.035em;color:var(--ink);word-break:keep-all}
.p-hero2 .p-desc{margin:0 0 18px;max-width:40em;font-size:clamp(16px,2vw,18px);line-height:1.85;word-break:keep-all}
.p-hero2 .prog-chips{margin:0 0 6px}
.p-shot{max-width:1000px;margin:36px auto 0;padding-bottom:48px}

/* 화면(슬롯): 점선·카드 틀 없이 이미지 그대로, 눌러서 확대 */
.p-shot .slot,.frow .slot{position:relative;isolation:isolate;display:block;width:fit-content;max-width:100%;margin:0 auto;aspect-ratio:auto;overflow:visible;border:0;border-radius:0;background:none;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.p-shot .slot.tilting,.frow .slot.tilting{transition:transform .12s linear}
.p-shot .slot::before,.frow .slot::before{content:"";position:absolute;inset:10% 6%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 32%,transparent),transparent);filter:blur(34px)}
.p-shot .slot img,.frow .slot img{display:block;width:auto;max-width:100%;height:auto;object-fit:contain}
.p-shot .slot img{max-height:620px;margin:0 auto}
.frow .slot img{max-height:480px}

/* 기능 소개: 글과 화면이 번갈아 */
.frows{display:flex;flex-direction:column}
.frow{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,64px);align-items:center;padding:44px 0;border-top:1px solid var(--line)}
.frow:first-child{border-top:0;padding-top:12px}
.frow:nth-child(even) .frow-txt{order:2}
.frow-n{display:inline-block;margin-bottom:10px;padding:2px 10px;border-radius:99px;background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--c);font-size:13px;font-weight:800;letter-spacing:.04em}
.frow h3{margin:0 0 12px;font-size:clamp(22px,3vw,30px);font-weight:800;line-height:1.35;letter-spacing:-.03em;word-break:keep-all}
.frow-txt p{margin:0;color:var(--mut);font-size:17px;line-height:1.85;word-break:keep-all}
@media(max-width:860px){.frow{grid-template-columns:1fr;gap:20px;padding:32px 0}.frow:nth-child(even) .frow-txt{order:0}}
@media(max-width:560px){.p-shot{margin-top:28px;padding-bottom:32px}}
#download{scroll-margin-top:120px}
@media(prefers-reduced-motion:reduce){.p-shot .slot,.frow .slot{transition:none}}

/* 짝수 행: 글/화면 위치를 바꾸면서 칸 너비도 함께 바꿔 화면이 항상 넓은 칸에 들어가게 */
.prog:nth-child(even),.frow:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
@media(max-width:860px){.prog:nth-child(even),.frow:nth-child(even){grid-template-columns:1fr}}

/* 홈 히어로: 프로그램 바로가기 버튼 */
.hero-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:22px 0 0}
.hero-links-t{margin-right:4px;font-size:14px;font-weight:700;color:var(--mut)}
.hero-link{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 9px;border-radius:99px;background:var(--c);color:#fff;font-size:15px;font-weight:700;text-decoration:none;box-shadow:0 8px 18px -10px var(--c);transition:transform .2s,box-shadow .2s,translate .25s cubic-bezier(.2,.8,.2,1)}
.hero-link img{width:26px;height:26px;border-radius:21%;box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}
.hero-link .arr{font-size:18px;line-height:1;transition:translate .2s}
.hero-link:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px var(--c)}
.hero-link:hover .arr{translate:4px 0}
.hero-link:focus-visible{outline:3px solid var(--c);outline-offset:3px}
.hero-link .fx-ripple{background:rgba(255,255,255,.4)}
@media(max-width:560px){.hero-links-t{flex-basis:100%;margin:0 0 2px}.hero-link{font-size:14px;padding:7px 13px 7px 8px}.hero-link img{width:22px;height:22px}}

/* 프로그램 바로가기: '만나보세요' 제목 위로 이동 */
#programs .hero-links{margin:0 0 28px}

/* 일본어: 홈·프로그램 페이지의 새 문구에도 일반 줄바꿈(금칙 처리 포함) 적용 */
html[lang="ja"] .prog-tag,html[lang="ja"] .prog-desc,html[lang="ja"] .p-tag,html[lang="ja"] .p-desc,
html[lang="ja"] .frow h3,html[lang="ja"] .frow-txt p,html[lang="ja"] .try h2{word-break:normal;line-break:strict}
html[lang="ja"] .p-hero2 .p-tag{max-width:none}

.dl-price{display:block;align-self:center;height:56px;width:auto;max-width:100%;margin-left:8px}
@media(prefers-color-scheme:dark){.dl-price{background:#fff;border-radius:6px;padding:2px 6px}}
.refund-note{margin:16px 0 0;font-size:14px;color:var(--mut);word-break:keep-all}
.biz-info{display:flex;flex-wrap:wrap;gap:2px 16px;margin-top:6px;font-size:13px}
.biz-info span{white-space:nowrap}