/* Fixed workspace lettering, subset from the bundled Nanum Brush and Jua fonts. */
@font-face{font-family:WLBrushUI;src:url('/fonts/chrome/brush-ui.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:WLWordmarkUI;src:url('/fonts/chrome/brand-ui.woff2') format('woff2');font-weight:400;font-display:swap}
/* Pastel Windows: chrome is decorative; all editing stays in the original editor. */
:root{--bg:#eeeaff;--ink:#44345f;--muted:#796d8b;--line:#ded6ec;--green:#8263b1;--orange:#c66e9b;--pixel-edge:#aaa1d1;--pixel-shadow:#d8d2ee;--glass:linear-gradient(135deg,#fffdfdf5,#f8f6ffed);--bevel:inset 1px 1px 0 #fff,inset -1px -1px 0 #c5bce0,0 2px 4px #7b6e9b15;--title-glass:linear-gradient(110deg,#f6d5ed 0%,#d5d0fb 46%,#bedff9 100%)}
html{scroll-behavior:smooth;scroll-padding-top:24px}html body{color:var(--ink);background-color:#ecebff;background-image:radial-gradient(ellipse at 8% 8%,#ffe1f2 0,transparent 38%),radial-gradient(ellipse at 96% 30%,#d6f1ff 0,transparent 42%),radial-gradient(ellipse at 34% 84%,#e4d8ff 0,transparent 45%),linear-gradient(145deg,#eef1ff,#ede5fc);background-size:auto;background-attachment:fixed;min-height:100dvh}
body:before{content:'';position:fixed;inset:0;z-index:-1;opacity:.35;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='250' viewBox='0 0 280 250'%3E%3Cpath fill='%23fff' d='M35 46h8v-8h8v8h8v8h-8v8h-8v-8h-8zM180 175h6v-6h6v6h6v6h-6v6h-6v-6h-6z'/%3E%3Cpath fill='%23ffe9f7' d='M180 30h12V18h30v12h12v12h14v12h-82V42h14zM0 210h20v-12h30v12h16v12H0z'/%3E%3C/svg%3E")}
button,a,input,textarea{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #9769c3;outline-offset:3px}button:disabled{opacity:.5}
.topbar{max-width:1256px;margin:auto;padding:26px 24px 12px;height:auto;min-height:120px;border:0;background:none;box-shadow:none;gap:24px;flex-wrap:wrap}.brand{gap:15px}.brand-logo{width:88px;height:88px;filter:drop-shadow(0 4px 7px #a78bc13a);border-radius:23px}.brand-copy{display:flex;flex-direction:column;gap:2px}.brand-wordmark{font-family:WLWordmarkUI,TTHeading,var(--font);font-size:43px;line-height:1.2;letter-spacing:1px;color:#59407d;text-shadow:0 2px 0 #fff,0 4px 0 #d2c4eb}.brand small.brand-tagline{display:block;max-width:none;color:#73628d;font-size:12px;letter-spacing:.5px}.top-nav{margin-left:auto;gap:8px;height:auto}.nav-item{background:#f7f3ffb3;border:1px solid #c6bbdc!important;box-shadow:var(--bevel);color:#65517d;padding:0 15px;min-height:44px}.nav-item.active{background:linear-gradient(#fffaff,#e9e1ff);color:#5f437d;box-shadow:var(--bevel)}.header-actions{gap:8px}.header-actions .new-btn{display:none}
html body .btn,html body .nav-item,html body .make-handwriting-btn{border:1px solid #c5b9dd;background:linear-gradient(#fffdfefc,#ece8f9);box-shadow:var(--bevel);color:#55416f;border-radius:10px!important;transition:transform .12s,box-shadow .12s,background .12s;min-height:44px}.btn:hover:not(:disabled),.nav-item:hover:not(:disabled),.make-handwriting-btn:hover:not(:disabled){background:linear-gradient(#fff,#e4edff);border-color:#a79bd3;box-shadow:inset 1px 1px 0 #fff,0 3px 8px #9681bb30}.btn:active:not(:disabled),.nav-item:active:not(:disabled){transform:translateY(1px);box-shadow:inset 1px 1px 3px #9b8cb638}html body .btn.primary{background:linear-gradient(115deg,#fff0f4 -25%,#f4abcf 5%,#bd9ae9 55%,#9ccdf4);border-color:#bd9ed6;color:#483565;box-shadow:inset 0 2px 0 #ffffffe6,inset 0 -2px 3px #ac84c550,0 3px 8px #b294ce40;text-shadow:0 1px 0 #ffffff80}html body .btn.primary:hover{background:linear-gradient(115deg,#ffd9e8,#ec9fca,#b28ae5,#92c4ef)}html body #removeAdsBtn{background:linear-gradient(130deg,#fff4fb,#e5dcff,#d8f0ff)!important;color:#684780!important;border-color:#cbb6df!important;box-shadow:inset 1px 2px 0 #fff,0 2px 5px #b995cf33}
.account-bar{max-width:1208px;margin:4px auto 0;padding:9px 15px;background:#ffffff94;border:1px solid #ffffffd9;border-radius:13px;color:#746382;gap:8px 14px}.account-bar strong{color:#5d4676}.account-bar button,.account-bar a{color:#765c94}.account-notice:empty{display:none}.titlebar{max-width:1256px;padding:25px 24px 18px;align-items:center;gap:18px}.eyebrow{font-size:10px;color:#9572a5;letter-spacing:2px}.titlebar h1{color:#53406f}.titlebar p.subtitle{color:#7d6c90}.saved{background:#ffffffb3;border-color:#cfc4df;border-radius:7px;box-shadow:inset 1px 1px 0 #fff;padding:6px 10px;color:#6c5e7f;white-space:nowrap}.status-dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(#abe5ad,#6ab488);box-shadow:0 0 0 1px #6f9c7850,inset 0 1px 1px #fff}
.workspace{max-width:1256px;margin:auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:24px;padding:0 24px 28px;align-items:start}.editor,.studio-tools{min-width:0;border:1px solid #9d94be;border-radius:9px;padding:5px;background:var(--glass);box-shadow:inset 0 0 0 2px #ffffffeb,0 0 0 1px #cdc6e7,4px 5px 0 #c8c3e66b,0 12px 28px #8673ab22;overflow:hidden}.editor{grid-column:1;grid-row:1}.studio-tools{grid-column:2;grid-row:1}.window-caption{height:45px;display:flex;align-items:center;gap:9px;padding:4px 7px;background:var(--title-glass);border:1px solid #b0a6cf;box-shadow:inset 0 1px 0 #fff;border-radius:4px 4px 0 0;color:#46355f}.window-caption img{width:31px;height:31px;object-fit:contain;border-radius:6px;box-shadow:0 0 0 1px #fff9}.window-caption strong{font-size:16px;font-weight:700;letter-spacing:.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.window-actions{display:flex;gap:5px;margin-left:auto}html body .window-control{width:32px;height:32px;min-height:32px;border:1px solid #a59bc2;background:linear-gradient(#fffeff,#dad8ef);box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #b1a4cc;border-radius:3px!important;padding:0;display:grid;place-items:center;font-size:22px;line-height:1;color:#56456f}.window-control:hover{background:#f1e6ff!important}.window-control.close-tools{background:linear-gradient(#ffe9f4,#f3b5d7)}
.window-menu{display:flex;align-items:center;gap:3px;padding:6px 9px;border-bottom:1px solid #cfc4df;background:#f6f3fb}.window-menu button{padding:4px 11px;font-size:13px;min-height:34px}.window-menu button:hover{background:#e8dff7}.window-menu .window-menu-note{margin-left:auto;color:#8b7b9e;font-size:11px}.editor-toolbar{height:46px;padding:5px 10px;background:#fffafc;border:0;border-bottom:1px solid #e9e0ef;box-shadow:none;gap:7px}.editor-toolbar:before{content:none}.title-input{display:block;min-width:0;width:100%;color:#5b4778;font-size:13px;padding:8px;border-radius:6px;background:#f5f0fa;border:1px solid #e4d9ec}.tool-group{flex:none;gap:4px}.icon-btn{width:34px;height:34px;color:#7d6399}.icon-btn:hover{background:#ebe2f6}.divider{background:#d8cbe6}.zoom-label{color:#8b7a9a}.stage{background:#f4f0f9;border:0;box-shadow:none;min-height:0;padding:20px 20px 14px;background-image:radial-gradient(#c4b2d940 .8px,transparent .8px);background-size:12px 12px}.sheet{border-radius:9px;box-shadow:0 0 0 1px #e5dcd0,0 5px 14px #8c729522}.stage-bottom{margin-top:14px;color:#82738e;font-size:11px}.editor-foot{padding:10px 10px 8px;background:linear-gradient(#faf8ff,#eeebf8);border:1px solid #c9c0db;box-shadow:inset 1px 1px 0 #fff;color:#786786;gap:6px}.editor-foot>span{display:none}.editor-stats-actions{justify-content:space-between;width:100%;gap:6px}html body .clear-stickers-btn{background:transparent;border:0;box-shadow:none;color:#957285;font-size:11px;min-height:32px}.editor-save{padding:14px 20px 16px;background:#f9f6fc}.editor-save .btn{width:100%;min-height:49px;font-size:16px;letter-spacing:.3px;border-radius:24px!important}.editor-save .icon{width:22px;height:22px}
.studio-tabs{display:flex;gap:5px;padding:14px 12px 0;background:#f4f1fa;border-bottom:1px solid #d8cce6}.studio-tabs button{flex:1;min-height:48px;border:1px solid #cfc5df;border-bottom:0;background:linear-gradient(#fff,#e7e5f5);box-shadow:inset 1px 1px 0 #fff;color:#75638c;border-radius:10px 10px 0 0!important;font-weight:700;font-size:14px;display:flex;justify-content:center;align-items:center;gap:7px}.studio-tabs button.active{background:linear-gradient(#fff5fc,#fce7f5);color:#b45392;border-color:#dbaacc;position:relative}.studio-tabs .icon{width:20px;height:20px}.studio-tools .left-column,.studio-tools .right-column{width:100%;display:block;grid-column:auto}.studio-tools .panel{display:block;border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible;padding:0;margin:0}.studio-tools .panel-heading,.studio-tools .note-box,.studio-tools .mini-card{display:none}.studio-tools .panel-section{padding:19px 18px;border-color:#ece3f1}.section-label,.ink-section-label{color:#655077}.tiny,.color-name,.font-scroll-hint,.font-current,.range-line{color:#8a779b}.font-heading-row{gap:8px}.make-handwriting-btn{padding:6px 9px;font-size:11px;min-height:35px!important;white-space:nowrap}.make-handwriting-btn .icon{width:15px;height:15px}.font-options{max-height:340px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:4px 3px 9px;scrollbar-color:#c8b4df #f7f2fc}.font-choice{min-height:116px;width:100%;min-width:0;padding:12px;text-align:left;background:linear-gradient(135deg,#fffefa,#faf6ff);border:1px solid #ddd4e9;box-shadow:inset 1px 1px 0 #fff;color:#5f4677;border-radius:12px!important;display:flex;flex-direction:column;align-items:stretch;gap:7px}.font-choice.active{background:linear-gradient(#fffafd,#fcebf6);border-color:#d880b3;color:#945980;box-shadow:0 0 0 1px #e5b1d233,inset 1px 1px 0 #fff}.font-title{font-size:12px!important}.font-sample{color:#59416d;font-size:22px}.font-choice .font-caption{color:#8a789b;font-size:10px;display:block}.font-check{color:#d966a7}.font-choice-top{display:flex;justify-content:space-between;gap:2px}.personal-font-heading{grid-column:1/-1}.personal-font-entry .font-choice{padding-right:43px}.personal-font-remove{width:34px;height:34px;font-size:22px}.personal-font-notice{border-radius:8px;background:#f4f0fc;border-color:#ded1ee;color:#79638f}#paperColors{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 8px;justify-items:stretch}html body #paperColors .swatch{width:100%;min-width:0;height:43px;border-radius:9px!important;box-shadow:inset 0 2px 3px #fff8,0 2px 4px #a58ebc19;border:1px solid #b8a5cc50}.swatch.active:after{border-color:#ba80bb;border-radius:11px;inset:-3px}.color-list .swatch.active:before{font-size:14px}.pattern-preview{border-radius:9px!important;height:78px;background-color:#fffcf6;border-color:#dfd1e4}.pattern.active .pattern-preview{border-color:#ba87b6;box-shadow:0 0 0 2px #f2ddec}.pattern{color:#967e9f}.pattern.active{color:#a45f91}.text-colors{gap:14px}.text-colors .swatch{width:26px;height:26px}.ink-contrast-hint{color:#a0577c}input[type=range]{accent-color:#b88aca}.range-line{padding:8px 0}
.workspace[data-tool="font"] .paper-section,.workspace[data-tool="font"] .right-column,.workspace[data-tool="paper"] .font-section,.workspace[data-tool="paper"] .type-section,.workspace[data-tool="paper"] .right-column,.workspace[data-tool="stickers"] .left-column{display:none}.sticker-tabs{max-width:none;width:auto;padding:15px 13px 7px;gap:3px}.sticker-tabs .chip{border-radius:18px!important;color:#897095;border:0;min-height:37px}.chip.active{background:linear-gradient(#ffc6e6,#ed9acc);box-shadow:inset 0 1px 1px #fff;color:#783b68}.sticker-browse-info{color:#947d9e;font-size:11px;padding:0 18px;margin:5px 0 12px}.sticker-grid{grid-template-columns:repeat(4,minmax(0,1fr));width:100%;max-height:420px;padding:3px 16px 12px;gap:10px;scrollbar-color:#c8b4df #f7f2fc}.sticker-tile{height:102px;padding:11px;background:linear-gradient(135deg,#fffcf6,#faf4fb);border:1px solid #e5dbe9;box-shadow:inset 1px 1px 0 #fff;border-radius:13px!important}.sticker-tile:hover{background:#fff2fa;border-color:#d8a9ca;box-shadow:0 3px 9px #a083b125;transform:translateY(-2px)}.upload-area{width:calc(100% - 32px)!important;margin:0 16px 16px;min-height:48px;padding:12px;border:1px dashed #c3adce;background:#f9f3fd;color:#876194;border-radius:10px!important;font-size:12px}.selection-empty{color:#a08aa8;border-color:#eadfeb;font-size:12px;padding:22px}.selection-panel{padding:18px;border-color:#eadfeb;background:#fbf6ff}.selection-panel h3{color:#795b8f}.selection-panel .range-label{color:#8b739a;font-size:12px}.selection-actions button{font-size:12px;min-height:40px;padding:7px;background:#f2eaf9;color:#7d5b90}.sticker-object.selected:after{border-color:#c47ab4}.sticker-object.selected:before{border-color:#c47ab4}.studio-tools.is-collapsed>*:not(.window-caption){display:none}.workspace.is-focused{grid-template-columns:minmax(0,760px);justify-content:center}.workspace.is-focused .studio-tools{display:none}
.footer{max-width:1208px;margin:0 auto 24px;padding:10px 15px;background:linear-gradient(110deg,#e9ddf8,#dce7ff);border:1px solid #b8acd1;box-shadow:inset 1px 1px 0 #fff,0 3px 8px #8b72ae1a;border-radius:7px;align-items:center;gap:14px;color:#806d92}.footer button{color:#735b88}.task-start{display:flex;align-items:center;gap:7px;font-weight:700;padding:5px 12px!important;border:1px solid #b9a9cd;background:linear-gradient(#fff,#e6dcf3);box-shadow:var(--bevel)}.task-start img{width:27px;height:27px;border-radius:5px}.footer-caption{margin-right:auto;font-size:12px}.footer-links{gap:6px}.toast{background:#68517f;border:1px solid #ad94c4;box-shadow:0 8px 25px #5a38663b;border-radius:12px;color:#fff}.mobile-tabs{display:none}
/* All secondary surfaces share the same window material. */
dialog,.account-gate,.page-main>.panel{border:1px solid #b7a7cd;border-radius:12px;background:var(--glass);box-shadow:inset 0 0 0 2px #fff,5px 6px 0 #cfc3e15e,0 18px 60px #78618e29}dialog::backdrop{background:#6f548e55;backdrop-filter:blur(5px)}.dialog-head{background:var(--title-glass);border-bottom:1px solid #baadcf;padding:15px 20px;box-shadow:inset 0 1px 0 #fff}.dialog-head h2{font-size:21px!important;color:#594170}.dialog-head .icon-btn{background:linear-gradient(#fff5fc,#edbcdb);border:1px solid #ba9cc5;border-radius:5px!important}.dialog-content p,.help-list{color:#7e688d}.saved-card{border:1px solid #dbc6dc;border-radius:12px;box-shadow:0 3px 8px #9d7caa10}.saved-card.current{border-color:#c87eaf;box-shadow:0 0 0 2px #edd6e6}.library-actions{gap:8px}.saved-card .delete-doc{min-height:38px;color:#a46e8d}.saved-card small{color:#927d9a}.account-gate{position:relative;overflow:hidden;margin:6vh auto;padding:48px 28px 26px;color:#5c4173}.account-gate:before{content:'WeLetter · 작은 편지 작업실';position:absolute;left:0;right:0;top:0;padding:7px 16px;text-align:left;font-size:12px;background:var(--title-glass);border-bottom:1px solid #c4b3d7}.account-gate img{width:170px;border-radius:30px}.account-gate h1{color:#654581}.account-gate p{color:#8a759b}.account-gate a{color:#88629f}.account-gate-actions .kakao-login img{width:224px;border-radius:0}.account-gate .account-apple{background:#393044!important;color:#fff!important}.app-cover{padding:0;border-radius:13px}.app-cover-bar{background:var(--title-glass);border-color:#bfafd2}.app-cover-bar span{border-radius:50%;box-shadow:inset 0 1px 0 #fff9}.app-cover-content{background:linear-gradient(145deg,#fffafc,#eeeaff);padding:24px}.app-cover-logo{width:200px;border-radius:36px}.app-cover-tagline{color:#76568e}.app-cover-note{color:#9983aa}.app-cover::backdrop{background:#ebe3f8e8}.commerce-benefits{background:linear-gradient(125deg,#fff0f8,#ede7ff,#e3f3ff);border-color:#d3bfe4}.page-header{background:#ffffff9c;border-color:#ccc0de}.page-main{color:#58436e}.page-main .panel{padding:24px}.page-main .status{background:#f4effc;border-color:#d5c4e6;color:#775c8c}.page-main .status.error{background:#fff0f6;color:#a35779}.page-intro,.page-footer,.page-main .muted{color:#8c759a}.page-brand{color:#62477f}.member-count{background:#f5eefc;border-color:#d9c9e5;color:#795587}.member-count strong{color:#a169a5}.page-dialog{color:#5e4276;background:var(--glass);border-color:#b8a5cd}.page-main th{background:#eee5fa;color:#68517f}.page-main .table-wrap{border-color:#d8cae6}.page-main td{border-color:#eee5f3}.page-main .btn.danger{background:linear-gradient(#b86c8c,#a05a7c);color:#fff}.page-main .inline-field input{border-radius:8px;border-color:#cdbbdd;color:#604976}.page-main .warning{border-radius:9px}
@media(min-width:761px){.studio-tools{position:sticky;top:18px}.workspace.is-focused .editor .stage{padding:24px 32px}.workspace[data-tool="font"] .type-section{padding-top:15px}.studio-tools .font-options{max-height:350px}}
@media(max-width:1000px) and (min-width:761px){.topbar{gap:14px}.top-nav{margin-left:auto}.brand-wordmark{font-size:33px}.brand-logo{width:68px;height:68px}.brand small.brand-tagline{font-size:10px}.workspace{gap:16px;padding:0 18px 24px;grid-template-columns:minmax(0,1fr) 340px}.stage{padding:16px 12px}.window-caption strong{font-size:14px}.window-menu .window-menu-note{display:none}.account-bar,.footer{margin-left:18px;margin-right:18px}.studio-tools .panel-section{padding:16px 13px}.topbar{padding:20px 18px 10px}.titlebar{padding-left:18px;padding-right:18px}}
@media(max-width:760px){html{scroll-padding-top:16px}html body{padding-bottom:76px}.topbar{min-height:0;padding:14px 16px 8px;gap:10px;flex-wrap:nowrap}.brand{gap:9px;min-width:0}.brand-logo{width:56px;height:56px;border-radius:16px}.brand-wordmark{font-size:29px;letter-spacing:0}.brand small.brand-tagline{font-size:10px;letter-spacing:0}.top-nav{display:none}.header-actions{margin-inline-start:auto}.header-actions .btn{font-size:12px;padding:8px 10px}.account-bar{margin:7px 12px 0;padding:8px 11px;gap:2px 10px;border-radius:10px}.account-bar strong{flex-basis:auto;font-size:11px!important}.account-bar #accountSyncStatus{font-size:10px!important}.account-bar button,.account-bar a{font-size:11px!important;min-height:32px;padding:4px}.titlebar{padding:20px 16px 16px;align-items:flex-start;gap:10px}.titlebar .eyebrow{display:none}html body .titlebar h1{font-size:23px}.titlebar p.subtitle{font-size:12px!important;line-height:1.6;max-width:235px;margin-top:4px}.saved{font-size:10px!important;padding:5px 7px;max-width:125px;white-space:normal;text-align:left;flex-shrink:0}.saved .status-dot{width:6px;height:6px;flex:none}.workspace{display:flex;flex-direction:column;gap:18px;padding:0 12px 18px}.workspace .editor{width:100%;order:0}.workspace .studio-tools{width:100%;order:1;scroll-margin-top:12px}.workspace[data-mobile="write"] .studio-tools{display:none}.workspace.is-focused .studio-tools{display:none}.window-caption{height:43px}.window-caption strong{font-size:15px}.window-caption img{width:28px;height:28px}.window-control{height:30px!important;width:30px!important}.window-menu{gap:0;padding:3px 5px}.window-menu button{font-size:12px;padding:4px 9px}.window-menu-note{display:none}.editor-toolbar{padding:7px;gap:6px}.title-input{font-size:12px;padding:7px}.tool-group{gap:1px}.tool-group .icon-btn{width:30px;height:31px}.tool-group .divider,.tool-group .zoom-label{display:none}.stage{padding:14px 11px 12px}.sheet{border-radius:7px}.stage-bottom{font-size:10px!important;gap:4px}.editor-save{padding:13px 14px}.editor-save .btn{font-size:15px;min-height:46px}.editor-foot{padding:7px}.editor-stats-actions{font-size:10px}.clear-stickers-btn{font-size:10px!important}.studio-tools .left-column,.studio-tools .right-column{display:block;width:100%}.workspace[data-tool="font"] .right-column,.workspace[data-tool="paper"] .right-column,.workspace[data-tool="stickers"] .left-column{display:none}.studio-tools .left-column .panel{display:block}.font-options{max-height:330px;grid-template-columns:repeat(2,minmax(0,1fr))}.font-choice span:last-child{display:block}.font-choice{min-height:111px}.sticker-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-height:330px;gap:9px}.sticker-tile{height:94px}.studio-tools .selection-panel .range-controls{display:grid;grid-template-columns:1fr 1fr;gap:16px}.mobile-tabs{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;gap:5px;margin:0;padding:9px 12px max(10px,env(safe-area-inset-bottom));background:linear-gradient(#f4effff5,#ded7f4fa);border-top:1px solid #baabd2;box-shadow:inset 0 2px 0 #fff,0 -3px 15px #9a7ab01a;backdrop-filter:blur(12px)}html body .mobile-tabs button{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;border:1px solid #cdc0df;box-shadow:var(--bevel);border-radius:8px!important;padding:7px 3px;background:linear-gradient(#fff,#eee8f7);color:#806891;font-size:11px;min-height:50px;line-height:1.3}html body .mobile-tabs button.active{background:linear-gradient(#ffe8f6,#f3c1df);border-color:#d299bd;color:#8d4779}.mobile-tabs .icon{width:20px;height:20px}.footer{margin:0 12px 18px;padding:7px 8px;display:flex;flex-wrap:wrap;gap:5px}.footer-caption{display:none}.footer-links{margin:0 0 0 auto;gap:3px}.footer button{font-size:11px!important;min-height:38px;padding:5px 9px}.toast{bottom:90px}.account-gate{margin:24px 14px;padding:49px 18px 24px}.account-gate img{width:154px}.account-gate h1{font-size:25px}.account-gate-actions{max-width:330px}.account-gate p{font-size:13px}.account-gate .btn{min-height:48px}.dialog-head{padding:14px 16px}.dialog-head h2{font-size:20px!important}.dialog-content{padding:18px}.letter-list{grid-template-columns:1fr 1fr;gap:10px}.saved-card{padding:13px;min-height:140px}.saved-card h3{font-size:13px}.library-actions .btn{font-size:12px;padding:8px 10px}.page-main .panel{padding:20px 15px}.page-header{padding:12px 15px}}
@media(max-width:360px){.brand-logo{width:47px;height:47px}.brand-wordmark{font-size:25px}.brand small.brand-tagline{font-size:9px}.titlebar h1{font-size:20px!important}.titlebar .saved{max-width:96px;font-size:9px!important}.window-caption strong{font-size:13px}.letter-list{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* Dialog modules inject their own styles, so scope these overrides to their IDs. */
html body #handwritingDialog,html body #monetizationDialog{border:1px solid #b7a7cd;border-radius:12px;background:var(--glass);color:#5e4375;box-shadow:inset 0 0 0 2px #fff,0 18px 55px #78618e35}#handwritingDialog .hw-head{background:var(--title-glass);border-color:#c4afd5}#handwritingDialog .hw-head h2{color:#654480}#handwritingDialog .hw-btn{background:linear-gradient(#fff,#ece5f7);border-color:#c7b1d8;color:#76538e;box-shadow:var(--bevel);border-radius:9px}#handwritingDialog .hw-primary{background:linear-gradient(110deg,#edb4d6,#c6b1ed);color:#5c3e72}#handwritingDialog .hw-intro,#handwritingDialog .hw-editor,#handwritingDialog .hw-build{background:#f5edfc;border-color:#d7c0e5;border-radius:10px;box-shadow:none}#handwritingDialog .hw-intro strong,#handwritingDialog .hw-section h3{color:#73518a}#handwritingDialog .hw-section p,#handwritingDialog .hw-footnote{color:#8b729c}#handwritingDialog .hw-close{background:linear-gradient(#fff4fb,#edbfdd);border-color:#c9a5cd;border-radius:5px!important}#handwritingDialog .hw-component{background:#fcf7ff;border-color:#decee9}#handwritingDialog .hw-step{background:#ecddf7;border-color:#cfb7df;color:#8c60a3;border-radius:5px}#monetizationDialog .commerce-head h2{font-family:TTHeading,var(--font);font-weight:400;color:#694780}#monetizationDialog .commerce-price{background:linear-gradient(120deg,#ffe9f5,#e8ddff,#d7f1ff);border-color:#cbb6e1;border-radius:12px;color:#694780}#monetizationDialog .commerce-close{background:linear-gradient(#fff4fb,#ecc5e1);border:1px solid #ceb2d3;width:34px;height:34px;border-radius:6px!important}.account-gate .account-gate-actions .btn.kakao-login{background:#fee500!important;color:#191919!important;border-color:#fee500!important;box-shadow:none!important}
/* Comfortable contrast and a genuinely larger writing area in focus mode. */
.color-name,.font-scroll-hint,.font-current,.sticker-browse-info,.stage-bottom,.font-choice .font-caption{color:#796485}.selection-empty{color:#82708d}.titlebar p.subtitle,.account-gate p{color:#7c668d}.studio-tabs button{color:#735a87}.color-list .swatch:focus-visible{outline-color:#795295}.font-choice .font-caption{font-size:10px!important}.studio-tools .font-options::-webkit-scrollbar-thumb,.sticker-grid::-webkit-scrollbar-thumb{background:#c7b2dc;border-color:#f7f2fc;border-radius:8px}
@media(max-width:760px){body:has(.workspace.is-focused) .topbar,body:has(.workspace.is-focused) .account-bar,body:has(.workspace.is-focused) .titlebar{display:none}.workspace.is-focused{padding:6px 5px 18px}.workspace.is-focused .stage{padding:10px 5px}.window-control:focus-visible{outline-offset:2px}}
html body #trialDialog{border:1px solid #b8a7cf;border-radius:12px;background:var(--glass);color:#654b7b;box-shadow:inset 0 0 0 2px #fff,0 18px 55px #78618e35}html body #trialDialog::backdrop{background:#e9e1f5d6}#trialDialog .trial-window-bar{background:var(--title-glass);border-color:#c5b4d7}html body #trialBanner{font-family:var(--font);background:linear-gradient(100deg,#f3e5fa,#e1edff);border-bottom:1px solid #c4afd8;color:#715786}html body #trialBanner[data-urgent="true"]{background:#ffedee;color:#9d5b70}
/* Quiet outline controls inspired by the supplied Instagram interface. */
html body .icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:none;box-shadow:none;flex:none}
.top-nav .icon,.studio-tabs .icon,.mobile-tabs .icon,.task-start .icon,.editor-save .icon,.window-app-icon{color:#302a38}
html body .studio-tabs .icon,html body .mobile-tabs .icon{width:24px;height:24px}
html body .window-caption .window-app-icon{width:22px;height:22px;margin:0 4px;background:none;border:0;filter:none}
html body .window-control .icon{width:20px;height:20px;color:#403747;stroke-width:1.8}
html body .tool-group .icon{width:20px;height:20px;stroke-width:1.9}
html body .selection-actions .icon,html body .clear-stickers-btn .icon{width:17px;height:17px}
html body .stage-bottom .icon{width:15px;height:15px}
html body .make-handwriting-btn .icon{width:18px;height:18px}
html body .upload-area .icon{width:21px;height:21px;color:#403747}
html body #removeAdsBtn:before{content:none}
html body .plus-locked::after{content:'';display:inline-block;width:15px;height:15px;margin-left:5px;vertical-align:-2px;background:currentColor;-webkit-mask:url('/assets/ui-lock.svg') center/contain no-repeat;mask:url('/assets/ui-lock.svg') center/contain no-repeat;flex:none}
html body :is(#commerceClose,#hwClose){display:inline-flex;align-items:center;justify-content:center;padding:0}
:is(#commerceClose,#hwClose)>.wl-glyph{width:28px;height:28px}
html body .personal-font-remove{font-size:0!important;display:inline-flex;align-items:center;justify-content:center}
.personal-font-remove::before{content:'';display:block;width:20px;height:20px;background:currentColor;-webkit-mask:url('/assets/ui-close.svg') center/contain no-repeat;mask:url('/assets/ui-close.svg') center/contain no-repeat}
html body .font-check{display:inline-block;font-size:0;width:17px;height:17px;background:currentColor;-webkit-mask:url('/assets/ui-check.svg') center/contain no-repeat;mask:url('/assets/ui-check.svg') center/contain no-repeat;flex:none}
@media(max-width:760px){html body .mobile-tabs button{gap:4px}html body .window-caption .window-app-icon{width:21px;height:21px;margin:0 3px}}

/* Keep account actions quiet and leave writing controls beside the window toggle. */
html body #accountBar[hidden],html body .saved[hidden],html body #accountSyncNow[hidden],html body .footer-links [hidden]{display:none!important}
html body .footer-links{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:4px 8px}
html body .footer-links a{display:inline-flex;align-items:center;min-height:44px;padding:10px 12px;color:#735b88;font-size:11px;text-decoration:none}
html body .footer-links a:focus-visible{outline:2px solid #795295;outline-offset:2px}
html body .account-bar:has(.account-notice:empty){display:none}
html body #accountSyncNow[aria-busy="true"] .icon{opacity:.5}
.manual-save-feedback{position:fixed;z-index:110;left:50%;bottom:94px;transform:translateX(-50%);width:max-content;max-width:88vw;padding:12px 18px;border:1px solid #c6b5d9;border-radius:12px;background:#fff9ff;box-shadow:0 5px 24px #6c4c8130;color:#654b7b;font-size:13px;line-height:1.6}.manual-save-feedback:empty{display:none}

/* A small handwritten sign-off above the Start bar. */
.closing-signature{max-width:1208px;margin:0 auto 12px;padding:0 15px;font-family:WLBrushUI,cursive;font-size:32px;font-weight:400;line-height:1.4;letter-spacing:.04em;color:#80678f}
html body .footer-links{margin-left:auto}
.workspace{margin-top:18px}
@media(max-width:1240px){.closing-signature{margin-left:18px;margin-right:18px}}
@media(max-width:760px){.closing-signature{margin:0 12px 10px;padding:0 13px;font-size:30px}.workspace{margin-top:14px}}

html body .editor-toolbar .tool-group{margin-left:auto;gap:8px;flex:none}html body .editor-toolbar #zoomLabel[hidden]{display:none!important}

.editor > .window-caption .window-actions{margin-left:auto}
@media(max-width:760px){html body .mobile-tabs button{min-height:48px;display:flex;align-items:center;justify-content:center;padding:10px;gap:0}}

html body #removeAdsBtn{font-family:var(--font);font-weight:800;letter-spacing:.02em}html body #monetizationDialog .commerce-head #commerceTitle{font-family:var(--font);font-weight:800}
html body .editor .window-caption .editor-prompt{font-family:WLBrushUI,cursive;font-size:22px;font-weight:400;line-height:1.2;letter-spacing:0;min-width:0;color:#735583}
html:lang(ja) .editor-prompt > :not([lang="ja"]),
html:lang(en) .editor-prompt > :not([lang="en"]),
html:not(:lang(ja), :lang(en)) .editor-prompt > :not([lang="ko"]) { display: none; }
@media(max-width:760px){
  html body .editor .window-caption{height:auto;min-height:43px;gap:5px}
  html body .editor .window-caption .editor-prompt{font-size:clamp(15px,5vw,19px);white-space:normal;text-wrap:balance}
  html body .editor .window-caption .editor-prompt :lang(ko){word-break:keep-all}
  html body .editor .window-caption .window-app-icon{width:18px;height:18px;margin:0}
}

.letter-select{display:inline-flex;align-items:center;gap:7px;min-height:40px;cursor:pointer;font-size:12px;margin-bottom:3px}.letter-select input{width:18px;height:18px;accent-color:#a06fae;cursor:pointer}.saved-card.selected{outline:2px solid #b57bc4;outline-offset:-2px}.library-actions{align-items:center}

html body .letter-field::placeholder{font:inherit;letter-spacing:inherit;color:inherit;opacity:1}

html body .editor-save{display:flex;gap:10px;align-items:stretch}html body .editor-save .btn{flex:1;min-width:0;width:auto;padding-left:10px;padding-right:10px}html body .editor-save #shareBtn{background:linear-gradient(#fff,#e9e3fa);color:#6b5183;border-color:#c5b1d8;font-weight:600}
@media(max-width:760px){html body .editor-save{gap:8px}html body .editor-save .btn{font-size:13px;letter-spacing:0;gap:6px}html body .editor-save .icon{width:20px;height:20px}}
/* Curated sticker collections and explicit MY selection. */
.sticker-grid .sticker-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:104px;padding:8px;gap:0;min-width:0}
.sticker-art{display:block;min-height:0;width:100%;height:84px;flex:1}.sticker-art>svg,.sticker-art>img{width:100%;height:100%;object-fit:contain}
.my-sticker-actions{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:0 16px 10px}.my-sticker-actions[hidden]{display:none}.my-sticker-actions>span{flex:1 1 100%;font-size:11px;color:#8a719a}.my-sticker-actions .btn{font-size:12px;padding:5px 12px;min-height:36px}.my-sticker-actions #deleteMyStickers{color:#a45984;border-color:#e1b7ce;background:linear-gradient(#fff8fc,#f9dfed)}
.sticker-choice-check{position:absolute;top:7px;right:7px;width:22px;height:22px;border:1.5px solid #c4aed0;border-radius:50%;background:#fffcff;z-index:1;box-shadow:0 1px 3px #9475a31f}.sticker-tile.is-chosen{border-color:#c27aaa;background:linear-gradient(#fff9fd,#f7deef);box-shadow:inset 0 0 0 1px #dfaacb}.sticker-tile.is-chosen .sticker-choice-check{background:#c879ac;border-color:#c879ac}.sticker-tile.is-chosen .sticker-choice-check:after{content:'';display:block;width:6px;height:11px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);margin:2px 6px}
@media(max-width:760px){.sticker-grid .sticker-tile{height:96px}.sticker-art{height:78px}.my-sticker-actions .btn{min-height:40px}}

/* Equal category tabs; only MY carries the shared Pro lock icon. */
#stickerTabs{display:flex;align-items:center;gap:8px;overflow:visible;padding-top:18px;flex-wrap:nowrap}
#stickerTabs>.chip{display:inline-flex;align-items:center;justify-content:center;flex:1;min-width:0;min-height:40px;padding:6px 8px}
#stickerTabs .chip,#stickerTabs .chip:hover,#stickerTabs .chip.active{background:transparent;border:0;box-shadow:none;white-space:nowrap}
#stickerTabs .chip.active{color:#783b68;font-weight:800}
#stickerTabs .plus-locked::after{flex:none;width:13px;height:13px;margin-left:5px}

/* Overlay controls stay finger-sized even when the letter is scaled down. */
.sticker-object.selected:before{display:none}
.sticker-controls{position:absolute;inset:0;z-index:6;pointer-events:none}
.sticker-controls[hidden]{display:none!important}
.sticker-controls .sticker-handle{position:absolute;display:grid;place-items:center;transform:translate(-50%,-50%);width:38px;height:38px;padding:8px;border:1px solid #bda5cf;border-radius:50%;background:#fffdfefa;color:#80618f;box-shadow:0 2px 7px #705b8b30;pointer-events:auto;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.sticker-controls .sticker-handle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.sticker-controls .sticker-handle:active{cursor:grabbing;background:#f8eafa}
.sticker-controls .sticker-handle:focus-visible{outline:3px solid #bfa2e4;outline-offset:2px}
.sticker-controls .sticker-handle-delete{background:#fff3f8;color:#bf5f89;border-color:#e5bad0;cursor:pointer}
@media(pointer:coarse){.sticker-controls .sticker-handle{width:42px;height:42px}}

#stickerBrowseInfo[hidden]{display:none!important}

/* Loading is a quiet logo, pixel lettering and an indeterminate filling gauge. */
#accountGate[hidden]{display:none!important}
#accountGate .account-loader{display:none}
#accountGate.is-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;min-height:100svh;max-width:none;margin:0;padding:32px 24px;border:0;border-radius:0;background:transparent;box-shadow:none}
#accountGate.is-loading:before{display:none}
#accountGate.is-loading>:not(.account-loading-logo,.account-loader,#loadingAdmin,#accountGateMessage,.account-gate-actions),
#accountGate.is-loading:not(.is-reconnecting)>:is(#accountGateMessage,.account-gate-actions),
#accountGate.is-reconnecting .account-gate-actions>:not(#accountRetry,#accountDownloadLocal,#accountBackupNote){display:none!important}
#accountGate.is-reconnecting #accountGateMessage{max-width:32em;margin:0}
#accountGate.is-reconnecting .account-gate-actions{margin:0}
#accountGate.is-loading>.account-loading-logo{display:block;width:152px;height:152px;max-width:48vw;object-fit:contain;border-radius:30px;filter:drop-shadow(0 9px 18px #b49ddd28)}
#accountGate.is-loading .account-loader{display:flex;flex-direction:column;align-items:center;gap:17px;width:min(100%,288px)}
:is(#accountGate,#trialLoading) .account-loader-text{margin:0;width:100%;line-height:1}
:is(#accountGate,#trialLoading) .account-loader-text img{display:block;width:100%;height:36px;max-width:none;border-radius:0;image-rendering:pixelated;object-fit:contain}
.account-loader-gauge{width:100%;height:18px;padding:3px;overflow:hidden;border:1px solid #c7b5d8;border-radius:4px;background:#fffafdd9;box-shadow:inset 0 1px 3px #a688b222,0 1px 0 #fff}
.account-loader-gauge>span{display:block;width:100%;height:100%;transform-origin:left;background:repeating-linear-gradient(90deg,transparent 0 10px,#fff9 10px 13px),linear-gradient(90deg,#edb4d7,#c3abec 60%,#acd7f4);box-shadow:inset 0 1px 0 #fff8;animation:workshop-loading-fill 2.8s steps(20,end) infinite}
@keyframes workshop-loading-fill{0%{transform:scaleX(.04)}85%,100%{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.account-loader-gauge>span{animation:none;transform:scaleX(.6)}}
html body:has(#accountGate.is-loading:not([hidden])){padding-bottom:0}

/* A minimal sign-in window, with the logo's three colored glass dots. */
#accountGate:before{display:none}
#accountGate:not(.is-loading){padding-top:62px}
.account-login-titlebar{position:absolute;inset:0 0 auto;height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;background:var(--title-glass);border-bottom:1px solid #c4b3d7;box-shadow:inset 0 1px 0 #ffffffa6}
.account-window-dots{display:flex;align-items:center;gap:7px}
.account-window-dots i{display:block;width:10px;height:10px;border-radius:50%;background:linear-gradient(#ffa8bd,#ed7c9f);box-shadow:inset 0 1px 1px #fff9,0 1px 2px #9f7fa329}
.account-window-dots i:nth-child(2){background:linear-gradient(#ffe3a8,#f5c46f)}
.account-window-dots i:nth-child(3){background:linear-gradient(#bddfff,#86bced)}
.account-login-titlebar strong{font:800 14px/1.2 system-ui,sans-serif;color:#5e4579;letter-spacing:.2px}
#accountGate.is-login #accountGateTitle,#accountGate.is-login #accountGateCopy{display:none}
#accountGate.is-login .account-gate-actions{margin-top:24px;margin-bottom:0}
#accountGate .account-trial-link{position:relative;align-self:center;display:inline-flex;align-items:center;justify-content:center;min-height:42px;margin-top:10px;margin-bottom:8px;padding:9px 24px;font-size:13px;font-weight:600;line-height:1.4;color:#85619a;background:linear-gradient(135deg,#fff8fd,#f1eaff);border:1px solid #d9c5e7;border-radius:17px 17px 17px 7px;box-shadow:inset 0 1px 0 #fff,0 4px 12px #a784bd17;text-decoration:none;transition:transform .15s,box-shadow .15s}
#accountGate .account-trial-link:after{content:"";position:absolute;bottom:-5px;left:16px;width:9px;height:9px;background:#fbf4fe;border-left:1px solid #d9c5e7;border-bottom:1px solid #d9c5e7;transform:rotate(-45deg);border-radius:0 0 0 3px;pointer-events:none}
#accountGate .account-trial-link:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,0 5px 14px #a784bd2a}
#accountGate .account-trial-link:active{transform:translateY(1px)}
#accountGate.is-login #accountGateMessage:empty{display:none}
/* Native sign-in: the four-digit code that must be typed in the browser is shown large under the instruction. */
#accountGate.has-login-code #accountGateMessage{max-width:32em;margin-inline:auto}
#accountGate.has-login-code #accountGateMessage::after{content:attr(data-login-code);display:block;margin-top:10px;font:800 2.3rem/1.2 system-ui,sans-serif;letter-spacing:.18em;color:#5e4579;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}

#accountGate .account-entry-prompt{display:none}
#accountGate.is-login .account-entry-prompt{display:block;width:min(100%,240px);margin:19px auto 4px;line-height:1}
#accountGate .account-entry-prompt img{display:block;width:100%;height:36px;max-width:none;object-fit:contain;image-rendering:pixelated;border-radius:0}

/* Compact, flat provider buttons inspired by the supplied color reference. */
#accountGate .account-gate-actions{width:min(100%,270px);max-width:270px;margin-left:auto;margin-right:auto;gap:11px}
#accountGate .account-gate-actions>.btn{min-height:50px;font-size:14px;box-shadow:none;text-shadow:none;border-radius:12px!important}
#accountGate .account-gate-actions #accountGoogle{display:flex;align-items:center;justify-content:center;gap:11px;background:#f7f7f7;color:#242424;border:1px solid #e8e8e8;box-shadow:none;font-family:system-ui,sans-serif;font-weight:600}
#accountGate #accountGoogle:before{content:"";display:block;flex:none;width:21px;height:21px;background:url('/assets/google-signin-g.svg') center/contain no-repeat}
#accountGate .account-gate-actions #accountNaver{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;background:#4ba424;color:#fff;border:1px solid #4ba424;opacity:1;box-shadow:none;cursor:default;font-family:system-ui,sans-serif;font-weight:600}
#accountGate #accountNaver:before{content:"";display:block;flex:none;width:21px;height:21px;background:url('/assets/naver-signin-n.svg') center/contain no-repeat}
#accountGate #accountNaver small{font-size:9px;line-height:1.3;font-weight:400;white-space:nowrap;padding:3px 4px;border-radius:4px;background:#ffffff26;color:#fff}
#accountGate .account-gate-actions .btn.kakao-login{min-height:50px;box-shadow:none!important}
#accountGate .account-gate-actions #accountKakao{gap:10px;font-family:system-ui,sans-serif;font-weight:600}
#accountGate #accountKakao:before{content:"";display:block;flex:none;width:22px;height:22px;background:url('/assets/kakao-signin-symbol.svg') center/contain no-repeat}

/* Font and mailbox entries each occupy their own full-width row. */
.studio-tools .font-options,:is(#letterList,#hiddenLetterList).letter-list{grid-template-columns:minmax(0,1fr)}
.studio-tools .font-options .font-choice{min-height:0;padding:9px 14px;gap:4px;justify-content:flex-start}
.studio-tools .font-options .font-sample{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);line-height:1.25}
.studio-tools .font-options .personal-font-entry .font-choice{padding-right:43px}
/* The saved paper color is set by mailboxCard and stays visible in every state. */
:is(#letterList,#hiddenLetterList).letter-list{gap:10px;padding:3px 3px 5px}
:is(#letterList,#hiddenLetterList) .saved-card{
  position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;
  --card-pad-y:7px;--ribbon-width:30px;
  align-items:center;gap:8px;width:100%;min-width:0;min-height:74px;padding:var(--card-pad-y) 9px;
  border:1px solid #c8bace;border-color:color-mix(in srgb,currentColor 24%,transparent);
  border-radius:10px;box-shadow:0 2px 0 #4b305914,0 3px 8px #4b30590a;
}
:is(#letterList,#hiddenLetterList) .saved-card::before{
  content:"";position:absolute;inset-block:12px;inset-inline-start:53px;
  border-inline-start:1px dashed currentColor;opacity:.28;pointer-events:none;
}
:is(#letterList,#hiddenLetterList) .saved-card.current{border-color:color-mix(in srgb,currentColor 48%,transparent)}
:is(#letterList,#hiddenLetterList) .saved-card.selected{
  outline:none;border-color:currentColor;box-shadow:inset 0 0 0 1px currentColor,0 2px 0 #4b305914;
}
:is(#letterList,#hiddenLetterList) .saved-card-open{
  position:relative;align-self:stretch;display:grid;grid-template-columns:minmax(0,1fr) var(--ribbon-width);align-content:center;align-items:center;
  gap:3px 10px;width:100%;min-width:0;min-height:54px;padding:3px 0 3px 5px;
  text-align:start;color:inherit;background:transparent;box-shadow:none;
}
:is(#letterList,#hiddenLetterList) .saved-card-open::after{
  content:"";position:absolute;inset-block-start:calc(0px - var(--card-pad-y));inset-inline-end:0;
  width:var(--ribbon-width);aspect-ratio:30 / 61;pointer-events:none;
  background:url('/assets/mailbox-book-ribbon.svg') center top / contain no-repeat;
}
:is(#letterList,#hiddenLetterList) .saved-card-open :is(h3,strong){
  grid-column:1;grid-row:1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;overflow-wrap:anywhere;white-space:normal;margin:0;
  font-size:15px;font-weight:700;line-height:1.45;color:inherit;
}
:is(#letterList,#hiddenLetterList) .saved-card-open small{
  grid-column:1;grid-row:2;margin:0;padding:0;color:inherit;
  font:400 11px/1.4 system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
:is(#letterList,#hiddenLetterList) .letter-select{
  display:grid;place-items:center;align-self:stretch;width:44px;min-height:44px;margin:0;
}
:is(#letterList,#hiddenLetterList) .saved-card input[type=checkbox]{
  appearance:none;display:grid;place-content:center;justify-self:center;
  width:19px;height:19px;margin:0;border:1.5px solid currentColor;border-radius:5px;
  color:inherit;background:transparent;cursor:pointer;
}
:is(#letterList,#hiddenLetterList) .saved-card input:checked{background:#634774;border-color:#634774}
:is(#letterList,#hiddenLetterList) .saved-card input:checked::after{
  content:"";width:9px;height:5px;border:solid white;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg);
}
:is(#letterList,#hiddenLetterList) .saved-card .delete-doc{
  position:static;display:grid;place-items:center;width:44px;min-height:44px;padding:0;
  color:inherit;background:transparent;
}
@media(hover:hover){
  #letterList .saved-card-open:hover h3{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
  #letterList .saved-card .delete-doc:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
}
:is(#letterList,#hiddenLetterList) .saved-card :is(button,input):focus-visible{outline:2px solid currentColor;outline-offset:2px}
@media(max-width:480px){
  :is(#letterList,#hiddenLetterList) .saved-card{--ribbon-width:24px;gap:4px;padding-inline:3px;min-height:70px}
  :is(#letterList,#hiddenLetterList) .saved-card::before{inset-inline-start:46px}
  :is(#letterList,#hiddenLetterList) .saved-card-open{column-gap:6px}
}
@media(forced-colors:active){
  :is(#letterList,#hiddenLetterList) .saved-card input[type=checkbox]{appearance:auto}
  :is(#letterList,#hiddenLetterList) .saved-card input:checked::after{content:none}
}

/* Trial entry matches the soft glass logo and keeps its introduction brief. */
#accountGate:not(.is-login) .account-trial-link{display:none}
html body #trialDialog{border:1px solid #cbbada;border-radius:22px;background:linear-gradient(135deg,#fffdfef7,#f6f2fff5);box-shadow:inset 0 0 0 2px #fff,0 20px 55px #9472b533;overflow:auto}
#trialDialog .trial-window-bar{height:36px;gap:8px;border-bottom:1px solid #d3c5e4;background:var(--title-glass)}
#trialDialog .trial-window-bar i{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#ffb5cf,#ef7da6);box-shadow:inset 0 1px 2px #fff9,0 1px 3px #a789b325}
#trialDialog .trial-window-bar i:nth-child(2){background:linear-gradient(135deg,#ffeeb2,#f5ca70)}
#trialDialog .trial-window-bar i:nth-child(3){background:linear-gradient(135deg,#c6eaff,#83bde9)}
#trialDialog .trial-content{padding:22px 26px 30px;background:none}
#trialDialog .trial-logo{width:180px;max-width:68%;margin:0 auto 12px;border-radius:24px}
#trialDialog h2{font-family:TTHeading,var(--font);font-size:22px;margin:0 0 16px;color:#684b80}
#trialDialog #trialIntro:empty{display:none}
#trialDialog .trial-no-save{display:block;width:180px;max-width:100%;height:32px;object-fit:contain;margin:16px auto 23px}
#trialDialog .trial-actions{width:min(100%,270px);margin:18px auto 0}
html body #trialDialog .trial-button{border:1px solid #c5addd;border-radius:14px;background:linear-gradient(115deg,#f5b8d9,#c7aff0 55%,#acd7f6);color:#59416e;box-shadow:inset 0 2px 0 #ffffffb3,0 4px 12px #a98abd30;font:700 15px/1.6 system-ui,sans-serif;padding:13px 16px}
#trialDialog:has(#trialStart:not([hidden])) #trialPrivacyNote,#trialDialog:has(#trialStart:not([hidden])) .trial-install{display:none}

/* Expiry remains a usable choice dialog; it never opens a store automatically. */
#trialDialog[data-phase="expired"] .trial-logo{width:132px;margin-bottom:14px}
html body #trialDialog .trial-button.secondary{background:linear-gradient(180deg,#fffdfd,#eee8f9);color:#684f80}
#trialDialog [hidden]{display:none!important}

body[data-payment-page="install"] .install-entry{width:min(100%,270px);margin:24px auto 0;justify-content:center}
body[data-payment-page="install"] .install-entry .btn{width:100%;text-align:center}

html body #trialBanner[hidden]{display:none!important}

/* Glass trial button: translucent pastel layers with a glossy top reflection. */
html body #trialDialog #trialStart{position:relative;isolation:isolate;overflow:hidden;border:1px solid #ffffffed;border-radius:17px;background:linear-gradient(180deg,#ffffffb8 0%,#ffffff35 46%,#ffffff12 48%,#ffffff55 100%),linear-gradient(110deg,#f4c7e8a8,#d6c7f2c4 53%,#bfdef5c9);color:#624b7a;box-shadow:inset 0 2px 1px #fff,inset 0 -2px 4px #b8a4da50,0 0 0 1px #c9b7e078,0 5px 15px #ad94c83b;text-shadow:0 1px 1px #ffffffd9;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font:700 15px/1.6 system-ui,sans-serif;padding:13px 16px;transition:transform .15s,box-shadow .15s}
html body #trialDialog #trialStart:before{content:"";position:absolute;z-index:-1;inset:2px 3px 48%;border-radius:14px 14px 24px 24px;background:linear-gradient(180deg,#ffffffab,#ffffff08);pointer-events:none}
html body #trialDialog #trialStart:hover:not(:disabled){box-shadow:inset 0 2px 1px #fff,inset 0 -2px 4px #b8a4da50,0 0 0 1px #c9b7e078,0 7px 20px #ad94c850}
html body #trialDialog #trialStart:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 5px #ac97c83b,0 0 0 1px #c9b7e078}

#uploadBtn[hidden]{display:none!important}

/* The bottom tool dock is the single navigation for decorating on every screen. */
@media(min-width:761px){
 html body{padding-bottom:94px}
 .mobile-tabs{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:30;display:flex;gap:8px;width:390px;padding:9px;border:1px solid #baabd2;border-radius:14px;background:linear-gradient(#f4effff5,#ded7f4fa);box-shadow:inset 0 2px 0 #fff,0 5px 20px #9a7ab025;backdrop-filter:blur(12px)}
 html body .mobile-tabs button{display:flex;align-items:center;justify-content:center;flex:1;min-height:48px;padding:10px;border:1px solid #cdc0df;border-radius:8px!important;background:linear-gradient(#fff,#eee8f7);box-shadow:var(--bevel);color:#806891}
 html body .mobile-tabs button.active{background:linear-gradient(#ffe8f6,#f3c1df);border-color:#d299bd;color:#8d4779}
}

/* Compact two-line font choices: name and description, then the font sample. */
.studio-tools .font-options{gap:7px}
@media (min-width:761px){
  /* The letter sets the grid row height, including when the paper resizes. */
  .workspace:not(.is-focused) > .studio-tools:not(.is-collapsed){
    position:static;
    align-self:stretch;
    contain:size;
    display:flex;
    flex-direction:column;
  }
  .studio-tools > .window-caption,
  .studio-tools .type-section{flex:none}
  .studio-tools > :is(.left-column,.right-column){
    flex:1;
    min-height:0;
    overflow-y:auto;
  }
  .workspace[data-tool="font"] .studio-tools:not(.is-collapsed) :is(.left-column,.left-column > .panel,.font-section){
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
  }
  .studio-tools .font-options{
    flex:1;
    min-height:0;
    max-height:none;
    align-content:start;
    grid-auto-rows:max-content;
  }
  .workspace[data-tool="stickers"] .right-column > .panel{
    height:100%;
    display:flex;
    flex-direction:column;
  }
  .workspace[data-tool="stickers"] .right-column > .panel > *{flex:none}
  .workspace[data-tool="stickers"] #stickerGrid{
    flex:0 1 auto;
    min-height:0;
    max-height:none;
    scrollbar-gutter:auto;
  }
  /* Shorter windows can fit a whole pack by sharing the available height across its rows. */
  .workspace[data-tool="stickers"] #stickerGrid:has(> .sticker-tile){
    grid-auto-rows:minmax(56px,104px);
  }
  .workspace[data-tool="stickers"] .sticker-grid .sticker-tile{height:100%}
}
.studio-tools .font-choice-top{align-items:center;gap:8px;min-width:0}
.studio-tools .font-choice .font-labels{display:flex;align-items:baseline;gap:8px;flex:1;min-width:0}
.studio-tools .font-choice .font-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-tools .font-choice .font-caption{flex:none;font-size:11px!important;white-space:nowrap}
.studio-tools .font-choice .font-check{flex:none}

/* Match the stationery palette with six ink choices on each of two rows. */
#inkColors{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 8px;justify-items:center;padding:4px 0}
html body #inkColors .swatch{width:32px;height:32px;max-width:100%;padding:0}

/* Paper details are arranged three across on phones and desktops. */
.paper-patterns{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}
.pattern-preview.dotted{background-image:radial-gradient(var(--paper-preview-detail,#30343b66) 1px,transparent 1px);background-size:12px 12px}
.pattern-preview.dashed{background-image:linear-gradient(90deg,var(--paper-preview-bg,#fffcf6) 50%,transparent 50%),linear-gradient(var(--paper-preview-detail,#30343b66) 1px,transparent 1px);background-size:8px 100%,100% 13px}
.pattern-preview.framed:before{content:'';position:absolute;inset:8px;border:1px solid var(--paper-preview-detail,#30343b66);border-radius:3px}

/* Pattern previews use the same paper and detail colors as the letter export. */
.paper-patterns .pattern-preview{background-color:var(--paper-preview-bg,#fffcf6)}
.paper-patterns .pattern-preview canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.paper-patterns .pattern-preview.lined{background-image:repeating-linear-gradient(transparent 0 12px,var(--paper-preview-detail,#30343b66) 12px 13px)}
.paper-patterns .pattern-preview.bordered:before{content:'';position:absolute;inset:8px;border:1px solid var(--paper-preview-detail,#30343b66);background-image:repeating-linear-gradient(transparent 0 12px,var(--paper-preview-detail,#30343b66) 12px 13px)}

#accountGate .account-gate-actions #accountNaver:not(:disabled){cursor:pointer}

/* A soft sticker invitation beneath the primary trial action. */
html body #trialDialog .trial-artist-link{display:flex;align-items:center;justify-content:center;min-height:54px;box-sizing:border-box;margin-top:5px;padding:10px 13px;border:1px solid #e5d8ee;border-radius:18px;background:linear-gradient(115deg,#fff7fc,#f6f1fd 58%,#f0f7ff);color:#513559;box-shadow:inset 0 1px 0 #fff,0 3px 10px #aa8bbb14;font:600 13px/1.5 system-ui,sans-serif;text-align:center;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s}
html body #trialDialog .trial-artist-link:hover{border-color:#d2bade;box-shadow:inset 0 1px 0 #fff,0 5px 14px #aa8bbb26;transform:translateY(-1px)}
html body #trialDialog .trial-artist-link:active{transform:translateY(1px)}
html body #trialDialog .trial-artist-link:focus-visible{outline:2px solid #9d7cba;outline-offset:3px}
html body #trialDialog #trialTitle:focus{outline:none}
@media(prefers-reduced-motion:reduce){html body #trialDialog .trial-artist-link{transition:none;transform:none}}
html:is([data-theme="night"],[data-theme-loading="night"]) body #trialDialog .trial-artist-link{background:linear-gradient(115deg,#48384e,#353750);border-color:#756183;color:#f7eafd}

/* Trial-only navigation and export guidance; account editor controls stay available. */
html[data-trial-state] #removeAdsBtn,html[data-trial-state] #downloadBtn,html[data-trial-state] #shareBtn{display:none!important}
html body #trialBackBtn{flex:none;gap:7px;min-height:44px;white-space:nowrap}
html body #trialExportNotice{flex:1;margin:0;padding:18px 20px;border:1px solid #d6c6e2;border-radius:16px;background:linear-gradient(115deg,#fff6fc,#eff4ff);color:#705584;box-shadow:inset 0 1px 0 #fff;font-size:14px;line-height:1.8;text-align:center;word-break:keep-all;overflow-wrap:break-word}
@media(max-width:760px){html body #trialBackBtn{padding:10px 12px;font-size:13px}html body #trialExportNotice{padding:15px 18px;font-size:13px}}

html:not([data-trial-state]) #trialBackBtn,html body #trialBackBtn[hidden],html body #trialExportNotice[hidden]{display:none!important}

/* Close returns to the account entry; an idle trial never exposes an unlocked editor. */
html body #trialDialog .trial-window-bar{min-height:46px;height:auto;padding:3px 10px 3px 15px}
html body #trialDialog .trial-close{display:grid;place-items:center;flex:none;width:38px;height:38px;margin-left:auto;padding:0;border:1px solid #ffffffb8;border-radius:12px;background:linear-gradient(145deg,#fff9fdbd,#efddf3ad);color:#856b98;box-shadow:inset 0 1px 0 #fff9,0 2px 5px #9b7aaf12;cursor:pointer}
#trialDialog .trial-close svg{width:23px;height:23px}
html body #trialDialog .trial-close:hover{background:#fff8fe;color:#624779}
html body #trialDialog .trial-close:focus-visible{outline:2px solid #9d7cba;outline-offset:2px}
html:is([data-theme="night"],[data-theme-loading="night"]) body #trialDialog .trial-close{background:linear-gradient(145deg,#61516d,#493d59);border-color:#8c779d;color:#f1e5ff}

/* Compact mailbox actions keep bulk operations scoped to the visible selection. */
:is(#libraryDialog,#hiddenLibraryDialog) .library-actions{display:flex;flex-wrap:nowrap;gap:8px;align-items:center;margin-bottom:14px}
:is(#libraryDialog,#hiddenLibraryDialog) .library-actions>[data-action="new"]{margin-right:auto;min-width:0;white-space:nowrap}
:is(#libraryDialog,#hiddenLibraryDialog) .library-icon{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;flex:0 0 44px;border-radius:12px}
:is(#libraryDialog,#hiddenLibraryDialog) .library-icon .icon{width:21px;height:21px}
:is(#libraryDialog,#hiddenLibraryDialog) .library-icon[aria-pressed="true"]{background:var(--title-glass);border-color:#b58abd}
:is(#libraryDialog,#hiddenLibraryDialog) .library-visibility{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:44px;
  padding:0 9px;white-space:nowrap;flex:none;font-size:13px;
}
:is(#libraryDialog,#hiddenLibraryDialog) .library-visibility .icon{width:19px;height:19px}
:is(#libraryDialog,#hiddenLibraryDialog) .library-empty[hidden]{display:none}
:is(#libraryDialog,#hiddenLibraryDialog) .library-empty{margin:14px 0 18px;font-size:13px;line-height:1.7}
@media(max-width:410px){
  :is(#libraryDialog,#hiddenLibraryDialog) .library-actions{gap:6px}
  :is(#libraryDialog,#hiddenLibraryDialog) .library-actions>[data-action="new"]{gap:4px;font-size:12px;padding:8px 6px}
}
@media(max-width:365px){
  :is(#libraryDialog,#hiddenLibraryDialog) .dialog-content{padding:14px}
  :is(#libraryDialog,#hiddenLibraryDialog) .library-actions>[data-action="new"] .icon{display:none}
}

/* Compact pixel gem, without a surrounding button surface. */
html body #removeAdsBtn{display:grid;place-items:center;width:56px;height:56px;min-width:56px;min-height:56px;padding:2px;flex:0 0 56px;border:0!important;border-radius:17px!important;background:transparent!important;box-shadow:none!important;transition:transform .16s}
html body #removeAdsBtn .pro-gem-icon{display:block;width:40px;height:40px;max-width:none;image-rendering:pixelated;pointer-events:none}
html body #removeAdsBtn:hover{transform:translateY(-1px)}
html body #removeAdsBtn:active{transform:translateY(1px)}
html body #removeAdsBtn:focus-visible{outline:2px solid #8762aa;outline-offset:3px}
#monetizationDialog .commerce-benefits{color:#66467f}
#monetizationDialog .commerce-message{background:linear-gradient(125deg,#fceafa,#e4efff);border:1px solid #d8c7e8;border-radius:10px;color:#694780}
@media(max-width:760px){html body .header-actions #removeAdsBtn{width:52px;height:52px;min-width:52px;min-height:52px;padding:0;flex-basis:52px;border-radius:16px!important}}
@media(prefers-reduced-motion:reduce){html body #removeAdsBtn{transition:none}}

#libraryDialog .dialog-head{gap:8px;flex-wrap:wrap}
#libraryDialog .dialog-head h2{margin-right:auto}
#libraryDialog .library-hidden-link{
  display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;
  color:inherit;background:var(--glass);border:1px solid var(--line);box-shadow:var(--bevel);
}
#libraryDialog .library-hidden-link .icon{width:25px;height:25px;stroke-width:1.7}
#hiddenLibraryDialog .library-actions{justify-content:space-between}
#hiddenLetterList .saved-card{grid-template-columns:44px minmax(0,1fr);cursor:pointer}

/* The creator's message sits directly below the Pro heading, before the benefits. */
#monetizationDialog .commerce-support-note{margin:12px 0 15px;color:#765d87;font-size:12px;line-height:1.75;word-break:keep-all;overflow-wrap:anywhere}
#monetizationDialog .commerce-support-note p{margin:0}
#monetizationDialog .commerce-support-note p+p{margin-top:4px}
#monetizationDialog .commerce-launch-notify{margin:14px 0 2px;padding-top:14px;border-top:1px solid #d9c9e8;text-align:center}
#monetizationDialog .commerce-launch-notify p{margin:0 0 9px;font-size:12.5px;line-height:1.7;color:#765d87;word-break:keep-all}
#monetizationDialog .commerce-launch-notify[hidden]{display:none}
html:is([data-theme="night"],[data-theme-loading="night"]) #monetizationDialog .commerce-launch-notify{border-top-color:#5b4a6d}
html:is([data-theme="night"],[data-theme-loading="night"]) #monetizationDialog .commerce-launch-notify p{color:#d4c1e2}
html:is([data-theme="night"],[data-theme-loading="night"]) #monetizationDialog .commerce-support-note{color:#d4c1e2}

.restore-notice,.save-recovery{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 14px;margin:10px auto;border:1px solid var(--line);border-radius:10px;background:var(--glass);color:var(--ink)}
.restore-notice[hidden],.save-recovery[hidden]{display:none}
.save-recovery strong,.save-recovery small{flex-basis:100%}
.save-recovery{max-width:900px}
.restore-notice .btn{min-height:36px}
.backup-help{padding:0 18px 16px}
.mobile-action-tip{position:fixed;z-index:10000;max-width:calc(100vw - 16px);padding:6px 12px;border-radius:9px;background:#43364f;color:#fff;font-size:13px;line-height:1.4;pointer-events:none}