.navbar { display:flex; justify-content:center; align-items:center; background-color:#f06a10; padding:10px; position:sticky; top:0; z-index:50; }
.navbar ul { list-style:none; display:flex; gap:20px; margin:0; padding:0; }
.navbar a { display:block; padding:8px 14px; color:#fff; text-decoration:none; border-radius:6px; transition: background-color .2s ease, color .2s ease; }
.navbar a:hover { background-color: rgba(255,255,255,.18); }

h1 { color:#f06a10; text-align:center; font-family: Arial, sans-serif; margin: 32px 0 16px; }

.wrap { max-width: 1000px; margin: 0 auto; padding: 16px; }
.content { padding:20px; background-color:#dedede; border-radius:10px; box-shadow:0 0 10px 0 rgba(0,0,0,.1); width:100%; max-width: 900px; margin: 24px auto; font-family: Arial, sans-serif; }
.content h3 { color:#f06a10; margin:0 0 6px; }
.content p { color:#000; }

.searchbar { display:grid; grid-template-columns: 1fr 170px 170px auto; gap:.5rem; margin: 12px auto 8px; max-width:900px; }
.searchbar input, .searchbar button { padding:10px; border-radius:8px; border:1px solid #ccc; font-family:Arial, sans-serif; }
.searchbar button { background:#f06a10; color:#fff; border:none; cursor:pointer; }
.searchbar button:hover { filter: brightness(1.05); }

.card { background:#fff; border-radius:12px; box-shadow:0 1px 6px rgba(0,0,0,.08); padding:16px 18px; margin:14px 0; }
.meta { color:#666; font-size:.9rem; margin-bottom:.35rem; }
.title { font-size:1.25rem; font-weight:700; margin:.1rem 0 .4rem; color:#1f2937; }

.pagination { display:flex; gap:.4rem; justify-content:center; margin: 18px 0 6px; }
.pagination a, .pagination span { padding:.35rem .6rem; border:1px solid #ccc; border-radius:8px; text-decoration:none; color:#111; }
.pagination .active { background:#eee; font-weight:700; }

body { margin:0; background:#f3f3f3; }
@media (max-width: 720px){ .searchbar { grid-template-columns: 1fr 1fr; } }

.profile { display:flex; flex-direction:column; gap:12px; background:#ffffff; border-radius:12px; box-shadow:0 1px 6px rgba(0,0,0,.08); padding:16px 18px; margin:14px 0; }
.profile-inside {margin: 0 auto;}
.profile * { font-family: 'Courier New', Courier, monospace;}
.text-input { border-radius: 10px; border-width: 1px; background-color: #f3f3f3;}
.textarea-input { border-radius: 10px; border-width: 1px; background-color: #f3f3f3; }

.post{ display:flex; flex-direction:column; padding:20px; background-color:#dedede; border-radius:10px; box-shadow:0 0 10px 0 rgba(0,0,0,.1); width:100%; max-width: 900px; margin: 24px auto; font-family: Arial, sans-serif;}
.post_inside {margin: 0 auto; min-width: 100%;}
.post_text { border-radius: 10px; border-width: 1px; background-color: #fff; border-radius:12px; box-shadow:0 1px 6px rgba(0,0,0,.08); padding:16px 18px; margin:14px 0; min-width: 80%;}
.post_textarea { border-radius: 10px; border-width: 1px; background-color: #fff; border-radius:12px; box-shadow:0 1px 6px rgba(0,0,0,.08); padding:16px 18px; margin:14px 0; min-width: 80%; min-height: 5em;}
.post button { padding:10px; border-radius:8px; border:1px solid #ccc; font-family:Arial, sans-serif; background:#f06a10; color:#fff; border:none; cursor:pointer; min-width: 5em;}
.post button:hover { filter: brightness(1.05); }

.link { color: #f06a10}