@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
    :root { --bg:#f4f5f7; --surface:#fff; --text:#222; --sub:#8b95a1; --border:#e5e8eb; --primary:#191f28; --soft:#eff1f3; }
    [data-theme="dark"] { --bg:#121212; --surface:#1e1e1e; --text:#eaeaea; --sub:#a0a0a0; --border:#333; --primary:#4a90e2; --soft:#2a2a2a; }
    * { box-sizing:border-box; }
    html,body,.topbar,.doc,.editor,.icon-btn,.back-btn,input,textarea { transition:background-color 220ms ease,color 220ms ease,border-color 220ms ease; }
    body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
    button,input,textarea { font:inherit; }
    .topbar { position:sticky; top:0; z-index:10; height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 24px; background:var(--surface); border-bottom:1px solid var(--border); }
    .brand { display:flex; min-width:0; align-items:center; gap:9px; font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:19px; font-weight:600; white-space:nowrap; user-select:none; -webkit-user-select:none; cursor:default; }
    .brand-logo { width:30px; height:30px; flex:none; border-radius:8px; object-fit:contain; cursor:pointer; }
    .brand-logo.logo-easter-spin { animation:logo-easter-spin 820ms cubic-bezier(.22,.72,.25,1); }
    @keyframes logo-easter-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
    .top-actions { display:flex; align-items:center; gap:8px; }
    .icon-btn,.back-btn { border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; }
    .icon-btn { width:38px; height:38px; border-radius:50%; }
    .back-btn { min-height:38px; padding:0 14px; gap:6px; border-radius:10px; text-decoration:none; display:flex; align-items:center; justify-content:center; }
    .publish-button { align-items:center; justify-content:center; min-height:38px; padding:0 14px; border:1px solid var(--primary); border-radius:9px; background:var(--primary); color:#fff; cursor:pointer; font-size:12px; font-weight:750; }
    .publish-button:hover { opacity:.88; }
    .docs-shell { display:grid; grid-template-columns:240px minmax(0,920px); justify-content:center; min-height:calc(100vh - 64px); }
    .docs-sidebar { position:sticky; top:64px; align-self:start; height:calc(100vh - 64px); padding:30px 20px; border-right:1px solid var(--border); background:var(--surface); }
    .sidebar-heading { margin:0 8px 12px; color:var(--sub); font-size:11px; font-weight:750; text-transform:uppercase; }
    .category-nav { display:grid; gap:4px; }
    .category-button { display:flex; align-items:center; justify-content:space-between; min-height:42px; padding:0 12px; border:0; border-radius:8px; background:transparent; color:var(--sub); cursor:pointer; text-align:left; transition:background-color 220ms ease,color 220ms ease,transform 220ms ease; }
    .category-button:hover { background:var(--soft); color:var(--text); }
    .category-button:active { transform:scale(.97); }
    .category-button.active { background:var(--soft); color:var(--text); font-weight:750; transform:translateX(3px); }
    .category-button small { min-width:22px; padding:2px 6px; border-radius:999px; background:var(--surface); color:var(--sub); text-align:center; transition:background-color 220ms ease,color 220ms ease,transform 220ms ease; }
    .category-button.active small { color:var(--primary); transform:scale(1.06); }
    .sidebar-note { position:absolute; right:20px; bottom:24px; left:20px; display:grid; gap:5px; padding-top:18px; border-top:1px solid var(--border); }
    .sidebar-note strong { font-size:12px; }.sidebar-note span { color:var(--sub); font-size:11px; line-height:1.5; }
    main { width:100%; margin:0; padding:38px 42px 64px; }
    .page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; }
    .page-eyebrow { display:block; margin-bottom:8px; color:var(--primary); font-size:11px; font-weight:750; }
    .document-count { flex:none; color:var(--sub); font-size:12px; }
    .document-tools { display:flex; align-items:center; gap:12px; flex:none; }
    .sort-control { display:flex; padding:3px; border:1px solid var(--border); border-radius:8px; background:var(--surface); }
    .sort-control button { min-height:30px; padding:0 10px; border:0; border-radius:6px; background:transparent; color:var(--sub); cursor:pointer; font-size:11px; transition:background-color 180ms ease,color 180ms ease,transform 180ms ease; }
    .sort-control button:hover { color:var(--text); }
    .sort-control button.active { background:var(--soft); color:var(--text); font-weight:750; transform:scale(1.02); }
    h1 { margin:0 0 8px; font-size:28px; letter-spacing:0; }
    .page-head p { margin:0; color:var(--sub); font-size:14px; }
    .docs-search { display:flex; align-items:center; gap:9px; min-height:44px; margin-bottom:18px; padding:0 13px; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--sub); }
    .docs-search:focus-within { border-color:var(--primary); }
    .docs-search input { width:100%; border:0; outline:0; background:transparent; color:var(--text); font-size:13px; }
    .editor { display:none; padding:18px; margin-bottom:24px; background:var(--surface); border:1px solid var(--border); border-radius:14px; }
    .editor.visible { display:block; }
    .editor-title { margin:0 0 14px; font-size:15px; }
    .editor-grid { display:grid; grid-template-columns:2fr 1fr; gap:10px; }
    .field { margin-bottom:12px; }
    .field label { display:block; margin-bottom:6px; color:var(--sub); font-size:12px; font-weight:650; }
    .field input,.field textarea { width:100%; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--text); outline:none; padding:12px 14px; }
    .field select { width:100%; min-height:43px; padding:0 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--text); outline:none; }
    .label-note { margin-left:5px; color:var(--sub); font-size:10px; font-weight:500; }
    .date-segments { display:grid; grid-template-columns:1.2fr .8fr .8fr .8fr .7fr .7fr; gap:6px; }
    .date-segments select { min-width:0; min-height:40px; padding:0 8px; border-radius:8px; font-size:11px; }
    .native-date-select { position:absolute !important; width:1px !important; height:1px !important; min-height:0 !important; padding:0 !important; overflow:hidden; clip:rect(0,0,0,0); opacity:0; pointer-events:none; }
    .date-custom-select { position:relative; min-width:0; }
    .date-select-button { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:40px; padding:0 9px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); cursor:pointer; font-size:11px; text-align:left; transition:border-color 160ms ease,background-color 160ms ease,box-shadow 160ms ease; }
    .date-select-button:hover { border-color:var(--sub); }
    .date-custom-select.open .date-select-button { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent); }
    .date-select-chevron { color:var(--sub); font-size:13px; transition:transform 160ms ease; }
    .date-custom-select.open .date-select-chevron { transform:rotate(180deg); }
    .date-select-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:70; display:none; width:max(100%,82px); max-height:220px; padding:5px; overflow-y:auto; border:1px solid var(--border); border-radius:10px; background:var(--surface); box-shadow:0 14px 34px rgba(0,0,0,.22); scrollbar-width:thin; scrollbar-color:var(--sub) transparent; }
    .date-custom-select.open .date-select-menu { display:grid; gap:2px; animation:date-menu-in 160ms cubic-bezier(.2,.8,.2,1); }
    .date-select-option { width:100%; min-height:32px; padding:0 9px; border:0; border-radius:7px; background:transparent; color:var(--text); cursor:pointer; font-size:11px; text-align:left; transition:background-color 130ms ease,color 130ms ease; }
    .date-select-option:hover,.date-select-option:focus-visible { background:var(--soft); outline:none; }
    .date-select-option.selected { background:color-mix(in srgb,var(--primary) 14%,var(--soft)); color:var(--primary); font-weight:750; }
    .date-select-menu::-webkit-scrollbar { width:7px; }.date-select-menu::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:999px; background:var(--sub); background-clip:padding-box; }
    @keyframes date-menu-in { from { opacity:0; transform:translateY(-5px) scale(.98); } to { opacity:1; transform:none; } }
    .category-select { position:relative; }
    .category-select-button { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:43px; padding:0 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--text); cursor:pointer; text-align:left; }
    .category-select-button[aria-expanded="true"] { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent); }
    .category-chevron { color:var(--sub); font-size:15px; transition:transform 160ms ease; }
    .category-select-button[aria-expanded="true"] .category-chevron { transform:rotate(180deg); }
    .category-select-menu { position:absolute; top:calc(100% + 6px); right:0; left:0; z-index:30; display:none; padding:6px; border:1px solid var(--border); border-radius:10px; background:var(--surface); box-shadow:0 14px 38px rgba(0,0,0,.18); }
    .category-select-menu.visible { display:grid; animation:category-menu-in 140ms ease-out; }
    .category-select-menu button { display:flex; align-items:center; justify-content:space-between; min-height:38px; padding:0 10px; border:0; border-radius:7px; background:transparent; color:var(--text); cursor:pointer; text-align:left; font-size:12px; }
    .category-select-menu button:hover,.category-select-menu button:focus-visible { background:var(--soft); outline:none; }
    .category-select-menu button span { visibility:hidden; color:var(--primary); font-weight:800; }
    .category-select-menu button.selected { color:var(--primary); font-weight:750; }
    .category-select-menu button.selected span { visibility:visible; }
    @keyframes category-menu-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
    .file-picker { display:flex; align-items:center; gap:10px; min-height:48px; padding:6px; border:1px solid var(--border); border-radius:10px; background:var(--bg); }
    .file-picker input { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
    .file-picker-button { display:inline-flex !important; align-items:center; justify-content:center; gap:5px; min-height:36px; margin:0 !important; padding:0 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text) !important; font-size:12px !important; font-weight:700 !important; cursor:pointer; white-space:nowrap; transition:background-color 160ms ease,border-color 160ms ease; }
    .file-picker-button:hover { background:var(--soft); border-color:var(--sub); }
    .file-picker input:focus-visible + .file-picker-button { outline:2px solid var(--primary); outline-offset:2px; }
    .file-picker-name { min-width:0; overflow:hidden; color:var(--sub); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
    .field textarea { min-height:160px; resize:vertical; line-height:1.65; }
    .conditional-field { display:none; }
    .conditional-field.visible { display:block; animation:category-menu-in 140ms ease-out; }
    .media-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .image-preview { display:none; margin:10px 0 14px; }
    .image-preview.visible { display:grid; width:100%; height:min(520px,60vh); place-items:center; overflow:hidden; border-radius:10px; background:var(--soft); }
    .image-preview img,.image-preview video { grid-area:1/1; max-width:100%; max-height:100%; margin:0 auto; object-fit:contain; border-radius:10px; }
    .doc-media { display:block; width:auto; max-width:100%; max-height:min(520px,65vh); margin:0 auto; object-fit:contain; border-radius:10px; background:var(--soft); }
    .image-preview video { display:none; }
    .doc-media { margin-top:16px; }
    .media-size-field { display:none; align-items:center; justify-content:space-between; gap:16px; margin:4px 0 14px; padding:11px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg); }
    .media-size-field.visible { display:flex; }
    .media-size-field > div:first-child { display:grid; gap:2px; }
    .media-size-field strong { font-size:12px; }
    .media-size-field span { color:var(--sub); font-size:10px; }
    .media-size-control { display:flex; align-items:center; gap:8px; }
    .media-size-actions { display:flex; align-items:center; gap:10px; }
    .media-size-control button { width:30px; height:30px; border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--text); cursor:pointer; font-size:16px; }
    .media-size-control input { width:150px; accent-color:var(--primary); }
    .media-size-control output { width:38px; color:var(--text); font-size:11px; font-variant-numeric:tabular-nums; text-align:right; }
    .remove-media-button { min-height:30px; padding:0 9px; border:1px solid color-mix(in srgb,#ff3b30 35%,var(--border)); border-radius:7px; background:transparent; color:#ff3b30; cursor:pointer; font-size:11px; white-space:nowrap; }
    .remove-media-button:hover { background:color-mix(in srgb,#ff3b30 9%,transparent); }
    .field input:focus,.field textarea:focus { border-color:var(--primary); }
    .editor-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
    .btn { min-height:40px; padding:0 16px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--border); cursor:pointer; line-height:1; }
    .btn.primary { background:var(--primary); border-color:var(--primary); color:#fff; }
    .btn.secondary { background:var(--surface); color:var(--text); }
    .docs-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:12px; transform-origin:50% 20%; }
    .docs-list.list-leaving { pointer-events:none; animation:list-leave 170ms ease-in both; }
    .docs-list.list-entering { animation:list-enter-forward 340ms cubic-bezier(.2,.8,.2,1) both; }
    .docs-list[data-direction="backward"].list-entering { animation-name:list-enter-backward; }
    .docs-list.sorting .doc { animation:sort-docs 280ms cubic-bezier(.2,.75,.25,1) both; }
    .docs-list.sorting .doc:nth-child(2n) { animation-delay:35ms; }
    .doc { padding:22px; background:var(--surface); border:1px solid var(--border); border-radius:14px; animation:enter 180ms ease-out both; }
    .doc-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
    .doc-head > div:first-child { min-width:0; }
    .doc h2 { margin:0; font-size:18px; letter-spacing:0; word-break:keep-all; overflow-wrap:break-word; line-break:strict; text-wrap:pretty; }
    .doc-category { display:inline-flex; margin-bottom:8px; padding:4px 7px; border-radius:6px; background:var(--soft); color:var(--sub); font-size:10px; font-weight:750; }
    .doc-meta { margin-top:6px; color:var(--sub); font-size:11px; }
    .version-badge { display:inline-flex; margin-top:8px; padding:4px 8px; border:1px solid var(--border); border-radius:6px; color:var(--primary); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:11px; font-weight:750; }
    .doc-content { margin-top:16px; white-space:pre-wrap; word-break:keep-all; overflow-wrap:break-word; line-break:strict; text-wrap:pretty; line-height:1.7; font-size:14px; }
    .structured-section div,.bug-fixes div { white-space:pre-wrap; word-break:keep-all; overflow-wrap:break-word; line-break:strict; text-wrap:pretty; }
    #docTitle,#docContent,#docPrerequisites,#docSteps,#docBugFixes { word-break:keep-all; overflow-wrap:break-word; line-break:strict; }
    .bug-fixes { margin-top:16px; padding:14px; border-left:3px solid var(--primary); border-radius:0 8px 8px 0; background:var(--soft); }
    .bug-fixes strong { display:block; margin-bottom:7px; font-size:12px; }.bug-fixes div { color:var(--sub); white-space:pre-wrap; font-size:13px; line-height:1.65; }
    .faq-doc h2 { line-height:1.5; }.faq-answer { padding:14px 16px; border-radius:8px; background:var(--soft); }
    .notice-effective-date { display:inline-flex; margin-top:12px; padding:6px 9px; border-radius:7px; background:var(--soft); color:var(--sub); font-size:11px; }
    .structured-section { margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
    .structured-section strong { display:block; margin-bottom:7px; font-size:12px; }
    .structured-section div { color:var(--sub); white-space:pre-wrap; font-size:13px; line-height:1.65; }
    .link-preview { display:flex; align-items:center; gap:12px; margin-top:14px; padding:13px 14px; border:1px solid var(--border); border-radius:12px; color:var(--text); text-decoration:none; background:var(--soft); }
    .link-preview strong,.link-preview span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .link-preview span { color:var(--sub); font-size:11px; margin-top:3px; }
    .reactions { display:flex; gap:5px; margin-top:13px; }
    .reaction { min-height:30px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text); padding:4px 8px; cursor:pointer; font-size:11px; line-height:1; }
    .reaction.active { border-color:var(--primary); color:var(--primary); background:var(--soft); }
    .doc-actions { display:flex; gap:6px; flex-shrink:0; }
    .doc-actions button { min-height:30px; padding:4px 8px; border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--sub); cursor:pointer; font-size:11px; }
    .doc-actions .danger { color:#ff3b30; }
    .empty { grid-column:1 / -1; width:100%; min-height:320px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; text-align:center; color:var(--sub); }
    .empty-icon { width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--soft); font-size:21px; }
    .empty strong { color:var(--text); font-size:15px; }
    .status { margin-bottom:12px; color:var(--sub); font-size:12px; }
    .dialog-overlay { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.48); backdrop-filter:blur(5px); }
    .dialog-overlay.visible { display:flex; animation:dialog-fade 160ms ease-out; }
    .dialog-box { width:min(360px,100%); padding:24px; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:0 18px 50px rgba(0,0,0,.2); text-align:center; }
    .dialog-icon { display:grid; width:46px; height:46px; margin:0 auto 12px; place-items:center; border-radius:50%; background:var(--soft); font-size:21px; }
    .dialog-box h2 { margin:0 0 8px; font-size:17px; }
    .dialog-box p { margin:0; color:var(--sub); font-size:13px; line-height:1.6; white-space:pre-wrap; }
    .dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
    .dialog-actions .btn { display:inline-flex; flex:1; align-items:center; justify-content:center; }
    @keyframes dialog-fade { from { opacity:0; } to { opacity:1; } }
    @keyframes enter { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
    @keyframes sort-docs { from { opacity:.35; transform:translateY(7px) scale(.99); } to { opacity:1; transform:none; } }
    @keyframes list-leave { from { opacity:1; transform:translateY(0) scale(1); } to { opacity:0; transform:translateY(8px) scale(.992); } }
    @keyframes list-enter-forward { from { opacity:0; transform:translateX(18px) translateY(5px); } to { opacity:1; transform:none; } }
    @keyframes list-enter-backward { from { opacity:0; transform:translateX(-18px) translateY(5px); } to { opacity:1; transform:none; } }
    @media (max-width:780px) { .docs-shell { display:block; }.docs-sidebar { position:sticky; top:64px; z-index:8; width:100%; height:auto; padding:10px 16px; overflow-x:auto; border-right:0; border-bottom:1px solid var(--border); }.sidebar-heading,.sidebar-note{display:none}.category-nav{display:flex; width:max-content}.category-button{gap:8px; min-height:36px}main{padding:26px 20px 56px}.editor-grid{grid-template-columns:1fr}.docs-list{grid-template-columns:1fr} }
    @media (max-width:600px) { .topbar { padding:0 12px; gap:10px; }.brand{gap:7px;font-size:17px}.brand-logo{width:27px;height:27px;border-radius:7px}.top-actions{gap:5px}.publish-button{padding:0 10px}.back-btn{width:38px;padding:0}.back-btn-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} .page-head { align-items:flex-start; flex-direction:column; }.document-tools{width:100%;justify-content:space-between}.doc-head { flex-direction:column; } .media-row { grid-template-columns:1fr; }.date-segments{grid-template-columns:repeat(3,1fr)}.image-preview.visible{height:min(380px,52vh)}.media-size-field{align-items:flex-start;flex-direction:column}.media-size-actions{align-items:stretch;flex-direction:column;width:100%}.media-size-control{width:100%}.media-size-control input{flex:1;min-width:0} }
    @media (max-width:390px) { .brand{font-size:15px}.brand-logo{width:25px;height:25px}.icon-btn{width:34px;height:34px}.publish-button{min-height:34px;padding:0 8px;font-size:11px}.back-btn{width:34px;min-height:34px}main{padding-right:14px;padding-left:14px} }
    @media (prefers-reduced-motion:reduce) { .doc,.docs-list.sorting .doc,.docs-list.list-leaving,.docs-list.list-entering { animation:none; }.sort-control button,.category-button,.category-button small{transition:none} }