/* Shared control shape: keep the pixel artwork and paper unchanged. */
html body button,html body .btn,html body input[type="button"],html body input[type="submit"]{border-radius:12px!important}
html body button.swatch,html body button.text-color{border-radius:50%!important}
html body .pattern-preview{border-radius:8px}

/* App typography; letter content and font samples retain their own fonts. */
@font-face{font-family:TTInterface;src:url('/fonts/gowundodum.woff2') format('woff2');font-weight:400;font-display:swap}
/* Sign-in characters from the same face. Unlisted characters use the full file above. */
@font-face{font-family:TTInterface;src:url('/fonts/gowundodum-entry.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+20-7E,U+A0-FF,U+2019,U+2026,U+3001-3002,U+AC00,U+AC19,U+AC1C,U+ACB0,U+ACC4,U+ACE0,U+ACE8,U+ACFC,U+AD00,U+ADF8,U+AE30,U+B0B4,U+B124,U+B294,U+B2E4,U+B300,U+B3C4,U+B529,U+B77C,U+B7EC,U+B808,U+B85C,U+B978,U+B97C,U+B9AC,U+BA74,U+BABB,U+BC0F,U+BC1B,U+BC29,U+BC31,U+BC84,U+BC95,U+BCF4,U+BD84,U+BD88,U+BE44,U+C11C,U+C138,U+C18C,U+C218,U+C2DC,U+C2E4,U+C4F0,U+C4F8,U+C548,U+C57D,U+C5B4,U+C5B8,U+C5C5-C5C6,U+C5D0,U+C5F0,U+C624,U+C694,U+C6A9,U+C6D0,U+C704,U+C73C,U+C740,U+C744,U+C758,U+C774,U+C778,U+C785,U+C788,U+C791,U+C7A0,U+C815,U+C8FC,U+C900,U+C911,U+C9C0,U+CC98,U+CCB4,U+CE68,U+CE74,U+D130,U+D3B8,U+D3F0,U+D558,U+D568,U+D574,U+D588,U+D5D8,U+D655,U+D68C,U+D6C4,U+D734,U+FF08-FF09,U+FF0C}
@font-face{font-family:TTHeading;src:url('/fonts/jua.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--font:TTInterface,system-ui,sans-serif}
html body{font-family:var(--font);font-size:15px;line-height:1.65}
html body .btn,html body .nav-item,html body .mobile-tabs button{font-family:var(--font);font-size:14px;line-height:1.5;letter-spacing:0;min-height:44px}
html body .titlebar h1,html body .account-gate h1,html body .page-heading,html body .dialog-head h2{font-family:TTHeading,var(--font);font-weight:400;letter-spacing:0;font-size:26px;line-height:1.4}
html body .panel-heading h2,html body .page-main h2{font-family:TTHeading,var(--font);font-size:18px;font-weight:400;letter-spacing:0}
html body .panel-section h3,html body .section-label,html body .font-title{font-size:13px;letter-spacing:0}
html body .account-gate p,html body .page-intro,html body .help-list,html body .dialog-content>p{font-size:14px;line-height:1.9}
html body .account-bar,html body .account-bar strong,html body .account-bar button,html body .account-bar #accountSyncStatus{font-size:12px;line-height:1.6}
html body .footer,html body .footer button,html body .saved,html body .stage-bottom{font-size:12px;line-height:1.7}
html body .chip{font-size:13px;min-height:40px}
@media(max-width:620px){html body .header-actions .btn{font-size:12px;padding:9px 10px}html body .titlebar h1{font-size:24px}html body .mobile-tabs button{font-size:12px;padding:10px 4px}html body .account-gate h1{font-size:25px}html body .titlebar p.subtitle{font-size:13px!important;line-height:1.7}html body .saved{font-size:10px}html body .footer button{font-size:13px}}

.plus-locked::after{content:'🔒';font-size:12px;margin-left:5px}.plus-locked{border-style:dashed!important}
.commerce-benefits{list-style:none;margin:18px 0;padding:15px 18px;background:linear-gradient(125deg,#fff0f8,#ede7ff,#e3f3ff);border:1px solid #d3bfe4;border-radius:12px;line-height:2;color:#66467f;font-size:14px}.commerce-benefits li::before{content:'✓ ';font-weight:700}

/* Official Kakao login resource; preserve its symbol, label and proportions. */
.btn.kakao-login{background:#fee500!important;border-color:#fee500!important;box-shadow:none!important;min-height:52px;padding:3px 12px!important;border-radius:12px!important;display:flex;align-items:center;justify-content:center;}
.btn.kakao-login img{width:224px;height:46px;max-width:100%;object-fit:contain;margin:0;}
.btn.kakao-login[hidden]{display:none!important;}
.btn.kakao-login:focus-visible{outline:3px solid #49678b;outline-offset:3px;}

/* 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}

/* Keep the storefront inside the existing pastel sticker box. */
html body #stickerTabs{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:6px;width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-padding-inline:13px;padding:8px 13px 4px}
html body #stickerTabs::-webkit-scrollbar{display:none}
html body #stickerTabs>.chip{flex:0 0 auto;min-width:54px;max-width:none;padding:8px 11px;min-height:44px;white-space:nowrap}
html body #stickerGrid.is-shop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:4px 12px 10px;max-height:400px;align-items:stretch}
html body .shop-card{display:flex;flex-direction:column;align-items:center;min-width:0;width:100%;padding:10px 8px;border:1px solid #d7c6df;border-radius:17px;background:linear-gradient(155deg,#fffdfd,#f8effc);box-shadow:0 4px 10px #8b659111;text-align:center;color:#634b79;gap:4px;transition:transform .15s}
html body .shop-card:hover{transform:translateY(-2px);border-color:#b784b5}
.shop-card img{display:block;width:100%;max-width:96px;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 4px 4px #9879a222)}
.shop-card strong{font-size:13px;line-height:1.5;overflow-wrap:anywhere}.shop-card span{font-size:11px;color:#88728f}.shop-card b{font-size:15px;margin-top:auto;padding-top:2px;color:#8b4f83}
.shop-card .shop-description{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}
.shop-message{grid-column:1/-1;line-height:1.8;color:#7a6487;font-size:13px;text-align:center;padding:12px}.shop-message p{margin-top:0}
#shopDetail{width:600px;max-width:94vw;max-height:90dvh;overflow:auto}#shopDetail .dialog-head{position:sticky;top:0;z-index:1;backdrop-filter:blur(12px)}#shopDetail .dialog-head h2{font-size:20px!important}#shopDetail .icon-btn{min-width:44px;min-height:44px;font-size:28px}
.shop-detail-body{padding:18px 22px 24px}.shop-detail-body>p{color:#80688e;font-size:13px;line-height:1.8}.shop-preview-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:18px 0 22px}.shop-preview-grid figure{margin:0;min-width:0;text-align:center}.shop-preview-grid img{display:block;width:100%;aspect-ratio:1;object-fit:contain}
.shop-purchase{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #dfd3e7;padding-top:16px}.shop-purchase strong{font-size:22px;color:#69467e}.shop-paid:disabled{opacity:.7!important}.shop-test-add{width:100%;min-height:46px}.shop-feedback:empty{display:none}.shop-test-note{font-size:12px!important}.shop-retention{background:#f3edf9;border-radius:10px;padding:11px 13px}.shop-feedback{color:#99527c!important}
@media(max-width:760px){html body #stickerGrid.is-shop{max-height:380px}.shop-detail-body{padding:14px 15px 20px}.shop-preview-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.shop-card img{max-width:100px}#shopDetail .dialog-head{padding:12px 15px}.shop-purchase{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html body .shop-card{transition:none}}
/* Pack management is separate from the user's individual MY images. */
html body #stickerTabs>.sticker-manager-button{min-width:44px;width:44px;padding:9px;display:inline-flex;align-items:center;justify-content:center}
html body .shop-test-add[hidden]{display:none!important}
#stickerPackManager{width:470px;max-width:94vw;max-height:90dvh;overflow:auto}
#stickerPackManager .dialog-head{position:sticky;top:0;z-index:1;backdrop-filter:blur(12px)}
#stickerPackManager .icon-btn{min-width:44px;min-height:44px;font-size:28px}
.pack-manager-body{padding:8px 18px 18px}.pack-manager-body>p{font-size:12px;line-height:1.7;color:#80688e}
#stickerTabs button[data-category][hidden] { display: none !important; }
.pack-manager-toolbar { display: flex; gap: 6px; margin: 8px 0; justify-content: flex-start; }
.pack-manager-toolbar .btn { min-width: 44px; min-height: 44px; padding: 8px; }
.pack-manager-list { display: grid; }
.pack-manager-entry {
  display: grid; grid-template-columns: minmax(0,1fr) 44px;
  align-items: center; gap: 6px; padding: 4px; min-height: 52px;
  text-align: start; border-bottom: 1px solid #e3d9ea;
}
.pack-manager-choice {
  display: grid; grid-template-columns: 22px 50px minmax(0,1fr) auto;
  align-items: center; gap: 10px; min-height: 44px; cursor: pointer;
}
.pack-manager-remove {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 0; color: inherit;
}
.pack-manager-remove .wl-glyph { width: 20px; height: 20px; }
.pack-manager-remove:hover:not(:disabled), .pack-manager-remove:focus-visible { background: #94829c1a; }
.pack-manager-entry input { width: 20px; height: 20px; margin: 0; accent-color: #87639d; }
.pack-manager-name { overflow-wrap: anywhere; font-size: 14px; line-height: 1.4; }
.pack-manager-category { display: inline-flex; justify-content: flex-start; align-items: center; border-width: 0; color: inherit; }
html body .pack-manager-category.plus-locked::after { width: 12px; height: 12px; margin-left: 2px; }
.pack-manager-choice:has(input:disabled) { cursor: default; }
.pack-visibility-badge { font-size: 11px; padding-inline: 6px; border: 1px solid currentColor; border-radius: 5px; }
.pack-manager-body .pack-selection-status { min-height: 1.5em; margin: 10px 0 0; }
.pack-manager-note{background:#f3edf9;padding:12px;border-radius:10px;margin:14px 0 0}.pack-manager-feedback{color:#99527c!important}.pack-manager-feedback:empty{display:none}
html:is([data-theme="night"],[data-theme-loading="night"]) .pack-manager-category { color: #c1b3d3; }
html:is([data-theme="night"],[data-theme-loading="night"]) .pack-manager-entry { border-color: #514364; color: #eee4fa; }
html:is([data-theme="night"],[data-theme-loading="night"]) .pack-manager-note{background:#211d31}html:is([data-theme="night"],[data-theme-loading="night"]) .pack-manager-body>p{color:#c4b7d1}

.shop-card .shop-sale-period{font-size:10px;line-height:1.4;color:#786787;white-space:nowrap}.shop-sale-status:empty,.shop-card .shop-sale-period:empty{display:none}.shop-card .shop-sale-status{color:#9f6285;font-weight:700}

.sticker-search {
  position:relative;
  margin:4px 12px 8px;
  color:var(--muted);
}
.sticker-search > svg {
  position:absolute;
  inset-inline-start:10px;
  top:50%;
  transform:translateY(-50%);
  width:16px;
  height:16px;
  pointer-events:none;
}
#stickerSearch {
  box-sizing:border-box;
  width:100%;
  min-width:0;
  min-height:38px;
  padding:6px 10px;
  padding-inline:34px 40px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--glass);
  color:var(--ink);
  font:inherit;
  font-size:16px;
  text-align:start;
}
#stickerSearch::placeholder { color:var(--muted);opacity:1; }
#stickerSearch::-webkit-search-cancel-button { appearance:none; }
#clearStickerSearch {
  position:absolute;
  inset-inline-end:0;
  top:0;
  display:grid;
  place-items:center;
  height:100%;
  width:38px;
  padding:0;
  color:var(--ink);
  background:transparent;
  border:0;
  box-shadow:none;
}
#clearStickerSearch[hidden] { display:none; }
#clearStickerSearch svg { width:16px;height:16px; }

.shop-top{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:stretch;padding-block-end:8px;border-block-end:1px solid var(--line)}
.shop-top h3,.shop-top p{grid-column:1/-1;margin:0;text-align:start;color:var(--ink)}
.shop-top h3{font-size:14px}.shop-top p{font-size:12px;color:var(--muted)}
.shop-top .shop-card{position:relative}
.shop-top .shop-card .shop-rank{position:absolute;inset-block-start:4px;inset-inline-start:4px;padding:1px 5px;border-radius:6px;background:var(--sky-selected,#ebdff6);color:var(--ink);font-size:12px;font-weight:700}
@media(max-width:480px){html body #stickerGrid.is-shop,.shop-top{gap:6px}html body .shop-card{padding-inline:4px}}

/* 상점 하단 배너 광고 자리. 광고가 없거나 Pro 구독자면 JS가 hidden 처리합니다. */
.shop-ad-slot{display:flex;justify-content:center;align-items:center;margin:18px 0 26px;min-height:0}
.shop-ad-slot[hidden]{display:none}
.shop-ad-slot ins{max-width:100%}

.weletter-policy-links{display:flex;justify-content:center;align-items:center;gap:4px 16px;flex-wrap:wrap;margin-top:22px;font-size:12px}.weletter-policy-links a{display:inline-flex;align-items:center;min-height:44px;color:#735782;text-underline-offset:3px}.weletter-policy-links a:focus-visible{outline:2px solid #795295;outline-offset:3px}
/* The free workspace keeps its original illustration. Pro skies share one pixel landscape. */
html body .footer #themeToggle {
  position: fixed;
  z-index: 31;
  left: max(16px, calc((100vw - 1208px) / 2));
  bottom: 22px;
  width: 64px;
  height: 50px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0 !important;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: transform .15s;
}
#themeToggle .sky-theme-icon {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 128 / 100;
  max-height: 100%;
  background: url('/assets/theme/sky-row01.webp') 0% 50% / 400% 100% no-repeat;
  image-rendering: pixelated;
}
#themeToggle .sky-theme-icon > svg { display: none; }
html[data-sky] #themeToggle .sky-theme-icon { background: none; }
html[data-sky] #themeToggle .sky-theme-icon > svg { display: block; width: 100%; height: 100%; }
#themeToggle :is(.sky-sun, .sky-moon) {
  transform: translate(calc(var(--orb-x) * 1px), calc(var(--orb-y) * 1px));
}
html[data-sky-orb="sun"] #themeToggle .sky-moon,
html[data-sky-orb="moon"] #themeToggle .sky-sun { display: none; }
#themeToggle .sky-clouds { opacity: var(--clouds, 0); }
#themeToggle .sky-stars { opacity: var(--stars, 0); }
@media (prefers-reduced-motion: no-preference) {
  #themeToggle[data-sky-motion="glide"] :is(.sky-sun, .sky-moon) { transition: transform .38s ease-in-out; }
  #themeToggle[data-sky-motion="rise"] :is(.sky-sun, .sky-moon) { animation: sky-rise .32s ease-out; }
  #themeToggle[data-sky-motion] :is(.sky-stars, .sky-clouds) { transition: opacity .28s ease; }
  @keyframes sky-rise { from { translate: 0 4px; } to { translate: 0 0; } }
}
html body .footer #themeToggle.plus-locked::after {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: 6px;
  background: #fcf6ff url('/assets/ui-lock.svg') center / 18px 18px no-repeat;
  -webkit-mask: none;
  mask: none;
  box-shadow: 0 1px 2px #49345f45;
  pointer-events: none;
}
html body .footer #themeToggle:active { transform: scale(.94); }
@media (max-width: 760px) {
  html body .footer #themeToggle {
    left: max(5px, env(safe-area-inset-left));
    bottom: max(10px, env(safe-area-inset-bottom));
    width: clamp(44px, 12vw, 56px);
    height: 48px;
  }
  /* Reserve space at the physical left, including in the Arabic layout. */
  html body .mobile-tabs {
    padding-left: calc(max(5px, env(safe-area-inset-left)) + clamp(44px, 12vw, 56px) + 5px);
  }
}

html:is([data-theme="night"],[data-theme-loading="night"]) {
  color-scheme:dark;
  --bg:#191a32;--ink:#eee6fc;--muted:#bfb1d2;--line:#564c70;
  --green:#c3a4e7;--orange:#efacd1;--pixel-edge:#76688e;--pixel-shadow:#101023;
  --glass:linear-gradient(135deg,#2d2846f7,#20253eee);
  --bevel:inset 1px 1px 0 #e1d3ff26,inset -1px -1px 0 #12132a80,0 3px 8px #080b202b;
  --title-glass:linear-gradient(110deg,#654675,#464676 50%,#306177);
  --night-sky:radial-gradient(ellipse at 8% 8%,#69418499,transparent 43%),radial-gradient(ellipse at 96% 30%,#275e7e88,transparent 44%),radial-gradient(ellipse at 34% 84%,#55347799,transparent 45%),linear-gradient(145deg,#1d1b38,#121d33);
  --night-control:linear-gradient(145deg,#514565,#343553);
  --night-selected:linear-gradient(130deg,#754e80,#505b8d);
  --night-accent:linear-gradient(115deg,#e2abd1,#afa3e4 55%,#93cbe2);
}
html:is([data-theme="night"],[data-theme-loading="night"]) body { color:var(--ink);background-color:var(--bg);background-image:var(--night-sky); }
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(button,a,input,textarea,select):focus-visible { outline-color:#d1b5ff; }
html:is([data-theme="night"],[data-theme-loading="night"]) body .brand-wordmark { color:#eddbff;text-shadow:0 2px 0 #3a2c56,0 0 22px #ba9ce84a; }
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(.brand-tagline,.titlebar p.subtitle,.account-gate p,.tiny,.color-name,.font-scroll-hint,.font-current,.range-line,.stage-bottom,.sticker-browse-info,.selection-empty,.font-choice .font-caption,.my-sticker-actions>span,.zoom-label,.saved-card small,.help-list,.dialog-content p) { color:var(--muted); }
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(.titlebar h1,.section-label,.ink-section-label,.font-sample,.dialog-head h2,.account-gate h1,.selection-panel h3,.account-bar strong,.account-login-titlebar strong) { color:var(--ink); }
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(.eyebrow,.pattern,.pattern.active,.ink-contrast-hint) { color:#d2b5e5; }
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(.btn:where(:not(.kakao-login):not(.account-apple):not(#accountGoogle):not(#accountNaver):not(#removeAdsBtn)),.nav-item,.make-handwriting-btn,.window-control,.studio-tabs button,.mobile-tabs button,.selection-actions button) {
  background:var(--night-control);border-color:#837195;color:var(--ink);box-shadow:var(--bevel);text-shadow:none;
}
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(.btn.primary,.editor-save #shareBtn) { background:var(--night-accent);color:#292442;border-color:#c6b1e8;box-shadow:var(--bevel);text-shadow:none; }
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(.nav-item.active,.studio-tabs button.active,.mobile-tabs button.active) { background:var(--night-selected);color:#ffddf5;border-color:#b795cc; }
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(.window-control.close-tools,.dialog-head .icon-btn,.personal-font-remove) { background:linear-gradient(#795b7e,#533c62);color:#ffe4f6;border-color:#a47b9f; }
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(.window-control:hover,.icon-btn:hover) { background:#63537c!important;color:#fff; }
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(.top-nav .icon,.studio-tabs .icon,.mobile-tabs .icon,.window-app-icon,.window-control .icon,.editor-save .icon,.upload-area .icon) { color:inherit; }
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(.editor,.studio-tools,dialog,.account-gate) {
  background:var(--glass);color:var(--ink);border-color:#837495;
  box-shadow:inset 0 0 0 2px #d7c8f51f,0 0 0 1px #302744,4px 5px 0 #0d102933,0 14px 38px #07091f3b;
}
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(.window-caption,.dialog-head,.account-login-titlebar,.app-cover-bar) { background:var(--title-glass);border-color:#847298;color:var(--ink);box-shadow:inset 0 1px 0 #f6e7ff36; }
html:is([data-theme="night"],[data-theme-loading="night"]) body .editor .window-caption .editor-prompt { color:#f4deff; }
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(.account-bar,.saved,.editor-toolbar,.window-menu,.studio-tabs,.selection-panel,.editor-save,.app-cover-content) { background:var(--night-panel,#29283f);border-color:var(--line);color:var(--muted);box-shadow:none; }
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(.account-bar a,.account-bar button,.account-gate a,.window-menu .window-menu-note,.selection-panel .range-label) { color:#cbb7e6; }
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(.title-input,.personal-font-notice,.upload-area,.saved-card,.manual-save-feedback,.shortcut) { background:var(--night-field,#39324e);border-color:#70617f;color:var(--ink);box-shadow:var(--bevel); }
html:is([data-theme="night"],[data-theme-loading="night"]) body .title-input::placeholder { color:#c5b7d8; }
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(.icon-btn,.clear-stickers-btn) { color:#d9bfdf; }
html:is([data-theme="night"],[data-theme-loading="night"]) body .divider { background:#6d5d83; }
html:is([data-theme="night"],[data-theme-loading="night"]) body .stage { background-color:#232339;background-image:radial-gradient(#ab8ec72e .8px,transparent .8px); }
html:is([data-theme="night"],[data-theme-loading="night"]) body .sheet { box-shadow:0 0 0 1px #e4d7ed33,0 7px 22px #07071e59; }
html:is([data-theme="night"],[data-theme-loading="night"]) body .editor-foot { background:linear-gradient(#302c48,#292a42);border-color:#736281;color:var(--muted);box-shadow:var(--bevel); }
html:is([data-theme="night"],[data-theme-loading="night"]) body .studio-tools .panel-section { border-color:var(--line); }
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(.font-choice,.sticker-tile,.shop-card) { background:linear-gradient(135deg,#403550,#2e304b);border-color:#6a587f;color:var(--ink);box-shadow:var(--bevel); }
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(.font-choice.active,.sticker-tile.is-chosen,.saved-card.current,.saved-card.selected) { background:var(--night-selected);border-color:#c796cf;color:#ffe3f6;box-shadow:inset 0 0 0 1px #d0abe44d; }
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(.sticker-tile:hover,.shop-card:hover) { background:#4d3c61;border-color:#b494c5; }
html:is([data-theme="night"],[data-theme-loading="night"]) body .font-check { color:#ebb0da; }
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(.font-options,.sticker-grid) { scrollbar-color:#8b70a9 #28253f; }
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(.font-options,.sticker-grid)::-webkit-scrollbar-thumb { background:#8b70a9;border-color:#28253f; }
html:is([data-theme="night"],[data-theme-loading="night"]) body #stickerTabs .chip { color:#c1b3d3; }
html:is([data-theme="night"],[data-theme-loading="night"]) body #stickerTabs .chip.active { color:#f6bfe6;text-shadow:0 0 15px #eb9ed16b; }
html:is([data-theme="night"],[data-theme-loading="night"]) body .sticker-choice-check { background:#42354f;border-color:#b69ac8; }
html:is([data-theme="night"],[data-theme-loading="night"]) body .sticker-tile.is-chosen .sticker-choice-check { background:#a56f9f; }
html:is([data-theme="night"],[data-theme-loading="night"]) body #deleteMyStickers { background:#5b3a56;color:#f7c1d9;border-color:#ad7897; }
html:is([data-theme="night"],[data-theme-loading="night"]) body .sticker-controls .sticker-handle { background:#443954;color:#eee1fc;border-color:#b09ac9; }
html:is([data-theme="night"],[data-theme-loading="night"]) body .sticker-controls .sticker-handle-delete { background:#623b56;color:#ffc4de;border-color:#b47d9a; }
html:is([data-theme="night"],[data-theme-loading="night"]) body .footer { background:linear-gradient(110deg,#443456cc,#283f5bcc);border-color:#877299;box-shadow:var(--bevel); }
html:is([data-theme="night"],[data-theme-loading="night"]) body .footer-links :is(a,button) { color:#d1bedf; }
html:is([data-theme="night"],[data-theme-loading="night"]) body .closing-signature { color:var(--sky-signature,#d2b9e6);text-shadow:0 0 18px #be97e433; }
html:is([data-theme="night"],[data-theme-loading="night"]) body .mobile-tabs { background:linear-gradient(#383149f5,#252b47fa);border-color:#8a739f;box-shadow:inset 0 1px 0 #e5ceff30,0 -3px 20px #090e2b4d; }
html:is([data-theme="night"],[data-theme-loading="night"]) body dialog::backdrop { background:#080d29a8; }
html:is([data-theme="night"],[data-theme-loading="night"]) body .shop-feedback { color:#f1b6d5!important; }
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(.shop-card span,.shop-message,.shop-detail-body>p,.shop-preview-grid figcaption,.shop-purchase small) { color:var(--muted); }
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(.shop-card b,.shop-purchase strong) { color:#f2bfe6; }
html:is([data-theme="night"],[data-theme-loading="night"]) body .shop-purchase { border-color:var(--line); }
html:is([data-theme="night"],[data-theme-loading="night"]) body .shop-retention { background:#3c3351; }
html:is([data-theme="night"],[data-theme-loading="night"]) body .weletter-policy-links a { color:#cdb7e5; }
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(.app-cover-tagline,.app-cover-note) { color:var(--muted); }
html:is([data-theme="night"],[data-theme-loading="night"]) body #accountGate.is-loading { background:transparent;border:0;box-shadow:none; }
html:is([data-theme="night"],[data-theme-loading="night"]) body #accountGate .account-trial-link { background:linear-gradient(135deg,#514060,#383b61);color:#e7d4fa;border-color:#8b6ca5;box-shadow:var(--bevel); }
html:is([data-theme="night"],[data-theme-loading="night"]) body #accountGate .account-trial-link::after { background:#493d5c;border-color:#8b6ca5; }
html:is([data-theme="night"],[data-theme-loading="night"]) body .account-loader-gauge { background:#302942;border-color:#827094;box-shadow:var(--bevel); }
/* Only decorative UI lettering is brightened; artwork and letter images keep their colors. */
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(.account-entry-prompt img,.account-loader-text img,.trial-no-save) { filter:brightness(1.8); }
html:is([data-theme="night"],[data-theme-loading="night"]) body #trialDialog { background:var(--glass);color:var(--ink);border-color:#837495;box-shadow:inset 0 0 0 2px #d7c8f51f,0 18px 55px #080c2959; }
html:is([data-theme="night"],[data-theme-loading="night"]) body #trialDialog :is(h2,.trial-content p) { color:var(--ink); }
html:is([data-theme="night"],[data-theme-loading="night"]) body #trialDialog :is(.trial-window-bar,.trial-button) { border-color:#967aa8; }
html:is([data-theme="night"],[data-theme-loading="night"]) body #trialDialog #trialStart { background:var(--night-accent);color:#302647;border-color:#c7b1df;box-shadow:var(--bevel);text-shadow:none; }
html:is([data-theme="night"],[data-theme-loading="night"]) body #trialBanner { background:linear-gradient(100deg,#493459,#2f4664);color:#e4d6f2;border-color:#876999; }
html:is([data-theme="night"],[data-theme-loading="night"]) body #trialBanner[data-urgent="true"] { background:#643a55;color:#ffe0ec; }
html:is([data-theme="night"],[data-theme-loading="night"]) body #trialDialog::backdrop { background:#10112bd9; }
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(#handwritingDialog,#monetizationDialog) { background:var(--glass);color:var(--ink);border-color:#837495;box-shadow:inset 0 0 0 2px #d7c8f51f,0 18px 55px #080c2959; }
html:is([data-theme="night"],[data-theme-loading="night"]) body #handwritingDialog .hw-head { background:var(--title-glass);border-color:#837495;box-shadow:var(--bevel); }
html:is([data-theme="night"],[data-theme-loading="night"]) body #handwritingDialog :is(.hw-head h2,.hw-section h3,.hw-editor-top h4,.hw-result h3,.hw-intro strong) { color:var(--ink); }
html:is([data-theme="night"],[data-theme-loading="night"]) body #handwritingDialog :is(.hw-head small,.hw-section p,.hw-footnote,.hw-label,.hw-check,.hw-count,.hw-role-group h4,.hw-component small,.hw-status,.hw-progress-label,.hw-legacy summary,.hw-legacy-list figcaption) { color:#c0b3d2; }
html:is([data-theme="night"],[data-theme-loading="night"]) body #handwritingDialog :is(.hw-caption,.hw-result-meta) { color:#c0b3d2!important; }
html:is([data-theme="night"],[data-theme-loading="night"]) body #handwritingDialog :is(.hw-btn,.hw-close,.hw-step) { background:var(--night-control);border-color:#8b709e;color:var(--ink);box-shadow:var(--bevel); }
html:is([data-theme="night"],[data-theme-loading="night"]) body #handwritingDialog .hw-primary { background:var(--night-accent);color:#302647; }
html:is([data-theme="night"],[data-theme-loading="night"]) body #handwritingDialog :is(.hw-btn[aria-pressed="true"],.hw-corners button.active) { background:var(--night-selected);border-color:#c69bd7;box-shadow:inset 0 0 0 1px #c69bd7; }
html:is([data-theme="night"],[data-theme-loading="night"]) body #handwritingDialog :is(.hw-intro,.hw-editor,.hw-build,.hw-alignment-wrap,.hw-storage,.hw-result,.hw-legacy,.hw-component,.hw-no-missing) { background:#35314c;border-color:#766384;color:var(--ink);box-shadow:none; }
html:is([data-theme="night"],[data-theme-loading="night"]) body #handwritingDialog :is(.hw-name,.hw-preview) { background:#29273e;color:var(--ink);border-color:#89759a; }
html:is([data-theme="night"],[data-theme-loading="night"]) body #handwritingDialog .hw-component-empty { background:#25283e;color:#bbaed3; }
html:is([data-theme="night"],[data-theme-loading="night"]) body #handwritingDialog .hw-component.hw-ready { background:#2d4346;border-color:#75a599; }
html:is([data-theme="night"],[data-theme-loading="night"]) body #handwritingDialog .hw-component.hw-attention { background:#50364b;border-color:#ad7e9c; }
html:is([data-theme="night"],[data-theme-loading="night"]) body #handwritingDialog :is(.hw-note,.hw-corner-hint,.hw-error) { color:#f1bfd6!important; }
html:is([data-theme="night"],[data-theme-loading="night"]) body #handwritingDialog .hw-note { background:#4e3c51; }
html:is([data-theme="night"],[data-theme-loading="night"]) body #handwritingDialog .hw-alignment-stage { background:#25253c;border-color:#6b5b7c; }
html:is([data-theme="night"],[data-theme-loading="night"]) body #handwritingDialog .hw-section { border-color:var(--line); }
html:is([data-theme="night"],[data-theme-loading="night"]) body #monetizationDialog :is(.commerce-head h2,.commerce-price) { color:#eedbff; }
html:is([data-theme="night"],[data-theme-loading="night"]) body #monetizationDialog :is(.commerce-price,.commerce-benefits,.commerce-message) { background:linear-gradient(125deg,#563b59,#403a60,#2f4e63);border-color:#9379ae;color:#f1dffc; }
html:is([data-theme="night"],[data-theme-loading="night"]) body #monetizationDialog :is(.commerce-status,.commerce-price small,.commerce-terms,.commerce-links a,.commerce-secondary button) { color:#cdbbd9; }
html:is([data-theme="night"],[data-theme-loading="night"]) body #monetizationDialog .commerce-close { background:var(--night-control);color:var(--ink);border-color:#92759f; }
@media(prefers-reduced-motion:reduce) { html body #themeToggle { transition:none; } }

/* The light palettes change the workspace chrome; paper, ink and artwork belong to the letter. */
html:is([data-theme="morning"], [data-theme-loading="morning"]) {
  --bg: #e2f1fa;
  --ink: #263953;
  --muted: #52677c;
  --line: #cfdfeb;
  --sky-edge: #b5cbdc;
  --sky-surface: #f3f9fd;
  --sky-selected: #d9edf9;
  --sky-dot: #acc8dc66;
  --sky-middle: #bfdfee;
  --sky-horizon: #86b9d9;
  --title-glass: linear-gradient(110deg, #f3fbff, #e5f2fb 52%, #d9edf9);
}
html:is([data-theme="afternoon"], [data-theme-loading="afternoon"]) {
  --bg: #faebbf;
  --ink: #433123;
  --muted: #725e50;
  --line: #e8d8c5;
  --sky-edge: #d8bea4;
  --sky-surface: #fdf8f1;
  --sky-selected: #f9e4c9;
  --sky-dot: #ceab8266;
  --sky-middle: #f3c883;
  --sky-horizon: #e39455;
  --title-glass: linear-gradient(110deg, #fff7e4, #fbedda 52%, #f7e1ca);
}

html:is([data-theme="morning"], [data-theme="afternoon"], [data-theme-loading="morning"], [data-theme-loading="afternoon"]) {
  color-scheme: light;
  --sky-field: linear-gradient(to bottom, var(--bg), var(--sky-middle) 52%, var(--sky-horizon));
  --glass: linear-gradient(135deg, #fffffff5, var(--sky-surface));
  --bevel: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--line), 0 2px 4px #4540570d;
}
html:is([data-theme="morning"], [data-theme="afternoon"], [data-theme-loading="morning"], [data-theme-loading="afternoon"]) body {
  background-color: var(--sky-horizon);
  background-image: var(--sky-field);
  background-size: 100% 100dvh;
  background-repeat: no-repeat;
  color: var(--ink);
}
html:is([data-theme="morning"], [data-theme="afternoon"], [data-theme-loading="morning"], [data-theme-loading="afternoon"]) body::before { opacity: .23; }
html:is([data-theme="morning"], [data-theme="afternoon"], [data-theme-loading="morning"], [data-theme-loading="afternoon"]) body :is(.editor, .studio-tools, dialog, .account-gate:not(.is-loading)) {
  background: var(--glass);
  border-color: var(--sky-edge);
  box-shadow: inset 0 0 0 2px #ffffffd9, 0 0 0 1px var(--line), 0 8px 24px #453f5012;
}
html:is([data-theme="morning"], [data-theme="afternoon"], [data-theme-loading="morning"], [data-theme-loading="afternoon"]) body :is(.window-caption, .dialog-head, .editor-foot) {
  background: var(--title-glass); color: var(--ink); border-color: var(--sky-edge);
}
html:is([data-theme="morning"], [data-theme="afternoon"], [data-theme-loading="morning"], [data-theme-loading="afternoon"]) body :is(.footer, .mobile-tabs) {
  background: linear-gradient(to bottom, var(--sky-middle), var(--sky-horizon));
  color: var(--ink); border-color: var(--sky-edge);
}
html:is([data-theme="morning"], [data-theme="afternoon"], [data-theme-loading="morning"], [data-theme-loading="afternoon"]) body :is(.editor-toolbar, .window-menu, .studio-tabs, .selection-panel, .editor-save, .footer-settings .footer-links) {
  background: var(--sky-surface); color: var(--muted); border-color: var(--line);
}
html:is([data-theme="morning"], [data-theme="afternoon"], [data-theme-loading="morning"], [data-theme-loading="afternoon"]) body .stage {
  background-color: var(--sky-surface);
  background-image: radial-gradient(var(--sky-dot) .8px, transparent .8px), linear-gradient(to bottom, var(--sky-surface), var(--sky-middle));
  background-size: 12px 12px, 100% 100%;
}
html:is([data-theme="morning"], [data-theme="afternoon"], [data-theme-loading="morning"], [data-theme-loading="afternoon"]) body :is(.stage-bottom, .closing-signature) {
  color: var(--ink);
}
html:is([data-theme="morning"], [data-theme="afternoon"], [data-theme-loading="morning"], [data-theme-loading="afternoon"]) body :is(.title-input, .window-control, .mobile-tabs button, .footer-settings > summary, .font-choice, .sticker-tile, .shop-card) {
  color: var(--ink); border-color: var(--sky-edge);
  background: var(--glass); box-shadow: var(--bevel);
}
html:is([data-theme="morning"], [data-theme="afternoon"], [data-theme-loading="morning"], [data-theme-loading="afternoon"]) body :is(.mobile-tabs button.active, .studio-tabs button.active, .font-choice.active, .chip[aria-pressed="true"]) {
  background: var(--sky-selected); color: var(--ink); border-color: var(--sky-edge);
}
html:is([data-theme="morning"], [data-theme="afternoon"], [data-theme-loading="morning"], [data-theme-loading="afternoon"]) body :is(.brand-wordmark, .editor .window-caption .editor-prompt, .dialog-head h2, .section-label) { color: var(--ink); }
html:is([data-theme="morning"], [data-theme="afternoon"], [data-theme-loading="morning"], [data-theme-loading="afternoon"]) body :is(.wl-language-menu, .wl-language-heading) { background: var(--sky-surface); }
html:is([data-theme="morning"], [data-theme="afternoon"], [data-theme-loading="morning"], [data-theme-loading="afternoon"]) body .wl-language-option:is(:hover, [aria-pressed="true"]) { background: var(--sky-selected); }

/* The top colour comes from the first-paint palette in the page head.
   Celestial positions use the same 64 × 48 coordinate system in every language. */
html[data-sky="predawn"] {
  --orb-x: 47; --orb-y: 27; --orb-opacity: .76;
  --scene-position: right top; --scene-veil: 40%;
  --sky-middle: #394664; --sky-horizon: #716682; --sky-signature: #f4edf9;
  --clouds: .48; --stars: .52; --ridge: #8292b5; --water: #8e9cbb; --glint: #c6cadc;
}
html[data-sky="earlyMorning"] {
  --orb-x: 16; --orb-y: 30; --orb-opacity: .85; --orb-cover: 24%;
  --scene-position: 21% 19px; --scene-veil: 14%;
  --sky-middle: #f1e1d9; --sky-horizon: #efc6a5;
  --clouds: .76; --orb-light: #ffe2af; --orb-edge: #ac877d;
  --ridge: #a28c98; --water: #b29aa5; --glint: #fff1ce;
}
html[data-sky="morning"] {
  --orb-x: 24; --orb-y: 17; --orb-opacity: .80;
  --scene-position: 40% 8px; --scene-veil: 9%;
  --sky-middle: #a9d9f0; --sky-horizon: #83b8d6;
  --clouds: .52; --ridge: #729ab6; --water: #7ba3bc; --glint: #fff0bc;
}
html[data-sky="noon"] {
  --orb-x: 32; --orb-y: 9; --orb-opacity: .92;
  --scene-position: 53% 0px; --scene-veil: 5%;
  --sky-middle: #d8eaf0; --sky-horizon: #f6e9bb;
  --clouds: .23; --orb-light: #fff4bd; --orb-edge: #ad955c;
  --ridge: #92a1a1; --water: #9fafab; --glint: #fff8d5;
}
html[data-sky="blueAfternoon"] {
  --orb-x: 47; --orb-y: 25; --orb-opacity: .82;
  --scene-position: 77% 14px; --scene-veil: 16%;
  --sky-middle: #c5cfd5; --sky-horizon: #e7c19b;
  --clouds: .57; --orb-light: #f8d5a2;
  --ridge: #8696a6; --water: #98a7b1; --glint: #ffe5b7;
}
html[data-sky="evening"] {
  --orb-x: 15; --orb-y: 27; --orb-opacity: .85;
  --scene-position: right top; --scene-veil: 18%;
  --sky-middle: #e0b0af; --sky-horizon: #e9a17e;
  --clouds: .8; --cloud-light: #f4d7c8; --stars: .3;
  --ridge: #a17488; --water: #af8193; --glint: #ffe0c5;
}
html[data-sky="night"] {
  --orb-x: 32; --orb-y: 11; --orb-opacity: .96;
  --scene-position: center top; --scene-veil: 8%;
  --sky-middle: #111626; --sky-horizon: #070910;
  --stars: 1; --ridge: #616981; --water: #79849a; --glint: #d6d6df;
}
html[data-sky] { --bg: var(--sky-top); }
html[data-sky]:is([data-theme="morning"], [data-theme-loading="morning"], [data-theme="afternoon"], [data-theme-loading="afternoon"]) {
  --sky-surface: color-mix(in srgb, white 88%, var(--sky-middle));
  --sky-edge: color-mix(in srgb, var(--sky-middle) 80%, var(--ink));
  --sky-selected: color-mix(in srgb, white 45%, var(--sky-middle));
  --title-glass: linear-gradient(110deg, var(--sky-surface), var(--sky-selected));
}
html[data-sky]:is([data-theme="night"], [data-theme-loading="night"]) {
  --night-sky: linear-gradient(to bottom, var(--sky-top), var(--sky-middle) 52%, var(--sky-horizon));
  --glass: linear-gradient(150deg, color-mix(in srgb, var(--sky-middle) 85%, #cbd1e5), color-mix(in srgb, var(--sky-horizon) 93%, #cbd1e5));
  --title-glass: linear-gradient(110deg, color-mix(in srgb, var(--sky-middle) 75%, #abb1ca), color-mix(in srgb, var(--sky-horizon) 84%, #abb1ca));
  --night-control: var(--title-glass);
  --night-panel: color-mix(in srgb, var(--sky-middle) 88%, #cad1de);
  --night-field: color-mix(in srgb, var(--sky-middle) 79%, #cad1de);
}
html[data-sky]:is([data-theme="night"], [data-theme-loading="night"]) body :is(.footer, .mobile-tabs, .editor-foot) {
  background: var(--title-glass);
}
html[data-sky]:is([data-theme="night"], [data-theme-loading="night"]) body .stage {
  background-color: color-mix(in srgb, var(--sky-horizon) 92%, #cad1de);
}
/* Paint details on the workspace canvas under all controls. Only the specks tile;
   the horizon artwork stays in one place, including on wide screens. */
html[data-sky] {
  --sky-scene: url('/assets/theme/daylight-clouds.svg');
  --scene-width: clamp(190px, 37vw, 350px);
}
html:is([data-sky="predawn"], [data-sky="evening"]) {
  --sky-scene: url('/assets/theme/crossing-clouds.svg?v=2');
  --scene-width: min(100vw, clamp(330px, 57vw, 760px));
}
html[data-sky="night"] { --sky-scene: none; }
html[data-sky-orb="sun"] { --orb-art: url('/assets/theme/sun-disc.svg'); }
html[data-sky-orb="moon"] { --orb-art: url('/assets/theme/twilight-crescent.svg'); }
html[data-sky="night"][data-sky-orb="moon"] { --orb-art: url('/assets/theme/night-crescent.svg?v=4'); }
html[data-sky] body {
  isolation: isolate;
  background-color: var(--sky-horizon);
  background-image:
    linear-gradient(to bottom, color-mix(in srgb, var(--sky-top) var(--scene-veil), transparent), transparent 45%),
    var(--sky-scene),
    url('/assets/theme/sky-specks.svg'),
    linear-gradient(to bottom, var(--sky-top), var(--sky-middle) 52%, var(--sky-horizon));
  background-size: 100% 100dvh, var(--scene-width) auto, 306px 217px, 100% 100dvh;
  background-position: center top, var(--scene-position), left top, center top;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
}
/* The header has one decorative body. Only its position and clipping animate;
   swapping the artwork instantly prevents a sun/moon crossfade. */
html[data-sky] body::before {
  content: '';
  position: fixed;
  inset: 0 auto auto 0;
  width: clamp(38px, 4vw, 56px);
  aspect-ratio: 1;
  pointer-events: none;
  z-index: -1;
  background: var(--orb-art) center / contain no-repeat;
  opacity: var(--orb-opacity);
  transform: translate(calc(var(--orb-x) * 1.5625vw - 50%), calc(var(--orb-y) * 2px - 18px));
  clip-path: inset(0 0 var(--orb-cover, 0%) 0);
}
@media (prefers-reduced-motion: no-preference) {
  html[data-sky] body:has(#themeToggle[data-sky-motion="glide"])::before {
    transition: transform .38s ease-in-out, clip-path .38s ease-in-out;
  }
  html[data-sky] body:has(#themeToggle[data-sky-motion="rise"])::before { animation: sky-rise .32s ease-out; }
}

/* 위레터 안내 팝업. 겨울 가입 안내와 작가 모집이 같은 창 모양을 쓴다. */
.wl-promo {
  box-sizing: border-box;
  width: min(380px, calc(100vw - 32px));
  padding: 0;
  overflow: hidden;
  border: 1px solid #b8a7cf;
  border-radius: 12px;
  background: #fffdf8;
  color: #5c4a72;
  box-shadow: inset 0 0 0 2px #fff, 0 18px 55px #78618e35;
}
.wl-promo::backdrop { background: #e9e1f5d6; }

.wl-promo .promo-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid #d3c5e4;
  background: linear-gradient(110deg, #e6f0fb, #dfe6f8);
}
.wl-promo .promo-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;
}
.wl-promo .promo-bar i:nth-child(2) { background: linear-gradient(135deg, #ffeeb2, #f5ca70); }
.wl-promo .promo-bar i:nth-child(3) { background: linear-gradient(135deg, #c6eaff, #83bde9); }
.wl-promo .promo-close {
  margin-left: auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 7px;
  background: none; color: #7c6a94; cursor: pointer;
}
.wl-promo .promo-close:hover { background: #ffffff8c; }
.wl-promo .promo-close svg { width: 17px; height: 17px; }

/* --- 겨울: 눈 내리는 머리말 --- */
.wl-promo .promo-sky {
  position: relative;
  height: 96px;
  overflow: hidden;
  background: linear-gradient(to bottom, #cfe3f6, #e8eefb 70%, #fffdf8);
}
.wl-promo .promo-sky i {
  position: absolute;
  left: -20%; top: -110%;
  width: 140%; height: 320%;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2796%27%20height%3D%2796%27%20viewBox%3D%270%200%2096%2096%27%20fill%3D%27%23ffffff%27%20shape-rendering%3D%27crispEdges%27%3E%3Crect%20x%3D%278%27%20y%3D%274%27%20width%3D%271%27%20height%3D%273%27%2F%3E%3Crect%20x%3D%277%27%20y%3D%275%27%20width%3D%273%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%2728%27%20y%3D%2711%27%20width%3D%272%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%2727%27%20y%3D%2712%27%20width%3D%274%27%20height%3D%272%27%2F%3E%3Crect%20x%3D%2760%27%20y%3D%2717%27%20width%3D%271%27%20height%3D%273%27%2F%3E%3Crect%20x%3D%2759%27%20y%3D%2718%27%20width%3D%273%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%2776%27%20y%3D%279%27%20width%3D%271%27%20height%3D%273%27%2F%3E%3Crect%20x%3D%2775%27%20y%3D%2710%27%20width%3D%273%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%277%27%20y%3D%2735%27%20width%3D%271%27%20height%3D%273%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%2736%27%20width%3D%273%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%2740%27%20y%3D%2728%27%20width%3D%271%27%20height%3D%273%27%2F%3E%3Crect%20x%3D%2739%27%20y%3D%2729%27%20width%3D%273%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%2761%27%20y%3D%2735%27%20width%3D%271%27%20height%3D%273%27%2F%3E%3Crect%20x%3D%2760%27%20y%3D%2736%27%20width%3D%273%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%2784%27%20y%3D%2732%27%20width%3D%271%27%20height%3D%273%27%2F%3E%3Crect%20x%3D%2783%27%20y%3D%2733%27%20width%3D%273%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%2764%27%20width%3D%272%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2765%27%20width%3D%274%27%20height%3D%272%27%2F%3E%3Crect%20x%3D%2734%27%20y%3D%2759%27%20width%3D%272%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%2733%27%20y%3D%2760%27%20width%3D%274%27%20height%3D%272%27%2F%3E%3Crect%20x%3D%2760%27%20y%3D%2761%27%20width%3D%271%27%20height%3D%273%27%2F%3E%3Crect%20x%3D%2759%27%20y%3D%2762%27%20width%3D%273%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%2784%27%20y%3D%2760%27%20width%3D%272%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%2783%27%20y%3D%2761%27%20width%3D%274%27%20height%3D%272%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%2785%27%20width%3D%271%27%20height%3D%273%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%2786%27%20width%3D%273%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%2737%27%20y%3D%2782%27%20width%3D%273%27%20height%3D%275%27%2F%3E%3Crect%20x%3D%2736%27%20y%3D%2783%27%20width%3D%275%27%20height%3D%273%27%2F%3E%3Crect%20x%3D%2763%27%20y%3D%2781%27%20width%3D%273%27%20height%3D%275%27%2F%3E%3Crect%20x%3D%2762%27%20y%3D%2782%27%20width%3D%275%27%20height%3D%273%27%2F%3E%3Crect%20x%3D%2781%27%20y%3D%2778%27%20width%3D%271%27%20height%3D%273%27%2F%3E%3Crect%20x%3D%2780%27%20y%3D%2779%27%20width%3D%273%27%20height%3D%271%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat;
  background-size: 96px 96px;
  will-change: translate;
}
.wl-promo .promo-sky .s1 { opacity: .9;  animation: promo-snow 9s linear infinite; }
.wl-promo .promo-sky .s2 { opacity: .55; animation: promo-snow 14s linear infinite; }
@keyframes promo-snow { from { translate: 0 0; } to { translate: 0 480px; } }

/* --- 작가 모집: 스티커 석 장이 천천히 떠 있는 머리말 --- */
.wl-promo .promo-cards {
  position: relative;
  height: 96px;
  display: grid;
  grid-auto-flow: column;
  place-content: center;
  gap: 14px;
  background: linear-gradient(to bottom, #f6ecfb, #f3eefc 70%, #fffdf8);
}
.wl-promo .promo-cards i {
  width: 46px; height: 56px;
  border-radius: 9px;
  border: 1px solid #cdbbe4;
  background: linear-gradient(140deg, #fff, #f3ebfb);
  box-shadow: 0 4px 10px #9b82b82e;
}
.wl-promo .promo-cards i:nth-child(1) { rotate: -7deg; animation: promo-float 4.2s ease-in-out infinite; }
.wl-promo .promo-cards i:nth-child(2) { animation: promo-float 4.8s ease-in-out .5s infinite; }
.wl-promo .promo-cards i:nth-child(3) { rotate: 7deg; animation: promo-float 4.5s ease-in-out 1s infinite; }
@keyframes promo-float { 0%, 100% { translate: 0 3px; } 50% { translate: 0 -4px; } }

@media (prefers-reduced-motion: reduce) {
  .wl-promo .promo-sky i, .wl-promo .promo-cards i { animation: none; }
}

.wl-promo .promo-body { padding: 20px 26px 22px; text-align: center; }
.wl-promo h2 { margin: 0 0 12px; font-size: 19px; line-height: 1.45; color: #4a3b63; }
.wl-promo p { margin: 0 0 10px; font-size: 13px; line-height: 1.85; }
.wl-promo .promo-fine { margin: 14px 0 0; font-size: 11px; color: #8d82a0; }
.wl-promo .promo-ok {
  display: block;
  box-sizing: border-box;
  margin: 18px 0 0;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #b9a5d6;
  border-radius: 9px;
  background: linear-gradient(135deg, #efe4fb, #dfe7fb);
  color: #4d3d6b;
  font: 700 13px/1.5 inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.wl-promo .promo-ok:active { transform: scale(.98); }

/* 하루 동안 보지 않기 */
.wl-promo .promo-skip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 14px 0 0;
  font-size: 11.5px;
  color: #8d82a0;
  cursor: pointer;
  user-select: none;
}
.wl-promo .promo-skip input { width: 14px; height: 14px; accent-color: #9b7fc4; cursor: pointer; }

/* --- 밤 테마 --- */
html[data-theme="night"] .wl-promo {
  background: #262141;
  color: #ded2f4;
  border-color: #6b5f8c;
  box-shadow: inset 0 0 0 2px #ffffff14, 0 18px 55px #06081cb0;
}
html[data-theme="night"] .wl-promo::backdrop { background: #10112bd9; }
html[data-theme="night"] .wl-promo h2 { color: #f1e8ff; }
html[data-theme="night"] .wl-promo .promo-bar { background: linear-gradient(110deg, #3b3360, #2e2b4e); border-color: #534a73; }
html[data-theme="night"] .wl-promo .promo-sky { background: linear-gradient(to bottom, #2b3558, #2a2a4c 70%, #262141); }
html[data-theme="night"] .wl-promo .promo-cards { background: linear-gradient(to bottom, #352c58, #2d2749 70%, #262141); }
html[data-theme="night"] .wl-promo .promo-cards i { background: linear-gradient(140deg, #4a3f72, #3a3160); border-color: #6b5f8c; }
html[data-theme="night"] .wl-promo :is(.promo-fine, .promo-skip) { color: #a195bb; }
html[data-theme="night"] .wl-promo .promo-ok {
  background: linear-gradient(135deg, #5b4a83, #41436e);
  border-color: #8575ad;
  color: #f0e6ff;
}

/* 작가에게 가장 중요한 한 줄은 눈에 띄게 */
.wl-promo .promo-deal {
  margin: 14px 0 0;
  padding: 9px 14px;
  border-radius: 9px;
  background: linear-gradient(135deg, #f3ebfc, #e6ecfb);
  border: 1px solid #ddd0ef;
  font-size: 13px;
  color: #4d3d6b;
}
.wl-promo .promo-deal b { font-size: 15px; font-weight: 800; }
html[data-theme="night"] .wl-promo .promo-deal {
  background: linear-gradient(135deg, #3c3463, #332f55);
  border-color: #5d5283;
  color: #ebe0ff;
}

/* 포커스 표시는 창 색에 맞춰 부드럽게 */
.wl-promo :is(.promo-ok, .promo-close, .promo-skip input):focus-visible {
  outline: 2px solid #a98bd6;
  outline-offset: 2px;
  border-radius: 9px;
}
html[data-theme="night"] .wl-promo :is(.promo-ok, .promo-close, .promo-skip input):focus-visible {
  outline-color: #c6abec;
}

/* ===== 겨울 팝업: 유리알과 감성 ===== */
#winterPromo .promo-sky {
  position: relative;
  height: 136px;
  overflow: hidden;
  background:
    radial-gradient(120px 70px at 50% 86%, #fff3e0cc, transparent 70%),
    linear-gradient(to bottom, #dbe7f7, #e9edfa 55%, #fdf8f2);
}
#winterPromo .promo-hero {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}
/* 유리알 안에서만 눈이 흩날린다 */
#winterPromo .globe-snow { will-change: translate; }
#winterPromo .globe-snow.a { animation: globe-fall 6.5s linear infinite; }
#winterPromo .globe-snow.b { animation: globe-fall 9.5s linear infinite; }
@keyframes globe-fall { from { translate: 0 -80px; } to { translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { #winterPromo .globe-snow { animation: none; } }

/* 로그인 화면이 이미 불러오는 붓글씨. 같은 파일이라 더 받지 않는다. */
@font-face {
  font-family: TTAuthBrush;
  src: url('/fonts/nanumbrushscript.woff2') format('woff2');
  font-display: swap;
}
#winterPromo {
  background:
    radial-gradient(180px 90px at 50% 0%, #fff6ea, transparent 72%),
    linear-gradient(to bottom, #fdf8f2, #fffdf9 60%);
}
#winterPromo .promo-body { padding: 16px 26px 22px; }
#winterPromo h2 {
  font-family: TTAuthBrush, cursive;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .4px;
  color: #6c5a86;
  margin: 0 0 14px;
}
#winterPromo p {
  font-size: 13.5px;
  line-height: 1.95;
  color: #6b5f7d;
}
#winterPromo .promo-fine { color: #9d93ad; }
#winterPromo .promo-ok {
  background: linear-gradient(135deg, #f0e3f7, #dfe8fb);
  border-color: #c3add9;
  letter-spacing: .3px;
}

html[data-theme="night"] #winterPromo {
  background:
    radial-gradient(180px 90px at 50% 0%, #3a3160, transparent 72%),
    linear-gradient(to bottom, #2a2446, #262141 60%);
}
html[data-theme="night"] #winterPromo .promo-sky {
  background:
    radial-gradient(120px 70px at 50% 86%, #4b3f6e99, transparent 70%),
    linear-gradient(to bottom, #2c3659, #2b2b50 55%, #2a2446);
}
html[data-theme="night"] #winterPromo h2 { color: #f0e6ff; }
html[data-theme="night"] #winterPromo p { color: #cfc3e6; }
html[data-theme="night"] #winterPromo .promo-ok {
  background: linear-gradient(135deg, #5b4a83, #41436e);
  border-color: #8575ad;
  color: #f0e6ff;
}
html[data-theme="night"] #winterPromo .promo-fine { color: #a195bb; }

/* Shared control art inherits the active day/night foreground. */
.wl-glyph { display: inline-block; width: 22px; height: 22px; vertical-align: middle; flex: none; pointer-events: none; }
.wl-pack-art { display: block; width: 32px; height: 32px; object-fit: contain; pointer-events: none; }
.wl-sr {
  position: absolute !important; inline-size: 1px !important; block-size: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip-path: inset(50%); white-space: nowrap; border: 0 !important;
}
:where([data-icon-control]):not([hidden]) {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 44px; min-height: 44px; box-sizing: border-box; vertical-align: middle;
}
[data-icon-control] .icon { width: 21px; height: 21px; }
[data-icon-control][hidden] { display: none !important; }
[data-icon-control]:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.wl-label-icon { display: inline-flex; align-items: center; color: inherit; }
.wl-label-icon .wl-glyph { width: 19px; height: 19px; }
.closing-signature { text-align: center; }
#accountGate .login-wordmark, #accountGate:not(.is-login) .login-provider-row { display: none; }
#accountGate.is-login:not(.is-loading) .login-wordmark {
  display: block; width: 156px; max-width: 75%; height: auto; margin: 10px auto 0;
  border-radius: 0; box-shadow: none;
}
#accountGate.is-login .account-gate-actions {
  display: flex; flex-flow: column nowrap; align-items: center;
  width: 100%; max-width: 310px; margin-top: 26px; gap: 12px;
}
#accountGate .login-provider-row {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(12px, 4.8vw, 22px); width: 100%;
}
#accountGate .login-provider-row:has(button:disabled:not([hidden])) { padding-bottom: 17px; }
#accountGate.is-login .login-provider-row :is(#accountKakao,#accountNaver,#accountGoogle,#accountApple) {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: clamp(44px, 13vw, 52px); height: clamp(44px, 13vw, 52px);
  min-width: 0; min-height: 0; padding: 0 !important; border-radius: 50% !important;
  box-sizing: border-box;
}
#accountGate .login-provider-row #accountApple { background: #171717 !important; color: #fff !important; border: 0; box-shadow: none; }
#accountGate .login-provider-row #accountApple::before {
  content: ''; display: block; width: 25px; height: 25px;
  background: url('/assets/apple-signin-mark.svg') center / contain no-repeat;
}
#accountGate .login-provider-row button:disabled { cursor: default; opacity: .75; }
#accountGate .login-provider-row :is(#accountKakao,#accountNaver,#accountGoogle,#accountApple) small {
  position: absolute; inset: calc(100% + 3px) auto auto 50%; transform: translateX(-50%);
  padding: 0; background: transparent; color: #6f567c;
  font: 11px/1.2 var(--font); white-space: nowrap;
}
#accountGate.is-login .account-trial-link { margin: 4px auto 0; gap: 7px; }
#accountGate .account-login-titlebar strong { display: inline-flex; }
#accountGate .account-login-titlebar .wl-glyph { width: 18px; height: 18px; }
#accountGate .account-gate-actions [hidden] { display: none !important; }

html body .header-actions .new-btn .icon { display: block; }
html body .selection-actions button[data-icon-control] { min-width: 44px; min-height: 44px; padding: 8px; }
html body .selection-actions button[data-icon-control] .icon { width: 19px; height: 19px; }
html body #stickerTabs .chip[data-category] {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 4px 8px;
}
html body #stickerTabs .chip[data-category] .wl-glyph { width: 22px; height: 22px; }
html body .paper-patterns .pattern-preview { margin-bottom: 0; }
html body .paper-patterns .pattern-preview:after { content: none; }
html body .window-caption .window-actions { margin-left: auto; }
html body .range-label .wl-glyph { width: 17px; height: 17px; }
html body :is(#libraryDialog,#hiddenLibraryDialog) .library-actions>[data-icon-control] { min-width: 44px; padding: 0 10px; }
html body :is(#libraryDialog,#hiddenLibraryDialog) .library-actions>[data-action="new"] .icon { display: block; }
html body #letterList .delete-doc { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; }
html body #letterList .delete-doc .wl-glyph { width: 19px; height: 19px; }
html body #trialDialog .trial-button:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
html body #trialDialog .trial-install { vertical-align: middle; }
#handwritingDialog [data-icon-control]:not([hidden]), .commerce-secondary [data-icon-control]:not([hidden]) {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
}
html body #stickerTabs .chip[aria-pressed="true"], html body #manageMyStickers[aria-pressed="true"] {
  --wl-sticker-line: 2.6;
  color: #51415f;
  text-shadow: none;
}
html body #stickerTabs .chip[aria-pressed="true"] {
  box-shadow: none; background: transparent;
}
html:is([data-theme="night"],[data-theme-loading="night"]) body #stickerTabs .chip[aria-pressed="true"],
html:is([data-theme="night"],[data-theme-loading="night"]) body #manageMyStickers[aria-pressed="true"] {
  color: #f4eafa; text-shadow: none;
}
#stickerTabs [aria-pressed="true"] .wl-pack-art {
  filter: brightness(.88) contrast(1.14) drop-shadow(.6px 0 0 #392d3a88) drop-shadow(-.6px 0 0 #392d3a66);
}

/* One compact row directly below the paper, with export actions in the center. */
html body .editor-foot { padding: 1px 8px; }
.editor-foot .editor-stats-actions {
  display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(44px, 1fr);
  align-items: center; gap: 4px;
}
.letter-export { display: flex; align-items: center; justify-content: center; gap: 8px; }
html body .letter-export .icon-btn {
  position: relative; width: 52px; height: 44px; padding: 0;
  border: 0; border-radius: 11px; box-shadow: none; color: #6b4b83;
  background: transparent;
}
/* Keep a 44px tap target while the visible button is a short 52 × 32px pill. */
html body .letter-export .icon-btn::before {
  content: ''; position: absolute; z-index: 1; inset: 6px 0; padding: 1.5px;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(125deg, #dc82b9, #a08add 48%, #70b9df 80%, #b69ae1);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
html body .letter-export #downloadBtn::after {
  content: ''; position: absolute; z-index: 0; inset: 6px 0;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(125deg, #f3b5d6, #cdb9f3 52%, #afdff6);
  box-shadow: inset 0 1px 0 #fffc;
}
html body .letter-export #shareBtn { background: transparent; box-shadow: none; }
html:is([data-theme="night"],[data-theme-loading="night"]) body .letter-export .icon-btn { color: #ecddf6; }
html:is([data-theme="night"],[data-theme-loading="night"]) body .letter-export #downloadBtn::after {
  background: linear-gradient(125deg, #875c7e, #68558e 52%, #467590);
}
.letter-export .icon-btn .icon { position: relative; z-index: 2; width: 20px; height: 20px; color: inherit; }
.letter-export .icon-btn:disabled { opacity: .5; }
html[data-trial-state] .editor-stats-actions { grid-template-columns: auto minmax(0, 1fr) auto; }
html body .letter-export #trialExportNotice {
  padding: 0; border: 0; background: none; box-shadow: none; color: inherit;
  font-size: 12px; line-height: 1.4; overflow-wrap: anywhere;
}
#letterStats { display: inline-flex; align-items: center; gap: 0; font-variant-numeric: tabular-nums; }
#clearTextBtn { width: 44px; height: 44px; border: 0; box-shadow: none; }
#clearTextBtn:disabled { opacity: .5; }
html body #clearStickersBtn { justify-self: end; }
html body :is(#clearTextBtn, #clearStickersBtn) { color: #454545; background: transparent; min-width: 44px; min-height: 44px; padding: 6px;
}
html:is([data-theme="night"],[data-theme-loading="night"]) body :is(#clearTextBtn, #clearStickersBtn) { color: #ededed; }
:is(#clearTextBtn, #clearStickersBtn) .wl-glyph { width: 30px; height: 30px; }

/* The footer disclosure opens above the toolbar, including on narrow screens. */
.footer-settings { position: relative; margin-inline-start: auto; flex: 0 0 auto; }
.footer-settings > summary {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  cursor: pointer; list-style: none; border: 1px solid #bcadd5; border-radius: 14px;
  background: linear-gradient(145deg, #fffafd, #e6dcfa 70%, #d5e6fb);
  color: #695184; box-shadow: var(--bevel);
}
.footer-settings > summary::-webkit-details-marker { display: none; }
.footer-settings > summary .wl-glyph { width: 25px; height: 25px; }
.footer-settings > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.footer-settings[open] > summary { box-shadow: inset 0 0 0 1px currentColor; }
html body .footer-settings > .footer-links {
  position: absolute; z-index: 5; inset-inline-end: 0; bottom: calc(100% + 8px);
  width: max-content; max-width: calc(100vw - 44px); margin: 0; padding: 6px;
  gap: 4px; align-items: center; border: 1px solid #c8b7db; border-radius: 14px;
  background: #fffcff; box-shadow: 0 5px 18px #46325730;
}
html body .footer-settings:not([open]) > .footer-links { display: none; }
html body .footer-settings .footer-links :is(a,button):not([hidden]) {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border-radius: 10px;
}
.footer-settings .footer-links :is(a,button):hover { background: #f2ebf8; }
html:is([data-theme="night"],[data-theme-loading="night"]) .footer-settings > summary { background: var(--night-control); color: #e2cdef; border-color: #76658a; }
html:is([data-theme="night"],[data-theme-loading="night"]) body .footer-settings .footer-links { background: #302a40; border-color: #76658a; }
html:is([data-theme="night"],[data-theme-loading="night"]) .footer-settings .footer-links :is(a,button):hover { background: #493952; }

/* Keep all five Korean sign-in controls on one row. */
#accountGate .login-provider-row:has(.member-entry) { gap:clamp(4px,2vw,12px); padding-bottom:18px; }
#accountGate .member-entry { display:grid; place-items:center; position:relative; flex:0 1 52px; width:clamp(44px,13vw,52px); aspect-ratio:1; min-width:32px; padding:0; border:0; background:transparent; border-radius:50%; cursor:pointer; }
#accountGate .member-entry img { display:block; width:100%; height:auto; margin:0; border:0; border-radius:50%; background:transparent; box-shadow:none; }
#accountGate .member-entry:focus-visible { outline:2px solid #7957aa; outline-offset:3px; }

#notificationDialog { width: min(420px, calc(100vw - 28px)); max-height: calc(100dvh - 32px); }
#notificationDialog .dialog-head { padding: 6px 14px; }
#notificationDialog .dialog-head h2 { font-size: 21px; }
#notificationDialog .dialog-content { display: grid; gap: 10px; padding: 12px 14px; }
#notificationDialog p { margin: 0; font-size: 12px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
#notificationDialog .notification-availability { padding: 8px 10px; border-radius: 9px; background: #eee6f8; color: #6a527c; }
#notificationChoices { margin: 0; padding: 0; min-width: 0; border: 0; }
#notificationChoices legend { padding: 0; margin: 0 0 6px; font-size: 14px; font-weight: 600; }
#notificationDialog .notification-message { margin: 0 0 8px; color: #796188; }
.notification-intervals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.notification-intervals label { position: relative; display: grid; cursor: pointer; }
.notification-intervals .notification-off { grid-column: 1 / -1; }
.notification-intervals input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.notification-intervals span { display: grid; place-items: center; min-height: 44px; border: 1px solid #d5c7e1; border-radius: 10px; background: #fffafd; color: #826d92; font-size: 13px; }
.notification-intervals input:checked + span { border: 2px solid #8c6fa4; color: #594369; font-weight: 700; background: linear-gradient(120deg, #f9e6f1, #e8e5fc, #e1effa); }
.notification-intervals input:focus-visible + span { outline: 2px solid #795295; outline-offset: 3px; }
.notification-developer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e2d8ec; cursor: pointer; }
.notification-developer strong { display: block; font-size: 14px; font-weight: 600; }
.notification-developer small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.5; color: #826d92; }
#developerNotifications { appearance: none; flex: none; width: 44px; height: 44px; margin: 0; border: 0; border-radius: 0; cursor: pointer; background: radial-gradient(circle at 13px 22px, #fff 0 8px, transparent 9px), linear-gradient(#d2c8dc, #d2c8dc) center / 42px 24px no-repeat; clip-path: inset(9px 0 round 13px); }
#developerNotifications:checked { background: radial-gradient(circle at 31px 22px, #fff 0 8px, transparent 9px), linear-gradient(#9071a6, #9071a6) center / 42px 24px no-repeat; }
.notification-developer:has(input:focus-visible) { outline: 2px solid #795295; outline-offset: 3px; border-radius: 5px; }
#notificationChoices:disabled { opacity: .55; }
#notificationDialog #saveNotificationSettings { width: 100%; min-height: 44px; justify-content: center; }
#notificationStatus { color: #6f527f; }
#notificationStatus:empty { display: none; }
html:is([data-theme="night"],[data-theme-loading="night"]) #notificationDialog .notification-availability { background: #3d324e; color: #e4d5ef; }
html:is([data-theme="night"],[data-theme-loading="night"]) .notification-intervals span { background: #342c42; color: #d6c4e1; border-color: #655374; }
html:is([data-theme="night"],[data-theme-loading="night"]) .notification-intervals input:checked + span { background: #554364; color: #fff4fc; border-color: #c3a3d9; }
html:is([data-theme="night"],[data-theme-loading="night"]) .notification-developer { border-color: #655374; }
html:is([data-theme="night"],[data-theme-loading="night"]) .notification-developer small, html:is([data-theme="night"],[data-theme-loading="night"]) #notificationStatus { color: #d4c0e2; }
html:is([data-theme="night"],[data-theme-loading="night"]) #notificationDialog .notification-message { color: #d4c0e2; }

#notificationDialog .push-device { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; border-top: 1px solid #dfd1e9; padding-top: 10px; }
#notificationDialog .push-device .btn { min-height: 44px; min-width: 0; padding: 8px 6px; font-size: 12px; line-height: 1.4; justify-content: center; word-break: keep-all; }
#pushDeviceStatus { grid-column: 1 / -1; color: #80658f; }
#pushDeviceStatus:empty { display: none; }

/* 받는 시각 고르기. 개발자 알림 줄과 같은 모양으로 맞춥니다. */
.notification-hour { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.notification-hour strong { display: block; font-size: 14px; font-weight: 600; }
.notification-hour small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.5; color: #826d92; word-break: keep-all; }
.notification-hour select { flex: 0 0 auto; min-height: 36px; padding: 4px 8px; border-radius: 8px; }