:root{--bg: #fffdf5;--surface: #fffdf5;--frame: #f0edcc;--text: #02343f;--muted: #5e7072;--accent: #02343f;--accent-weak: #d7e3e2;--like: #d8456f;--border: #e2dcb4}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Apple SD Gothic Neo,Pretendard,Segoe UI,Roboto,sans-serif}a{color:inherit;text-decoration:none}.app{min-height:100vh;display:flex;flex-direction:column}.navbar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}.brand{font-size:20px;font-weight:800;color:var(--accent);letter-spacing:-.5px;white-space:nowrap}.nav-right{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}.nav-maker{font-size:14px;color:var(--muted)}.nav-btn{padding:8px 16px;border-radius:8px;border:1px solid var(--accent);background:var(--accent);color:#fff;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}button.nav-btn{background:var(--surface);color:var(--accent)}.nav-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.container{flex:1;width:100%;max-width:1100px;margin:0 auto;padding:0 24px 80px}.hero{text-align:center;padding:56px 0 28px}.hero-title{margin:0;font-size:30px;font-weight:800;letter-spacing:-.8px}.hero-title-short{display:none}.subtitle{color:var(--muted);margin:12px 0 28px;font-size:16px}.search{display:flex;gap:8px;max-width:620px;margin:0 auto}.search input{flex:1;padding:14px 16px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:15px}.search input:focus{outline:none;border-color:var(--accent)}.search button{padding:0 20px;border-radius:12px;border:none;background:var(--accent);color:#fff;font-weight:700;cursor:pointer;white-space:nowrap}.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 20px}.sort-tabs,.cats{display:flex;flex-wrap:wrap;gap:8px}.sort-tabs button,.cats button{padding:7px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;font-size:13px}.sort-tabs button.active,.cats button.active{background:var(--accent);border-color:var(--accent);color:#fff}.recommend-label{font-weight:600}.link-btn{background:none;border:none;color:var(--accent);cursor:pointer;font-size:14px}.browse-controls{display:flex;align-items:center;gap:16px;margin:18px 0 20px}.cat-scroll{flex:1;min-width:0;display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.cat-scroll::-webkit-scrollbar{display:none}.cat-scroll button{flex-shrink:0;white-space:nowrap;padding:7px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;font-size:13px}.cat-scroll button.active{background:var(--accent);border-color:var(--accent);color:#fff}.browse-controls .sort-tabs{flex-shrink:0}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .12s ease,box-shadow .12s ease}.card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #1c202414}.card-cover{position:relative;width:100%;aspect-ratio:16 / 9;background:var(--bg);padding:12px;border-bottom:1px solid var(--border)}.card-cover img{width:100%;height:100%;object-fit:contain;display:block}.card-cover-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:800;color:var(--accent)}.card-edit{position:absolute;top:10px;right:10px;padding:5px 12px;border-radius:8px;background:#ffffffeb;border:1px solid var(--border);font-size:12px;font-weight:600;color:var(--text)}.card-edit:hover{border-color:var(--accent);color:var(--accent)}.card-body{padding:16px;display:flex;flex-direction:column;gap:10px}.card-title h3{margin:0;font-size:17px}.card-cat{font-size:12px;color:var(--muted)}.card-tagline{margin:0;color:var(--text);font-size:14px;line-height:1.5;flex:1}.card-maker{margin:0;font-size:12px;color:var(--muted)}.card-match{align-self:flex-start;font-size:12px;color:var(--accent);background:var(--accent-weak);padding:3px 8px;border-radius:999px}.card-actions{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding-top:12px}.like{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px}.like.liked{color:var(--like)}.store-links{display:flex;flex-wrap:wrap;gap:8px}.store-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;text-decoration:none;border:1px solid var(--border);background:var(--surface);padding:5px 10px;border-radius:8px}.store-link:hover{border-color:currentColor}.store-ios{color:#111}.store-android{color:#01875f}.state{text-align:center;color:var(--muted);padding:40px 0}.state.error{color:var(--like)}.empty-cta{display:flex;flex-direction:column;align-items:center;gap:16px}.cta-btn{display:inline-block;padding:12px 22px;border-radius:10px;background:var(--accent);color:#fff;font-weight:700}.submit-wrap{display:flex;justify-content:center;padding:40px 0}.submit-card{width:100%;max-width:560px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px}.submit-title{margin:0 0 6px;font-size:22px}.submit-desc{color:var(--muted);font-size:14px;margin:0 0 20px}.auth-form .hint{color:var(--muted);font-weight:400;font-size:12px}.field-label{font-size:13px;color:var(--muted)}.cover-input{display:flex;flex-direction:column;gap:10px}.cover-preview{width:100%;aspect-ratio:16 / 9;border-radius:12px;border:1px dashed var(--border);background:var(--accent-weak);overflow:hidden;display:flex;align-items:center;justify-content:center}.cover-preview img{width:100%;height:100%;object-fit:cover}.cover-preview-ph{color:var(--muted);font-size:13px}.cover-pick{align-self:flex-start;padding:8px 16px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--accent);font-size:13px;font-weight:600;cursor:pointer}.cover-pick:hover{border-color:var(--accent)}.auth-form textarea,.auth-form select{padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:15px;font-family:inherit;resize:vertical}.auth-form textarea:focus,.auth-form select:focus{outline:none;border-color:var(--accent)}.select{position:relative}.select-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:15px;cursor:pointer;text-align:left}.select-trigger.open{border-color:var(--accent)}.select-placeholder{color:var(--muted)}.select-chevron{color:var(--muted);flex-shrink:0;transition:transform .15s ease}.select-trigger.open .select-chevron{transform:rotate(180deg)}.select-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px #1c20241f;max-height:280px;overflow-y:auto;z-index:20}.select-option{padding:10px 12px;border-radius:8px;cursor:pointer;font-size:14px}.select-option:hover{background:var(--accent-weak)}.select-option.selected{color:var(--accent);font-weight:600}.auth-wrap{display:flex;justify-content:center;padding:56px 0}.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px}.auth-tabs{display:flex;gap:8px;margin-bottom:16px}.auth-tabs button{flex:1;padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-weight:600;cursor:pointer}.auth-tabs button.active{background:var(--accent);border-color:var(--accent);color:#fff}.auth-desc{color:var(--muted);font-size:14px;margin:0 0 16px}.auth-form{display:flex;flex-direction:column;gap:14px}.auth-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}.auth-form input{padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:15px}.auth-form input:focus{outline:none;border-color:var(--accent)}.auth-error{margin:0;color:var(--like);font-size:13px}.auth-submit{margin-top:4px;padding:13px;border-radius:10px;border:none;background:var(--accent);color:#fff;font-weight:700;font-size:15px;cursor:pointer}.auth-submit:disabled{opacity:.6;cursor:default}.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:12px}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:var(--border)}.google-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:15px;font-weight:600;cursor:pointer}.google-btn:hover{background:#ece8c2}footer{text-align:center;background:var(--surface);color:var(--muted);font-size:13px;padding:28px 16px;border-top:1px solid var(--border)}footer p{margin:0}.pw-wrap{position:relative;display:flex;align-items:center}.pw-wrap input{flex:1;width:100%;padding-right:44px}.pw-toggle{position:absolute;right:8px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;color:var(--muted);cursor:pointer;padding:0}.pw-toggle:hover{color:var(--text)}.email-row{display:flex;gap:8px}.email-row input{flex:1;min-width:0}.code-btn{flex:0 0 auto;padding:0 14px;border-radius:10px;border:1px solid var(--accent);background:var(--accent-weak);color:var(--accent);font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer}.code-btn:disabled{opacity:.6;cursor:default}.code-input{letter-spacing:6px;font-size:18px!important;font-weight:600}.auth-notice{margin:0;color:var(--accent);font-size:13px;line-height:1.5}.avatar{border-radius:50%;object-fit:cover;display:inline-flex;flex:0 0 auto;background:var(--accent-weak)}.avatar-ph{align-items:center;justify-content:center;font-weight:700;color:var(--accent);text-transform:uppercase}.nav-profile{display:inline-flex;align-items:center;gap:8px;text-decoration:none}.nav-profile .nav-maker{color:var(--text);font-weight:600}.nav-profile:hover .nav-maker{color:var(--accent)}.profile-head{display:flex;align-items:flex-start;gap:20px;padding:28px 0 8px;border-bottom:1px solid var(--border);margin-bottom:24px}.profile-meta{flex:1;min-width:0}.profile-name{margin:0 0 6px;font-size:24px}.profile-bio{margin:0 0 10px;color:var(--text);line-height:1.6;white-space:pre-wrap}.profile-sub{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--muted)}.profile-sub a{color:var(--accent);text-decoration:none}.profile-section-title{font-size:16px;margin:0 0 16px}.profile-section-title .count{color:var(--muted);font-weight:500}.avatar-edit{display:flex;align-items:center;gap:16px;margin-bottom:20px}.avatar-edit-actions{display:flex;flex-direction:column;gap:6px}.settings-actions{display:flex;gap:10px;align-items:center}.settings-actions .auth-submit{flex:1}.card-maker-link{color:var(--muted);text-decoration:none;font-weight:600}.card-maker-link:hover{color:var(--accent);text-decoration:underline}.card-clickable{cursor:pointer}.card-stats{display:flex;align-items:center;gap:12px}.comment-count{font-size:14px;color:var(--muted)}.detail{max-width:760px;margin:0 auto}.detail-back{display:inline-block;margin:8px 0 18px;color:var(--muted);text-decoration:none;font-size:14px}.detail-back:hover{color:var(--accent)}.detail-cover{width:100%;border-radius:16px;background:var(--bg);padding:16px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);min-height:180px}.detail-cover img{max-width:100%;max-height:420px;object-fit:contain;display:block}.detail-cover .card-cover-ph{height:160px}.detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:20px 0 0}.detail-name{margin:8px 0 6px;font-size:26px}.detail-tagline{margin:0 0 12px;color:var(--muted);font-size:16px;line-height:1.5}.detail-maker{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--text);font-weight:600;font-size:14px}.detail-maker:hover{color:var(--accent)}.detail-like{flex:0 0 auto;font-size:16px}.detail-desc{margin:20px 0;line-height:1.75;white-space:pre-wrap;color:var(--text)}.detail-links{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 8px}.store-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:10px;background:var(--accent);color:#fff;text-decoration:none;font-weight:600;font-size:14px}.store-btn.store-ios{background:#111}.store-btn.store-android{background:#01875f}.store-btn.store-web,.store-btn.ghost{background:var(--surface);color:var(--accent);border:1px solid var(--accent)}.comments{margin-top:40px;border-top:1px solid var(--border);padding-top:24px}.comments-title{font-size:18px;margin:0 0 16px}.comments-title .count{color:var(--accent)}.comment-form{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}.comment-form textarea{padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:var(--frame);color:var(--text);font-size:15px;font-family:inherit;resize:vertical}.comment-form textarea:focus{outline:none;border-color:var(--accent)}.comment-form .auth-submit{align-self:flex-end;width:auto;padding:10px 22px}.comment-login{color:var(--muted);font-size:14px;margin-bottom:20px}.comment-login a{color:var(--accent)}.comment-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}.comment-empty{color:var(--muted);font-size:14px;padding:12px 0}.comment{display:flex;gap:12px}.comment-avatar{flex:0 0 auto}.comment-body{flex:1;min-width:0}.comment-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-bottom:4px}.comment-author{font-weight:600;font-size:14px;color:var(--text);text-decoration:none}.comment-author:hover{color:var(--accent)}.comment-time{font-size:12px;color:var(--muted)}.comment-del{margin-left:auto;border:none;background:none;color:var(--muted);font-size:12px;cursor:pointer}.comment-del:hover{color:var(--like)}.comment-content{margin:0;line-height:1.6;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}.comment-reply-btn{border:none;background:none;color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;padding:0}.comment-reply-btn:hover{color:var(--accent)}.reply-list{list-style:none;margin:12px 0 0;display:flex;flex-direction:column;gap:14px;border-left:2px solid var(--border);padding:0 0 0 14px}.comment.reply .comment-author{font-size:13px}.comment.reply .comment-content{font-size:14px}.reply-form{margin-top:12px}.reply-form textarea{width:100%;box-sizing:border-box;resize:vertical;padding:10px 12px;border:1px solid var(--border);border-radius:10px;font:inherit;font-size:14px;background:var(--frame);color:var(--text)}.reply-form textarea:focus{outline:none;border-color:var(--accent)}.reply-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.reply-cancel{border:1px solid var(--border);background:none;color:var(--muted);border-radius:8px;padding:7px 14px;font-size:13px;cursor:pointer}.reply-cancel:hover{color:var(--text)}.reply-submit{width:auto;padding:7px 16px;font-size:13px}@media (max-width: 600px){.navbar{padding:12px 16px}.brand{font-size:18px}.nav-right{gap:8px}.nav-btn{padding:7px 12px;font-size:13px}.nav-profile .nav-maker{display:none}.container{padding:0 16px 60px}.hero-title-full{display:none}.hero-title-short{display:inline}.reply-list{padding-left:10px;gap:12px}.comment{gap:8px}}
