:root {
  --bg: #ffffff; --fg: #1f1f1f; --muted: #5f6368; --line: #e1e3e1; --head: #f8f9fa; --panel: #f9fbfd; --band: #f0f4f9; --brand: #444746;
  --accent: #1a73e8; --on-accent: #ffffff; --accent-bg: #e8f0fe; --sel-bg: rgba(14, 101, 235, .1); --sel-line: #3271ea; --edit-line: #0b57d0; --hdr-fg: #444746; --hdr-bg: #ffffff; --corner-bg: #f8f9fa; --corner-band: #c7c7c7; --hdr-line: #c4c7c5; --hdr-full-bg: #0b57d0; --hdr-full-fg: #ffffff; --danger: #d93025; --shadow: 0 2px 6px rgba(60, 64, 67, .3);
  --cell-font: Arial;
  color-scheme: light; --ic: #444746; --link: #1155cc; --hdr-on-bg: #d3e3fd; --hdr-on-fg: #041e49; --freeze: #c4c7c5; --chip-bg: #e8eaed; --chip-fg: #202124; --share-bg: #c2e7ff; --share-fg: #001d35; --warn-bg: #fef7e0; --warn-line: #f9e1a0; --warn-fg: #202124; --toolbar: #edf2fa; --hover: rgba(68, 71, 70, .08); --hover-strong: rgba(68, 71, 70, .12); --card: #ffffff; --card-line: #dadce0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --sel-line: #8ab4f8; --edit-line: #8ab4f8; --hdr-fg: #9aa0a6; --hdr-bg: #28292a; --corner-bg: #28292a; --corner-band: #3c4043; --hdr-line: #3c4043; --hdr-full-bg: #8ab4f8; --hdr-full-fg: #062e6f; --bg: #1f1f1f; --fg: #e3e3e3; --muted: #9aa0a6; --line: #3c4043; --head: #28292a; --panel: #242526; --band: #28292a; --brand: #e3e3e3; --accent: #8ab4f8; --on-accent: #062e6f; --accent-bg: #283142; --sel-bg: rgba(138, 180, 248, .15); --shadow: 0 2px 8px rgba(0, 0, 0, .6); color-scheme: dark; --ic: #c4c7c5; --link: #8ab4f8; --hdr-on-bg: #0b3d6b; --hdr-on-fg: #c2e7ff; --freeze: #5f6368; --chip-bg: #3c4043; --chip-fg: #e3e3e3; --share-bg: #004a77; --share-fg: #c2e7ff; --warn-bg: #3d3420; --warn-line: #5c4a1e; --warn-fg: #f1e3b7; --toolbar: #2d2f31; --hover: rgba(227, 227, 227, .08); --hover-strong: rgba(227, 227, 227, .14); --card: #28292a; --card-line: #5f6368; }
}
:root[data-theme="dark"] { --sel-line: #8ab4f8; --edit-line: #8ab4f8; --hdr-fg: #9aa0a6; --hdr-bg: #28292a; --corner-bg: #28292a; --corner-band: #3c4043; --hdr-line: #3c4043; --hdr-full-bg: #8ab4f8; --hdr-full-fg: #062e6f; --bg: #1f1f1f; --fg: #e3e3e3; --muted: #9aa0a6; --line: #3c4043; --head: #28292a; --panel: #242526; --band: #28292a; --brand: #e3e3e3; --accent: #8ab4f8; --on-accent: #062e6f; --accent-bg: #283142; --sel-bg: rgba(138, 180, 248, .15); --shadow: 0 2px 8px rgba(0, 0, 0, .6); color-scheme: dark; --ic: #c4c7c5; --link: #8ab4f8; --hdr-on-bg: #0b3d6b; --hdr-on-fg: #c2e7ff; --freeze: #5f6368; --chip-bg: #3c4043; --chip-fg: #e3e3e3; --share-bg: #004a77; --share-fg: #c2e7ff; --warn-bg: #3d3420; --warn-line: #5c4a1e; --warn-fg: #f1e3b7; --toolbar: #2d2f31; --hover: rgba(227, 227, 227, .08); --hover-strong: rgba(227, 227, 227, .14); --card: #28292a; --card-line: #5f6368; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* a class with display: flex must not show a hidden element */
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 14px "Google Sans", Roboto, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; border-radius: 4px; }
button:disabled { opacity: .4; cursor: default; }
button.primary { background: var(--accent); color: var(--on-accent); padding: 7px 18px; border-radius: 18px; }
button.link { color: var(--accent); padding: 4px 6px; }
input, select, textarea { font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; }
.muted { color: var(--muted); }
.grow { flex: 1; }
.rel { position: relative; }
.col { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; gap: 8px; align-items: center; }

