:root{--pill-bg:#fff;--pill-border:#eee;--accent:#ff6f4d;--card-border:#e8e8e8;--text:#111;font-family:Noto Sans KR,system-ui,Arial,sans-serif}body{color:var(--text);background:#fafafa;justify-content:center;align-items:center;min-height:100vh;margin:0;display:flex;overflow:hidden}.container{box-sizing:border-box;background:#fff;width:580px;height:700px;margin:0;padding:16px;overflow-y:auto}.container::-webkit-scrollbar{width:6px}.container::-webkit-scrollbar-track{background:#f9f9f9}.container::-webkit-scrollbar-thumb{background:#ddd;border-radius:3px}.container::-webkit-scrollbar-thumb:hover{background:#bbb}.filters{margin-bottom:16px}.top-buttons{grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px;display:grid}.pill{border:1px solid var(--pill-border);background:var(--pill-bg);cursor:pointer;text-align:center;white-space:nowrap;border-radius:12px;padding:8px 12px;font-size:12px}.pill.hot{background:var(--accent);color:#fff;border-color:var(--accent)}.section-title{color:#333;margin:12px 0 8px;font-size:13px;font-weight:600}.tag-row{flex-wrap:wrap;gap:6px;margin-bottom:16px;display:flex}.tag{border:1px solid var(--pill-border);cursor:pointer;color:#666;background:#f5f5f5;border-radius:16px;padding:6px 10px;font-size:11px}.list{flex-direction:column;gap:12px;display:flex}.card{border:1px solid var(--card-border);background:#fff;border-radius:12px;align-items:flex-start;gap:12px;padding:12px;display:flex;box-shadow:0 1px 3px #0000000d}.thumb{object-fit:cover;object-position:center;border-radius:10px;flex-shrink:0;width:90px;height:90px;display:block}.card-body{flex:1;min-width:0}.title{text-overflow:ellipsis;white-space:nowrap;color:#111;margin:0 0 6px;font-size:15px;font-weight:700;overflow:hidden}.artist{color:#888;margin-bottom:6px;font-size:12px}.addr{color:#666;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px;font-size:11px;overflow:hidden}.date{color:#888;margin-bottom:8px;font-size:11px}.card-tags{flex-wrap:wrap;gap:6px;display:flex}.card-tags .tag{background:#f0f0f0;padding:4px 8px;font-size:10px}.recommendation-container{box-sizing:border-box;background:#fff;flex-direction:column;width:580px;height:700px;margin:0;padding:16px;display:flex}.recommendation-header{margin-bottom:24px}.back-button{cursor:pointer;background:0 0;border:none;margin-bottom:12px;padding:0;font-size:24px}.recommendation-title{text-align:center;margin:0 0 16px;font-size:20px;font-weight:700}.progress-bar{background:#e8e8e8;border-radius:2px;width:100%;height:4px;margin-bottom:8px;overflow:hidden}.progress-fill{background:var(--accent);height:100%;transition:width .3s}.progress-text{color:#999;text-align:center;margin:0;font-size:12px}.recommendation-content{flex-direction:column;flex:1;justify-content:space-between;display:flex}.question-text{text-align:center;color:#111;margin:0 0 20px;font-size:16px;font-weight:600}.choices-grid{flex:1;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;display:grid}.choice-card{cursor:pointer;flex-direction:column;gap:12px;transition:transform .2s;display:flex}.choice-card:hover{transform:scale(1.05)}.choice-card img{aspect-ratio:1;object-fit:cover;border-radius:12px;width:100%}.choice-tag{text-align:center;color:#111;margin:0;font-size:14px;font-weight:600}.vs-divider{color:#999;text-align:center;font-size:18px;font-weight:700}.detail-container{box-sizing:border-box;background:#fff;flex-direction:column;width:580px;height:700px;margin:0;padding:16px;display:flex;overflow-y:auto}.detail-container .back-button{width:fit-content}.detail-content{flex:1}.detail-image{object-fit:cover;border-radius:12px;width:100%;height:250px;margin-bottom:16px}.detail-title{color:#111;margin:0 0 16px;font-size:22px;font-weight:700}.detail-info{flex-direction:column;gap:12px;margin-bottom:16px;display:flex}.info-item{align-items:flex-start;gap:10px;display:flex}.info-icon{min-width:20px;font-size:16px}.info-text{color:#666;word-break:break-word;font-size:13px;line-height:1.4}.detail-tags{flex-wrap:wrap;gap:8px;display:flex}.detail-tag{border:1px solid var(--pill-border);color:#666;background:#f5f5f5;border-radius:16px;padding:6px 12px;font-size:12px}@media (max-width:420px){.thumb{width:88px;height:88px}.container{padding:0 12px}}.image-gallery{border-radius:12px;gap:8px;margin-bottom:24px;display:grid;overflow:hidden}.gallery-grid{grid-template-columns:repeat(3,1fr)}.gallery-horizontal{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.gallery-image{object-fit:cover;cursor:pointer;width:100%;height:200px;transition:transform .2s}.gallery-image:hover{transform:scale(1.02)}.image-modal{z-index:1000;cursor:pointer;background:#000000e6;border-radius:12px;justify-content:center;align-items:center;width:580px;height:700px;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.modal-image{object-fit:contain;cursor:default;width:auto;max-width:420px;height:auto;max-height:600px}.modal-close{color:#fff;cursor:pointer;z-index:1001;background:#fff3;border:none;border-radius:50%;width:40px;height:40px;font-size:24px;position:absolute;top:10px;right:10px}.modal-nav{color:#fff;cursor:pointer;z-index:1001;background:#fff3;border:none;border-radius:50%;width:50px;height:50px;font-size:36px;position:absolute;top:50%;transform:translateY(-50%)}.modal-prev{left:10px}.modal-next{right:10px}.modal-nav:disabled{opacity:.3;cursor:not-allowed}.detail-author{color:#666;margin-bottom:20px;font-size:14px}