* { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #f5f5f7; --panel: #ffffff; --border: #e5e5e7; --text: #1d1d1f; --muted: #6e6e73; --accent: #007aff; --accent-hover: #0066d4; --danger: #ff3b30; --hover: #f0f0f2; } /* Dark mode (1.7). Activated by adding `data-theme="dark"` to the element. The board background (state.bgColor) is kept user-controlled and isn't auto-swapped — users sometimes set it to white deliberately for print/photo references. We do darken it when the user-set value was the default light gray, to avoid the jarring "bright canvas inside a dark UI" look. */ html[data-theme="dark"] { --bg: #1c1c1e; --panel: #2c2c2e; --border: #3a3a3c; --text: #f5f5f7; --muted: #8e8e93; --accent: #0a84ff; --accent-hover: #2a8eff; --danger: #ff453a; --hover: #3a3a3c; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; height: 100vh; overflow: hidden; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } #app { display: flex; flex-direction: column; height: 100vh; } /* ===== Toolbar ===== */ #toolbar { background: var(--panel); border-bottom: 1px solid var(--border); padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; /* 1.35: keep section block left-aligned. Sections stay packed at the left of the toolbar regardless of viewport width — only the brand mark stretches to the right edge via its margin-left:auto. */ justify-content: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); z-index: 100; } .tool-group { display: flex; gap: 4px; padding: 0 6px; border-right: 1px solid var(--border); align-items: center; /* 1.19: allow wrapping when toolbar is narrow */ flex-wrap: wrap; row-gap: 6px; } .tool-group:last-child { border-right: none; } .tool-group.hidden { display: none; } /* Tool sections (1.11) — category grouping with vertical inline label. The label sits inside the section at the far left, oriented vertically, acting like a "spine" label for the group. */ .tool-section { position: relative; display: inline-flex; align-items: stretch; padding: 0; margin: 0 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); /* 1.19: removed overflow:hidden so tools inside can wrap visibly. Menus (export, autosave) are position:fixed so they were never clipped in 1.17; the only thing the old overflow:hidden was hiding was wrapped content, which we now WANT to be visible. */ /* 1.35: don't allow the section's internal items to re-wrap when the viewport grows. Sections themselves can still wrap to a new row at the toolbar level (flex-wrap on #toolbar) but each section keeps a stable internal layout so menu items don't shift position. */ flex-wrap: nowrap; /* Keep the whole section together as a unit when shrinking */ flex-shrink: 0; /* 1.37: each section claims a full toolbar row so the 4 sections (파일 / 그리기 / 삽입 / 편집) always stack vertically — top to bottom — regardless of window width. Without this, wide windows let the flex container lay all 4 in one row. width: max-content so the section is exactly as wide as its contents, not stretched across the toolbar. */ flex-basis: 100%; width: max-content; } .tool-section > .tool-group { border-right: 1px solid var(--border); padding: 0 6px; } .tool-section > .tool-group:last-child { border-right: none; padding-right: 8px; } /* Inner sections after the label need padding on the left */ .tool-section > .tool-group:first-of-type { padding-left: 8px; } .tool-section-label { display: flex; align-items: center; justify-content: center; padding: 6px 4px; background: var(--panel); color: var(--muted); font-size: 10px; font-weight: 700; /* 1.20: smaller letter-spacing so multi-char vertical labels like "삽입" fit comfortably even when the section box wraps to a short single-row height. Also force no wrap on the label glyph stack. */ letter-spacing: 0.5px; border-right: 1px solid var(--border); /* Rotate the label so it reads bottom-to-top (Korean reads vertically OK) */ writing-mode: vertical-rl; text-orientation: upright; flex-shrink: 0; user-select: none; min-width: 18px; /* 1.20: keep the label's text on a single (vertical) line — never wrap */ white-space: nowrap; } html[data-theme="dark"] .tool-section { background: rgba(255,255,255,0.02); } html[data-theme="dark"] .tool-section-label { background: rgba(255,255,255,0.04); } @media (max-width: 768px) { .tool-section { margin: 0 2px; } .tool-section-label { font-size: 9px; padding: 4px 3px; min-width: 14px; } } .tool-btn { background: var(--bg); border: 1px solid transparent; border-radius: 8px; padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--text); display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s; white-space: nowrap; font-family: inherit; } .tool-btn:hover { background: var(--hover); } .tool-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } .tool-btn svg { width: 16px; height: 16px; flex-shrink: 0; } .tool-group.arrange-group { background: rgba(0, 122, 255, 0.06); border-radius: 8px; padding: 4px 8px; } .tool-group.shape-options.hidden, .tool-group.todo-options.hidden { display: none; } .tool-group.shape-options, .tool-group.todo-options { background: rgba(0, 122, 255, 0.04); border-radius: 8px; padding: 4px 8px; } .rect-only.hidden { display: none; } .marker-shape-picker { display: inline-flex; gap: 2px; background: var(--bg); border-radius: 6px; padding: 2px; } .marker-shape-picker button { background: transparent; border: none; border-radius: 4px; padding: 5px 7px; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; transition: all 0.15s; } .marker-shape-picker button:hover { background: var(--hover); color: var(--text); } .marker-shape-picker button.active { background: var(--accent); color: #fff; } /* Font selector (1.4.14) — compact dropdown styled like other option controls */ .font-select { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 12px; color: var(--text); cursor: pointer; font-family: inherit; min-width: 110px; outline: none; } .font-select:hover { background: var(--hover); } .font-select:focus { border-color: var(--accent); } /* Shape items */ /* Shape items: use box-shadow for selection indicator since inline `border` styles override the .selected border-color rule */ .shape-item.selected { box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px rgba(0, 122, 255, 0.18); } .shape-item { box-sizing: border-box; pointer-events: auto; /* 1.45: z-index위계 재정렬 — 사용자 요구 "텍스트·이미지(20) > 사각/원/메모/할일(10) > 프레임(0)". 이전: 도형=5 (이미지와 동일). 변경: 도형=10 (메모/할일과 같은 계층). */ z-index: 10; } /* Shape inner text (1.5) — centered both axes, wraps inside the shape's content box. Uses pointer-events:none in default state so dragging the shape works as before; double-click activates editing which flips it on. */ .shape-text { position: absolute; inset: 0; display: flex; /* 1.33: `safe center` falls back to flex-start when content is taller than the container, so big text inside a small shape no longer overflows upward past the top edge. Text stays visible from the top and gets clipped at the bottom by overflow:hidden. */ align-items: safe center; justify-content: center; padding: 8px 10px; overflow: hidden; text-align: center; white-space: pre-wrap; word-break: break-word; line-height: 1.35; pointer-events: none; user-select: none; outline: none; font-family: inherit; } .shape-text.editing { pointer-events: auto; user-select: text; cursor: text; /* 1.12: while editing, switch out of flex centering so Enter creates a new line BELOW the previous one (not pushed to the right). The wrapping
elements that contentEditable inserts on Enter need block layout to stack vertically. */ display: block; text-align: center; } .shape-text.editing[data-align="left"] { text-align: left; } .shape-text.editing[data-align="right"] { text-align: right; } /* Preserve vertical centering: use line-height trick via flex on parent would be cleaner, but for now editing mode flips to top-aligned which matches typical edit experience. */ .shape-text:empty::before { content: attr(data-placeholder); opacity: 0.35; pointer-events: none; } /* When the shape is selected by box-drag or single click, hide the placeholder hint so it doesn't clutter the view. */ .shape-item.selected .shape-text:empty::before { opacity: 0; } /* Frame items (1.6, updated 1.12) — background containers. ALWAYS at the very bottom of the z-stack so shapes, text, images placed on top remain visible. Using z-index: 0 (or below) plus !important so newly added items can't accidentally end up beneath them. */ .frame-item { box-sizing: border-box; pointer-events: auto; z-index: 0 !important; border-radius: 10px; overflow: visible; } .frame-item.selected { box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px rgba(0, 122, 255, 0.18); z-index: 1 !important; } .frame-label { position: absolute; top: -28px; left: 0; padding: 4px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 6px 6px 0 6px; font-size: 13px; font-weight: 600; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.06); cursor: pointer; outline: none; min-width: 60px; user-select: none; white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; /* 1.12: ensure label sits above other items so dblclick lands on it */ z-index: 100; pointer-events: auto; } .frame-label:hover { background: var(--hover); border-color: var(--accent); } .frame-label.editing { user-select: text; overflow: visible; max-width: 400px; cursor: text; } .frame-label:empty::before { content: attr(data-placeholder); opacity: 0.5; pointer-events: none; } /* Search modal (1.6) */ .search-modal-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.25); display: none; align-items: flex-start; justify-content: center; padding-top: 80px; z-index: 1200; } .search-modal-bg.show { display: flex; } .search-modal { background: var(--panel); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); width: 560px; max-width: 90vw; overflow: hidden; } .search-input-wrap { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .search-input-wrap svg { color: var(--muted); flex-shrink: 0; } .search-input { flex: 1; border: none; outline: none; font-size: 16px; background: transparent; color: var(--text); font-family: inherit; } .search-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; } .search-results { max-height: 360px; overflow-y: auto; } .search-result { padding: 10px 16px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 10px; } .search-result:last-child { border-bottom: none; } .search-result:hover { background: var(--hover); } .search-result-kind { flex-shrink: 0; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; background: var(--bg); color: var(--muted); min-width: 50px; text-align: center; } .search-result-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-result-text mark { background: rgba(0, 122, 255, 0.2); color: var(--text); padding: 0 2px; border-radius: 2px; } .search-empty { padding: 24px; text-align: center; color: var(--muted); font-size: 13px; } /* Search highlight pulse (1.6) */ @keyframes searchPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(0, 122, 255, 0); } 50% { box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.6); } } .search-highlight { animation: searchPulse 0.8s ease-in-out 2; } /* Shape preview while dragging to create */ .shape-preview { position: absolute; box-sizing: border-box; pointer-events: none; z-index: 20; animation: none; } /* Todo items: marker + editable text in a row */ .todo-item { display: inline-flex; align-items: flex-start; gap: 8px; padding: 6px 10px; line-height: 1.35; min-width: 80px; min-height: 28px; background: rgba(255, 255, 255, 0.001); /* 1.47: todo is text-like — sits in the text·image layer (20). 사용자 요구: "그림 위에 할일" - 할일이 이미지보다 위에 표시되어야 함. */ z-index: 20; } /* 1.45/1.47: selected items always come to the very top */ .text-item.selected, .todo-item.selected { z-index: 40; } .todo-marker { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; background: transparent; border: none; padding: 0; cursor: pointer; border-radius: 3px; transition: transform 0.1s, background 0.15s; } .todo-marker:hover { background: rgba(0, 0, 0, 0.05); transform: scale(1.05); } .todo-marker svg { display: block; width: 100%; height: 100%; pointer-events: none; } .todo-text { flex: 1; outline: none; word-break: break-word; white-space: pre-wrap; min-width: 30px; } .todo-text:empty:before { content: "할 일을 입력하세요"; color: var(--muted); opacity: 0.6; } .todo-item[data-todo-state="checked"] .todo-text { text-decoration: line-through; opacity: 0.6; } .todo-text[contenteditable="true"] { background: rgba(255, 255, 255, 0.92); border-radius: 3px; padding: 0 4px; margin: 0 -4px; } /* ===== Brand mark ===== */ .brand-mark { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 4px 14px 4px 10px; /* 1.36: removed `margin-left: auto`. Previously brand-mark stretched to the right edge of the toolbar, which made it visually "drift" outward as the window grew — and the 4 section blocks appeared to reposition relative to it. With margin-left removed, all toolbar items pack at the left edge in stable pixel positions regardless of window width. The trailing space on the right stays empty. */ background: linear-gradient(135deg, rgba(0, 122, 255, 0.06), rgba(0, 122, 255, 0.02)); border: 1px solid rgba(0, 122, 255, 0.18); border-radius: 10px; cursor: pointer; user-select: none; font-family: inherit; transition: transform 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s; flex-shrink: 0; } .brand-mark:hover { background: linear-gradient(135deg, rgba(0, 122, 255, 0.12), rgba(0, 122, 255, 0.05)); border-color: rgba(0, 122, 255, 0.35); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0, 102, 212, 0.15); } .brand-mark:active { transform: translateY(0); } .brand-mark .brand-icon { width: 26px; height: 26px; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0, 102, 212, 0.3)); } .brand-mark .brand-name { font-size: 14px; font-weight: 700; letter-spacing: -0.3px; background: linear-gradient(135deg, #007aff 0%, #0050a8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } @media (max-width: 768px) { .brand-mark { padding: 4px 8px; height: 34px; } .brand-mark .brand-icon { width: 22px; height: 22px; } .brand-mark .brand-name { display: none; } } input[type="color"] { width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; background: none; } .field-label { font-size: 11px; color: var(--muted); margin-right: 4px; } .thickness-control { display: flex; align-items: center; gap: 8px; } /* Color palette (1.7) — small chip row next to the color picker */ .color-palette, .frame-palette { display: inline-flex; align-items: center; gap: 3px; padding: 2px; background: var(--bg); border-radius: 6px; } .color-chip { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.12); cursor: pointer; padding: 0; transition: transform 0.1s; flex-shrink: 0; } .color-chip:hover { transform: scale(1.15); } .color-chip.active { box-shadow: 0 0 0 2px var(--accent); } .color-chip.add-chip { background: var(--panel); color: var(--muted); font-size: 14px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .color-chip.add-chip:hover { color: var(--accent); } input[type="range"] { width: 90px; accent-color: var(--accent); } .thickness-display { font-size: 12px; color: var(--muted); min-width: 32px; font-variant-numeric: tabular-nums; } .check-control { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); cursor: pointer; padding: 6px 10px; border-radius: 8px; background: var(--bg); user-select: none; } .check-control:hover { background: var(--hover); } .check-control input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; } .check-control.active { background: rgba(0, 122, 255, 0.12); color: var(--accent); font-weight: 500; } /* ===== Board / viewport ===== */ #board-wrapper { flex: 1; position: relative; overflow: hidden; background-color: #ffffff; background-image: linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px); background-size: 24px 24px; background-position: 0 0; } #board-wrapper.drag-over::after { content: "이미지를 놓아주세요"; position: absolute; inset: 12px; border: 3px dashed var(--accent); border-radius: 12px; background: rgba(0, 122, 255, 0.08); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--accent); font-weight: 600; pointer-events: none; z-index: 500; backdrop-filter: blur(2px); } /* Logo overlay - viewport-fixed */ #logo-overlay { position: absolute; z-index: 1; pointer-events: none; display: none; max-width: 80%; max-height: 80%; } #logo-overlay img { display: block; max-width: 100%; } #logo-overlay .logo-text { font-weight: 700; line-height: 1.1; white-space: nowrap; } /* World layer - panned */ #board { position: absolute; inset: 0; z-index: 2; transform-origin: 0 0; will-change: transform; } /* Canvas - viewport-sized, on top */ #canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; touch-action: none; cursor: crosshair; pointer-events: auto; } #board-wrapper.brush-mode #canvas { cursor: none; } /* Connector mode: items become click targets with visual feedback */ #board-wrapper.connector-mode .item-base { cursor: crosshair; transition: outline 0.1s, box-shadow 0.1s; } #board-wrapper.connector-mode .item-base.connector-hover { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2); } #board-wrapper.connector-mode .item-base.connector-source { outline: 3px solid #34c759; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.25); } /* Box-select marquee (drag selection rectangle) */ #select-box { position: absolute; pointer-events: none; border: 1.5px dashed var(--accent); background: rgba(0, 122, 255, 0.08); border-radius: 2px; z-index: 14; display: none; } /* file:// hosting notice (1.4.4) — shown on mobile when the file is opened from a temporary URL (browser preview, downloaded file, etc.) where home- screen shortcuts won't survive. */ #file-notice { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1100; background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-md); font-size: 13px; color: var(--text); line-height: 1.55; display: none; max-width: 540px; margin: 0 auto; } #file-notice.show { display: block; } #file-notice h5 { font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--accent); } #file-notice .file-notice-actions { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; } #file-notice button { font-size: 12px; padding: 6px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; } #file-notice button.primary { background: var(--accent); color: white; border-color: var(--accent); } #board-wrapper.text-mode #canvas { cursor: text; } /* Pan cursors */ body.space-held #canvas, body.space-held #board, body.space-held #board-wrapper { cursor: grab !important; } body.panning, body.panning #canvas, body.panning #board, body.panning #board-wrapper, body.panning .item-base { cursor: grabbing !important; } /* Coordinate badge */ #coord-badge { position: fixed; bottom: 16px; right: 16px; background: rgba(28, 28, 30, 0.7); color: #fff; padding: 6px 12px; border-radius: 14px; font-size: 11px; font-variant-numeric: tabular-nums; z-index: 150; pointer-events: none; backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.2s; } #coord-badge.show { opacity: 1; } /* Brush cursor */ #brush-cursor { position: fixed; pointer-events: none; border-radius: 50%; border: 1px solid #000; box-shadow: 0 0 0 1px #fff, inset 0 0 0 1px #fff; z-index: 9999; transform: translate(-50%, -50%); transition: width 0.08s ease, height 0.08s ease; display: none; } #brush-cursor.visible { display: block; } /* Items */ .item-base { position: absolute; cursor: move; user-select: none; touch-action: none; border: 2px dashed transparent; border-radius: 4px; animation: pop 0.2s ease-out; } @keyframes pop { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* 1.45: when an item is selected it should always come to the very top so the user can clearly see what's being manipulated, regardless of layer. Above text·image (20). */ .item-base.selected { border-color: var(--accent); z-index: 40; } /* Locked items (1.4.4): show a small lock badge in the top-right corner and dim resize/delete handles to make read-only state obvious. */ .item-base.locked::after { content: "🔒"; position: absolute; top: -10px; right: -10px; width: 22px; height: 22px; border-radius: 50%; background: var(--panel); border: 1.5px solid var(--accent); font-size: 11px; line-height: 19px; text-align: center; box-shadow: var(--shadow-sm); pointer-events: none; z-index: 5; } .item-base.locked .resize-handle, .item-base.locked .delete-btn { display: none !important; } .item-base.locked { cursor: default; } .item-base.locked .text-item, .item-base.locked .todo-text { cursor: default; user-select: none; } .image-item { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); background: #fff; overflow: visible; /* 1.47: image sits with shapes/sticky (10), below text·todo (20). 사용자 요구: "그림 위에 텍스트", "그림 위에 할일" — 텍스트와 할일은 이미지보다 위, 이미지는 사각형·메모와 같은 계층, 모두 프레임(0) 위. */ z-index: 10; } .image-item img { display: block; width: 100%; height: 100%; pointer-events: none; object-fit: contain; border-radius: 2px; } .text-item { padding: 6px 10px; font-family: inherit; line-height: 1.35; word-break: break-word; white-space: pre-wrap; min-width: 40px; min-height: 24px; background: rgba(255, 255, 255, 0.001); z-index: 20; } .text-item[contenteditable="true"] { outline: 2px solid var(--accent); background: rgba(255, 255, 255, 0.92); cursor: text; z-index: 20; } .text-item:empty:before { content: attr(data-placeholder); color: var(--muted); opacity: 0.6; } /* 1.15: bold flag for text/todo/shape inner text */ .item-base.bold .text-item, .item-base.bold .todo-text, .item-base.bold .shape-text, .text-item.bold, .todo-item.bold .todo-text, .todo-item.bold, .shape-item.bold .shape-text { font-weight: 700; } /* 1.15: BOLD button — square button with bold "B" letter */ .font-bold-btn { min-width: 32px; padding: 6px 10px !important; font-size: 14px; } .font-bold-btn.active { background: var(--accent); color: white; border-color: var(--accent); } /* 1.29: line arrow toggle buttons — same active style as bold */ .line-arrow-btn, .arrow-head-btn { min-width: 32px; padding: 6px 10px !important; font-size: 14px; } .line-arrow-btn.active, .arrow-head-btn.active { background: var(--accent); color: white; border-color: var(--accent); } /* Sticky note (1.8) — a text item variant with a tinted background and soft shadow. The note shape is a small parallelogram-like card; users get the post-it feel for brainstorming/board notes. 1.13: when resized, behave like a box — text wraps and stays inside. Word-wrap + overflow hidden ensures the content lays out in the box. */ .text-item.sticky { background: #fff9b1; padding: 14px 16px; min-width: 120px; min-height: 80px; border-radius: 2px; box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 6px 14px rgba(0,0,0,0.06); font-family: inherit; line-height: 1.45; background-image: linear-gradient(135deg, transparent 96%, rgba(0,0,0,0.05) 96%); /* 1.13: text wraps inside the sticky box; box dimensions are explicit (set via inline style) when the user has resized it. 1.33: use `overflow: clip` + `overflow-clip-margin` so the box clips overflowing text near its border BUT lets the delete (×) button — which is positioned at top:-10px right:-10px — render outside. The clip-margin extends the clip region just enough for the × button to sit out of the way while text stays effectively constrained inside. */ word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap; overflow: clip; overflow-clip-margin: 16px; /* 1.45: sticky sits at the shape layer (10), below plain text & images (20). 사용자 요구: "선들, 텍스트, 연결선, 이미지 > 사각/원/메모/할일 > 프레임". */ z-index: 10; } .text-item.sticky[contenteditable="true"] { background: #fffbcc; outline: 2px solid var(--accent); } html[data-theme="dark"] .text-item.sticky { /* Slightly muted yellow on dark backgrounds */ background: #d6c562; color: #1d1d1f; box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 6px 16px rgba(0,0,0,0.3); } html[data-theme="dark"] .text-item.sticky[contenteditable="true"] { background: #e7d572; } /* Minimap (1.8) */ #minimap { position: absolute; right: 16px; bottom: 16px; width: 200px; height: 140px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); overflow: hidden; z-index: 50; display: block; } #minimap.hidden { display: none; } #minimapCanvas { width: 100%; height: 100%; display: block; cursor: pointer; } #minimapToggleBtn, .minimap-action-btn { width: 22px; height: 22px; border: none; background: rgba(255, 255, 255, 0.85); border-radius: 4px; font-size: 13px; line-height: 1; color: var(--text); cursor: pointer; padding: 0; } .minimap-actions { position: absolute; top: 4px; right: 4px; display: flex; gap: 4px; z-index: 1; } #minimapToggleBtn:hover, .minimap-action-btn:hover { background: rgba(255, 255, 255, 1); } html[data-theme="dark"] #minimapToggleBtn, html[data-theme="dark"] .minimap-action-btn { background: rgba(60, 60, 67, 0.85); } /* When mode is "wheel-pan", show the active state */ .minimap-action-btn.active { background: var(--accent); color: white; } #minimapShowBtn { position: absolute; right: 16px; bottom: 16px; width: 36px; height: 36px; border: 1px solid var(--border); background: var(--panel); border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); cursor: pointer; font-size: 16px; color: var(--text); z-index: 50; display: none; } #minimapShowBtn.shown { display: block; } #minimapShowBtn:hover { background: var(--hover); } /* Board tabs (1.9) — slim tab strip below the toolbar */ #boardTabs { background: var(--panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 4px; padding: 4px 8px; overflow-x: auto; overflow-y: hidden; flex-shrink: 0; min-height: 34px; scrollbar-width: thin; } #boardTabs::-webkit-scrollbar { height: 6px; } #boardTabs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .board-tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 12px; background: transparent; border: 1px solid transparent; border-radius: 6px; font-size: 13px; color: var(--muted); cursor: pointer; white-space: nowrap; flex-shrink: 0; user-select: none; transition: background 0.1s, color 0.1s; max-width: 200px; } .board-tab:hover { background: var(--hover); color: var(--text); } .board-tab.active { background: var(--bg); border-color: var(--border); color: var(--text); font-weight: 500; } .board-tab-name { overflow: hidden; text-overflow: ellipsis; max-width: 160px; outline: none; } .board-tab-name[contenteditable="true"] { background: var(--panel); padding: 0 4px; border-radius: 3px; } .board-tab-close { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; border-radius: 3px; opacity: 0.55; transition: opacity 0.15s, background 0.15s, color 0.15s; } .board-tab:hover .board-tab-close { opacity: 0.85; } .board-tab.active .board-tab-close { opacity: 0.7; } .board-tab-close:hover { opacity: 1 !important; background: var(--danger); color: white; } /* Board delete confirm modal (1.11) — three choices: save+delete, delete, cancel */ .board-delete-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; z-index: 1400; padding: 20px; } .board-delete-overlay.show { display: flex; } .board-delete-modal { background: var(--panel); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.25); width: 420px; max-width: 100%; padding: 22px 24px; } .board-delete-modal h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--text); } .board-delete-modal p { margin: 0 0 18px; font-size: 13px; color: var(--muted); line-height: 1.5; } .board-delete-modal .target-name { display: inline-block; padding: 2px 8px; background: var(--bg); border-radius: 4px; font-weight: 600; color: var(--text); margin: 0 2px; } .board-delete-actions { display: flex; flex-direction: column; gap: 8px; } .board-delete-actions button { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); cursor: pointer; font-size: 13px; font-family: inherit; text-align: left; transition: background 0.1s; } .board-delete-actions button:hover { background: var(--hover); } .board-delete-actions button.primary { background: var(--accent); color: white; border-color: var(--accent); } .board-delete-actions button.primary:hover { background: var(--accent-hover); } .board-delete-actions button.danger { color: var(--danger); } .board-delete-actions button.danger:hover { background: rgba(255,59,48,0.08); } /* Save-As modal (1.16) — Blender-style: filename input + "+" auto-increment button */ .save-as-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; z-index: 1400; padding: 20px; } .save-as-overlay.show { display: flex; } .save-as-modal { background: var(--panel); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.25); width: 480px; max-width: 100%; padding: 22px 24px; } .save-as-modal h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--text); } .save-as-modal .hint { margin: 0 0 16px; font-size: 12px; color: var(--muted); line-height: 1.5; } .save-as-input-row { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; } .save-as-input-row input { flex: 1; padding: 9px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); font-size: 14px; font-family: inherit; outline: none; } .save-as-input-row input:focus { border-color: var(--accent); } .save-as-input-row .ext { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; } .save-as-input-row button.increment-btn { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); cursor: pointer; font-size: 18px; font-weight: 700; line-height: 1; font-family: inherit; } .save-as-input-row button.increment-btn:hover { background: var(--accent); color: white; border-color: var(--accent); } .save-as-actions { display: flex; justify-content: flex-end; gap: 8px; } .save-as-actions button { padding: 9px 16px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); cursor: pointer; font-size: 13px; font-family: inherit; } .save-as-actions button:hover { background: var(--hover); } .save-as-actions button.primary { background: var(--accent); color: white; border-color: var(--accent); } .save-as-actions button.primary:hover { background: var(--accent-hover); } #addBoardBtn { background: transparent; border: 1px dashed var(--border); color: var(--muted); border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 16px; line-height: 1; flex-shrink: 0; } #addBoardBtn:hover { background: var(--hover); color: var(--accent); border-color: var(--accent); } /* Auto-save badge + menu (1.10) */ .autosave-badge { border: 1px solid var(--border); background: var(--bg); color: var(--muted); padding: 6px 10px; border-radius: 6px; font-size: 12px; cursor: pointer; font-family: inherit; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; transition: background 0.1s; } .autosave-badge:hover { background: var(--hover); color: var(--text); } .autosave-badge.on { color: #34c759; border-color: rgba(52, 199, 89, 0.3); background: rgba(52, 199, 89, 0.08); font-weight: 500; } .autosave-badge.saving { color: var(--accent); border-color: var(--accent); background: rgba(0, 122, 255, 0.08); } .autosave-badge.off { color: var(--muted); } .autosave-menu { display: none; position: fixed; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); padding: 4px; min-width: 240px; z-index: 1500; } .autosave-menu.show { display: block; } .autosave-menu button { display: block; width: 100%; text-align: left; background: transparent; border: none; padding: 8px 12px; border-radius: 5px; color: var(--text); font-size: 13px; cursor: pointer; font-family: inherit; } .autosave-menu button:hover { background: var(--hover); } .autosave-menu button.danger { color: var(--danger); } .autosave-menu button.danger:hover { background: rgba(255, 59, 48, 0.08); } /* Crop modal (1.8) */ .crop-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1300; padding: 20px; } .crop-modal { background: var(--panel); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.3); width: 560px; max-width: 100%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; } .crop-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); } .crop-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); } .crop-preview-wrap { background: repeating-conic-gradient(#e0e0e0 0% 25%, #f5f5f5 0% 50%) 50% / 20px 20px; padding: 24px; max-height: 50vh; overflow: hidden; display: flex; align-items: center; justify-content: center; } html[data-theme="dark"] .crop-preview-wrap { background: repeating-conic-gradient(#333 0% 25%, #2a2a2a 0% 50%) 50% / 20px 20px; } .crop-preview { max-width: 100%; max-height: 360px; display: block; object-fit: contain; } .crop-controls { padding: 14px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; border-top: 1px solid var(--border); } .crop-controls label { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 13px; } .crop-controls input[type="range"] { flex: 1; accent-color: var(--accent); } .crop-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); } .resize-handle { position: absolute; bottom: -8px; right: -8px; width: 16px; height: 16px; background: var(--accent); border: 2px solid #fff; border-radius: 50%; cursor: nwse-resize; display: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); z-index: 5; } .item-base.selected .resize-handle { display: block; } /* Shapes: nudge handle slightly outside the border so a thick stroke can't cover it */ .shape-item .resize-handle { bottom: -10px; right: -10px; } .delete-btn { position: absolute; top: -10px; right: -10px; width: 24px; height: 24px; background: var(--danger); color: #fff; border: 2px solid #fff; border-radius: 50%; cursor: pointer; display: none; align-items: center; justify-content: center; font-size: 14px; line-height: 1; font-weight: bold; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .item-base.selected .delete-btn { display: flex; } /* ===== Modal ===== */ .modal-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: none; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(4px); } .modal-bg.show { display: flex; } .modal { background: var(--panel); padding: 22px; border-radius: 14px; min-width: 320px; max-width: 95vw; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); animation: pop 0.2s ease-out; } .modal-large { width: 520px; } .modal h3 { font-size: 16px; font-weight: 600; } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .icon-btn { background: transparent; border: none; cursor: pointer; padding: 6px; border-radius: 6px; color: var(--text); font-size: 18px; } .icon-btn:hover { background: var(--hover); } .settings-section { margin-bottom: 18px; } .settings-section:last-child { margin-bottom: 0; } .settings-section h4 { font-size: 13px; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } /* Feature list & changelog (1.4.6) */ .info-list, .changelog { background: var(--bg); border-radius: 8px; padding: 10px 14px; border: 1px solid var(--border); } .info-row { display: flex; gap: 12px; padding: 6px 0; font-size: 12.5px; line-height: 1.5; border-bottom: 1px dashed var(--border); } .info-row:last-child { border-bottom: none; } .info-key { flex: 0 0 100px; font-weight: 600; color: var(--accent); font-size: 12px; } .info-val { flex: 1; color: var(--text); } .cl-row { display: flex; gap: 12px; padding: 6px 0; font-size: 12.5px; line-height: 1.5; border-bottom: 1px dashed var(--border); } .cl-row:last-child { border-bottom: none; } .cl-ver { flex: 0 0 56px; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); font-size: 12px; } .cl-desc { flex: 1; color: var(--text); } .setting-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; } .setting-row label.setting-label { flex: 0 0 80px; font-size: 13px; } .setting-row .setting-control { flex: 1; display: flex; align-items: center; gap: 8px; } .setting-row input[type="range"] { flex: 1; width: auto; } .setting-row .setting-value { min-width: 50px; font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; } .setting-row input[type="text"] { flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit; outline: none; } .setting-row input[type="text"]:focus { border-color: var(--accent); } .radio-group { display: flex; gap: 6px; flex: 1; } .radio-group label { flex: 1; text-align: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; cursor: pointer; background: var(--bg); } .radio-group label.checked { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 500; } .radio-group input { display: none; } .position-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 120px; aspect-ratio: 1; background: var(--bg); padding: 4px; border-radius: 8px; } .position-picker button { background: #fff; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; padding: 0; transition: all 0.1s; } .position-picker button:hover { background: var(--hover); } .position-picker button.active { background: var(--accent); border-color: var(--accent); } /* Shortcut grid */ .shortcut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; } .shortcut-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 13px; } .shortcut-key { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; min-width: 110px; text-align: center; color: var(--text); transition: all 0.1s; } .shortcut-key:hover { background: var(--hover); border-color: #ccc; } .shortcut-key.capturing { background: var(--accent); color: #fff; border-color: var(--accent); animation: pulse 1s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .shortcut-section-title { font-size: 11px; color: var(--muted); margin: 8px 0 4px; text-transform: uppercase; letter-spacing: 0.5px; grid-column: 1 / -1; } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); } .btn-primary { background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 8px; border: none; cursor: pointer; font-size: 14px; font-family: inherit; font-weight: 500; } .btn-primary:hover { background: var(--accent-hover); } .btn-secondary { background: var(--bg); color: var(--text); padding: 10px 16px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; font-size: 14px; font-family: inherit; } .btn-secondary:hover { background: var(--hover); } .search-bar { display: flex; gap: 8px; margin-bottom: 14px; } .search-bar input { flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; outline: none; } .search-bar input:focus { border-color: var(--accent); } .search-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 60vh; overflow-y: auto; min-height: 200px; } .search-result { cursor: pointer; border-radius: 8px; overflow: hidden; background: var(--hover); aspect-ratio: 1; transition: transform 0.15s; border: 2px solid transparent; } .search-result:hover { transform: scale(1.03); border-color: var(--accent); } .search-result img { width: 100%; height: 100%; object-fit: cover; display: block; } .search-empty { grid-column: 1 / -1; padding: 40px 20px; text-align: center; color: var(--muted); font-size: 14px; } .search-empty small { display: block; margin-top: 6px; opacity: 0.7; font-size: 12px; } .export-menu { position: fixed; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); padding: 4px; z-index: 1500; min-width: 180px; display: none; } .export-menu.show { display: block; } .export-menu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 10px 12px; background: none; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-family: inherit; color: var(--text); text-align: left; } .export-menu button:hover { background: var(--hover); } .export-menu button svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); } /* 1.25: small secondary text inside export menu buttons (e.g. "보통", "고품질") */ .export-menu-hint { margin-left: auto; font-size: 11px; color: var(--muted); font-weight: 400; white-space: nowrap; } .export-menu button:hover .export-menu-hint { color: var(--text); } .toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(10px); background: rgba(28, 28, 30, 0.92); color: #fff; padding: 12px 20px; border-radius: 24px; font-size: 14px; z-index: 2000; opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .status-hint { /* 1.51: 보드 영역 안쪽에 표시되도록 위치 조정. 이전: fixed top:70px (툴바 영역에 겹쳐 보임). 지금: board-wrapper 내부 absolute 위치 — 화면 크기·툴바 높이와 무관하게 항상 보드 캔버스 상단 안쪽에 떠 있음. */ position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.96); color: #1d1d1f; padding: 10px 18px; border-radius: 12px; border: 1px solid rgba(0, 122, 255, 0.25); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06); font-size: 13px; font-weight: 500; z-index: 200; pointer-events: none; opacity: 0; transition: opacity 0.2s, transform 0.2s; max-width: 80%; text-align: center; line-height: 1.4; white-space: nowrap; } .status-hint.show { opacity: 1; } html[data-theme="dark"] .status-hint { background: rgba(30, 30, 32, 0.96); color: #f5f5f7; border-color: rgba(0, 122, 255, 0.35); } /* 1.39: preset picker grid — cards laid out in 2 columns */ .preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .preset-card { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); cursor: pointer; text-align: left; font-family: inherit; transition: transform 0.1s, border-color 0.15s, box-shadow 0.15s; } .preset-card:hover { border-color: var(--accent); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); transform: translateY(-1px); } .preset-card:active { transform: translateY(0); } .preset-card .preset-icon { font-size: 24px; line-height: 1; color: var(--accent); flex-shrink: 0; margin-top: 2px; } .preset-card .preset-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 2px; } .preset-card .preset-desc { font-size: 11.5px; color: var(--text-muted, #666); line-height: 1.4; } @media (max-width: 600px) { .preset-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { /* 1.19: previously used overflow-x: auto + nowrap on toolbar for mobile. That forced horizontal scrolling which hid the right side of the bar. Now we let the toolbar wrap into multiple rows (matching desktop's narrow-window behavior). The vertical category labels still anchor each section at its left edge. */ #toolbar { padding: 8px; gap: 4px; flex-wrap: wrap; } .tool-btn { padding: 7px 9px; font-size: 12px; } .tool-btn .label { display: none; } .tool-group { padding: 0 4px; flex-shrink: 1; } .tool-section { flex-shrink: 1; } input[type="range"] { width: 70px; } .modal-large { width: 95vw; } .shortcut-grid { grid-template-columns: 1fr; gap: 4px; } .shortcut-key { min-width: 90px; } }