@font-face{font-family:Pretendard;src:url('/fonts/PretendardJPVariable.ttf') format('truetype');font-weight:100 900;font-display:swap}

:root{--header:#e9e9e6;--ink:#171719;--muted:#aaa9ad;--line:#dededb;--soft:#f5f5f2;--danger:#a23b3b}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#fff;color:var(--ink);font-family:Pretendard,sans-serif}
button,input,textarea,select{font:inherit;color:inherit}
button,a{cursor:pointer}
.app-header{height:64px;background:var(--header);display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:0 24px;position:sticky;top:0;z-index:20}
.menu-toggle{width:46px;height:46px;border:0;background:transparent;padding:10px;display:grid;align-content:center;gap:5px;justify-self:start}
.menu-toggle span{display:block;width:35px;height:6px;border-radius:4px;background:#97989d}
.save-state{font-size:13px;color:#999}
.save-button,.round-action{border:0;background:#1d1d1f;color:#fff;border-radius:999px;padding:9px 16px;text-decoration:none;font-weight:650}
.list-header{grid-template-columns:60px 1fr auto}
.list-header h1{font-size:17px;margin:0;text-align:center;font-weight:650}
.menu-drawer{position:fixed;z-index:40;left:0;top:64px;width:min(318px,84vw);height:calc(100vh - 64px);padding:55px 50px;background:#fff;display:flex;flex-direction:column;gap:35px;transform:translateX(-105%);transition:transform .2s ease}
.menu-drawer a{color:#0c0c0d;text-decoration:none;font-size:27px;line-height:1.1}
.menu-drawer a[aria-current=page]{font-weight:700}
.menu-backdrop{display:none;position:fixed;inset:64px 0 0;background:rgba(0,0,0,.12);z-index:30}
body.menu-open .menu-drawer{transform:none}
body.menu-open .menu-backdrop{display:block}
.write-layout{min-height:calc(100vh - 64px)}
.write-form{min-height:calc(100vh - 64px);max-width:900px;margin:0 auto;padding:30px 24px 112px;display:grid;grid-template-rows:auto 1fr auto;position:relative}
.title-row{display:flex;flex-direction:column;border-bottom:1px solid var(--line);min-width:0;font-weight:570;line-height:1.25}
.filename-prefix{display:block;color:#777;font-size:15px;line-height:1.4;white-space:nowrap}
.title-input{border:0;outline:0;background:transparent;width:100%;min-width:0;min-height:1.5em;overflow:hidden;resize:none;padding:3px 0 5px;font-size:17px;font-weight:570;line-height:1.35;overflow-wrap:anywhere;word-break:break-word}
.title-input::placeholder,#bodyInput::placeholder{color:#b8b8bb;opacity:1}
#bodyInput{border:0;outline:0;resize:none;width:100%;min-height:calc(100vh - 264px);padding:13px 0 30px;font-size:17px;line-height:1.7}
.editor-tools{position:fixed;bottom:0;left:0;right:0;height:52px;background:#fff;border-top:1px solid #eee;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 900px)/2 + 24px));color:#aaa;font-size:13px;z-index:15}
.note-link-bar{position:fixed;left:0;right:0;bottom:52px;height:52px;z-index:16;background:#fff;border-top:1px solid var(--line);display:flex;align-items:center;padding:0 max(24px,calc((100vw - 900px)/2 + 24px))}
.note-link-bar input{width:100%;min-width:0;border:1px solid var(--line);border-radius:999px;background:var(--soft);padding:8px 14px;outline:0}
.note-link-results{position:absolute;left:max(24px,calc((100vw - 900px)/2 + 24px));right:max(24px,calc((100vw - 900px)/2 + 24px));bottom:46px;max-height:min(320px,45vh);overflow:auto;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 -10px 30px rgba(0,0,0,.08)}
.note-link-results button{display:block;width:100%;text-align:left;border:0;border-top:1px solid var(--line);border-radius:0;background:#fff;padding:10px 12px;overflow-wrap:anywhere;word-break:break-word}
.note-link-results button:first-child{border-top:0}
.note-link-results span{display:block;color:#999;font-size:12px;margin-top:2px}
.note-link-empty{padding:13px;color:#999;font-size:13px}
.format-toggle{border:0;background:none;font-size:15px;padding:8px 0}
.drop-zone{display:none;position:fixed;inset:84px 20px 124px;z-index:60;border:3px dashed #8d8e93;border-radius:20px;background:rgba(255,255,255,.94);align-items:center;justify-content:center;text-align:center;color:#666;font-size:20px;font-weight:650;pointer-events:none}
body.file-dragging .drop-zone{display:flex}
body.file-dragging .drop-zone.dragging{border-color:#1d1d1f;background:rgba(245,245,242,.97);color:#1d1d1f}
.tool-panel{position:fixed;bottom:104px;left:0;right:0;z-index:14;background:#fff;border-top:1px solid var(--line);padding:14px max(24px,calc((100vw - 900px)/2 + 24px));gap:10px;align-items:center;box-shadow:0 -10px 30px rgba(0,0,0,.05)}
.tool-panel:not(.hidden){display:flex;flex-wrap:wrap}
.tool-panel button,.tag-buttons button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 12px}
.tag-buttons{display:flex;gap:7px;flex-wrap:wrap}
.hidden{display:none!important}
.preview-panel{display:none}
.content-layout{max-width:900px;margin:0 auto;padding:32px 24px 70px}
.filters{display:grid;grid-template-columns:1fr 76px 125px auto;gap:8px;margin-bottom:24px}
.filters input,.filters select{border:1px solid var(--line);border-radius:12px;background:#fff;padding:11px 12px;min-width:0}
.text-button{border:0;background:transparent;color:#777}
.note-item{padding:24px 0;border-top:2px solid #8f8f8b}
.note-item header{display:flex;align-items:baseline;gap:12px}
.note-item h2{font-size:34px;line-height:1.25;margin:0;min-width:0;overflow-wrap:anywhere;word-break:break-word}
.note-title span{display:block}
.note-title .note-saved-at{font-size:16px;line-height:1.35;color:#777;font-weight:520;margin-bottom:3px}
.note-actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex:0 0 auto}
.edit-link{margin-left:auto;color:#777;text-decoration:none;font-size:13px}
.delete-link{border:0;background:transparent;padding:0;font-size:13px}
.markdown-body{font-size:17px;line-height:1.75;overflow-wrap:anywhere}
.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{line-height:1.25;margin:1em 0 .5em;overflow-wrap:anywhere;word-break:break-word}
.markdown-body h1{font-size:34px}
.markdown-body h2{font-size:25.5px}
.markdown-body h3{font-size:20px}
.markdown-body h4{font-size:17px}
.markdown-body h5{font-size:14px}
.markdown-body h6{font-size:12px}
.markdown-body hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.markdown-body img{max-width:100%;border-radius:10px}
.markdown-body pre{overflow:auto;background:var(--soft);padding:14px;border-radius:10px}
.markdown-body blockquote{margin-left:0;padding-left:14px;border-left:3px solid var(--line);color:#777}
.tag-chip{color:#777}
.load-more{display:block;margin:22px auto;border:0;border-radius:999px;background:var(--soft);padding:11px 24px;color:#555}
.data-actions{display:flex;gap:12px;padding-top:22px;border-top:1px solid var(--line)}
.data-actions button,.data-actions a{border:0;border-radius:999px;background:var(--soft);padding:9px 14px;color:#555;text-decoration:none}
.storage-card{background:var(--soft);border-radius:20px;padding:24px;margin-bottom:26px}
.storage-card h2{margin:3px 0 5px}
.storage-card p{color:#777}
.eyebrow{font-size:11px;letter-spacing:.12em}
.asset-summary{display:flex;gap:15px;align-items:center;margin-top:20px;font-size:13px}
.asset-summary .danger{margin-left:auto}
.danger{color:var(--danger)!important}
.asset-summary button{border:0;background:#fff;border-radius:999px;padding:8px 12px}
.asset-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--line)}
.asset-main{display:flex;gap:12px;align-items:center;min-width:0}
.asset-main img{width:54px;height:54px;object-fit:cover;border-radius:9px}
.asset-path{overflow-wrap:anywhere}
.asset-meta{font-size:12px;color:#999;margin-top:4px}
.asset-row button{border:0;background:var(--soft);border-radius:999px;padding:7px 11px}

.markdown-body ul,.markdown-body ol{padding-left:1.6em;margin:8px 0}
.markdown-body li{margin:0}
.markdown-body li+li{margin-top:.25em}
.markdown-body li>ul,.markdown-body li>ol{margin-top:.25em;margin-bottom:.25em}
.markdown-body li>p{margin:.25em 0}

@media(min-width:901px){.write-form{width:66.6667vw;max-width:none;margin:0 0 0 33.3333vw;padding:42px clamp(32px,5vw,88px) 124px}
.preview-panel.hidden{display:block!important;position:fixed;left:0;top:64px;bottom:0;width:33.3333vw;overflow:auto;padding:42px clamp(32px,5vw,88px) 70px;border-right:1px solid var(--line);background:#fafaf8}
.preview-panel h2{font-size:34px;line-height:1.25;margin:0 0 24px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.preview-panel .markdown-body{font-size:17px}
.editor-tools{left:33.3333vw;padding-left:clamp(32px,5vw,88px);padding-right:clamp(32px,5vw,88px)}
.note-link-bar{left:33.3333vw;padding-left:clamp(32px,5vw,88px);padding-right:clamp(32px,5vw,88px)}
.note-link-results{left:clamp(32px,5vw,88px);right:clamp(32px,5vw,88px)}
.tool-panel{left:33.3333vw;padding-left:clamp(32px,5vw,88px);padding-right:clamp(32px,5vw,88px)}
}

@media(max-width:600px){.app-header{height:64px;padding:0 18px}
.write-form{padding:30px 24px 112px}
.content-layout{padding:24px 18px 60px}
.filters{grid-template-columns:1fr 76px}
.filters #tagFilter{grid-column:1/2}
.filters #trashToggle{grid-column:2}
.note-item h2{font-size:34px}
.note-title .note-saved-at{font-size:15px}
.asset-summary{align-items:flex-start;flex-wrap:wrap}
.asset-summary .danger{margin-left:0;width:100%}
.menu-drawer{top:64px;height:calc(100vh - 64px)}
}