:root{--ink:#1f2128;--ink-soft:#3b3f4a;--muted:#4a4e5a;--muted-2:#5e6270;--line:#d5d8e0;--line-soft:#e2e4ea;--grid:#e4e6ec;--paper:#f7f6f1;--paper-dark:#ecebe5;--white:#fff;--accent:#2a47b0;--accent-hover:#1c3285;--accent-soft:#e6eaf7;--orange:#e0603a;--orange-deep:#c2410c;--yellow:#f2c230;--green:#16794f;--kakao:#fee500;--sans:"Gothic A1", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;--hand:"Nanum Pen Script", cursive;font-family:var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}*,:before,:after{box-sizing:border-box}body{background:var(--paper);min-width:320px;margin:0}a{color:var(--accent)}a:hover{color:var(--accent-hover)}button{font-family:inherit}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.grid-bg{background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);background-size:28px 28px;min-height:100vh}.hand{font-family:var(--hand)}.brand{color:var(--ink);letter-spacing:-.3px;align-items:center;gap:10px;font-size:23px;font-weight:800;text-decoration:none;display:inline-flex}.btn{border:1.5px solid var(--line);background:var(--white);min-height:44px;color:var(--ink);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:0 16px;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex}.btn:hover{color:var(--ink);border-color:#b9bdc9}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:var(--accent);color:var(--white);border:0}.btn-primary:hover{background:var(--accent-hover);color:var(--white)}.btn-kakao{background:var(--kakao);color:#000000d9;border:0}.btn-kakao:hover{color:#000000d9;filter:brightness(.97)}.btn-lg{border-radius:12px;min-height:56px;padding:0 26px;font-size:17px}.card{background:var(--white);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);border-radius:18px}.toast{background:var(--ink);color:var(--white);z-index:100;border-radius:999px;padding:12px 18px;font-size:14px;font-weight:600;position:fixed;bottom:28px;left:50%;transform:translate(-50%)}.btn-danger{color:var(--white);background:#b91c1c;border:0}.btn-danger:hover{color:var(--white);background:#991b1b}.dialog-backdrop{z-index:200;background:#1f212873;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.dialog{width:100%;max-width:420px;padding:24px}.dialog h2{margin:0 0 10px;font-size:19px}.dialog-body{color:var(--muted);font-size:15px;line-height:1.6}.dialog-body p{margin:0 0 6px}.dialog-actions{justify-content:flex-end;gap:8px;margin-top:20px;display:flex}.invite{flex-direction:column;display:flex}.invite-header{padding:24px}.invite-main{flex:1;justify-content:center;align-items:center;padding:24px 16px 72px;display:flex}.invite-card{text-align:center;width:100%;max-width:440px;padding:32px 28px}.invite-kicker{color:var(--accent);margin:0;font-size:28px}.invite-card h1{letter-spacing:-.5px;word-break:keep-all;margin:8px 0 0;font-size:26px;line-height:1.35}.invite-desc{color:var(--muted);margin:14px 0 0;font-size:15px;line-height:1.6}.invite-preview{border:1px solid var(--line-soft);background-color:#fbfbf8;background-image:linear-gradient(#eceef2 1px,#0000 1px);background-size:100% 20px;border-radius:10px;height:120px;margin:24px auto 0;position:relative;overflow:hidden}.invite-preview svg{filter:blur(1.5px);position:absolute;inset:0}.invite-preview span{color:var(--muted-2);font-size:12px;position:absolute;bottom:8px;left:0;right:0}.invite-cta{width:100%;margin-top:24px}.invite-full{background:var(--paper-dark);min-height:54px;color:var(--muted);border-radius:12px;justify-content:center;align-items:center;margin-top:24px;font-size:17px;font-weight:600;display:flex}.invite-foot{color:var(--muted-2);margin:16px 0 0;font-size:13px;line-height:1.6}.note-screen{background:var(--paper-dark);flex-direction:column;min-height:100vh;display:flex}.note-header{background:var(--white);border-bottom:1.5px solid var(--line);z-index:20;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:10px 20px;display:flex;position:sticky;top:0}.note-header-left{align-items:center;gap:14px;min-width:0;display:flex}.icon-link{flex:none;justify-content:center;align-items:center;width:44px;height:44px;display:inline-flex}.note-title{min-width:0}.note-name{color:var(--ink);text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:17px;font-weight:800;overflow:hidden}.note-name-btn{cursor:text;text-align:left;background:0 0;border:0;border-radius:6px;max-width:100%;margin-left:-6px;padding:2px 6px;display:block}.note-name-btn:hover{background:var(--paper-dark)}.note-name-input{border:1.5px solid var(--accent);border-radius:6px;width:min(320px,60vw);margin-left:-6px;padding:2px 6px;font-family:inherit}.note-sub{color:var(--muted-2);margin:2px 0 0;font-size:13px}.countdown{color:var(--orange-deep);font-variant-numeric:tabular-nums;font-weight:600}.note-header-right{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.avatars{align-items:center;display:flex}.avatar{width:36px;height:36px;color:var(--white);border:2px solid var(--white);border-radius:50%;justify-content:center;align-items:center;font-size:14px;font-weight:800;display:inline-flex}.avatar+.avatar{margin-left:-8px}.avatar-more{background:var(--muted-2);font-size:12px}.me-label{color:var(--muted);padding:0 6px;font-size:13px}.note-body{flex:1;align-items:flex-start;gap:16px;padding:16px 20px 20px;display:flex}.toolbar{background:var(--white);border:1.5px solid var(--line);z-index:25;border-radius:14px;flex-direction:column;flex:none;gap:6px;padding:8px;display:flex;position:sticky;top:84px}.tool-btn{width:48px;height:48px;color:var(--ink-soft);cursor:pointer;background:0 0;border:0;border-radius:10px;justify-content:center;align-items:center;display:inline-flex}.tool-btn:hover{background:var(--paper-dark)}.tool-btn[aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}.tool-btn:disabled{opacity:.35;cursor:not-allowed}.tool-sep{background:var(--line-soft);height:1px;margin:4px 6px}.swatch-btn{cursor:pointer;background:0 0;border:0;border-radius:10px;justify-content:center;align-items:center;width:48px;height:36px;display:inline-flex}.swatch{border-radius:50%;width:22px;height:22px}.swatch-btn[aria-pressed=true] .swatch{box-shadow:0 0 0 2px var(--white), 0 0 0 4px currentColor}.width-dot{background:currentColor;border-radius:50%}.page-viewport{flex:999 560px;min-width:0}.page-frame{background-color:var(--white);box-shadow:0 1px 0 var(--line), 0 12px 30px #1f212814;touch-action:none;border-radius:6px;margin:0 auto;position:relative;overflow:clip}.page-frame canvas{display:block;position:absolute;top:0;left:0}.page-status{pointer-events:none;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;display:flex;position:sticky;bottom:12px}.status-pill{color:var(--muted);background:var(--white);border:1px solid var(--line-soft);pointer-events:auto;border-radius:999px;align-items:center;gap:8px;padding:8px 12px;font-size:13px;display:inline-flex}.status-dot{background:var(--green);border-radius:50%;width:8px;height:8px}.status-dot.connecting{background:var(--yellow)}.status-dot.offline{background:#b91c1c}@media (width<=720px){.note-header{padding:8px 12px}.me-label{display:none}.note-body{flex-direction:column;padding:12px}.toolbar{z-index:15;flex-flow:wrap;justify-content:center;width:100%;position:sticky;top:64px}.tool-sep{width:1px;height:auto;margin:6px 2px}.tool-btn,.swatch-btn{width:44px;height:44px}.page-viewport{width:100%}}.page-layer{transform-origin:0 0;pointer-events:none;position:absolute;top:0;left:0}.page-layer [data-page-ui]{pointer-events:auto}.paper{background-color:var(--white);background-image:linear-gradient(90deg,#0000 70px,#f1b5a4 70px 72px,#0000 72px),linear-gradient(#e9ecf2 1px,#0000 1px);background-position:0 0,0 31px;background-size:100% 100%,100% 32px}.swatch-btn[aria-pressed=true]:has(.width-dot){background:var(--accent-soft);color:var(--accent)!important}.textbox{font-family:var(--hand);border:2px solid #0000;border-radius:6px;min-height:32px;margin:-2px 0 0 -2px;position:absolute}.textbox.is-interactive{cursor:text}.textbox.is-interactive:hover{border-color:#2a47b040}.textbox.is-select{cursor:move}.textbox.is-focused{background:#ffffffeb;border-color:currentColor!important}.textbox-editor{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;outline:none;padding:0 6px}.textbox-editor p{min-height:32px;margin:0}.textbox-handle{background:var(--white);cursor:ew-resize;opacity:0;touch-action:none;border:2px solid;border-radius:4px;width:12px;height:30px;margin-top:-15px;position:absolute;top:50%;right:-8px}.textbox.is-focused .textbox-handle,.textbox.is-interactive:hover .textbox-handle{opacity:1}.textbox-editing{transform-origin:0 0;font-family:var(--sans);white-space:nowrap;pointer-events:none;background:#ffffffeb;border-radius:999px;padding:3px 8px;font-size:12px;font-weight:600;line-height:1.2;position:absolute;top:4px;left:calc(100% + 16px);box-shadow:0 0 0 1.5px}.textbox-editing.below{top:calc(100% + 6px);left:0}.connection-pill{z-index:30;color:var(--muted);background:var(--white);border:1px solid var(--line-soft);border-radius:999px;align-items:center;gap:8px;padding:8px 12px;font-size:13px;display:inline-flex;position:fixed;bottom:16px;left:16px;box-shadow:0 4px 12px #1f212814}.peer-cursor{transform-origin:0 0;pointer-events:none;z-index:5;align-items:flex-start;gap:2px;transition:left .12s linear,top .12s linear;display:flex;position:absolute}.peer-cursor span{color:var(--white);white-space:nowrap;border-radius:6px;margin-top:14px;padding:4px 8px;font-size:12px;font-weight:600}.member-control{position:relative}.member-badge{background:var(--paper-dark);min-height:36px;color:var(--muted);border:0;border-radius:999px;align-items:center;padding:0 12px;font-family:inherit;font-size:13px;font-weight:600;display:inline-flex}.member-badge-btn{cursor:pointer;min-height:44px}.member-badge-btn:hover{background:var(--accent-soft);color:var(--accent)}.member-popover{z-index:40;background:var(--white);border:1.5px solid var(--line);border-radius:14px;width:260px;padding:16px;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 12px 30px #1f212824}.member-help{color:var(--muted-2);margin:10px 0 0;font-size:12px}.font-picker{position:relative}.font-btn{color:var(--accent);font-size:24px}.font-menu{z-index:40;background:var(--white);border:1.5px solid var(--line);border-radius:14px;width:220px;margin:0;padding:6px;list-style:none;position:absolute;top:0;left:calc(100% + 10px);box-shadow:0 12px 30px #1f212824}.font-option{width:100%;min-height:44px;color:var(--ink);cursor:pointer;text-align:left;background:0 0;border:0;border-radius:10px;justify-content:space-between;align-items:center;gap:8px;padding:4px 10px;display:flex}.font-option:hover,.font-option[aria-selected=true]{background:var(--accent-soft)}.font-option-name{color:var(--muted-2);white-space:nowrap;font-size:12px}@media (width<=720px){.font-menu{top:calc(100% + 8px);left:auto;right:0}}.format-bar{transform-origin:0 100%;background:var(--white);border:1.5px solid var(--line);font-family:var(--sans);white-space:nowrap;z-index:10;cursor:default;border-radius:12px;align-items:center;gap:2px;padding:4px;display:flex;position:absolute;bottom:calc(100% + 6px);left:-2px;box-shadow:0 8px 20px #1f21281f}.format-btn{min-width:36px;height:36px;color:var(--ink-soft);font-family:var(--sans);cursor:pointer;background:0 0;border:0;border-radius:8px;justify-content:center;align-items:center;font-size:15px;display:inline-flex}.format-btn:hover{background:var(--paper-dark)}.format-btn[aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}.format-swatch{border-radius:50%;width:16px;height:16px}.format-btn[aria-pressed=true] .format-swatch{box-shadow:0 0 0 2px var(--white), 0 0 0 3.5px currentColor}.format-sep{background:var(--line-soft);width:1px;height:22px;margin:0 3px}.format-bar.below{transform-origin:0 0;top:calc(100% + 6px);bottom:auto}.format-bar.align-right{transform-origin:100% 100%;left:auto;right:-2px}.format-bar.below.align-right{transform-origin:100% 0}@media (width<=720px){.format-bar{white-space:normal;flex-wrap:wrap;max-width:260px}}.zoom-control{z-index:30;background:var(--white);border:1px solid var(--line-soft);border-radius:999px;align-items:center;gap:2px;padding:4px;display:inline-flex;position:fixed;bottom:16px;right:16px;box-shadow:0 4px 12px #1f212814}.zoom-control button{min-width:40px;height:40px;color:var(--ink-soft);cursor:pointer;background:0 0;border:0;border-radius:999px;font-family:inherit;font-size:13px;font-weight:600}.zoom-control button:hover{background:var(--paper-dark)}.zoom-control button:disabled{opacity:.35;cursor:not-allowed}.page-viewport{overflow-x:auto}@media (width<=720px){.btn-label{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.note-header-right .btn{padding:0 12px}.note-header-right{gap:6px}.avatar{width:32px;height:32px;font-size:13px}.toolbar{scrollbar-width:thin;flex-wrap:nowrap;justify-content:flex-start;gap:2px;padding:4px;overflow-x:auto}.tool-btn,.swatch-btn{flex:none}.tool-sep{flex:0 0 1px}.connection-pill{padding:6px 10px;font-size:12px;bottom:12px;left:12px}.zoom-control{bottom:12px;right:12px}}.textbox-grip{z-index:20;transform-origin:100% 0;border:1.5px solid var(--line);background:var(--white);width:24px;height:36px;color:var(--muted);cursor:grab;touch-action:none;opacity:0;visibility:hidden;border-radius:8px;justify-content:center;align-items:center;margin-right:0;padding:0;transition:opacity .12s .4s,visibility 0s linear .52s;display:inline-flex;position:absolute;top:-2px;right:100%;box-shadow:0 2px 6px #1f21281a}.textbox-grip:active{cursor:grabbing}.textbox-grip.inside{transform-origin:0 0;margin:0;top:2px;left:2px;right:auto}.textbox.is-focused .textbox-grip,.textbox.is-interactive:hover .textbox-grip,.textbox-grip:focus-visible{opacity:1;visibility:visible;transition-delay:0s}.textbox-grip:hover,.textbox-grip:focus-visible{color:var(--accent);border-color:var(--accent);outline:none}@media (hover:none){.textbox.is-interactive .textbox-grip{opacity:1;visibility:visible}}.peer-cursor-label{transform-origin:0 0;color:var(--white);white-space:nowrap;pointer-events:none;z-index:5;border-radius:6px;padding:4px 8px;font-size:12px;font-weight:600;transition:left .12s linear,top .12s linear;position:absolute}.textbox-editor p :is(strong,em,u,s,span){line-height:0}.member-delete{background:var(--white);color:#b91c1c;cursor:pointer;border:1.5px solid #f3c4c4;border-radius:10px;width:100%;min-height:40px;margin-top:12px;font-family:inherit;font-size:14px;font-weight:600}.member-delete:hover{background:#fde8e8}.char-counter{transform-origin:100% 0;font-family:var(--sans);color:var(--muted);white-space:nowrap;pointer-events:none;background:#ffffffeb;border-radius:999px;padding:2px 8px;font-size:12px;font-weight:600;position:absolute;top:calc(100% + 4px);right:0}.char-counter.is-full{color:#b91c1c}.history-screen{background:var(--paper);min-height:100vh}.history-main{flex-wrap:wrap;align-items:flex-start;gap:28px;max-width:1280px;margin:0 auto;padding:24px 20px 48px;display:flex}.history-list{flex:280px;min-width:0;max-width:340px}.history-list h1{margin:0 0 14px;font-size:20px}.history-list ol{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.history-item{border:1.5px solid var(--line-soft);background:var(--white);width:100%;min-height:44px;color:var(--ink);text-align:left;cursor:pointer;border-radius:12px;align-items:center;gap:14px;padding:12px 14px;display:flex}.history-item:hover{border-color:#b9bdc9}.history-item[aria-current=true]{background:var(--accent-soft);border-color:var(--accent)}.history-date{font-size:15px;font-weight:600;display:block}.history-meta{color:var(--muted-2);margin-top:2px;font-size:13px;display:block}.history-view{flex:999 560px;min-width:0}.history-view-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;display:flex}.history-view-head h2{margin:0;font-size:20px}.history-view-actions{align-items:center;gap:8px;display:flex}.readonly-badge{color:var(--muted);background:var(--paper-dark);border-radius:999px;align-items:center;gap:6px;padding:8px 12px;font-size:13px;font-weight:600;display:inline-flex}.history-view .page-frame{filter:saturate(.9)}.history-empty{text-align:center;max-width:560px;color:var(--muted);margin:80px auto;padding:0 20px}.history-empty .hand{color:var(--accent);margin:0 0 8px;font-size:34px}.home-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;max-width:1160px;margin:0 auto;padding:24px;display:flex}.home-nav{align-items:center;gap:8px;display:flex}.home-nav-link{color:var(--muted);padding:12px 14px;font-size:15px;text-decoration:none}.landing{flex-wrap:wrap;align-items:center;gap:56px;max-width:1160px;margin:0 auto;padding:40px 24px 64px;display:flex}.landing-copy{flex:440px;min-width:0}.landing-kicker{color:var(--accent);margin:0 0 18px;font-size:30px}.landing h1{letter-spacing:-1.5px;word-break:keep-all;margin:0;font-size:clamp(36px,6vw,54px);font-weight:800;line-height:1.18}.landing-desc{color:var(--muted);word-break:keep-all;max-width:30em;margin:24px 0 0;font-size:18px;line-height:1.7}.landing-cta{flex-wrap:wrap;gap:12px;margin-top:36px;display:flex}.landing-note{color:var(--muted-2);word-break:keep-all;margin:18px 0 0;font-size:14px}.landing-art{flex:460px;min-width:0;position:relative}.landing-sheet{background:var(--white);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);border-radius:18px;padding:20px;transform:rotate(-1.2deg)}.landing-sheet-top{color:var(--muted-2);border-bottom:1px dashed #c9ccd6;justify-content:space-between;align-items:center;padding-bottom:12px;font-size:13px;display:flex}.landing-live{align-items:center;gap:6px;display:inline-flex}.dot{background:#1f9d6b;border-radius:50%;width:8px;height:8px;display:inline-block}.landing-sheet-body{background-image:linear-gradient(#eef0f4 1px,#0000 1px);background-size:100% 30px;height:340px;position:relative;overflow:hidden}.landing-sheet-body svg{position:absolute;top:0;left:0}.landing-sheet-title{margin:0;font-size:34px;position:absolute;top:22px;left:14px}.landing-sheet-list{color:var(--ink-soft);margin:0;font-size:26px;line-height:30px;position:absolute;top:76px;left:22px}.landing-cursor{color:var(--white);white-space:nowrap;border-radius:6px;padding:3px 8px;font-size:12px;font-weight:600;position:absolute}.landing-sticker{background:var(--yellow);border-radius:4px;padding:6px 14px;font-size:24px;position:absolute;top:-18px;right:-6px;transform:rotate(4deg)}.how{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;max-width:1160px;margin:0 auto;padding:0 24px 72px;display:grid}.how-card{background:var(--white);border:1.5px solid var(--line);border-radius:14px;padding:22px}.how-num{color:var(--accent);margin:0;font-size:28px}.how-card h2{margin:4px 0 8px;font-size:18px}.how-card p:last-child{color:var(--muted);margin:0;font-size:15px;line-height:1.6}.mynotes{flex-wrap:wrap;align-items:flex-start;gap:40px;max-width:1160px;margin:0 auto;padding:16px 24px 72px;display:flex}.new-note{flex-direction:column;flex:320px;gap:16px;max-width:400px;padding:28px 24px;display:flex}.new-note-kicker{color:var(--accent);margin:0;font-size:26px}.new-note h1{margin:-8px 0 4px;font-size:24px}.field{color:var(--muted);flex-direction:column;gap:6px;font-size:14px;font-weight:600;display:flex}.field input,.field select{border:1.5px solid var(--line);background:var(--white);min-height:44px;color:var(--ink);border-radius:10px;padding:0 12px;font-family:inherit;font-size:16px}.field input:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:1px}.form-error{color:#b91c1c;margin:0;font-size:14px}.note-list{flex:999 420px;min-width:0}.note-list h2{margin:0 0 14px;font-size:20px}.note-list ul{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:0;padding:0;list-style:none;display:grid}.note-card{background:var(--white);border:1.5px solid var(--line-soft);min-height:72px;color:var(--ink);border-radius:14px;align-items:center;gap:14px;padding:14px;text-decoration:none;display:flex}.note-card:hover{border-color:var(--accent);color:var(--ink)}.note-card-thumb{border:1px solid var(--line);background-color:var(--white);background-image:linear-gradient(#e9ecf2 1px,#0000 1px);background-size:100% 8px;border-radius:6px;flex:none;width:52px;height:40px}.note-card-body{min-width:0}.note-card-name{text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:600;display:block;overflow:hidden}.note-card-meta{color:var(--muted-2);margin-top:2px;font-size:13px;display:block}.empty{color:var(--muted-2);font-size:15px}.note-item{position:relative}.note-delete{width:40px;height:40px;color:var(--muted-2);cursor:pointer;background:0 0;border:0;border-radius:10px;justify-content:center;align-items:center;display:inline-flex;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.note-delete:hover,.note-delete:focus-visible{color:#b91c1c;background:#fde8e8}.note-item .note-card{padding-right:56px}