.note{padding:80px 24px 120px;max-width:720px;margin:0 auto}.note-header{text-align:center;margin-bottom:56px;padding-bottom:32px;border-bottom:1px solid var(--color-border)}.note-date{font-size:.875rem;color:var(--color-text-light);margin-bottom:20px;letter-spacing:.02em}.note-title{font-size:2.4rem;font-weight:700;color:var(--color-text);line-height:1.25;margin-bottom:18px;letter-spacing:-.01em}.note-desc{font-size:1.05rem;color:var(--color-text-light);line-height:1.5;max-width:600px;margin:0 auto}.note-cover{margin:0 0 56px;border-radius:8px;overflow:hidden}.note-cover img{width:100%;height:auto;display:block}.note-body{font-size:1.05rem;line-height:1.8;color:var(--color-text)}.note-body p{margin:0 0 1.5em}.note-body .note-youtube,.note-body div[data-youtube-video]{position:relative;width:70%;max-width:720px;aspect-ratio:16/9;margin:2em auto;border-radius:6px;overflow:hidden;background:#000}.note-body .note-youtube iframe,.note-body div[data-youtube-video] iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}@media(max-width:768px){.note-body .note-youtube,.note-body div[data-youtube-video]{width:100%}}.note-body h2{font-size:1.5rem;font-weight:600;margin:2em 0 .8em;line-height:1.4}.note-body h3{font-size:1.2rem;font-weight:600;margin:1.6em 0 .6em;line-height:1.4}.note-body ul,.note-body ol{margin:0 0 1.5em;padding-left:1.5em}.note-body ul li{list-style:disc;margin-bottom:.4em}.note-body ol li{list-style:decimal;margin-bottom:.4em}.note-body a{color:var(--color-green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}.note-body a:hover{opacity:.7}.note-body strong{font-weight:600;color:var(--color-text)}.note-body em{font-style:italic}.note-body code{background:#f4f4ee;padding:2px 6px;border-radius:4px;font-family:SF Mono,Consolas,monospace;font-size:.9em}.note-body pre{background:#f4f4ee;padding:16px 20px;border-radius:6px;overflow-x:auto;margin:0 0 1.5em}.note-body pre code{background:none;padding:0;font-size:.875rem;line-height:1.6}.note-body blockquote{border-left:3px solid var(--color-green);padding-left:20px;margin:0 0 1.5em;color:var(--color-text-light);font-style:italic}.note-body img{max-width:100%;height:auto;border-radius:6px;margin:0;display:inline-block}.note-body img:not([width]):not([style*=width]){width:100%}.note-body figure.note-figure{margin:0 0 1.5em;display:block;max-width:100%}.note-body figure.note-figure img{display:block;width:100%;height:auto;margin:0;border-radius:6px}.note-body figure.align-left{margin-right:auto;margin-left:0}.note-body figure.align-center{margin-left:auto;margin-right:auto}.note-body figure.align-right{margin-left:auto;margin-right:0}.note-body figure.align-wide{margin-left:-24px;margin-right:-24px;max-width:none;width:calc(100% + 48px)}.note-body figure.note-figure figcaption{font-size:.875rem;color:var(--color-text-light);margin-top:8px;line-height:1.5;font-style:italic;text-align:center}.note-body .image-row{margin:0 0 1.5em}.note-body .image-row[data-layout=row],.note-body .image-row:not([data-layout]){display:flex;flex-wrap:nowrap;gap:8px;align-items:flex-start}.note-body .image-row[data-row-align=left]{justify-content:flex-start}.note-body .image-row[data-row-align=center]{justify-content:center}.note-body .image-row[data-row-align=right]{justify-content:flex-end}.note-body .image-row figure.note-figure{flex:0 0 auto;min-width:0;margin:0}.note-body .image-row figure.note-figure:not([style*=width]){flex:1 1 0}.note-body .image-row figure.note-figure figcaption{display:none}.note-body .image-row[data-layout=collage]{position:relative;display:block}.note-body .image-row[data-layout=collage] figure.note-figure{margin:0}.note-body .image-row[data-layout=collage] figure.note-figure img{width:100%;height:100%;object-fit:cover}.note-body hr{border:none;border-top:1px solid var(--color-border);margin:3em 0}.note-footer{margin-top:80px;padding-top:32px;border-top:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}.note-back{font-size:.95rem;color:var(--color-text-light);transition:color .2s}.note-back:hover{color:var(--color-green)}.note-admin{display:flex;gap:6px}.note-admin .admin-edit,.note-admin .admin-delete{padding:5px 14px;font-size:.82rem;color:var(--color-text-light);background:transparent;border:1px solid var(--color-border);border-radius:4px;text-decoration:none;cursor:pointer;font-family:inherit}.note-admin .admin-edit:hover{background:#f4f4ee;color:var(--color-text)}.note-admin .admin-delete{color:#c0392b;border-color:#e6c0c0}.note-admin .admin-delete:hover{background:#fdf0f0}.note-lightbox{position:fixed;inset:0;background:#000000f0;display:flex;align-items:center;justify-content:center;z-index:2000;cursor:zoom-out;animation:lightbox-fade-in .15s ease}.note-lightbox[hidden]{display:none!important}@keyframes lightbox-fade-in{0%{opacity:0}to{opacity:1}}.note-lightbox .lightbox-img{max-width:92vw;max-height:88vh;width:auto;height:auto;cursor:default;object-fit:contain;border-radius:4px}.note-lightbox .lightbox-close,.note-lightbox .lightbox-prev,.note-lightbox .lightbox-next{position:absolute;background:#ffffff1a;color:#fff;border:none;border-radius:50%;cursor:pointer;font-family:inherit;transition:background .12s,transform .12s;display:flex;align-items:center;justify-content:center;line-height:1}.note-lightbox .lightbox-close:hover,.note-lightbox .lightbox-prev:hover,.note-lightbox .lightbox-next:hover{background:#fff3}.note-lightbox .lightbox-close{top:20px;right:20px;width:44px;height:44px;font-size:1.3rem}.note-lightbox .lightbox-prev,.note-lightbox .lightbox-next{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:2rem}.note-lightbox .lightbox-prev{left:24px}.note-lightbox .lightbox-next{right:24px}.note-lightbox .lightbox-prev:hover{transform:translateY(-50%) translate(-2px)}.note-lightbox .lightbox-next:hover{transform:translateY(-50%) translate(2px)}.note-lightbox .lightbox-caption{position:absolute;bottom:24px;left:50%;transform:translate(-50%);color:#ffffffbf;font-size:.875rem;max-width:80vw;text-align:center;font-style:italic;margin:0;line-height:1.5;pointer-events:none}@media(max-width:600px){.note-lightbox .lightbox-close{width:36px;height:36px;top:12px;right:12px;font-size:1.1rem}.note-lightbox .lightbox-prev,.note-lightbox .lightbox-next{width:40px;height:40px;font-size:1.4rem}.note-lightbox .lightbox-prev{left:8px}.note-lightbox .lightbox-next{right:8px}.note-lightbox .lightbox-caption{bottom:16px;font-size:.8rem}}@media(max-width:768px){.note{padding:56px 24px 80px}.note-header{margin-bottom:40px}.note-title{font-size:1.7rem}.note-desc{font-size:.95rem}.note-cover{margin-bottom:40px}.note-body{font-size:1rem}.note-body h2{font-size:1.25rem}.note-body h3{font-size:1.1rem}}
