@import"https://fonts.googleapis.com/css2?family=Pacifico&display=swap";header{width:100%;height:100px;border-bottom:1px solid var(--border-black);background:var(--bg);display:flex;justify-content:space-between;align-items:center;padding:0 40px;position:relative;z-index:10}header .logo{font-family:Pacifico,cursive;font-size:28px;font-weight:400;color:var(--text);letter-spacing:1px;text-decoration:none;transition:color .2s ease}header .logo:hover{color:var(--gray)}.header-menu{display:flex;align-items:center;gap:24px;margin-left:auto}.header-menu a,.logout-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 10px;background:none;border:none;color:var(--text);font-size:18px;font-weight:600;text-decoration:none;cursor:pointer;transition:color .15s ease,border-bottom .15s ease;border-bottom:2px solid transparent}.header-menu a:hover,.logout-btn:hover{color:var(--gray)}.header-menu a.active{color:var(--primary);border-bottom:2px solid var(--primary)}.logout-btn{padding:6px 10px}@media(max-width:640px){header{padding:0 20px;height:70px}header .logo{font-size:22px}.header-menu{gap:12px}.header-menu a,.logout-btn{font-size:15px}}.auth-section{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;transform:translateY(-7%)}.auth-title{font-family:Pretendard,sans-serif;font-weight:700;font-size:32px;margin-bottom:20px}.auth-box{width:392px;min-height:221px;background:var(--bg);display:flex;flex-direction:column;align-items:center;padding:24px;gap:10px;border:none}.auth-box label{align-self:flex-start;width:360px;font-weight:500;margin-top:4px;margin-bottom:6px}.auth-box input{width:360px;height:38px;border:1px solid var(--border-black);border-radius:8px;padding:8px;margin-bottom:8px}.auth-btn{width:360px;height:40px;background:var(--primary);border:none;border-radius:8px;color:#fff;font-weight:600;cursor:pointer;margin-top:6px;transition:.2s}.auth-btn:hover{opacity:.9}.signup-btn{width:90px;height:30px;background:transparent;color:#000;border:none;border-radius:6px;cursor:pointer;font-weight:500;margin:10px auto 0;display:block}.banner{width:100%;height:560px;background:url(/assets/banner-BMk7ipqw.jpg) center/cover no-repeat;display:flex;align-items:center;justify-content:center;position:relative}.banner:before{content:"";position:absolute;inset:0;background:#00000059}.banner-content{position:relative;text-align:center;color:#fff;transform:translateY(30px)}.banner-content h2{font-family:Pacifico,cursive;font-weight:400;font-size:30px;line-height:140%;margin-bottom:24px}.banner-content strong{font-weight:700}.create-post-btn{width:160px;height:52px;background:var(--primary);border:none;color:#fff;border-radius:16px;font-weight:600;font-size:17px;cursor:pointer;transition:.2s}.create-post-btn:hover{opacity:.9}.post-card{background:#fff;border-radius:14px;box-shadow:0 4px 8px #0000001a;display:flex;flex-direction:column;justify-content:space-between;padding:22px;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease;height:170px}.post-card:hover{transform:translateY(-6px);box-shadow:0 6px 14px #00000026}.post-header h3{font-size:22px;font-weight:700;margin:0}.post-author-top{display:flex;align-items:center;gap:6px;font-size:16px;color:#555}.author-profile{width:24px;height:24px;border-radius:50%}.post-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px}.post-meta{display:flex;align-items:center;font-size:15px;color:#555;gap:10px}.post-date{font-size:14px;color:#888}.post-preview{margin-top:10px;font-size:15px;color:#444;line-height:1.5;flex-grow:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.post-container{width:100%;margin:0 auto;padding:0}.post-list{max-width:1400px;margin:60px auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:28px;padding:0 40px 80px}.no-post{text-align:center;color:#888;margin-top:40px}.mypage .mp-container{width:100%;max-width:1600px;margin:80px auto;padding:0 40px}.mypage .mp-layout{display:grid;grid-template-columns:280px 1fr;grid-template-areas:"profile posts" "profile comments";gap:40px;width:100%;align-items:start}@media(max-width:960px){.mypage .mp-layout{grid-template-columns:1fr;grid-template-areas:"profile" "posts" "comments"}}.mp-post-section{grid-area:posts}.mp-comment-section{grid-area:comments}.mp-profile-card{grid-area:profile;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:40px 24px;box-shadow:0 4px 16px #0000001a;width:100%;max-width:280px;text-align:center;display:flex;flex-direction:column;align-items:center;align-self:stretch}.mp-avatar{width:140px;height:140px;border-radius:50%;border:2px solid var(--border-black);object-fit:cover;margin-bottom:16px}.mp-name{font-size:22px;font-weight:700;margin-bottom:6px}.mp-email,.mp-joined{font-size:15px;color:var(--gray);margin-bottom:8px}.mp-actions-col{display:flex;flex-direction:column;gap:10px;margin-top:auto;width:100%}.mp-actions-col .btn{width:100%;height:44px;font-size:15px;font-weight:600;border-radius:10px;cursor:pointer;border:none;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.mp-actions-col .btn-light{background:#fff;border:1px solid black;color:var(--text)}.mp-actions-col .btn-light:hover{background:#000;color:#fff}.mp-actions-col .btn-accent{background:#000;color:#fff;border:1px solid black}.mp-actions-col .btn-accent:hover{background:#fff;color:#000}.mp-pagination{margin-top:20px;display:flex;gap:10px;justify-content:center}.mp-page,.mp-page-nav{width:38px;height:38px;border:1px solid black;border-radius:8px;background:var(--bg);font-weight:600;cursor:pointer}.mp-page:hover,.mp-page-nav:hover:not(:disabled){background:var(--primary);color:#fff}.mp-page.is-active{background:var(--primary);color:#fff}.mp-page-nav:disabled{opacity:.4;cursor:default}.mp-page-select{margin-left:12px;padding:6px 10px;border:1px solid var(--border-black);border-radius:6px;background:#fff;cursor:pointer}.mp-card{background:var(--card);border:1px solid var(--border);border-radius:16px;min-height:350px;padding:36px 40px;box-shadow:0 4px 16px #0000001a;width:100%}.mp-section-title{font-size:20px;font-weight:700;margin-bottom:20px}.mp-post-list,.mp-comment-list{display:flex;flex-direction:column;gap:14px;max-height:300px;overflow-y:auto}.mp-item{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--border);cursor:pointer}.mp-item:last-child{border-bottom:none}.mp-title,.mp-id{font-size:17px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mp-content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mp-meta{display:flex;gap:14px;font-size:14px;color:var(--gray)}.mp-clickable:hover{background:#f3f4f6}.image-slider-section{width:600px;margin:20px auto;position:relative}.image-slider{width:100%;max-height:600px;overflow:hidden;border-radius:12px}.image-slider img{width:100%;display:none;height:auto;object-fit:contain;background-color:#000}.image-slider img.active{display:block}.slider-btn{position:absolute;top:50%;transform:translateY(-50%);background:#0006;color:#fff;border:none;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:22px;z-index:10}.slider-btn.left{left:-50px}.slider-btn.right{right:-50px}.slider-btn:hover{background:#0009}.comment-item{width:544px;min-height:65px;background:#f4f5f7;border-radius:8px;padding:10px 16px;display:flex;flex-direction:column;justify-content:center}.comment-top{display:flex;justify-content:space-between;align-items:center}.comment-author{font-weight:600;font-size:16px}.comment-date{font-weight:600;font-size:12px;color:#888;margin-left:5px}.comment-text{margin-top:4px;font-size:18px;color:#333;line-height:1.4}.comment-actions button{background:#fff;border:1px solid var(--border-black);padding:4px 10px;font-size:14px;color:var(--text);border-radius:6px;margin:3px;cursor:pointer;transition:.2s}.comment-actions button:hover{background:var(--primary);color:#fff;border-color:var(--primary);transform:translateY(-1px)}.comment-edit-area{width:100%;min-height:80px;font-size:16px;padding:8px;border-radius:6px;border:1px solid #ccc;resize:vertical;box-sizing:border-box}.comment-edit-wrap{display:flex;flex-direction:column;gap:8px;margin-top:6px}.comment-list{display:flex;flex-direction:column;align-items:center;gap:10px}.no-comments{text-align:center;color:#777;margin-top:10px}.comment-text{white-space:pre-wrap;word-break:break-word}.comment-section{width:595px;min-height:205px;background:#fff;border-radius:8px;margin:0 auto 24px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:55px}.comment-box{width:544px;height:94px;padding:10px 12px;display:flex;flex-direction:column;justify-content:flex-start}.comment-box textarea{flex:1;border:none;outline:none;resize:none;font-size:15px;color:#111;font-family:Noto Sans KR,sans-serif;padding:4px}.comment-submit-btn{width:138px;height:39px;background:var(--primary);border:none;color:#fff;font-weight:600;border-radius:6px;position:absolute;bottom:8px;right:26px;cursor:pointer;transition:.2s}.comment-submit-btn:hover{opacity:.9}.post-detail-container{max-width:800px;margin:0 auto;padding:32px}.post-header{display:flex;justify-content:space-between;align-items:center}.post-title{font-size:24px;font-weight:700;margin-bottom:6px}.post-text{white-space:normal;word-break:break-word}.post-meta-top{font-size:14px;color:#555;display:flex;gap:8px}.post-actions{display:flex;gap:8px}.post-actions button{width:50px;height:27px;border:1px solid var(--border-black);background:#fff;font-size:14px;color:var(--text);border-radius:6px;cursor:pointer;transition:all .2s ease;font-weight:500}.post-actions button:hover{background:var(--primary);color:#fff;border-color:var(--primary);transform:translateY(-1px)}.post-content{display:flex;flex-direction:column;align-items:center;margin-bottom:16px}.post-text{width:600px;min-height:231px;border-radius:8px;padding:16px;font-size:20px;line-height:1.6;margin-top:12px}.post-stats{display:flex;justify-content:center;gap:16px;margin:16px 0 24px}.stat-box{width:123px;height:71px;border-radius:12px;background:#e5e7eb;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.stat-box strong{font-size:18px;font-weight:700}.stat-box span{font-size:13px;color:#333}.like-box i{font-size:20px;line-height:20px;display:block;margin-bottom:2px;transition:transform .15s ease}.like-box:hover i{transform:scale(1.15)}.like-box strong{font-size:18px;font-weight:700}.divider-line{width:595px;height:1px;background:#ccc;margin:0 auto 24px}.file-dropzone{width:100%;border-radius:10px;border:1px dashed var(--border-black);background:#f9fafb;padding:14px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.file-text{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px}.file-placeholder{font-size:14px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-select-btn{flex-shrink:0;height:34px;padding:0 14px;border-radius:8px;border:1px solid var(--border-black);background:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s ease}.file-select-btn:hover{background:var(--primary);color:#fff}.image-preview-list{margin-top:10px;display:flex;flex-wrap:wrap;gap:10px}.image-preview-item{width:80px;height:80px;border-radius:10px;overflow:hidden;border:1px solid #e5e7eb;position:relative}.image-preview-item img{width:100%;height:100%;object-fit:cover}.post-create-page{background:var(--bg);min-height:100vh}.create-wrapper{width:100%;max-width:900px;margin:140px auto 80px;padding:0 24px;display:flex;justify-content:center}.create-card{width:100%;max-width:720px;background:#fff;border-radius:16px;border:1px solid var(--border);padding:32px 28px 40px;box-shadow:0 6px 18px #0000000f}.create-title{font-size:22px;font-weight:700;margin-bottom:24px}.create-form{display:flex;flex-direction:column;gap:24px}.create-field label{display:block;font-size:15px;font-weight:700;margin-bottom:8px}.create-field input[type=text],.create-field textarea{width:100%;border-radius:10px;border:1px solid var(--border-black);padding:10px 12px;font-size:15px;outline:none;resize:vertical}.create-field textarea{min-height:160px}.create-actions{display:flex;justify-content:flex-end;gap:10px}.create-actions .btn-cancel,.create-actions .btn-save{height:40px;padding:0 18px;border-radius:10px;font-weight:600;cursor:pointer;border:1px solid var(--border-black);transition:all .15s ease}.create-actions .btn-cancel{background:#fff;color:var(--text)}.create-actions .btn-cancel:hover{background:#0000000f}.create-actions .btn-save{background:#000;color:#fff;border-color:#000}.create-actions .btn-save:hover:enabled{background:#fff;color:#000}.back-btn{width:90px;height:30px;background:transparent;color:#000;border:none;border-radius:6px;cursor:pointer;font-weight:500;margin:10px auto 0;display:block}.existing-image-list{margin-top:6px;display:flex;flex-wrap:wrap;gap:10px;min-height:40px}.empty-existing-text{font-size:14px;color:#6b7280}.existing-help-text{font-size:13px;color:#6b7280;margin-top:4px}.existing-image-item{width:80px;height:80px;border-radius:10px;overflow:hidden;border:1px solid #e5e7eb;position:relative;cursor:pointer;transition:all .15s ease}.existing-image-item img{width:100%;height:100%;object-fit:cover}.existing-image-item .delete-badge{position:absolute;bottom:4px;left:4px;right:4px;height:20px;border-radius:999px;background:#0000008c;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center}.existing-image-item.marked-delete{filter:grayscale(.9);opacity:.6;border-color:#ef4444}.profile-edit-page{background:var(--bg)}.profile-edit-wrapper{width:100%;max-width:900px;margin:140px auto;padding:0 24px;display:flex;justify-content:center}.profile-edit-card{width:100%;max-width:600px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:40px 34px 48px;box-shadow:0 6px 16px #0000000f}.edit-title{font-size:22px;font-weight:700;margin-bottom:28px}.edit-form{display:flex;flex-direction:column;gap:32px}.edit-avatar-row{display:flex;align-items:center;gap:24px}.edit-avatar-preview{width:96px;height:96px;border-radius:50%;border:1px solid var(--border-black);background:#e5e7eb;display:flex;justify-content:center;align-items:center;overflow:hidden}.edit-avatar-preview img{width:100%;height:100%;object-fit:cover}.avatar-initial{font-size:30px;font-weight:700;color:#444}.edit-avatar-side{display:flex;flex-direction:column;gap:6px}#avatarInput{display:none}.edit-avatar-btn{display:inline-flex;justify-content:center;align-items:center;height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--border-black);background:#fff;font-weight:600;color:var(--text);cursor:pointer;transition:all .15s ease}.edit-avatar-btn:hover{background:var(--primary);color:#fff}.edit-helper-text{font-size:12px;color:var(--gray)}.edit-readonly-box{background:#f9fafb;border:1px solid var(--border);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:10px}.readonly-row{display:flex;justify-content:space-between;font-size:14px}.ro-label{font-weight:700;color:#333}.ro-value{color:#555}.edit-field label{font-size:15px;font-weight:700;margin-bottom:6px;display:block}.edit-field input{width:100%;height:44px;border-radius:10px;border:1px solid var(--border-black);padding:10px 12px;font-size:15px}.edit-actions{display:flex;justify-content:flex-end;gap:10px}.btn-cancel,.btn-save{height:42px;padding:0 18px;border-radius:10px;font-weight:600;cursor:pointer;transition:all .15s ease}.btn-cancel{border:1px solid var(--border-black);background:#fff}.btn-cancel:hover{background:#0000000f}.btn-save{background:#000;color:#fff;border:1px solid #000}.btn-save:hover{background:#fff;color:#000}.signup-section{display:flex;flex-direction:column;align-items:center;padding-top:6vh}.signup-title{font-family:Pretendard,sans-serif;font-weight:700;font-size:32px;margin-bottom:32px}.signup-box{width:392px;background:var(--bg);display:flex;flex-direction:column;gap:10px}.profile-label{align-self:flex-start;font-weight:500;margin-left:16px;margin-bottom:6px}.profile-area{display:flex;flex-direction:column;align-items:center;margin-bottom:8px}.profile-upload input[type=file]{display:none}.profile-preview{width:100px;height:100px;border-radius:50%;background-color:#d1d5db;background-size:contain!important;background-repeat:no-repeat;background-position:center;display:flex;justify-content:center;align-items:center;font-size:36px;color:#555;cursor:pointer;margin-bottom:4px}.helper-text{font-size:12px;margin-top:2px;color:#00000080;text-align:left;width:100%;padding-left:2px}.helper-text.error{color:red}.signup-box input{width:100%;height:40px;border:1px solid rgba(0,0,0,.15);border-radius:8px;padding:8px;margin-bottom:2px}.button-area{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:20px}.signup-submit{width:360px;height:40px;background:var(--primary);border:none;border-radius:8px;color:#fff;font-weight:600;cursor:not-allowed;transition:background .3s,opacity .2s}.signup-submit.active{background:#222;cursor:pointer}.signup-submit.active:hover{opacity:.9}.go-login{background:transparent;color:var(--text);border:none;cursor:pointer;font-weight:500}.layout{display:flex;flex-direction:column;min-height:100vh}:root{--primary: #000000;--bg: #ffffff;--text: #111111;--gray: #6b7280;--border: #e5e7eb;--border-black: #000000;--card: #ffffff}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Pretendard,Noto Sans KR,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column}