/* sign-in */
.login-page { min-height: 100vh; display: grid; place-items: center; background: var(--panel); }
.login { width: min(360px, 92vw); display: flex; flex-direction: column; gap: 12px; padding: 36px 32px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.login-logo { display: flex; align-items: center; gap: 10px; font-size: 24px; color: var(--brand); }
.login .error { color: var(--danger); min-height: 1em; font-size: 13px; }
.notice { padding: 60px 24px; text-align: center; }

.avatars { display: flex; gap: 4px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; color: #fff; display: inline-grid; place-items: center; font-size: 13px; flex: none; }
.menu-top { padding: 3px 8px; font-size: 14px; }
.menu-top:hover { background: var(--head); }
/* menus and dialogs */
.menu-pop { position: fixed; z-index: 100; background: var(--bg); box-shadow: 0 2px 6px 2px rgba(0, 0, 0, .15); border-radius: 4px; padding: 6px 0; min-width: 220px; max-height: 80vh; overflow: auto; }
.menu-pop.compact { min-width: 0; }
.menu-head { padding: 8px 16px 4px; font-size: 11px; color: var(--muted); cursor: default; }
.menu-item { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 16px 6px 8px; cursor: default; white-space: nowrap; }
.menu-item:hover:not(.disabled) { background: var(--head); }
.menu-item.disabled { opacity: .4; }
.menu-check { width: 16px; display: flex; justify-content: center; color: var(--fg); }
.menu-label { flex: 1; }
.menu-key { color: var(--muted); font-size: 12px; }
.menu-sep { height: 1px; background: var(--line); margin: 6px 0; }
.dlg-back { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); display: grid; place-items: center; z-index: 200; }
.dlg { background: var(--bg); border-radius: 8px; padding: 22px 24px 16px; width: min(560px, 94vw); max-height: 88vh; overflow: auto; box-shadow: var(--shadow); }
.dlg-title { font-size: 20px; margin-bottom: 14px; }
.dlg-body { display: flex; flex-direction: column; gap: 10px; }
.dlg-input { width: 100%; }
.dlg-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
kbd { font-family: inherit; font-size: 12px; background: var(--head); border: 1px solid var(--line); border-radius: 3px; padding: 1px 6px; }
.ic { flex: none; display: block; color: var(--ic); }
.palette { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.pal-reset { text-align: left; padding: 6px 4px; margin-bottom: 4px; }
.pal-reset:hover { background: var(--head); }
.pal-row { display: flex; gap: 2px; }
.pal-row.gap { margin-bottom: 8px; }
.pal-c { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12); padding: 0; }
.pal-c:hover { transform: scale(1.15); }
.pal-c.on { box-shadow: 0 0 0 2px var(--accent); }
.pal-custom { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.pal-custom input { width: 32px; height: 22px; padding: 0; border: 0; background: none; }
.toast { position: fixed; left: 24px; bottom: 24px; background: #323232; color: #fff; padding: 12px 18px; border-radius: 4px; z-index: 300; box-shadow: var(--shadow); }
/* share dialog (laid out as Docs'): people with access, general access; adding people is a second page */
.dlg-back ~ .menu-pop { z-index: 250; }
.share-dlg { width: min(512px, 94vw); padding: 24px; border-radius: 8px; overflow: visible; }
.sh-title { display: flex; align-items: center; gap: 4px; font-size: 22px; line-height: 28px; margin-bottom: 16px; }
.sh-doc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-icon-btn { width: 40px; height: 40px; margin-left: -10px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.share-dlg:not(.adding) .sh-icon-btn { display: none; }
.sh-icon-btn:hover, .sh-role:hover:not(:disabled), .sh-scope:hover:not(:disabled), .sh-chip-x:hover { background: var(--head); }
.sh-field-row { display: flex; gap: 8px; align-items: stretch; }
.sh-field { flex: 1; min-width: 0; position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 48px; padding: 6px 14px; border: 1px solid var(--muted); border-radius: 4px; box-sizing: border-box; cursor: text; }
.sh-field:focus-within { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sh-chips { display: contents; }
.sh-input { flex: 1; min-width: 140px; border: 0; padding: 6px 0; outline: none; background: transparent; font-size: 15px; }
.sh-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px; border: 1px solid var(--line); border-radius: 15px; font-size: 13px; max-width: 100%; }
.sh-chip > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-chip-x { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.sh-chip-x .ic, .sh-role .ic, .sh-scope .ic { color: var(--muted); }
.sh-suggest { position: absolute; left: -1px; right: -1px; top: calc(100% + 4px); background: var(--bg); box-shadow: var(--shadow); border-radius: 4px; z-index: 10; padding: 6px 0; max-height: 280px; overflow: auto; }
.sh-suggest:empty { display: none; }
.sh-sug { display: flex; align-items: center; gap: 12px; padding: 8px 16px; cursor: pointer; }
.sh-sug.on, .sh-sug:hover { background: var(--head); }
.sh-role { display: inline-flex; align-items: center; gap: 2px; padding: 6px 4px 6px 10px; border-radius: 4px; white-space: nowrap; flex: none; }
.sh-role-box { border: 1px solid var(--muted); padding: 0 8px 0 14px; min-height: 48px; }
.sh-role-text { color: var(--muted); padding: 0 8px; white-space: nowrap; flex: none; }
.sh-sub { font-size: 16px; font-weight: 500; margin: 20px 0 6px; }
.sh-list { display: flex; flex-direction: column; max-height: 264px; overflow: auto; margin: 0 -24px; padding: 0 24px; }
.sh-person { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.sh-who { flex: 1; min-width: 0; }
.sh-who > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-mail { font-size: 12px; color: var(--muted); line-height: 16px; }
.sh-general { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.sh-gicon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--head); }
.sh-gicon .ic { color: var(--fg); }
.sh-gicon.open { background: #c4eed0; } .sh-gicon.open .ic { color: #0f5223; }
:root[data-theme="dark"] .sh-gicon.open { background: #0f5223; } :root[data-theme="dark"] .sh-gicon.open .ic { color: #c4eed0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sh-gicon.open { background: #0f5223; } :root:not([data-theme="light"]) .sh-gicon.open .ic { color: #c4eed0; } }
.sh-gtext { flex: 1; min-width: 0; }
.sh-scope { display: inline-flex; align-items: center; gap: 2px; padding: 2px 2px 2px 8px; margin-left: -8px; font-weight: 500; border-radius: 4px; }
.sh-scope:disabled { opacity: 1; cursor: default; }
.sh-notify { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; cursor: pointer; }
.sh-notify input { width: 18px; height: 18px; margin: 0 0 0 2px; accent-color: var(--accent); }
.sh-msg { display: block; width: 100%; box-sizing: border-box; min-height: 128px; padding: 12px 14px; border: 1px solid var(--muted); border-radius: 4px; resize: vertical; font-size: 15px; }
.sh-msg:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sh-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 24px; }
.sh-right { display: flex; gap: 8px; }
.share-dlg button.primary { padding: 10px 24px; border-radius: 20px; font-weight: 500; }
.sh-copy { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px 9px 16px; border: 1px solid var(--muted); border-radius: 20px; color: var(--accent); font-weight: 500; }
.sh-copy .ic { color: var(--accent); }
.sh-copy:hover, .sh-text:hover { background: var(--accent-bg); }
.sh-text { padding: 10px 16px; border-radius: 20px; color: var(--accent); font-weight: 500; }
@media (max-width: 480px) { .share-dlg { padding: 20px 16px; } .sh-list { margin: 0 -16px; padding: 0 16px; } .sh-field-row { flex-wrap: wrap; } .sh-role-box { min-height: 40px; } }
/* side panels: data validation, conditional formatting, named ranges/functions, protection, column stats */
.panel { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.pf { display: flex; flex-direction: column; gap: 4px; }
.pf-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.pf-input { width: 100%; }
textarea.pf-input { resize: vertical; font-family: var(--cell-font); }
.pf-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.pf-btn { padding: 4px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.pf-btn.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.pf-add { padding: 10px; border: 1px dashed var(--line); border-radius: 8px; color: var(--accent); text-align: left; }
.pf-add:hover { background: var(--accent-bg); }
.pf-tabs { display: flex; border-bottom: 1px solid var(--line); }
.pf-tab { flex: 1; padding: 8px; border-radius: 0; border-bottom: 3px solid transparent; }
.small { font-size: 12px; }
.person-av { width: 14px; height: 14px; border-radius: 50%; background: #1a73e8; color: #fff; font-size: 9px; display: grid; place-items: center; flex: none; }
.cm-thread, .cm-new { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 10px; }
.cm-thread.resolved { opacity: .6; }
.cm-where { font-size: 12px; color: var(--accent); cursor: pointer; margin-bottom: 6px; }
.cm-author { font-weight: 500; font-size: 13px; } .cm-time { font-weight: 400; color: var(--muted); margin-left: 6px; font-size: 11px; }
.cm-body { white-space: pre-wrap; margin: 2px 0; }
.cm-compose { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.cm-compose textarea { width: 100%; resize: vertical; }
.cm-compose button { align-self: flex-end; }
.pk-head { display: flex; align-items: center; padding: 16px 16px 4px 24px; }
.pk-title { font-size: 22px; flex: 1; }
.pk-searchbox { display: flex; align-items: center; gap: 10px; margin: 8px 24px 4px; padding: 0 16px; height: 44px; border-radius: 22px; background: var(--band); color: var(--muted); }
.pk-searchbox:focus-within { background: var(--bg); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.pk-search-ic { display: grid; }
.pk-search { flex: 1; border: 0; background: transparent; outline: none; font-size: 15px; padding: 0; }
.pk-tabs { display: flex; gap: 4px; padding: 0 24px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.pk-tab { padding: 12px 14px 10px; border-radius: 0; border-bottom: 3px solid transparent; color: var(--muted); font-weight: 500; white-space: nowrap; }
.pk-tab:hover { background: var(--head); }
.pk-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.pk-path { display: flex; align-items: center; gap: 2px; min-height: 40px; padding: 4px 18px; color: var(--muted); font-size: 14px; flex-wrap: wrap; }
.pk-path:empty { min-height: 8px; }
.pk-crumb { padding: 4px 6px; border-radius: 4px; color: var(--muted); }
.pk-crumb:hover:not(:disabled) { background: var(--head); }
.pk-crumb.last { color: var(--fg); font-weight: 500; opacity: 1; }
.pk-sep { color: var(--muted); }
.pk-body { flex: 1; overflow: auto; padding: 0 12px; }
.pk-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 140px 90px; align-items: center; gap: 10px; padding: 0 12px; height: 44px; border-radius: 6px; cursor: default; user-select: none; }
.pk-row:not(.pk-headrow):hover { background: var(--head); }
.pk-row.on { background: var(--accent-bg); }
.pk-row.folder { cursor: pointer; }
.pk-headrow { height: 36px; color: var(--muted); font-size: 13px; font-weight: 500; border-bottom: 1px solid var(--line); border-radius: 0; position: sticky; top: 0; background: var(--bg); z-index: 1; }
.pk-ic { display: grid; place-items: center; line-height: 0; }
.pk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-col { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-empty { padding: 60px 12px; text-align: center; color: var(--muted); }
.pk-foot { display: flex; align-items: center; gap: 8px; padding: 12px 24px 16px; border-top: 1px solid var(--line); }
.pk-status { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.pk-connect { max-width: 420px; margin: 40px auto; display: flex; flex-direction: column; gap: 12px; }
.pk-connect-title { font-size: 18px; font-weight: 500; }
.pk-connect p { margin: 0; line-height: 1.5; }
.pk-id { font-size: 14px; color: var(--muted); }
.pk-id b { color: var(--fg); font-weight: 500; }
.pk-pw { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--muted); border-radius: 4px; font-size: 15px; }
.pk-pw:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pk-err { color: var(--danger); font-size: 13px; min-height: 1em; }
.pk-drop { margin: 24px 12px; min-height: 300px; border: 2px dashed var(--line); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.pk-drop.over { border-color: var(--accent); background: var(--accent-bg); }
.pk-drop-text { font-size: 18px; color: var(--muted); }
.pk-drop-note { font-size: 12px; }
.menu-pop:has(> .icon-pal), .menu-pop:has(> .bstyle-list), .menu-pop:has(> .palette) { min-width: 0; }
.menu-pop:has(> .icon-pal) { padding: 6px; }
.icon-pal { display: flex; align-items: stretch; gap: 6px; }
.icon-pal-grid { display: flex; flex-direction: column; gap: 2px; }
.icon-pal-row { display: flex; gap: 2px; }
.icon-pal-btn { width: 32px; height: 32px; border-radius: 4px; display: grid; place-items: center; padding: 0; }
.icon-pal-btn:hover { background: var(--head); }
.icon-pal-btn.on { background: var(--accent-bg); }
.icon-pal-btn.on .ic { color: var(--accent); }
.icon-pal-side { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding-left: 6px; border-left: 1px solid var(--line); }
.icon-pal-drop { display: inline-flex; align-items: center; gap: 0; height: 32px; padding: 0 2px 0 6px; border-radius: 4px; }
.icon-pal-drop:hover { background: var(--head); }
.icon-pal-pen { position: relative; display: inline-grid; width: 20px; height: 22px; place-items: start center; }
.icon-pal-bar { position: absolute; left: 1px; right: 1px; bottom: 0; height: 4px; border-radius: 1px; border: 1px solid rgba(0, 0, 0, .15); }
.icon-pal-angle { height: 30px; padding: 0 4px; border-radius: 4px; font-size: 13px; }
.menu-pop.kbd .menu-main[data-mn]::after { content: ' (' attr(data-mn) ')'; color: var(--muted); }
.menu-item.active:not(.disabled) { background: var(--head); }
.menu-top.open { background: var(--head); }
.acct { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.acct:hover { background: var(--hover-strong); }
.acct .avatar { width: 32px; height: 32px; font-size: 15px; }
.acct-card { display: flex; align-items: center; gap: 12px; padding: 10px 16px 12px; min-width: 240px; }
.acct-big { width: 40px; height: 40px; font-size: 18px; }
.acct-name { font-weight: 500; }
  .menu-top, .pf-btn, .home-filter, .gal-btn, .link, .share-btn, .tab, .tb, .new-title, .status { white-space: nowrap; }
  .dlg { padding: 18px 16px 12px; }
  .menu-pop { max-width: calc(100vw - 8px); }
.gpal { padding: 4px 12px 6px; }
.gpal .pal-row { display: flex; gap: 3px; margin: 3px 0; }
.gpal .pal-c { width: 18px; height: 18px; border-radius: 50%; }
.gpal .pal-item { display: flex; align-items: center; gap: 10px; width: calc(100% + 24px); margin: 0 -12px; padding: 0 16px; height: 32px; border: 0; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.gpal .pal-item:hover { background: var(--hover); }
.gpal .pal-sec { display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; font-size: 12px; color: var(--muted); }
.gpal .pal-ic { position: relative; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ic); cursor: pointer; }
.gpal .pal-ic:hover { background: var(--hover); }
.gpal .pal-divider { height: 1px; margin: 8px 0 4px; background: var(--line); }
.gpal .pal-color-input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.menu-pop.top { min-width: 322px; }
.menu-check .micon { color: var(--ic); }
.menu-item.disabled .micon { opacity: .6; }
.menu-key.sub { font-size: 9px; color: var(--ic); }
.menu-pop .menu-check { width: 20px; }
.menu-pop .menu-item { gap: 12px; padding-left: 12px; }
.cm-compose { position: relative; }
.cm-suggest { left: 0; right: 0; }
.cm-suggest .person-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 13px; flex: none; }
.cm-mention { color: var(--link); font-weight: 500; }
/* ================================================================================================================
   Docs: measured from Google Docs (analysis/docs/out/chrome-google.json): header #f9fbfd, toolbar pill #f0f4f9 r28,
   rulers 16px, sidebar 280px, A4 page 794x1123 at 96 dpi, 16px above the first page, 10px between pages.
   ================================================================================================================ */
:root { --canvas: #f9fbfd; --chrome: #f9fbfd; --tb: #f0f4f9; --tb-ic: rgba(31, 31, 31, .7); --tb-on: #d3e3fd; --tb-hover: rgba(68, 71, 70, .08); --page-line: #c7c7c7; --ruler-fg: #444746; --ruler-margin: #e1e3e6; --mode-fg: #0842a0; --mode-bg: #f0f4f9; --c-hi: rgba(255, 212, 0, .14); --c-line: #fbbc04; --menubar-fg: #1f1f1f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --canvas: #1f1f1f; --chrome: #1f1f1f; --tb: #2d2f31; --tb-ic: rgba(227, 227, 227, .8); --tb-on: #0b3d6b; --page-line: #3c4043; --ruler-fg: #c4c7c5; --ruler-margin: #3c4043; --mode-fg: #a8c7fa; --mode-bg: #2d2f31; --menubar-fg: #e3e3e3; } }
:root[data-theme="dark"] { --canvas: #1f1f1f; --chrome: #1f1f1f; --tb: #2d2f31; --tb-ic: rgba(227, 227, 227, .8); --tb-on: #0b3d6b; --page-line: #3c4043; --ruler-fg: #c4c7c5; --ruler-margin: #3c4043; --mode-fg: #a8c7fa; --mode-bg: #2d2f31; --menubar-fg: #e3e3e3; }
body.in-editor { overflow: hidden; background: var(--canvas); }
[data-tooltip] { position: relative; }

/* ----- the editor page ----- */
.docs-app { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--canvas); }
.d-head { background: var(--chrome); flex: none; }
.d-titlebar { display: flex; align-items: flex-start; height: 64px; padding-right: 12px; gap: 4px; }
.d-logo { width: 64px; height: 64px; flex: none; display: grid; place-items: center; margin-right: -10px; }
.d-logo .app-logo svg { width: 40px; height: 40px; }
.d-title-col { display: flex; flex-direction: column; min-width: 0; padding-top: 8px; }
.d-title-row { display: flex; align-items: center; gap: 0; height: 28px; }
.d-title-wrap { position: relative; display: inline-block; }
.d-title-sizer { position: absolute; visibility: hidden; white-space: pre; font: 18px "Google Sans", Roboto, "Malgun Gothic", sans-serif; padding: 0 6px; }
.d-title { font: 18px "Google Sans", Roboto, "Malgun Gothic", sans-serif; color: var(--fg); border: 1px solid transparent; border-radius: 4px; padding: 0 6px; height: 26px; background: transparent; min-width: 40px; max-width: 50vw; }
.d-title:hover:not(:disabled) { border-color: var(--fg); }
.d-title:focus { border-color: var(--accent); outline: none; box-shadow: inset 0 0 0 1px var(--accent); }
.d-title:disabled { opacity: 1; }
.d-icon-btn { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; }
.d-icon-btn:hover { background: var(--tb-hover); }
.d-icon-btn .ic { color: var(--ic); }
.d-star.on .ic { color: #f4b400; }
.d-save .ic { color: var(--ic); }
.d-menubar { display: flex; gap: 0; height: 26px; margin-left: -1px; margin-top: 2px; }
.d-menu-top { font: 14px "Google Sans", Roboto, "Malgun Gothic", sans-serif; color: var(--menubar-fg); padding: 0 7px; height: 26px; border-radius: 4px; }
.d-menu-top:hover, .d-menu-top.open { background: var(--tb-hover); }
.d-round-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; margin-top: 9px; flex: none; }
.d-round-btn:hover { background: var(--tb-hover); }
.d-round-btn .ic { color: var(--ic); }
.d-people { display: flex; align-items: center; gap: 2px; margin-top: 13px; }
.d-person { width: 32px; height: 32px; cursor: pointer; border: 2px solid var(--chrome); }
.d-share { display: flex; height: 40px; margin: 10px 4px 0 6px; border-radius: 20px; overflow: hidden; background: var(--share-bg); color: var(--share-fg); flex: none; }
.d-share-main { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 16px; font-weight: 500; color: var(--share-fg); border-radius: 0; }
.d-share-arrow { width: 32px; border-left: 1px solid rgba(0, 0, 0, .12); border-radius: 0; display: grid; place-items: center; }
.d-share .ic { color: var(--share-fg); }
.d-share button:hover { background: rgba(0, 0, 0, .06); }
.docs-app .acct { margin-top: 10px; }
.docs-app .acct .avatar { width: 40px; height: 40px; font-size: 18px; }

/* ----- toolbar: the pill under the title bar ----- */
.d-toolbar-wrap { padding: 1px 16px 9px; }
.toolbar { display: flex; align-items: center; gap: 1px; height: 40px; padding: 0 8px; background: var(--tb); border-radius: 28px; overflow: hidden; }
.toolbar .tb { height: 28px; min-width: 28px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; gap: 0; border-radius: 4px; color: var(--tb-ic); flex: none; }
.toolbar .tb .ic { color: var(--tb-ic); }
.toolbar .tb:hover:not(:disabled) { background: var(--tb-hover); }
.toolbar .tb.on { background: var(--tb-on); }
.toolbar .tb.on .ic { color: var(--fg); }
.toolbar .tb:disabled .ic { opacity: .4; }
.toolbar.readonly .tb.ro { display: none; }
.tb-sep { width: 1px; height: 20px; background: #c7c7c7; margin: 0 4px; flex: none; }
.tb-search { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px; margin-right: 4px; border-radius: 16px; color: var(--muted); background: var(--bg); width: 100px; flex: none; font-size: 14px; }
.tb-search:hover { background: var(--hover); }
.tb-box { gap: 2px !important; padding: 0 2px 0 6px !important; font-size: 14px; color: var(--fg) !important; }
.tb-box-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; color: var(--fg); }
.tb-zoom .tb-box-text { width: 44px; } .tb-style .tb-box-text { width: 86px; } .tb-font .tb-box-text { width: 74px; }
.tb-sizebox { display: inline-flex; align-items: center; gap: 0; flex: none; }
.tb-size { width: 34px; height: 24px; text-align: center; padding: 0; border: 1px solid #747775; border-radius: 4px; font-size: 14px; color: var(--fg); background: transparent; margin: 0 3px; }
.tb-size:focus { outline: none; border: 2px solid var(--accent); }
.tb-pair { display: inline-flex; flex: none; }
.tb-pair .tb-list { padding-right: 0; }
.tb-arrow { min-width: 14px !important; padding: 0 !important; }
.tb-split { gap: 0 !important; padding: 0 0 0 4px !important; }
.tb-color { flex-direction: column; }
.ic-bar { stroke: rgba(0, 0, 0, .15); stroke-width: 24; }
.tb-mode { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px 0 12px; border-radius: 15px; color: var(--mode-fg); background: var(--mode-bg); font-weight: 500; flex: none; }
.tb-mode .ic { color: var(--mode-fg); }
.tb-mode:hover { background: var(--tb-hover); }
.tb-mode-ic { display: inline-flex; }
.mode-menu .menu-item { min-height: 56px; align-items: flex-start; padding-top: 8px; }
.mode-desc { font-size: 12px; color: var(--muted); max-width: 230px; white-space: normal; }
body.compact .d-titlebar { display: none; }
body.compact .d-toolbar-wrap { padding-top: 8px; }
body.painting .ProseMirror { cursor: copy; }
.list-pal { display: grid; grid-template-columns: repeat(3, 76px); gap: 8px; padding: 10px; }
.list-pal-btn { border: 1px solid var(--line); border-radius: 4px; padding: 8px 6px; background: var(--bg); }
.list-pal-btn:hover { border-color: var(--accent); }
.list-sample { display: flex; flex-direction: column; gap: 6px; }
.ls-row { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--fg); }
.ls-g { min-width: 16px; text-align: right; }
.ls-line { flex: 1; height: 2px; background: #c7c7c7; }
.list-pal-foot { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 4px; }
.icon-pal { display: flex; gap: 2px; padding: 6px; }
.icon-pal-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 4px; }
.icon-pal-btn:hover { background: var(--hover); }
.tbl-grid { padding: 8px 12px; }
.tbl-grid-cells { display: grid; gap: 2px; }
.tbl-cell { width: 16px; height: 16px; box-sizing: border-box; border: 1px solid #e0e0e0; background: #f5f5f5; }
.tbl-cell.on { border-color: #4285f4; background: #d2e3fc; }
.tbl-grid-label { text-align: center; padding-top: 6px; font: 400 13.3333px Roboto, Arial, sans-serif; color: #1f1f1f; }
.pal-none { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--muted); background: linear-gradient(135deg, transparent 45%, #d93025 45%, #d93025 55%, transparent 55%); display: inline-block; margin-right: 8px; vertical-align: middle; }
.pal-item { display: flex; align-items: center; padding: 6px 4px; text-align: left; width: 100%; }
.pal-item:hover { background: var(--head); }
.pal-sec { font-size: 12px; color: var(--muted); margin: 8px 0 4px; }
.pal-ic { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; position: relative; }
.pal-color-input { position: absolute; opacity: 0; width: 0; height: 0; }

/* ----- rulers ----- */
.d-hruler { height: 16px; flex: none; position: relative; background: var(--chrome); border-bottom: 1px solid var(--line); overflow: hidden; margin-left: 16px; }
.docs-app.no-ruler .d-hruler, .docs-app.no-ruler .d-vruler { display: none; }
.d-hruler-inner { position: absolute; top: 0; height: 16px; background: var(--bg); }
.rl-ticks { position: absolute; inset: 0; }
.rl-margin { position: absolute; top: 0; height: 16px; background: var(--ruler-margin); }
.rl-tick { position: absolute; bottom: 4px; width: 1px; height: 4px; background: var(--ruler-fg); opacity: .7; }
.rl-tick.half { height: 6px; }
.rl-num { position: absolute; top: 1px; transform: translateX(-50%); font: 10px "Google Sans Mono", "Roboto Mono", monospace; color: var(--ruler-fg); }
.rl-mhandle { position: absolute; top: 0; width: 6px; margin-left: -3px; height: 16px; cursor: ew-resize; }
.rl-left, .rl-right { position: absolute; bottom: 0; width: 0; height: 0; margin-left: -6px; border: 6px solid transparent; border-top: 7px solid #1a73e8; border-bottom: 0; cursor: ew-resize; z-index: 2; }
.rl-first { position: absolute; top: 0; width: 12px; height: 4px; margin-left: -6px; background: #1a73e8; cursor: ew-resize; z-index: 3; }
.rl-tip { position: absolute; top: 16px; background: #3c4043; color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 4px; white-space: nowrap; z-index: 20; transform: translateX(-50%); }
.rl-guide { position: fixed; top: 0; bottom: 0; width: 0; border-left: 1px dashed #1a73e8; z-index: 400; pointer-events: none; }
.d-vruler { width: 16px; flex: none; position: relative; background: var(--chrome); overflow: hidden; border-right: 1px solid var(--line); }
.d-vruler-inner { position: absolute; left: 0; width: 16px; background: var(--bg); }
.rl-vmargin { position: absolute; left: 0; width: 16px; background: var(--ruler-margin); }
.rl-vtick { position: absolute; right: 4px; height: 1px; width: 4px; background: var(--ruler-fg); opacity: .7; }
.rl-vtick.half { width: 6px; }
.rl-vnum { position: absolute; left: 2px; transform: translateY(-50%) rotate(-90deg); font: 10px "Google Sans Mono", "Roboto Mono", monospace; color: var(--ruler-fg); }

/* ----- main area: sidebar, the pages, comments ----- */
.d-main { flex: 1; min-height: 0; display: flex; position: relative; }
.d-side { width: 280px; flex: none; overflow: auto; padding: 16px 0 16px 16px; position: absolute; left: 16px; top: 0; bottom: 0; z-index: 3; }
.d-side.collapsed { width: auto; padding: 16px; }
.d-side-open { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); box-shadow: var(--shadow); }
.side-top { padding: 4px 0 18px 4px; }
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px 12px; }
.side-title { font: 500 14px "Google Sans", Roboto, sans-serif; color: var(--fg); }
.side-tab { display: flex; align-items: center; gap: 10px; height: 40px; padding-right: 4px; border-radius: 20px; cursor: pointer; color: var(--fg); font-weight: 500; font-size: 14px; }
.side-tab:hover { background: var(--hover); }
.side-tab.on { background: #d3e3fd; color: #0b57d0; }
.side-tab.on .ic { color: #0b57d0; }
.side-tab-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-emoji { width: 20px; text-align: center; }
.side-more { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; visibility: hidden; }
.side-tab:hover .side-more, .side-tab.on .side-more { visibility: visible; }
.side-outline { margin: 4px 0 8px; border-left: 2px solid transparent; }
.side-ol { position: relative; font-size: 14px; color: var(--fg); padding-top: 9px; padding-bottom: 9px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.side-ol::before { content: ''; position: absolute; left: 24px; top: 0; bottom: 0; border-left: 1px solid var(--line); }
.side-ol.on { color: #0b57d0; }
.side-ol.on::before { border-left: 2px solid #0b57d0; }
.side-ol:hover { background: var(--hover); }
.side-empty { font-size: 12px; font-style: italic; color: var(--muted); padding: 10px 8px; }
.emoji-btn { font-size: 22px; padding: 4px; border-radius: 4px; } .emoji-btn:hover { background: var(--hover); }
.d-scroll { flex: 1; min-width: 0; overflow: auto; position: relative; }
.d-canvas { position: relative; min-width: max-content; padding: 16px 0 40px; display: flex; justify-content: center; }
.d-zoom { position: relative; flex: none; margin-right: 24px; }
.d-pages { position: absolute; left: 0; top: 0; right: 0; }
.d-page { position: absolute; left: 0; background: #fff; box-shadow: 0 0 0 0.75pt var(--page-line); }
.d-overlay { position: absolute; left: 0; top: 0; right: 0; height: 0; z-index: 2; }
.d-hf { position: absolute; pointer-events: auto; cursor: text; overflow: hidden; color: #000; }
.d-hf.empty { pointer-events: none; }
.d-hf.bottom { display: flex; flex-direction: column; justify-content: flex-end; }
.d-hf.live { visibility: hidden; }
.d-hf p { margin: 0; }
.d-content { position: relative; z-index: 1; }
.d-zoom.pageless { width: auto !important; max-width: 1100px; min-width: 600px; background: #fff; padding: 48px 72px; box-shadow: 0 0 0 0.75pt var(--page-line); }
.d-zoom.pageless .d-content { margin: 0 !important; width: auto !important; }
.d-zoom.hf-editing .pm-body { opacity: .5; }
.d-comments { position: absolute; top: 0; left: calc(50% + var(--page-half, 397px) + 24px); width: 290px; }
.find-bar { position: absolute; right: 24px; top: 8px; z-index: 30; display: flex; align-items: center; gap: 2px; background: var(--bg); box-shadow: var(--shadow); border-radius: 8px; padding: 4px 8px; }
.fb-input { border: 0; width: 220px; outline: none; padding: 6px; background: transparent; }
.fb-count { color: var(--muted); font-size: 12px; min-width: 36px; text-align: right; }
.wc-live { position: fixed; left: 24px; bottom: 24px; background: var(--bg); box-shadow: var(--shadow); padding: 6px 12px; border-radius: 4px; cursor: pointer; z-index: 50; font-size: 13px; }

/* ----- the document itself ----- */
.pm-doc .ProseMirror { outline: none; white-space: pre-wrap; word-wrap: break-word; color: #000; caret-color: #000; -webkit-font-variant-ligatures: none; font-variant-ligatures: none; font-feature-settings: "liga" 0; }
.pm-doc .ProseMirror p { margin: 0; line-height: calc(var(--lh, 1.15) * var(--fr, 1.1499)); min-height: 1em; position: relative; top: calc(-1em * (0.57495 * (var(--lh, 1.15) - 1) - 0.01625)); }
.pm-doc .ProseMirror [data-font] { line-height: inherit; }
.pm-doc .pm-header, .pm-doc .pm-footer { display: none; }
.pm-doc .pm-header.hf-live, .pm-doc .pm-footer.hf-live { display: block; position: absolute; left: 0; right: 0; z-index: 3; background: transparent; outline: 1px dashed #c7c7c7; outline-offset: 2px; }
/* footnotes sit at the bottom of the page their reference is on (placed by the pagination); laid out at the content
   width while they wait, so they can be measured. The number comes from the reference order (--fn-n). */
.pm-doc .pm-footnote { position: absolute; left: 0; right: 0; top: 0; visibility: hidden; font-size: 10pt; z-index: 2; }
.pm-doc .pm-footnote.pg-fn { visibility: visible; }
.pm-doc .pm-footnote.fn-orphan { display: none; }
.pm-doc .pm-footnote.pg-fn-first::after { content: ''; position: absolute; left: 0; width: 144pt; top: -8px; border-top: 1px solid #000; }   /* Docs: a short rule, ~192px */
.pm-doc .pm-footnote > p:first-child::before { content: var(--fn-n, ""); font-size: 60%; vertical-align: 0.633em; line-height: 0; }
.d-zoom.pageless .pm-doc .pm-footnote { position: static; visibility: visible; }
.pm-footnote-ref { color: #000; font-size: 0.66em; vertical-align: super; line-height: 0; }
.pm-footnote-ref::before { content: attr(data-n); }
.pm-doc a { color: #1155cc; text-decoration: underline; }
/* Docs' superscript / subscript (measured): 60% size, baseline up 0.38em / down 0.173em of the text, line not taller */
.pm-doc sup, .pm-doc sub { font-size: 60%; line-height: 0; }
.pm-doc sup { vertical-align: 0.633em; } .pm-doc sub { vertical-align: -0.2877em; }
.pm-doc strong[data-off], .pm-doc em[data-off], .pm-doc u[data-off], .pm-doc s[data-off] { text-decoration: none; }
.pm-doc .pm-comment { background-color: var(--c-hi); border-bottom: 2px solid rgba(251, 188, 4, .5); }
.pm-doc .pm-ins { text-decoration: underline; color: #188038; }
.pm-doc .pm-del { text-decoration: line-through; color: #188038; }
.pm-doc .pm-hr { padding: 6pt 0; } .pm-doc .pm-hr hr { border: 0; border-top: 1px solid #000; margin: 0; }
.pm-doc .pm-page-break { height: 0; }
.docs-app.no-print-layout .pm-doc .pm-page-break, .d-zoom.pageless .pm-page-break { border-top: 1px dashed #c7c7c7; margin: 12px 0; }
.docs-app.nonprinting .pm-doc .pm-page-break::after { content: '페이지 나누기'; display: block; text-align: center; color: #999; font-size: 9pt; border-top: 1px dotted #999; }
.docs-app.nonprinting .pm-doc p::after { content: '¶'; color: #999; }
.pm-doc .pm-section-break, .pm-doc .pm-column-break { font-size: 0; height: 0; }
.docs-app.nonprinting .pm-doc .pm-section-break { font-size: 9pt; color: #999; border-top: 1px dotted #999; text-align: center; height: auto; }
.pg-break { display: block; width: 100%; pointer-events: none; user-select: none; }
.pg-break.pg-inline { display: inline-block; vertical-align: top; }
/* lists: the glyph sits in the hanging indent (Docs: 18pt before the text) */
.pm-doc p[data-glyph]::before { content: attr(data-glyph); display: inline-block; min-width: calc(-1 * var(--first, -18pt)); text-indent: 0; white-space: nowrap; }
.pm-doc p[data-glyph].glyph-wide::before { padding-right: 6pt; min-width: calc(-1 * var(--first, -18pt)); }
.pm-doc p[data-list="check"]::before { content: ''; display: inline-block; box-sizing: border-box; width: calc(-1 * var(--first, -18pt)); height: 17.18px; vertical-align: -1px; text-indent: 0; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Crect x='1' y='1' width='10' height='10' rx='1.5' fill='none' stroke='%2380868b' stroke-width='1.1'/%3E%3C/svg%3E") 2px 100% / 12px 12px no-repeat; }
.pm-doc p[data-list="check"][data-checked]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Crect width='12' height='12' rx='2' fill='%231a73e8'/%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E"); }
.pm-doc p[data-list="check"][data-checked] { text-decoration: line-through; color: #80868b; }
/* tables (Docs: 1pt black borders, 5pt cell padding) */
.pm-doc table { border-collapse: collapse; table-layout: fixed; width: 100%; margin: 0; overflow: hidden; }
.pm-doc tr { height: var(--tb-minh, auto); }
.pm-doc td, .pm-doc th { border: var(--tb-w, 1pt) solid var(--tb-c, #000); padding: 5pt; vertical-align: top; position: relative; min-width: 1em; font-weight: inherit; text-align: inherit; }
.pm-doc .selectedCell::after { content: ''; position: absolute; inset: 0; background: rgba(26, 115, 232, .2); pointer-events: none; }
.pm-doc .column-resize-handle { position: absolute; right: -2px; top: 0; bottom: 0; width: 4px; background: #1a73e8; pointer-events: none; z-index: 20; }
.pm-doc.resize-cursor { cursor: col-resize; }
.pm-doc .tableWrapper { overflow: visible; }
/* images, chips */
.pm-image { position: relative; display: inline-block; line-height: 0; }
.pm-image img { max-width: none; display: inline-block; }
.pm-image .img-clip { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: 0; }
.pm-image .img-clip img { display: block; }
/* 이미지 자르기: the whole picture faded around the frame being cropped */
.pm-image.cropping { z-index: 7; }
.pm-image .crop-stage { position: absolute; z-index: 7; }
.pm-image .crop-ghost { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .45; pointer-events: none; }
.pm-image .crop-frame { position: absolute; outline: 1px solid #000; box-shadow: 0 0 0 1px #fff; background: transparent; overflow: visible; }
.pm-image .crop-h { position: absolute; width: 10px; height: 10px; border: 0 solid #000; }
.pm-image .crop-h-nw { left: -3px; top: -3px; border-left-width: 4px; border-top-width: 4px; cursor: nwse-resize; }
.pm-image .crop-h-ne { right: -3px; top: -3px; border-right-width: 4px; border-top-width: 4px; cursor: nesw-resize; }
.pm-image .crop-h-sw { left: -3px; bottom: -3px; border-left-width: 4px; border-bottom-width: 4px; cursor: nesw-resize; }
.pm-image .crop-h-se { right: -3px; bottom: -3px; border-right-width: 4px; border-bottom-width: 4px; cursor: nwse-resize; }
.pm-image .crop-h-n { left: calc(50% - 8px); top: -3px; width: 16px; border-top-width: 4px; cursor: ns-resize; }
.pm-image .crop-h-s { left: calc(50% - 8px); bottom: -3px; width: 16px; border-bottom-width: 4px; cursor: ns-resize; }
.pm-image .crop-h-w { top: calc(50% - 8px); left: -3px; height: 16px; border-left-width: 4px; cursor: ew-resize; }
.pm-image .crop-h-e { top: calc(50% - 8px); right: -3px; height: 16px; border-right-width: 4px; cursor: ew-resize; }
.pm-image.cropping .img-h, .pm-image.cropping .img-bar { display: none !important; }
.pm-image .img-h { display: none; position: absolute; width: 8px; height: 8px; background: #1a73e8; border: 1px solid #fff; z-index: 2; }
.pm-image.selected { outline: 1px solid #1a73e8; }
.pm-image.selected .img-h { display: block; }
/* text wrapping (float, own band, behind or in front of the text: placed in the paragraph it is anchored in) */
.pm-image[data-wrap="break"] { display: block; width: max-content; }
.pm-image[data-wrap="behind"], .pm-image[data-wrap="front"] { position: absolute; z-index: 3; }
.pm-image[data-wrap="behind"] { z-index: -1; }
.pm-image[data-wrap="behind"].selected { z-index: 4; }   /* its frame, handles and bar over the text while selected */
.pm-image[data-wrap="behind"] img, .pm-image[data-wrap="front"] img, .pm-image[data-wrap="wrap"] img, .pm-image[data-wrap="break"] img { cursor: move; }
.pm-image.moving { opacity: .6; z-index: 5; }
/* the bar under a selected image */
.pm-image .img-bar { display: none; position: absolute; left: 0; top: calc(100% + 10px); z-index: 6; align-items: center; gap: 2px; padding: 4px; background: #fff; border-radius: 8px;
  box-shadow: 0 1px 3px rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .15); line-height: normal; white-space: nowrap; }
.pm-image.selected .img-bar { display: inline-flex; }
.img-bar-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 4px; color: #444746; }
.img-bar-btn:hover { background: rgba(68, 71, 70, .08); }
.img-bar-btn.on { background: #d3e3fd; color: #041e49; }
.img-bar-sep { width: 1px; height: 20px; background: #c7c7c7; margin: 0 4px; }
@media print { .img-bar, .img-h { display: none !important; } }
.img-h-nw { left: -4px; top: -4px; cursor: nwse-resize; } .img-h-n { left: calc(50% - 4px); top: -4px; cursor: ns-resize; } .img-h-ne { right: -4px; top: -4px; cursor: nesw-resize; }
.img-h-e { right: -4px; top: calc(50% - 4px); cursor: ew-resize; } .img-h-se { right: -4px; bottom: -4px; cursor: nwse-resize; } .img-h-s { left: calc(50% - 4px); bottom: -4px; cursor: ns-resize; }
.img-h-sw { left: -4px; bottom: -4px; cursor: nesw-resize; } .img-h-w { left: -4px; top: calc(50% - 4px); cursor: ew-resize; }
.img-ghost { position: absolute; left: 0; top: 0; border: 1px dashed #1a73e8; pointer-events: none; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px 0 2px; border-radius: 12px; background: #e8eaed; color: #1f1f1f; font-size: 0.95em; line-height: 1.3; vertical-align: baseline; cursor: pointer; white-space: nowrap; text-indent: 0; }
.chip .ic { color: #444746; }
.chip-person { padding-left: 2px; }
.chip-av { width: 18px; height: 18px; font-size: 10px; }
.chip-dropdown { background: #e8eaed; padding: 0 2px 0 8px; }
.chip-placeholder { background: transparent; border: 1px dashed #9aa0a6; color: #5f6368; padding: 0 8px; }
.pm-bookmark { display: none; }
.docs-app.nonprinting .pm-bookmark { display: inline; }
.pm-page-number { text-indent: 0; }
.pm-equation { font-family: "Cambria Math", "Times New Roman", serif; font-style: italic; padding: 0 2px; }
.eq-frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: .9em; }
.eq-num { border-bottom: 1px solid currentColor; padding: 0 2px; } .eq-den { padding: 0 2px; }
.eq-sqrt .eq-rad { border-top: 1px solid currentColor; }
.eq-preview { min-height: 40px; font-size: 18px; padding: 8px; border: 1px solid var(--line); border-radius: 4px; }
.pm-toc { position: relative; padding: 4pt 0; }
.pm-toc.selected { outline: 1px solid #1a73e8; }
.toc-refresh { position: absolute; left: -36px; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); box-shadow: var(--shadow); visibility: hidden; }
.pm-toc:hover .toc-refresh, .pm-toc.selected .toc-refresh { visibility: visible; }
.toc-row { display: block; }
.toc-entry { display: flex; color: #1155cc; text-decoration: underline; cursor: pointer; }
.pm-toc[data-kind="plain"] .toc-entry, .pm-toc[data-kind="numbers"] .toc-entry { color: #000; text-decoration: none; }
.toc-dots { flex: 1; border-bottom: 1px dotted #000; margin: 0 4px 4px; }
/* other people's cursors and selections */
.peer-caret { position: relative; border-left: 2px solid; margin-left: -1px; margin-right: -1px; pointer-events: none; }
.peer-flag { position: absolute; left: -2px; top: -1.4em; font: 11px "Google Sans", Roboto, sans-serif; color: #fff; padding: 1px 4px; border-radius: 2px 2px 2px 0; white-space: nowrap; opacity: 0; transition: opacity .2s; }
.peer-caret:hover .peer-flag, .peer-caret.fresh .peer-flag { opacity: 1; }
.find-hit { background: #fdd663; } .find-hit.current { background: #f9ab00; }
.docs-app[data-mode="view"] .ProseMirror { caret-color: transparent; }

/* ----- comments ----- */
.c-add-float { position: absolute; left: -8px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); box-shadow: var(--shadow); z-index: 4; }
.c-add-float .ic { color: #444746; }
.c-card { position: absolute; left: 0; width: 290px; background: var(--card); border-radius: 8px; padding: 12px 12px 10px; box-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); cursor: pointer; transition: top .15s, left .15s; font-size: 14px; }
.c-card.active { left: -12px; box-shadow: 0 4px 8px 3px rgba(60, 64, 67, .15), 0 1px 3px rgba(60, 64, 67, .3); cursor: default; z-index: 3; }
.c-head { display: flex; align-items: center; gap: 8px; }
.c-who { flex: 1; min-width: 0; }
.c-name { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-time { font-size: 12px; color: var(--muted); }
.c-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.c-ic:hover { background: var(--hover); }
.c-resolve .ic { color: #0b57d0; }
.c-body { margin: 8px 0 2px; white-space: pre-wrap; word-break: break-word; line-height: 20px; }
.c-assign { font-size: 12px; color: var(--muted); margin-top: 4px; }
.c-reply { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.c-input { width: 100%; resize: none; border: 1px solid #747775; border-radius: 20px; padding: 8px 14px; margin-top: 10px; min-height: 38px; font-size: 14px; }
.c-input:focus { outline: none; border: 2px solid var(--accent); padding: 7px 13px; }
.c-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.c-text { color: var(--accent); padding: 8px 12px; border-radius: 18px; font-weight: 500; }
.c-text:hover { background: var(--accent-bg); }
button.small { padding: 8px 16px; border-radius: 18px; font-weight: 500; }
.c-assign-row { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 8px; }
.c-replybox, .c-card.draft { position: relative; }
.cm-suggest { left: 0; right: 0; }
.cm-suggest .person-av, .person-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 13px; flex: none; }
.cm-mention { color: #0b57d0; font-weight: 500; }
.d-cpanel { width: 350px; flex: none; background: var(--bg); border-left: 1px solid var(--line); display: flex; flex-direction: column; z-index: 5; }
.docs-app.cpanel-open .d-comments { display: none; }
.cp-head { display: flex; align-items: center; padding: 12px 8px 8px 16px; }
.cp-title { font: 400 18px "Google Sans", Roboto, sans-serif; }
.cp-filters { display: flex; gap: 8px; padding: 0 16px 12px; }
.c-filter { border-radius: 8px; padding: 6px 8px; }
.cp-list { flex: 1; overflow: auto; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.cp-card { border: 1px solid var(--line); border-radius: 8px; padding: 12px; cursor: pointer; }
.cp-card:hover { box-shadow: var(--shadow); }
.cp-quote { font-size: 13px; color: var(--muted); border-left: 3px solid #fbbc04; padding-left: 8px; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-replies { font-size: 12px; color: var(--accent); margin-top: 6px; }
.cp-empty { color: var(--muted); text-align: center; padding: 40px 0; }

/* ----- link popover, @ menu, dialogs ----- */
.link-pop { position: fixed; z-index: 200; width: 400px; background: var(--bg); border-radius: 8px; box-shadow: 0 4px 8px 3px rgba(60, 64, 67, .15), 0 1px 3px rgba(60, 64, 67, .3); padding: 12px 12px 8px; }
.lp-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lp-input { flex: 1; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 6px 2px; outline: none; background: transparent; }
.lp-input:focus { border-bottom: 2px solid var(--accent); }
.lp-res { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.lp-res:hover { background: var(--hover); }
.lp-res span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-menu { position: fixed; min-width: 320px; max-height: 420px; overflow: auto; }
.at-empty { padding: 12px 16px; color: var(--muted); }
.ms-pop { width: 420px; padding: 0; }
.ms-input { width: 100%; border: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); border-radius: 0; outline: none; }
.ms-path { display: block; font-size: 11px; color: var(--muted); }
.dlg-field { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 8px; }
.dlg-label { font-size: 13px; font-weight: 500; color: var(--muted); }
.num { width: 100px; }
.ps-tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.ps-tab { padding: 10px 16px; border-radius: 0; border-bottom: 3px solid transparent; color: var(--muted); font-weight: 500; }
.ps-tab.on { border-bottom-color: var(--accent); color: var(--accent); }
.ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ps-grid > div { display: flex; flex-direction: column; gap: 8px; }
.wc-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.wc-table td { padding: 8px 4px; border-bottom: 1px solid var(--line); }
.wc-table td.num { text-align: right; width: auto; }
.sc-grid { display: grid; grid-template-columns: repeat(12, 34px); gap: 2px; max-height: 300px; overflow: auto; margin-top: 8px; }
.sc-btn { width: 34px; height: 34px; font-size: 18px; border: 1px solid var(--line); border-radius: 2px; }
.sc-btn:hover { background: var(--accent-bg); }
.sk-body { width: min(560px, 80vw); }
.sk-search { width: 100%; border: 0; background: var(--panel); border-radius: 24px; padding: 12px 16px; margin-bottom: 8px; }
.sk-list { max-height: 60vh; overflow: auto; }
.sk-sec { font-weight: 500; padding: 16px 0 8px; }
.sk-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.sk-keys { display: inline-flex; gap: 3px; align-items: center; }
.sk-or { font-size: 12px; color: var(--muted); margin: 0 4px; }
.mf-list { max-height: 50vh; overflow: auto; display: flex; flex-direction: column; }
.mf-row { text-align: left; padding: 8px 10px; font-size: 16px; }
.mf-row.on { background: var(--accent-bg); }
.mono { font-family: "Roboto Mono", monospace; }
.indent { padding-left: 24px; }
.details td { padding: 6px 14px 6px 0; }
.sg-list { max-height: 60vh; overflow: auto; min-width: 380px; }
.sg-row { border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.subs-list { max-height: 50vh; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.subs-list .dlg-input { width: 140px; }
.pref-body { width: min(450px, 80vw); }
.ps-tabs.even .ps-tab { flex: 1; }
.pref-row { display: flex; align-items: flex-start; gap: 16px; padding: 10px 2px; font-size: 14px; }
.pref-row input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0b57d0; }
.subs-row { display: grid; grid-template-columns: 24px 1fr 1fr 32px; gap: 10px; align-items: center; padding: 4px 0; }
.subs-row.head { font-size: 13px; }
.subs-row input[type=checkbox] { width: 18px; height: 18px; accent-color: #0b57d0; }
.subs-list { max-height: 46vh; }
.draw-canvas { border: 1px solid var(--line); width: 640px; max-width: 80vw; cursor: crosshair; background: #fff; }
.fr-body { min-width: 440px; display: flex; flex-direction: column; gap: 10px; }

/* ----- version history ----- */
.vh-root { position: fixed; inset: 0; z-index: 90; background: var(--canvas); display: flex; flex-direction: column; }
.vh-bar { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 16px; background: var(--chrome); border-bottom: 1px solid var(--line); }
.vh-title { font: 400 18px "Google Sans", Roboto, sans-serif; }
.vh-main { flex: 1; display: flex; min-height: 0; }
.vh-scroll { flex: 1; overflow: auto; padding: 24px; }
.vh-page { width: 794px; margin: 0 auto; background: #fff; box-shadow: 0 0 0 0.75pt var(--page-line); padding: 96px; min-height: 1123px; }
.vh-doc { width: auto !important; margin: 0 !important; }
.vh-doc .pm-tab:not(:first-child) { display: none; }
.vh-side { width: 300px; flex: none; background: var(--bg); border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.vh-side-head { padding: 16px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line); }
.vh-side-title { font: 400 22px "Google Sans", Roboto, sans-serif; }
.vh-filter { border-radius: 8px; padding: 6px 8px; }
.vh-list { flex: 1; overflow: auto; }
.vh-day { font-size: 12px; font-weight: 500; color: var(--muted); padding: 14px 16px 6px; }
.vh-item { padding: 10px 8px 10px 24px; cursor: pointer; border-left: 4px solid transparent; }
.vh-item:hover { background: var(--hover); }
.vh-item.on { background: #e8f0fe; border-left-color: #1a73e8; }
.vh-item-row { display: flex; align-items: flex-start; }
.vh-when { flex: 1; }
.vh-name { font-weight: 500; }
.vh-time { font-weight: 500; font-size: 14px; } .vh-time.small { font-weight: 400; font-size: 12px; color: var(--muted); }
.vh-more { visibility: hidden; } .vh-item:hover .vh-more, .vh-item.on .vh-more { visibility: visible; }
.vh-editor { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 4px; color: var(--muted); }
.vh-dot { width: 10px; height: 10px; border-radius: 50%; }
.vh-changes { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.vh-ins { text-decoration: underline; }
.vh-del { text-decoration: line-through; }
body.in-history .docs-app { visibility: hidden; }

/* ----- home ----- */
.home { min-height: 100vh; background: var(--bg); }
.h-top { display: flex; align-items: center; gap: 12px; height: 64px; padding: 8px 16px; position: sticky; top: 0; background: var(--bg); z-index: 10; border-bottom: 1px solid var(--line); }
.h-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--fg); padding-right: 30px; }
.h-brand-name { font: 22px "Google Sans", Roboto, sans-serif; color: var(--muted); }
.h-search { display: flex; align-items: center; gap: 12px; width: min(720px, 50vw); height: 48px; padding: 0 16px; background: var(--panel); border-radius: 24px; }
.h-search-input { flex: 1; border: 0; background: transparent; outline: none; font-size: 16px; }
.h-new { background: #f1f3f4; padding: 8px 16px 24px; }
:root[data-theme="dark"] .h-new { background: #28292a; }
.h-new-inner { max-width: 1150px; margin: 0 auto; }
.h-new-head { display: flex; align-items: center; height: 56px; gap: 4px; }
.h-new-title { font-size: 16px; }
.h-gallery { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px 6px 12px; border-radius: 18px; }
.h-gallery:hover { background: var(--hover); }
.h-sep { width: 1px; height: 24px; background: var(--line); margin: 0 6px; }
.h-tiles { display: flex; gap: 16px; overflow: hidden; height: 236px; }
.h-tiles.wrap { flex-wrap: wrap; height: auto; }
.h-cat { font-weight: 500; color: var(--muted); margin: 18px 0 10px; }
.h-tile { display: flex; flex-direction: column; align-items: flex-start; width: 144px; padding: 0; text-align: left; flex: none; }
.h-tile-thumb { width: 144px; height: 187px; border: 1px solid #dadce0; border-radius: 4px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.h-tile:hover .h-tile-thumb { border-color: #1a73e8; }
.h-tile-name { font-size: 14px; font-weight: 500; margin-top: 10px; }
.h-tile-sub { font-size: 12px; color: var(--muted); }
.h-tpl-page { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 18px 14px; align-items: stretch; place-self: stretch; }
.h-tpl-title { font: 700 12px Arial, sans-serif; color: #1f1f1f; margin-bottom: 4px; text-align: left; }
.h-tpl-line { height: 4px; background: #e0e0e0; border-radius: 2px; } .h-tpl-line.short { width: 60%; }
.h-recent { max-width: 1182px; margin: 0 auto; padding: 16px; }
.h-recent-head { display: flex; align-items: center; gap: 6px; height: 56px; }
.h-recent-title { font-size: 16px; font-weight: 500; }
.h-filter { display: inline-flex; align-items: center; gap: 2px; padding: 6px 4px 6px 12px; border-radius: 4px; font-weight: 500; }
.h-filter:hover { background: var(--hover); }
.h-az { font-size: 12px; font-weight: 700; color: var(--ic); }
.h-items.grid { display: grid; grid-template-columns: repeat(auto-fill, 208px); gap: 20px; }
.h-card { display: flex; flex-direction: column; border: 1px solid #dadce0; border-radius: 6px; overflow: hidden; text-decoration: none; color: var(--fg); background: var(--bg); }
.h-card:hover { border-color: #1a73e8; }
.h-thumb { height: 268px; background: #f1f3f4; border-bottom: 1px solid #dadce0; overflow: hidden; display: flex; justify-content: center; }
.h-thumb-page { width: 180px; margin-top: 16px; background: #fff; box-shadow: 0 0 0 1px #e0e0e0; padding: 14px 12px; overflow: hidden; }
.h-thumb-text { font: 5.5px/1.35 Arial, "Malgun Gothic", sans-serif; color: #333; white-space: pre-wrap; word-break: break-all; }
.h-card-info { padding: 12px 8px 8px 16px; }
.h-card-title { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-card-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-top: 4px; }
.h-card-meta .h-card-more { margin-left: auto; }
.h-items.list { display: flex; flex-direction: column; }
.h-row { display: grid; grid-template-columns: 1fr 160px 200px 40px; align-items: center; gap: 12px; height: 48px; padding: 0 8px; border-radius: 24px; text-decoration: none; color: var(--fg); }
.h-row:hover:not(.head) { background: var(--accent-bg); }
.h-row.head { font-size: 13px; font-weight: 500; color: var(--muted); }
.h-row-name { display: flex; align-items: center; gap: 12px; font-weight: 500; overflow: hidden; }
.h-row-name > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-row-owner, .h-row-date { font-size: 13px; color: var(--muted); }
.h-empty { color: var(--muted); padding: 40px 0; text-align: center; }
.h-fab { position: fixed; right: 24px; bottom: 24px; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--bg); box-shadow: var(--shadow); }
.h-fab svg { width: 32px; height: 32px; }

/* ----- tooltips (data-tooltip), as Docs' dark labels ----- */
.d-tip { position: fixed; z-index: 500; background: #3c4043; color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 4px; pointer-events: none; white-space: pre; }

/* ----- printing: only the pages ----- */
@media print {
  @page { margin: 0; }
  body.in-editor { overflow: visible; background: #fff; }
  .d-head, .d-hruler, .d-vruler, .d-side, .d-comments, .d-cpanel, .find-bar, .toast { display: none !important; }
  .docs-app { position: static; }
  .d-main, .d-scroll { overflow: visible; display: block; }
  .d-canvas { padding: 0; display: block; }
  .d-zoom { zoom: 1 !important; margin: 0; }
  .d-page { box-shadow: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .d-zoom.pageless { box-shadow: none; padding: 0; max-width: none; }
  .peer-caret, .find-hit { display: none; }
  .pm-comment { background: none !important; border: 0 !important; }
}
@media (max-width: 720px) {
  .h-search { width: auto; flex: 1; }
  .h-items.grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .h-row { grid-template-columns: 1fr 40px; } .h-row-owner, .h-row-date { display: none; }
}
.menu-desc { display: block; font-size: 12px; color: var(--muted); }
.col-presets { display: flex; gap: 10px; padding: 8px 14px; }
.col-preset { padding: 2px; border-radius: 4px; } .col-preset:hover { background: var(--hover); }
.blocks-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; min-width: 420px; }
.block-tile { border: 1px solid var(--line); border-radius: 8px; padding: 18px 12px; text-align: left; font-weight: 500; } .block-tile:hover { border-color: var(--accent); }
/* 보기 > 댓글: hidden / collapsed (an icon per thread in the margin) */
.docs-app.comments-hidden .d-comments, .docs-app.comments-hidden .pm-comment { display: contents; }
.docs-app.comments-hidden .d-comments > * { display: none !important; }
.docs-app.comments-hidden .pm-doc .pm-comment { background: none; border: 0; }
.docs-app.comments-collapsed .c-card:not(.active):not(.draft) { width: 36px; height: 36px; padding: 0; overflow: hidden; border-radius: 50%; }
.docs-app.comments-collapsed .c-card:not(.active):not(.draft) > :not(.c-head) { display: none; }
.docs-app.comments-collapsed .c-card:not(.active):not(.draft) .c-head > :not(.avatar) { display: none; }
.docs-app.comments-collapsed .c-card:not(.active):not(.draft) .avatar { margin: 2px; }

/* toolbar geometry as measured in Docs (analysis/docs/out/toolbar-google.json): 30px buttons 2px apart, separators
   with 4px either side, zoom 75 / style 122 / font 97, size -/+ 24 and a 32px box, list buttons 30 + 12 arrows */
.toolbar { gap: 0; padding-left: 8px; }
.toolbar .tb { height: 30px; min-width: 30px; margin: 0 1px; padding: 0; }
.toolbar .tb-search { margin-right: 3px; }
.tb-sep { margin: 0 4px; }
.toolbar .tb-box { padding: 0 0 0 8px !important; justify-content: space-between; }
.toolbar .tb-zoom { width: 75px; } .toolbar .tb-style { width: 122px; } .toolbar .tb-font { width: 97px; }
.toolbar .tb-box .tb-box-text { width: auto !important; flex: 1; }
.toolbar .tb-sizebox .tb { height: 24px; min-width: 24px; width: 24px; }
.toolbar .tb-size { width: 32px; height: 24px; margin: 0 2px 0 3px; }
.toolbar .tb-color { width: 32px; }
.toolbar .tb-split { width: 32px; }
.toolbar .tb-align { width: 39px; }
.toolbar .tb-arrow { min-width: 12px !important; width: 12px; margin-left: 0; }
.toolbar .tb-pair .tb-list { margin-right: 0; }
.toolbar .tb-mode { width: 161px; justify-content: space-between; padding: 0 6px 0 12px; }
.tb-mode .tb-mode-text { flex: 1; text-align: left; }
.d-zoom { margin-right: 56px; }
/* a table row that starts a new page: the gap above it is painted as the bottom of the page, the gap between pages
   and the top of the next page, and the table's top border is drawn again where the row begins */
.pm-doc tr.pg-row > td, .pm-doc tr.pg-row > th { padding-top: calc(var(--pg-gap) + 5pt); }
.pm-doc tr.pg-row > td::before, .pm-doc tr.pg-row > th::before { content: ''; position: absolute; left: -1.5px; right: -1.5px; top: 1px; height: calc(var(--pg-gap) - 1px); z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, #fff 0, #fff calc(var(--pg-white) - 1px), var(--page-line) calc(var(--pg-white) - 1px), var(--page-line) var(--pg-white), var(--canvas) var(--pg-white), var(--canvas) calc(var(--pg-white) + var(--pg-sep) - 2px), var(--page-line) calc(var(--pg-white) + var(--pg-sep) - 2px), var(--page-line) calc(var(--pg-white) + var(--pg-sep) - 1px), #fff calc(var(--pg-white) + var(--pg-sep) - 1px));
  border-bottom: var(--tb-w, 1pt) solid var(--tb-c, #000); }
/* with the header rows drawn again above it, their bottom border is the row's top border */
.pm-doc tr.pg-row-h > td::before, .pm-doc tr.pg-row-h > th::before { border-bottom: 0; }
.pm-doc .pg-head { position: absolute; z-index: 3; pointer-events: none; user-select: none; }
.pm-doc .pg-head table { margin: 0; }
/* 서식 > 열: the body as rows of columns, one row per page's text area */
.pm-doc .pm-body.pg-cols { column-count: var(--cols); column-gap: var(--col-gap); column-height: var(--col-h); column-wrap: wrap; row-gap: var(--col-row-gap); column-fill: auto; column-rule: var(--col-rule); }
.pm-doc .pm-body.pg-cols > * { break-inside: auto; }
.pm-doc .pm-body.pg-cols > .pm-column-break { break-after: column; }
/* a suggested edit's card in the margin */
.c-card.c-sugg .c-sugg-what { word-break: break-word; }
.c-card.c-sugg .c-sugg-what b { font-weight: 500; }
/* ":" emoji suggestions at the caret */
.emoji-pop { position: fixed; z-index: 400; min-width: 220px; padding: 6px 0; }
.emoji-pop .emoji-ch { width: 24px; font-size: 18px; text-align: center; }
.emoji-pop .menu-shortcut { margin-left: auto; color: var(--muted); }
/* 워터마크: behind the text of every page */
.d-wm { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; pointer-events: none; }
.d-wm-text { white-space: pre; line-height: 1.2; user-select: none; }
.d-wm img { max-width: 100%; max-height: 100%; }
/* the right-click menu (Docs: 320px wide, 32px rows, 18px icons at 12px, labels at 38px) */
.menu-pop.ctx-menu { min-width: 320px; }
.menu-pop.ctx-menu .menu-item { padding: 6px 15px 6px 12px; min-height: 32px; box-sizing: border-box; font-size: 14px; }
.menu-pop.ctx-menu .menu-check { width: 18px; margin-right: 8px; color: #444746; }
.menu-pop.ctx-menu .menu-key { font-weight: 500; color: rgba(31, 31, 31, .38); }
.react-pop { padding: 4px 8px 8px; width: 288px; }
.react-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 220px; overflow: auto; }
.react-btn { font-size: 20px; height: 34px; border-radius: 6px; }
.react-btn:hover { background: var(--hover); }

/* ===== GM3 components (web/src/gm3.ts), as measured in Docs (analysis/docs/DIALOGS.md) ===== */
:root { --gm-font: 'Google Sans Flex', 'Google Sans', Roboto, Arial, sans-serif; --gm-primary: #0b57d0; --gm-on: #1f1f1f; --gm-muted: #444746; --gm-outline: #747775; }
.gm-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .32); display: grid; place-items: center; z-index: 300; }
.gm-dialog { background: #fff; border-radius: 28px; min-width: 280px; max-width: 560px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; font-family: var(--gm-font); color: var(--gm-on); box-sizing: border-box; overflow: hidden; }
.gm-dialog.high { background: #e9eef6; }
.gm-dialog-head { display: flex; align-items: flex-start; padding: 24px 24px 16px; gap: 8px; }
.gm-dialog-head .gm-icon-btn { margin: -4px -8px 0 auto; }
.gm-dialog-title { margin: 0; font: 400 24px/32px var(--gm-font); color: var(--gm-on); flex: 1; }
.gm-dialog-body { padding: 0 24px 20px; overflow: auto; font-size: 14px; display: flex; flex-direction: column; gap: 16px; }
.gm-dialog-actions { display: flex; align-items: center; gap: 8px; padding: 4px 24px 24px; min-height: 40px; }
.gm-dialog-actions .grow { flex: 1; }
.gm-btn { height: 40px; border-radius: 20px; font: 500 14px/20px var(--gm-font); letter-spacing: .1px; padding: 0 12px; min-width: 64px; border: 0; background: transparent; color: var(--gm-primary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.gm-btn:hover { background: rgba(11, 87, 208, .08); }
.gm-btn.gm-filled { background: var(--gm-primary); color: #fff; padding: 0 24px; }
.gm-btn.gm-filled:hover { background: #1f63d4; box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px 1px rgba(0, 0, 0, .15); }
.gm-btn.gm-outlined { border: 1px solid var(--gm-outline); padding: 0 24px; }
.gm-btn.gm-tonal { background: #c2e7ff; color: #001d35; padding: 0 24px; }
.gm-btn:disabled, .gm-btn:disabled:hover { color: rgba(31, 31, 31, .38); background: transparent; box-shadow: none; cursor: default; }
.gm-btn.gm-filled:disabled, .gm-btn.gm-tonal:disabled { background: rgba(31, 31, 31, .12); }
.gm-icon-btn { width: 40px; height: 40px; border-radius: 20px; border: 0; background: transparent; color: var(--gm-muted); display: grid; place-items: center; cursor: pointer; flex: none; }
.gm-icon-btn:hover { background: rgba(68, 71, 70, .08); }
.gm-section { font: 500 14px/20px 'Google Sans', var(--gm-font); color: var(--gm-on); }
.gm-text { margin: 0; font: 400 14px/20px var(--gm-font); color: var(--gm-muted); }
.gm-text a, .gm-link { color: var(--gm-primary); }
/* outlined text field: 56px (label in the border) or 40px; focus = 3px primary */
.gm-field { position: relative; display: flex; align-items: center; height: 56px; box-sizing: border-box; border: 1px solid var(--gm-outline); border-radius: 4px; padding: 0 16px; background: transparent; cursor: text; }
.gm-field.dense { height: 40px; padding: 0 12px; }
.gm-field.multi { height: auto; padding: 12px 16px; align-items: flex-start; }
.gm-field:hover { border-color: var(--gm-on); }
.gm-field:focus-within { border-color: var(--gm-primary); box-shadow: inset 0 0 0 2px var(--gm-primary); }
.gm-field input, .gm-field textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 16px/24px 'Google Sans', var(--gm-font); color: var(--gm-on); padding: 0; resize: vertical; }
.gm-field.dense input { font-size: 14px; }
.gm-float { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); padding: 0 4px; background: #fff; font: 400 16px/20px var(--gm-font); color: var(--gm-muted); pointer-events: none; transition: all .12s; }
.gm-dialog.high .gm-float { background: #e9eef6; }
.gm-field.floating:focus-within .gm-float, .gm-field.floating input:not(:placeholder-shown) ~ .gm-float { top: 0; font-size: 12px; line-height: 16px; }
.gm-field.floating:focus-within .gm-float { color: var(--gm-primary); }
.gm-suffix { font: 400 14px/20px var(--gm-font); color: #5f6368; margin-left: 4px; }
.gm-field-wrap { display: flex; flex-direction: column; gap: 8px; }
.gm-above { font: 500 12px/16px 'Google Sans', var(--gm-font); color: var(--gm-muted); }
/* selects and their menu surface */
.gm-select { height: 40px; box-sizing: border-box; border: 1px solid var(--gm-outline); border-radius: 4px; background: transparent; display: flex; align-items: center; padding: 0 4px 0 16px; font: 400 16px/24px 'Google Sans', var(--gm-font); color: var(--gm-on); cursor: pointer; text-align: left; width: 100%; }
.gm-select:hover { border-color: var(--gm-on); }
.gm-select:focus-visible { outline: 0; border-color: var(--gm-primary); box-shadow: inset 0 0 0 2px var(--gm-primary); }
.gm-select-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-select-arrow { display: grid; place-items: center; color: var(--gm-muted); width: 24px; height: 24px; }
.gm-menu { position: fixed; z-index: 400; background: #fff; border-radius: 4px; padding: 8px 0; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .15); max-height: calc(100vh - 16px); overflow: auto; box-sizing: border-box; min-width: 112px; font-family: var(--gm-font); }
.gm-option { height: 48px; display: flex; align-items: center; padding: 0 16px; font: 400 16px/24px 'Google Sans', var(--gm-font); color: var(--gm-on); cursor: pointer; white-space: nowrap; outline: 0; }
.gm-option:hover, .gm-option:focus { background: rgba(31, 31, 31, .08); }
.gm-option.on { background: #e1e3e1; }
.gm-option.disabled { color: rgba(31, 31, 31, .38); cursor: default; background: transparent; }
/* checkboxes, radios: 18 / 20px in a 36-48px touch area */
.gm-check, .gm-radio { display: inline-flex; align-items: center; gap: 4px; font: 400 16px/24px var(--gm-font); color: var(--gm-on); cursor: pointer; min-height: 44px; }
.gm-check.muted > span:last-child { color: var(--gm-muted); }
.gm-touch { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 18px; flex: none; }
.gm-radio .gm-touch { width: 48px; height: 48px; border-radius: 24px; margin: -2px 0; }
.gm-touch:hover { background: rgba(31, 31, 31, .08); }
.gm-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--gm-primary); cursor: pointer; }
.gm-radio input { width: 20px; height: 20px; margin: 0; accent-color: var(--gm-primary); cursor: pointer; }
.gm-check:has(input:disabled) { cursor: default; }
.gm-check:has(input:disabled) > span:last-child { color: rgba(31, 31, 31, .38); }
/* primary tabs */
.gm-tabs { display: flex; border-bottom: 1px solid #c4c7c5; }
.gm-tab { flex: 1; height: 47px; border: 0; background: transparent; font: 500 14px/20px var(--gm-font); color: var(--gm-muted); cursor: pointer; display: flex; justify-content: center; align-items: stretch; padding: 0 16px; }
.gm-tab:hover { background: rgba(31, 31, 31, .08); }
.gm-tab-label { display: flex; align-items: center; position: relative; }
.gm-tab.on { color: var(--gm-primary); }
.gm-tab.on .gm-tab-label::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--gm-primary); }
/* the colour button and its picker */
.gm-color-btn { width: 82px; height: 40px; box-sizing: border-box; border: 1px solid var(--gm-outline); border-radius: 4px; background: transparent; display: flex; align-items: center; justify-content: space-between; padding: 0 4px 0 12px; cursor: pointer; }
.gm-color-btn:hover { border-color: var(--gm-on); }
.gm-color-chip { width: 20px; height: 20px; border-radius: 10px; box-sizing: border-box; border: 1px solid transparent; }
.gm-color-chip.light, .gm-color-chip.none { border-color: #c4c5c7; }
.gm-color-chip.none { background: linear-gradient(135deg, transparent 45%, #d93025 45%, #d93025 55%, transparent 55%) !important; }
.gm-menu.gm-picker { border-radius: 16px; padding: 12px; width: 260px; }
.gm-picker-head { font: 500 14px/20px 'Google Sans', var(--gm-font); color: var(--gm-muted); margin: 0 0 8px; }
.gm-picker-head:not(:first-child) { margin-top: 12px; }
.gm-swatches { display: grid; grid-template-columns: repeat(10, 20px); gap: 4px; }
.gm-swatch { width: 20px; height: 20px; border-radius: 10px; border: 1px solid transparent; padding: 0; cursor: pointer; position: relative; box-sizing: border-box; }
.gm-swatch.light { border-color: #c4c5c7; }
.gm-swatch:hover { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--gm-outline); }
.gm-swatch.on::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: #fff; font-weight: 700; }
.gm-swatch.on.light::after { color: #1f1f1f; }
.gm-swatch.tool { background: #f0f4f9; display: grid; place-items: center; color: var(--gm-muted); overflow: hidden; }
.gm-color-input { position: absolute; opacity: 0; width: 0; height: 0; }
.gm-transparent { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px 0 8px; border: 1px solid var(--gm-outline); border-radius: 16px; background: transparent; font: 500 14px var(--gm-font); color: var(--gm-muted); margin-bottom: 12px; cursor: pointer; }
.gm-transparent.on { background: #d3e3fd; border-color: transparent; color: #041e49; }
/* side sheets: a 320px card on the right under the title bar; the document narrows beside it */
.gm-sheet { position: fixed; top: 65px; right: 16px; bottom: 16px; width: 320px; z-index: 40; font-family: var(--gm-font); }
.gm-sheet-card { height: 100%; background: #f0f4f9; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; }
.gm-sheet-head { height: 56px; flex: none; display: flex; align-items: center; padding: 0 8px 0 16px; gap: 12px; }
.gm-sheet-icon { display: grid; place-items: center; color: var(--gm-muted); }
.gm-sheet-title { flex: 1; font: 500 16px/24px 'Google Sans', var(--gm-font); color: var(--gm-muted); }
.gm-sheet-body { flex: 1; overflow: auto; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--gm-on); }
body.has-sheet .d-toolbar-wrap, body.has-sheet .d-main { margin-right: 336px; }
.gm-acc { background: #fff; border-radius: 12px; overflow: hidden; }
.gm-acc-head { width: 100%; height: 48px; border: 0; background: transparent; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 16px; font: 500 14px/20px 'Google Sans', var(--gm-font); color: var(--gm-muted); cursor: pointer; }
.gm-acc-head:hover { background: rgba(68, 71, 70, .08); }
.gm-acc-body { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.gm-spin { display: inline-flex; align-items: center; height: 40px; box-sizing: border-box; border: 1px solid var(--gm-outline); border-radius: 4px; padding: 0 4px 0 12px; background: #fff; }
.gm-spin:focus-within { border-color: var(--gm-primary); box-shadow: inset 0 0 0 2px var(--gm-primary); }
.gm-spin input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 14px/20px var(--gm-font); color: var(--gm-on); }
.gm-spin-btns { display: flex; flex-direction: column; margin-left: 2px; }
.gm-spin-btns button { width: 20px; height: 16px; border: 0; background: transparent; display: grid; place-items: center; color: var(--gm-muted); cursor: pointer; padding: 0; }
/* File-menu dialogs (gfile.ts) */
.gps-body { display: flex; flex-direction: column; gap: 16px; }
.gps-part { display: flex; flex-direction: column; gap: 16px; }
.gps-group { display: flex; flex-direction: column; gap: 8px; }
.gps-row { display: flex; gap: 16px; align-items: flex-end; }
.gps-row > .gps-group:first-child { flex: 1; }
.gps-radios { display: flex; gap: 8px; }
.gps-margins { display: flex; gap: 16px; }
.gps-margins .gm-field { font-size: 16px; }
.gps-margins .gm-field input { font-size: 16px; }
.gps-art { width: 348px; height: 260px; box-sizing: border-box; border: 1px solid #c4c7c5; border-radius: 12px; overflow: hidden; }
.gm-section.big { font-size: 16px; }
.gcopy-body { display: flex; flex-direction: column; gap: 24px; padding-top: 8px; }
.gcopy-folder { align-self: flex-start; }
.gcopy-checks { display: flex; flex-direction: column; padding-left: 4px; }
.gdet { display: flex; flex-direction: column; gap: 32px; padding: 12px 0 16px; }
.gdet-row { display: grid; grid-template-columns: 72px 1fr; font: 400 14px/20px var(--gm-font); color: var(--gm-on); }
.gdet-loc { display: inline-flex; align-items: center; gap: 4px; }
.gpub { display: flex; flex-direction: column; gap: 16px; }
.gpub-pane { padding-top: 4px; }
.gpub-out { display: flex; flex-direction: column; gap: 12px; }
.gpub-code { height: 40px; border: 1px solid var(--gm-outline); border-radius: 4px; padding: 0 12px; font: 400 14px var(--gm-font); }
.gpub-toggle { color: var(--gm-muted); align-self: flex-start; padding-left: 8px; }
.gpub-tri { display: grid; place-items: center; width: 24px; height: 24px; }
.gpub-settings { display: flex; flex-direction: column; gap: 4px; padding-left: 16px; }
.gm-dialog.legacy { border-radius: 8px; }
.gm-dialog.legacy .gm-dialog-title { font: 400 22px/28px 'Google Sans', var(--gm-font); }
.gmail { display: flex; flex-direction: column; gap: 8px; }
.grcpt-wrap { position: relative; }
.grcpt { min-height: 48px; box-sizing: border-box; border: 1px solid var(--gm-outline); border-radius: 4px; padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; cursor: text; }
.grcpt:focus-within { border-color: var(--gm-primary); box-shadow: inset 0 0 0 1px var(--gm-primary); }
.grcpt-input { flex: 1; min-width: 120px; border: 0; outline: 0; font: 400 14px/20px var(--gm-font); background: transparent; }
.grcpt-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 4px 0 4px; border: 1px solid #c4c7c5; border-radius: 16px; font: 500 14px var(--gm-font); }
.grcpt-chip .avatar { width: 24px; height: 24px; font-size: 12px; }
.grcpt-chip button { border: 0; background: transparent; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 10px; cursor: pointer; }
.grcpt-list { position: absolute; left: 0; right: 0; top: calc(100% + 2px); }
.gm-field.notched .gm-float, .gm-float.notched { top: 0; font-size: 12px; line-height: 16px; color: var(--gm-muted); }
.gm-field.notched:focus-within .gm-float { color: var(--gm-primary); }
.gm-select-wrap { position: relative; }
.gm-select-wrap .gm-float { left: 12px; }
.gm-select-wrap .gm-select { font-size: 16px; }
.gm-check.small { font-size: 14px; }
.gm-check.muted:has(input:disabled) > span:last-child { color: var(--gm-muted); }
.gm-field.multi textarea { resize: none; }
.gcopy-body { padding-top: 20px; }
.gmail { gap: 12px; padding-top: 8px; }
.gmail .grcpt-input { font-size: 14px; }
.gpub { gap: 20px; }
.gpub > .gm-tabs { margin-top: -20px; }
.gpub-toggle { margin: -4px 0 12px; padding-left: 4px; gap: 4px; }
.gdet { gap: 32px; padding: 0 0 36px; margin-top: -11px; }
.gsec { display: flex; flex-direction: column; gap: 8px; }
.gsec-card { background: #fff; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.gsec-title { font: 500 13px/20px 'Google Sans', var(--gm-font); color: var(--gm-on); }
.gsec-sub { font: 400 12px/16px var(--gm-font); color: var(--gm-muted); }
.gsec-item { font: 400 13px/20px var(--gm-font); color: var(--gm-on); }
.gm-sheet.plain .gm-sheet-card { background: #fff; border-radius: 0; box-shadow: -1px 0 0 #e3e3e3; }
.gm-sheet.plain .gm-sheet-head { border-bottom: 1px solid #c4c7c5; padding-left: 20px; }
.gm-sheet.plain .gm-sheet-title { color: var(--gm-on); }
.gm-sheet.plain .gm-sheet-body { padding-top: 20px; }
.gm-sheet.plain .gsec-card { background: #f0f4f9; }
/* Ctrl+F bar and 찾기 및 바꾸기 (gfind.ts): GM3 cards without a scrim */
.gfind-bar { position: fixed; top: 113px; right: 44px; z-index: 60; width: 408px; height: 72px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: #fff; border-radius: 12px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .3), 0 1px 3px 1px rgba(0, 0, 0, .15); font-family: var(--gm-font); }
body.has-sheet .gfind-bar { right: 380px; }
.gfind-bar .gm-field { width: 208px; flex: none; margin-right: 4px; }
.gfind-count { font: 400 16px/24px var(--gm-font); color: var(--gm-muted); margin-left: 8px; white-space: nowrap; }
.gfind-ic { width: 32px; height: 32px; border-radius: 16px; border: 0; background: transparent; display: grid; place-items: center; color: var(--gm-muted); cursor: pointer; flex: none; }
.gfind-ic:hover:not(:disabled) { background: rgba(68, 71, 70, .08); }
.gfind-ic:disabled { color: rgba(31, 31, 31, .38); opacity: 1; }
.gfind-card { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 60; width: 396px; box-sizing: border-box; padding: 24px; background: #fff; border-radius: 28px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .3), 0 1px 3px 1px rgba(0, 0, 0, .15); font-family: var(--gm-font); display: flex; flex-direction: column; }
.gfind-head { display: flex; align-items: center; justify-content: space-between; margin: -8px -16px 16px 0; cursor: move; }
.gfind-head .gm-dialog-title { line-height: 24px; }
.gfind-fields { display: flex; flex-direction: column; gap: 24px; }
.gfind-checks { display: flex; flex-direction: column; margin: 12px 0 20px; }
.gfind-checks .gm-check { align-items: center; }
.gfind-checks .gm-check > span:last-child { margin-left: 4px; }
.gfind-actions { display: flex; justify-content: space-between; }
.gm-btn .ic, .gm-icon-btn .ic, .gfind-ic .ic, .gm-select-arrow .ic, .gm-sheet-icon .ic, .gm-swatch .ic, .gm-acc-head .ic, .gm-spin-btns .ic, .gm-transparent .ic, .gm-color-btn .ic, .gdet-loc .ic, .gpub-tri .ic { color: inherit; }
/* 삽입 > 이미지 > URL 사용: the older Picker dialog */
.giu-scrim { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, .6); display: grid; place-items: center; }
.giu { width: 502px; box-sizing: border-box; background: #fff; border-radius: 8px; padding: 25px 33px 24px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15); font-family: Roboto, Arial, sans-serif; display: flex; flex-direction: column; }
.giu-title { font: 400 18px/22px Roboto, Arial, sans-serif; color: #1f1f1f; margin-bottom: 24px; }
.giu-input { border: 0; border-bottom: 1px solid #c4c7c5; outline: 0; font: 400 14px/24px Roboto, Arial, sans-serif; padding: 0 0 1px; width: 404px; color: #1f1f1f; }
.giu-input:focus { border-bottom: 2px solid #0b57d0; padding-bottom: 0; }
.giu-note { font: 400 10px/14px Roboto, Arial, sans-serif; color: #444746; margin-top: 8px; }
.giu-preview { position: relative; margin-top: 12px; max-height: 260px; overflow: hidden; display: flex; justify-content: center; }
.giu-preview img { max-width: 100%; max-height: 240px; }
.giu-x { position: absolute; right: 0; top: 0; width: 50px; height: 36px; border: 0; background: rgba(255, 255, 255, .8); display: grid; place-items: center; cursor: pointer; }
.giu-spin { width: 28px; height: 28px; border: 3px solid #c2d5f7; border-top-color: #0b57d0; border-radius: 50%; animation: giu-spin 1s linear infinite; margin: 12px; }
@keyframes giu-spin { to { transform: rotate(360deg); } }
.giu-err { font: 400 13px Roboto, Arial, sans-serif; color: #b3261e; padding: 8px 0; }
.giu-actions { display: flex; justify-content: flex-end; gap: 24px; margin-top: 30px; }
.giu-btn { height: 36px; padding: 0 20px; min-width: 76px; border: 1px solid #c4c7c5; border-radius: 4px; background: #fff; font: 500 14px Roboto, Arial, sans-serif; color: #0b57d0; cursor: pointer; }
.giu-btn:disabled { color: rgba(31, 31, 31, .38); opacity: 1; cursor: default; }
.giu-btn:not(:disabled):hover { background: #f8fafd; }
/* the smart link popover */
.glp { position: fixed; z-index: 250; width: 324px; min-height: 348px; box-sizing: border-box; background: #fff; border-radius: 12px; display: flex; flex-direction: column;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15); font-family: var(--gm-font); }
.glp-main { flex: 1; padding: 16px 16px 0; display: flex; flex-direction: column; gap: 8px; }
.glp-line { display: flex; align-items: center; gap: 12px; }
.glp-field { display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 12px; width: 216px; box-sizing: border-box; border: 1px solid #747775; border-radius: 8px; color: var(--gm-muted); }
.glp-field:focus-within { border: 2px solid var(--gm-primary); padding: 0 11px; }
.glp-field .ic { color: inherit; }
.glp-in { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 14px/20px 'Google Sans', var(--gm-font); color: var(--gm-on); }
.glp-apply { height: 32px; min-width: 64px; border-radius: 16px; }
.glp-list { display: flex; flex-direction: column; margin: 0 -11px; overflow: auto; max-height: 220px; }
.glp-row { display: flex; align-items: center; gap: 16px; min-height: 28px; padding: 4px 16px; cursor: pointer; color: var(--gm-muted); font: 400 14px/20px 'Google Sans', var(--gm-font); }
.glp-row.tall { min-height: 44px; }
.glp-row:hover { background: rgba(31, 31, 31, .08); }
.glp-row .ic { color: inherit; flex: none; }
.glp-row-text { display: flex; flex-direction: column; min-width: 0; }
.glp-row-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gm-on); }
.glp-row-sub { font-size: 12px; color: var(--gm-muted); }
.glp-head { font: 500 12px/16px 'Google Sans', var(--gm-font); color: var(--gm-muted); padding: 12px 16px 4px; }
.glp-back { display: flex; align-items: center; gap: 12px; border: 0; background: transparent; font: 500 14px 'Google Sans', var(--gm-font); color: var(--gm-muted); padding: 4px 0; cursor: pointer; }
.glp-back .ic { color: inherit; }
.glp-foot { height: 52px; flex: none; border: 0; border-top: 1px solid #e3e3e3; background: transparent; border-radius: 0 0 12px 12px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
  font: 500 14px/20px var(--gm-font); color: var(--gm-muted); cursor: pointer; }
.glp-foot:hover { background: rgba(31, 31, 31, .08); }
.glp-foot .ic { color: inherit; }
/* the link preview bubble */
.glb { position: fixed; z-index: 240; width: 324px; height: 53px; box-sizing: border-box; display: flex; align-items: center; gap: 4px; padding: 0 10px 0 16px; background: #fff; border-radius: 8px;
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .15); font-family: var(--gm-font); }
.glb-fav { width: 20px; height: 20px; border-radius: 10px; background: #c4c7c5; display: grid; place-items: center; overflow: hidden; flex: none; margin-right: 8px; color: #fff; }
.glb-fav img { width: 16px; height: 16px; }
.glb-fav:has(img) { background: transparent; }
.glb-url { font: 500 14px/20px 'Google Sans', var(--gm-font); color: var(--gm-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.glb-url:hover { text-decoration: underline; }
.glb .grow { flex: 1; }
/* the date picker bubble */
.gdp { position: fixed; z-index: 250; width: 279px; box-sizing: border-box; padding: 10px 10px 12px; background: #fff; border-radius: 4px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .15); font-family: 'Google Sans', var(--gm-font); }
.gdp-head { display: flex; align-items: center; height: 24px; margin-bottom: 8px; gap: 17px; }
.gdp-head .grow { flex: 1; }
.gdp-title { font: 500 14px/20px 'Google Sans', var(--gm-font); color: var(--gm-muted); }
.gdp-nav { width: 20px; height: 20px; border-radius: 10px; border: 0; background: transparent; display: grid; place-items: center; color: var(--gm-muted); cursor: pointer; padding: 0; }
.gdp-nav .ic { color: inherit; }
.gdp-grid { display: grid; grid-template-columns: repeat(7, 37px); }
.gdp-dow { height: 28px; display: grid; place-items: center; font: 400 12px 'Google Sans', var(--gm-font); color: var(--gm-on); }
.gdp-day { height: 28px; border: 0; background: transparent; font: 400 12px 'Google Sans', var(--gm-font); color: var(--gm-on); cursor: pointer; position: relative; z-index: 0; padding: 0; }
.gdp-day::before { content: ''; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 13px; z-index: -1; }
.gdp-day:hover::before { background: rgba(31, 31, 31, .08); }
.gdp-day.other { color: #9aa0a6; }
.gdp-day.picked::before { background: #d3e3fd; }
.gdp-day.today { color: #fff; }
.gdp-day.today::before { background: var(--gm-primary); }
.gdp-today { margin: 8px 0 0; height: 32px; border: 0; background: transparent; border-radius: 2px; color: var(--gm-primary); font: 500 14px 'Google Sans', var(--gm-font); padding: 0 6px; cursor: pointer; }
.gdp-sep { height: 1px; background: #c4c7c5; margin: 12px -10px; }
.gdp-time-row { display: flex; align-items: center; gap: 12px; color: var(--gm-muted); }
.gdp-time-row .ic { color: inherit; flex: none; margin: 0 4px 0 2px; }
.gdp-time { width: 130px; height: 36px; box-sizing: border-box; border: 0; border-bottom: 1px solid #747775; border-radius: 4px 4px 0 0; background: #e3e8ee; padding: 0 8px; font: 400 14px 'Google Sans', var(--gm-font); color: var(--gm-on); }
.gdp-zone { width: 77px; height: 36px; border: 0; border-bottom: 1px solid #c4c7c5; border-radius: 4px 4px 0 0; background: #e9e9e9; font: 400 14px 'Google Sans', var(--gm-font); color: var(--gm-muted); text-align: left; padding: 0 8px; }
.gdp-zone:disabled { color: rgba(31, 31, 31, .38); background: #f1f1f1; opacity: 1; }
.gdp-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
/* the dropdown menu and its options dialog */
.gdd { position: fixed; z-index: 250; width: 320px; box-sizing: border-box; padding: 8px 0; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .15); font-family: Roboto, Arial, sans-serif; }
.gdd-head { font: 500 11px/16px Roboto, Arial, sans-serif; color: var(--gm-muted); padding: 12px 16px; }
.gdd-item { height: 32px; display: flex; align-items: center; gap: 12px; padding: 0 16px; font: 400 14px Roboto, Arial, sans-serif; color: #1f1f1f; cursor: pointer; }
.gdd-item:hover { background: rgba(31, 31, 31, .1); }
.gdd-item .ic { color: #1f1f1f; }
.gdd-preview { position: absolute; left: calc(100% + 4px); width: 220px; padding: 12px; box-sizing: border-box; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .15); display: flex; flex-wrap: wrap; gap: 6px; }
.gdd-preview-head { width: 100%; font: 500 11px Roboto, Arial, sans-serif; color: var(--gm-muted); }
.gdd-chip { display: inline-block; padding: 2px 10px; border-radius: 12px; font: 500 12px/18px Roboto, Arial, sans-serif; }
.gddo { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.gddo .gm-field.floating { height: 44px; }
.gddo-rows { display: flex; flex-direction: column; gap: 8px; margin: 8px -12px 0; }
.gddo-row { display: flex; align-items: center; gap: 4px; }
.gddo-row.dragging { opacity: .5; }
.gddo-row .gm-field { height: 44px; }
.gddo-drag { cursor: grab; }
.gddo-color { height: 44px; }
.gddo-add { align-self: flex-start; margin-left: -12px; }
.gddo-pal { display: grid; grid-template-columns: repeat(6, 20px); gap: 6px; padding: 10px; border-radius: 8px; }
.gdp-time-wrap { position: relative; }
.gdp-time::placeholder { color: var(--gm-muted); }
.gdp-times { position: absolute; left: 0; bottom: 100%; width: 160px; max-height: 240px; z-index: 260; }
.gdp-times .gm-option { height: 36px; font-size: 14px; }
.gdp-sep { margin: 8px -10px 10px; }
.gdp-actions { margin-top: 8px; }
/* the 등식 toolbar, its menus and an equation being edited */
.geq-bar { display: flex; align-items: center; height: 41px; box-sizing: border-box; padding: 0 4px 0 22px; background: #fff; border-bottom: 1px solid #e3e3e3; gap: 2px; font-family: Roboto, Arial, sans-serif; }
.geq-new { height: 30px; padding: 0 2px; border: 0; background: transparent; border-radius: 4px; font: 500 14px Roboto, Arial, sans-serif; color: #444746; cursor: pointer; }
.geq-menu-btn { height: 30px; min-width: 44px; display: inline-flex; align-items: center; gap: 0; border: 0; background: transparent; border-radius: 4px; padding: 0 2px; font: 400 14px 'Cambria Math', 'Times New Roman', serif; color: #1f1f1f; cursor: pointer; }
.geq-menu-btn .ic { color: inherit; }
.geq-bar:not(.active) .geq-menu-btn { color: rgba(31, 31, 31, .38); cursor: default; }
.geq-new:hover, .geq-bar.active .geq-menu-btn:hover, .geq-close:hover { background: rgba(68, 71, 70, .08); }
.geq-bar .grow { flex: 1; }
.geq-close { width: 30px; height: 30px; border: 0; background: transparent; border-radius: 4px; display: grid; place-items: center; color: #444746; cursor: pointer; }
.geq-close .ic { color: inherit; }
.menu-pop.geq-pop { padding: 6px 4px; min-width: 0; }
.geq-grid { display: grid; gap: 0; }
.geq-cell { width: 20px; height: 20px; border: 0; background: transparent; font: 400 14px 'Cambria Math', 'Times New Roman', serif; color: #1f1f1f; cursor: pointer; border-radius: 2px; padding: 0; }
.geq-cell:hover { background: rgba(31, 31, 31, .1); }
.geq-cell.math { width: 32px; height: 56px; font-size: 13px; display: grid; place-items: center; }
.geq-edit { position: fixed; z-index: 250; background: #fff; border-radius: 8px; padding: 6px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .15); }
.geq-input { width: 280px; height: 32px; box-sizing: border-box; border: 1px solid #747775; border-radius: 4px; padding: 0 8px; font: 400 14px 'Roboto Mono', monospace; outline: 0; }
.geq-input:focus { border: 2px solid #0b57d0; padding: 0 7px; }
.pm-equation.empty { display: inline-block; min-width: 24px; height: 1.1em; background: #e8eaed; vertical-align: middle; border-radius: 2px; }
.pm-equation .eq-subsup { display: inline-flex; flex-direction: column; vertical-align: middle; font-size: .7em; line-height: 1; }
.pm-equation .eq-subsup sup, .pm-equation .eq-subsup sub { vertical-align: baseline; font-size: 1em; }
.pm-equation .eq-root { font-size: .55em; margin-right: -.4em; vertical-align: .9em; }
.pm-equation .eq-over { text-decoration: overline; }
.pm-equation .eq-hat { position: relative; display: inline-block; }
.pm-equation .eq-hat::before { content: '^'; position: absolute; left: 0; right: 0; top: -.55em; text-align: center; font-size: .8em; }
.pm-equation .eq-brk { display: inline-flex; align-items: center; }
.pm-equation .eq-fence { font-size: 1.3em; font-style: normal; transform: scaleY(1.2); }
.pm-equation .eq-op { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1; margin: 0 .1em; font-style: normal; }
.pm-equation .eq-op .eq-sym { font-size: 1.6em; line-height: 1; }
.pm-equation .eq-op.lim .eq-sym { font-size: 1em; }
.pm-equation .eq-op .eq-up, .pm-equation .eq-op .eq-lo { font-size: .6em; min-height: .6em; }
.pm-equation .eq-op.int { flex-direction: row; align-items: center; }
.pm-equation .eq-op.int .eq-up { order: 2; align-self: flex-start; }
.pm-equation .eq-op.int .eq-sym { order: 1; }
.pm-equation .eq-op.int .eq-lo { order: 3; align-self: flex-end; margin-left: -.2em; }

/* ===== phones (≤ 720px): an app bar, a toolbar that scrolls sideways, the text reflowed to the screen ===== */
.d-mobile-only { display: none; }
@media (max-width: 720px) {
  .d-mobile-only { display: grid; }
  body.in-editor { overscroll-behavior: none; }
  /* app bar: logo, title, undo / redo / comments / share / ⋮ */
  .d-titlebar { height: 56px !important; flex-wrap: nowrap !important; align-items: center; padding: 0 4px 0 0; gap: 0; }
  .d-logo { width: 48px; height: 56px; margin-right: 0; }
  .d-logo .app-logo svg { width: 28px; height: 28px; }
  .d-title-col { flex: 1; min-width: 0; padding-top: 0; }
  .d-title-row { height: 40px; }
  .d-title-wrap { min-width: 0; max-width: 100%; overflow: hidden; }
  .d-title { max-width: 100% !important; text-overflow: ellipsis; font-size: 16px; }
  .d-title-row > :not(.d-title-wrap) { display: none; }
  .d-menubar { display: none !important; }
  .d-titlebar > .grow { display: none; }
  .d-people, .d-round-btn, .d-titlebar > .acct, .d-share-arrow { display: none !important; }
  .d-titlebar .d-icon-btn.d-mobile-only { width: 40px; height: 40px; flex: none; }
  .d-share { margin: 0 2px; height: 36px; }
  .d-share-main { padding: 0 10px; gap: 0; }
  .d-share-main span { display: none; }
  .d-mobile-menu { min-width: 240px; }
  /* the toolbar: one row that scrolls sideways */
  .d-toolbar-wrap { padding: 0 0 6px !important; }
  .toolbar { border-radius: 0 !important; overflow-x: auto !important; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 0 4px !important; }
  .toolbar::-webkit-scrollbar { display: none; }
  .toolbar > * { flex: none; }
  .toolbar .grow, .toolbar .tb-search, .toolbar .tb-hide, .toolbar .tb-desktop { display: none !important; }
  .toolbar .tb-desktop + .tb-sep { display: none; }
  /* the document: no rulers, outline or margin comments; text to the width of the screen */
  .d-hruler, .d-vruler, .d-side, .d-overlay, .d-pages { display: none !important; }
  /* comments: the one being written or opened comes up from the bottom; the others stay in 모든 댓글 */
  .d-comments { display: none; }
  .d-comments:has(.c-card.draft), .d-comments:has(.c-card.active) { display: block; position: fixed !important; left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto !important; z-index: 70;
    max-height: 60vh; overflow: auto; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -2px 8px rgba(0, 0, 0, .2); padding: 8px 0; }
  .d-comments .c-card { position: static !important; margin: 8px 12px; width: auto !important; box-shadow: none !important; }
  .d-comments .c-card:not(.active):not(.draft), .d-comments .c-add-float { display: none !important; }
  .d-canvas { padding: 0 !important; min-width: 0 !important; display: block !important; }
  .d-zoom { zoom: 1 !important; margin: 0 !important; }
  .d-zoom.pageless.mobile { width: 100% !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box; padding: 16px 16px 120px !important; box-shadow: none !important; }
  .d-zoom.mobile .pm-doc .ProseMirror { padding: 0 !important; min-height: 60vh !important; }
  .d-zoom.mobile .pm-doc table { max-width: 100%; }
  .d-zoom.mobile .pm-image img { max-width: calc(100vw - 32px); height: auto !important; }
  .d-scroll { overflow-x: hidden; }
  /* the comments panel and side sheets come up over the document */
  .d-cpanel { position: fixed !important; left: 0; right: 0; bottom: 0; top: 56px; width: auto !important; z-index: 60; }
  .gm-sheet { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto !important; height: 72vh; }
  .gm-sheet-card { border-radius: 16px 16px 0 0; box-shadow: 0 -2px 8px rgba(0, 0, 0, .15); }
  body.has-sheet .d-toolbar-wrap, body.has-sheet .d-main { margin-right: 0 !important; }
  /* dialogs, cards and bubbles inside the screen */
  .gm-dialog { width: auto !important; min-width: 0 !important; max-width: calc(100vw - 32px) !important; max-height: calc(100vh - 32px); }
  .gm-dialog-body { overflow: auto; }
  .gps-art { width: 100%; height: auto; }
  .gps-art svg { width: 100%; height: auto; }
  .gps-margins { flex-wrap: nowrap; gap: 8px; }
  .gps-margins > .gm-field-wrap { flex: 1; min-width: 0; }
  .gps-margins .gm-field { width: 100% !important; }
  .h-top .grow { display: none; }
  .gfind-bar { left: 8px !important; right: 8px !important; width: auto !important; top: 104px; }
  .gfind-bar .gm-field { width: auto; flex: 1; }
  .gfind-card { width: calc(100vw - 16px) !important; }
  .glp, .glb, .gdp, .gdd, .giu, .geq-edit { max-width: calc(100vw - 16px); box-sizing: border-box; }
  .giu { width: calc(100vw - 16px); padding: 20px; }
  .giu-input { width: 100%; }
  .gdd-preview { display: none !important; }
  .menu-pop { max-width: calc(100vw - 8px); }
  .menu-pop.ctx-menu { min-width: 0; width: calc(100vw - 32px); max-width: 320px; }
  .geq-bar { padding-left: 8px; overflow-x: auto; }
  .img-bar { max-width: calc(100vw - 16px); overflow-x: auto; }
  .gps-row { flex-wrap: wrap; }
  .gps-row > .gps-group:first-child { flex: 1 1 100%; }
  .gps-row .gm-select { width: 100% !important; }
  /* home: brand mark only, the search box takes the rest */
  .h-top { gap: 8px; padding: 8px; }
  .h-brand { padding-right: 0; }
  .h-brand-name { display: none; }
  .h-search { width: auto; flex: 1; min-width: 0; height: 44px; }
  .h-top .acct { flex: none; }
  /* touch: bigger hit areas for menu rows */
  .menu-item { min-height: 40px; }
}
/* 특수문자 삽입: the older non-modal dialog */
.gsc { position: fixed; z-index: 260; width: 604px; box-sizing: border-box; padding: 15px 21px 21px; background: #fff; border-radius: 8px; box-shadow: 0 4px 8px 3px rgba(0, 0, 0, .15); font-family: Roboto, Arial, sans-serif; color: #1f1f1f; }
.gsc-title { display: flex; align-items: center; justify-content: space-between; height: 32px; margin-bottom: 12px; cursor: move; }
.gsc-title span { font: 400 22px/28px 'Google Sans', Roboto, sans-serif; color: #1f1f1f; }
.gsc-x { width: 45px; height: 45px; margin: -14px -20px 0 0; border: 0; background: transparent; display: grid; place-items: center; color: #444746; cursor: pointer; }
.gsc-x .ic { color: inherit; }
.gsc-dds { display: flex; gap: 8px; margin-bottom: 12px; }
.gsc-dd { height: 38px; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px 0 12px; border: 1px solid #c4c7c5; border-radius: 4px; background: #fff; font: 400 14px Roboto, Arial, sans-serif; color: #1f1f1f; cursor: pointer; }
.gsc-dd .ic { color: #444746; }
.gsc-main { display: flex; gap: 16px; }
.gsc-grid { display: grid; grid-template-columns: repeat(10, 25px); grid-auto-rows: 25px; width: 268px; height: 300px; overflow-y: auto; overflow-x: hidden; border: 1px solid #c4c7c5; align-content: start; }
.gsc-cell { width: 25px; height: 25px; box-sizing: border-box; border: 0; border-right: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; background: #fff; font: 400 14px Roboto, 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif; color: #1f1f1f; cursor: pointer; padding: 0; display: grid; place-items: center; overflow: hidden; }
.gsc-cell:hover { background: #e8f0fe; outline: 1px solid #4285f4; z-index: 1; }
.gsc-side { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gsc-search-box { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px; border: 1px solid #c4c7c5; border-radius: 2px; color: #1f1f1f; }
.gsc-search-box:focus-within { border-color: #4285f4; box-shadow: 0 0 0 1px #4285f4; }
.gsc-search-box .ic { color: inherit; flex: none; }
.gsc-search { flex: 1; min-width: 0; border: 0; outline: 0; font: 400 14px Roboto, Arial, sans-serif; }
.gsc-show { flex: 1; border: 1px solid #c4c7c5; position: relative; display: grid; place-items: center; }
.gsc-draw { position: absolute; inset: 20px; border: 3px dashed #c4c7c5; display: grid; place-items: center; font: 400 18px 'Google Sans', Roboto, sans-serif; color: #5f6368; }
.gsc-big { font: 400 96px/1 Roboto, 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif; color: #1f1f1f; }
.gsc-cp { position: absolute; bottom: 10px; font: 400 13px Roboto, Arial, sans-serif; color: #5f6368; }
/* the emoji picker bubble */
.gep { position: fixed; z-index: 260; width: 370px; height: 404px; box-sizing: border-box; padding-top: 4px; background: #fff; border-radius: 8px; box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15); display: flex; flex-direction: column; font-family: 'Google Sans', Roboto, sans-serif; }
.gep-search { display: flex; align-items: center; gap: 8px; height: 38px; margin: 8px 8px 0; padding: 0 12px; border: 1px solid #c4c7c5; border-radius: 20px; color: #444746; }
.gep-search .ic { color: inherit; }
.gep-search-in { flex: 1; border: 0; outline: 0; font: 400 16px 'Google Sans', Roboto, sans-serif; background: transparent; }
.gep-tabs { display: flex; justify-content: space-between; padding: 10px 13px 4px; }
.gep-tab { width: 36px; height: 36px; border-radius: 18px; border: 0; background: transparent; display: grid; place-items: center; color: #444746; cursor: pointer; position: relative; }
.gep-tab .ic { color: inherit; }
.gep-tab.on { background: #f1f3f4; color: #0b57d0; }
.gep-tab.on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -4px; height: 3px; border-radius: 2px; background: #0b57d0; }
.gep-list { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 0 0 4px; }
.gep-head { font: 500 11px/16px 'Google Sans', Roboto, sans-serif; color: #444746; padding: 12px 6px 8px; }
.gep-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); justify-items: center; }
.gep-cell { width: 40px; height: 40px; border: 0; border-radius: 20px; background: transparent; font: 400 26px/1 'Noto Color Emoji', 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif; cursor: pointer; padding: 0; display: grid; place-items: center; }
.gep-cell:hover { background: #f1f3f4; }
.gep-none { padding: 24px; text-align: center; color: #5f6368; font-size: 14px; }
.gep-bottom { display: grid; grid-template-columns: repeat(9, 40px); padding: 4px; border-top: 1px solid #e3e3e3; }
.gep-more { color: #757575; }
.gep-more .ic { color: inherit; }
@media (max-width: 720px) {
  .gsc { width: calc(100vw - 16px); left: 8px !important; }
  .gsc-main { flex-direction: column; }
  .gsc-show { display: none; }
  .gsc-grid { width: auto; height: 40vh; }
  .gep { width: calc(100vw - 16px); }
  .gep-grid, .gep-bottom { grid-template-columns: repeat(auto-fill, 40px); justify-content: space-between; }
}
/* picture tiles in menus: 목차 styles, 페이지 번호 positions */
.gpal { display: grid; gap: 0; padding: 6px 8px; }
.gpal.toc { grid-template-columns: repeat(3, 58px); }
.gpal.pnum { grid-template-columns: repeat(2, 80px); }
.gpal-tile { border: 3px solid transparent; background: transparent; padding: 0; cursor: pointer; display: grid; place-items: center; }
.gpal-tile.toc { width: 58px; height: 76px; }
.gpal-tile.pnum { width: 80px; height: 90px; }
.gpal-tile .gpal-art { display: grid; place-items: center; border: 1px solid #c4c7c5; background: #fff; }
.gpal-tile.toc .gpal-art { width: 52px; height: 70px; }
.gpal-tile.pnum .gpal-art { width: 74px; height: 84px; }
.gpal-tile:hover .gpal-art { border-color: #747775; }
.pm-toc .toc-gap { flex: 1; }
/* 페이지 번호 dialog */
.gpn { display: flex; flex-direction: column; gap: 4px; }
.gpn-col { display: flex; flex-direction: column; margin-bottom: 12px; }
.gpn-col .gm-radio, .gpn-col .gm-check { font-size: 14px; min-height: 44px; }
.gpn-start { display: flex; align-items: center; gap: 12px; }
.gm-radio.muted { color: var(--gm-muted); }
/* 북마크 bubble */
.gbm { position: fixed; z-index: 250; display: flex; align-items: center; gap: 2px; height: 32px; padding: 0 4px 0 12px; background: #fff; border-radius: 16px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .3), 0 1px 3px 1px rgba(0, 0, 0, .15); font-family: 'Google Sans', var(--gm-font); }
.gbm-label { font: 500 14px/20px 'Google Sans', var(--gm-font); color: var(--gm-muted); margin-right: 6px; }
.gbm-btn { width: 24px; height: 24px; border-radius: 12px; border: 0; background: transparent; display: grid; place-items: center; color: var(--gm-muted); cursor: pointer; padding: 0; }
.gbm-btn .ic { color: inherit; }
.gbm-btn:hover { background: rgba(68, 71, 70, .08); }
/* 워터마크 side sheet */
.gwm { display: flex; flex-direction: column; gap: 12px; min-height: 100%; }
.gwm .gm-tabs { margin: 0 16px; border-bottom-color: transparent; }
.gwm .gm-tab.on { background: #dfe7f5; }
.gwm-pane { display: flex; flex-direction: column; gap: 12px; }
.gwm-pane.off .gm-section { color: var(--gm-on); }
.gwm-pick { width: 288px; height: 288px; border: 0; border-radius: 12px; background: #e9eef6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font: 500 14px 'Google Sans', var(--gm-font); color: var(--gm-on); cursor: pointer; overflow: hidden; }
.gwm-pick .ic { color: var(--gm-muted); }
.gwm-pick img { max-width: 100%; max-height: 100%; }
.gwm-count { align-self: flex-end; font: 400 12px var(--gm-font); color: var(--gm-muted); margin-top: -8px; }
.gwm-row { display: flex; align-items: center; gap: 8px; }
.gwm-size { min-width: 32px; height: 40px; padding: 0 16px; border: 1px solid #747775; border-radius: 4px; display: grid; place-items: center; font: 400 14px var(--gm-font); }
.gwm-pane.off .gwm-size { border-color: rgba(31, 31, 31, .12); color: rgba(31, 31, 31, .38); }
.gwm-tog[aria-pressed="true"] { background: #d3e3fd; }
.gwm-range { flex: 1; accent-color: #0b57d0; }
.gwm-places { display: flex; gap: 8px; }
.gwm-place { width: 90px; height: 90px; border: 2px solid transparent; border-radius: 8px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font: 500 11px 'Google Sans', var(--gm-font); color: var(--gm-muted); }
.gwm-place.on { border-color: #0b57d0; }
.gwm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; padding-top: 16px; }
.gwm-delete { width: 100%; }
.d-wm.front { z-index: 4; }
.gwm-size { width: 64px; box-sizing: border-box; padding: 0; white-space: nowrap; }
.gm-spin input { min-width: 24px; }
.gm-spin .gm-suffix { flex: none; }
.gwm-more { padding-left: 0; }
/* Format-menu dialogs (gformat.ts) */
.gfo-borders { display: flex; flex-direction: column; gap: 0; }
.gfo-row { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.gfo-poss { display: flex; gap: 2px; }
.gfo-pos { width: 44px; height: 44px; border: 1px solid #c4c7c5; border-radius: 4px; background: #fff; display: grid; place-items: center; color: var(--gm-muted); cursor: pointer; padding: 0; }
.gfo-pos .ic { color: inherit; }
.gfo-pos.on { background: #d3e3fd; color: #041e49; border-color: #d3e3fd; }
.gm-color-btn.wide { width: 110px; }
.gfo-dash { display: inline-flex; align-items: center; }
.gfo-indent, .gfo-spacing, .gfo-hf, .gfo-orient { display: flex; flex-direction: column; gap: 16px; }
.gfo-pair { display: flex; gap: 16px; }
.gm-select.tall { height: 56px; }
.gfo-cols { display: flex; flex-direction: column; }
.gfo-crow { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font: 400 14px var(--gm-font); color: var(--gm-muted); }
.gfo-crow .gm-check > span:last-child { display: none; }
.gfo-checks { display: flex; flex-direction: column; }
.gfo-checks .gm-radio { font-size: 14px; }
.gpal.cols { grid-template-columns: repeat(3, 80px); }
.gpal-tile.on .gpal-art { border: 2px solid #747775; }
.gfo-glyphs { padding: 6px 30px; }
.gfo-grow { display: flex; gap: 0; }
.gfo-glyph { width: 45px; height: 30px; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; padding: 0; font: 400 16px Roboto, Arial, sans-serif; color: #1f1f1f; position: relative; }
.gfo-glyph::before { content: ''; position: absolute; width: 24px; height: 24px; border: 1px solid #c4c7c5; }
.gfo-glyph:hover::before { border-color: #747775; background: rgba(31, 31, 31, .06); }
.gfo-sep { height: 1px; background: #c4c7c5; margin: 6px -30px; }
.gfo-wsample { display: inline-block; width: 30px; border-top: 1px solid #1f1f1f; }
.gfo-dash-item { width: 100%; border: 0; background: transparent; }