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