@font-face{font-family:YPairing;src:url(/fonts/YPairingFont-Regular.ttf) format("truetype");font-weight:400;font-display:swap}@font-face{font-family:YPairing;src:url(/fonts/YPairingFont-Bold.ttf) format("truetype");font-weight:700;font-display:swap}*{margin:0;padding:0;box-sizing:border-box}body{font-family:YPairing,Noto Sans KR,sans-serif;background:#111;color:#f0e0d0;overflow:hidden;height:100vh}#root{height:100vh;display:flex;flex-direction:column}.app-shell{display:flex;flex-direction:column;height:100vh}.main-nav{display:flex;align-items:flex-end;gap:4px;padding:18px 18px 0;flex-shrink:0;z-index:100;background:#111;position:relative}.main-nav.nav-top15{background:#f5f0e8}.main-nav-tab{padding:10px 28px 14px;border:2px solid #444;border-bottom:none;border-radius:8px 8px 0 0;background:#252525;font-family:inherit;font-size:15px;font-weight:900;cursor:pointer;transition:all .15s;color:#666;position:relative;top:2px}.main-nav-tab:hover{color:#bbb}.nav-top15 .main-nav-tab{background:#e5ddd0;border-color:#c0b8a8;color:#aaa;top:0;border-bottom:none;padding-bottom:12px}.nav-top15 .main-nav-tab:hover{color:#666}.main-nav-tab.active{top:0;padding-bottom:10px;z-index:1}.main-nav-tab.active.tab-chart{color:#ff8c00;background:#1a1a1a;border-color:#ff8c00;border-bottom:2px solid #1a1a1a}.main-nav-tab.active.tab-top15{color:#333;background:#fff;border-color:#222;border-bottom:2px solid #fff}.main-nav:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:#ff8c00}.nav-top15:after{background:#d0c8b8}.topbar{display:flex;align-items:center;gap:10px;padding:10px 18px;background:#1a1a1a;flex-shrink:0;z-index:100;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.topbar::-webkit-scrollbar{height:3px}.topbar::-webkit-scrollbar-thumb{background:#444;border-radius:2px}.topbar-actions{display:flex;gap:8px;margin-left:auto}.btn{padding:7px 14px;border:1.5px solid #444;border-radius:6px;background:#222;color:#ddd;font-size:13px;font-family:inherit;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap}.btn:hover{background:#333;border-color:#ff8c00;color:#ff8c00}.btn-primary{background:#ff8c00;border-color:#ff8c00;color:#000}.btn-primary:hover{background:#ffa333;border-color:#ffa333;color:#000}.btn-danger{border-color:#663;color:#f66}.btn-danger:hover{background:#311;border-color:#f44;color:#f44}.layout{display:flex;flex:1;overflow:hidden}.sidebar{width:280px;background:#161616;border-right:1px solid #333;display:flex;flex-direction:column;flex-shrink:0}.sidebar-section{padding:14px;border-bottom:1px solid #2a2a2a}.sidebar-section label{display:block;font-size:11px;color:#888;margin-bottom:6px;font-weight:700;letter-spacing:.5px}.mode-toggle{display:flex;gap:6px}.mode-toggle button{flex:1;padding:7px;border:1.5px solid #444;border-radius:4px;background:#222;color:#777;font-size:13px;font-family:inherit;font-weight:700;cursor:pointer;transition:all .2s}.mode-toggle button.active{background:#ff8c00;border-color:#ff8c00;color:#000}.search-input{width:100%;padding:9px 12px;border:1.5px solid #333;border-radius:4px;background:#222;color:#eee;font-size:13px;font-family:inherit;outline:none;transition:border-color .2s}.search-input:focus{border-color:#ff8c00;background:#1a1a1a}.search-input::placeholder{color:#666}.search-pagination{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 10px;border-top:1px solid #2a2a2a;flex-shrink:0}.pagination-btn{font-size:11px;padding:5px 10px}.pagination-btn:disabled{opacity:.3;pointer-events:none}.pagination-page{font-size:12px;color:#888;font-weight:700;min-width:20px;text-align:center}.search-results{flex:1;overflow-y:auto;padding:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:start}.search-results::-webkit-scrollbar{width:4px}.search-results::-webkit-scrollbar-thumb{background:#444;border-radius:2px}.search-result-item{cursor:pointer;border-radius:3px;overflow:hidden;border:1.5px solid #333;transition:all .2s;position:relative;background:#1a1a1a}.search-result-item:hover{border-color:#ff8c00}.search-result-item img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block}.search-result-item .title-overlay{position:absolute;bottom:0;left:0;right:0;padding:3px 6px;background:#000000d9;color:#ff8c00;font-size:9px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-loading{grid-column:1 / -1;text-align:center;color:#666;padding:24px;font-size:13px}.manual-url{padding:14px;border-bottom:1px solid #2a2a2a;overflow:hidden}.manual-url-row{display:flex;gap:6px;min-width:0}.manual-url-row input{flex:1;min-width:0;padding:7px 10px;border:1.5px solid #333;border-radius:4px;background:#222;color:#eee;font-size:12px;font-family:inherit;outline:none}.manual-url-row input:focus{border-color:#ff8c00}.manual-url-row button{padding:6px 10px;flex-shrink:0;font-size:12px}.chart-container{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto;background:#0e0e0e}.chart-scaler{width:900px;aspect-ratio:900 / 640;flex-shrink:0}.chart{position:relative;width:900px;height:640px;background:#111;border-radius:12px;overflow:visible;-webkit-user-select:none;user-select:none;touch-action:none;transform-origin:top left;border:2px solid #2a2a2a}.chart-axis-x{position:absolute;top:50%;left:40px;right:40px;height:2px;background:#ff8c004d;pointer-events:none;z-index:1}.chart-axis-y{position:absolute;left:50%;top:40px;bottom:40px;width:2px;background:#ff8c004d;pointer-events:none;z-index:1}.axis-label{position:absolute;font-weight:900;font-size:18px;z-index:2;cursor:text;padding:5px 14px;border-radius:20px;background:#ff8c00;white-space:nowrap}.axis-label:hover{background:#ffa333}.axis-label-left{left:14px;top:50%;transform:translateY(-50%)}.axis-label-right{right:14px;top:50%;transform:translateY(-50%)}.axis-label-top{top:10px;left:50%;transform:translate(-50%)}.axis-label-bottom{bottom:10px;left:50%;transform:translate(-50%)}.axis-label input{background:transparent;border:none;color:#000;font-weight:900;font-size:18px;font-family:inherit;outline:none;width:auto;text-align:center}.my-pick{position:absolute;transform:translate(-50%,-50%);cursor:grab;z-index:25;-webkit-user-select:none;user-select:none}.my-pick-box{border:2.5px dashed rgba(255,60,60,.6);border-radius:8px}.my-pick:hover .my-pick-box{border-color:#ff3c3c;box-shadow:0 0 14px #ff3c3c4d}.my-pick-resize{position:absolute;bottom:-5px;right:-5px;width:12px;height:12px;background:#ff3c3c;border-radius:50%;cursor:nwse-resize;opacity:0;transition:opacity .15s}.my-pick:hover .my-pick-resize{opacity:1}.my-pick-label{position:absolute;top:-18px;left:50%;transform:translate(-50%);padding:3px 10px;background:#ff3c3c;color:#fff;font-size:16px;font-weight:900;border-radius:3px;white-space:nowrap}.zone-box{position:absolute;border:2.5px dashed rgba(255,140,0,.5);border-radius:8px;cursor:grab;z-index:3}.zone-box:hover{border-color:#ff8c00;box-shadow:0 0 12px #ff8c0026}.zone-box-delete{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:#f44;color:#fff;border:2px solid #222;font-size:11px;line-height:16px;text-align:center;cursor:pointer;opacity:0;transition:opacity .15s;z-index:5}.zone-box:hover .zone-box-delete{opacity:1}.zone-box-resize{position:absolute;bottom:-5px;right:-5px;width:12px;height:12px;background:#ff8c00;border-radius:50%;cursor:nwse-resize;opacity:0;transition:opacity .15s;z-index:5}.zone-box:hover .zone-box-resize{opacity:1}.chart-item{position:absolute;cursor:grab;z-index:10;border:2.5px solid rgba(255,140,0,.6);border-radius:4px;transition:box-shadow .15s}.chart-item:hover{box-shadow:0 4px 18px #ff8c0066;z-index:20}.chart-item.dragging{cursor:grabbing;box-shadow:0 6px 28px #ff8c0080;z-index:30;opacity:.85}.chart-item img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;border-radius:2px}.chart-item .item-label{position:absolute;bottom:-22px;left:50%;transform:translate(-50%);background:#ff8c00e6;color:#000;font-size:10px;font-weight:700;padding:2px 6px;border-radius:3px;white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.chart-item .item-delete{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:#f44;color:#fff;border:2px solid #222;font-size:11px;line-height:16px;text-align:center;cursor:pointer;opacity:0;transition:opacity .15s;z-index:5}.chart-item:hover .item-delete{opacity:1}.chart-item .item-layer-controls{position:absolute;top:50%;left:-26px;transform:translateY(-50%);display:flex;flex-direction:column;gap:1px;opacity:0;transition:opacity .15s;z-index:5}.chart-item:hover .item-layer-controls{opacity:1}.chart-item .item-layer-controls button{width:20px;height:18px;border:1px solid #555;border-radius:3px;background:#222;color:#ccc;font-size:10px;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}.chart-item .item-layer-controls button:hover{background:#ff8c00;border-color:#ff8c00;color:#000}.chart-item .item-resize{position:absolute;bottom:-5px;right:-5px;width:12px;height:12px;background:#ff8c00;border-radius:50%;cursor:nwse-resize;opacity:0;transition:opacity .15s;z-index:5}.chart-item:hover .item-resize{opacity:1}.zone-label{position:absolute;z-index:15;cursor:grab;padding:3px 10px;border-radius:3px;background:#ff8c001f;border:1.5px solid rgba(255,140,0,.4);font-size:14px;font-weight:700;color:#ff8c00;white-space:nowrap}.zone-label:hover{border-color:#ff8c00;background:#ff8c0040}.zone-label.dragging{cursor:grabbing}.zone-label input{background:transparent;border:none;color:#ff8c00;font-weight:700;font-size:14px;font-family:inherit;outline:none}.zone-label .zone-delete{position:absolute;top:-8px;right:-8px;width:18px;height:18px;border-radius:50%;background:#f44;color:#fff;border:2px solid #222;font-size:10px;line-height:14px;text-align:center;cursor:pointer;opacity:0;transition:opacity .15s}.zone-label:hover .zone-delete{opacity:1}.export-watermark{display:none}.chart.exporting .export-watermark,.top15-grid.exporting .export-watermark{display:block;position:absolute;bottom:6px;right:10px;font-size:10px;z-index:50}.chart.exporting .export-watermark{color:#ff8c004d}.top15-grid.exporting .export-watermark{color:#00000026}.chart.exporting .item-delete,.chart.exporting .item-layer-controls,.chart.exporting .item-resize,.chart.exporting .zone-delete,.chart.exporting .zone-box-delete,.chart.exporting .zone-box-resize,.chart.exporting .my-pick-resize,.top15-grid.exporting .top15-remove{display:none!important}.chart.exporting,.top15-grid.exporting{border:none!important;border-radius:0!important}.empty-state{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#555;font-size:14px;pointer-events:none;z-index:0}.empty-state p{margin-top:6px;font-size:12px;color:#444}.file-upload-btn{cursor:pointer;background:#222}.file-upload-btn:hover{background:#333;border-color:#ff8c00;color:#ff8c00}@media(max-width:768px){body{overflow:auto}#root{height:auto;min-height:100vh}.topbar{flex-wrap:wrap;gap:6px;padding:10px 12px}.topbar h1{font-size:16px;width:100%}.topbar-actions{margin-left:0}.topbar .btn{font-size:11px;padding:5px 10px}.layout{flex-direction:column;overflow:auto}.sidebar{width:100%;border-right:none;border-bottom:2px solid #ff8c00}.search-results{max-height:200px}.chart-container{padding:10px;overflow:auto;align-items:flex-start}.app-shell{height:auto;min-height:100vh}.main-nav{padding:0 10px}.main-nav-tab{padding:10px 16px;font-size:14px}.top15-container{padding:10px}.top15-grid{padding:10px;gap:8px;grid-template-columns:repeat(3,1fr)}.top15-actions{justify-content:center}.modal{width:95vw;max-height:90vh;padding:16px}.modal-results{grid-template-columns:repeat(3,1fr)}}.top15-container{flex:1;display:flex;flex-direction:column;align-items:center;padding:20px;overflow:auto;background:#f5f0e8}.top15-grid{width:100%;max-width:900px;background:#fff;border-radius:8px;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:24px;position:relative}@media(max-aspect-ratio:4/5){.top15-grid{grid-template-columns:repeat(3,1fr);max-width:540px}}.top15-actions{display:flex;gap:10px;padding:16px 0;justify-content:center}.top15-actions .btn{background:#fff;border-color:#ccc;color:#333}.top15-actions .btn:hover{border-color:#222;color:#222;background:#fff}.top15-actions .btn-primary{background:#222;border-color:#222;color:#fff}.top15-actions .btn-primary:hover{background:#444;border-color:#444;color:#fff}.top15-slot{aspect-ratio:2/3;border-radius:4px;position:relative;cursor:pointer;transition:all .15s}.top15-slot.empty{border:3px dashed #ccc;display:flex;align-items:center;justify-content:center;background:#faf8f4}.top15-slot.empty:hover{border-color:#888;background:#f0ece4}.top15-slot.selected{border-color:#222!important;border-style:solid!important;box-shadow:0 4px 16px #0000001f}.top15-slot.filled{border:3px solid #222}.top15-slot.filled:hover{box-shadow:0 4px 12px #00000026}.top15-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:2px}.top15-title{position:absolute;bottom:0;left:0;right:0;padding:3px 6px;background:#000c;color:#fff;font-size:10px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top15-empty-label{font-size:28px;font-weight:900;color:#ccc}.top15-remove{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:#f44;color:#fff;border:2px solid #fff;font-size:11px;line-height:16px;text-align:center;cursor:pointer;opacity:0;transition:opacity .15s;z-index:5}.top15-slot:hover .top15-remove{opacity:1}.modal-overlay{position:fixed;inset:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:9000}.modal{background:#1a1a1a;border:2px solid #ff8c00;border-radius:8px;width:520px;max-width:90vw;max-height:80vh;display:flex;flex-direction:column;padding:20px}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.modal-header h3{font-size:16px;font-weight:900;color:#ff8c00}.modal-mode-tabs{display:flex;gap:4px}.modal-mode-tab{padding:6px 14px;border-radius:4px;border:1px solid #444;background:transparent;color:#aaa;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s}.modal-mode-tab:hover{color:#fff;border-color:#666}.modal-mode-tab.active{background:#ff8c00;color:#fff;border-color:#ff8c00}.modal-close{width:28px;height:28px;border-radius:4px;background:#333;color:#aaa;border:none;font-size:14px;cursor:pointer}.modal-close:hover{background:#f44;color:#fff}.modal .search-input{margin-bottom:14px}.modal-manual{border-top:1px solid #333;padding-top:12px;margin-top:12px}.modal-manual-label{font-size:11px;color:#888;font-weight:700;letter-spacing:.5px;margin-bottom:6px}.modal-results{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-content:start;max-height:50vh}.modal-results::-webkit-scrollbar{width:4px}.modal-results::-webkit-scrollbar-thumb{background:#444;border-radius:2px}.modal-light{background:#fff;border-color:#ccc}.modal-light .search-input{background:#f5f0e8;border-color:#d0c8b8;color:#222}.modal-light .search-input:focus{border-color:#222;background:#fff}.modal-light .search-input::placeholder{color:#999}.modal-light .modal-close{background:#eee;color:#666}.modal-light .modal-close:hover{background:#f44;color:#fff}.modal-light .modal-mode-tab{border-color:#ccc;color:#888}.modal-light .modal-mode-tab:hover{color:#222;border-color:#999}.modal-light .modal-mode-tab.active{background:#222;color:#fff;border-color:#222}.modal-light .modal-manual{border-top-color:#ddd}.modal-light .modal-manual-label{color:#999}.modal-light .search-loading{color:#666}.modal-light .modal-results::-webkit-scrollbar-thumb{background:#ccc}.modal-light .title-overlay{background:#000000b3}.mobile-notice-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:9999}.mobile-notice{background:#1a1a1a;border:2px solid #ff8c00;border-radius:6px;padding:32px 28px 24px;text-align:center;max-width:300px}.mobile-notice p{margin:0 0 12px;color:#fff;font-size:16px;font-weight:700}.mobile-notice .btn{margin-top:8px;width:100%}