/* ==== fonts & icons (must be first) ==== */ @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'); @font-face{ font-family: "InconsolataNF"; src: url("/assets/InconsolataNerdFont-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /* ===== CSS Vars ===== */ :root{ --text:#111; --muted:#666; --line:#eee; --chip:#f8f8f8; --chip-border:#e5e5e5; --press-dy:1.5px; --press-scale:.985; --press-duration:200ms; --press-ease:cubic-bezier(.22,.8,.25,1); --radius:12px; --radius-sm:10px; --shadow:0 6px 18px rgba(0,0,0,.06); --page-max:760px; --side-w:280px; --shell-max: calc(var(--page-max) + var(--side-w)); --tag-accent: #111; --code-font: "InconsolataNF", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* 배너 사이즈 */ --banner-w: 220px; --banner-h: 52px; --banner-radius: 12px; } /* ===== Base ===== */ *{box-sizing:border-box} html,body{height:auto;min-height:100%;scroll-behavior:smooth} body:not(.editor-page){ max-width:var(--page-max);margin:40px auto;padding:0 16px;line-height:1.75; font-family:'Gowun Dodum',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:#fff;color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } a{color:inherit;text-decoration:none;transition:color .2s ease,transform .1s ease} a:hover{color:var(--text);transform:translateY(1px)} a:active{transform:translateY(2px)} a:focus-visible{outline:2px solid #999;outline-offset:2px;border-radius:4px} header{margin-bottom:70px;display:flex;justify-content:space-between;align-items:center} header h1{font-size:1.4rem;margin:0} header nav{display:flex;gap:12px} header nav a{color:var(--muted)} header nav a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px} /* ===== List (index/tag) ===== */ .post{padding:28px 0 30px;border-top:1px solid var(--line)} .post:first-of-type{border-top:none} .title{font-weight:600;font-size:1.16rem;line-height:1.35;margin:0 0 4px} .title a{display:inline-block;border-bottom:1px solid transparent;transition:color .2s,transform .1s,border-color .2s} .title a:hover{transform:translateY(1px);border-bottom-color:currentColor} .title a:active{transform:translateY(2px)} .title-row.list{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .title-row.list .title{flex:1 1 auto;margin:0} .title-row.list .tags{display:flex;gap:6px;flex-shrink:0} .title-row.list .meta{margin-left:auto} .tags{display:flex;flex-wrap:wrap;gap:8px} .tags .tag{font-size:.85rem;color:var(--muted)} .tags a.tag:hover{color:var(--text);text-decoration:none !important} .tags .tag::before{content:"#";margin-right:2px} .meta{font-size:.86rem;color:var(--muted);letter-spacing:.2px} .excerpt{ margin:6px 0 0;color:var(--muted);line-height:1.6;display:-webkit-box; -webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:3;word-break:break-word } @media (max-width:900px){.excerpt{-webkit-line-clamp:2}} @media (max-width:520px){.excerpt{-webkit-line-clamp:1}} @supports not (-webkit-line-clamp:1){ .excerpt{display:block;max-height:calc(1.6em * 3);overflow:hidden} @media (max-width:900px){.excerpt{max-height:calc(1.6em * 2)}} @media (max-width:520px){.excerpt{max-height:calc(1.6em * 1)}} } /* Cover */ .cover{ width:100%;height:auto;border-radius:12px;border:1px solid var(--line);margin:6px 0 10px } /* ===== Article ===== */ /* 1) 본문 이미지 기본(반응형 + 둥글게) */ article :is(.content, #content) img{ max-width:100%;height:auto;border-radius:8px } /* 2) 단독 이미지 중앙 정렬 - 문단/블록( p, div, li, figure ) 바로 아래에 이미지 한 장만 있으면 자동 중앙 - 링크로 감싼 단독 이미지도 동일 처리 */ :is(.content, #content) :where(p, div, li, figure) > img:only-child, :is(.content, #content) :where(p, div, li, figure) > a:only-child > img:only-child{ display:block; margin-inline:auto; /* 좌우 자동 */ } /* 3) figure 사용 시 정중앙 + 캡션 스타일 */ :is(.content, #content) figure{ margin:1.25rem auto;text-align:center } :is(.content, #content) figure > img, :is(.content, #content) figure > a > img{ display:inline-block; /* figure 자체 중앙 정렬에 맞춰 자연스러운 배치 */ } :is(.content, #content) figure > figcaption{ margin-top:.5rem;font-size:.92em;opacity:.8 } /* 4) 문장 흐름에 두는 작은 이미지는 .img-inline 클래스로 예외 처리 */ :is(.content, #content) img.img-inline, :is(.content, #content) a > img.img-inline{ display:inline;margin:0 } /* 인용 블록 */ blockquote{ border-left:4px solid #FFD700;background:#FFFDE7;padding:12px 16px;margin:16px 0;border-radius:6px; font-style:italic;color:#333;box-shadow:0 2px 4px rgba(0,0,0,.05) } .row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:6px 0} pre{overflow:auto;padding:12px;border:1px solid var(--line);border-radius:10px} code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:.2em .4em;border-radius:4px} footer{color:var(--muted);margin:40px 0 20px;text-align:center} .debug{margin-top:24px;padding:12px;border:1px dashed #ddd;border-radius:8px;background:#fafafa} .debug pre{white-space:pre-wrap;word-break:break-all} /* In-article links */ #content a{ color:var(--text);text-decoration:underline !important;text-decoration-color:rgba(0,0,0,.3);text-underline-offset:3px; transition:color .2s ease,text-decoration-color .2s ease } #content a:hover{color:var(--text);text-decoration-color:rgba(0,0,0,.6)} #content a.is-pressing{ text-decoration-color:rgba(0,0,0,.8); text-underline-offset:4px; background:linear-gradient(transparent 70%, rgba(0,0,0,.06) 0) no-repeat; filter:saturate(1.05) } #content a:active{ text-decoration-color:rgba(0,0,0,.8); text-underline-offset:4px; background:linear-gradient(transparent 70%, rgba(0,0,0,.06) 0) no-repeat } /* 인용 링크 제거 */ #content a.citation, #content a.citation:hover, #content a.citation:active, #content a.citation.is-pressing{ text-decoration:none !important; background:none !important; } /* ===== Markdown code styling ===== */ /* 인라인 코드 */ #content code, article .content code, article code, kbd, samp{ font-family: var(--code-font) !important; font-size: .95em; /* 본문보다 약간 작게 */ font-variant-ligatures: none; } /* 코드 블록 */ #content pre, article .content pre, article pre{ font-family: var(--code-font) !important; font-size: .90em; /* 블록은 더 살짝 작게 */ line-height: 1.6; tab-size: 2; -moz-tab-size: 2; } /* pre 안의 code는 부모 크기/폰트를 그대로 상속 */ #content pre code, article .content pre code, article pre code{ font: inherit !important; } /* 에디터(작성 영역)에도 동일 폰트 적용 – 선택 사항 */ .editor-page .CodeMirror{ font-family: var(--code-font) !important; font-size: 13px; /* 취향에 맞게 */ line-height: 1.6; } /* ===== Footnotes ===== */ .footnote-ref{ position:relative; display:inline-block; } .footnote-ref .footnote-tip{ all:unset; box-sizing:border-box; display:none; position:absolute; left:0; top:100%; margin-top:6px; min-width:220px; max-width:min(70vw, 420px); font:inherit; line-height:1.55; color:var(--text); background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px 12px; box-shadow:0 8px 24px rgba(0,0,0,.08); z-index:100; } .footnote-ref:hover .footnote-tip, .footnote-ref:focus-within .footnote-tip{ display:block; } .footnote-ref .footnote-jump{ float:right; font-size:.86em; color:var(--muted); } .footnotes{ margin-top:22px; border-top:1px solid var(--line); padding-top:10px; } .footnotes h3{ margin:0 0 8px; font-size:.95rem; color:var(--muted); font-weight:600; } .footnotes ol{ margin:0; padding-left:1.1rem; } .footnotes li{ margin:6px 0; } .footnote-backref{ margin-left:6px; color:var(--muted); text-decoration:none; } @media (pointer:coarse){ .footnote-ref .footnote-tip{ position:fixed; left:16px; right:16px; bottom:calc(env(safe-area-inset-bottom, 0px) + 16px); top:auto; } } /* ===== Tag rail ===== */ .tagrail{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:12px 0 18px;position:relative} .tagrail .sep{display:none} .tagrail .progress{position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--line);overflow:hidden;border-radius:2px} .tagrail .progress .ind{position:absolute;top:0;left:0;height:100%;width:40%;background:linear-gradient(90deg,transparent,rgba(0,0,0,.28),transparent);animation:tagrailInd 800ms var(--press-ease) infinite} @keyframes tagrailInd{ from{ transform:translateX(-40%);} to{ transform:translateX(140%);} } @keyframes listOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}} @keyframes listIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} .tagrail a{position:relative;padding:.06rem 0 .2rem;text-decoration:none !important;transition:color .2s,transform .12s} .tagrail a:hover{color:var(--text);transform:translateY(1px)} .tagrail a::before{content:"#";margin-right:4px;color:var(--muted)} .tagrail a.is-active{font-weight:600} /* 태그 데코 */ .tags a.tag, .tagrail a{ transition: color .15s ease, transform .08s ease } .tags a.tag::after, .tagrail a::after{ content:""; display:inline-block; width:4px; height:4px; margin-left:6px; border-radius:50%; background:currentColor; opacity:0; transform:translateY(-1px) scale(.8); transition:opacity .18s, transform .18s var(--press-ease); } .tags a.tag:hover::after, .tagrail a:hover::after, .tagrail a.is-active::after{ opacity:.45; transform:translateY(-1px) scale(1); } body.tag-ui-bar .tags a.tag, body.tag-ui-bar .tagrail a{ padding-left:2px } body.tag-ui-bar .tags a.tag::after, body.tag-ui-bar .tagrail a::after{ content:""; position:absolute; left:-6px; top:.35em; bottom:.35em; width:2px; border-radius:2px; background:transparent; transform:scaleY(.4); transition:transform .18s var(--press-ease), background .18s ease, opacity .18s; } body.tag-ui-bar .tags a.tag:hover::after, body.tag-ui-bar .tagrail a:hover::after, body.tag-ui-bar .tagrail a.is-active::after{ background:var(--tag-accent); opacity:.18; transform:scaleY(1); } /* List transitions */ #post-list{will-change:opacity,transform;transition:opacity .18s ease,filter .18s ease,transform .18s ease} #post-list.swap-out{animation:listOut .18s ease both} #post-list.swap-in{animation:listIn .24s ease both} #post-list.is-loading{opacity:.55;filter:saturate(.9);transform:translateY(1px)} .post.is-hidden{display:none} /* Press */ a[href],button,[role="button"],.pressable{ transition:transform var(--press-duration) var(--press-ease), opacity var(--press-duration) var(--press-ease), box-shadow var(--press-duration) var(--press-ease) } .is-pressing{transform:translateY(var(--press-dy)) scale(var(--press-scale))} @media (prefers-reduced-motion:reduce){ a[href],button,[role="button"],.pressable{transition:none}.is-pressing{transform:none} } /* Page transition */ #page.ready{animation:fadeInUp .28s ease both} #page.fade-out{animation:fadeOutUp .22s ease both} @keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeOutUp{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-16px)}} @media (prefers-reduced-motion:reduce){#page.ready,#page.fade-out{animation:none !important}} /* 스크린리더 전용 텍스트 */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* ===== Right-side banner rail ===== */ .banner-rail{ position:fixed; left: calc(50% + var(--page-max)/2 + 28px); top: 120px; width: var(--banner-w); display:flex; flex-direction:column; gap:10px; z-index: 2; } .banner-chip{ display:block; width:var(--banner-w); height:var(--banner-h); border-radius:var(--banner-radius); overflow:hidden; border:1px solid var(--chip-border); background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.04); position:relative; will-change:transform, box-shadow; transition:box-shadow .28s var(--press-ease), border-color .2s ease; } .banner-chip::before{ content:""; position:absolute; inset:0; background:#fafafa; background-image:var(--bg, none); background-size:cover; background-position:center; transition:transform .35s var(--press-ease), filter .35s var(--press-ease), opacity .35s var(--press-ease); } .banner-chip:hover{ border-color:#ddd; box-shadow:0 8px 22px rgba(0,0,0,.08); } .banner-chip:hover::before{ transform:scale(1.03); filter:saturate(1.06) contrast(1.03); } .banner-chip:active::before{ transform:scale(.99); } .banner-chip .banner-label{ position:absolute; left:12px; right:12px; top:50%; transform:translateY(-50%); font-size:.92rem; color:#222; text-shadow:0 1px 0 rgba(255,255,255,.9); } @media (prefers-reduced-motion:reduce){ .banner-chip, .banner-chip::before{ transition:none !important; } } @media (max-width:1200px){ .banner-rail{ display:none; } } /* ===== Editor page ===== */ .editor-main, .editor, .preview-pane { min-width:0; } body.editor-page{ max-width:none; width:100%; margin:0; padding:0 16px; background:#fdfdfd; color:#222; font-family:'Gowun Dodum',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; } body.editor-page input, body.editor-page button, body.editor-page textarea{ font-family:inherit; } /* 패널/백드롭 기본 */ .side-panel { transform: translateX(100%); transition: transform .2s ease; } body.side-open .side-panel { transform: translateX(0); } /* 백드롭 토글 */ #sideBackdrop { display: none; } body.side-open #sideBackdrop { display: block; } /* ───── 데스크탑에서 목록 접힘 상태 ───── */ @media (min-width: 901px){ body.side-collapsed .editor-layout { grid-template-columns: 1fr; } body.side-collapsed .editor-side { display: none; } body.side-collapsed .editor-main { grid-column: 1 / -1; } } /* 참고: 이미 모바일 오버레이(side-open)는 기존 규칙 유지 */ /* 헤더 & 툴바 정렬 */ body.editor-page header, body.editor-page .editor-toolbar-sticky{ max-width:var(--shell-max); margin:0 auto; } /* Header */ body.editor-page header{ gap:12px;padding:14px 16px;border-bottom:1px solid #e5e5e5; position:sticky;top:0;background:#fff;z-index:3 } body.editor-page input,body.editor-page button{ border-radius:var(--radius-sm);border:1px solid #d9d9d9;background:#fff;color:#222;padding:8px 10px } body.editor-page button{cursor:pointer;transition:background .15s ease,transform .05s ease,box-shadow .15s ease} body.editor-page button:hover{background:#f3f4f6} body.editor-page button:active{transform:translateY(1px)} body.editor-page .row{display:flex;gap:12px;margin-bottom:12px} body.editor-page .row input{flex:1} body.editor-page a{color:#666;text-decoration:none;transition:transform .05s ease,opacity .15s ease} body.editor-page a:hover{opacity:.9;transform:translateY(1px)} /* 로그인 전 가리기 */ .wrap{display:none} body.editor-page .editor-toolbar-sticky{display:none} body.editor-page.authed .editor-toolbar-sticky{display:flex} body.editor-page.authed .wrap{display:block} body.editor-page.authed header .auth-only{display:inline-block} body.editor-page.authed #lock{display:none} /* 잠금 오버레이 */ #lock{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom); background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(250,250,250,.96)); backdrop-filter:saturate(1.05) blur(1.5px); } #lock .panel{ width:min(420px, 92vw); background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:18px; box-shadow:0 10px 28px rgba(0,0,0,.08); } #lock h2{ margin:0 0 12px 0; font-size:18px; font-weight:600; text-align:center; letter-spacing:.2px; } #lock .row{ display:flex; gap:10px; align-items:center; margin-top:8px; } #lock input{ flex:1 1 auto; min-width:0; height:40px; padding:0 12px; border:1px solid #d9d9d9; border-radius:10px; background:#fff; color:#222; font: 14px/1.2 'Gowun Dodum', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; } #lock button{ height:40px; padding:0 14px; border-radius:10px; border:1px solid #111; background:#111; color:#fff; cursor:pointer; font: 14px/1 'Gowun Dodum', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; transition:background .15s ease, transform .05s ease, box-shadow .15s ease; } #lock button:hover{ background:#000; } #lock button:active{ transform:translateY(1px); } #lock .hint{ margin-top:10px; font-size:12px; color:#666; text-align:center; } /* Toolbar */ .editor-toolbar-sticky{ position:sticky; top:0; z-index:9; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.05) blur(2px); border-bottom:1px solid #eaeaea; display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; padding:10px 16px; } .editor-toolbar-sticky button{ display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 12px; line-height:1; gap:6px; } .editor-toolbar-sticky label{ display:inline-flex; align-items:center; gap:8px; height:36px; } .editor-toolbar-sticky select, .editor-toolbar-sticky button{ height:36px; border-radius:var(--radius-sm); border:1px solid #ddd; background:#fff; padding:0 12px; font-size:14px; } #previewToggleBtn{ background:#fafafa; } #previewToggleBtn[aria-pressed="true"]{ background:#111; color:#fff; border-color:#111; box-shadow:inset 0 1px 0 rgba(255,255,255,.06) } /* published 스위치 */ #publishedToggle{ appearance:none; -webkit-appearance:none; outline:none; cursor:pointer; width:38px; height:22px; border-radius:999px; border:1px solid #ccc; background:#ddd; position:relative; vertical-align:middle; margin:0 2px 0 0; transition:background .2s,border-color .2s; } #publishedToggle::before{ content:""; position:absolute; left:2px; top:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.15); transition:transform .2s; } #publishedToggle:checked{ background:#111; border-color:#111 } #publishedToggle:checked::before{ transform:translateX(16px) } /* status/permalink 칩 */ #status{ font-size:12px; color:#555; background:#fafafa; border:1px solid #eee; border-radius:999px; padding:2px 8px } /* 에디터/프리뷰 폭을 본문 폭에 맞춤 */ .editor{ max-width:var(--page-max); width:100%; margin:0 auto; } /* ===== Preview panel sizing (보이는 높이 보장) ===== */ .preview-pane{ border-left:1px solid #eee; min-height:60vh; /* 부모 자체에 높이 부여 */ } .preview-pane > iframe{ display:block; width:100%; margin:0 auto; height:60vh; /* iframe도 확실한 높이 */ min-height:320px; border:0; } /* 반반 모드에서 양쪽이 정말 1:1로 차도록, 내부 max-width 해제 */ .editor-split.show-preview .editor{ max-width:none; /* ← 기존 .editor { max-width: var(--page-max) } 무력화 */ margin:0; } .editor-split.show-preview .preview-pane > iframe{ max-width:none; /* ← iframe의 max-width도 해제해 진짜 반반 */ } /* 숨김/표시 규칙 유지 */ #previewPane[hidden]{ display:none !important; } .editor-split .preview-pane{ display:none; } .editor-split.show-preview .preview-pane{ display:block; } @media (max-width:900px){ .preview-pane{ min-height:50vh; } .preview-pane > iframe{ height:50vh; } } /* Layout */ .editor-layout{ display:grid; grid-template-columns: var(--side-w) minmax(0,1fr); /* 2열만 */ gap:0; min-height:calc(100dvh - 58px); max-width: var(--shell-max); margin: 0 auto; } /* Side (desktop dock) */ .editor-side{ position:relative; transform:none; box-shadow:none; display:flex; flex-direction:column; overflow:hidden; border-right:1px solid #e5e5e5; background:#fafafa; z-index:1; } .editor-side.open{ transform:translateX(0); } .side-backdrop{ position: fixed; /* 문서 흐름에서 빼서 겹치게 */ inset: 0; /* 화면 전체 덮기 */ background: rgba(0,0,0,.12); /* 살짝 어둡게 (원하면 0으로) */ display: none; z-index: 1000; /* 사이드 패널(1001)보다 낮게 */ pointer-events: none;/* 닫히기 전까진 이벤트 막기 */ } body.side-open .side-backdrop{ display: block; pointer-events: auto; /* 열렸을 때 클릭으로 닫히게 */ } .side-head{ display:flex; gap:8px; padding:8px; position:sticky; top:0; background:#fafafa; z-index:2; border-bottom:1px solid #eee } .side-head input[type="text"]{ flex:1 1 auto; min-width:0; height:34px; border:1px solid #ddd; border-radius:10px; padding:0 12px 0 34px; background:#fff url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%23888' stroke-width='2'/%3E%3Cpath d='M20 20L16.65 16.65' stroke='%23888' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 10px 50%; } .only-mobile{ display:none; } .virtual-list{ flex:1 1 auto; min-height:0; overflow:auto } .virtual-row{border-bottom:1px solid #eee;padding:10px 12px;background:#fff;cursor:pointer} .virtual-row:hover{background:#f8f8f8} .virtual-row.active{outline:2px solid rgba(0,120,255,.25)} /* Main */ .editor-main { display:grid; grid-template-columns: minmax(0,1fr); gap:16px; padding:16px 0; } .editor-extras { display:none; } .editor-main:has(> .editor-extras > .toc-panel:empty){ grid-template-columns:1fr; } .editor-extras:has(> .toc-panel:empty){ display:none; } .editor-extras{display:flex;flex-direction:column;gap:12px} .toc-panel{position:sticky;top:58px;max-height:calc(100dvh - 88px);overflow:auto;border-left:1px solid #eee;padding-left:10px;color:#666;font-size:.92rem} .toc-panel a{display:block;padding:2px 0;text-decoration:none} .toc-panel a:is(:hover,.is-active){color:#111;font-weight:600} /* TOC가 있을 때만 2열 */ .editor-main.toc-visible { grid-template-columns: minmax(0,1fr) 240px; } .editor-main.toc-visible .editor-extras { display:flex; } .editor-split{ display:grid; grid-template-columns:minmax(0,1fr); gap:0; align-items:start; } .editor-split.show-preview{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:24px; } .preview-pane{border-left:1px solid #eee} /* 프리뷰 패널 숨김/표시 보장 */ #previewPane[hidden] { display: none !important; } .editor-split .preview-pane { display: none; } .editor-split.show-preview .preview-pane { display: block; } /* 프리뷰 경계선이 남아 보이지 않도록 */ #previewPane { border-left: 1px solid var(--line, #eee); } #previewPane[hidden]{ display:none !important; } /* 액션 버튼들이 줄바꿈으로 세로로 떨어지지 않게 */ .row-actions { display:flex; gap:8px; flex-wrap:nowrap; } /* Scoped helpers */ .editor-page .hidden{display:none} .editor-page .muted{opacity:.8} .editor-page .faint{opacity:.6} .editor-page .small{font-size:12px} .editor-page .nowrap{white-space:nowrap} .editor-page .ml-auto{margin-left:auto} .editor-page .spacer{flex:1} .editor-page .pad-12{padding:12px} /* 에디터 본문 */ /* ===== Editor source