/* 모아 랜딩: 복숭아 → 살구 → 하늘보라 브랜드 그라데이션, 흰 글자 히어로, 바로 써 보는 맥 화면 데모 */
:root{
  --ink:#1d1a19; --muted:#6b615e; --line:rgb(29 26 25/.09);
  --peach:#f6d3a9; --apricot:#e7a98a; --periwinkle:#7d8fc9;
  --brand:linear-gradient(120deg,var(--peach) 0%,var(--apricot) 42%,var(--periwinkle) 100%);
  --soft:#f4f1f6; --glass:rgb(32 28 27/.86);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:#fbf9f8;color:var(--ink);font:16px/1.6 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;word-break:keep-all;-webkit-font-smoothing:antialiased}
a{color:inherit}
kbd{font:600 .82em -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:var(--ink);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:1px 7px;white-space:nowrap}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
.grow{flex:1}

/* 상단 */
.nav{position:absolute;inset:0 0 auto;z-index:5;padding-top:env(safe-area-inset-top,0px)}
.nav .wrap{display:flex;align-items:center;gap:10px;padding-block:18px}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:19px;letter-spacing:-.02em;text-decoration:none}
.nav .brand{color:#fff}
.lang{font-size:14px;color:#fff;text-decoration:none;border:1px solid rgb(255 255 255/.5);padding:6px 12px;border-radius:999px}
.cta{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;text-decoration:none;font-weight:700;padding:14px 22px;border-radius:14px;box-shadow:0 10px 24px -10px rgb(29 26 25/.6),inset 0 1px 0 rgb(255 255 255/.12);transition:transform .15s}
.cta:hover{transform:translateY(-1px)}
.cta svg{width:18px;height:18px}
.cta.float{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:16px;z-index:20;padding:10px 16px;font-size:14px;border-radius:12px;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .25s,transform .25s}
.cta.float.show{opacity:1;pointer-events:auto;transform:none}

/* 히어로 */
.hero{position:relative;padding-top:120px;overflow:hidden}
.sky{position:absolute;inset:0 0 18%;background:
  radial-gradient(60% 40% at 78% 18%,rgb(255 255 255/.55),transparent 70%),
  radial-gradient(50% 35% at 15% 70%,rgb(255 255 255/.28),transparent 70%),
  var(--brand);z-index:-1;border-radius:0 0 40px 40px}
.hero-copy{text-align:center;color:#fff;text-shadow:0 1px 16px rgb(90 45 30/.25)}
.hero h1{font-size:clamp(36px,6vw,68px);line-height:1.1;letter-spacing:-.04em;margin:0 0 18px;font-weight:800}
.hero-copy p{font-size:clamp(16px,2vw,19px);margin:0 auto 28px;max-width:34em;color:rgb(255 255 255/.95)}
.hero-copy kbd{background:rgb(255 255 255/.22);border-color:rgb(255 255 255/.5);color:#fff;text-shadow:none}
.hero-copy .cta{text-shadow:none}
.meta{display:block;margin-top:12px;font-size:13.5px;color:rgb(255 255 255/.85)}

/* 맥 화면 데모 */
.desk{position:relative;margin-top:48px;aspect-ratio:16/10;border-radius:18px;overflow:hidden;
  background:radial-gradient(70% 60% at 70% 30%,#ffd9b8 0%,transparent 60%),radial-gradient(60% 60% at 20% 90%,#a8b4ea 0%,transparent 60%),linear-gradient(135deg,#f3c7a0,#d99d8f 45%,#8f9ad4);
  box-shadow:0 40px 80px -30px rgb(60 40 70/.55),0 0 0 1px rgb(255 255 255/.4) inset}
.menubar{position:absolute;inset:0 0 auto;height:28px;display:flex;align-items:center;gap:14px;padding-inline:14px;font-size:12.5px;color:#2b2523;background:rgb(255 255 255/.35);backdrop-filter:blur(12px)}
.win{position:absolute;left:7%;top:12%;width:62%;height:70%;border-radius:12px;background:rgb(255 255 255/.92);box-shadow:0 24px 50px -18px rgb(40 30 40/.45);display:flex;flex-direction:column;overflow:hidden}
.titlebar{height:34px;flex:none;display:flex;align-items:center;gap:7px;padding-inline:12px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.titlebar i{width:11px;height:11px;border-radius:50%;background:#e6dcd7}.titlebar i:nth-child(1){background:#ff6058}.titlebar i:nth-child(2){background:#ffbd2e}.titlebar i:nth-child(3){background:#28c941}
.titlebar span{margin-left:8px;font-weight:600}
.win-body{flex:1;display:grid;grid-template-rows:1fr auto;gap:12px;padding:18px 22px;min-height:0}
.doc h3{margin:0 0 8px;font-size:17px}
.doc p{margin:0 0 6px;font-size:14.5px;color:#3d3533}
.doc mark{background:#ffe7a3;border-radius:3px;padding:0 2px}
.compose{display:grid;gap:6px;font-size:12px;color:var(--muted);font-weight:600}
.compose textarea{width:100%;height:96px;resize:none;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:14px/1.5 inherit;font-family:inherit;color:var(--ink);background:#fbfaf9;outline:none}
.compose textarea:focus{border-color:var(--periwinkle);box-shadow:0 0 0 3px rgb(125 143 201/.2)}
.moa{position:absolute;right:4%;top:11%;width:min(310px,38%)}
.bubble{position:absolute;right:0;top:0;width:48px;height:48px;border-radius:50%;border:0;padding:8px;cursor:pointer;background:var(--glass);box-shadow:inset 0 0 0 1px rgb(255 255 255/.14),0 10px 22px rgb(0 0 0/.28);transition:transform .15s}
.bubble:hover{transform:scale(1.06)}
.bubble img{width:100%;height:100%;display:block}
.bubble.pulse{animation:pulse .6s ease-out}
@keyframes pulse{40%{transform:scale(1.18)}}
.panel{position:absolute;right:0;top:0;width:100%;max-height:340px;display:flex;flex-direction:column;border-radius:14px;background:rgb(250 248 247/.9);backdrop-filter:blur(20px);box-shadow:0 24px 50px -14px rgb(0 0 0/.38),0 0 0 1px rgb(29 26 25/.08);transform-origin:top right;transition:opacity .18s,transform .18s}
.panel.shut{opacity:0;transform:scale(.6);pointer-events:none}
.p-top{display:flex;align-items:center;gap:7px;padding:10px 12px 6px;font-weight:700;font-size:13.5px}
.p-top img{width:17px;height:17px}
.p-top button{border:0;background:none;font:inherit;font-weight:500;font-size:12.5px;color:var(--muted);cursor:pointer;padding:2px 4px}
.p-tabs{display:flex;gap:5px;padding:0 10px 8px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.p-tabs button{border:0;font:inherit;font-size:12px;padding:3px 10px;border-radius:999px;background:rgb(29 26 25/.06);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.p-tabs button.on{background:rgb(125 143 201/.25);font-weight:700}
.p-tabs.static button.on2{background:rgb(231 169 138/.28);font-weight:700}
i.lock{display:inline-block;width:8px;height:9px;border-radius:2px;background:currentColor;position:relative;margin-top:3px}
i.lock::before{content:"";position:absolute;left:1px;top:-4px;width:4px;height:5px;border:1.5px solid currentColor;border-bottom:0;border-radius:3px 3px 0 0}
.p-items{list-style:none;margin:0;padding:8px;display:grid;gap:4px;overflow:auto}
.p-items li{background:rgb(29 26 25/.05);border-radius:8px;padding:7px 10px;font-size:12.5px;line-height:1.4;cursor:pointer;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.p-items li:hover{background:rgb(125 143 201/.16)}
.p-items li.on{background:rgb(125 143 201/.32)}
.p-items li.new{animation:drop .35s ease-out}
@keyframes drop{from{transform:translateY(-8px);opacity:0}}
.p-items b{font-size:12.5px}
.p-items .row{display:flex;gap:8px;align-items:center;min-width:0}
.p-items .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-items .secret{letter-spacing:.12em;color:var(--muted)}
.p-items .shot{height:44px;flex:1;border-radius:5px;background:linear-gradient(135deg,#ffd9b0,#9aa8e0)}
.p-items .file{width:18px;height:22px;flex:none;border-radius:3px;background:#e9e4f6;box-shadow:inset 0 -5px 0 var(--periwinkle)}
.p-empty{padding:22px 10px;text-align:center;color:var(--muted);font-size:12.5px}
.dock{position:absolute;left:50%;bottom:2.5%;transform:translateX(-50%);display:flex;gap:9px;padding:7px 10px;border-radius:16px;background:rgb(255 255 255/.32);backdrop-filter:blur(14px);box-shadow:0 0 0 1px rgb(255 255 255/.35) inset}
.dock span,.dock img{width:34px;height:34px;border-radius:9px}
.dock .d1{background:linear-gradient(#ffd56b,#f5a623)}.dock .d2{background:linear-gradient(#7fd3ff,#2f80ed)}.dock .d3{background:linear-gradient(#bdf3c4,#34c759)}.dock .d4{background:linear-gradient(#f2f2f2,#bdbdbd)}
.toast{position:absolute;left:50%;top:44px;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:13px;padding:7px 14px;border-radius:999px;white-space:nowrap;z-index:3}
.steps{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;color:var(--muted);font-size:14.5px}
.steps li{display:flex;align-items:center;gap:8px}
.steps b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--brand);color:var(--ink);font-size:12px}

/* 공통 블록 */
.block{padding-block:110px 0}
.block h2{font-size:clamp(28px,4vw,44px);letter-spacing:-.035em;line-height:1.15;margin:0 0 30px;font-weight:750}
.center{text-align:center}
.lead{color:var(--muted);font-size:17px;margin:-14px auto 36px;max-width:36em}

/* 일하는 방식 */
.how{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;text-align:left}
.hcard{border-radius:24px;padding:30px;min-height:360px;position:relative;overflow:hidden}
.hcard h3{font-size:22px;letter-spacing:-.02em;margin:0 0 8px;font-weight:700}
.hcard p{margin:0;max-width:26em;font-size:15px}
.hcard.blue{background:var(--brand);color:#fff;text-shadow:0 1px 10px rgb(90 45 30/.2)}
.hcard.blue p{color:rgb(255 255 255/.92)}
.tag{background:rgb(255 255 255/.28);border-radius:8px;padding:0 8px}
.hcard.light{background:var(--soft);border:1px solid var(--line)}
.hcard.light p{color:var(--muted)}
.pile{position:absolute;left:30px;right:30px;bottom:30px;height:150px}
.chip{position:absolute;left:0;right:0;margin:auto;width:78%;padding:10px 14px;border-radius:12px;background:rgb(255 255 255/.92);color:var(--ink);text-shadow:none;font-size:13.5px;box-shadow:0 10px 24px -12px rgb(60 30 40/.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:fall 6s infinite}
.chip.shot{height:40px;background:linear-gradient(135deg,#ffe2c4,#b5bfee)}
.c1{bottom:0;animation-delay:0s}.c2{bottom:28px;width:72%;animation-delay:1.5s}.c3{bottom:56px;width:66%;animation-delay:3s}.c4{bottom:84px;width:60%;animation-delay:4.5s}
@keyframes fall{0%{transform:translateY(-60px);opacity:0}8%,85%{transform:none;opacity:1}100%{opacity:0}}
.keys{display:flex;align-items:center;gap:8px}
.keys.big{position:absolute;left:0;right:0;bottom:70px;justify-content:center;color:var(--muted);font-weight:700}
.keys.big kbd{font-size:28px;padding:14px 20px;border-radius:14px;border-bottom-width:4px;box-shadow:0 14px 26px -14px rgb(60 40 70/.4)}
.keys.big kbd:last-child{animation:press 2.4s infinite}
@keyframes press{0%,70%,100%{transform:none}78%{transform:translateY(3px);border-bottom-width:1px}}

/* 폴더 */
.fold{background:linear-gradient(160deg,#e9e4f4,#f6e7dd);border-radius:28px;padding:56px 20px}
.fold-panel{max-width:420px;margin:auto;text-align:left;border-radius:16px;background:rgb(250 248 247/.95);box-shadow:0 30px 60px -24px rgb(60 40 70/.45),0 0 0 1px var(--line)}
.fold-list{list-style:none;margin:0;padding:10px;display:grid;gap:6px}
.fold-list li{background:rgb(29 26 25/.05);border-radius:10px;padding:10px 12px;display:grid;gap:2px;font-size:14px}
.fold-list span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 믿음 */
.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left}
.tcard p{margin:14px 0 0;color:var(--muted);font-size:15px}
.tcard p b{color:var(--ink)}
.tvis{height:200px;border-radius:20px;background:linear-gradient(160deg,#ebe7f5,#f7ece4);display:grid;place-items:center;align-content:center;gap:8px;padding:20px;border:1px solid var(--line)}
.v-net{display:flex;align-items:center;gap:6px}
.v-net .mac{width:54px;height:54px;border-radius:14px;background:var(--brand);display:grid;place-items:center;color:#fff;font-size:24px;font-weight:700}
.v-net .wire{width:30px;height:2px;background:repeating-linear-gradient(90deg,var(--muted) 0 5px,transparent 5px 9px)}
.v-net .x{width:26px;height:26px;border-radius:50%;background:#fff;color:#d0574b;display:grid;place-items:center;font-size:13px;font-weight:800;box-shadow:0 4px 10px rgb(0 0 0/.1)}
.v-net .cloud{width:54px;height:34px;border-radius:20px;background:#fff;opacity:.6;box-shadow:0 0 0 1px var(--line)}
.v-row{width:88%;display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:10px 14px;font-size:14px;box-shadow:0 8px 20px -14px rgb(0 0 0/.3)}
.v-row span{flex:1;letter-spacing:.14em;color:var(--muted)}
.v-row.dim{opacity:.6}
.v-drag{display:grid;justify-items:center;gap:16px}
.v-drag .bub{width:52px;height:52px;border-radius:50%;background:var(--glass);padding:9px;box-shadow:0 10px 20px rgb(0 0 0/.25);animation:float 3.4s ease-in-out infinite}
.v-drag .bub img{width:100%;height:100%;display:block}
@keyframes float{0%,100%{transform:translate(-40px,0)}50%{transform:translate(40px,-10px)}}
.v-drag .keys{gap:6px}

.apps{margin-top:56px}
.apps small{display:block;letter-spacing:.14em;text-transform:uppercase;font-size:11.5px;color:var(--muted);font-weight:700;margin-bottom:12px}
.apps div{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;font-weight:600;color:#4a4140}
.apps span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brand);margin-right:8px;vertical-align:1px}

/* 숫자 */
.stats-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:start}
.stat{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:24px 0;border-bottom:1px solid var(--line)}
.stat:first-child{padding-top:0}
.num{font-size:46px;font-weight:300;letter-spacing:-.03em;line-height:1}
.num small{font-size:18px;margin-left:2px;color:var(--muted)}
.stat h3{margin:0 0 4px;font-size:20px;font-weight:600}
.stat p{margin:0;color:var(--muted);font-size:15px}

/* FAQ */
.faq{max-width:860px}
details{border-bottom:1px solid var(--line);padding:18px 4px}
summary{font-weight:600;font-size:17px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"⌄";color:var(--muted);transition:transform .2s}
details[open] summary::after{transform:rotate(180deg)}
details p{margin:10px 0 0;color:var(--muted)}

/* 마지막 */
.end{margin-top:120px;background:linear-gradient(180deg,#fbf9f8,#efe9f3 40%,#f6e6db);padding-block:110px;overflow:hidden}
.end .wrap{position:relative}
.end h2{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.03em;line-height:1.25;margin:0 0 26px;font-weight:700}
.end h2 span{color:#8a7fa8}
.end-keys{position:absolute;right:60px;top:-20px;display:flex;gap:30px}
.end-keys kbd{font-size:42px;padding:22px 28px;border-radius:22px;border:0;background:rgb(255 255 255/.75);color:#a99fc4;box-shadow:0 30px 50px -20px rgb(90 70 130/.4),inset 0 -6px 0 rgb(150 140 190/.18);animation:bob 4s ease-in-out infinite}
.end-keys kbd:last-child{margin-top:70px;animation-delay:1.2s}
@keyframes bob{50%{transform:translateY(-12px) rotate(-4deg)}}
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-block:36px 44px;color:var(--muted);font-size:14px}
.foot .brand{font-size:16px;color:var(--ink)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:900px){
  .how,.trust,.stats-wrap{grid-template-columns:minmax(0,1fr)}
  .end-keys{display:none}
  .desk{aspect-ratio:auto;height:600px}
  .win{left:4%;width:92%;top:9%;height:58%}
  .moa{right:4%;top:auto;bottom:16%;width:min(300px,86%)}
  .moa .panel{top:auto;bottom:0;transform-origin:bottom right}
  .moa .bubble{top:auto;bottom:0}
  .stat{grid-template-columns:100px minmax(0,1fr)}
  .num{font-size:36px}
}

/* 문의하기 */
button.lang{background:none;font:inherit;font-size:14px;cursor:pointer}
.link{background:none;border:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer;padding:0}
.foot .note{flex-basis:100%;font-size:12.5px;color:#9a908c}
dialog#ask{border:0;border-radius:20px;padding:0;width:min(460px,calc(100vw - 32px));box-shadow:0 40px 80px -20px rgb(0 0 0/.4)}
dialog#ask::backdrop{background:rgb(29 26 25/.35);backdrop-filter:blur(3px)}
#ask-form{padding:26px;display:grid;gap:14px}
#ask-form h2{margin:0;font-size:22px;letter-spacing:-.02em}
#ask-form label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
#ask-form input,#ask-form textarea{font:inherit;font-size:15px;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fbfaf9;resize:vertical}
#ask-form input[type=file]{padding:8px;background:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px}
.ask-msg{margin:0;font-size:14px}
.ask-btns{display:flex;justify-content:flex-end;align-items:center;gap:16px}
.ask-btns .cta{padding:11px 20px}
.hero-ask{display:inline-block;margin-top:10px;font-size:14px;color:#fff;text-underline-offset:3px}

/* 데모: 끌어서 옮기기 · 우클릭 메뉴 · 제목 입력 */
.moa{touch-action:none}
.moa.dragging,.moa.dragging *{cursor:grabbing!important;user-select:none}
.p-top{cursor:grab}
.ctx{position:absolute;z-index:6;min-width:168px;padding:5px;border-radius:10px;background:rgb(250 248 247/.97);backdrop-filter:blur(16px);box-shadow:0 16px 36px -10px rgb(0 0 0/.35),0 0 0 1px rgb(29 26 25/.1);font-size:12.5px}
.ctx button{display:flex;width:100%;align-items:center;gap:6px;border:0;background:none;font:inherit;text-align:left;padding:6px 10px;border-radius:6px;cursor:pointer;color:var(--ink)}
.ctx button:hover:not(:disabled){background:var(--periwinkle);color:#fff}
.ctx button:disabled{color:#b9b0ad;cursor:default}
.ctx hr{border:0;border-top:1px solid var(--line);margin:4px 6px}
.ctx small{display:block;padding:4px 10px 2px;color:var(--muted);font-size:11px}
.p-items input.title{font:inherit;font-size:12.5px;font-weight:700;border:1px solid var(--periwinkle);border-radius:6px;padding:3px 6px;outline:none;width:100%}
.lead b{color:var(--ink)}
.moa img{-webkit-user-drag:none;user-select:none;pointer-events:none}
.bubble,.p-top{user-select:none;-webkit-user-select:none}