:root{font-family:Arial,"Malgun Gothic",sans-serif;color:#282828;background:#f2f2ef;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:#f2f2ef;font-size:14px}.page{max-width:920px;min-height:100vh;margin:0 auto;padding:0 48px;background:#fff;box-shadow:0 0 18px #00000008}.write-section{padding:30px 0 31px;border-bottom:1px solid #ddd}h1,h2,p{margin:0}h1{font-size:18px;font-weight:600;margin-bottom:14px}.compose-card{border:2px solid #222;background-color:#fff;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 35px,#dce4ee 36px);padding:13px 16px 12px 20px}.compose-top{height:25px;display:flex;align-items:center;justify-content:space-between}.compose-top input{width:220px;border:0;outline:0;background:transparent;font:13px Arial,"Malgun Gothic",sans-serif;color:#222}.compose-top input::placeholder,textarea::placeholder{color:#9a9a9a}.compose-date{font-size:11px;color:#888}textarea{display:block;width:100%;height:106px;resize:vertical;border:0;outline:0;background:transparent;color:#222;padding:0;font:14px/36px Arial,"Malgun Gothic",sans-serif}.compose-bottom{min-height:30px;display:flex;align-items:center;justify-content:space-between}.compose-tools,.submit-side{display:flex;align-items:center;gap:12px}.attach-button{font-size:12px;color:#555;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.photo-hint,.submit-side>span,.demo-caption{font-size:11px;color:#888}.submit-button{border:1px solid #555;background:#555;color:#fff;padding:7px 19px;font-size:12px;cursor:pointer}.submit-button:hover{background:#333}.demo-caption{margin-top:9px;text-align:right}.image-preview{padding:6px 0}.image-preview img{max-width:180px;max-height:100px;object-fit:cover;border:1px solid #ddd}.image-preview .delete-button{border:0;background:none;color:#555;font-size:11px;text-decoration:underline;cursor:pointer;margin-left:8px}.notes-section{padding:26px 0 40px}.notes-header{height:33px;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #bbb;margin-bottom:0}h2{font-size:16px;font-weight:600}.notes-header h2 span{font-size:12px;font-weight:400;color:#777;margin-left:5px}.sort-label{font-size:11px;color:#777}.notes-list{display:block}.note-card{position:relative;min-height:112px;padding:12px 10px 13px 46px;border-bottom:1px solid #dce4ee;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 35px,#e6edf5 36px);background-position:0 0}.note-card:before{content:attr(data-index);position:absolute;left:13px;top:14px;color:#888;font-size:11px;font-variant-numeric:tabular-nums}.note-head{display:flex;align-items:center;gap:9px;min-height:22px;margin-bottom:7px}.note-avatar{display:none}.note-author{font-size:12px;font-weight:600}.note-date{font-size:11px;color:#888;margin-left:auto}.delete-button{border:0;background:transparent;color:#666;font-size:12px;cursor:pointer;padding:4px 2px;text-decoration:underline}.delete-button:hover{color:#111}.note-body{font-size:13px;line-height:1.8;color:#333;white-space:pre-wrap;overflow-wrap:anywhere}.note-image{display:block;max-width:min(100%,360px);max-height:230px;margin-top:8px;object-fit:cover;border:1px solid #ddd}.note-tag{display:none}footer{border-top:1px solid #ddd;padding:18px 0;color:#999;font-size:11px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:600px){.page{padding:0 18px}.write-section{padding:23px 0}.compose-card{padding:11px 10px 10px 13px}.compose-top input{width:160px}textarea{height:98px;font-size:13px}.notes-section{padding-top:22px}.note-card{padding-left:39px;min-height:108px}.note-card:before{left:9px}.note-date{font-size:10px}.note-body{font-size:12px}.submit-side{gap:8px}.submit-button{padding:7px 15px}}
.app-message{margin:10px 0;padding:9px 11px;border:1px solid #ddd;background:#fafafa;color:#555;font-size:12px;line-height:1.5}.app-message[data-kind="error"]{border-color:#cda6a6;color:#8b2929}
textarea{font-size:18px}.note-body{font-size:17px}@media(max-width:600px){textarea{font-size:17px}.note-body{font-size:16px}}
.compose-card{border:1px solid #cfd4db}