/* =========================================================================
   JEIL 오피스 v1.1.0 화면 스타일 (style.css 다음에 불러옵니다)
   - 색·간격 토큰, 밝게/어둡게 테마
   - 새 홈 화면, 한 줄로 정리한 편집 화면 머리, 명령 찾기·찾기 막대·대화상자
   - v1.0.7의 10~11px 글자를 읽기 쉬운 크기로 키움
   ========================================================================= */
:root {
  --brand: #1f4d3f;
  --brand-strong: #183e35;
  --brand-ink: #ffffff;
  --accent: #c3ec93;
  --bg: #f4f6f2;
  --surface: #ffffff;
  --surface-2: #f8faf6;
  --surface-3: #eef2ea;
  --hover: #eef3ea;
  --line: #e3e8df;
  --line-strong: #d3dbcf;
  --ink: #1f2f28;
  --ink-2: #44554c;
  --muted: #6f7d74;
  --focus: #2f7d5b;
  --danger: #c4413b;
  --shadow-sm: 0 1px 2px #1a2e2410, 0 1px 1px #1a2e2408;
  --shadow-md: 0 8px 24px #1a2e2414, 0 2px 6px #1a2e240c;
  --shadow-lg: 0 24px 80px #0b1d1530;
  --workspace: #e9ede6;
  --c-hwp: #2a72d6; --c-hwp-bg: #e6f0fd;
  --c-doc: #4565c9; --c-doc-bg: #ebeffb;
  --c-sheet: #2c8650; --c-sheet-bg: #e5f3ea;
  --c-slides: #cf6a2e; --c-slides-bg: #fcefe5;
  --c-pdf: #cf4242; --c-pdf-bg: #fcebea;
  --c-text: #7f62bd; --c-text-bg: #f0ebfa;
  --c-image: #a0782a; --c-image-bg: #f8f0dd;
  --c-other: #6f7d74; --c-other-bg: #eef1ec;
  --radius: 10px;
  --doc-zoom: 1;
  font-family: "Pretendard", "Segoe UI Variable Text", "Segoe UI", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --brand: #8fd19e;
  --brand-strong: #a6e0b2;
  --brand-ink: #0f1f17;
  --accent: #b7e38a;
  --bg: #111517;
  --surface: #181d20;
  --surface-2: #1d2327;
  --surface-3: #242b30;
  --hover: #252d31;
  --line: #2a3237;
  --line-strong: #364047;
  --ink: #e4ebe7;
  --ink-2: #c3cec8;
  --muted: #8e9c95;
  --focus: #8fd19e;
  --danger: #ff7b72;
  --shadow-sm: 0 1px 2px #0006;
  --shadow-md: 0 8px 24px #0008;
  --shadow-lg: 0 24px 80px #000a;
  --workspace: #0d1012;
  --c-hwp-bg: #1b2c45; --c-doc-bg: #1f2744; --c-sheet-bg: #18352a; --c-slides-bg: #3a2618; --c-pdf-bg: #3b1d1d; --c-text-bg: #2a2340; --c-image-bg: #352b16; --c-other-bg: #262d31;
  --c-hwp: #74abf5; --c-doc: #8fa6f0; --c-sheet: #6fcf93; --c-slides: #f0a06c; --c-pdf: #f28b82; --c-text: #b9a2f0; --c-image: #e0b862; --c-other: #a5b2ab;
  color-scheme: dark;
}
body { background: var(--bg); color: var(--ink); font-size: 14px; -webkit-font-smoothing: antialiased; }
::selection { background: #b9e39a88; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button:hover { filter: none; }
svg { width: 18px; height: 18px; }
kbd { font: 600 11px/1 "Segoe UI", system-ui, sans-serif; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; padding: 3px 6px; color: var(--muted); background: var(--surface); white-space: nowrap; }

/* ---------- 버튼 ---------- */
.primary, .secondary, .danger { padding: 9px 15px; border-radius: 8px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; justify-content: center; transition: background .15s, border-color .15s, box-shadow .15s; }
.primary { background: var(--brand); color: var(--brand-ink); border: 1px solid transparent; box-shadow: var(--shadow-sm); }
.primary:hover { background: var(--brand-strong); }
.secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
.secondary:hover { background: var(--hover); }
.danger { background: var(--danger); color: #fff; border: 1px solid transparent; }
.primary svg, .secondary svg { width: 17px; height: 17px; }
.icon-btn { padding: 7px; border-radius: 8px; color: var(--ink-2); display: inline-grid; place-items: center; }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn:disabled { opacity: .35; }
.badge { font-size: 11px; background: var(--surface-3); color: var(--muted); padding: 3px 7px; border-radius: 6px; font-weight: 600; }

/* ---------- 형식 아이콘 ---------- */
.file-icon { background: var(--c-doc-bg); color: var(--c-doc); font-family: "Segoe UI", system-ui, sans-serif; }
.file-icon.hwp { background: var(--c-hwp-bg); color: var(--c-hwp); }
.file-icon.sheet { background: var(--c-sheet-bg); color: var(--c-sheet); }
.file-icon.slides { background: var(--c-slides-bg); color: var(--c-slides); }
.file-icon.pdf { background: var(--c-pdf-bg); color: var(--c-pdf); }
.file-icon.text { background: var(--c-text-bg); color: var(--c-text); }
.file-icon.image { background: var(--c-image-bg); color: var(--c-image); }
.file-icon.other { background: var(--c-other-bg); color: var(--c-other); }

/* =========================================================================
   홈
   ========================================================================= */
.shell { grid-template-columns: 244px 1fr; background: var(--bg); }
.sidebar { width: 244px; padding: 22px 14px 16px; background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; }
.brand { padding: 0 8px 20px; font-size: 21px; gap: 9px; color: var(--ink); }
.brand img { width: 32px; }
.brand span { font-weight: 500; margin-left: 2px; }
.side-open { width: 100%; padding: 11px; margin-bottom: 16px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.nav { padding: 9px 12px; font-size: 13.5px; gap: 11px; margin: 0; color: var(--ink-2); border-radius: 8px; }
.nav svg { width: 18px; color: var(--muted); }
.nav:hover { background: var(--hover); }
.nav.active { background: var(--surface-3); color: var(--ink); font-weight: 700; }
.nav.active svg { color: var(--brand); }
.nav .count { background: transparent; color: var(--muted); font-size: 12px; font-weight: 500; padding: 0; }
.nav .dot { width: 10px; height: 10px; border-radius: 3px; margin: 0 4px; background: var(--c-other); flex: none; }
.dot.hwp { background: var(--c-hwp); } .dot.doc { background: var(--c-doc); } .dot.sheet { background: var(--c-sheet); }
.dot.slides { background: var(--c-slides); } .dot.pdf { background: var(--c-pdf); } .dot.text { background: var(--c-text); }
.side-label { font-size: 11.5px; letter-spacing: 0; font-weight: 600; color: var(--muted); margin: 18px 12px 6px; }
.local-box { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; line-height: 1.55; padding: 12px; color: var(--muted); }
.local-box svg { color: var(--brand); flex: none; margin-top: 1px; }
.local-box strong { color: var(--ink-2); font-size: 12.5px; margin-bottom: 2px; }
.side-tools { display: flex; align-items: center; gap: 2px; padding: 12px 2px 0; }
.side-tools .badge { margin-left: auto; }

.topbar { height: 64px; padding: 0 40px; gap: 14px; background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 4; justify-content: flex-start; }
.search { flex: 1; max-width: 560px; width: auto; padding: 9px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; color: var(--muted); }
.search:focus-within { border-color: var(--focus); background: var(--surface); box-shadow: 0 0 0 3px #2f7d5b22; }
.search input { font-size: 14px; color: var(--ink); outline: none; }
.search kbd { font-size: 11px; }
.cmd-btn { margin-left: auto; }
.content { max-width: 1240px; padding: 30px 40px 40px; }
.greeting { margin-bottom: 18px; align-items: flex-end; }
.eyebrow { font-size: 13px; letter-spacing: 0; font-weight: 600; color: var(--brand); }
:root[data-theme="dark"] .eyebrow { color: var(--brand); }
h1 { font-size: 26px; letter-spacing: -.6px; margin: 4px 0 0; color: var(--ink); }
h2 { font-size: 17px; color: var(--ink); }
.drop-hint { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 10px; padding: 9px 13px; }
.drop-hint svg { width: 16px; }

.new-strip { display: grid; grid-template-columns: repeat(8, minmax(118px, 1fr)); gap: 12px; margin-bottom: 8px; }
.create-card { min-height: 0; padding: 10px 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 3px; transition: transform .15s, box-shadow .15s, border-color .15s; }
.create-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.create-card strong { font-size: 13px; margin-top: 8px; color: var(--ink); }
.create-card small { font-size: 11.5px; color: var(--muted); }
.thumb-art { position: relative; display: block; height: 84px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.thumb-art .file-icon { position: absolute; left: 10px; top: 10px; width: 30px; height: 34px; font-size: 15px; border-radius: 6px; }
.thumb-art i { position: absolute; left: 48px; right: 12px; height: 6px; border-radius: 3px; background: var(--line); }
.thumb-art i:nth-of-type(1) { top: 16px; } .thumb-art i:nth-of-type(2) { top: 30px; right: 26px; } .thumb-art i:nth-of-type(3) { top: 54px; left: 12px; }
.thumb-art.sheet i { left: 12px; right: 12px; height: 9px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--c-sheet-bg) 0 24%, transparent 24% 25%); }
.thumb-art.sheet i:nth-of-type(1) { top: 50px; } .thumb-art.sheet i:nth-of-type(2) { top: 62px; right: 12px; } .thumb-art.sheet i:nth-of-type(3) { top: 74px; }
.thumb-art.slides::after { content: ""; position: absolute; left: 48px; right: 12px; top: 12px; bottom: 12px; border-radius: 4px; background: var(--c-slides-bg); }
.thumb-art.slides i { display: none; }
.thumb-art.tpl em { position: absolute; right: 8px; bottom: 7px; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--brand); background: var(--surface); border: 1px solid var(--line); padding: 1px 6px; border-radius: 10px; z-index: 1; }


.section-head.docs-head { margin: 30px 0 12px; flex-wrap: wrap; }
.docs-head h2 span { color: var(--muted); font-weight: 500; font-size: 14px; margin-left: 4px; }
.recent-toolbar { gap: 10px; flex-wrap: wrap; }
.chips { display: flex; gap: 4px; background: var(--surface-3); padding: 3px; border-radius: 9px; }
.chip { font-size: 12.5px; padding: 6px 11px; border-radius: 7px; color: var(--muted); border: 0; }
.chip:hover { color: var(--ink); }
.chip.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); font-weight: 600; }
#homeSort { font-size: 12.5px; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.seg button { padding: 6px 9px; color: var(--muted); display: grid; place-items: center; }
.seg button.active { background: var(--surface-3); color: var(--ink); }
.seg svg { width: 16px; height: 16px; }

.file-list.list { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.file-list .table-heading, .file-list .file-row { display: grid; grid-template-columns: minmax(240px, 1fr) 76px minmax(110px, 170px) 128px 74px; gap: 14px; align-items: center; padding: 9px 18px; }
.file-list .table-heading { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.group-head { padding: 12px 18px 4px; font-size: 12px; font-weight: 700; color: var(--muted); border-top: 1px solid var(--line); }
.table-heading + .group-head { border-top: 0; }
.file-list .file-row { min-height: 58px; border-bottom: 0; border-radius: 0; }
.file-list .file-row:hover { background: var(--hover); }
.file-main { gap: 12px; color: var(--ink); }
.file-main .file-icon { width: 30px; height: 36px; font-size: 14px; }
.file-name { min-width: 0; }
.file-main strong { font-size: 14px; font-weight: 600; color: var(--ink); }
.file-main small { font-size: 12px; color: var(--muted); margin-top: 3px; }
.file-row .meta { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.format-pill { font-size: 11px; font-weight: 700; letter-spacing: .3px; padding: 3px 7px; border-radius: 5px; background: var(--c-other-bg); color: var(--c-other); }
.format-pill.hwp { background: var(--c-hwp-bg); color: var(--c-hwp); } .format-pill.doc { background: var(--c-doc-bg); color: var(--c-doc); }
.format-pill.sheet { background: var(--c-sheet-bg); color: var(--c-sheet); } .format-pill.slides { background: var(--c-slides-bg); color: var(--c-slides); }
.format-pill.pdf { background: var(--c-pdf-bg); color: var(--c-pdf); } .format-pill.text { background: var(--c-text-bg); color: var(--c-text); }
.row-actions { display: flex; justify-content: flex-end; gap: 2px; }
.star-btn { padding: 6px; border-radius: 7px; color: var(--line-strong); display: grid; place-items: center; opacity: .0; transition: opacity .12s; }
.file-row:hover .star-btn, .doc-card:hover .star-btn, .star-btn.on, .star-btn:focus-visible { opacity: 1; }
.star-btn:hover { background: var(--hover); color: var(--muted); }
.star-btn.on { color: #e3a008; }
.star-btn.on svg { fill: currentColor; }

.file-list.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.doc-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: box-shadow .15s, border-color .15s; }
.doc-card:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.doc-card .file-main { display: flex; flex-direction: column; align-items: stretch; width: 100%; padding: 10px 10px 12px; gap: 0; text-align: left; }
.doc-card .file-main strong { margin-top: 10px; font-size: 13.5px; }
.doc-card .file-main small { margin-top: 4px; }
.card-art { position: relative; display: block; height: 116px; border-radius: 8px; background: var(--c-other-bg); overflow: hidden; }
.card-art.hwp { background: var(--c-hwp-bg); } .card-art.doc { background: var(--c-doc-bg); } .card-art.sheet { background: var(--c-sheet-bg); }
.card-art.slides { background: var(--c-slides-bg); } .card-art.pdf { background: var(--c-pdf-bg); } .card-art.text { background: var(--c-text-bg); }
.card-art .file-icon { position: absolute; left: 12px; bottom: 12px; width: 34px; height: 40px; box-shadow: var(--shadow-sm); background: var(--surface) !important; }
.card-art i { position: absolute; left: 22%; right: 12%; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.card-art i:nth-of-type(1) { top: 18px; } .card-art i:nth-of-type(2) { top: 32px; right: 24%; } .card-art i:nth-of-type(3) { top: 46px; } .card-art i:nth-of-type(4) { top: 60px; right: 36%; }
.doc-card .star-btn { position: absolute; top: 14px; right: 44px; background: var(--surface); }
.doc-card .more { position: absolute; top: 14px; right: 12px; background: var(--surface); opacity: 0; }
.doc-card:hover .more, .doc-card .more:focus-visible { opacity: 1; }

.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 20px; color: var(--muted); font-size: 13px; line-height: 1.6; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: 12px; text-align: center; }
.empty > svg { width: 34px; height: 34px; color: var(--line-strong); }
.empty strong { color: var(--ink); font-size: 15px; }
.empty .primary { margin-top: 8px; }
.footer { font-size: 12px; color: var(--muted); gap: 20px; flex-wrap: wrap; margin-top: 26px; }

/* =========================================================================
   편집 화면
   ========================================================================= */
.editor { background: var(--workspace); }
.editor-head { min-height: 56px; padding: 6px 12px 6px 8px; gap: 10px; background: var(--surface); border-bottom: 1px solid var(--line); }
.editor-head > .file-icon { width: 30px; height: 34px; font-size: 14px; border-radius: 7px; }
.doc-name { font-size: 15px; color: var(--ink); padding: 3px 6px; margin-left: -6px; border-radius: 6px; max-width: 520px; }
.doc-name:hover { background: var(--hover); }
.doc-name:focus { background: var(--surface-2); outline: 2px solid var(--focus); outline-offset: 0; }
.title-meta { display: flex; gap: 10px; align-items: center; min-width: 0; }
.save-status { font-size: 12px; color: var(--muted); margin: 0; white-space: nowrap; }
.save-status.pending { color: #b4690e; }
:root[data-theme="dark"] .save-status.pending { color: #f0b45c; }
.source-info { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.source-info::before { content: "·"; margin-right: 10px; }
.head-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.head-actions .primary, .head-actions .secondary { padding: 8px 12px; }
.vsep { width: 1px; height: 22px; background: var(--line); margin: 0 6px; }
.toolbar { padding: 6px 14px; min-height: 46px; gap: 4px; background: var(--surface); border-bottom: 1px solid var(--line); color: var(--ink); }
.tool { font-size: 13px; padding: 6px 9px; border-radius: 6px; color: var(--ink-2); }
.tool:hover { background: var(--hover); border-color: transparent; }
.tool.active { background: var(--surface-3); border-color: var(--line-strong); color: var(--ink); font-weight: 600; }
.toolbar select, .toolbar input:not([type="checkbox"]) { font-size: 13px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 6px; padding: 5px 6px; }
.toolbar label { font-size: 12.5px; color: var(--muted); }
.sep { background: var(--line); }
.format-mode { border-right: 1px solid var(--line); padding-right: 6px; margin-right: 4px; }
.notice-wrap { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); color: var(--muted); }
.notice-wrap > svg { width: 16px; height: 16px; flex: none; color: var(--brand); }
.notice-wrap .notice { flex: 1; background: none; border: 0; padding: 0; font-size: 12.5px; color: var(--muted); }
.notice-wrap.collapsed { display: none; }
.notice-close { font-size: 18px; line-height: 1; padding: 2px 8px; border-radius: 6px; color: var(--muted); }
.notice-close:hover { background: var(--hover); }
.workspace { padding: 28px; }
.paper { zoom: var(--doc-zoom); box-shadow: 0 1px 3px #0000001a, 0 8px 30px #0000000d; color: #1f2a24; font-size: 15px; }
.text-editor { font-size: calc(14px * var(--doc-zoom)); background: var(--surface); color: var(--ink); border-radius: 8px; box-shadow: var(--shadow-sm); }
.statusbar { padding: 4px 12px 4px 16px; min-height: 30px; align-items: center; font-size: 12px; color: var(--muted); background: var(--surface); border-top: 1px solid var(--line); }
.status-right { display: flex; align-items: center; gap: 10px; }
.link-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); padding: 3px 6px; border-radius: 6px; }
.link-btn svg { width: 14px; height: 14px; }
.link-btn:hover { background: var(--hover); color: var(--ink); }
.zoom-ctl { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.zoom-ctl button { padding: 2px 9px; font-size: 13px; color: var(--ink-2); }
.zoom-ctl button:hover { background: var(--hover); }
#zoomLabel { min-width: 54px; font-size: 12px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }

/* 스프레드시트 */
.formula-bar { background: var(--surface); border-bottom: 1px solid var(--line); padding: 5px 14px; font-size: 13px; color: var(--ink); }
.formula-bar #cellAddress { font-family: "Cascadia Mono", Consolas, monospace; font-size: 12.5px; padding: 4px 8px; width: auto; min-width: 72px; text-align: center; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface-2); }
.formula-bar .fx { color: var(--muted); font-style: italic; font-family: Georgia, serif; }
.formula-bar input { font-size: 13.5px; color: var(--ink); background: transparent; font-family: "Cascadia Mono", Consolas, "Malgun Gothic", monospace; }
.sheet-area { background: var(--surface-2); }
.jeil-sheet { background: #fff; color: #1f2a24; font-size: 13px; }
.jeil-sheet th { background: #f2f4f0; color: #6b776f; font-size: 12px; cursor: default; user-select: none; }
.jeil-sheet th.hdr-on { background: #dcecdf; color: #1d4a33; font-weight: 700; }
.jeil-sheet td { border-color: #e4e8e1; }
.jeil-sheet td.num { text-align: right; }
.jeil-sheet td:focus { outline: 2px solid #217346; outline-offset: -2px; background: #fff; }
.jeil-sheet td.in-range { background: #e3f1e6 !important; }
.jeil-sheet td.in-range:focus { background: #fff !important; }
.jeil-sheet tr[data-pad] td, .jeil-sheet td[data-pad] { background: #fff; }
.sheet-tabs { background: var(--surface); border-top: 1px solid var(--line); padding: 4px 10px; align-items: center; }
.sheet-tabs button { font-size: 12.5px; padding: 6px 14px; color: var(--ink-2); }
.sheet-tabs button:hover { background: var(--hover); }
.sheet-tabs .active { background: var(--surface-3); color: var(--c-sheet); font-weight: 700; box-shadow: inset 0 -2px 0 var(--c-sheet); }
.sheet-tabs .sheet-add { font-size: 16px; padding: 3px 10px; color: var(--muted); }
.selection-stats { margin-left: auto; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; padding-left: 16px; font-variant-numeric: tabular-nums; }

/* 슬라이드: 화면 높이에 맞춰 잘리지 않게 */
.slides-layout { grid-template-columns: 188px 1fr; }
.slide-list { background: var(--surface); border-right: 1px solid var(--line); }
.thumb { border: 1px solid var(--line); background: #fff; color: #33433a; box-shadow: var(--shadow-sm); }
.thumb.active { border: 2px solid var(--c-slides); }
.slide-stage { container-type: size; display: grid; place-items: center; padding: 24px; min-height: 0; }
.slide-canvas { width: min(100%, calc((100cqh - 8px) * 16 / 9)); min-width: 320px; box-shadow: 0 1px 3px #0000001f, 0 12px 40px #00000014; }
.presentation .slide-canvas { width: min(100vw, calc(100dvh * 16 / 9)); max-width: none; }
.presentation .notice-wrap { display: none !important; }
.presentation .slide-stage { container-type: normal; cursor: none; }

/* PDF · 한글 */
.pdf-container { box-shadow: 0 1px 3px #0000001f, 0 10px 30px #00000014; }
.hwp-area { background: var(--workspace); }

/* =========================================================================
   찾기 막대
   ========================================================================= */
.find-bar { position: fixed; top: 108px; right: 22px; z-index: 30; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-md); padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 420px; }
.find-row { display: flex; align-items: center; gap: 4px; }
.find-bar input:not([type="checkbox"]) { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface-2); color: var(--ink); font-size: 13.5px; outline: none; }
.find-bar input:focus { border-color: var(--focus); }
.find-bar.no-match #findInput { border-color: var(--danger); }
.find-count { font-size: 12px; color: var(--muted); min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
.find-opt { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; padding: 0 4px; }
::highlight(jeil-find) { background-color: #ffe58a; color: inherit; }
::highlight(jeil-find-current) { background-color: #ff9d3b; color: #000; }

/* =========================================================================
   대화상자 · 명령 찾기 · 알림
   ========================================================================= */
dialog { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: 24px; border-radius: 14px; }
dialog::backdrop { background: #0b1a1450; backdrop-filter: blur(2px); }
dialog h2 { font-size: 18px; margin-bottom: 10px; }
dialog p { color: var(--muted); font-size: 13.5px; line-height: 1.7; }
dialog th, dialog td { border-color: var(--line); font-size: 12.5px; }
.export-grid button { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
.export-grid button:hover { background: var(--hover); border-color: var(--focus); }
.export-grid button small { color: var(--muted); font-size: 12px; }
.export-destination select { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 6px; padding: 5px; }
.jeil-layer { width: 460px; }
.confirm-dialog p { margin: 0 0 4px; }
.choice-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.choice { justify-content: flex-start !important; text-align: left; flex-direction: column; align-items: flex-start !important; gap: 2px !important; padding: 11px 14px !important; }
.choice small { font-weight: 400; font-size: 12px; opacity: .8; }
.choice.secondary:hover { border-color: var(--focus); }
.palette-dialog { width: 620px; padding: 0; overflow: hidden; margin-top: 12vh; }
.palette-search { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.palette-search input { flex: 1; border: 0; outline: none; background: transparent; color: var(--ink); font-size: 16px; }
.palette-list { max-height: min(56vh, 460px); overflow-y: auto; padding: 6px; }
.palette-group { font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 10px 10px 4px; }
.palette-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border-radius: 8px; text-align: left; color: var(--ink); font-size: 14px; }
.palette-item.active { background: var(--surface-3); }
.palette-item .file-icon { width: 22px; height: 26px; font-size: 11px; border-radius: 5px; }
.palette-item > svg { color: var(--muted); }
.palette-item .pl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-item .pl small { color: var(--muted); font-size: 12px; margin-left: 8px; }
.palette-empty { padding: 26px; text-align: center; color: var(--muted); font-size: 13px; }
.palette-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); background: var(--surface-2); }
.palette-foot kbd { margin-right: 3px; }
.shortcuts-dialog { width: 760px; }
.shortcut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; }
.shortcut-grid h3 { font-size: 13px; color: var(--brand); margin: 12px 0 6px; }
.shortcut-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; }

#toast { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; background: #1d3a2f; color: #fff; font-size: 13.5px; border-radius: 10px; box-shadow: var(--shadow-md); pointer-events: none; }
#toast.show { pointer-events: auto; }
#toast.error { background: #7a2421; }
:root[data-theme="dark"] #toast { background: #2a3a33; border: 1px solid #3a4a43; }
:root[data-theme="dark"] #toast.error { background: #5a1e1b; }
.toast-action { font-weight: 700; color: var(--accent); padding: 5px 9px; border-radius: 6px; white-space: nowrap; }
.toast-action:hover { background: #ffffff1a; }
.toast-close { color: #ffffffb0; font-size: 18px; line-height: 1; padding: 3px 8px; border-radius: 6px; }
.toast-close:hover { background: #ffffff1a; color: #fff; }

.dropzone { background: color-mix(in srgb, var(--surface) 90%, transparent); border: 3px dashed var(--focus); color: var(--ink); font-size: 15px; }
.dropzone > div { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dropzone svg { width: 46px; height: 46px; color: var(--focus); }
.dropzone strong { font-size: 22px; }
.dropzone span { color: var(--muted); }

/* ---------- 어두운 테마: 기존 고정 색 보정 ---------- */
:root[data-theme="dark"] .hwp-format-controls select, :root[data-theme="dark"] .font-tools select, :root[data-theme="dark"] .font-tools input { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
:root[data-theme="dark"] .hwp-table-tools, :root[data-theme="dark"] .format-edit-tools { color: var(--ink); }
:root[data-theme="dark"] .thumb-art i { background: var(--line-strong); }

/* ---------- 좁은 창 ---------- */
@media (max-width: 1280px) { .new-strip { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1100px) {
  .head-actions .secondary span, .head-actions .primary span { display: none; }
  .file-list .table-heading, .file-list .file-row { grid-template-columns: minmax(200px, 1fr) 70px 110px 74px; }
  .where-col { display: none; }
  .drop-hint { display: none; }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { grid-column: 1; }
  .topbar, .content { padding-left: 16px; padding-right: 16px; }
  .new-strip { grid-template-columns: repeat(2, 1fr); }
  .source-info, .theme-btn, .head-actions .vsep, .print-btn { display: none; }
  .find-bar { left: 12px; right: 12px; min-width: 0; }
}

/* ---------- 인쇄 ---------- */
@media print {
  .notice-wrap, .find-bar, #toast { display: none !important; }
  .paper { zoom: 1; }
  .editor { background: #fff; }
}
.exit-present { display: none !important; }
.presentation .exit-present { display: inline-flex !important; position: fixed; right: 16px; top: 16px; z-index: 10; opacity: .2; transition: opacity .2s; }
.presentation .exit-present:hover { opacity: 1; }
.hwp-area .document-spacer { margin: 0 auto; }
.hwp-area { padding-top: 20px; }
.hwp-area img#hwpPageImage { box-shadow: 0 1px 3px #0000001f, 0 10px 30px #00000014; background: #fff; }
/* 워드 도구 모음을 한 줄(리본형)로 정리: 보기/편집 전환 + 서식 도구 */
.format-mode { width: auto; border-bottom: 0; padding-bottom: 0; display: inline-flex; gap: 2px; border-right: 1px solid var(--line); padding-right: 8px; margin-right: 4px; }
.format-edit-tools { width: auto; flex: 1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.font-tools { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
dialog::backdrop { backdrop-filter: blur(1px); background: #0b1a1440; }
.toolbar select { max-width: 150px; }
.font-tools label { display: inline-flex; align-items: center; gap: 4px; }
.font-tools input[type="number"] { width: 58px; }
.icon-tool { min-width: 32px; display: inline-grid; place-items: center; font-size: 14px; }
.icon-tool svg { width: 17px; height: 17px; }
.icon-tool b { font-weight: 800; } .icon-tool i { font-style: italic; font-family: Georgia, 'Malgun Gothic', serif; }
.palette-dialog::backdrop, .confirm-dialog::backdrop, .shortcuts-dialog::backdrop { backdrop-filter: none; background: #0b1a1452; }
/* ---------- 휴대폰 화면 (웹 버전) ---------- */
.mobile-open { display: none; }
@media (max-width: 760px) {
  .mobile-open { display: inline-flex; padding: 9px 11px; }
  .cmd-btn { margin-left: 0; padding: 9px 11px; }
  .cmd-btn { font-size: 0; gap: 0; }
  .cmd-btn svg { margin: 0; }
  .topbar { gap: 8px; height: 58px; }
  .greeting h1 { font-size: 22px; }
  .new-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 6px; margin: 0 -16px 4px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
  .new-strip::-webkit-scrollbar { display: none; }
  .new-strip .create-card { flex: 0 0 112px; scroll-snap-align: start; }
  .thumb-art { height: 64px; }
  .docs-head .recent-toolbar { width: 100%; }
  .chips { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; scrollbar-width: none; }
  .chip { white-space: nowrap; }
  .file-list .table-heading { display: none; }
  .file-list .file-row { grid-template-columns: 1fr auto; padding: 8px 12px; }
  .file-list .file-row .format-pill, .file-list .file-row .date-col { display: none; }
  .file-list .row-actions .star-btn { opacity: 1; }
  .file-list.grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .footer { display: none; }
  /* 편집 화면: 도구 모음은 한 줄로 두고 옆으로 밀어서 사용 */
  .editor-head { padding: 4px 6px; gap: 4px; }
  .editor-head > .file-icon, .title-meta .source-info { display: none; }
  .doc-name { font-size: 14px; }
  .head-actions { gap: 0; }
  .head-actions [data-action="palette"], .head-actions .theme-btn, .head-actions .vsep, .head-actions .print-btn { display: none; }
  .toolbar, .format-edit-tools, .font-tools { flex-wrap: nowrap !important; }
  #toolbar { overflow-x: auto; overflow-y: hidden; max-height: none; white-space: nowrap; scrollbar-width: thin; }
  .format-edit-tools { flex: none; }
  .toolbar > *, .font-tools > *, .format-edit-tools > * { flex: none; }
  .notice-wrap { display: none; }
  .workspace { padding: 10px; }
  .paper { padding: 32px 22px; min-height: 0; }
  .slides-layout { grid-template-columns: 1fr; }
  .slide-list { display: flex; gap: 8px; overflow-x: auto; padding: 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .slide-list .thumb { flex: 0 0 110px; margin: 0; }
  .statusbar .link-btn { display: none; }
  .palette-dialog { margin-top: 8vh; width: calc(100vw - 20px); }
  .shortcut-grid { grid-template-columns: 1fr; }
}
/* ---------- 도장 ---------- */
.stamp-dialog { width: 720px; }
.stamp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.stamp-cols h3 { font-size: 14px; margin: 0 0 10px; color: var(--ink); }
.stamp-cols h3 small { font-weight: 400; color: var(--muted); margin-left: 6px; }
.stamp-make, .stamp-pick { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.stamp-field { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.stamp-field input:not([type="range"]) { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-2); color: var(--ink); font-size: 14px; }
.stamp-field.size input { flex: 1; }
.stamp-field output { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.stamp-shapes { display: flex; flex-wrap: wrap; gap: 6px; }
.stamp-shapes label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; }
.stamp-shapes label:has(input:checked) { border-color: var(--focus); background: var(--surface-3); font-weight: 600; }
.stamp-shapes small { color: var(--muted); font-weight: 400; }
.stamp-shapes input, .stamp-colors input { position: absolute; opacity: 0; pointer-events: none; }
.stamp-colors { display: flex; gap: 8px; }
.stamp-colors label { cursor: pointer; }
.stamp-colors i { display: block; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-strong); }
.stamp-colors label:has(input:checked) i { box-shadow: 0 0 0 2px var(--focus); }
.stamp-preview { height: 150px; display: grid; place-items: center; border-radius: 10px; background: #fff; border: 1px dashed var(--line-strong); color: #7a857f; font-size: 12.5px; text-align: center; padding: 8px; }
.stamp-preview img { max-height: 132px; max-width: 100%; }
.stamp-make-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.stamp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; max-height: 236px; overflow-y: auto; padding: 2px; }
.stamp-item { position: relative; }
.stamp-thumb { width: 100%; aspect-ratio: 1; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.stamp-thumb img { max-width: 100%; max-height: 100%; }
.stamp-item.on .stamp-thumb { border: 2px solid var(--focus); box-shadow: 0 0 0 3px #2f7d5b22; }
.stamp-del { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1; opacity: 0; }
.stamp-item:hover .stamp-del, .stamp-del:focus-visible { opacity: 1; }
.stamp-empty { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); margin: 0; padding: 20px 8px; text-align: center; border: 1px dashed var(--line-strong); border-radius: 10px; }
.stamp-note { font-size: 12.5px; margin: 14px 0 0; }
.stamp-ghost { position: absolute; pointer-events: none; opacity: .75; display: none; z-index: 5; }
.stamp-btn svg { color: #c4262f; }
:root[data-theme="dark"] .stamp-btn svg { color: #ff8a80; }
.paper img.jeil-stamp { mix-blend-mode: multiply; }
@media (max-width: 760px) { .stamp-cols { grid-template-columns: 1fr; } .stamp-dialog { width: calc(100vw - 20px); } }
/* 도장 파일 넣기 (v1.2) */
.stamp-dialog { width: 760px; }
.stamp-file { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 16px; border: 2px dashed var(--line-strong); border-radius: 12px; background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s; }
.stamp-file:hover, .stamp-file:focus-visible, .stamp-file.over { border-color: #c4262f; background: color-mix(in srgb, #c4262f 6%, var(--surface)); }
.stamp-file > svg { width: 30px; height: 30px; color: #c4262f; flex: none; }
.stamp-file > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.stamp-file strong { font-size: 14.5px; color: var(--ink); }
.stamp-file span { font-size: 12.5px; color: var(--muted); }
.stamp-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.stamp-check small { color: var(--muted); }
.stamp-options { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.stamp-options .stamp-field { flex: 1 1 200px; }
.stamp-item small { display: block; font-size: 11px; color: var(--muted); text-align: center; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stamp-tag { position: absolute; top: 4px; left: 4px; font-size: 10px; font-weight: 700; color: #fff; background: #c4262f; border-radius: 6px; padding: 1px 5px; }
.stamp-thumb img { transition: transform .15s; }
.stamp-msg { min-height: 18px; font-size: 12.5px; color: var(--brand); margin-top: 8px; }
.stamp-msg.bad { color: var(--danger); }
@media (max-width: 760px) { .stamp-file { flex-wrap: wrap; } }
.stamp-field { white-space: nowrap; } .stamp-options .stamp-field input[type=range] { min-width: 90px; }
/* 찍은 도장 옮기기 손잡이 */
.stamp-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.stamp-obj { position: absolute; pointer-events: auto; cursor: move; touch-action: none; border-radius: 4px; outline: 1.5px dashed transparent; outline-offset: 2px; }
.stamp-obj:hover, .stamp-obj:focus-visible, .stamp-obj.selected, .stamp-obj.dragging { outline-color: #c4262f; }
.stamp-obj img { width: 100%; height: 100%; display: block; opacity: .92; pointer-events: none; user-select: none; }
.stamp-obj img.ghost { opacity: 0; }
.stamp-obj.dragging img.ghost { opacity: .7; }
.stamp-obj.dragging:not(.with-image) { background: #ffffff55; }
.stamp-resize { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; border-radius: 3px; background: #fff; border: 2px solid #c4262f; cursor: nwse-resize; opacity: 0; }
.stamp-x { position: absolute; right: -10px; top: -10px; width: 22px; height: 22px; border-radius: 50%; background: #c4262f; color: #fff; font-size: 15px; line-height: 1; display: grid; place-items: center; opacity: 0; box-shadow: 0 1px 4px #0004; }
.stamp-obj:hover .stamp-resize, .stamp-obj.selected .stamp-resize, .stamp-obj:hover .stamp-x, .stamp-obj.selected .stamp-x { opacity: 1; }
@media (pointer: coarse) { .stamp-obj.selected .stamp-resize { width: 22px; height: 22px; right: -11px; bottom: -11px; } .stamp-obj .stamp-x { width: 28px; height: 28px; } }
.paper img.jeil-stamp { cursor: move; }
.paper img.jeil-stamp.stamp-selected { outline: 2px dashed #c4262f; outline-offset: 2px; }
.img-tools { position: fixed; z-index: 40; display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 9px; box-shadow: var(--shadow-md); }
.img-tools button { padding: 4px 10px; border-radius: 6px; font-size: 13px; color: var(--ink); }
.img-tools button:hover { background: var(--hover); }
.img-tools button[data-st="delete"] { color: var(--danger); }
.img-tools span { font-size: 11.5px; color: var(--muted); padding: 0 6px; }
.stamp-drag-ghost { position: fixed; z-index: 50; pointer-events: none; opacity: .75; }